javascript - CSS and active state nav elements -

-

making active nav element menu isn't difficult, here example. http://jsfiddle.net/6neb6/38/

<ul>     <li><a href="" title="home">home</a></li>     <li class="active"><a href="" title="deals">deals</a></li>     <li><a href="" title="support">support</a></li>     <li><a href="" title="contact">contact</a></li> </ul>

css:

html {   filter: expression(document.execcommand("backgroundimagecache", false, true)); }   ul {     background: url(http://shared.web2works.co.uk/tmp/tab-bg-top.png) no-repeat;     height: 51px;     font-family: arial;     font-size: 14px; }  ul li {     float: left;     height: 51px; }  ul li {     display:block;     background: url(http://shared.web2works.co.uk/tmp/nav-seperator.gif) no-repeat top right;     padding: 17px 20px 17px 21px;     text-decoration: none;     color: #263e60; }  ul li:last-child a{     /*background-image: none;*/ }  ul li:first-child a{     padding-right: 75px; }  li.active a, li:hover {     background: #02284c;      color: #fff;     margin-left: -2px;     padding-left: 23px; }

what need bit different. in active states people tend style menu buttons can use same style every button. need buttons activate different image every state.

this image of i'm talking about:

enter image description here

those buttons have different glow effects different images. when select different button glow should stay active. if way i'm not able use same style every button.

the buttons change pages , hovers work correctly, i'm having trouble setting states each button active when reaches it's destination page. state works first button, home page.

here code(important bits):

<div id="wrapper"> </div>  <div class="menu" id="menunav">     <ul class="menuul">         <li><a id="home-link">home</a>         </li>          <li><a id="work-link">work</a>         </li>          <li><a id="about-link">about</a>         </li>          <li><a id="contact-link">contact</a>         </li>          <li><a id="resources-link">resources</a>         </li>     </ul> </div>

css:

.menu {     height: 50px;     margin: auto;     width: 650px;     text-align:center;     padding:10px;   }  .menu ul li {     display: inline-block;     margin: 0 10px; }  .menu ul li {     display: block;     text-indent: -99999px;     cursor: pointer;     color: #00000;  }  #home-link {     background: transparent url() no-repeat;     width: 90px; }  #home-link:hover, #home-link.current-item {     background:url() no-repeat; }  #work-link {     background: transparent url() no-repeat ;     width: 90px; }  #work-link:hover, #about-link.current-item {     background:url() no-repeat; }  #about-link {     background:url() no-repeat;     width: 90px; }   #about-link:hover, #services-link.current-item {     background:url() no-repeat;  }  #contact-link {     background: transparent url() no-repeat;     width: 90px; }  #contact-link:hover, #work-link.current-item {     background:url() no-repeat; }  #resources-link {     background:url() no-repeat;     width: 100px; }  #resources-link:hover, #contact-link.current-item {     background:url() no-repeat; }  .current-item { }

js:

function switchscrollscroll() {     var scrolloffset = $("#wrapper").scrollleft();      if(scrolloffset == 0 && scrolloffset <= 1999)     {         $('#menu ul li a').removeclass('current-item');         $('#home-link').addclass("current-item");     }     else if(scrolloffset >= 2000 && scrolloffset <= 3999)     {         $('#menu ul li a').removeclass('current-item');         $('#work-link').addclass("current-item");     }     else if(scrolloffset >= 4000 && scrolloffset <= 5999)     {         $('#menu ul li a').removeclass('current-item');         $('#about-link').addclass("current-item");     }     else if(scrolloffset >= 6000 && scrolloffset <= 7999)     {         $('#menu ul li a').removeclass('current-item');         $('#contact-link').addclass("current-item");     }     else if(scrolloffset >= 8000 && scrolloffset <= 10000)// contact     {         $('#menu ul li a').removeclass('current-item');         $('#resources-link').addclass("current-item");     } }  switchscroll();  $("#wrapper").scroll(function(){     switchscrollcroll(); }); });

images taken out on purpose. if has done before, i'd appreciate help.

you can adding class body. example if have class work on body of work page css can like

.work #work-link {     background: transparent url(different image) no-repeat ; } #work-link {     background: transparent url(default image) no-repeat ;     width: 90px; }

if don't want go around editing every page can use jquery figure out page on , add appropriate class


Comments

Post a Comment

Popular posts from this blog

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

-
i read alot other solution still confused should mine... #include <opencv2/objdetect/objdetect.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <iostream> #include <stdio.h> using namespace std; using namespace cv; int main(int argc, const char** argv) { //create cascade classifier object used face detection cascadeclassifier face_cascade; //use haarcascade_frontalface_alt.xml library face_cascade.load("haarcascade_frontalface_alt.xml"); //setup video capture device , link first capture device videocapture capturedevice; capturedevice.open(0); //setup image files used in capture process mat captureframe; mat grayscaleframe; //create window present results namedwindow("outputcapture", 1); //create loop capture , find faces while (true) { //capture new image frame capturedevice >> captureframe; ...
Read more

php - render data via PDO::FETCH_FUNC vs loop -

-
i've been using 2 methods render data. the first one: function name($id,$name){ return '<div id="'.$id.'">'.$name.'</div>'; } echo implode($pdo->query("select id,name user")->fetchall(pdo::fetch_func,'name')); the second one: $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); foreach($users $user){ echo name($user->id,$user->name); } i don't understand how pdo::fetch_func works. tried figure out. however, not well-documented. could please explain fetch mode? , also, 1 performs better? thank you. both methods wrong , have learn how use templates , how separate business logic presentation logic. $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); tpl::assign('users', $users); is code business logic part. then in template <?php foreach $users $row): ?> <div id="<?=$...
Read more

The canvas has been tainted by cross-origin data in chrome only -

-
uncaught securityerror: failed execute 'getimagedata' on 'canvasrenderingcontext2d': canvas has been tainted cross-origin data i getting above error in chrome. code(following) works fine in mozilla. have not corss domain issue. why above error in chrome? var wheel_canvas, wheel_context, can_w, can_h, wheel_grd; var large_radius = 160; var small_radius = 120; var wheel_canvas = document.getelementbyid('wheel_canvas'); var wheel_context = wheel_canvas.getcontext('2d'); var can_w = $(wheel_canvas).width(); var can_h = $(wheel_canvas).height(); var centerx = can_w / 2, centery = can_h / 2; var wheel_grd = null; test('#ff0000'); function test(hex) { $('#clrpicker').css({'left': 210, 'top': 210 }); inverted = hexbw(hex); $('#color_val_show').val(hex); current_color_hex_val_selected = hex; $('#color_val_show').css({'color':inverted,'background':hex}); fillgradient...
Read more