Javascript Help
4 posters
Page 1 of 1
Javascript Help
Hi there,
I need some help with JS. Right now I have something that on hover slides and shows something to the right, however I want to show it on the left.
Here's my code:
If you need a example of it I can show you
I need some help with JS. Right now I have something that on hover slides and shows something to the right, however I want to show it on the left.
Here's my code:
- Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#accordion > li').hover(
function () {
var $this = $(this);
$this.stop().animate({'width':'480px'},500);
$('.heading',$this).stop(true,true).fadeOut();
$('.bgDescription',$this).stop(true,true).slideDown(500);
$('.description',$this).stop(true,true).fadeIn();
},
function () {
var $this = $(this);
$this.stop().animate({'width':'115px'},1000);
$('.heading',$this).stop(true,true).fadeIn();
$('.description',$this).stop(true,true).fadeOut(500);
$('.bgDescription',$this).stop(true,true).slideUp(700);
}
);
});
</script>
If you need a example of it I can show you
Last edited by Drogba921 on May 21st 2011, 6:55 pm; edited 1 time in total
Mike- Hyperactive
- Posts : 4255
Reputation : 471
Language : English, HTML, CSS
Location : Loveland, Colorado
Re: Javascript Help
If i recall right (and it's a bit tricky coding without being able to see the example) you just need to make one of the numbers a negative to make it go in reverse
I think it's either this line:
$this.stop().animate({'width':'480px'},-500);
or this one:
this.stop().animate({'width':'115px'},-1000);
Hope that helps!
I think it's either this line:
$this.stop().animate({'width':'480px'},-500);
or this one:
this.stop().animate({'width':'115px'},-1000);
Hope that helps!
Re: Javascript Help
No, that's the time it takes to do as such. Anyone else?
Mike- Hyperactive
- Posts : 4255
Reputation : 471
Language : English, HTML, CSS
Location : Loveland, Colorado
Re: Javascript Help
Is anyone able to help?
Mike- Hyperactive
- Posts : 4255
Reputation : 471
Language : English, HTML, CSS
Location : Loveland, Colorado
Re: Javascript Help
[Post Removed]
Mike- Hyperactive
- Posts : 4255
Reputation : 471
Language : English, HTML, CSS
Location : Loveland, Colorado
Re: Javascript Help
This is something to do with the CSS not the jQuery
I didn't came to fix it but here is something you may like:
1. go to http://htmledit.squarefree.com/
2. Paste this code and see what will happen:
I didn't came to fix it but here is something you may like:
1. go to http://htmledit.squarefree.com/
2. Paste this code and see what will happen:
- Spoiler:
- Code:
<style>
ul.accordion{
list-style:none;
position:absolute;
right:80px;
font-family: Cambria, serif;
font-size: 16px;
font-style: italic;
line-height: 1.5em;
}
ul.accordion li{
width:115px;
height:200px;
display:block;
border-right:2px solid #fff;
border-bottom:2px solid #fff;
background-color:#fff;
background-repeat:no-repeat;
background-position:center center;
position:relative ;
overflow:hidden;
cursor:pointer;
-moz-box-shadow:1px 3px 15px #555;
-webkit-box-shadow:1px 3px 15px #555;
box-shadow:1px 3px 15px #555;
float: left;
}
ul.accordion li.bg1{
background-image:url(../images/1.jpg);
}
ul.accordion li.bg2{
background-image:url(../images/2.jpg);
}
ul.accordion li.bg3{
background-image:url(../images/3.jpg);
}
ul.accordion li.bg4{
background-image:url(../images/4.jpg);
}
ul.accordion li.bleft{
border-left:2px solid #fff;
}
ul.accordion li .heading{
background-color:#fff;
padding:10px;
margin-top:60px;
opacity:0.9;
text-transform:uppercase;
font-style:normal;
font-weight:bold;
letter-spacing:1px;
font-size:14px;
color:#444;
text-align:center;
text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description{
position:absolute;
width:480px;
height:175px;
bottom:0px;
left:0px;
display:none;
}
ul.accordion li .description h2{
text-transform:uppercase;
font-style:normal;
font-weight:bold;
letter-spacing:1px;
font-size:45px;
color:#444;
text-align:left;
margin:0px 0px 15px 20px;
text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description p{
line-height:14px;
margin:10px 22px;
font-family: "Trebuchet MS", sans-serif;
font-size: 12px;
font-style: italic;
font-weight: normal;
text-transform: none;
letter-spacing: normal;
line-height: 1.6em;
}
ul.accordion li .description a{
position:absolute;
bottom:5px;
left:20px;
text-transform:uppercase;
font-style:normal;
font-size:11px;
text-decoration:none;
color:#888;
}
ul.accordion li .description a:hover{
color:#333;
text-decoration:underline;
}
ul.accordion li .bgDescription{
background:transparent url(../images/bgDescription.png) repeat-x top left;
height:340px;
position:absolute;
bottom:0px;
left:0px;
width:100%;
display:none;
}
</style>
<ul class="accordion" id="accordion">
<li class="bg1">
<div class="test">
<div class="heading">Discussion</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Discussion</h2>
<p>General Discussion on all of the greatest topics our members can think of!</p>
<a href="#">more →</a>
</div>
</div>
</li>
<li class="bg2">
<div class="heading">Programs</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Programs</h2>
<p>Get opinions on the best development and Graphic Programs. Click here to learn more. </p>
<a href="#">more →</a>
</div>
</li>
<li class="bg3">
<div class="heading">Requests</div>
<div class="bgDescription"></div>
<div class="description">
<h2>GFX Requests</h2>
<p>WebDesign Offers Graphic Requests so that you can get graphics made! Click here to learn more.</p>
<a href="#">more →</a>
</div>
</li>
<li class="bg4 bleft">
<div class="heading">HTML Help</div>
<div class="bgDescription"></div>
<div class="description">
<h2>HTML Help</h2>
<p>Need help with HTML and CSS coding? Click here to view our support forum with free help!</p>
<a href="#">more →</a>
</div>
</li>
</ul>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#accordion > li').hover(
function () {
var $this = $(this);
$this.stop().animate({'width':'480px'},500);
$('.heading',$this).stop(true,true).fadeOut();
$('.bgDescription',$this).stop(true,true).slideDown(500);
$('.description',$this).stop(true,true).fadeIn();
},
function () {
var $this = $(this);
$this.stop().animate({'width':'115px'},1000);
$('.heading',$this).stop(true,true).fadeIn();
$('.description',$this).stop(true,true).fadeOut(500);
$('.bgDescription',$this).stop(true,true).slideUp(700);
}
);
});
</script>
Re: Javascript Help
nah it didnt help. Ill try and use something else.
Mike- Hyperactive
- Posts : 4255
Reputation : 471
Language : English, HTML, CSS
Location : Loveland, Colorado
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum