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
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts

    Thumbs down How to pass a variable into CSS

    Hey guys, so i got an issue.
    I need to be able to add a variable into the line of CSS im adding.

    I need to be able to add my $height into the box-shadow css so it exports like

    box-shadow: 0px $height 0px inset #fff;

    This is what i have, but its not working.


    Code:
    $('.not-front .main-navigation-block #site-nav ul.menu li').hover(function(){   
    			$this = $(this); 
    			var $ul = $this.find("ul.menu");
        		var $height = $ul.height(); 
    		        $('.not-front .main-navigation-block').css('box-shadow', ('0px' + ($height + 'px') + '0px' + 'inset' + '#fff'));
    		    },
    Any help would be greatly appreciated.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 583 Times in 564 Posts
    you need spaces between css value/units.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    aaronhockey_09 (04-01-2013)

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by rnd me View Post
    you need spaces between css value/units.
    so just adding spaces like this ?

    Code:
    $('.not-front .main-navigation-block #site-nav ul.menu li').hover(function(){   
    			$this = $(this); 
    			var $ul = $this.find("ul.menu");
        		var $height = $ul.height(); 
    		        $('.not-front .main-navigation-block').css('box-shadow', ('0 px' + ($height + 'px') + '0 px' + 'inset' + '#fff'));
    		    },

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 583 Times in 564 Posts
    hmmm. you need regular old valid css at the end:

    Code:
     $('.not-front .main-navigation-block').css('box-shadow', ('0px ' + ($height + 'px ') + '5px #fff inset' ));
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    aaronhockey_09 (04-01-2013)

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    ahhh okay, i wouldnt have caught that.
    Thanks very much !


  •  

    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
    •