w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
In wordpress, how to add an .active class to a parent nav link if any of it's child nav link is active?
You should be able to use location.pathname to manipulate the DOM on load i.e. $(document).ready(function(){ var currentLocation = location.pathname; if (currentLocation == "/test/1"){ $("#page1").addClass("active"); } }); Hope it helps.

Categories : Javascript

jQuery/JavaScript Active link in my script - bad underline
If you are trying to make only one button active when it is clicked. $(function(){ $("li input").on( "click", function(e) { $(this).addClass("active").siblings().parent().find('input').removeClass("active"); }); }); And also you have a typo in your css code snippet. It should be : .active{ text-decoration:underline; } If you want some element remain active upon a page refresh then you can simply add the "active" class on html markup as : <li><input type="button" onClick="Clock(0)" value="MADRID" name="MADRID" class="active" /></li> on whatever list item's input you want

Categories : Javascript

How to change active class while click to another link in bootstrap use jquery?
You are binding you click on the wrong element, you should bind it to the a. You are prevent default event to occur on the li, but li have no default behavior, a does. Try this: $(document).ready(function () { $('.nav li a').click(function(e) { $('.nav li').removeClass('active'); var $parent = $(this).parent(); if (!$parent.hasClass('active')) { $parent.addClass('active'); } e.preventDefault(); }); });

Categories : Javascript

