This question already has answers here:
Fade background image in and out with jQuery?
(5 answers)
Closed 9 years ago.
I am wondering, because I am not good with JavaScript or jQuery, how to I fade a background of this:
html {
background-image:url(image.png);
}
to a different background image without fading the whole document, but only the background every 2 seconds?
I have no idea how to do this. I have been researching and trying to do this myself, but no success for the past three days.
Any help is greatly appreciated.
If you need the code, here it is:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Buddies Server Home</title>
<link href="css/styles.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="body">
<div class="nav">
<div class="header">
<img src="images/Logo.png" />
</div>
<div class="right-side">
<img src="images/home.png" />
</div>
<div class="nav-buttons">
<img src="images/buttons/servers.png" />
<img src="images/buttons/about.png" />
<img src="images/buttons/forums.png" />
</div>
<div class="notif_container">
<div class="notif"><p id="notif">NOTIFICATION: Buddies Network is under maintenance. Thank you for your patience.</p></div>
</div>
</div>
</div>
<div class="content">
<div class="post">
<table id="post">
<tr>
<td id="title"><h2>Blog Entry 1</h2></td>
</tr>
<tr>
<td><h5 id="author">DirectX3DNerd, 7/23/13</b></td>
</tr>
<tr>
<td id="body"><p>Post Body</p></td>
</tr>
</table>
<table id="post">
<tr>
<td id="title"><h2>Blog Entry 2</h2></td>
</tr>
<tr>
<td><h5 id="author">DirectX3DNerd, 7/1337/13</b></td>
</tr>
<tr>
<td id="body"><p>Post Body - Jacob was Here</p></td>
</tr>
</table>
</div>
<div class="side_bar">
<table id="side_bar">
<tr>
<td><h2>Welcome!</h2></td>
</tr>
<tr>
<td><p>Welcome to Buddies Netowrk! Home of the Minecraft, Ace of Spades, and Team Fortress 2 server! If you want to play on one of the servers, click here</p></td>
</tr>
</table>
</div>
</div>
<div class="footer">
<b>© Buddies Network, 2012-2014.</b>
</div>
</body>
<script>
var image1 = 'images/bg.png';
var image2 = 'images/bg2.png';
function fade() {
$(html).css('background-image', image1);
$(html).css('background-image', image1);
}
</script>
</html>
styles.css
/* Document Properties */
html {
background: url('../images/bg.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Server List Properties */
.server_list {
width:500px;
height:400px;
margin: auto;
}
.server_list li {
width:60%;
margin:auto;
}
/* Font Properties */
b{
font-family:"Times New Roman", Times, serif;
}
h1{
font-family:"Times New Roman", Times, serif;
}
p{
font-family:"Times New Roman", Times, serif;
}
/* Page Template */
/* Navigation Bar*/
.header {
position:relative;
left:-1px;
}
.right-side {
position:absolute;
left:850px;
top:1px;
}
.notif {
background-color:#00FF15;
position:relative;
top:4px;
}
#notif {
color:#000000;
font-family:"Lucida Console", Monaco, monospace;
/*font-size:79%;*/
width:800px;
height:35px;
margin:auto;
position:relative;
top:10px;
overflow:auto;
word-wrap:break-word;
}
.nav {
background-color:#FFFFFF;
min-height:79px;
min-width:100%;
position:fixed;
top:0px;
left:0px;
right:0px;
}
/* Footer */
.footer {
background-color:#eee;
min-width:100%;
height:20px;
position:fixed;
left:0px;
bottom:0px;
}
/* Blog Post styles */
.post {
background-image:url('../images/trans_bg.png');
color:white;
position:absolute;
z-index:-1;
top:200px;
left:350px;
width:550px;
height:750px;
}
#post {
position:relative;
left:0px;
padding:0;
margin:0;
}
#title {
position:relative;
top:-10px;
left:0px;
}
#author {
position:relative;
top:-50px;
left:0px;
}
#body {
position:relative;
top:-80px;
left:0px;
}
/* Misc */
.side_bar {
background-image:url('../images/trans_bg.png');
color:white;
position:fixed;
top:190px;
left:5px;
width:250px;
word-wrap:break-word;
overflow:hidden;
}
/* link Properties */
a:link { color:white; }
a:visited { color:white; }
a:hover { color:white; }
a:active { color:white; }
add this
jQuery(document).ready(function() {
$("html").css({
'background-image': ''
});
$("html").animate({ background:'url(image.png)'},350);
});
That's only for the first image fade effect. If you want this effect for different images you might want to try this plug-in I'm sure you will get cool output from it.
Related
I have made an animated profile card using CSS and JS, when hovered on it flips and stretches the name and role title up and around and shows the full backside card information. It works perfectly in Firefox and Chrome, but not in Safari.
It does flip around and shows all contact information when animating but at the end of the animation, the full contact information disappears and only reverts back to the original 'name and role title' on the frontside but upside-down.
The full code and live page can be found here: https://www.leap.co.uk/leadership/index-flip2.html
After reading a few articles, I have tried adding the '-webkit-backface-visibility:hidden;' to all 'backface-visibility:hidden;' css but this hasn't worked at all.
I also added a z-index to the 'back' section which fixes it and shows all information at the end of the animation but when it reverts back (after hover is taken off) it still shows instead of just the 'name and role title'.
<!-- HTML -->
<!-- language: lang-html -->
<body>
<div class="contact">
<div class="initials">RM</div>
<div class="flip back">
<div class="info">
<div class="name">Randy Marquardt</div>
<div class="title">Front End Developer</div>
<hr/>
<div class="phone">Phone<br/>
<span>(203)555-5555</span>
</div>
<hr/>
<div class="email">Email<br/>
<span>rmarquardt.1#gmail.com</span>
</div>
<hr/>
</div>
<div class="icon-set">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/874640/skype1.svg" class="skype"/>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/874640/delve1.svg" class="delve" />
</div>
</div>
<div class="flip front">
<div class="name">Randy Marquardt</div>
<div class="title">Front End Developer</div>
</div>
</div>
</body>
/* CSS */
<!-- language: lang-css -->
html {
height:100%;
}
body {
height:100%;
font-family:"Segoe UI";
background: -moz-linear-gradient(top, rgba(246,230,180,1) 0%, rgba(237,144,23,1) 100%);
background: -webkit-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%);
background: linear-gradient(to bottom, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%);
}
#run {
position:absolute;
top:20px;
right:20px;
}
.contact {
position:absolute;
height:250px;
width:200px;
background:#37674b;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
text-align:center;
}
.contact .initials {
margin-top:33px;
color:#fff;
font-size:80px;
font-family:"Segoe UI Light";
margin-left:10px;
letter-spacing:10px;
}
.contact .flip {
width:198px;
border:1px inset #37674b;
}
.contact .front {
backface-visibility:hidden;
position:absolute;
background:#f0f0f0;
height:60px;
bottom:0;
text-align:center;
}
.contact .front .name {
margin-top:5px;
font-size:16px;
line-height:25px;
font-weight:600;
}
.contact .front .title {
font-size:12px;
font-style:italic;
}
.contact .back {
backface-visibility:hidden;
overflow:hidden;
background:#f0f0f0;
position:absolute;
bottom:0;
height:60px;
}
.contact .back .info {
padding:5px 10px;
}
.contact .back .info .name {
font-size:18px;
line-height:25px;
font-weight:600;
}
.contact .back .info .title {
font-size:12px;
font-style:italic;
/* margin-bottom:20px; */
}
.contact .back .info .phone, .contact .flip .info .email, .contact .flip .info .skype {
margin-top:20px;
font-size:14px;
font-weight:600;
}
.contact .back .info div span {
font-size:12px;
font-weight:normal;
}
.contact .icon-set {
height:45px;
position:absolute;
margin:auto;
bottom:0;
left:0;
right:0;
text-align:center;
}
.contact .icon-set img {
width:30px;
margin:0px 15px;
}
/* JS */
<!-- language: lang-js -->
TweenMax.set('.contact', {perspective:700});
TweenMax.set('.flip', {transformStyle:"preserve-3d"});
TweenMax.set('.back', {rotationY:-180, rotation:180});
$('.contact').hover(function(){
var flip = $(this).find('.flip');
var back = $(this).find('.back');
var front = $(this).find('.front');
TweenMax.to(flip, .7, {rotationX:180});
TweenMax.to([back, front], .7, {height:'100%'});
},
function(){
var flip = $(this).find('.flip');
var back = $(this).find('.back');
var front = $(this).find('.front');
TweenMax.to(flip, .7, {rotationX:0});
TweenMax.to([back, front], .7, {height:60});
});
I expect the full 'back' information to show on animation completion but when the hover event is taken off, for the 'front' information only to show. This works on all other browsers except safari.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Okay so i made this jquery slider from a video series on youtube and it doesn't seem to be working right... The image fades in at first but then the next image doesn't come in. How can i fix this.. Im using older versions of jquery because of deprecated functions
here is the html.
<!DOCTYPE html>
<html>
<head>
<title>
Home
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript">
</script>
<script src="jquery-ui-1.8.18.js" type="text/javascript">
</script>
<script src="script.js" type="text/javascript">
</script>
</head>
<body class="body" onload="Slider()">
<div class="container">
<div class="bg">
<div class="mainHeader">
<nav>
<ul>
<li class="last">
Contact
</li>
<li>
Products
</li>
<li>
About
</li>
<li>
Home
</li>
</ul>
</nav>
</div>
<div class="topArea">
<div class="topAInfo">
<h2>
Here is just a simple title
</h2>
<p>
This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text.
</p>
</div>
</div>
<div class="middleArea">
<div class="slider">
<img id="1" src="slide1.jpg" border="0" alt="slide1" width="800px" height="350px">
<img id="2" src="slide2.jpg" border="0" alt="slide2" width="800px" height="350px">
<img id="3" src="slide3.jpg" border="0" alt="slide3" width="800px" height="350px">
</div>
<div class="middleAInfo">
<h3>
Welcome to
</h3>
<p>
A dummy website!!
</p>
</div>
<div class="latestNews">
<hr>
<h2>
Latest News
</h2>
<div class="post">
<p class="date">
March 28, 2015
</p>
<p>
New advanced update with double speed and a whole bunch of cool new st.. more>>
</p>
</div>
<div class="post">
<p class="date">
March 28, 2015
</p>
<p>
New advanced update with double speed and a whole bunch of cool new st.. more>>
</p>
</div>
<div class="newsLetter">
<div class="newsLInfo">
<h3>
Newsletter sign-up
</h3>
<hr>
<p>
If you would like to sign up for our free NewsLetter please enter your email below
</p>Unsubscribe
</div><input type="text" name="textBox" class="textBox" style="width:200px; height:20px;">
<div class="button1">
Submit
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
css:
*{margin:0;padding:0;}
#font-face {
font-family: SketchFont;
src: url(Fonts/Sketch_Block.ttf);
}
body{
background:#ebebeb;
width:80%;
height:1300px;
}
.container{
width:100%;
}
.mainHeader nav{
width:95%;
height:40px;
position:relative;
left:30px;
top:60px;
background: -webkit-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* Standard syntax */
/*margin: 100px 50px 0 150px;*/
}
.mainHeader nav ul{
}
.mainHeader nav ul li{
float:right;
display:inline;
text-align:center;
border:1px solid #ADADA8;
border-bottom:none;
border-top:none;
border-left:none;
padding-top:20px;
}
.mainHeader nav ul li.last{
border-right:none;
}
.mainHeader nav ul li a{
text-decoration:none;
/*margin:10px Use to replace paddings right/left but causes hovedr errors*/
font-family:Arial;
position:relative;
top:-10px;
color:white;
padding:10px;
padding-right:20px;
padding-left:20px;
}
.mainHeader nav ul li a.active{
background:white;
color:black;
}
.mainHeader nav ul li a:hover{
background:white;
color:black;
}
.topArea{
width:95%;
height:300px;
position:relative;
left:30px;
top:10px;
/*margin: -50px 50px 0 150px;*/
background: -webkit-linear-gradient(white,rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white,rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white,rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
background: linear-gradient(white,rgb(33, 171, 198)); /* Standard syntax */
}
.topArea .topAInfo{
margin:20px;
padding-top:60px;
width:60%;
margin:50px;
font-family:;
}
.topArea .topAInfo h2{
font-family:SketchFont;
font-weight: normal;
}
.topArea .topAInfo p{
line-height:25px;
font-family:cursive;
font-size:15px;
}
.bg{
width:100%;
height:1200px;
position:relative;
left:10%;
background:linear-gradient(blue, white, white, blue); /* Standard syntax */
/*background-image:url(bg2.jpg);*/
background-repeat: no-repeat;
}
.middleArea{
background:linear-gradient(white, white, #55C4E9); /* Standard syntax */;
height:600px;
width:95%;
position:relative;
left:30px;
top:10px;
}
.middleArea .middleAInfo {
padding:30px 0 0 30px;
}
.middleArea .middleAInfo p{
color:#49CBF0;
font-size:30px;
font-weight:400;
}
.middleArea .latestNews {
width:250px;
height:300px;
background:#0099cc;
float:right;
position:relative;
top:-60px;
border:1px solid #D6D8D8;
}
.middleArea .latestNews hr{
position:relative;
top:50px;
color:black;
width:90%;
margin-left:10px;
}
.middleArea .latestNews h2{
padding:10px 10px 10px 10px;
color:white;
}
.middleArea .latestNews p.date{
color:white;
font-size:13px;
font-weight:bold;
padding:10px 10px 10px 20px;
}
.middleArea .latestNews p{
color:white;
font-size:13px;
position:relative;
left:10px;
width:225px;
}
.middleArea .latestNews a{
color:blue;
font-size:15px;
font-family:Arial;
}
.middleArea .latestNews .newsLetter{
background:white;
width:250px;
height:200px;
position:relative;
top:80px;
border:1px solid #D6D8D8;
}
.middleArea .latestNews .newsLetter .textBox{
position:relative;
top:40px;
left:25px;
}
.middleArea .latestNews .newsLetter .button1{
width:50px;
height:25px;
background:#1768ED;
padding:3px 10px 2px 10px;
border-radius:7px;
text-align:center;
color:white;
font-family:Arial;
position:relative;
top:45px;
left:155px;
}
.middleArea .latestNews .newsLetter .button1:hover{
cursor: pointer;
}
.middleArea .latestNews .newsLetter h3{
position:relative;
top:15px;
left:10px;
color:#21AFEA;
}
.middleArea .latestNews .newsLetter hr{
position:relative;
top:20px;
color:#21AFEA;
}
.middleArea .latestNews .newsLetter p{
color:black;
position:relative;
top:40px;
color:#21AFEA;
font-size:15px;
}
.middleArea .latestNews .newsLetter a{
position:relative;
top:90px;
left:30px;
}
.slider{
width:800px;
height:350px;
overflow:hidden;
margin:30px auto;
background-image:url(loading.gif);
background-repeat:no-repeat;
background-position:center;
background-size: 100px 100px;
}
.slider img{
display:none;
}
javascript:
function Slider(){
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function(){
$("slider #"+count).show("slide", {direction:'right'}, 500);
$("slider #"+count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc){
count == 1;
}else{
count = count + 1;
}
},6500);
}
and the images zip
https://www.dropbox.com/s/z8cxqlfp7i46066/slides.zip?dl=0
The problem is that your syntax is wrong, the class selector should contain a dot
change $("slider") to $(".slider")
try this
function Slider(){
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function(){
console.log(count);
$(".slider #" + count).show("slide", {direction:'right'}, 500);
$(".slider #" + count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc){
count == 1;
}else{
count = count + 1;
}
},6500);
}
and replace your slider container with
<div class="slider">
<img id="1" src="slide1.jpg" border="0" alt="slide1" width="800px" height="350px">
<img id="2" src="slide2.jpg" border="0" alt="slide2" width="800px" height="350px">
<img id="3" src="slide3.jpg" border="0" alt="slide3" width="800px" height="350px">
</div>
and make sure to rename your image slider3.jpg to slide3.jpg
Well, Here are the following problems make it not working, and you can have a try:
In your javascript file, the data type of variable count is int, that's the reason why selector cannot find the DOM pointing to.
You should code like count.toString().
You select dom by Id, so you don't need to code like: $("slider #"+count), and $("#"+ count.toString()) is the proper way.
In the html, the name of image3 is incorrect, should be slider3.jpg.
I think that will help you to resolve the problem of image 2 and 3 not showing.
The other thing you need to think of is, how to slide back.
I want to make text animation like this slide in from left. There are three text fields
Sports Cargo Bag
$14
Sale $25
I want these text to be set from jquery and slide in from the left like this link
. This is my code JsFiddle, i have set these headtext but i want to use jquery method to set these texts
html
<div id="mainContainer">
<div id="logdo">
<img src="http://i.share.pho.to/7346a9ca_o.gif"/>
</div>
<div id="images">
<img id="introImg" src="http://i.share.pho.to/9064dfe4_o.jpeg"/></div>
<div id="headlineText">
<p id="headline1Txt" ></p>
<p id="headline2Txt" ></p>
<p id="headline3Txt" ></p>
</div>
<button class="btn btn-primary" id="ctaBtn" type="button">SHOP NOW</button>
</div>
css
* {
margin:0;
padding:0;
}
#mainContainer{ text-align: center;
width:160px;
height:600px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:5px solid #BACAE4;
overflow: hidden;
position: fixed;
}
#images{
position:absolute;
top:200px;
left:3px;
right:1286px;
Width:130px;
height:152px;
}
#introImg{
position:absolute;
top:40px;
left:7px;
right:11px;
}
#headlineText p
{
text-align: center;
position: absolute;
top:60px;
left:-120px;
Width:120px;
height:269px;
line-height:1.0;
overflow:hidden;
}
#ctaBtn{
position:absolute;
top:540px;
left:26px;
right:0px;
Width:106px;
height:28px;
}
Here is the simplest method:
Replace all our current javascript in your fiddle with $("#mainContainer").hide().show('slide');.
If you want you can use .delay(500) to make it wait a bit before the animation: $("#mainContainer").hide().delay(500).show('slide');
I cant seem to get this animated CSS menu to work... a) it's not centered and I can't seem to get it centered (maybe because of conflicting UL elements in CSS?) and b) the javascript isn't applying at all.
See here for what's going wrong:
http://runic-paradise.com/
and here for how it should work:
http://runic-paradise.com/animated-menu.html
HTML:
<ul class="menu">
<li class="green">
<p>Home</p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p>About</p>
<p class="subtext">More info</p>
</li>
<li class="red">
<p>Contact</p>
<p class="subtext">Get in touch</p>
</li>
<li class="blue">
<p>Submit</p>
<p class="subtext">Send us your stuff!</p>
</li>
<li class="purple">
<p>Terms</p>
<p class="subtext">Legal things</p>
</li>
</ul>
Javascript:
$(document).ready(function(){
//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
//Remove outline from links
$("a").click(function(){
$(this).blur();
});
//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
//When mouse is removed
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
CSS:
ul.menu {
margin: 0;
padding: 0;
}
/*li{
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}*/
a.menu{
color:#FFF;
text-decoration:none;
}
p.menu{
padding: 0px 5px;
}
.subtext{
padding-top:15px;
}
/*Menu Color Classes*/
.green{
background:#6AA63B url('images/green-item-bg.jpg') top left no-repeat;
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}
.yellow{
background:#FBC700 url('images/yellow-item-bg.jpg') top left no-repeat;
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}
.red{
background:#D52100 url('images/red-item-bg.jpg') top left no-repeat;
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}
.purple{
background:#5122B4 url('images/purple-item-bg.jpg') top left no-repeat;
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}
.blue{
background:#0292C0 url('images/blue-item-bg.jpg') top left no-repeat;
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}
You're loading the scripts in wrong order.
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/animated-menu.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
The first two scripts need jQuery to work, but it isn't available yet. Load jQuery first.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/animated-menu.js" type="text/javascript"></script>
Try this,
CSS
ul.menu{
height: 50px;
list-style: none outside none;
margin: 0 auto;
width: 500px;
}
And you can short li-classes like,
ul.menu li{
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}
/*Menu Color Classes*/
.green{
background:#6AA63B url('images/green-item-bg.jpg') top left no-repeat;
}
.yellow{
background:#FBC700 url('images/yellow-item-bg.jpg') top left no-repeat;
}
.red{
background:#D52100 url('images/red-item-bg.jpg') top left no-repeat;
}
.purple{
background:#5122B4 url('images/purple-item-bg.jpg') top left no-repeat;
}
.blue{
background:#0292C0 url('images/blue-item-bg.jpg') top left no-repeat;
}
Also your animation works and all your js loaded.
i put link of easing.js download it and put it in your head tag
https://github.com/ai/easings.net
I want to autoscroll a particular element either onmouseover or using an image map. I also want to hide the scrollbars for that div. The problem is...
I don't understand how to do this. I've been learning javascript for weeks now and I've only learned the useless parts. Nothing actually applicable to web design, that is. I did google it and nothing gave me the exact answer I was looking for, nor was I able to tweak those examples to work for me.
The code is on jsfiddle.net unless I'm breaking an unwritten rule, and please just let me know, I will just post the link. Please please please! don't just give me an answer, as I am a beginner. Please explain your solution. Thank you so much!
http://jsfiddle.net/thindjinn/KQP9t/2/
Decided to add the code, because I've gotten immediate responses before when doing that.
<!DOCTYPE html>
<html>
<title>Scrolling Pictures</title>
<head>
<link rel="stylesheet" type="text/css" href="scrollingPictures.css" />
<script src="/scrollingPictures.js"></script>
</head>
<body>
<div class="mask"></div> <!-- White behind images, to keep color consistent when low transparency -->
<div id="scroll">
<img class="left" id="image1" src="http://www.yalibnan.com/wp-content/uploads/2011/02/steve-jobs1.jpg" alt="Steve Jobs"/>
<img class="left" id="image2" src="http://www.power-of-giving.com/image-files/achievements-of-richard-branson.jpg" alt="Richard Branson"/>
<img class="left" id="image3" src="http://static5.businessinsider.com/image/4b16d0c70000000000134152/anderson-cooper.jpg" alt="Anderson Cooper"/>
<img class="left" id="image3" src="http://swandiver.files.wordpress.com/2009/03/rachel-maddow.jpg?w=288&h=371" alt="Rachel Maddow"/>
<img class="left" id="image3" src="http://img2.timeinc.net/people/i/2006/celebdatabase/kanyewest/kanye_west1_300_400.jpg" alt="Kanye West"/>
<img class="left" id="image3" src="http://img1.browsebiography.com/images/gal/2627_Larry_Page_photo_1.jpg" alt="Larry Page"/>
</div>
<div class="gradientTop"></div>
<div class="gradientBottom"></div>
<div id="work"><div class="panel">Work</div></div>
<div id="education"><div class="panel">Education</div></div>
<div id="skills"><div class="panel">Skills</div></div>
<div id="footer"> Home <!-- Beginning of Footer -->
Privacy Statement
Contact Us
Careers
More Info
</div>
</body>
</html>
body{
overflow:hidden;
margin-left:0;
margin-top:0;
}
div#scroll{
border-right:1px solid orange;
position:absolute;
z-index:2;
float:left;
width:200px;
height:100%;
overflow:auto;
overflow-x:hidden;
}
img.left{
z-index:inherit;
float:left;
width:200px;
min-height:200px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:200px; /* for IE5.x and IE6 */
opacity:0.4;
filter:alpha(opacity=40);
}
#image1, #image2, #image3{
width:200px;
}
img.left:hover{
opacity:1;
}
div.gradientTop{
position:absolute;
margin-top:0;
z-index:2;
width:206px;
height:30px;
float:left;
background:-webkit-linear-gradient(rgba(255,255,255,2), rgba(255,255,255,0))
}
div.gradientBottom{
position:absolute;
margin-bottom:50px;
z-index:2;
width:206px;
height:120px;
float:left;
bottom:-210px;
background:-webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1))
}
.panel{
font-size:2em;
padding-right:5%;
padding-top:7%;
height:100%;
}
#work{
width:100%;
z-index:0;
color:orange;
position:relative;
text-align:right;
max-height:500px;
background-color:#fff;
min-height:200px; /* for modern browsers */
min-width:700px;
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#education{
width:100%;
z-index:0;
color:orange;
position:relative;
text-align:right;
max-height:500px;
background-color:#fff;
min-height:200px; /* for modern browsers */
min-width:700px;
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#skills{
width:100%;
z-index:0;
color:orange;
position:relative;
text-align:right;
max-height:500px;
background-color:#ffe;
min-height:200px; /* for modern browsers */
min-width:700px;
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#work:hover,#education:hover,#skills:hover{
z-index:0;
background-color:#f0f0f9;
border-top:1px solid #d0d0d0;
border-bottom:1px solid #e0e0e0;
}
#work:active,#education:active,#skills:active{
z-index:0;
background-color:#ededf2;
border-top:1px solid #d0d0d0;
border-bottom:1px solid #e0e0e0;
}
div.mask{
position:relative;
z-index:1;
margin-top:5px;
float:left;
width:206px;
height:805px;
background-color:white;
}
#footer {
background:white;
z-index:3;
position:absolute;
font-variant:normal;
text-indent:5%;
color:#333;
clear:both;
height:50px;
padding-top:20px;
}
How do hide scrollbars:
Set the css property overflow to hidden on the div:
<div style="overflow:hidden"></div>
How to scroll the div:
The element has a scrollTop property, which is the amount of pixels the element has been scrolled. You can scroll the element by assigning to this property:
var div = document.getElementById(someId);
div.scrollTop = 50;
How to do something on mouseover:
var div = document.getElementById(someId);
div.onmouseover = function() {
// do something here
};
Chech this page:
http://valums.com/vertical-scrolling-menu/
And this is the sample.
http://valums.com/files/2009/vertical-menu/final.htm
Good luck