I am having trouble developing a jQuery 'object'. I would like div1 (Refer to image below) to be the background div with an image in (Using a background image). I would then like div 2 (Refer to image below) to overlay div 1, which I can do. However, as I have little experience with jQuery it's the next part I'm struggling with. I would like, when you hover on div 2, I use jQuery slideDown() / slideUp() to show and hide div 3 (Refer to image below). It also needs to not close as it slides up (as the cursor will no longer be on div 2). Only when you're no longer hovering over the whole object will it close. I hope this makes sense... I just don't know where to start. If any more info is needed please ask.
Something like this should do it I believe, or at least it gives you a starting ground to play around with, and improve further.
Markup
<div class="wrapper">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS
.wrapper {
float: left;
}
.one {
background-color: grey;
width: 100px;
height: 100px;
}
.two {
background-color: blue;
width: 100px;
height: 20px;
}
.three {
background-color: green;
width: 100px;
height: 100px;
display: none;
}
JavaScript
$(function () {
$(".two").mouseenter(function (){
$(".one, .three").slideToggle();
});
$(".wrapper").mouseleave(function (){
$(".one, .three").slideToggle();
});
});
A live example: http://jsfiddle.net/ZHxe5/1/
Related
I have several underlaying divs with hover effect. Sometimes I need to show modal dialog and all undelaying divs should be "disabled". This is done by placing semi-transparent high z-index div on top of them, but the problem is that hover effect on underlaying div stays until I move my mouse. Is there a way to "unhover" underlaying divs when overlaying semi-transparent div becomes visible?
Simplified exanple
HTML:
<div class="somediv"></div>
<div id="modal"></div>
CSS:
#modal {
z-index: 1000;
background:#000;
position:fixed;
top:0; left:0;
width:100%;
height:100%;
display: none;
opacity: 0.3;
}
.somediv {
position: absolute;
left: 20px;
top: 20px;
width: 100px;
height: 100px;
background-color: red;
}
.somediv:hover {
background-color: blue;
}
JS:
setTimeout(function(){
$("#modal").show();
}, 5000);
Hover over square and wait 5 seconds.
It should work: http://jsfiddle.net/rjLhj/
When you open a modal (in JS), just add a class to your .somediv ('.no-hover', for example). In CSS, change your .somediv:hover to .somediv:not(.no-hover):hover.
I don't know about compatibility... So, you should test :P
JS:
setTimeout(function(){
$("#modal").show();
$('.somediv').addClass('no-hover')
}, 2000);
CSS:
.somediv:not(.no-hover):hover {
background-color: blue;
}
Update:
http://caniuse.com/#feat=css-sel3
It works on IE9+, FF3.5+ and Safari3.1+... But you can use Attribute Selectors for reach the same result.
HTML:
<div class="somediv" data-nohover="0"></div>
<div id="modal"></div>
CSS:
.somediv[data-nohover="0"]:hover {
background-color: blue;
}
JS:
setTimeout(function(){
$("#modal").show();
$('.somediv').attr('data-nohover','1')
}, 2000);
Or better, add one class to your somediv ('hashover', for example), remove it on modal open and define your css like this:
.somediv.hashover:hover {...}
Unfortunately the browser wont pick up mouse events until the mouse is moved...
The best way to deal with this is to create a new class that overrides the hover behaviour and apply this at the same time as you show the modal.
The website i am currently working on has a pop out div with a map of locations on it, my problem is once the pop up div has been closed i then have to refresh the page to open the div again
It is running jquery - here is the code
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#view_map_of_stocklists_link').click(function() {
//$('#popupdiv').show('slow');
$("#popupdiv").css('visibility', 'visible');
$("#mappy").css('opacity', '1');
});
$('.closepopup').click(function() {
$('#popupdiv').hide('slow');
});
});
</script>
The styling
<style>
#popupdiv
{
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 600px;
margin-top: -200px;
width: 960px;
margin-left: -500px;
padding: 20px;
}
#view_map_of_stocklists_link:hover {
cursor:pointer;
}
.closepopup {
margin-top: 60px;
border: 1px solid #ccc;
background-color: #000;
color: white;
cursor: pointer;
}
</style>
and then the HTML itself
<div id="popupdiv" style="visibility:hidden;">
<center>
<iframe style="opacity:0;" id="mappy" src="http://mapsengine.google.com/map/embed?mid=zNedxWZ7lai0.krRxVqZZmyns" width="900" height="500"></iframe>
<div class="closepopup" style="width:200px">Close</div>
</center>
</div>
<h2 class="bold skin-font-color1">Our Beloved Stockists</h2>
<h5 class="skin-font-color1 p-wrapper"><!-- client txt --> <div id="view_map_of_stocklists_link" class="skin-font-color4">
<h4>View map of stockists</h4>
</div>
The website is http://www.tee-ze.co.uk/sosmoothies/
Cheers
You are setting 'visibility' to 'visible' instead of 'display' to 'block'.
When jQuery .hide() is called it ultimately saves the previous display value and sets it to display:none; So you should be doing something like:
$('#view_map_of_stocklists_link').click(function() {
$('#popupdiv').hide('slow');
});
Which I just realized you have commented out in your code. I wish I could leave a comment but I need more rep.
Edit:
Sorry for complaining in may previous answer.
I just tried uncommenting the existing code and removing the visibilty stuff and that works just fine in your site. Try it.
The way you're showing the popup map doesn't match the way you're hiding it.
You show it with:
$("#popupdiv").css('visibility', 'visible');
But you hide it with:
$('#popupdiv').hide('slow');
That fades it out but ultimately sets the CSS style display: none on the #popupdiv element.
When you try to show it again, it still has display: none on it. Setting the visibility doesn't affect the display style.
You need to make the hide and show match up. Either use the visibility style, or the display style, but use the same one for both hiding and showing (and jQuery's .show() method uses display).
For example, you might create the <div> with display: none instead of visibility: hidden, and then you can use jQuery's .show() and .hide() consistently.
so I wanted an animated footer for my webpage using jquery. There's supposed to be a button which should trigger the animation. I found a nice example for all this, and everything is fine and dandy. Except that the button (including the footer) has this code that makes it stick to the bottom of your web browser, rather than to the bottom of the page. I do [i]not[/i] want it to, like, "scroll" along with the page, I realy want it to be underneath all my other divs. I tried putting it in the div container (which has all my other divs in it as well), but that doesn't seem to work.
Now, (after 2.5 hours of googling) I found out that it might/may/could have something to do with "absolute" positioning in the CSS, so I tried switching some things around such as giving the footer's container a relative position or giving it an "overflow: hidden;" along with the rest a left float but nothing seemed to solve my problem. (I could've done something wrong, not that great with CSS after all :-/)
I hope someone is able/willing to help.
P.S. Here's the example I used:
http://return-true.com/2010/04/jquery-pop-up-footer-version-2/
and here's the code:
Javascript:
jQuery(function($) {
var open = false;
$('#footerSlideButton').click(function () {
if(open === false) {
$('#footerSlideContent').animate({ height: '300px' });
$(this).css('backgroundPosition', 'bottom left');
open = true;
} else {
$('#footerSlideContent').animate({ height: '0px' });
$(this).css('backgroundPosition', 'top left');
open = false;
}
});
});
HTML:
<div id="footerPlacement">
<div id="footerSlideContainer">
<div id="footerSlideButton"></div>
<div id="footerSlideContent">
<div id="footerSlideText">
<h3>Hey! I'm a Sliding Footer</h3>
<p>What's a Sliding Footer? Well I'm a cool little element which can be hidden from view, and revealed when the user wants to see me.</p>
<p>What can you use me for? Well look at all this stuff:</p>
<ul>
<li>Sales information</li>
<li>Important updates</li>
<li>Unobtrusive about panel</li>
<li>Or just a good ol' footer</li>
</ul>
<p>There are obviously many other uses, but these are the few useful ones I can think of.</p>
</div>
</div>
</div>
</div>
CSS:
#footerPlacement {
margin-bottom: 0px;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#footerSlideContainer {
position: fixed;
margin-left: 0px;
bottom:0px;
width: 1000px;
}
#footerSlideButton {
background: url('../images/footer/footerbtn.png') top left no-repeat transparent;
position: absolute;
top: -55px;
right: 20px;
width:50px;
height:50px;
border: none;
cursor: pointer;
}
#footerSlideContent {
width: 100%;
height: 10px;
background: #251b15;
color: #CCCCCC;
font-size: 0.8em;
border: none;
font-family: DejaVuSansBook, Sans-Serif;
}
#footerSlideText {
padding: 15px 10px 25px 25px;
}
Thanks in advance!
if you change your #footerPlacement to include position:relative, you can change #footerSlideContainer to be position:absolute and then your footer will sit below any content above it.
However you will need to make the content have a min-height of around 350px for the footer to work properly and if your content isn't long enough, the footer won't be at the bottom of the browser.
I also added overflow:hidden to #footerSlideContent. I have made a fiddle to demonstrate:
http://jsfiddle.net/tc6b8/
I am trying to create a carousel, where clicking on any element will slide it leftwards, simultaneously sliding the right element into viewport. For that, I need to have the divs stacked side by side. I am trying it out as a float based layout (see Fiddle ).
Problem is that here clicking the red colored div slides it leftward alright, but not the green element leftwards. This is probably due to the fact that they are actually lying below another, as visible when the overflow: hidden is removed from #cont's style. How elese to stack them side by side so that sliding one leftward automatically slides the next one leftwards as well? (Creating the to-be-next element on the fly while clicking and animating it into viewport is a no-no, the element should be present in the DOM!)
I'd suggest you use a plugin, as there is more to this than you may realize. There are many plugins out there for this, here's a list to get you started: http://www.tripwiremagazine.com/2012/12/jquery-carousel.html
I modified your Javascript, HTML, and CSS to get you pointed in the right direction:
http://jsfiddle.net/nf5Dh/2/
You need a container contContent, positioned absolutely, and that container gets moved within the container div. You just float the elements in contContent to get them next to each other.
HTML:
<div id='cont'>
<div id="contContent">
<div id='i1'></div>
<div id='i2'></div>
<div id='i3'></div>
</div>
</div>
CSS:
#cont {
width: 50px;
padding-top: 10px;
background: blue;
height: 50px;
overflow: hidden;
position: relative;
}
#contContent {
height: 50px;
width: 150px;
position: absolute;
top: 0;
left: 0;
}
#contContent > div {
float: left;
display: inline-block;
height: 50px;
width: 50px;
}
#i1 { background: red; }
#i2 { background: green; }
#i3 { background: yellow; }
And the JS:
$("#contContent > div").click(function(){
$("#contContent").animate({left: "-=50px"},1000);
});
You'd probably be better off using an ul instead of all divs, this is at least more semantically correct, though not technically necessary.
<div id="carousel">
<ul id="carouselContent">
<li id="slide1"></li>
<li id="slide2"></li>
<li id="slide3"></li>
</ul>
</div>
This:
#cont {
white-space:nowrap;
overflow: hidden;
}
.pane { // or whatever the slide divs are called. get rid of the float.
float: none;
display: inline-block;
*zoom:1;
*display:inline;
}
You can use that carousel where you can generate javascript for the carousel http://caroufredsel.dev7studios.com/configuration-robot.php
I've used http://sorgalla.com/jcarousel/ for things like this in the past, that's based on postion: relative and left/right offsets. Probably easier than messing with floats.
You can try using a list item instead, and display them inline.
I have a div which currently has a static background image.
I need to create a slideshow of background images for this div.
I am able to achieve this by just setting a timeout and then changing the background image in the CSS but this is not very elegant.
I would ideally like to fade the background images out and in, but the div contains other page elements so I can not alter the opacity in any way.
Does anyone know of a good way to do this using jquery??
Here's some code which fades out/in but fades out the contents of the div too.
$("#slideshow").fadeOut(5000, function(){
$("#slideshow").css('background-image','url(myImage.jpg)');
$("#slideshow").fadeIn(5000);
});
HTML:
<div class="slideshow"></div>
CSS:
.slideshow
{
position: relative;
width: 350px;
height: 150px;
}
.slideshow img
{
position: absolute;
width: 350px;
height: 150px;
z-index:-1;
}
jQuery
var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98');
var nextimage=0;
doSlideshow();
function doSlideshow()
{
if($('.slideshowimage').length!=0)
{
$('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
}
else
{
slideshowFadeIn();
}
}
function slideshowFadeIn()
{
$('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);}));
if(nextimage>=images.length)
nextimage=0;
}
jsfiddle Demo
How about adding a thumbs pagination list, to update the background image on click, and then, a second or two, and it starts fading in and out with the next bg img automatically?
HTML:
<div class="slideshow">
<h1>Text</h1>
<input type="button" value="Hello" />
</div>
<ul>
<li><img src="http://placehold.it/50x50"></li>
<li><img src="http://placehold.it/50x50/123456"></li>
<li><img src="http://placehold.it/50x50/dbca98"></li>
</ul>
CSS:
.slideshow
{
position: relative;
width: 350px;
height: 150px;
}
.slideshow img
{
position: absolute;
width: 350px;
height: 150px;
z-index:-1;
}
ul {position: absolute; top: 125px; left: 75px;}
li {
float: left;
border: 1px solid #000;
margin: 15px;
}
Javascript:
var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98');
var nextimage=0;
doSlideshow();
function doSlideshow()
{
if($('.slideshowimage').length!=0)
{
$('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
}
else
{
slideshowFadeIn();
}
}
function slideshowFadeIn()
{
$('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);}));
if(nextimage>=images.length)
nextimage=0;
}
See it all together at http://jsfiddle.net/tatygrassini/R4ZHX/75/.
Instead of just changing the background image, you could first call
fadeOut()
then change source, and then call
fadeIn()
something like...
$('#image').fadeOut(500, function() {
$(this).attr('src', 'new-image.png')
.load(function() {
$(this).fadeIn();
});
});
To use a variety of images, there are a number of solutions, but you could simply iterate through a list of them.
You can create an positioned absolutely and with a slider plugin change the images contained in the div. Otherwize you have to sprite the background. I achieved this with the Jquery Tools tabs plugin.
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow();
Here is a solution that not only addresses your problem, but will also solve some other problems as well. Create another DIV on your DOM as an overlay, and execute your fade functions on this DIV only. It will appear as though the content is fading in / out. This approach is also more performant, as you are only fading a single DIV instead of multiple elements. Here is an example:
$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() {
// Step 1: change your content underneath the hidden div
// Step 2: hide the overlay
$('#containeroverlay').fadeOut('normal');
})
Most importantly, this approach will work in IE6-8 without screwing up the font aliasing of elements you may have on the div.