simple jquery code to show paragraph only when hovering the LI
<ol id="sortme">
<li>this content <p class="edit">first hidden content</p></li>
<li>this content <p class="edit">second hidden content</p></li>
<li>this content <p class="edit">third hidden content</p></li>
</ol>
Jquery
$(".edit").hide;
$('#sortme li').hover(
function () {
$(".edit").show();
},
function () {
$(".edit").hide();
}
);
my problem is when hovering any of li all paragraph's appear
i need to do it one by on one
so when hovering the first li "first hidden content" appear
and when hovering the second li "first hidden content" disappear and "second hidden content"
and so on for the rest of list
You can search in this context by supplying it as second parameter into $():
$(".edit").hide;
$('#sortme li').hover(
function () {
$(".edit", this).show();
},
function () {
$(".edit", this).hide();
}
);
Do this -
$('#sortme li').hover( function () {
$(this).find(".edit").show();
},
function () {
$(this).find(".edit").hide();
});
OR
$('#sortme li').hover(function () {
$(this).find(".edit").toggle();
});
You need to apply show hide to children of current li having class edit instead of applying to every element having class edit
Live Demo
$(".edit").hide;
$('#sortme li').hover(
function () {
$(this).find('.edit').show();
},
function () {
$(this).find('.edit').hide();
}
);
You can achieve the same effect using CSS only.
http://jsfiddle.net/LNsaa/
#sortme p {
display: none;
}
#sortme li:hover > p {
display: block;
}
You can then apply CSS3 transitions for some nice and smooth effects.
Related
I am new to Html,jQuery coding.I want to change background color of item selected(clicked) of an li.
I have my code below :
#In HTML#
<div id="major" class="major-funds form-group"><strong>Major funds (above 1.0% market share)</strong>
<ul>
<li style="list-style: none; display:inline;padding-left:5px;" class="text-primary" ng-click="GetProducts(x.code)" ng-repeat="x in Major">{{x.code}}</li>
</ul>
</div>
# In controller#
$('#major li').click(function () {
$('li').removeClass('text-primary.selected');
$(this).addClass('text-primary.selected');
});
What am I doing wrong ? When I click on li item, It doesn't call that function.
IF I use this dynamic list it doesn't hit that function but if I use static list it does hit that function.How should I implement click function for dynamic list?
When I click on li item, It doesn't call that function.
Are you sure JQuery is loaded properly?
Are you sure, you're not setting another click event for your list items?
Is your CSS defined correctly?
Anyway, this works for me:
$(document).ready(function () {
$('#major li').click(function () {
$('li').removeClass('selected');
$(this).addClass('selected');
console.log("HERE");
});
});
.selected{
background: #FF00FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="major" class="major-funds form-group"><strong>Major funds (above 1.0% market share)</strong>
<ul>
<li>XXXXX</li>
<li>YYYY</li>
</ul>
</div>
The click event is triggered (check with console.log function) but the action you execute are not defined properly.
$('li').removeClass('text-primary.selected');
$(this).addClass('text-primary.selected');
should be
$('li').removeClass('selected');
$(this).addClass('selected');
If your list is dynamically generated (not in the DOM on page load), the problem may come from the click function. In this case, just use :
$(document).on('click', '#major li', function () {
$('li').removeClass('selected');
$(this).addClass('selected');
});
where you can replace document by the container of your list. Per example :
$('#major').on('click', 'li', function () {
$('li').removeClass('selected');
$(this).addClass('selected');
});
Here is a JSfiddle with working example: https://jsfiddle.net/ztvdnh86/2/
Try this:
# In controller#
$('#major li').click(function () {
$('li.selected').removeClass('text-primary selected');
$(this).addClass('text-primary selected');
});
what you've written 'text-primary.selected' tries to select the element with the tag-name text-primary with the class .selected
what you want to do is to remove the selected class from all the lis with the class text-primary and then add the class selected to the clicked (selected) element:
$('#major li').click(function () {
$('li.text-primary.selected').removeClass('selected');
$(this).addClass('selected');
});
Basically what I have is a dropdown menu, when I click on the #default li a dropdown ul appears containing two list items. The idea is that when you move your mouse out of the dropdown ul or when you click on a .sub-option, the dropdown ul will fadeOut. This works, however, if I click on a .sub-option and the dropdown ul starts to fade, and then hover over the ul before the fadeOut is done, it will stop fading and the ul will reappear.. How do I prevent this from happening? I want nothing to happen when you move your mouse over the ul when it's fading out.
I tried adding a mouseenter event that checks if the ul is being animated but I'm not sure what exactly to put inside of this function, a simple return did not work. Any ideas on how to alter my code below so that it behaves properly?
The dropdown:
<ul id="sort-options">
<li id="default"><span>A-Ö</span>
<ul>
<li class="sub-options">A-Ö</li>
<li class="sub-options">Ö-A</li>
</ul>
</li>
</ul>
The script that toggles the dropdown:
$('#default').on('click', function() {
$('#default ul').stop().fadeToggle();
});
$('#default').on('mouseleave', function() {
$('#default ul').stop().fadeOut();
});
$('#default').on('mouseenter', function() {
if ($('#default ul').is(':animated')) {
return;
}
});
jsBin demo
$('#default').on('click', function(e) {
$('ul', this).stop().fadeToggle();
}).on('mouseleave', function() {
$('ul', this).fadeOut(); /* don't use .stop() */
});
the above works cause the .stop() used on the click event will stop any ongoing animations (the mouseleave fadeOut() which happens once the elements start to fadeToggle) and win! :)
Otherwise you need to stop the click bubble up the DOM tree and use:
jsBin demo using event.stopPropagation
$('#default').on('click', function() {
$('ul', this).stop().fadeToggle();
}).on('mouseleave', function() {
$('ul', this).stop().fadeOut(); // use .stop() but the issue will appear
});
$('#default li').on('click', function(e) {
e.stopPropagation(); // so dont let #default register any inner LI clicks
});
I have an issue using jquery. I have a content that have to become visible when I click on ul li in navigation.
But I'm missing something, when I click, nothing happens. I am not sure why this happens. Please take a look at the provided fiddle near the bottom
Here is the code:
$(document).ready(function(){
$("ul.topnav > li.one").click(function() {
$('.content').hide(500).fadeOut(400);
if ($(this).next().is(':hidden') == true) {
$(this).next().show(400).fadeIn(500);
}
});
$('.content').hide();
});
<ul class="topnav">
<li class="one">test</li>
<li>second</li>
</ul>
<div class="content">Some content here</div>
Here is a fiddle http://jsfiddle.net/2pBge/
Here you go
http://jsfiddle.net/Mc92M/1/
$(document).ready(function(){
$("li.one").on("click", function() {
$('.content').fadeOut(400);
if ($('.content').is(':hidden')) {
$('.content').fadeIn(500);
}
});
$('.content').hide();
});
When you used .next() it is targeting the second li, not content div so nothing shows or hides. I also removed the .hide and .show as you already have fade in/out
If you really want to use the .next() then you would have to do
$(document).ready(function(){
$(".topnav").on("click", function(e) {
if( $(e.target).parent().is('li.one') ) {
$(this).next().toggle();
}
});
$('.content').hide();
});
First of all, your event isn't firing. Just set up a click listener for ul.topnav and delegate the event:
$("ul.topnav").on("click", "li.one", function() { ... });
Then, delete the rest of that nonsense and just use .toggle():
$('.content').toggle();
Working DEMO
$(document).ready(function(){
$("ul.topnav").on("click", "li.one", function() {
console.log('clicked!');
$('.content').toggle();
});
$('.content').hide();
});
This is what I have come up with.
HTML
<ul class="treatment-menu">
<li>Always visible menu</li>
<ul class="nav-child">
<li>Hidden menu</li>
</ul>
</ul>
Hover function
$('.treatment-menu li').hover(function () {
$(this).find('.nav-child').show();
},
function () {
$(this).find('.nav-child').hide();
});
FIDDLE http://jsfiddle.net/HBMfB/3/
However I can not get the .navchild to display when .treatment-menu li is hovered.
Any ideas?
Thank you.
You can Just use Css for that
http://jsfiddle.net/PpYQS/
.nav-child {
display:none;
}
.treatment-menu:hover .nav-child
{
display:block;
}
If you are using jquery you can do a .toggle() instead of writing show() and hide()
http://jsfiddle.net/rbw8v/
$('.treatment-menu li').hover(function () {
$(this).find('.nav-child').toggle();
});
or .slideToggle() for slide effect.
$('.treatment-menu li').hover(function () {
$(this).find('.nav-child').slideToggle();
});
I'm trying to make a one page website with a menu (pictures, css roll over...), that will display a different div when each menu button is clicked. Only one div will be shown at time though and if one is already open it should be hidden. This is working well.
The problem I am having is that that the menu button which shows the result will not stay selected i.e. on the same picture as the roll over (hover).
HTML :
<ul class="menu">
<li class="home"><span class="displace"></span></li>
<li class="credits"><span class="displace"></span></li>
<li class="idea"><span class="displace"></span></li>
</ul>
<div id="content1">home text</div>
<div id="content2">credits text1</div>
<div id="content3">idea text</div>
JS / jQuery :
function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['content1','content2','content3'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
$(function stay() {
$('menu').click(function stay() {
$('menu').removeClass('selected');
$(this).addClass('selected');
});
});
Demo: http://jsfiddle.net/anKT3/159/
I've tried creating a function to change the class, but I've not had any luck.
Change your stay() function to be as follows:
$(function stay() {
$('.menu li a').click(function stay() {
$('.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});
Here is JS fiddle
$(function stay() {
$('ul.menu li a').click(function () {
$('ul.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});