I'm trying that a div takes the height of another one when mouse enter but jQuery(this) doesn't work.
I've the following code:
jQuery(".laynav.primary ul li").mouseenter(function(){
jQuery(".navbar").css('height', '350px');
});
jQuery(".laynav.primary ul li").mouseleave(function(){
jQuery(".navbar").css('height', '60px');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I want to change jQuery(".navbar").css('height', '350px'); for $(this).ul height's but i don't know how.
If i put .laynav.primary ul li ul directly in the .css it's been applied everywhere and i only want it in the ones that's being hovered.
Thanks
Related
I need to remove this css portion from a navbar-collapse when I click a button:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
I tried something like this:
$("#toggleButton").click(function()
{
$(".navbar-collapse").remove("ul.nav","li.dropdown","ul.dropdown-menu");
});
But it doesn't work. I want to have a responsive navbar menu and when it collapse remove the dropdowns from that view.
Have you tried removeClass?
$(".navbar-collapse").removeClass("nav dropdown dropdown-menu");
If you want to remove the elements from the DOM
$(".nav, .dropdown, .dropdown-menu").remove();
You simply need to just set css attribute display to none on class .dropdown-menu applied to ul element.
ul.nav li.dropdown:hover doesn't have any relevancy here since they are used as an element locator and does not have display:none applied to them.
$("#toggleButton").click(function()
{
$('ul.dropdown-menu').css('display','none');
});
To remove the entire css attributes,
$("#toggleButton").click(function()
{
$('ul.dropdown-menu').removeAttr('style');
});
There's more than one way to accomplish this but you can do it by changing the css when you click the button
Here's how you would accomplish that:
$("#toggleButton").click(function()
{
$("ul.nav li.dropdown:hover > ul.dropdown-menu").css({"display": "none"});
});
Try this :
$("#toggleButton").click(function(){
$(".navbar-collapse").remove("ul.nav li.dropdown > ul.dropdown-menu");
});
Okay so I have a navigation sidebar and I want it so that when a link is clicked, the .clicked class gets added to the link clicked and the .clicked class gets removed from all other tags, if other tags of a .clicked class. Here is my javascript
$('#sidebar ul a').click(function(){
$('#sidebar ul .clicked').removeClass('.clicked');
$(this).addClass('clicked');
});
here is my css
.clicked {
background: url(../images/liHover.png) no-repeat;
background-position: -5px 0px;
color: white;
}
and here is my html
<body>
<div id="sidebar">
<div id="sidebarHeader">
<h1>top</h1>
</div>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
</body>
But it doesn't seem to work. When I click a link / < li > it does add the class however it does not remove the .clicked class from the other elements. Any idea why?
your html is invalid for starters, try putting the li first in the list
<li>First</li>
// repeat for other items
your jquery is also invalid, your missing the hashtag '#sidebar' to reference an id element
finally your jquery function removeClass doesn't need a period before the class removeClass('clicked');
First of all,
Is your code wrapped in
$(document).ready(function() {
});
or
$(function() {
});
If not, your code may be executing before the DOM is ready, in which case it will not bind properly.
Next,
$('sidebar ul a')
should be
$('#sidebar ul a')
and
$('sidebar ul .clicked').removeClass('.clicked');
should be
$('sidebar ul .clicked').removeClass('clicked');
On the CSS side of things, the background won't display on the link unless you set display: block and give it a width. Finally, the image URL inside the parentheses should be in quotes, and as the previous poster stated, the background position should be part of "background" since it's a shortcut.
may be because the a tag in inline
if you try out to put it like a block
#sidebarHeader{
display:block;
}
and you should remove the clicked from a element
like this
$('sidebar ul a').removeClass('.clicked');
I have read this post: scrolling to li element - jquery,
and used the jquery code, namely this.
var ul = $('ul.myul');
var li = $('li.item', ul)
ul.scrollTop(li.position().top);
The UL is on a div that is floated, and the UL has a set height, and overflow set to auto. The LI has padding and margin set.
The scroll code above is not working. The scroll is being set much further than the actual item. The offset is calculated incorrectly.
You ul has multiple list items thus the variable "li" has multiple li elements. Try this instead
var ul = $('ul.myul');
var li = $('li.item:eq(0)', ul);
ul.scrollTop(li.position().top);
Good Luck !!
Below is a preview of what I have:
On the right is when I hover. What I want is for the delete icon to only show for that hover item.
<script>
$(document).ready(function(){
$(".removeService").hide();
// Deleting an Individual Service
$("#dashboard ul li span").hover( function() {
$(".removeService").show();
});
});
</script>
This is probably a very simple fix, but if anyone could point me in the right direction I would really appreciate it.
Thanks!
If you want the delete span to show only when hovered over and hidden when the mouse exits, you can use an 'overload' for the .hover() function by providing a second function that hides the delete span.
See this fiddle here for an example.
A very simplified example could look like this:
$(document).ready(function(){
$('.remoteService').hide()
.click(function(){alert('delete!');});
$('#dashboard ul li span').hover(
function(){ //this is fired when the mouse hovers over
$(this).find('.remoteService').show();
},
function(){ //this is fired when the mouse hovers out
$(this).find('.remoteService').hide();
});
});
I hope this helps!
<script>
$(document).ready(function(){
$(".removeService").hide();
// Deleting an Individual Service
$("#dashboard ul li span").hover( function() {
$(this).find(".removeService").show();
});
});
</script>
This assumes that .removeService is nested within #dashboard ul li span. If this is not the case, please provide your html.
In the code this is the actual span which is hovered on. find will search within that span for all elements with the removeService class.
Edit:
Used image tag instead of background-image(see DEMO link at the bottom) to make it click-able.
DEMO here.
Why not use CSS :hover to get the same effect.
DEMO here
You have to do this with jQuery, you can achieve the same behavior with pure CSS:
#dashboard ul li .removeService {
display: none;
}
#dashboard ul li:hover .removeService {
display: inline;
}
Example on jsfiddle
im new to jQuery and have a slight issue with the following navigation:
http://jsfiddle.net/6Dh8j/7/
Essentially, I love the navigation in the Creative Production section of this lovely site: http://www.gainsburyandwhiting.com > see Portfolio > Fashion Show etc...
I need to hide the current ul and show a fresh one in its place. At the moment, they show until I un-click the parent.
Any thoughts?
Thanks,
Red
You need to hide all the ul elements that are descendant of the siblings of the current ul e.g.
$(this).siblings().find('ul').fadeOut('fast');
This finds each sibling of the clicked ul (all of which are ul in the example) and finds all the ul elements that are withing their bounds and fades them out.
In the context of your code:
$("nav ul li").find("ul").hide().end()
.click(function(e) {
if (this == e.target) {
$(this).siblings().find('ul').fadeOut('fast');
$(this).children('ul').fadeToggle('fast');
}
});