Active Link on javascript menu to work on parent link not just child link
Look at this JSFiddle. $('#nav li a').click( (...) // Here I removed the "active" class from all siblings "li" $(this).parent().siblings().removeClass("active"); (...) // Here I add the "active" class to this "li" $(this).parent().addClass("active"); (...) ) Note 1: The new JSFiddle

Categories : Javascript

Jquery Highlight Active Link works for Href links but not Menu Items
You need to get the Menu client id when you get it on client. Try using the following code snippet: <script type="text/javascript"> $(document).ready(function () { var url = window.location.href; url = url.substr(url.lastIndexOf("/") + 1); $("#" + "<%= NavMenu.ClientID %>").find("a[href='" + url + "']").addClass("selected"); }); </script>

Categories : Jquery

Need help editing JavaScript - Trying to make a link "active" when another link is clicked
Assuming you should only have one active element on the page, you could do something like this. $('.nav li a').on('click', function() { $('.active').removeClass('active'); $(this).parent().addClass('active'); }); If not then you can use closest like so $('.nav li a').on('click', function() { $(this).closest('.active').removeClass('active'); $(this).parent().addClass('active'); }); From your comment i think this could work $('.nav li a').on('click', function() { $('active').removeClass('active'); var link = $(this).attr('href'), // link1 number = parseInt(link.substr(-1)), // 1 newHref = link.slice(0, link.length - 1) + number++; $(newHref).addClass('active'); }); so if you click on link1 then link2 will get the active class

Categories : Javascript

PHP echoActiveClassIfRequestMatches - link not active
The :active CSS class is a pseudo class, ie. a class which cannot be attributed by hand. If you wish to have a link to be highlighted when it corresponds to the current page, you must do it by hand. Your code is fine the way it is, but you have to define the CSS rules to make the link highlight. Somewhere in your CSS file (or in a style section of your html), you need a rule like the following: a.active { color: red; } The a.active is the CSS selector indicating you wish to apply the rules within the brackets to the a tags with active class. You can generalize it to any tag with that very class by removing the a. You probably want to replace the CSS rules by ones matching your website style. See Confused by CSS pseudo-class :active for details on the :active pseudo class. Perhap

Categories : PHP

How can I keep active state when clicking link
You can get the URL from document.URL from there it's as simple as iterating all links and comparing their href You can try something like: var links = document.getElementsByTagName('a'); for (var i= 0 ; i<links.length ; i++){ if(links[i].href == document.URL){ var currentClass = links[i].className; links[i].className = currentClass + " active"; } }

Categories : Javascript

Toggle Navigation Active Link
check following: $(document).ready(function () { $(".menuitem").click(function () { $(this).animate({ top: '200px' }).siblings().css("top",""); }); }); working fiddle here: http://jsfiddle.net/HaxS5/1/ i hope it helps.

Categories : Jquery

GLSL: no active uniforms/attributes after link
Rather than explain in detail why your loading code is awful, I'll just provide correct code that does what your code is trying and failing to do. std::string shader; { std::ifstream File(filename, std::ios::in); if(File) shader.assign(std::istreambuf_iterator<char>(File), std::istreambuf_iterator<char>()); } This doesn't prefix your shader with #version, but that's already in your shader files. The istreambuf_iterator class is in the <iterator> header.

Categories : C++

Twitter Bootstrap Active Navigation Link
In your code you prevent link default click behavior (open page). Try that way: $(document).ready(function () { $('ul.nav > li a').click(function (e) { $(this).closest('ul.nav').find('.active').removeClass('active'); $(this).parent().addClass('active'); }); });

Categories : Jquery

CSS absolute background as link: active position
You have conflicting CSS on lines 79 and 194 of custom.css that is overriding the absolute positioning: You are declaring: a:active, a:focus { position:relative; top:1px; } and on line 194: .kategorijos .vienas a:active { position:static; } Both of these are causing the problem. You want the item to keep position:absolute on :active.

Categories : CSS

Toggle active link Bootstrap navbar
You can try with something like that in you jade layout : li(class=title=='Home'?'active':undefined) a(href="/") Home li(class=title=='About'?'active':undefined) a(href="/about") About li(class=title=='Contact'?'active':undefined) a(href="/contact") Contact Then just add this to your server.js : app.get('/', function (req, res) { res.render('index', title: 'Home') }); app.get('/about', function (req, res) { res.render('about', title: 'About') }); This way, you can also remove the hard coded title in your layout and modify it trough this solution as : title #{title} | Test Application And it will render this as a title for your home : Home | Test Application

Categories : Node Js

active link to posts in pages Wordpress
One way to tackle the problem is to take advantage of CSS. Have a class called "active", and append this to the parent element holding the menu you wish to show. Example: <div class="active"> <div class="menu-item-46"><a>My Nav</a></div> </div> Then in your css file: .active .menu-item-46{ border-bottom:#000 5px solid; padding-bottom:11px; } Another suggestion would be to give the menu items, a generic class, "menu-item", as well as an id "menu-item-##". So you css can simply be ".active .menu-item"

Categories : PHP

Can you use variables with NG-CLASS active link with Angular?
There's a much better/easier way to accomplish setting a active CSS class. Just save a single value in your scope that holds the value of what is active. Something like this: $scope.setActive = function (index) { $scope.activeIndex = index; }; Then ng-class allows you to give it an map where "the names of the properties whose values are truthy will be added as css classes to the element" (From http://docs.angularjs.org/api/ng.directive:ngClass). So you can set the CSS class if the $index is the activeIndex: ng-class="{active: $index == activeIndex}"

Categories : Javascript

How to Check if a link is active or inactive by using the class in Selenium
Here's solution in Java, I hope you can translate it to whatever language you use. WebElement link = driver.findElement(By.cssSelector("[title='No. 2']")); String linkClass = link.findElement(By.xpath("./..")).getAttribute("class"); if ("active".equals(linkClass)) { link.click(); }

Categories : Selenium

How to change background color of the active link in Angular js
Fully agree with Yoshi you can store the category in a scope variable when calling the sortCategory function and use this to check if a categrory is active or not. A working piece of code could be : $scope.category = 'demographics'; //Your default category $scope.sortCategory = function (category) { $scope.category = category; //Update the category .... } $scope.isActive = function (category) { //Check if category of a given <li> is equal to the current category return $scope.category === category; } and a template markup that s look like <li data-ng-click="sortCategory('demographics')" ng-class="{'active' : isActive('demographics')}">Demographics</li> <li data-ng-click="sortCategory('historical')" ng-class="{'active' : isActive('historical')}">

Categories : Javascript

how to change bootstrap scrollspy active link color
You shouldn't be editing the Bootstrap CSS files directly but rather editing the less files and then recompiling those to CSS. I can't remember for certain but the colour variables you are after are more than likely in the Variables.less file. A way to play around with the colour schemes is to customise your bootstrap download (link is from the 2.3.2 version, Bootstrap 3.0 is out)

Categories : HTML

CSS3 transition only applying to active link, and not all links
You have incorrect selector if you need all of the links to have transition. It should be: body .main-nav li >a, body .main-nav li >a:visited You have .active-link in your selector which exists only to the link of the page you are on.

Categories : CSS

Bootstrap: changing dropdown menu's active link color
Probably cause the dropdown is in the navbar. This one should work .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { background-color: #16A170 !important; background-image: linear-gradient(to bottom, #17AA76, #149466) !important; background-repeat: repeat-x !important; color: #FFFFFF; outline: 0 none; text-decoration: none; }

Categories : CSS

'active' class added to link disappears when drilling down into the section
You can achieve your goal by using the index route of the projects route to show your initial list. Use the same router as your Route 1: App.Router.map(function(){ this.resource('projects', function() { this.resource('project', { path: ':project_id'}); }); }); but configure the project template to only contain an outlet: <script type="text/x-handlebars" id="projects"> <p>Projects</p> {{outlet}} </script> Then move your original projects template into projects/index: <script type="text/x-handlebars" id="projects/index"> <p>Projects Index</p> <div class="l-wrap"> <table class="list"> <thead> <tr> <th>Project Name</th>

Categories : Ember Js

Can't define active link color in custom Drupal theme
Active is a CSS class, which is target with a "dot" in CSS (instead of the semi-colon you're using). Change your CSS code to a:link {color:#fff; text-decoration: none; font-family: 'Dosis', sans-serif; font-size: 22px;} a.active {color: #93278f;} a:visited {color:#fff;} a:hover {color: #93278f;} and try again. Otherwise, it always good to have a look with Firebug to see what is overriding your CSS definitions.

Categories : Drupal

CSS/HTML5 using :target or :active to display different text when link is clicked
You are going to need to use Javascript to change things dynamically without page refresh ... This is crude, but will show you how to do what you are expecting ... NOTE: You must include the <script src="http://code.jquery.com/jquery-1.9.1.js"></script> since I have used a bit of jQuery (A JavaScript library) <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <div class="nav-bar"> <ul class="nav"> <li id="other1" onClick="changeText('other1');"><a>About</a></li> <li id="other2" onClick="changeText('other2');"><a>Contact</a></li> <li id="other3" onClick="changeText('other3');"><a>Other</a></li> </ul&

Categories : HTML

Change PARENT class when child link is clicked to "active"
http://jsfiddle.net/n5CLu/ $('nav.top-bar > section.top-bar-section > ul.right > li > a').click(function(e){ e.preventDefault(); $(this).parent().addClass('active').siblings().removeClass('active'); });

Categories : HTML

Changing the active class of a link with the twitter bootstrap css in python/flask
Have you looked at this ? http://jinja.pocoo.org/docs/tricks/ Highlighting Active Menu Items Often you want to have a navigation bar with an active navigation item. This is really simple to achieve. Because assignments outside of blocks in child templates are global and executed before the layout template is evaluated it’s possible to define the active menu item in the child template: {% extends "layout.html" %} {% set active_page = "index" %} The layout template can then access active_page. Additionally it makes sense to defined a default for that variable: {% set navigation_bar = [ ('/', 'index', 'Index'), ('/downloads/', 'downloads', 'Downloads'), ('/about/', 'about', 'About') ] -%} {% set active_page = active_page|default('index') -%} ... <ul id="navigation">

Categories : Python

jQuery fading "back to top" link. Page load link visibility
I tested the code below and it worked without problems <!doctype html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 500) { $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } }); // scroll body

Categories : Javascript

make parent links display active class when sub menu link is selected
First create a variable to see if the menu item is selected and put it on false. Set it to false in its main menu loop at the start. Then before printing the menu item to the screen loop over the submenu items, create a string with the submenu and check if one of them is on the current page. If one is the current page set the selected variable to true. After the submenu loop you will have a variable that holds if the menu item should have an additonal class and can you create the item with the submenu. Edit <div id="cssmenu"> <ul> <li <?php if($_GET["id"] == '') { echo 'class="active"'; } ?>><a href="/home.php><span>Homepage</span></a></li> <?php //select all the top row items $sql="SELECT * from website_menu where parent_top

Categories : PHP

Jquery to copy first link to second ul and then change class of first link
When you have a jQuery object and you access it by numeric index, you're left with an HTML element. So $('body')[0] == document.body. This means that when you access pageLinks[x], you're really getting a raw element. This means that you want pageLinks[x].appendChild(pageLinks[i]);, not pageLinks[x].childNodes.append(pageLinks[i]);

Categories : Javascript

Vertical navigation with sub menus with image up and down links for each level with active link highlight when on selected page
Issue #1: The text gets smaller in the sub-menus because you have this rule #nav ul.menu ul.sub-menu > li , #nav ul.menu ul.sub-sub-menu > li { ... font-size:0.7em; ... } while the default for the first level items is #nav ul.menu > li { ... font-size:0.9em; ... } Either remove the font-size decalaration for the submenus or set the value to inherit Issue #2 I couldn't test this since I don't have your images so I'm not sure if this is what's causing the problem but it seems you're missing the > a at the end of this CSS rule selector #nav ul.sub-menu > li > a, #nav ul.sub-sub-menu > li { background: transparent url('../../second-third-categories-with-submenus.png'); ... } Issue #3 To highlight the menu items you can just set

Categories : HTML

pagination codeigniter always starts at page 2 and active link is always at page 2
try a different way of solution, controller(index()) $this->load->library('pagination'); $config['base_url'] = site_url().'classname/index'; $config['per_page'] = $this->config->item('pagination_number'); $config['uri_segment'] = 4; $data['count']=$this->example_model->count(); $config['total_rows'] =$data['count']; $data['classname']=$this->example_model->getall($this->config->item('pagination_number'),$this->uri->segment(4)); $this->pagination->initialize($config); $data['page_link']=$this->pagination->create_links(); $this->load->view('users/classname.php',$data); model function getall($num,$offset) { $this->db->from('table_name'

Categories : Codeigniter

Bootstrap Scrollspy randomly adds and remove "active" class to navbar links when scrolling if modal is linked to in a navbar link
For my implementation, simply changing the tag/class and adding boostrap styles to the new class worked, as Scrollyspy looks for .nav li > a. Granted, in my case, having the active effect wasn't needed since the modal pops up. This seemed a lot quicker and cleaner to me but might not be the solution to everyone's styling and functionality specific issue.

Categories : HTML

Active a radiobox with jquery
UPDATED - WITH HOVER & JS Have a look to sample- html <div class="game"></div> <div class="game"></div> <div class="game"></div> <div class="game"></div> <div class="game"></div> <div class="game"></div> css .game { background: black; border:10px solid black; width: 10px; height: 10px; border-radius:50%; margin-bottom: 10px; } .game.active, .game.hover { background:red; } js $(document).ready(function () { $('.game').click(function() { if($(this).hasClass("active")){ $(this).removeClass("active"); return; } $('.game.active').removeClass("active"); $(this).addClass('active'); }); $('.game').hover(function(){

Categories : Jquery

css menu active without jquery
It depends how you're implementing this, on a static site, you can just change the structure of the <li> that you want to be active, to: <li class="active"> And then in your CSS #menu li.active a { background:red; color:#fff; } and if you want active and hover to be the same: #menu a:hover, #menu li.active a { background:red; color:#fff; }

Categories : HTML

How to Active nav bar in bootstrap with jquery
You can use following javascript to add active class based on current url I am assuming you are working with codeigniter so uri_string() function is available $(document).ready(function () { var active_link = $('.navbar li a[href~="<?= uri_string() ?>"]'); if(active_link.size() > 0) active_link.parent().parent().addClass('active'); });

Categories : Jquery

Tab Navigation Active JQuery
If I understand your question correctly, it sounds like you are looking for .tab-conent-doc that is empty, correct? If so, my suggestion would be to use jQuery's children function to see if each item is empty or not. var $tabs = $('ul.tabs li'), //Get all tabs $tabContent = $('.tab-content-doc'), //Get all tab content idx; $tabContent.each(function(i) { //Loop through your tab-content-doc elements if($(this).children().length === 0) { //Are there children? $tabs.eq(i).hide(); //Hide the element that has no children } }); idx = $tabs.filter(':visible').eq(0).index(); //What is the first visible tab? $tabs.eq(idx)....//Do stuff with first visible tab $tabContent.eq(idx)....//Do stuff with first visible tab content

Categories : Jquery

How do I add a class to the active tab in an accordion using jQuery?
Your issue is mainly due to Css specifity. Yes, you are already applying the class, but it is overridden by another rule applied on the label which overrides .classname rule anyways. So your syle is not getting applied. Add this to your rule label.ac-active { border-color:red; } Instead of .ac-active { border-color:red; // if you add !important then it will work too, but not recommended to use that when you have a way to resolve it without it. } And in the script: // Remove class from other tab which is already active and apply to the current tab. jQuery('.ac-active').not(jQuery(this).addClass("ac-active")).removeClass('ac-active'); Instead of jQuery(this).addClass("ac-active"); Demo What happened in your case is the border color applied by .ac-container lab

Categories : Javascript

Out of 2 forms, select the one which is in the active div with jquery
Use the :visible selector: Fiddle var form = $('div:visible form[name=form]'); If you want the form HTML instead of the object: var formHTML = $('<div>').append($('div:visible form[name=form]').html()).html(); This is selecting the form that is contained in a visible div, and then getting the forms outer HTML.

Categories : Javascript

Set button state to active with jQuery
I dont know what did you mean about "Set Button to .Active" but for example you can trigger its click by this code : $(document).keypress(function(e){ if(e.keychar == 'w') { $("#forward").trigger('click'); //You can do any thing here ex. "set button state Active" //$("#forward").addClass('active'); } else if(e.keychar == 's') $("#back").trigger('click'); else if(e.keychar == 'a') $("#left").trigger('click'); else if(e.keychar == 'd') $("#right").trigger('click'); });

Categories : Jquery

  • active masterpage jQuery not working
  • Check you havve added jQuery successfully and bind the event in document.ready event. you code seems to work. You also missed the closing quotes here class="navtop Adding jQuery <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> Putting code in document.ready Live Demo $(document).ready(function(){ $("li").click(function (event) { event.preventDefault(); if ($("li").hasClass('active')) { $("li").removeClass('active'); } $(this).addClass('active'); }); });

    Categories : Javascript

    Set class to active on click() using jQuery
    Your code can be condensed to following just using the this context var menuItemNames = ['#home', '#about', '#projects', '#resume', '#contact']; $(menuItemNames.join(', ')).on('click', safeSelect); function safeSelect(e) { var $this = $(this); $this.removeClass('unselected').addClass('selected'); $this.closest('ul').find('a').not(this) .removeClass('selected').addClass('unselected'); } Check Fiddle

    Categories : Javascript



    © Copyright 2017 w3hello.com Publishing Limited. All rights reserved.