php - javascript - update class based on url -


! latest i've tried. put in head.php include. i'll send on files if you'd want see them personally. directory of folder

main_folder -main_files -- js_folder ---- js files -- includes_folder ---- head.php here   <script type="text/javascript"> jquery(function($) { var path = window.location.href; // because 'href' property of dom element absolute path //alert($('ul a').length); $('ul a').each(function() {      if (this.href === path) {         $(this).addclass('sub-menu active');     }     //alert(this.href); }); });  </script>

whole sidebar:

 <div class="sidebar-scroll"> <div id="sidebar" class="nav-collapse collapse">  <!-- begin sidebar menu -->   <ul class="sidebar-menu">           <li class="sub-menu">               <a class="" href="panel-admin.php">                   <i class="icon-dashboard"></i>                   <span>dashboard</span>               </a>           </li>           <li class="sub-menu">               <a href="javascript:;" class="">                   <i class="icon-briefcase"></i>                   <span>employees</span>               </a>           </li>           <li class="sub-menu">               <a href="javascript:;" class="">                   <i class="icon-book"></i>                   <span>students</span>               </a>           </li>           <li class="sub-menu">              <a href="javascript:;" class="">                   <i class="icon-calendar"></i>                   <span>scheduling</span>                   <span class="arrow"></span>               </a>               <ul class="sub">                   <li><a class="" href="admin-foreign.php">foreign languages</a></li>                   <li><a class="" href="admin-esl.php">esl local</a></li>                   <li><a class="" href="admin-workshop.php">summer workshops</a></li>               </ul>           </li>           <li class="sub-menu">               <a href="javascript:;" class="">                   <i class="icon-pencil"></i>                   <span>enroll</span>                   <span class="arrow"></span>               </a>               <ul class="sub">                   <li><a class="" href="general.html">foreign languages</a></li>                   <li><a class="" href="button.html">esl local</a></li>                   <li><a class="" href="slider.html">summer workshops</a></li>               </ul>           </li>        </ul>  <!-- end sidebar menu -->

class="sub-menu" needed make dropdown menus drop. active version class="sub-menu active". in case of 2 level dropdown menu, both main bar , sub bar set active.

this side bar. 

<div class="collapse navbar-collapse navbar-ex1-collapse">         <ul class="nav navbar-nav side-nav">                                 <li>                 <a href="index.php"><i class="fa fa-fw fa-dashboard"></i> overview</a>             </li>             <li>                 <a href="employee.php"><i class="fa fa-fw fa-dashboard"></i> employees</a>             </li>         </ul>     </div>

i've tried following below none works on case:

update class attribute based on page url

https://css-tricks.com/snippets/jquery/add-active-navigation-class-based-on-url/

first sample code

$('.menu li a').each(function(){ //check thru <a> elements inside <li> inside .menu    var pagename= location.pathname.split('/').pop(); // current pages filename (just filename)      if($(this).prop("href") == pagename){         $('.menu li').removeclass("active"); // remove active class             $(this).parent("li").addclass("active"); //put active in parent of <a> <li>    } });

in first one, i've changed menu collapse navbar-collapse navbar-ex1-collapse , collapse neither works.

in second sample code, i've tried doing following:

$(function() {   $('nav a[href^="/' + location.pathname.split("/")[2] + '"]').addclass('active'); });

i put [2] since i'm in localhost. localhost/folder_name/index.php.

i tried putting "/index.php"/ when click directs me localhost/index.php instead of localhost/folder_here/index.php.

third sample code

jquery(function($) {  var path = window.location.href; // because 'href' property of dom element absolute path  $('ul a').each(function() {   if (this.href === path) {    $(this).addclass('active');   }  }); });

still doesn't work. i've change $('ul a) $('div ul a) , $('div li ul a).

edit: sure, script created included include('js/js_file.js');. line should before or after html loaded?

as suggested david thomas i've tried following below. doesn't work.

var url = 'window.location.pathname'; $('.nav a').each(function() {   // absolute url <a> element:   var href = this.href,     // current page , file-type:     pageandfile = href.split('/').pop();   // if location ends pageandfile found in   // current <a> element (using string.prototype.endswith())   // add 'active' class-name:   if (url.endswith(pageandfile)) {     $(this).closest('li').addclass('sub-menu active');   } });

one approach:

// obviously, use 'document.location'/'window.location' in real thing:  var fakelocation = 'http://www.example.com/index.php';    $('.nav a').each(function() {    // absolute url <a> element:    var href = this.href,      // current page , file-type:      pageandfile = href.split('/').pop();    // if location ends pageandfile found in    // current <a> element (using string.prototype.endswith())    // add 'active' class-name:    if (fakelocation.endswith(pageandfile)) {      $(this).closest('li').addclass('active');    }  });
.active {    border: 1px solid red;  }
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="collapse navbar-collapse navbar-ex1-collapse">    <ul class="nav navbar-nav side-nav">      <li> <a href="index.php"><i class="fa fa-fw fa-dashboard"></i> overview</a>        </li>      <li> <a href="employee.php"><i class="fa fa-fw fa-dashboard"></i> employees</a>        </li>    </ul>  </div>

js fiddle demo.

for browsers don't implement string.prototype.endswith():

// simple shim string.prototype.endswith(), browsers  // don't yet implement same:  string.prototype.endswith = string.prototype.endswith || function(teststring) {    // creates regular expression passed-in string, followed '$'    // character signifies passed-in string must followed    // end-of-string:    var reg = new regexp(teststring + '$');      // using regexp.prototype.test() test string we're testing,    // 'this,' matched created regular expression:    return reg.test(this);  };    var fakelocation = 'http://www.example.com/index.php';    $('.nav a').each(function() {    // absolute url <a> element:    var href = this.href,      // current page , file-type:      pageandfile = href.split('/').pop();    // if location ends pageandfile found in    // current <a> element (using string.prototype.endswith())    // add 'active' class-name:    if (fakelocation.endswith(pageandfile)) {      $(this).closest('li').addclass('active');    }  });
.active {    border: 1px solid red;  }
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="collapse navbar-collapse navbar-ex1-collapse">    <ul class="nav navbar-nav side-nav">      <li> <a href="index.php"><i class="fa fa-fw fa-dashboard"></i> overview</a>        </li>      <li> <a href="employee.php"><i class="fa fa-fw fa-dashboard"></i> employees</a>        </li>    </ul>  </div>

js fiddle demo.

and, without jquery, same:

// simple shim string.prototype.endswith(), browsers  // don't yet implement same:  string.prototype.endswith = string.prototype.endswith || function(teststring) {    var reg = new regexp(teststring + '$');    return reg.test(this);  };    // again, in real-world non-demo use should use 'document.location':  var fakelocation = 'http://www.example.com/index.php',    // finding last portion of fakelocation variable:    currentpage = fakelocation.split('/').pop(),    // getting elements href attribute ends    // currentpage string (after escaping special    // characters (ugly) regular expression) ,    // attribute-ends-with ('attribute$=value') selector:    activeaelements = document.queryselectorall('.nav a[href$=' + currentpage.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&") + ']');    // using array.prototype.foreach iterate on array-like  // activeaelements nodelist:  array.prototype.foreach.call(activeaelements, function(a) {    // first argument of function array-element,    // here <a> element node;    // we're adding 'active' class-name parentnode of <a>    // element found above selector:    a.parentnode.classlist.add('active');  });
.active {    border: 1px solid red;  }
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="collapse navbar-collapse navbar-ex1-collapse">    <ul class="nav navbar-nav side-nav">      <li> <a href="index.php"><i class="fa fa-fw fa-dashboard"></i> overview</a>        </li>      <li> <a href="employee.php"><i class="fa fa-fw fa-dashboard"></i> employees</a>        </li>    </ul>  </div>

js fiddle demo.

as why own attempts failed:

$('.menu li a').each(function(){    var pagename= location.pathname.split('/').pop();      // htmlanchorelement.href absolute url formed     // href attribute; find actual string     // <a> element, you'd need use either javascript:     //  - this.getattribute('href');     // or jquery's:     //  - $(this).attr('href');      if($(this).prop("href") == pagename){         $('.menu li').removeclass("active");         $(this).parent("li").addclass("active");    } });

your second attempt:

$(function() {   // won't work because javascript return 'index.php',   // , pass attribute selector; unfortunately   // includes period ('.'), special character in css   // , has double escaped, first javascript ,   // css   $('nav a[href^="/' + location.pathname.split("/")[2] + '"]').addclass('active');   // in mind, you'd need (something like) following,   // - in own code - replaces special characters   // double-escaped version of character (so '.' becomes '\\.'):   $('nav a[href^="/' + location.pathname.split("/")[2].replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&") + '"]').addclass('active'); });

your third attempt:

jquery(function($) {  var path = window.location.href; // because 'href' property of dom element absolute path  $('ul a').each(function() {   if (this.href === path) {    $(this).addclass('active');   }  }); });

looks should work, albeit you're adding (or should adding) 'active' class-name <a> element, rather ancestor <li> element.

references:


Comments

Post a Comment

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

this code i'm using find latitude , longitude of place: function coords($address){ echo $url="http://maps.googleapis.com/maps/api/geocode/json?address=".$address; $json = file_get_contents(urlencode($url)); $data = json_decode($json, true); print_r($data['results'][0]['geometry']['location']['lat']); print_r($data['results'][0]['geometry']['location']['lng']); } however returns warning: failed open stream: http request failed! http/1.0 400 bad request if use above code in simple procedure works fine not in function. note: have tried curl_init()... method produced same result? instead of encoding whole url encode address part. following code work fine $add='jamshoro phase 2'; $url="http://maps.googleapis.com/maps/api/geocode/json?address=".urlencode($add); $json = file_get_contents($url); $data = json_decode($json, true); print_r($data['r
Read more

java - How to filter a backspace keyboard input -

i have code gives message when key number pressed: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochararray().length - 1]; if (!(ch >= '0' && ch <= '9')) { system.out.println("the char entered not number"); t.consume(); } } }); now if press on wrong button , press backspace remove it, error message. how can add backspace input if statement? i have found answer: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochar
Read more

java - Show Soft Keyboard when EditText Appears -

i have code in android app, alert dialog , keyboard, , when dialog shown want keyboard appear. not , not sure why? here code: final alertdialog.builder alert = new alertdialog.builder(this); alert.settitle("title"); alert.setmessage("message"); final edittext input = new edittext(this); input.setinputtype(inputtype.type_class_number); alert.setview(input); input.setonfocuschangelistener(new view.onfocuschangelistener() { @override public void onfocuschange(view v, boolean hasfocus) { if (hasfocus) { log.i(tag, "in focus"); inputmethodmanager inputmethodmanager = (inputmethodmanager) getsystemservice(context.input_method_service); inputmethodmanager.showsoftinput(input, inputmethodmanager.show_implicit); } } }); but keyboard not appear though edit text in focus, , tell appear why, doesn't come up? thanks in advance.
Read more