Alright so I am trying to get an on hover function to work where it the div that I am on will pause on hover and start up again when my mouse has left the hover area. Here is what I have so far
HTML
<div id="slideshow">
<div>
<iframe width="400"; " height="290"; src="www.google.com"></iframe>
</div>
<div>
<iframe width="400"; " height="290"; src="www.google.com"></iframe>
</div>
<div>
<iframe width="400"; " height="290"; src="www.google.com"></iframe>
</div>
</div>
CSS
<style>
#slideshow {
position: relative;
width: 340px;
height: 340px;
padding: 1px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: relative;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
</style>
jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#slideshow > div:gt(0)").hide();
$("#slideshow").hover(function () {
this.stop();
}, function () {
this.start();
});
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(0)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 10500);
</script>
any help on the issue would be greatly appreciated. I have tried a few different things that haven't worked such as .hover(), .stop(), and clearInterval(). I think my execution is all wrong. Thanks in advance.
You begin learn javascript. you must read document and understand function to use api like jquery and other javascript library. please understand function and use it this.start() and this.stop() where you define it?
You can achieve your goal using clearInterval on mouseenter event.
Try this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>slideshow</title>
<style>
#slideshow {
position: relative;
width: 400px;
height: 290px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow iframe {
position: absolute;
top: 0px;
left: 0px;
height: 100%; /* fit to parent */
width: 100%;
display: none;
}
#slideshow iframe:first-child{display:block;} /*Initially display
the first iframe */
</style>
</head>
<body>
<div id="slideshow">
<iframe src="http://www.example.com"></iframe>
<!-- You cannot use www.google.com. The reason for this is,
that Google is sending an "X-Frame-Options: SAMEORIGIN" response header.
This option prevents the browser from displaying iFrames that are not hosted
on the same domain as the parent page. -->
<iframe src="http://www.example.com"></iframe>
<iframe src="http://www.example.com></iframe>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
myinterval = doAnimation(); // Start the animation
$('#slideshow').on({
mouseenter: function(e){
clearInterval(myinterval); //stop animation
},
mouseleave: function(e){ //restart animation
myinterval = doAnimation();
}
});
// Animate the slideshow.
function doAnimation(){
return setInterval(function(){
$('#slideshow :first-child')
.fadeOut()
.next('iframe')
.fadeIn()
.end()
.appendTo('#slideshow');
}, 2000);
}
</script>
</body>
</html>
Related
I'm not certain of the reason, but this particular function does not seem to be working in both the Safari/iOS and Chrome browsers:
$(window).on('load',function(){
$('#preloader').fadeOut(800).hide();
$('#preload').fadeIn(800).css('display', 'initial').show();
});
I've currently inserted the script before the </head> tag. Could anyone explain why this is occurring?
UPDATE:
$(window).on('load', function() {
$('#preloader').fadeOut(800).hide();
$('#preload').fadeIn(800).css('display', 'initial').show();
});
.preloader-wrap {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
text-align: center;
line-height: 0;
}
#preloader {
margin: 40px 0;
padding: 0;
border: 0;
width: 45px;
height: 45px;
}
#preload {
display: none;
}
img {
width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://static.tumblr.com/4m2ikeh/q2Poxnx2k/jquery-3.2.1.min.js"></script>
<div class="preloader-wrap">
<img src="https://cdn.ndtv.com/vp/static/images/preloader.gif" id="preloader" />
</div>
<div id="preload">
<img src="https://78.media.tumblr.com/708bb6dcdaf359fd2ea83d11a0b5b4b8/tumblr_oyslstg5xk1unhdoco10_r1_1280.jpg">
</div>
Why do you use hide() when you use fadeOut() and show() when you use fadeIn(). However have a look at here:
$(document).ready(function() {
$("#preloader").fadeOut(800, function() {
$("#preload").fadeIn(800)
});
});
#preload {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader">
Preloader Content
</div>
<div id="preload">
Preload Content
</div>
It is working for me in Firefox, Chrome, Safari
Maybe those multiple concurring ways to show and hide the elements are in cause. I don't have any IOS device to be sure.
If you wish a delay and the fades one after the other, try this way:
$(window).on('load',function(){
setTimeout(function(){
$('#preloader').fadeOut(800, function(){
$('#preload').fadeIn(800); // FadeIn after fadeOut complete.
});
},800); // delay from the load event and the fadeOut.
});
I'm new to jQuery, and have written a very simple script using the .animate() function. Here's the complete HTML source code:
<!doctype html>
<html>
<head>
<title>Testing jQuery</title>
<style type="text/css">
div {
width: 400px;
height: 300px;
position: relative;
left: 10px;
margin: 10px 20px;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
#blue {
background-color: blue;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div").click(function() {
$(this).animate({opacity: 0.6, left: "+=40;"}, 2000);
});
});
</script>
</head>
<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
It appears that writing the .animate() function this way only animates the opacity of the clicked div and does not affect any change in its position. Interestingly, if I reverse the order of the arguments in the .animate() function, as so:
$("div").click(function() {
$(this).animate({left: "+=40",opacity: 0.6}, 2000);
});
There occurs both a change in position and a change in opacity. I followed the syntax from the .animate() jQuery API documentation, and there's a similar syntax used there:
$( "#clickme" ).click(function() {
$( "#book" ).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function() {
// Animation complete.
});
});
I'm pretty sure the error is in my code itself, just can't put my finger on it yet.
I copied and pasted the code for scroll to top in my webpage from the following website:
http://jsfiddle.net/neeklamy/RpPEe/
Even though the scroll to top button does not showing up,
my webpage source code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Rough</title>
<style type ="text/css">
.scrollup {
width: 40px;
height: 40px;
position: fixed;
bottom: 50px;
right: 100px;
display: none;
text-indent: -9999px;
background: url('icon_top.png') no-repeat;
background-color: #000;
}
</style>
<script>
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
});
});
</script>
</head>
<body>
<h1>Top of the page</h1>
<article style="height: 1000px">
<p style="margin-bottom: 600px">Scroll down the page…</p>
<p>Then click the box.</p>
Scroll
</article>
</body>
</html>
You are missing jQuery, add the script tag like so:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
or add it locally by downloading the library and adding it to your project files.
Working JSFiddle: http://jsfiddle.net/nayish/uLt7guvg/2/
You're missing the 'icon_top.png' file. You must have that image in the same folder as the .html file.
I really cannot figure it out how can I accomplish this. I need to have a footer partially visible all the time at the bottom. When you hover it shows up entire height of 400px, then get back to the original position.
The problem that I have is with the scroll function. I do not know how to set it properly. The result I am looking for is when you scroll all the way down (without hovering) the footer needs to take the full height, if you scroll up the footer goes back to the original position.
Here is the jsFiddle (I hope it works, this is the first time when I use this).
Below is the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(window).scroll(function () {
if ($(window).scrollTop() > $('#move').position() -500) {
$('#footer').css('bottom', 0);
}
else {
$('#footer').css('bottom', -300);
}
});
$(document).ready(function () {
$('#footer').bind('mouseenter', function () {
$(this).stop().animate({ bottom: 0 }, 400); // on hover 0 400
}).bind('mouseleave', function () {
$(this).stop().animate({ bottom: -300 }, 400); // on out -300 400
});
});
</script>
<style>
html, body{
}
#footer {
position: fixed;
z-index: 999;
bottom: -300px;
width: 100%;
height: 400px;
background-color: #999;
opacity:0.5;
}
#content {
padding-bottom: 100px;
}
#move {
height:auto;
top: 5000px;
position: relative;
background-color:red;
}
</style>
</head>
<body>
<div id="content">
<h1 id="move"> end content </h1>
</div>
<div id="footer">
this is the footer
</div>
</body>
</html>
Updated fiddle: http://jsfiddle.net/moonspace/ZCger/1/
Add this JS into your '$(window).scroll(function () {}'
if( $(window).scrollTop() + $(window).height() == $(document).height() ) {
$('#footer').css('bottom', 0);
}
I can't get these images to fade in at all, and I don't know what I'm doing wrong. I have put alert("hi") instead of $(this).fadeIn() and the popup is shown. I've tried putting the code at the end, I've tried linking to a a local jQuery script, I've tried just doing the $("#eTR1").fadeIN() inside the $(document).ready() but that also doesn't work:
<!doctype HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("#eTR1").bind("load", function() { $(this).fadeIn(); });
$("#eTR2").bind("load", function() { $(this).fadeIn(); });
$("#eTR3").bind("load", function() { $(this).fadeIn(); });
$("#eBL1").bind("load", function() { $(this).fadeIn(); });
$("#eBL2").bind("load", function() { $(this).fadeIn(); });
$("#eBL3").bind("load", function() { $(this).fadeIn(); });
});
</script>
</head>
<body>
<aside id="eTRRibbons">
<img id="eTR1" src="res/tr1.png">
<img id="eTR2" src="res/tr2.png">
<img id="eTR3" src="res/tr3.png">
</aside>
<aside id="eBLRibbons">
<img id="eBL1" src="res/bl1.png">
<img id="eBL2" src="res/bl2.png">
<img id="eBL3" src="res/bl3.png">
</aside>
</body>
</html>
and
html
{
height: 100%;
}
body
{
min-height: 100%;
margin: 0px;
}
#eTR1,#eTR2,#eTR3
{
position: fixed;
top: 0px;
right: 0px;
opacity: 0.0;
filter: alpha(opacity = 0);
}
#eBL1,#eBL2,#eBL3
{
position: fixed;
bottom: 0px;
left: 0px;
opacity: 0.0;
filter: alpha(opacity = 0);
}
What am I doing wrong?
don't set the opacity in the css. give it a display: none;
http://jsfiddle.net/rlemon/zSzva/
I have also added a 1000ms duration to your fadeIn so you can see the effect in the example.
The .fadeIn() works with display: none; you should set that in your CSS and not opacity: 0 which isn't needed.