I have four lines of text and I want to display a specific image on mouseenter on the right side of each line.
The problem I'm having right now is that all four images are beeing displayed at the same time.
What am I doing wrong?
http://jsfiddle.net/m97qebjr/10
jQuery:
$(".thumb").hide();
$(".text" ).mouseenter(function() {
$(".thumb").show();
}).mouseleave(function() {
$(".thumb").hide();
});
You don't need jQuery at all: http://jsfiddle.net/m97qebjr/16/
.thumb {
display:none; /* added line */
float:right;
overflow:hidden;
width:100px;
height:100px;
}
.wrap:hover .thumb{ /* added rule */
display:block;
}
$(".thumb") matches all elements with class thumb. Try this instead:
$(".thumb").hide();
$(".text").mouseenter(function () {
$(this).siblings(".thumb").show();
}).mouseleave(function () {
$(this).siblings(".thumb").hide();
});
Updated fiddle: http://jsfiddle.net/m97qebjr/13/
Related
This is my first question here, feel free to tell me if I am not specific enough or whatever I do wrong!
I want a jquery method which change all divs with the class "passive" to height 500 px and passive-->active, so there would be another method which changes the height back to 100px. The first half is working, I got the class changed, but the second animation won't happen. All I have in html is one div with the class of passive.
$("document").ready(function(){
$(function() {
$(".passive").click(function(){
$(this).animate({height:'500px'});
$(this).addClass("active");
$(this).removeClass("passive");
});
$(".active").click(function(){
$(this).animate({height:'100px'});
$(this).addClass("passive");
$(this).removeClass("active");
});
});
});`
jQuery.animate() is costly and choppy. You will get a smoother transition by just toggling the class and using CSS to transition
.passive {
height:100px;
transition:height 1s;
}
.active {
height:300px;
}
Array
.from(document.querySelectorAll('.passive'))
.forEach(
e => e.addEventListener(
'click',
evnt => e.classList.toggle('active')
)
)
.container { display:flex; }
.container>div {
flex:1 auto;
}
.passive {
background-color:red;
margin:5px;
height:100px;
width:20px;
transition:height 1s;
}
.active {
height:300px;
}
<div class="container">
<div class="passive" tabindex=1></div>
<div class="passive" tabindex=2></div>
<div class="passive" tabindex=3></div>
</div>
You are trying to interact with a class added after the DOM loaded. By default, click functions will only work with elements that exist on load. You can either use event delegation or add a base class to the element. If you add a base class, you can simplify the click function.
You can do an if/else to check if the element has a certain class using hasClass. Also, you can chain together the $(this) methods inside the if/else blocks.
$("document").ready(function() {
$(function() {
$("baseclassname").click(function() {
if ($(this).hasClass('passive')) {
$(this).animate({ height: '500px' });
$(this).addClass("active");
$(this).removeClass("passive");
// $(this).animate({ height: '500px' }).addClass('active').removeClass('passive');
} else {
$(this).animate({ height: '100px' });
$(this).addClass("passive");
$(this).removeClass("active");
// $(this).animate({ height: '100px' }).addClass('passive').removeClass('active');
}
});
});
});
I have the following code which is supposed to show the content of a paragraph but it doesn't work:
jQuery
<script>
$(document).ready(function () {
$('.portfolio-excerpt').hover(function () {
$('.portfolio-text').addClass('portfolio-hover')
},
function () {
$('.portfolio-text').removeClass('portfolio-hover')
})
})
</script>
HTML
<div class="portfolio-img"> <img src="images/thumbnail.jpg"/>
<p class="portfolio-excerpt">They say the only thing better.</p>
<p class="portfolio-text">Lorem ipsum</p>
</div>
CSS
.portfolio-hover {
display:block;
}
p.portfolio-excerpt {
display:block;
height:30px;
width:auto;
}
p.portfolio-text {
display:none;
}
which is not working and I don't know why. Can you help?
All you need to do is changing your CSS declaration.
p.portfolio-text{
display:none;
}
p.portfolio-excerpt{
display:block;
height:30px;
width:auto;
}
p.portfolio-hover{
display:block;
}
Here is working page --> JSFIDDLE
You forgot about adding p before .portfolio-hover and just put it on the end of the styles. Thats all.
A couple of related things - it's your css.
Firstly the order:
.portfolio-hover {
display:block;
}
/* this comes later in the css, it will override the hover */
p.portfolio-text {
display:none;
}
So fix it as such:
p.portfolio-text {
display:none;
}
.portfolio-hover {
display:block;
}
However p.portfolio-text is more specific than .portfolio-hover so will still be overridden - final fix is thus:
p.portfolio-text {
display:none;
}
p.portfolio-hover {
display:block;
}
Include the p tag to up the specificity as .class is less specific than tag.class.
p.portfolio-excerpt {
display:block;
height:30px;
width:auto;
}
p.portfolio-text {
display:none;
}
p.portfolio-hover {
display:block;
}
The other way is to remove the p from the others, if it's not needed.
In addition, you could update your CSS so it's a bit more specific (using multiple classes):
.portfolio-text.portfolio-hover {
display:block;
}
You could also "force" it by using important.
.portfolio-hover {
display:block !important;
}
If neither of those will work, reconsider your ordering (hey, some people hate important or .multi.classnames - I get that).
Finally, you can toggle the existing class using toggleClass.
$(this).next().toggleClass('portfolio-text');
Here's an example: http://jsfiddle.net/neknhp8p/
Try this:
$(document).ready(function () {
$('.portfolio-excerpt').hover(function () {
$(this).next().addClass('portfolio-hover')
},
function () {
$(this).next().removeClass('portfolio-hover')
})
})
or just use .show() and .hide():
$(document).ready(function () {
$('.portfolio-excerpt').hover(function () {
$(this).next().show();
},
function () {
$(this).next().hide();
})
})
Fiddle Demo
The problem is how CSS's styles are applied, in that the one class's definition isn't overriding the other. Change your styles like so:
.portfolio-hover {
display:block !important;
}
Alternatively, you can just be more specific with the selector's definition:
.portfolio-text.portfolio-hover {
display:block;
}
/** OR **/
p.portfolio-hover {
display:block;
}
Explanation:
Having an element where class="classA classB" where the css is:
.classA {
css-property: css-value1;
}
.classB {
css-property: css-value2;
}
Will result in classA's css-property taking precedence over classB's because of the ordering in the class property on the element. It's fixed by implementing the style in a way where one overrides the other. See here for more information on CSS precedence.
Please wrap the two paragraphs together with another div to unsure the disappear will be smooth.
toggle function changes display from none to block and from block to none to all p tags inside sss div.
HTML:
<div class="portfolio-img"> <img src="images/thumbnail.jpg"/>
<div class="sss">
<p class="portfolio-excerpt">They say the only thing better.</p>
<p class="portfolio-text">Lorem ipsum</p>
</div>
</div>
JS:
<script>
$(document).ready(function () {
$('.sss').hover(function () {
$('.sss').children('p').toggle();
});
});
</script>
CSS:
<style>
.portfolio-hover, .portfolio-text {
display:block;
}
p.portfolio-excerpt {
display:block;
height:30px;
width:auto;
}
p.portfolio-text {
display:none;
}
</style>
Using jquery's .css() i am changing the left attributes value to move a div left or right. Im looking for a way to animate this change as it occurs. Nothing ive tried is working, ive tried jQueryUI's .show(slide) function, but this moves the whole div, rather than just the 120px movement i need.
This is my current function which is working without an animation:
$('#plrt').live("click",function(){
var lm=$('.plwid').css("left");
lm = (parseInt(lm) + 120);
$('.plwid').css("left", lm);
});
this is the slide function, it does not work properly as the whole div goes from display:hide to display:show, rather than just moving the pixel change
try animate()
$('#plrt').on("click",function(){
$('.plwid').animate({ left: '+=120' }, 400 );
});
I have whipped up a quick example of what I think you are trying to achieve.
You should check out jQuery Animate.
//note live is deprecated
$('#plrt').on("click", function() {
//perform custom animation to add 120px to current left CSS position
$('.plwid').animate({
left: '+=120'
});
});
#plrt{
position:relative;
background:red;
width:100px;
height:100px;
cursor:pointer;
}
.plwid{
position:absolute;
background:blue;
width:100px;
height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="plrt"></div>
<div class="plwid"></div>
try this http://api.jquery.com/animate/
$('#plrt').on('click', function() {
$('.plwid').animate({ left: '+=120', 5000 });
});
I want to show one particular div with the use of fadeTo.
If I hover over div1, then spark1 should be visible and disappear on mouseout..
But it won't do anything when hovering and I don't really know why.
HTML
<div class="spark1"></div>
<div class="div1">text</div>
CSS
.div1 {
width:300px;
height:300px;
}
.spark1 {
position:absolute;
width:27px;
height:27px;
margin-top:70px;
margin-left:395px;
background:url(../img/spark.png) no-repeat;
}
JS
$('.div1').hover(function(){
$('.spark1').fadeTo(200, 0);
});
EDIT (update)
HTML
<div class="spark1"></div>
<div class="div1"></div>
CSS
.div1 {
width:300px;
height:300px;
background-color:#000000;
}
.spark1 {
position:absolute;
width:27px;
height:27px;
top:70px;
left:395px;
background-color:#ff0000;
filter:alpha(opacity=0); opacity:0.0;
}
JS
$('.project1').hover(function(){
$('.spark1').fadeTo(200, 1);
},
function(){
$('.spark1').fadeTo(200, 0);
});
It still won't trigger, I don't get it..
you should stop the animation if the event trigger before completion of previous. try this
$('.div1').hover(function(){
$('.spark').stop(true,true).fadeTo(200, 1);
},function(){
$('.spark').stop(true,true).fadeTo(200, 0);
});
fiddle example : http://jsfiddle.net/mK4m6/11/
Your code works if you use the correct css classes names
DEMO
You define a css class .spark { } but in you code you use the class name .spark1.
Choose one or the other.
You made a mistake in your hover function. It has 2 call back methods:
$(document).ready( function() {
$(".div1").hover(
function(event) {
//hover in
$(".spark1").fadeTo(200,1);
},
function(event) {
$(".spark1").fadeTo(200,0);
});
});
Below is a working script:
http://jsfiddle.net/U8rzJ/7/
Building on Didier's good catch of the class names, there's a problem with your hover() script. hover() can take one or two functions as arguments - if you supply just one, it's executed on both mouseover and mouseout. You'll want this, I think:
$('.div1').hover(function(){
//fade in to 100%
$('.spark').fadeTo(200, 100);
},
function(){
$('.spark').fadeTo(200, 0);
});
This fades the .spark in on mousein and fades it back out on mouseout. If you want to animate on mouseout only, I'd switch from .hover() to .mouseout().
HTML
<div class="spark1"></div>
<div class="div1">text</div>
CSS
.div1 {
width:300px;
height:300px;
}
.spark1 {
position:absolute;
width:27px;
height:27px;
top:70px;
left:395px;
background-color:#ff0000;
filter:alpha(opacity=0); opacity:.0;
}
jQuery
$('.div1').hover(function(){
$('.spark1').fadeTo(200, 1);
},
function(){
$('.spark1').fadeTo(200, 0);
});
Then it all works out.
1. Use correct class names
2. Set the initial opacity of spark1 to 0
3. On mouseenter fade the opacity to 1
4. On mouseleave fade the opacity to 0
I'm new to jQuery, I was hoping you guys could help me. I'm trying to make a hover dropdown menu, but it's extremely buggy. Can you help me clean up my Javascript? Look at my code please.
http://jsdo.it/mretchin/4Ewk
It doesn't work on jsdo.it for whatever reason, but it works in Komodo Edit.
Try out the code yourself if you really want to, the problem is mainly the Javascript. Can you help me make it so that when the user hovers over img.menu_class, ul.file_menu drops down, and then, if I wanted, I could hover over #something in ul and it would drop out horizantally, not vertically.
Thanks for helping! I appreciate it!
Should I just give up and make it work in CSS?
You can do something like this:
$(document).ready(function() {
$(".hoverli").hover(
function() {
$('ul.file_menu').stop(true, true).slideDown('medium');
},
function() {
$('ul.file_menu').stop(true, true).slideUp('medium');
}
});
});
And here an example with sub-menus:
$(document).ready(function() {
$(".hoverli").hover(
function() {
$('ul.file_menu').slideDown('medium');
},
function() {
$('ul.file_menu').slideUp('medium');
}
);
$(".file_menu li").hover(
function() {
$(this).children("ul").slideDown('medium');
},
function() {
$(this).children("ul").slideUp('medium');
}
);
});
For anyone who finds this in the future Aram's answer can be shortened with .slideToggle() to handle both up and down.
Here's the modified fiddle
http://jsfiddle.net/4jxph/2009/
If you have a sub-menu set to display: none; it will trigger it also, so what you'll want to do is set it to block, then add something like this
var subMenu = $('li.hoverli > ul > li');
subMenu.hover(function () {
$(this).find("ul").slideToggle(200);
});
And place it right below your first slideToggle. Why don't I just show you?
$(document).ready(function () {
$(".hoverli").hover(function () {
$(this).find('ul').slideToggle('medium');
});
var subMenu = $('li.hoverli > ul > li');
subMenu.hover(function () {
$(this).find("ul").slideToggle(200);
});
});
Not sure if you care but you want to make sure that you run the .stop() method that way the animations dont build themselves up and run over and over. Here's an example
http://jsfiddle.net/4jxph/1335/
$(document).ready(function () {
$(".hoverli").hover(
function () {
$('ul.file_menu').stop(true, true).slideDown('medium');
},
function () {
$('ul.file_menu').stop(true,true).slideUp('medium');
}
);
});
Use the finish function in jQuery to prevent the bug where you rapidly hover your mouse over the menu and out of the menu. Finish is better than the stop function previously suggested.
$(document).ready(
function () {
$(".hoverli").hover(
function () {
$('ul.file_menu').finish().slideDown('medium');
},
function () {
$('ul.file_menu').finish().slideUp('medium');
}
);
});
Aram Mkrtchyan's answer was almost there for me. Problem with his was if you add anything below the menu then it gets all screwy. Here is an example of what I mean, I added a div below his menu:
http://jsfiddle.net/4jxph/3418/
I am submitting this updated answer using div instead of lists and list items (which I find much easier to work with, and way more flexible) and jQuery version 1.9.1
here is link to jFiddle:
http://jsfiddle.net/4jxph/3423/
Here is the code:
--------------- HTML:
<div id="divMenuWrapper1" class="divMenuWrapper1">
<div id="hoverli">
<div class="lbtn">
Actions
</div>
<div id="actions_menu" class="file_menu">
<div>File</div>
<div>Edit</div>
<div>View</div>
<hr />
<div>Insert</div>
<div>Modify</div>
<div>Control</div>
<div>Debug</div>
<div>Window</div>
<div>Help</div>
</div>
</div>
</div>
<div>
testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu
</div>
--------------- Css:
.lbtn
{
display:inline-block;
cursor:pointer;
height:20px;
background-color:silver;
background-repeat:repeat-x;
border:1px solid black; /* dark navy blue */
text-decoration:none;
font-size:11pt;
text-align:center;
line-height:20px;
padding:0px 10px 0px 10px;
}
.divMenuWrapper1
{
height: 25px;
width: 75px;
}
.file_menu
{
display:none;
width:250px;
border: 1px solid #1c1c1c;
background-color: white;
position:relative;
z-index:100000;
}
.file_menu div
{
background-color: white;
font-size:10pt;
}
.file_menu div a
{
color:gray;
text-decoration:none;
padding:3px;
padding-left:15px;
display:block;
}
.file_menu div a:hover
{
padding:3px;
padding-left:15px;
text-decoration:underline;
color: black;
}
--------------- jQuery (to be placed in document.ready or pageLoad()):
$("#hoverli").hover(
function () {
$('#actions_menu').finish().slideDown('fast');
},
function () {
$('#actions_menu').finish().slideUp('fast');
}
);
I know this is probably a bit late but just found this thread saw that your question above about things below the menu 'getting a bit screwy' was unanswered.
If you give your div with the class 'file menu' a position of absolute then it should cease to affect any elements ahead of it as you will have taken it out of the normal flow.
To get a select box to open on hover to the exact height required by its contents, figure out how many elements there are:
JavaScript
function DropList(idval) {
//
// fully opens a dropdown window for a select box on hover
//
var numOptgroups = document.getElementById(idval).getElementsByTagName('optgroup').length;
var numOptions = document.getElementById(idval).getElementsByTagName('option').length;
document.getElementById(idval).size = numOptgroups + numOptions;
}
HTML
<select class="selectpicker" id="heightMenu" onmouseover="DropList('heightMenu')" onmouseout="this.size=1;" size="1">
<option value="0">Any height</option>
etc.
</select>