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 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2011
    Location
    127.0.0.1
    Posts
    67
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Question I need help with jQuery script

    Hi. My idea is to:
    when I click the dropdown icon on the page, the dropdown drops down(if not already down, else it will hide);
    when I click anywhere else on the page, the dropdown will close itself;

    My script:

    Code:
    m_dropdown_active = false;//Dropdown state
    
    $('*').each(function() {//For each element on the page
    	$(this).on('click',function(event) {//if it is clicked on the element
    		if (event.target.id!="m_dropdown_arrow") {//if the id of element that it is clicked on is not "m_dropdown_arrow", which is my dropdown arrow, close dropdown
    			m_dropdown_active = false;
    			$('#m_dropdown_arrow').css('background','none');
    			alert('close: ' + event.target.id);//alert element id that it is clicked on
    		}
    		else {//if the id is "m_dropdown_arrow", do nothing
    			alert('close');
    		}
    	});
    });
    
    
    function m_dropdown() {//Function for showing/hiding the dropdown
    	if (m_dropdown_active == true) {
    		m_dropdown_active = false;
    		$('#m_dropdown_arrow').css('background','none');
    	}
    	else {
    		m_dropdown_active = true;
    		$('#m_dropdown_arrow').css('background','url("/images/white_transparent.png")');
    	}
    }
    But: when I click on the dropdown arrow, a alert shows with message: "close: ". So the id(event.target.id) is nothing. I also tried $(this).attr('id') but it returned me "undefined".

    Can anyone help me? What am I doing wrong? Or is there any other way to do this? Thanks in advance.
    My website is here: http://www.moowdesign.eu/. It is not complete yet, and I want to add language translations for some languages(including english).

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    You should never ever use the $('*') selector since this will make a script very slow if the DOM becomes large and complicated because then the script will traverse the whole document and select every element, as irrelevant it may be for the current function (e. g. it will also address meta elements in the head etc.).
    What you want is a “click outside” kind of thing and it’s pretty simple. I assume you have two separate elements, one as the trigger (dropdown arrow) and one as the element that is triggered (the dropdown to show/hide).
    PHP Code:
    var inside false;
    $(
    '#dropdown_trigger')
        .
    on({
            
    click: function() {$('#dropdown').fadeToggle();},
            
    mouseenter: function() {inside true;},
            
    mouseleave: function() {inside false;}
        });
    $(
    document).on('click', function() {
        if(!
    inside) {$('#dropdown').fadeOut();}
    }); 
    We define a variable “inside” that is false by default (i. e. pointer is outside of the trigger element’s boundaries). If the mouse hovers over the trigger the variable is set to “true” (i. e. pointer is inside the element’s boundaries). Now, on click anywhere in the page (i. e. the entire document) the dropdown will be hidden but that would also count for the trigger which would fade in and immediately fade out the dropdown again on click, and obviously we don’t want that. We want it to only fade in on click and fade out on a second click. Therefore we check if on click of the document, the the pointer is inside the trigger, so the fadeout will only occur if the pointer is not inside the trigger element’s boundaries. And we toggle the fade separately on click of the trigger. Makes sense?

    Also, don’t add CSS with jQuery. Rather, add and remove an HTML class with jQuery, and apply the CSS to that class in a separate stylesheet.

  • Users who have thanked VIPStephan for this post:

    sonic656 (07-16-2014)

  • #3
    New Coder
    Join Date
    Sep 2011
    Location
    127.0.0.1
    Posts
    67
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Thanks a lot! This fixed my issue
    My website is here: http://www.moowdesign.eu/. It is not complete yet, and I want to add language translations for some languages(including english).


  •  

    Posting Permissions

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