The curious case of toggle - javascript

I'm really new to Jquery and was trying to figure out why my JQuery code that I got from another user will not work when I place the id attribute in the ol tag but works fine when the id attribute is placed in the nav tag. If some one can be so kind to explain this problem to me thanks.
HTML
<nav id="cat">
<ol>
<li><a title="" href="#1">1;</a></li>
<li><a title="" href="#2">2</a></li>
</ol>
</nav>
<!-- DOES NOT WORK -->
<nav class="sub">
<ol id="1">
<li><a title="" href="">1a</a></li>
</ol>
</nav>
<!-- WORKS -->
<nav class="sub" id="2">
<ol>
<li><a title="" href="">2a</a></li>
</ol>
</nav>
JQuery
var $subs = $('.sub');
$('#cat > ol > li > a').click(function() {
var href = $(this).attr('href'),
$target = $(href);
$target.stop().slideToggle('slow');
$subs.not($target).stop().slideUp('slow');
});
Here is the fiddle
enter link description here

Moving id=1 onto the child ol means that the ol is no longer also a .sub. you need to move both ids to the child ols and then update the $sub selector to be .sub > ol
http://jsfiddle.net/41rh3n4w/

Related

How to add active class to nav ul li a element when it has some sub pages with it?

I am working on Drupal 8 website. In that i having a problem in assigning a active class to nav list elements.
I used the following code to set the active class, it is working for the same url.
The code look like this
<nav id="getnav">
<ul>
<li>
<a class="" data-drupal-link-system-path="user" href="/drupal/todo">Todo</a>
</li>
<li>
<a class="" data-drupal-link-system-path="user" href="/drupal/files">Files</a>
</li>
<li>
<a class="" data-drupal-link-system-path="user" href="/drupal/photos">Photos</a>
</li>
</ul>
</nav>
I used jquery function to set the active class based on the url. Using the following code.
function setActive() {
var myurl =window.location.href.substr(window.location.href.lastIndexOf("/")+1);
$("#getnav ul li a").each(function(){
if($(this).attr("href") == '/drupal/'+myurl )
$(this).addClass("active");
});
}
window.onload = setActive();
The real problem is whenever accessing the subpages like todo/page2 the active class is gone.
http://localhost/drupal/todo :::is working fine but after accessing subpage like
http://loclahost/drupal/todo/add
The class is gone.
Please give me suggestions regarding this problem.
I want to Set The Active class to all of the subpages too.after todo/*
You can do this using pure CSS. You need to add class/id to your body element and your nav li elements, and then you can define combinations of them in your css to be highlighted. For example, suppose this is your html:
< body id="todo_body">
<nav id="getnav">
<ul>
<li class="todo_dropdown">
<a class="" data-drupal-link-system-path="user" href="/drupal/todo">Todo</a>
</li>
<li class="files_dropdown">
<a class="" data-drupal-link-system-path="user" href="/drupal/files">Files</a>
</li>
<li class="photos_dropdown">
</body>
<a class="" data-drupal-link-system-path="user" href="/drupal/photos">Photos</a>
</li>
</ul>
</nav>
</body>
Now, you can use css like given below to apply highlighting styles to your 'should be active' li element:
#todo_body .todo_dropdown,
#files_body .files_dropdown,
#photos_body .photos_dropdown
{
background-color: red;
color: white;
/*Your css styles for active nav item will come here */
}
You can also add any styles to any elements contained in the should be active li element.
<ul class="nav">
<?php
$page_name = basename($_SERVER['PHP_SELF']);
?>
<!-- Main menu -->
<li class="<?php echo ($page_name=='dashboard.php')?'current':'';?>"><i class="glyphicon glyphicon-home"></i> Dashboard</li>
<li class="submenu <?php echo ($page_name=='welcome_note.php' || $page_name=='corporate_profile.php' || $page_name=='introduction_of_the_township.php' || $page_name=='location_map.php')?'current open':'';?>">
<a href="#">
<i class="glyphicon glyphicon-list"></i> Masters
<span class="caret pull-right"></span>
</a>
<!-- Sub menu -->
<ul>
<li class="<?php echo ($page_name=='welcome_note.php')?'current':'';?>">Welcome Note</li>
<li class="<?php echo ($page_name=='corporate_profile.php')?'current':'';?>">Corporate Profile</li>
<li class="<?php echo ($page_name=='introduction_of_the_township.php')?'current':'';?>">The Township</li>
<li class="<?php echo ($page_name=='location_map.php')?'current':'';?>">Location Map</li>
</ul>
</li>
</ul>

jQuery - using the same function (ToggleNav/Dropdown) on multiple ID's

