I have tried to google it and found some results in SO. However the point in the discussion is not same as mine.
Before anyone can accept my question, I want to make it clear first what I really want to get from here. As follows;
If this is a good way for me to achieve what I need with what I have now (the codes), what should I modify from there.
If this is not the good way, 'by what way' should I change and achieve it.
Oke
The scenario is:
I have at least five <li> menus in a <ul>. In each <li>, there are some hidden divs so that the <li> will only show the title of that <li> but not showing up the main content or the hidden divs.
And then, I have a blank div that I want it to automatically be filled by the main content that is being hidden from the first <li>.
After that, if the second <li> and so on is clicked, the blank div that has been filled by the main content of the first <li> will be changed according to the next chosen or the next clicked <li>.
This script that I have been using is here, but it doesnt work.
$('#zen-content').html($('#choice').val());
$('#choice').change(function(event) {
$('#zen-content').html('' + $('#choice').li()+ '');
});
And here is my html:
<ul id="choice">
<li> fisrt choice <div>hidden div that is going to show in blank div</div></li>
<li> second choice <div>hidden div...</div> </li>
<li> third choice <div>hidden div...</div </li>
<li> last choice <div>hidden div...</div </li>
</ul>
<div id="zen-content">blank div</div>
Try
$(document).ready(function(){
$('#zen-content').html($('#choice li:first').html());
$('#choice li').click(function(event) {
$('#zen-content').html( $(this).html());
});
});
Fiddle:
http://jsfiddle.net/48Qp4/
use the Click event instead of change(btw you have a typo).
demo
$('#choice li').on("click", function () {
$('#zen-content').html('' + $(this).html() + '');
});
You need to select the div inside the click li element. Example: http://jsfiddle.net/8TURA/
HTML
<ul id="choice">
<li>
Option 1
<div>option 1 hidden div content</div>
</li>
<li>
Option 2
<div>option 2 hidden div content</div>
</li>
<li>
Option 3
<div>option 3 hidden div content</div>
</li>
<li>
Option 4
<div>option 4 hidden div content</div>
</li>
<li>
Option 5
<div>option 5 hidden div content</div>
</li>
</ul>
<div id="zen-content"></div>
CSS
#choice div
{
display:none;
}
JQUERY
$('#choice li').click(
function()
{
$('#zen-content').html($(this).find('div').html());
}
);
Related
I have filter on my website. There are categories and it display services from category when you click on that category link.
I want to add animation for those posts, so when I click on category to animate those posts. I made animation and all I need is to add fade-in-services class to every post when I click on his category, and before that to remove if that post have fade-in-services class.
I have two lists, one for categories, other for posts and that looks like this
<ul class="subcats">
<li>
All
</li>
<li>
Cat1
</li>
<li>
Cat2
</li>
</ul>
<ul id="posts">
<li>
<a href="#">
<div class="fade-in-services">Post 1</div>
</a></li>
<li>
<a href="#">
<div class="fade-in-services">Post 2</div>
</a>
</li>
<li>
<a href="#">
<div class="fade-in-services">Post 3</div>
</a>
</li>
</ul>
So when you click on All it displays all three posts, when click on Cat1 displays only Post 1 and Post 2, and when you click on Cat2 displays Post 3.
jQuery('.subcats li').click(function() {
jQuery('.hp-single-service').addClass('fade-in-services');
jQuery(this).removeClass('fade-in-services');
});
and this work but not always, because jQuery(this) catch .subcats li and doesn't remove class fade-in-services. So when I go throw categories, if same post is in two categories that post doesn't animate because it have fade-in-service class.
How can I fix this?
Thank you!
I'm not sure your code does what you think it does. It does the following:
Sets an on click event on the 3 li in the ul.subcats
When one of the li is clicked it:
2a. Adds .fade-in-services to all elements with .hp-single-service
2b. Removes .fade-in-services from the clicked li
2bi. (which doesn't have the class at any point)
Firstly, I need to say that I'm pretty new to jQuery.
I have this situation: http://jsfiddle.net/dVf8m/
I've been wondering if there is a way to do the slideToggle simplier. Now I have two ids on menu elements (#trigger1 and #trigger2) and two ids on the hidden divs (#one and #two). This also results in double jQuery. Is it possible to avoid all the ids and make it simpler?
Another thing is that if I click on both menu elements (First and Second) both divs appear. I want only one of the hidden divs to be visible at one time? How can I force the first div to disappear when the other one is appearing?
Also, if I'd want to use fadeIn/fadeOut in this situation, how to do it when both of them use the .click event?
Change your code to something like below. Have a class for the div and add click listener to it. add any attribute to the div and give the id of the div to be toggled.
<div id="top">
<ul>
<li><span id="trigger1" class="toggler" data-item="item1">First</span></li>
<li><span id="trigger2" class="toggler" data-item="item2">Second</span></li>
<li>Third</li>
</ul>
</div>
<div class="hidden" id="item1">
<ul>
<li>Smthn</li>
<li>Smthn2</li>
<li>Smthn3</li>
</ul>
</div>
<div class="hidden" id="item2">
<ul>
<li>Apple</li>
<li>Orange</li>
<li>...</li>
</ul>
</div>
$(document).ready(function() {
$('.toggler').click(function(e) {
$("#"+$(this).attr("data-item")).slideToggle(500);
});
});
JSFIDDLE
I have this menu and I want to set one variable for each li item, and alert with it's text when clicked. This was easy, I solved for this with the script below.
$("ul#menudropd .animal li a").click(function() {
var whatever = $(this).text();
alert(whatever); });
Now, I also need to include the 'parent' (ie, the text in the mainlinks class) in the alert. The parent is usually never clicked, only hovered over to display the children. But, it is text so it should be easy right?
Example:
Currently, you click on "Puppy" and alert says "Puppy". I need to say "Dog : Puppy". Same for the next section. Click on "Kitten" I need the alert to come back as "Cat: Kitten".
I know how to have the alert display both once I get that 2nd variable set, I just can't figure out how to do it without clicking it. Any ideas?
<ul id="menudropdown">
<li class="mainlinks"> Dog
<div class="animal dog">
<li> Puppy </li>
<li> Pup </li>
</div>
</li>
<li class="mainlinks"> Cat
<div class="animal cat">
<li> Kitty </li>
<li> Kitten </li>
</div>
</li>
</ul>
Use closest() and you may also want ul instead of div, the html you have seems invalid as div directly contain li element.
The HTML List item element (<li>) is used to represent a list item. It
should be contained in an ordered list (), an unordered list
() or a menu (), reference.
Live Demo
Html
<ul id="menudropdown">
<li class="mainlinks"> Dog
<ul class="animal dog">
<li> Puppy
</li>
<li> Pup
</li>
</ul>
</li>
<li class="mainlinks"> Cat
<ul class="animal cat">
<li> Kitty
</li>
<li> Kitten
</li>
</ul>
</li>
</ul>
Javascript
$("ul#menudropdown .animal li a").click(function () {
alert($(this).closest('.mainlinks').find('a:first').text());
});
You should find the closest li tag with your mainlinks class and then select the text of the first child.
Like this:
$(this).child().first().text()+" : "+$(this).text();
HI I am trying to make a menu where items show up as they hover. I am quite new to jquery, css, etc. and I cant quite figure out what my problem is. Right now I do get my div to show up on hover, but instead of just one all of them show up.
How do I make the div tag of only the item I hover over show up.
Here is the fiddle:
<ul class="navi">
<li> <a class='light'>
Item1
<div class="hover-name" style="display:none">
Businesses
</div>
</a>
</li>
<li> <a class='light'>
Item2
<div class="hover-name" style="display:none">
Agencies
</div>
</a>
</li>
<li> <a class='light'>
Item3
<div class="hover-name" style="display:none">
Billing Plans
</div>
</a>
</li>
</ul>
http://jsfiddle.net/Samfr/
For example if I hover over Item1 then only Businesses would show up. Item2 only Agencies show up
Thank you
You are using the following to show the items:
$('.hover-name').show();
What this does is find everything within the doucment that has a class of .hover-name and does the show() function on it.
All you need to do is change the show line to be context aware:
$(this).find('.hover-name').show();
Using $(this).find('.hover-name') will find all the elements inside of what you hovered over with a class of .hover-name and show that, instead of showing all of them.
Additionally, if you wanted to hide the shown elements when you move over a new element, you could use the following:
$('.navi > li a.light').hover(function () {
$('.hover-name').hide();
$(this).find('.hover-name').show();
});
$('.hover-name').hide(); will hide everything with the class of .hover-name and then show the items inside the element you are currently over.
This code is going to hide the other elements:
$('.navi > li a.light').hover(function () {
$(this).parent().parent().find('.hover-name').hide();
$(this).find('.hover-name').show();
});
Fiddle
You can use the currentTarget of the event, which will return the element that was hovered, and you can use that to filter to only show the hover-name of that element:
$('.navi > li a.light').hover(function (e) {
$(e.currentTarget).find('.hover-name').show();
});
(http://jsfiddle.net/Samfr/4/)
Sorry if this is a silly question, I'm very new to JS/JQuery and don't know if there's a simple answer to my problem.
I have two toggling divs set up more or less like the following (this is the stripped-down version):
<div id="top-story-panel">
<div id="story-toggle">
<ul>
<li id="top-stories">
Top Stories
</li>
<li id="toc">
All Stories
</li>
</ul>
</div>
</div>
<div id="toc-panel">
<div id="story-toggle">
<ul>
<li id="top-stories">
Top Stories
</li>
<li id="toc">
All Stories
</li>
</ul>
</div>
</div>
With this function, the two divs toggle back and forth without a hitch, but if you click on one of the toggles ("top stories"/"all stories", respectively) and then click it AGAIN it hides the div it just showed and... can't find anything else to replace it with. Both divs are hidden now and there's no way for the user to interact with either div.
jQuery(function($) {
var $contentPanel= $('#top-stories-panel, #toc-panel')
$toggle= $("#top-stories, #toc");
$toggle.on('click', function(e) {
var $id;
e.preventDefault();
$icons.removeClass('hidden');
$id=$('#'+this.id+'-panel'); //get menu id
$contentPanel.fadeOut(10);
if(! $id.is(':visible')) {
$id.fadeIn(450)
preloadImages: 'all';
$(this).addClass('hidden');
}
});
});
I'm assuming that if I place the toggles outside of their respective divs, I won't have this problem -- but is there a code workaround for the toggle to stay within the div?
Thanks so much for all of your help ;_;