jquery - Change the header and the menu colour on scroll -


i'm starting scratch javascript , want ask advices upon pieces of code. i'm developing joomla 3.2 website gantry template default. mission achieve following. when user access submenu (01, 02, 03 e.g.) derived parent item128 , scroll down "rt-header" , ""rt-block menu-block""should change background colour. example accessing menu 02, scroll down , header menu goes yellow.

here html:

<div id="rt-header"> <div class="rt-block logo-block"> <div class="rt-block menu-block"> <ul class="gf-menu l1">     <li class="item128 parent">         <a class="item" href"services">services<span class="border-fixer"></span>::after</a>         <div class="dropdown columns-1">             <div class="column col1">                 <ul class="l2">                     <li class ="item1"><a class="item" href="submenu-01">submenu1</a></li>                     <li class ="item2"><a class="item" href="submenu-02">submenu2</a></li>                     <li class ="item3"><a class="item" href="submenu-03">submenu3</a></li>                     <li class ="item4"><a class="item" href="submenu-04">submenu1</a></li>                     <li class ="item5"><a class="item" href="submenu-05">submenu2</a></li>                 </ul>             </div>         </div>     </li> </ul>

here css: (when child item active header , menu blocks inherit colours)

.gf-menu.l1 li.item1.active.last {background-color:#abcf39;} .gf-menu.l1 li.item2.active.last {background-color:#f39512;} .gf-menu.l1 li.item3.active.last {background-color:#f16e68;} .gf-menu.l1 li.item4.active.last {background-color:#7ecde9;} .gf-menu.l1 li.item5.active.last {background-color:#878787;}

...and jquery function: (header-color.js)

    function changecolor(){ var t = jquery('.item142').offset().top - 100;   jquery(window).scroll(function () {     var x = jquery(this).scrolltop(),         item141 = jquery('.item141'),         item142 = jquery('.item142'),         item143 = jquery('.item143'),         item144 = jquery('.item144'),         item152 = jquery('.item152');      if (x >= item141.offset().top && x < (item141.offset().top + item141.height())) {         jquery('rt-header').css("background-color", "#990");     }     if (x >= item142.offset().top && x < (item142.offset().top + item142.height())) {         jquery('rt-header').css("background-color", "#ccc");     }     if (x >= item143.offset().top && x < (item143.offset().top + item143.height())) {          jquery('rt-header').css("background-color", "#949494");     }     if (x >= item144.offset().top && x < (item144.offset().top + item144.height())) {         jquery('rt-header').css("background-color", "orange");     }     if (x >= item152.offset().top && x < (item152.offset().top + item152.height())) {         jquery('rt-header').css("background-color", "purple");     } }); }

i'm loading .js document in index.php file of template "head" section: <?php $gantry->addscript("header-color.js");?> on tracking recieve following message:

"uncaught typeerror: cannot read property 'top' of undefined " function written wrong ?

it seems me have mixup in classes , ids. jquery looks item id, html gives class, no id

item1 = jquery('#item1'); // looking item id "item1"

and in html, have

<li class ="item1">...</li>

to fix issue, need either use id both places or use classes both places.


Comments

Post a Comment

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

i have add following code htaccess file removing .php extension , add trailing slash urls. worked fine reduced page loading speed , css code not loading @ all. pages ugly. please help rewriteengine on rewritebase / ## hide .php extension snippet # externally redirect /dir/foo.php /dir/foo rewritecond %{the_request} ^[a-z]{3,}\s([^.]+)\.php [nc] rewriterule ^ %1/ [r,l] # add trailing slash rewritecond %{request_filename} !-f rewritecond %{request_uri} !/$ rewriterule . %{request_uri}/ [l,r=301] # internally forward /dir/foo /dir/foo.php rewritecond %{request_filename} !-d rewritecond %{request_filename}.php -f rewriterule ^(.*?)/?$ $1.php [l] we can rewrite urls using .htaccess files. before writing in .htaccess files need verify kind of server using. can check server adding a <?php phpinfo(); ?> in php page. ensure mod_rewrite module enabled in apache server. can identified checking phpinfo included page. common methods used url rewriting follows ...
Read more

javascript - jQuery show full size image on click -

pretty self explanatory not workking . i want display full image when user click on image... yes know there tons of plugins but i want keep simple. any idea ? css : .full { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } .thumbnail { width: 50px; height: 50px; } html: <img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> jquery: $(document).ready(function() { $('.thumbnail').on('click', function() { var img = $('<img />',{src:this.src,'class':'full'}); $('.full').html(img).show(); console.log('done!'); }); }); try looking how jquery works. $(document).ready(function() { $('.thumbnail').on('click', function(...
Read more