I'm trying to make multiple dropdown menu's on my website and I am using this jQuery for this:
$(function() {
var pull = $('#pull');
menu = $('#nav');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
Here's the html part:
<nav class="container">
<a href="#" id="pull" style="display:block;">
<h3>Menu</h3>
</a>
<ul id="nav" style="display:none;">
<li>Pizza</li>
<li>Pasta</li>
<li>Burger</li>
<li>Specials</li>
<li>Drinks</li>
</ul>
</nav>
It works wonderful if I only have one drop down menu but as soon as I add another one, only one of them (doesn't matter if it's two, three or more then) is actually dropping down.
I gave every Menu it's own ID and copied the code every time and replaced the ID's but this doesn't work.
Already looked into this (using the same function of different events ) or this (Jquery - use the same function for multiple requests) and other threads but i can't figure out how to apply this on my code...
Here's my Jsfiddle on what I'm trying to do: https://jsfiddle.net/thwdyccr/2/
Use classes instead of ids, and then you can make the same code work for all cases (fiddle):
$(function () {
var pull = $('.pull');
$(pull).on('click', function (e) {
e.preventDefault();
var menu = $(this).next();
menu.slideToggle();
});
});
<nav class="container"> <a href="#" class="pull" style="display:block;">
<h3>Menu1</h3>
</a>
<ul class="nav" style="display:none;">
<li>Pizza
</li>
<li>Pasta
</li>
<li>Burger
</li>
<li>Specials
</li>
<li>Drinks
</li>
</ul>
</nav>
<nav class="container"> <a href="#" class="pull" style="display:block;">
<h3>Menu2</h3>
</a>
<ul class="nav" style="display:none;">
<li>Pizza
</li>
<li>Pasta
</li>
<li>Burger
</li>
<li>Specials
</li>
<li>Drinks
</li>
</ul>
</nav>
Try this:
https://jsfiddle.net/thwdyccr/5/
Rather than using IDs - consider using a class instead - this'll save you lots of duplication in your code (as essentially it's all doing the same thing).
You can specify the target selector (e.g. the element you want to show) by traversing your structure with .parent() .children() or .find()
If you're wondering why I am storing $(this) in var element - it is because the browser has to figure out what $(this) is each time you use it - so it's good practice to store it in a variable.
HTML
<nav class="container">
<a href="#" class="pull" style="display:block;">
<h3>Menu1</h3>
</a>
<ul class="nav" style="display:none;">
<li>Bear</li>
<li>Pasta</li>
<li>Burger</li>
<li>Specials</li>
<li>Drinks</li>
</ul>
</nav>
<nav class="container">
<a href="#" class="pull" style="display:block;">
<h3>Menu2</h3>
</a>
<ul class="nav" style="display:none;">
<li>Fish</li>
<li>Pasta</li>
<li>Burger</li>
<li>Specials</li>
<li>Drinks</li>
</ul>
</nav>
JS
$(function() {
$(".pull").click(function(e) {
e.preventDefault();
var element = $(this);
element.parent('nav.container').children("ul.nav").slideToggle();
});
});
You shouldn't use id's for pull. Here's an updated fiddle https://jsfiddle.net/thwdyccr/2/.
Try utilizing Attribute Starts With Selector [name^="value"] [id^=pull] , e.target.parentElement.nextElementSibling to select next ul to call .slideToggle() on
$(function() {
var pull = $("[id^=pull]")
, menu = $("[id^=nav]")
, menuHeight = menu.height();
pull.on("click", function(e) {
e.preventDefault();
$(e.target.parentElement.nextElementSibling).slideToggle();
});
});
jsfiddle https://jsfiddle.net/wpvok7gy/1/

jquery tabs with links remember last active item

I did the following code, to be able to change the class of an li tag and then change the CSS of it.
I created a cookie variable that help me to select the good li tag. but I have a gap when I click.
I have three tabs : device, links and sites.
for example if I click on devices and had click on sites before, sites will be selected.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
jQuery.cookie("select", jQuery(this).parent('li').attr('id'));
});
jQuery('#' + jQuery.cookie("select")).addClass('active').siblings().removeClass('active');
});
</script>
<div class="tabs" >
<ul class="tab-links">
<li id="device">Devices</li>
<li id="link">Links</li>
<li id="site">Sites</li>
</ul>
</div>
Since clicking the link takes you to a new page, there is no need to do this programmatically.
The page /netmg/controller/device/search should have
<li id="device" class="active">...</li>
<li id="link">...</li>
<li id="site">...</li>
The page /netmg/controller/link/search should have
<li id="device">...</li>
<li id="link" class="active">...</li>
<li id="site">...</li>
The page /netmg/controller/site/search should have
<li id="device">...</li>
<li id="link">...</li>
<li id="site" class="active">...</li>
You can put that in the HTML.
If, instead, you want to make it all one page and the href attribute indicates what content is displayed, say, in a <div id="deviceContent"></div> or similar, you could use this:
<script>
jQuery(document).ready(function() {
jQuery('.tab-links li a').click(function(e){
e.preventDefault();
var newdiv = jQuery(this).attr('href');
jQuery('.tab-links li').removeClass('active');
jQuery(this).parent('li').addClass('active');
jQuery('.contents div').hide();
jQuery(newdiv).show()
});
});
</script>
<div class="tabs" >
<ul class="tab-links">
<li id="device" class="active">Devices</li>
<li id="link">Links</li>
<li id="site">Sites</li>
</ul>
</div>
<div class="contents">
<div id="deviceContent"><!-- insert some contents -->a</div>
<div id="linkContent"><!-- insert some contents --> b</div>
<div id="siteContent"><!-- insert some contents -->c</div>
</div>
For a demo, see this fiddle.

