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.
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')
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.
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 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 want to have a div that is on the center of the page (I use 300px now) and when some seconds pass, I want to make visible a second div and make them both to be at the center with 50px difference, this is what I've done now, my first problem is why the opacity change of the second div doesn't apply?
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
<meta charset="utf-8" />
<style type="text/css">
#main {
position: absolute;
top: 200px;
left: 300px;
}
div.c {
width: 200px;
height: 200px;
float:left;
position:relative;
left:200px;
-webkit-transition:left 2s;
}
#left {
background-color: palevioletred;
}
#right {
-webkit-transition:opacity 2s;
background-color: ThreeDDarkShadow;
opacity:0;
}
</style>
<script type="text/javascript">
window.onload = function () {
setTimeout("myfunc()", 3000);
}
function myfunc() {
var stupido = document.getElementsByClassName("c");
for (var i in stupido) {
stupido[i].style.left = 0;
}
document.getElementById("right").style.opacity = 1;
}
</script>
</head>
<body>
<div id="main">
<div id="left" class="c">x</div>
<div id="right" class="c">x</div>
</div>
</body>
</html>
As stupido is an HTMLCollection instead of an array, its length property got looped through. stupido[i].style === undefined, generates error, script crashes.
Change for(var i in stupido) to for(i=0; i<stupido.length; i++)
Also, don't use string in setTimeout when possible
Working fiddle