I'm currently working on making a timeline for a website page that displays the years and then when clicked it should open up and display what happened in those years and keep the other stuff from other years hidden. For some reason my jquery is doing the opposite it keeps what i click on and hides every other year and their data.
Here is my HTML
<div class="timeline">
<ul>
<li class="timeli">1996
<ul class="timeUlSub">
<li>
<div class="arrow-up"></div>
<p class="timeline-description">test</p>
</li>
<li>
<div class="arrow-up"></div>
<p class="timeline-description">test</p>
</li>
</ul>
</li>
<li class="timeli">1997
<ul class="timeUlSub">
<li>
<div class="arrow-up"></div>
<p class="timeline-description">Test</p>
</li>
</ul>
</li>
<li class="timeli">1999
<ul class="timeUlSub">
<li>
<div class="arrow-up"></div>
<p class="timeline-description">test</p>
</li>
</ul>
</li>
</ul>
</div>
Here is my jquery I guess my problem is that i dont fully understand the .sibling in jquery.
$(document).ready(function(){
$(".timeli").click(function(){
$(this).siblings($(".timeUlSub")).slideToggle("slow", function(){});
});
});
HERE IS THE EDIT FOR ANSWER it works perfectly for me thanks for the help!
$(document).ready(function(){
$(".timeli").click(function(){
$(this).find($(".timeUlSub")).slideToggle("slow", function(){});
});});
timeUlSub is the child of timeli, and not sibling (same-level elements). Use find() or children()
$(this).find(".timeUlSub").slideToggle("slow", function(){});
or
$(this).children(".timeUlSub").slideToggle("slow", function(){});
Note : children() searches for first-level children only, find() searches children, grand-children and so on.
.timeUlSub is child of clicked li element. thus you need to use .find() instead of .siblings().You also do not need the jquery object, you can simply use the selector for required element:
$(this).find(".timeUlSub").slideToggle("slow", function(){});
Complete Click Event:
$(".timeli").click(function(){
$(this).find(".timeUlSub").slideToggle("slow", function(){});
});
I believe you want to hide the child ul of the other elements, but also show those of the one that has been clicked...
$(document).ready(function () {
$(".timeli").click(function () {
$(this).siblings().find(".timeUlSub").hide("slow");
$(".timeUlSub", this).show("slow");
});
});
This behaviour is "open the one I click and hide the rest".
If you want "toggle the one I click", you don't need to worry about siblings at all.
$(".timeUlSub", this).slideToggle("slow");
See it in action on JSFiddle, or the second version.
.timeUlSub is not a sibling, rather a child element of .timeli.
You should refactor your code to:
$(".timeli").click(function(){
$(this).find(".timeUlSub").slideToggle("slow", function(){});
});
And an even better implementation would be to delegate the click:
$(document).on("click", ".timeli", function(){
$(this).find(".timeUlSub").slideToggle("slow", function(){});
});
Related
I want to create dropdown with country->region->city selection.
The first ul opens from click on that span and the others set to show on hover (code at the bottom).
<input type="text" id="srch-area" alt="" class="c-textfield suggestionsInput " name="locationStr" maxlength="" size="" tabindex="3" title="" value="Deutschland" defaultvalue="" highlight="y" strict="y" autocomplete="off">
<span class="c-icon-arrow-green-down-left c-icon" id="loc-slctbx"></span>
<ul class="dropdown-location-ul" id="dropdown-country" style="display:none;">
<li class="dropdown-location-li">
<strong>Deutschland</strong>
<ul class="dropdown-location-ul" style="display:none;">
<li class="dropdown-location-li">
<strong>Brandenburg</strong>
<ul class="dropdown-location-ul" style="display:none;">
<li class="dropdown-location-li">
<strong>Oranienburg</strong>
</li>
<li class="dropdown-location-li">
<strong>Schwedt</strong>
</li>
...
</ul>
</li>
<li class="dropdown-location-li">
<strong>Berlin</strong>
</li>
...
</ul>
</li>
<li class="dropdown-location-li">
<strong>France</strong>
</li>
...
</ul>
$('.dropdown-location-li').hover(function(){
$(this).children('ul').css('left', $(this).parent('ul').width()+'px');
$(this).children('ul').show();
}, function(){
$(this).children('ul').hide();
});
This works just fine and now i need to make it on click to change value of near input to the name of location inside strong tag. I tried the code below but it appears that $(this) selecting the element and all his parents, but i need to get location from only the one i clicked. Please tell me how to do that correctly? Maybe i have completely wrong approach to do this and need to make all with id's and stuff, but i just wanted to minimise the amout of repeating js.
$('.dropdown-location-li').click(function(){
$('#srch-area').val($(this).children('strong').text());
$('#dropdown-country').hide();
});
This is how it shows in console. AS you can see when i click on Oranienburg it selects Brandenburg and Deutschland as well which are the parents of the element i clicked.
console screenshot
You have nested .dropdown-location-li elements, so the click keeps propagating up to the other LI elements, firing the event handler again etc.
You should stop the propagation the first time
$('.dropdown-location-li').click(function(e){
e.stopPropagation();
$('#srch-area').val($(this).children('strong').text());
$('#dropdown-country').hide();
});
try to use JQuery Find
$(this).find('strong').text()
I have this HTML:
<ul>
<li class="selected">
..
</li>
<li>
..
</li>
<li>
..
</li>
</ul>
<div id="firstDiv"></div>
When the li a is clicked I want to set it's title as the content in #firstDiv. I'm a newbie in this and I need help.
Just take the title attribute from the item clicked $(this) using .attr('title') and place the text in the div using .html() or .text():
$('a.myClass').click(function(){
$('#firstDiv').html($(this).attr('title'));
});
The only reason to use e.preventDefauilt() is if the page can scroll down, as a # bookmark link will spring to the top:
$('a.myClass').click(function(e){
e.preventDefault();
$('#firstDiv').html($(this).attr('title'));
});
This is what I'd do:
$("a").click(function(e){
e.preventDefault();
$("#firstDiv").text($(this).attr("title"));
});
Here is the JSFiddle demo
The below portion of code works good:
<div id="newsListDiv">
News: <br /><br />
<ul id="newsList">
<li id="0">
News 1
</li>
<li id="1">
News 2
</li>
<li id="2">
News 3
</li>
</ul>
</div>
<script>
$("#newsList li").click(function () {
alert($(this).attr("id"));
});
</script>
But if I comment the UL and I load it via JSON, the script that returns me the id of the list item, seems doesn't work.
Here there is the example: http://jsfiddle.net/tLrjbquq/1/
Can anyone help me?
Thanks in advance.
Currently what you are using is called a "direct" binding which will only attach to element that exist on the page at the time your code makes the event binding call.
You need to use Event Delegation using .on() delegated-events approach, when generating elements dynamically.
General Syntax
$(staticParentSelector).on('event','selector',callback_function)
Example
$("#newsList ").on('click', 'li', function () {
alert("ID --> " + $(this).attr("id"));
});
Fiddle
I have a unordered list which needs the same functionality as the select tag. This works fine, but I want to reuse the dropdown list multiple times on every page and here things start to mess up as the selectors apply on all the lists and thus duplicate every behaviour and .clone(). I think I need to use the .closest() method to prevent the duplication but where and how to apply this?
Thanks
Working demo
Duplicate issue demo
jQuery code:
$(".cloned").text($(".selected").text());
$(".options").hide();
$(".cloned").click(function(){
$(".options").toggle();
e.preventDefault();
});
$('.select .options li').click(function(){
$(this).next.siblings().removeClass('selected');
$(this).next.addClass('selected');
$(".cloned").text($(".selected").text());
$(".options").hide();
});
html code:
<div class="select">
<span class="cloned"></span>
<ul class="options">
<li class="selected">Kensington</li>
<li>Lingfield</li>
<li>Wolverhampton</li>
<li>Cheltenham</li>
</ul>
</div>
<div class="select">
<span class="cloned"></span>
<ul class="options">
<li class="selected">Kensington</li>
<li>Lingfield</li>
<li>Wolverhampton</li>
<li>Cheltenham</li>
</ul>
</div>
$(".cloned").click(function () {
$(this).next(".options").toggle();
});
http://jsfiddle.net/6mukW/10
You also have some issues with the other part of the jQuery (select/deselect), but I'm not really sure what you're trying to do.
Using Firebug I have found that the Dynatree plugin changes the following code:
<li id="id3.1" class="expanded">Menu 1
<ul>
<li id="id3.1.1">Sub-menu 1</li>
</ul>
</li>
To this:
<li class="">
<span class="dynatree-node dynatree-exp-c dynatree-ico-c">
<span class="dynatree-connector"></span>
<span class="dynatree-icon"></span>
<a class="dynatree-title" href="#">Sub-menu 1</a>
</span>
</li>
So when I try to make a click event on the id="id3.1.1" nothing happens because this id doesn't exist anymore.
I made a search here and found the onActivate option that will make my click happen on the menu:
$("#treeMenu").dynatree({
onActivate: function(node){
var menuTitle = node.data.title;
alert(menuTitle);
}
});
My question: Is this the only way to do the click event using Dynatree?
Well I think that is the best option, because it uses the API of the plugin, but of course you could still attach an event to the <a> like this:
$('a.dynatree-title').live('click', function(e){
//here e.target is the link you have clicked
});