I'm trying to mirror the 'active' state on two unordered lists using jquery/javascript. The first list is a slider/carousel and the 2nd list will be navigation links.
E.g.
<ul class="carousel">
<li class="active">Slider 1</li>
<li>Slider 2</li>
<li>Slider 3</li>
<li>Slider 4</li>
</ul>
<ul class="nav">
<li class="active"><a href'#">Link 1</a></li>
<li><a href'#">Link 2</a></li>
<li><a href'#">Link 3</a></li>
<li><a href'#">Link 4</a></li>
</ul>
So, the idea is that when the active state of the <li> in the carousel changes, so does the corresponding <li> in the 'nav' list.
Any help would be greatly appreciated.
I've created a working example here: https://jsfiddle.net/aj68mogk/14/
It was not working for you on JSFiddle because the script does not change the carousels .active class, thats done by the wp plugin.
I've put in a link to "fake" the action the plugin does (changing the carousel state).
There was a mistake in the part of code wich gets the index of the active carousel li.
So please ignore the code of my first answer and take the one of the JSFiddle. But dont forget to remove the fake link and its click function when using this on your page
Next thing is you have to select a Jquery version on JSFiddle, otherwise the $(document).ready() function is never entered, because its not pure js.
Hope this helps, if there are questions left, just leave a comment
I worked something out from several SO posts:
$(document).ready(function() {
$('.carousel').bind('DOMSubtreeModified', function(e) {
$(".nav>li.active").removeClass("active");
$(".nav>li").eq($(".carousel").index($("active"))).addClass("active");
});
});
Just add this to your Javascript and its done.
What it does: First you bind any DOM-Changes (you've said it's changed by a wp plugin or so) in the .carousel element to a new function. Inside the function you remove the active li tag, then you pick the index of the active carousel element and add the .active tag to the nav element with the index from the .carousel
Hope this helps
EDIT: There was a mistake in the code, some unneccesary line i kept in from testing. Please take the updated code
If you don't have access to the code of Wordpress plugin you have no direct way to do it , but can use a setTimeOut function. This is not the cleanest of the approaches , but I guess there is no other option.
setInterval(function() {
if ($(".carousel li").hasClass("active")) {
var active = $(".carousel").find(".active");
var index = $(active).index();
index = index + 1;
$(".nav li:nth-child(" + index + ")").addClass("active");
}
}, 1000);
.active {
color: red;
}
.active a {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="carousel">
<li class="">Slider 1</li>
<li class="active">Slider 2</li>
<li>Slider 3</li>
<li>Slider 4</li>
</ul>
<ul class="nav">
<li class="">
Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>Link 4
</li>
</ul>
Related
Hi I am trying to make a horizontal menu bar using CSS and Javascript.
When clicked, I want the menu item to background to turn black.
Here is a part of HTML code-
<ul id="top_menu">
<li onclick="arrow(this)">item no 1</li>
<li onclick="arrow(this)">item no 2</li>
<li onclick="arrow(this)">item no 3</li>
<li onclick="arrow(this)">item no 4</li>
<li onclick="arrow(this)">item no 5</li>
</ul>
JavaScript part-
function arrow(x){
x.style.background="#000000";
}
Now when someone clicks on the menu, the background turns black.The problem is when any other item is selected(clicked) the previous selected item doesn't goes back to its original background color.
How should I implement this feature?
Thanks!
There are few ways... This one is easiest to me:
function arrow(x){
var ul = document.getElementById('top_menu');
list=ul.getElementsByTagName("li");
for(i=0;i<list.length;i++){
if(list[i]!==x){
list[i].style.background="#ffffff";
}
else {
list[i].style.background="#000000";
}
}
}
Demo: http://jsfiddle.net/ag9L09sb/1/
I want to check if the element with the class nav-title also has an active class, if true, slide down the next element (which has a class of .sub-nav) beneath the element with the nav-title class.
Otherwise if no element with the class of nav-title has an active class, find the first element with a class of .sub-nav, show it, go up, add the class of active to the .nav-title
The next code with the on-click functions works just fint, it's just the first one that doesn't.. i've tried to add the class active in the html document itself, but then both the first element and the second gets the class active and no sub nav gets slide down.
$(document).ready(function() {
if ($("#nav").find("nav-title").hasClass("active")) {
$(this).next(".sub-nav").slideDown("fast");
} else {
$("#nav").find(".sub-nav:first").show().prev().addClass("active");
}
$("#nav").on("click", ".nav-title", function() {
$('.active').removeClass("active").next(".sub-nav").stop().slideUp("fast");
$(this).toggleClass("active");
$(this).next(".sub-nav").stop().slideDown("fast");
});
});
Can anybody help?
Also my html looks like this by the way:
<ul id="nav">
<li class="nav-title">Title 1</li>
<ul class="sub-nav">
<li>link 1</li>
<li>link 2</li>
</ul>
<li class="nav-title active">Title 2</li>
<ul class="sub-nav">
<li>link 1</li>
<li>link 2</li>
</ul>
</ul>
My code might be a little messy, i'm just learning jquery as we speak.
Wooops! I made a little live example: http://fiddle.jshell.net/kcWA8/2/
You can't use this in this context the way that you think you can. this inside of the if is not the nav. You're also mising the . before nav-title in your find. Do this instead:
if ($("#nav").find(".nav-title").hasClass("active")) {
$("#nav .nav-title.active").next(".sub-nav").slideDown("fast");
}
Or:
var $active = $("#nav .nav-title.active");
if ($active.length > 0) {
$active.next(".sub-nav").slideDown("fast");
}
I used James Montagne's answer, it worked just fine, looks like I misunderstand this (this) and forgot a dot in front of my class.
Thanks!
First of all, i know that there are tons of tutorials out there to show how to make a dropdown list, but i wanted to try myself with my limited knowledge to make a very simple one, and i am aware that i am probably doing it wrong, but still i wanna try it.
So this is my problem now, i have set up ul and li in html and i have setup a simple jquery code that it will slideDown the submenu when mouse enters and slideUp the submenu when mouse leaves, but it doesn't work correctly at all.
Code:
<div style="width:200px; height:400px;">
<ul id="ul" class="menu" style="border:thin solid #090;">
<li id="li">Test
<ul id="ull">
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<li id="li">Test 2A
<ul id="ull">
<li>Test 3A</li>
<li>Test 4A</li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#ul ul").css({"color":"red","font-size":"30px"}).hide();
});
$("#li").mouseenter(function(){
$("#ull").slideDown(400).show();
});
$("#li").mouseleave(function(){
$("#ull").slideUp(400).hide(100);
});
</script>
All this, is inside one html, i am not using anything else, expet a CSS where the class "menu" is just this display:inline-block;
The problem is that dropdown menu doesn't work as it should. When i move my mouse over the Test the sub-menu appears, but this doesn't happen at Test 2A, plus when the dropdown list "drops", Test 2A follows below it aswell.
I can't explain the problem easily so i setup a jsfiddle which will help you understand.
Once again, i know that this is not right and i should have done it by using some other way, but i wanted to try using the few things i've learned so far to make a simple dropdown list.
Thanks in advance.
Id must be unique.
<li id="li">Test
<li id="li">Test 2A
Change to different id's or use a class
Corrected Fiddle
And do not take li and ul as Id's or classes.Those are reserved key words.Creates mess.
In my opinion, the best solution is to change id at one of the two minor ul and add a row in your function that call it.
<div style="width:200px; height:400px;">
<ul id="ul" class="menu" style="border:thin solid #090;">
<li id="li">Test
<ul id="ull">
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<li id="li">Test 2A
<ul id="lull">
<li>Test 3A</li>
<li>Test 4A</li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#ul ul").css({"color":"red","font-size":"30px"}).hide();
});
$("#li").mouseenter(function(){
$("#ull").slideDown(400).show();
$("#lull").slideDown(400).show();
});
$("#li").mouseleave(function(){
$("#ull").slideUp(400).hide(100);
$("#lull").slideUp(400).hide(100);
});
</script>
Sorry for the vague title, but I couldn't find an appropriate title, explaining the problem well.
The problem: I wrote a code that toggles lists. It works the way I want it. When I click on the the 'headcategory' it opens the subcategories, etc. The problem occurs when I click on the headcategory for the first time, it opens every list, which is not what I want. When I close and open it again, it works the way it should be. I'm trying to figure out why it does that, but I've no clue. So if someone could help me, he/she would be greatly appreciated.
JQuery code.
$(document).ready(function()
{
$('ul.subcat').hide();
$('li').click(function(event)
{
event.stopPropagation();
$('ul', this).toggle();
});
});
HTML code
<ul class="headcat">
<li>item 1
<ul class="subcat">
<li>subitem 1
<ul class="subcat">
<li>subsubitem 1
<ul class="subcat">
<li><p>text</p></li>
</ul>
</li>
<li>subsubitem 2
<ul class="subcat">
<li><p>text</p></li>
<li>subsubsubitem 1
<ul class="subcat">
<li><p>text</p></li>
</ul>
</li>
<li>subsubsubitem 2</li>
</ul>
</li>
</ul>
</li>
<li>item 2</li>
</ul>
</li>
</ul>
You need to only select direct descendants of the currently clicked li, try this:
$(this).children("ul").toggle();
The following will also work, however it's not considered best practice to use the > descendant selector without a primary element before it.
$('> ul', this).toggle();
Example fiddle
Or try to hide the first subcat only on init:
$('ul.subcat:first').hide();
DEMO here: http://jsfiddle.net/kv4dT/
I needed a bit of help
My problem is I need a Fade in Fade out function that keeps repeating my Div Content about every 7 seconds. Content 1 will appear, then Content 2 will fade in, then Content 3 fade in after content 2 fades out, and it keeps repeating.
I wrote a script but it seems to not working properly. What am I doing wrong? How can I make this more efficient? Any guide will be helpful.
THE HTML inside of a UL wrapped in LIs
<ul>
<li class=”thecontent”> CONTENT 1</li>
<li class=”thecontent”> CONTENT 2</li>
<li class=”thecontent” > CONTENT 3</li>
<li class=”thecontent” > CONTENT 4</li>
<ul>
THE CSS
ul li.thecontent{ display:none;}
THE JQUERY
$(document).load(function(){
function fadeMyContent() {
$(".content:hidden:first").fadeIn(700).delay(1000).fadeOut(700,
function() { $(this).appendTo($(this).parent());
fadeMyContent(); });
}
fadeMyContent();
Here you go. In your code the class name in the selector is wrong and also the double quotes enclosing the class names in the markup is not correct.
Working demo
$(function(){
function fadeMyContent() {
$(".thecontent:first").fadeIn(700).delay(1000).fadeOut(700,
function() {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}
fadeMyContent();
});
Mark up
<ul>
<li class='thecontent'> CONTENT 1</li>
<li class='thecontent'> CONTENT 2</li>
<li class='thecontent'> CONTENT 3</li>
<li class='thecontent'> CONTENT 4</li>
<ul
Are you calling the correct class?
.content in the jQuery code and "thecontent" in the markup. How exactly is it not working properly? Is the timer not working is it fading too fast, not showing anything at all?
luckily this is what i am working on right now lol
$(document).ready(function(){
$('.clicked').click(function(){
$(this).next('.nextSibling').toggle('slow');
});
});