dropdown if image files using javascript

I have a dropdown of image icons. Now I want to change the dropdown's default page load icon to one selected by the user, using javascript. I am new to javascript but can not do it. FYI,I have included jquery files too. Please help.
<li>
<div class="dropdown choose-theme" id="theme">
<a class="#" data-toggle="dropdown" href="#"><img src="img/theme/blue.png" alt="Blue"> Blue</a>
<ul class="dropdown-menu" role="menu">
<li role="menuitem"><img src="img/theme/green.png" alt="Green" value="img/theme/green.png"> Green</li>
<li role="menuitem"><img src="img/theme/grey.png" alt="Grey" value="img/theme/grey.png"> Grey</li>
<li role="menuitem"><img src="img/theme/red.png" alt="Red" value="img/theme/red.png"> Red</li>
<li role="menuitem"><img src="img/theme/orange.png" alt="Orange" value="img/theme/orange.png"> Orange</li>
<li role="menuitem"><img src="img/theme/blue.png" alt="Blue" value="img/theme/blue.png"> Blue</li>
</ul>
</div>
</li>
Custom javascript I was trying
$(function()
{
$('#theme ul li').click(function({
var $a = $(this).find('a');
$(this).parents('#theme').children('a').replaceWith($a);
});
Try this
$(document).ready(function(){
$('#theme ul li a').click(function(){
$(this).parents('#theme').children('a').html($(this).html());
});
});
You were missing a couple of parentheses and curlies there:
$(function(){
$('#theme ul li').click(function(){
var $a = $(this).find('a');
$('#theme').children('a').replaceWith( $a.clone() );
});
});
I replaced $(this).parents('#theme') with just $('theme') (it's an ID, you should always one and don't need to traverse to find it).
Also did $a.clone();, otherwise the clicked link would actually be removed from the list.

Find child of parent container using jquery

I am probably looking at this the wrong way, but I am having trouble locating an element within my page and am hoping someone can help.
The scenario is this:
I have a <ul> containing a number of <li>'s which in turn contain <a href>'s. I am getting the value of the rel attribute of the clicked <a href> and want to replace the text in a <span class='someclass'> which is located in a parent container. There may be more than one of these <span class='someclass'> on the page so I need to find the closest one.
Here is how my HTML looks
<h3 class="my-header-class">
<span class="some-class">Title Text</span>
</h3>
<ul class="tabs">
<li><a rel="Title Text 1" href="#tab1">Link 1</a></li>
<li><a rel="Title Text 2" href="#tab2">Link 2</a></li>
<li><a rel="Title Text 3" href="#tab3">Link 3</a></li>
</ul>
Here is my javascript
var titletext = $(this).attr('rel');
var container = $(this).parent().children(".some-class");
container.text(titletext);
The titletext variable is being set with the correct text but I am unable to replace the text of the <span class='someclass'>. I assume because I am not finding it correctly.
Thanks,
Tristan
$(this).parent().parent().prev().children(".some-class");
<h3> <!-- PREV OF UL -->
<span> <!-- CHILDREN OF H3 -->
<ul> <!-- PARENT OF <LI> AND <A> -->
<li> <!-- PARENT OF <A> AND CHILDREN OF <UL> -->
<a> <!-- CHILDREN OF <UL> AND <LI> -->
$(this).parent().parent().prev('h3').children(".some-class")
$("ul.tabs a").click(function() {
var titletext = $(this).attr('rel');
$(this).closest("ul.tabs").prev().find(".some-class").text(titletext);
});
Working example: http://jsfiddle.net/peeter/67vTV/

Categories

Resources