www.webdeveloper.com
Results 1 to 5 of 5

Thread: ToggleClass not working correctly please help

Hybrid View

  1. #1
    Join Date
    May 2012
    Posts
    79

    ToggleClass not working correctly please help

    I would like to change the main paragraph font size from it's default 14px to 16px when anchor tag "large-type" is clicked.

    I have attempted to do this with the CSS and jQuery code below but it is not working correctly. The strange thing is when I add font weight bold to the "large" class the code below works.

    Any Help and suggestions are appreciated!

    Thanks

    CSS code:
    Code:
    /*default size */
    
    #mainContent p{
                              font-size: 14px;
                              font-family: sans-serif, Arial,"MS Trebuchet";
                              line-height: 16px;
    }
    	
    /* large-type icon - increases body font size */
    
    .large {
    	    font-size: 16px; 
                font-family: sans-serif,Arial,"MS Trebuchet";
    }
    jQuery code:
    Code:
    $(function(){
    
    $('a.large-type').click(function() {
        $('#mainContent p').toggleClass('large');
             return false;
         });
    });

  2. #2
    Join Date
    May 2012
    Posts
    79
    I have looked all over the internet and can't find a solution to this problem.

  3. #3
    Join Date
    Jun 2012
    Posts
    10
    perhaps you could try the .removeClass() and .addClass() instead?

    Code:
        $(dom).removeClass("large");
        $(dom).addClass("large");

  4. #4
    Join Date
    May 2012
    Posts
    79
    Hi Anthoang,

    Thank you for help. I have tried using the addClass() and removeClass methods but they don't seem to work unfortunately.

    Code:
    $(function(){
    	$('a.large-type').click(function() {
    		if($('mainContent p').addClass('large')){
    			$(this).removeClass('large')
    		} else {
    			$('mainContent p').addClass('large');
    		};
    		
    	});
    	
    });

  5. #5
    Join Date
    May 2012
    Posts
    79
    I was able to solve this issue by defining the following in your css.

    Code:
    #text { font-size:14px}
    #text.large{ font-size:16px}

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles