Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    23
    Thanks
    2
    Thanked 1 Time in 1 Post

    Exiting Function

    The code below is simply supposed to have a menu show up whenever one of the paragraphs is clicked on. There are two options in that menu: Turn the paragraph that was clicked red or exit(hide) the menu. The problem I'm having is that I cannot find out how to get out of the two functions when exit/hide is clicked on.

    So if I click on Paragraph 1 and hide the menu, I want to be able to turn another paragraph red without it affecting the first paragraph. I hope this makes sense. Also, I know there are easier ways of doing this task, but my goal is not to simplify this task. I want to learn how to fix the problem as it is presented. Anyway, thanks in advance!

    Code:
    <html>
    <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(".numbers").live('click', function(event){
    	$('.action, .menuhead').css('visibility','visible');
    	var num = $(this).attr('id');
    
    	$(".menuhead").click(function(){
    		$('.menuhead, .action').css('visibility', 'hidden');
    		//I need to exit both functions here
    	});
    	
    	$(".action").click(function(){
    		$('.menuhead, .action').css('visibility', 'hidden');
    		$('#'+num).css('color','red');
    	});
    });
    
    
    </script>
    </head>
    <body>
    <p class='numbers' id='1'>1</p>
    <p class='numbers' id='2'>2</p>
    <p class='numbers' id='3'>3</p>
    </div>
    <p class='menuhead' style='visibility: hidden'>Exit Menu</p>
    <p class='action' style='visibility: hidden'>Cange Color</p>
    </body>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    EDIT: My post was nonsense
    Last edited by devnull69; 07-13-2011 at 10:11 AM.

  • #3
    New Coder
    Join Date
    Feb 2008
    Posts
    29
    Thanks
    4
    Thanked 3 Times in 3 Posts
    a simple way would be to attach each event separately, make 'num' global to the functions, et voila... (i think a more elegant solution with callbacks and such might work too, but probably unnecessary here)

    Code:
    $(document).ready(function(){
    	var num = "";
    	$(".numbers").live('click', function(event){
    		$('.action, .menuhead').css('visibility','visible');
    		num = $(this).attr('id');
    	});
    	$(".menuhead").live('click', function(){
    		$('.menuhead, .action').css('visibility', 'hidden');
    	});
    	$(".action").live('click', function(){
    		$('.menuhead, .action').css('visibility', 'hidden');
    		$('#'+num).css('color','red');
    	});
    });

  • Users who have thanked ereignis for this post:

    mikhial66 (07-22-2011)

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Test

    This is for testing

    Quote Originally Posted by ereignis View Post
    a simple way would be to attach each event separately, make 'num' global to the functions, et voila... (i think a more elegant solution with callbacks and such might work too, but probably unnecessary here)

    Code:
    $(document).ready(function(){
    	var num = "";
    	$(".numbers").live('click', function(event){
    		$('.action, .menuhead').css('visibility','visible');
    		num = $(this).attr('id');
    	});
    	$(".menuhead").live('click', function(){
    		$('.menuhead, .action').css('visibility', 'hidden');
    	});
    	$(".action").live('click', function(){
    		$('.menuhead, .action').css('visibility', 'hidden');
    		$('#'+num).css('color','red');
    	});
    });

  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    If it doesn't need to be done with jquery, maybe use this demo as a guide.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #menu {
                    display: none;
                }
            </style>
            <script type="text/javascript">
                function changeParColor(obj){
                    curParO = obj;
                    menuO.style.display = 'block';
                }
                function hideMenu(){
                    curParO = '';
                    menuO.style.display = 'none';
                }
                window.onload=function(){
                    menuO = document.getElementById('menu');
                    //set the paras onclicks
                    var parasO = document.getElementsByClassName('paras');
                    for(i=0; i < parasO.length; i++){
                        parasO[i].onclick = function(){changeParColor(this);}
                    }
                    //set the menu btns onclicks
                    document.getElementById('btnChangeColor').onclick=function(){
                        curParO.style.color = 'red';
                        hideMenu();
                    }
                    document.getElementById('btnCancel').onclick=function(){
                        hideMenu();
                    }
                }
            </script>
        </head>
        <body>
            <p class="paras">Parag. 1</p>
            <p class="paras">Parag. 2</p>
            <p class="paras">Parag. 3</p>
            <div id="menu">
                <button id="btnChangeColor">Change color</button>
                <button id="btnCancel">Cancel</button>
            </div>
        </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •