SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2014
    Posts
    70
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    JQuery: Toggling Styles Upon Toggling Slide

    My code sets upon click but does not unset upon clicking again. I've tested in the css and .is(':visible') always comes out true, however I've been browsing and have tried multiple ways and cannot get it working.

    Code:
    $('.TopNavDropDown').click(function(){
    	$('#TopNavList').slideToggle('slow');
    	if($('#TopNavList').is(':visible')){
    		$('.TopNavDropDownWrap').css('background-color','#f7dd71');
    		$('.TopNavDropDownWrap a').css('color','#b11016');
    	} else {
    		$('.TopNavDropDownWrap').css('background', 'url("http://egentec.com/raffles/images/navi-bg.png")');
    		$('.TopNavDropDownWrap a').css('color','#f7dd71');
    	}
    });
    Live View: http://rafflebananza.com/admin/test.html

    Please not you must make your window width 834px or lower.

    Best Regards,
    Tim

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by MrTIMarshall View Post
    My code sets upon click but does not unset upon clicking again. I've tested in the css and .is(':visible') always comes out true, however I've been browsing and have tried multiple ways and cannot get it working.
    It seems that the attempt to execute the following code just before the above, is preventing further execution of your code.

    Code javascript:
    var ab = $('body').Width();

    The width method is case-sensitive, and should be in lowercase instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2014
    Posts
    70
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    It seems that the attempt to execute the following code just before the above, is preventing further execution of your code.

    Code javascript:
    var ab = $('body').Width();

    The width method is case-sensitive, and should be in lowercase instead.
    Okay, I've sorted out that error, however this css styling toggle will not work;

    Code:
    	$('.TopNavDropDown').click(function(){
    		$('#TopNavList').slideToggle('slow');
    		if($('#TopNavList').is(':visible')){
    			$('.TopNavDropDownWrap').css('background-url', 'none');
    			$('.TopNavDropDownWrap').css('background-color','#f7dd71');
    			$('.TopNavDropDownWrap a').css('color','#b11016');
    		} else {
    			$('.TopNavDropDownWrap').css('background-color','none');
    			$('.TopNavDropDownWrap').css('background-image', 'url("http://egentec.com/raffles/images/navi-bg.png")');
    			$('.TopNavDropDownWrap a').css('color','#f7dd71');
    		}
    	});

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by MrTIMarshall View Post
    Okay, I've sorted out that error, however this css styling toggle will not work;
    Another error that seems to be causing problems is as follows:
    Uncaught ReferenceError: ab is not defined

    Code javascript:
    ]$(window).resize(function() {
        var iw = $('body').width();
        if (ab > 979) {

    I don't think that you should have removed the offending line earlier on. Correct the problem by putting it back and using the correct case for the width method.
    Last edited by Mittineague; Jun 18, 2014 at 18:31.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2014
    Posts
    70
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Modified, I forgot to name the variable 'ab' instead it was 'iw' . I also just run it by a validator and checked it to clear things up but still my switch styles will not work.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by MrTIMarshall View Post
    Modified, I forgot to name the variable 'ab' instead it was 'iw' . I also just run it by a validator and checked it to clear things up but still my switch styles will not work.
    When you do a slow slide toggle, the element is still visible in the microsecond after the command has been issued.

    A good solution to this is to either change the styles before issuing the slideToggle command, or to give slideToggle a function to run after the slide is complete.
    When do you want to make those css changes to the menu wrapper - before the slide or when the slide has finished?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2014
    Posts
    70
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    When you do a slow slide toggle, the element is still visible in the microsecond after the command has been issued.

    A good solution to this is to either change the styles before issuing the slideToggle command, or to give slideToggle a function to run after the slide is complete.
    When do you want to make those css changes to the menu wrapper - before the slide or when the slide has finished?
    Either, I do not mind.

    I am also battling with the sidebar and @media min/max-width;

    Code:
    	$(window).resize(function() {
    		var ab = $('body').width();
    		if (ab > 964) {
    			$('#TopNavList').css('display', 'block');
    		} else {
    			$('#TopNavList').css('visibility', 'hidden');
    		}
    	});
    If this is matching the media queries then it should be checking if ab > 979, however with that, a bug is occurring on mobile flip where no menu shows I think due to the scrollbar as some browsers media screening include and some do not include the scrollbar width...

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by MrTIMarshall View Post
    Either, I do not mind.

    I am also battling with the sidebar and @media min/max-width;
    One thing at a time. To have the if statement part happen after the slideToggle has finished, put it in to its own function as a part of the slideToggle method.

    Code javascript:
    $('.TopNavDropDown').click(function(){
        $('#TopNavList').slideToggle('slow', function () {
            if($('#TopNavList').is(':visible')){
                ...
            } else {
                ...
            }
        });
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2014
    Posts
    70
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Updated the live view. This has partly solved things. The first time round it works but the second recurring only modifies the link styling and not the background styling.


Bookmarks

Posting Permissions

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