Snooks slideshow - javascript

I've seen the slideshow, I got all the code from there but the images never disappear, they are added in front of the old ones and it overcharges my website. Anyone knows how to solve it? Here's the code:
<style>
.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }
</style>
<div class="fadein">
<img src="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
In this fiddle, it works, but in my website, it doesn't. Any help?
MORE INFORMATION
This image is from the console, so you can see the amount of images that are created..
No errors in console.
EDIT
I went to get another slideshow from the same site, but so I could get multiple, and got what I wanted except one thing, the fadeIn is bugged, it starts to fade but then it cancels and changes to the next image.
<style>
.multipleslides { position:relative; height:332px; width:500px; float:left; }
.multipleslides > * { position:absolute; left:0; top:0; display:block; }
</style>
<div class="multipleslides">
<img src="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
<script>
$('.multipleslides').each(function(){
// scope everything for each slideshow
var $this = this;
$('> :gt(0)', $this).hide();
setInterval(function(){$('> :first-child',$this).fadeOut().next().fadeIn().end().appendTo($this);}, 4000);
})
});
</script>

I've made some updates to your code that should fix the slideshow. There were some syntax errors and I also made the selectors a bit easier to read, imo.
$(document).ready(function() {
$('.multipleslides').each(function() {
// scope everything for each slideshow
$(this).children('img').not(":eq(0)").hide();
setInterval(function() {
$(this).children('img').first().fadeOut().next().fadeIn().end().appendTo($(this));
}.bind($(this)), 4000);
});
});
.multipleslides {
position: relative;
height: 332px;
width: 500px;
float: left;
}
.multipleslides>* {
position: absolute;
left: 0;
top: 0;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multipleslides">
<img src="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>

Related

jQuery toggle() with dblclick() changing display to none

I have created a div that when I double click it, it will expand the entire contents of the div to full screen. I now want to be able to toggle this when double clicking so it goes back to original size.
The code was working to increase the div size, but once adding the toggle() function, it now changes the display to none when I double click the first time. I assume I am just using toggle incorrectly, but am unable to figure out how to make this work.
HTML
<div class="popout-box">
<button id="btnShow">Wallboard</button>
<div class='menu' style='display: none'>
<div id="framewrap">
<button id="btnHide">Close</button><br/>
<iframe id="frame" src="https://url.com">
</iframe>
</div>
</div>
</div>
</div>
jQUery
$(document).ready(function(){
$("#framewrap").dblclick(function(){
$("#framewrap").toggle().css({"width":"100%","height":"100%","position":"fixed","left":"0px","right":"0px","top":"5px","bottom":"0px"});
});
});
CSS
#framewrap {
background-color:#1886c5;
overflow:hidden;
box-shadow: 0px 2px 10px #333;
}
#frame {
width:100%;
height:100%;
background-color:#1886c5;
}
.popout-box {
width: 400px;
height: 300px;
}
.menu {
position: absolute;
right: 15px;
}
I believe this is what you're after:
$(document).ready(function(){
$("#framewrap").dblclick(function(){
$(this).toggleClass('newClass');
});
});
CSS:
.newClass
{
width:100%,
height:100%,
...
...
}
jQuery
$(document).ready(function() {
$("#framewrap").on('dblclick', function() {
$("#framewrap").toggleClass('fixed');
});
});
CSS
.fixed {
width:100%;
height:100%;
position:fixed;
left:0;
right:0;
top:5px;
bottom:0
}

jQuery image replacement with class

