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>
Related
I want to put this slider in the slideDown() function so that when the text is hovered the slider should come down.
I have given the code snippet that i was trying to work on, it includes the javascript, css, body.
<script>
var $ = function (id) {
return document.getElementById(id);
}
var swapImage = function (){
if($("image1").title=="image1")
{
$("image1").src="/static/img/new_desserts/two.jpg";
$("image1").title="image2";
}
else if($("image1").title=="image2")
{
$("image1").src="/static/img/new_desserts/teen.jpg";
$("image1").title="image3";
}
else if($("image1").title=="image3")
{
$("image1").src="/static/img/new_desserts/some.jpg";
$("image1").title="image4";
}
else if($("image1").title=="image4")
{
$("image1").src="/static/img/new_desserts/set.jpg";
$("image1").title="image5";
}
else if($("image1").title=="image5")
{
$("image1").src="/static/img/new_desserts/cake.jpg";
$("image1").title="image1";
}
setTimeout(swapImage, 5000);
}
window.onload = function () {
/* $("calculate=").onclick = function(){calculate();} */
swapImage();
}
$(document).ready(function(){
$("#prj_1").mouseover(function(){
$("#image").stop().slideDown("slow");
});
});
</script>
<style>
#prj_1{
position:absolute;
top:1%;
left:50%;
width:1230px;
height:200px;
font-family:Andalus;
font-size:20px;
color:gold;
}
#image{
position:absolute;
top:3%;
left:25%;
width:700px;
height:300px;
display:none;
background-color:red;
}
</style>
<body>
<div id="prj_1">AAA Laundry</div>
<div id="image">
<img id="image1" src="/static/img/new_desserts/glass.jpg" title="image1" />
</div>
</div>
</body>
if i remove the code for slideDown its working but otherwise it not.
please help.
I modified your code a little and used JQuery instead of Javascript,
also you used window.onload and $(document).ready which have almost the same purpose.
plz check this demo and see if that's what you wanted:-
http://jsfiddle.net/d3rtcyxn/
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/
When I select box 2, I'd like the border to become black.
Another click it should go back to yellow.
The first click goes right but the second click stays black.
I can fix this by adding another class, but I don't want to.
How else can I do this?
This is my code:
<div class="aa">
<div class="bb">1</div>
<div class="cc"></div>
</div>
<div class="aa">
<div class="bb">2</div>
<div class="cc"></div>
</div>
$('.bb:last').addClass('yellow');
$('.bb').click(function () {
$(this).next('.cc').fadeToggle();
if (!$('.cc:last').is(':hidden')) {
$('.bb:last').addClass('black');
} else {
$('.bb:last').removeClass('black');
$('.bb:last').addClass('yellow');
}
});
.bb {
background:red;
width:90px;
height:30px
}
.cc {
background:blue;
width:90px;
height:30px;
display:none;
}
.yellow {
border:3px solid yellow;
}
.black {
border:3px solid black;
}
Sample fiddle
Much simpler:
LIVE DEMO
$('.bb:last').addClass('yellow');
$('.bb').click(function( e ) {
$(this).next('.cc').fadeToggle();
if(e.target == $('.bb:last')[0])
$(this).toggleClass('yellow black');
});
http://api.jquery.com/hasClass/
http://api.jquery.com/toggleClass/
Check this fiddle
You basically need to remove the class if it has it.
$('.bb:last').addClass('yellow');
$('.bb').click(function () {
$(this).next('.cc').fadeToggle();
if (!$('.cc:last').is(':hidden')) {
if ($('.bb:last').hasClass('black')) {
$('.bb:last').removeClass('black');
} else {
$('.bb:last').addClass('black');
}
} else {
$('.bb:last').addClass('yellow');
}
});
Very simple solution. Just use .toggleClass('yellow black'). toggleClass() will take care of everything for you. Any class in the space-separated list that is set will be cleared, and vice versa. To affect only the last .bb you could put it in it's own handler:
$('.bb:last').addClass('yellow').click(function() {
$(this).toggleClass('yellow black');
});
$('.bb').click(function () {
$(this).next('.cc').fadeToggle();
});
DEMO
I will try to be as simple as possible, i am trying to achieve a simple visibility toggle on a div when someone mouseover an a tag, kind of like this the four buttons on this link:
http://www.bt.com/help/home/
now the problem is i want it to appear or want it to be visible on mouseover of a tag, but when once i hide the div it never comes back, i have tried multiple things, some are
$("#function").on("mouseover",this, function () {
$(this).addClass("show");
})
$("#function").on("mouseout",this, function () {
$(this).removeClass("show");
$(this).addClass("hide");
})
Another is:
$("#function").hover(
function () {
$(this).addClass("hide");
},
function () {
$(this).removeClass("hide");
}
);
and also
$("#butt").on("mouseover", this, function(){
$(this).find("div#function").show();
//$("#function").toggleClass("visible");
});
$("#butt").on("mouseout", this, function(){
$(this).find("div#function").hide();
//$("#function").toggleClass("visible");
});
You should use mouseenter instead of mouseover. It is because mouseover event will be triggered when you move within the element. Go here and scroll to the bottom to check the different between mouseover and mouseenter. http://api.jquery.com/mouseenter mouseenter event will be fired only when you entering the element but not move within element.
This is the solution you want. It is almost similar to the site you provided.
JavaScript
<script>
$(document).ready(function()
{
$("#function").mouseenter(function(event)
{
event.stopPropagation()
$(this).addClass("show");
}).mouseleave(function(event)
{
event.stopPropagation()
$(this).removeClass("show");
})
});
</script>
Style
<style>
.functionBlock { width:200px; height:200px; border:1px solid #CCC; padding:15px;}
.functionBlock ul { visibility: hidden}
.functionBlock.show ul { visibility: visible;}
</style>
HTML
<div id="function" class="functionBlock">
<h5>Demo </h5>
<ul>
<li>APPLE</li>
<li>SAMSUNG</li>
</ul>
</div>
Example on jsFiddle http://jsfiddle.net/TAZmt/1/
I got it, slight changes in selectors
$("#butt")
.mouseover(function () {
$("#function").show();
})
.mouseout(function () {
$("#function").hide();
});
$("#link").hover(function(){
$("#DIV").slideToggle();
});
and the html is
LINK
<div id="DIV" style="display:none">Your content in it</div>
This should do it. Check the jsfiddle. The basic idea here is to add a class (.shown) to your root-div on the mouseenter event, this class then makes the hidden <ul> in the div show up due to.
.shown ul{
display: block !important;
}
http://jsfiddle.net/28bb8/2/
EDIT:
Made some minor css changes, to better reflect the behaviour you're looking for, but you have to change the css to accommodate your own code basically. I hope this helps.
$("document").ready(function(){
$(".wrap").hover(
function () {
$(this).addClass("shown");
},
function () {
$(this).removeClass("shown");
}
);
});
You don't need Javascript here. This is possible with CSS alone
HTML:
<div class="panel">
<div class="teaser"><img src="http://lorempixel.com/300/400"/></div>
<div class="info">
<ul>
<li>Go here ...</li>
<li>Or there ...</li>
</ul>
</div>
</div>
CSS:
.panel {
width: 300px;
height: 400px;
}
.info {
display: none;
}
.panel:hover .teaser {
display: none;
}
.panel:hover .info {
display: block;
}
And JSFiddle for playing.
i hope this is the solution you're seaching for.
Just place the following code below your <body> tag:
<script type="text/javascript">
function toggle(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
And here is a link and the div which is toggled:
<a href="javascript: return false();" onmouseover="toggle('toggleme');">
Mouseover this link to toggle the visibility of #toggleme
</a>
<div id="toggleme">This div is "toggled"</div>
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>