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);
}
Related
This is the html code as you can see
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="clouds">
<img border="0" alt="animated clouds" src="clouds.png" >
<script>
$(document).ready(function() {
function loop() {
$('#clouds').css({right:0});
$('#clouds').animate ({
right: '+=1400',
}, 5000, 'linear', function() {
loop();
});
}
loop();
});
</script>
</div>
<div id="clouds2">
<img border="0" alt="animated clouds" src="clouds2.png" >
<script>
$(document).ready(function() {
function loop() {
$('#clouds').css({right:0});
$('#clouds').animate ({
right: '+=1400',
}, 5000, 'linear', function() {
loop();
});
}
loop();
});
</script>
</div>
</body>
</html>
#clouds {
position:absolute;
z-index:500;
right:0px;
top:10px;
}
#clouds2{
position:absolute;
z-index:500;
right:0px;
bottom:10px;
}
and this is css as you can see
I dont understand whu my second cloud wont move thats the thing thats bugging me
It would really mean a lot if someone helped me figure this out i am really lost...Also you could just tell me where i messed up you dont have to change the code if you feel like it,thank you
!!!
The first error was you gave $('#clouds') instead of $('#clouds2'), also the function works great, then eventhough the div adjusts fine, the image remained still, so I added a float:left to the img tag, which made the image move as expected!
$(document).ready(function() {
function loop() {
$('#clouds2').css('right', 0);
$('#clouds2').animate({
right: '+=1400',
}, 5000, 'linear', function() {
loop();
});
}
loop();
});
#clouds {
position: absolute;
z-index: 500;
right: 0px;
top: 10px;
}
#clouds2 {
position: absolute;
z-index: 500;
left: 0px;
bottom: 10px;
}
#clouds2>img {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clouds2">
<img border="0" alt="animated clouds" src="http://lorempixel.com/400/200/">
</div>
you have to specify the movement / animation of your clouds2 in the second part of the script tag. You are still using
$('#clouds')
instead of
$('#clouds2')
How can I fade out the div (or animate its opacity to 0) over 1000 milliseconds after 4000 milliseconds in the last 1000 milliseconds of the div's animation (while the div is still moving)?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function animateDiv(){
$("div").animate({left:"500px"},5000);
}
</script>
<style>
div {
background:red;
width:50px;
height:50px;
position:relative;
left:0;
}
</style>
</head>
<body onload="animateDiv();">
<div></div>
</body>
</html>
Note : queue:false is most important here.
Using queue:false you can run the animations simultaneously. Use delay() function for fadeOut() to wait. Which will give a smooth effect of the div slowly hiding when the left animation is coming to an end. Using progress we can identify the time left in the initial animation.
function animateDiv() {
$("div").animate({
left: "500px"
}, {
duration:5000,
queue:false
}).delay(3000).fadeOut(2000);
}
div {
background: red;
width: 50px;
height: 50px;
position: relative;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body onload="animateDiv();">
<div></div>
</body>
As an alternative( preferred solution ) like Rayon Dabre suggested, we can use the underlying functionalities of animate() function, we can use this to perfect it with out using delay and executing the second animation with the best time constraint as possible.
var flag = true;
function animateDiv() {
$("div").animate({
left: "200px"
}, {
queue: false,
duration: 5000,
step: function(now) { },
progress: function(animation, progress, remainingMs) {
if (remainingMs < 2000 && flag) {
flag = false;
$("div").fadeOut(1000);
}
}
});
}
div {
background: red;
width: 50px;
height: 50px;
position: relative;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body onload="animateDiv();">
<div></div>
</body>
Try something like this:
$("div").animate({left:"500px"},{duration:1000,start:function(){
$(this).animate({opacity:"0"},400);
}});
or:
$("div").animate({left:"500px"},{duration:10000, queue:false,start:function(){
$(this).delay(6000).animate({opacity:"0"},4000);
}});
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.
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>
I know that this is a frequent question but I can't find an answer that matches my requirements.
In short, I want to horizontal slide a box from the right-side (insivisible) part of the screen to the left and then from the left back to the right.
The html/css/js below demonstrates what I want:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style type="text/css">
#box-1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80em;
background-color: #f00;
}
#box-2 {
position: absolute;
top: 0;
right: -100%;
width: 100%;
height: 4em;
background-color: #0f0;
}
#viewport {
overflow: hidden;
position: relative;
height: 100em;
}
#container {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="viewport">
<div id="container">
<div style="position: relative">
<div id="box-1">
</div>
<div id="box-2">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#box-1").click(function () {
$(this).parent().parent().animate({left: "-100%"});
});
$("#box-2").click(function () {
$(this).parent().parent().animate({left: "0"});
});
</script>
</body>
</html>
Now, everything might seem fine except for two important things:
I do not want to specify a height for the outer viewport. I would like this viewport to adopt automatically the height of the highest item in the container
this code does not do what I want if you scroll down at the bottom of the page when the red box is visible and click on it: the green box comes within the viewport but it is scrolled at the bottom. I would like the green box to come in view directly. As a bonus, it would be nice if once the green box is in view, if I click on it, the red box came back in view at its previous scroll position.
Of course, this example has lots of other limitations (the default animation function provided by jquery sucks, etc...) but I believe I can fix them later.
Given the limitations of the solution I have posted here, I suspect that I did not chose the right approach but I have no idea on where I should start.
You need to scroll to the top of the div when you click on the box.
Here's the code:
$(function() {
var vheight = Math.max($("#box-1").height(), $("#box-2").height());
$("#viewport").height(vheight)
});
$("#box-1").click(function () {
$(this).parent().parent().animate({left: "-100%"});
$('html,body').animate({
scrollTop: $("#box-1").offset().top
});
});
$("#box-2").click(function () {
$(this).parent().parent().animate({left: "0"});
$('html,body').animate({
scrollTop: $("#box-2").offset().top
});
});
I also updated the JS Fiddle: http://jsfiddle.net/Av7P3/1/