i'm really new to all this coding things etc. (1 month :P) and actually i try some things with jQuery.
I used the search function but actually it's quite hard for me to understand everything :P
My goal is:
When i hover over an image another image which sits on top of it slides up and another slides down.
They're all images - i don't want to publish the Website and only want to use it on my Computer for testing ^^
Also the picture on the top should be hidden at first. (I know how to do it but i actually don't know if it will be shown when using slideDown)
HTML:
<div class="newschange">
<div class="News wow fadeInDown animated"><img src="images/News.png" /></div>
<div class="newstext wow fadeInUp animated"><img src="images/newstext.png" /></div>
<div class="newshover"><img src="images/alt/newstext.png" /></div>
</div>
My jQuery Script: (it's actually in the header of the HTML)
<script>
$(function() {
$('.News').mouseover(function (){
$(.'newstext').slideUp(300);
$(.'newshover').delay(400),slideDown(300);
});
})
</script>
CSS (i don't know if this is necesarry for this :P)
.newshover {
position: absolute;
left: 802px;
top: 455px;
width: 359px;
height: 35px;
}
.newstext {
position: absolute;
left: 781px;
top: 456px;
width: 446px;
height: 32px;
}
.News {
position: absolute;
left: 377px;
top: 276px;
width: 854px;
height: 318px;
}
The problem is just that nothing happens when i hover over it :)
Here is a Screenshot:
http://i.stack.imgur.com/dzyFH.png
The 1. image is the whole thing with at the top "News" the image and the rounded rectangle.
NEWS SECTION! is the one i want to show AFTER i hover over the first image.
The red Text behind it is the one i want to hide when i hover over the first image. :)
//solved Code
<script>
$( document ).ready(function() {
$(".News").on('mouseenter',function () {
$(".newshover").delay(600).slideToggle(500);
$(".newstext").slideToggle(500);
});
$(".News").on('mouseleave', function(){
$(".newshover").slideToggle(500);
$(".newstext").delay(600).slideToggle(500);
})
});
</script>
<script>
$(function(){
$(".newshover").hide(0);
})
</script>
If I understood well your question this piece of code should work: https://jsfiddle.net/5naaq121/
HTML:
<div class="newschange">
<div class="News"><img src="http://maalaeasurfresort.com/wp-content/uploads/2014/09/beach_cy.jpg" /></div>
<div class="newstext"><img src="http://www.honduras.com/wp-content/uploads/2012/05/white-sandy-beach2-300x200.jpg" /></div>
<div class="newshover"><img src="http://www.lakecountyparks.com/_images/whihala_beach/wb_beach.jpg" /></div>
</div>
JS:
$(function(){
$('.newschange').mouseenter(function (){
$('.newshover').slideUp(300);
$('.newstext').delay(400).slideUp(300);
})
});
CSS:
.newschange {
display:block;
width:300px;
height:200px;
position:relative;
overflow:hidden;
}
.newshover {
position: absolute;
left:0;
top:0;
width:300px;
height:200px;
}
.newstext {
position: absolute;
left:0;
bottom:0;
width:300px;
height:200px;
}
.News {
position: absolute;
left:0;
top:0;
width:300px;
height:200px;
}

Show ADS on the bottom of the page when hover

I want to show the Google Ads on the bottom of my website, but I want it to appear only when the mouse hovers (or clicks) an arrow icon. I don't know if you understand what I mean. I want the AD to slide from nowhere when the mouse hovers an arrow on the bottom of the page.
Which JS and CSS codes do I need for that function?
My codes now:
HTML
<div id="footer"> <center><script src="http://fanscity.eu/ads/728x90.js"></script></center> </div>
CSS
#footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.69);
padding: 20px;
}
Thank you!
I think you need this
UPDATE :
HTML
<div id="footer">footer</div>
<img id="img" src="arrow.png"/>
CSS
#footer{
display:none;
height:40px;
background-color:#666;
position:absolute;
width:100%;
bottom:0;
left:0
}
#img{
position:absolute;
bottom:0;
right:0
}
JS
<script src="js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(e) {
var ishover = false;
$(document).on("mouseover",'#footer',function(){
ishover = true;
}).on("mouseleave",'#footer',function(){
$(this).stop().fadeOut();
ishover = false;
}).on("mouseover",'#img',function(){
$('#footer').stop().fadeIn();
}).on("mouseleave",'#img',function(){
if(!ishover)
$('#footer').stop().fadeIn();
});
});
</script>

Applying Hover effect to responsive height image

I have three column layout. The left and right columns are full background images that I need hover effects for. I couldn't achieve this in CSS so I'm attempting jQuery, but I'm having an issue when it comes to position: absolute on both elements.
It requires I put a height on the image, but I need it to stay responsive. I tried position relative but there is now a noticeable jump when hovering. Here's my fiddle:
http://jsfiddle.net/faumX/4/
Here's an example of my code,
html:
<div class="one-third">
<div class="bg-image">
<img src="http://placehold.it/429x900&text=left+up" id="leftUp" />
<img src="http://placehold.it/429x900&text=left+over" id="leftOver" style="display:none;" />
</div>
</div>
css:
.one-third {
display:inline;
float:left;
width:33.332%;
max-width: 420px;
position: relative;
min-height:10px;
height:auto;
max-height:900px;
overflow:hidden;
}
.bg-image {
position: relative;
min-height:10px;
height:auto;
max-height:900px;
overflow:hidden;
}
.bg-image img {
display: block;
width: 100%;
max-width: 420px;
min-height:10px;
height:auto;
max-height:900px;
overflow:hidden;
}
#leftUp {
position:relative;
top:0;
left:0;
}
#leftOver {
position:relative;
top:0;
left:0;
}
js:
$('#leftUp').mouseenter(mouseEnterLeft);
$('#leftOver').mouseleave(mouseLeaveLeft);
var mouseEnterLeft = function(){
$('#leftUp').fadeOut();
$('#leftOver').fadeIn();
}
var mouseLeaveLeft = function(){
$('#leftUp').fadeIn();
$('#leftOver').fadeOut();
}
I'm realtively new to this, if there is a CSS solution to this that is better, I'm open to any suggestions.
Thanks for the help.
I changed a few things on your fiddle the problem is when you fade things out they dissapear and opacity is better for this.
I placed the overlay image above the default one and set it to absolute, this way it will be over it but it's hidden on start.
The focus is on the parent div not the image, since it dissapears when you hover it.
Play around with it and see if you can understand what I did, let me know if this is what you were looking for.
$(document).ready(function(){
$('#rightUp').mouseenter(mouseEnterRight);
$('#rightOver').mouseleave(mouseLeaveRight);
$('#left').mouseenter(mouseEnterLeft);
$('#left').mouseleave(mouseLeaveLeft);
});
var mouseEnterRight = function(){
$('#rightUp').fadeOut();
$('#rightOver').fadeIn();
}
var mouseLeaveRight = function(){
$('#rightUp').fadeIn();
$('#rightOver').fadeOut();
}
var mouseEnterLeft = function(){
$('#leftUp').animate({opacity:0});
$('#leftOver').fadeIn();
}
var mouseLeaveLeft = function(){
$('#leftUp').animate({opacity:1});
$('#leftOver').fadeOut();
}
http://jsfiddle.net/faumX/14/

Javascript/HTML/CSS popup

I'm working on a popup using a hidden DIV and loading it with window.onload. As well as this I'm also loading an empty DIV with a overlay CSS style (to fill the background behind the popup with a semi-transparent black). And finally to top it off there is a close button in the top right corner of the popup.
I've scanned through SA and a couple of forums (as this is the first time I do something like this with JS) & have got most of the code from there. Yet when adding it all together, something's stopping it from working, I've been staring at this for a day now and maybe I'm just missing something really obvious?
The site is here: http://0034.eu/townapp/
And here's the code:
The JS:
<script type="text/javascript">
function show_popup()
{
document.getElementById('popup').style.display = 'block';
}
window.onload = show_popup;
</script>
<script language="text/javascript">
window.onload = function() {
$('#overlay-back').fadeIn(500);
}
</script>
<script language="javascript">
$(".close-image").click(function() {
$(this).parent().hide();
});
</script>
The HTML:
<body>
<div id="overlay-back"></div>
<div id="popup"><img class="close-image" src="images/closebtn.png" /><span><img src="images/load_sign.png" /></span></div>
The CSS:
#popup{
position:absolute;
display:hidden;
top:200px;
left:50%;
width:400px;
height:566;
margin-left:-250px;
background-color:white;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none
}
.close-image{
display: block;
float:right;
position:relative;
top:-10px;
right: -10px;
height: 20px;
}
Thanks a lot in advance!
You must include jquery for this to work
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
// you can use just jquery for this
$(document).ready(function(){
$('#overlay-back').fadeIn(500,function(){
$('#popup').show();
});
$(".close-image").on('click', function() {
$('#popup').hide();
$('#overlay-back').fadeOut(500);
});
});
</script>
</head>
If you want to try another popup, the following link will help you,
http://blog.theonlytutorials.com/a-very-simple-jquery-popup-ready-to-use-code/

Categories