Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Transitions

This is a discussion on Transitions, within the Javascript section. This forum and the thread "Transitions" are both part of the Programming Your Website category.

2 Pages V   1 2 >  
 Reply to this topicStart new topic
> Transitions
Justify
post Jun 12 2008, 07:38 PM
Post #1


Squeezing
***

Group: Members
Posts: 96
Joined: 14-February 08
Member No.: 76
Hey all, late one for you.

www.brettonconsulting.co.uk is the example here.

Basically the 'Services' opens a div underneath. AND IT WORKS!!! (First time i looked at javascript at all, usually takes me hours to get around stuff like this)

Right so now i can get on with the rest of the site to meet deadlines. But i want to know how i can create a transition effect with it.

CODE
<script type="text/javascript">

function change(){
document.getElementById("secondary-nav").style.height = "29px";
document.getElementById("header-left").style.paddingTop = "39px";

}

function change_back(){
document.getElementById("secondary-nav").style.height = "0px";
document.getElementById("header-left").style.paddingTop = "68px";
}

</script>


That's the code, really simple!

But a point in the right direction will be great.
Go to the top of the page
 
+Quote Post
Rakuli
post Jun 13 2008, 10:41 AM
Post #2


Squeeze Machine
*****

Group: Administrators
Posts: 649
Joined: 13-February 08
From: Catching the squeezed drips downunder.
Member No.: 13
What do you mean by transition? You want it to fade up or slide up?

If you're just getting into javascript and want to do animation I would recommend jQuery

If you want to see what the code would look like (without jQuery) let me know.


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
Justify
post Jun 16 2008, 06:06 AM
Post #3


Squeezing
***

Group: Members
Posts: 96
Joined: 14-February 08
Member No.: 76
Hi sorry been away all weekend.

Would like a slide up, then return after hover. I have been trying with the books i got. But Javascript is alot different to things i usually look at.

Can't seem to get the whole functions and structure of the language.

I would like to do more then just use libraries because the experience would be great.
Go to the top of the page
 
+Quote Post
MikeHopley
post Jun 16 2008, 08:15 AM
Post #4


Squeeze Machine
*****

Group: Mentor
Posts: 602
Joined: 15-February 08
From: UK
Member No.: 143
QUOTE (Rakuli @ Jun 13 2008, 04:41 PM) *
If you're just getting into javascript and want to do animation I would recommend jQuery


I'll echo that. I've just started fiddling with jQuery, and it's fabulous. smile.gif


QUOTE
I would like to do more then just use libraries because the experience would be great.


Yet a good library makes it much easier to write javascript. It's not just about superficial effects. Have you ever tried manipulating your pages with the DOM? It's tortuously long-winded and browser support is shockingly bad.

While jQuery's animation is nice, the features that really convinced me were the "load when the DOM is ready" and the DOM API. You can cut 20 lines of code down to 3, while avoiding all the arcane browser bugs.

I admit I'm uncomfortable with the browser-sniffing approach taken by such libraries. In an ideal world, it wouldn't happen. But the bugs are there, and I'd rather leave a genius-level javascript expert such as John Resig to do the dirty work for me (see his excellent overview of javascript libraries). Essentially it comes down to two choices:

  • Purist approach: no browser sniffing. Get randomly butt-raped by bizarre browser bugs; read Quirksmode, find compatibility problem; try another method and hope it works. Good chance you'll miss bugs in (say) Safari or Opera, unless your testing process is very thorough.
  • Library approach: don't worry about all this crap. Trust javascript uber-geeks to maintain excellent browser compatibility. Live with dirty secret of browser sniffing in jquery.js, while writing lovely clean code yourself.
The first approach is frustrating and arduous. It doesn't really teach you much of value; you're just learning how to hack. Personally, I'd rather leave others to do that hacking for me.

The abstraction may leak occasionally, but much less often than my own code would. I'm coming to believe that, unless you're a javascript God like PPK, you should accept your limitations and get a library to manage all these horrific browser bugs for you.
Go to the top of the page
 
+Quote Post
Justify
post Jun 17 2008, 09:02 AM
Post #5


Squeezing
***

Group: Members
Posts: 96
Joined: 14-February 08
Member No.: 76
I understand all the reasons. And you have valid points. But I'm young and should take every chance to learn something further. So I will be difficult... and ask for someone to help me out so i can understand smile.gif rather then drowning in manuals for jQuery, i will drown in confusing syntax and headaches. When i get the basics i will start using libraries more, will make alot more sense as well.


JTY
Go to the top of the page
 
+Quote Post
MikeHopley
post Jun 17 2008, 10:15 AM
Post #6


Squeeze Machine
*****

Group: Mentor
Posts: 602
Joined: 15-February 08
From: UK
Member No.: 143
QUOTE (Justify @ Jun 17 2008, 03:02 PM) *
rather then drowning in manuals for jQuery, i will drown in confusing syntax and headaches.


Well, here's the first jQuery code I wrote. It's a sliding effect, which I used to replace my old simple show/hide effect. My old effect, without any animation, was many lines of javascript. This new effect, with the animation, is only one line:

QUOTE
$("#skillHelpLink, #closeSkillHelp").click(function(e){ $("#skillHelp").slideToggle("slow"); e.preventDefault()})


I didn't have to read any difficult manuals. In fact, I actually guessed part of this code! Here's how it works:
  • "#skillHelpLink, #closeSkillHelp" are CSS selectors; I'm applying this action to two separate links at once.
  • .click(function(e){ is just like .onclick=function(e){
  • .slideToggle("slow") is the sliding effect.
  • e.preventDefault is just like return=false (it stops the browser from following my <a href="#">)
I would help you with the raw javascript version of this effect, but I've never learned it -- and I'm certainly not going to bother, now that jQuery makes it all so easy.

Rakuli will probably guide you, however.
Go to the top of the page
 
+Quote Post
MikeHopley
post Jun 17 2008, 10:36 AM
Post #7


Squeeze Machine
*****

Group: Mentor
Posts: 602
Joined: 15-February 08
From: UK
Member No.: 143
I just guessed another jQuery syntax. biggrin.gif

I was trying to add a className depending on a variable x (x could be 1, 2, or 3). The basic syntax for adding a class is like this:

CODE
$("body").addClass("skill2")


...but now I want to say, skillx instead. So I guessed the following (without reading the manual), and it just worked:

CODE
$("body").addClass("skill"+x)


Magic. Absolute bloody magic.
Go to the top of the page
 
+Quote Post
Justify
post Jun 17 2008, 10:54 AM
Post #8


Squeezing
***

Group: Members
Posts: 96
Joined: 14-February 08
Member No.: 76
lol okay im in.

Do you know how i would go around changing the css to create the movement?

Now looking... and can't find anything on it
Go to the top of the page
 
+Quote Post
MikeHopley
post Jun 17 2008, 11:28 AM
Post #9


Squeeze Machine
*****

Group: Mentor
Posts: 602
Joined: 15-February 08
From: UK
Member No.: 143
QUOTE (Justify @ Jun 17 2008, 04:54 PM) *
lol okay im in.

Do you know how i would go around changing the css to create the movement?

Now looking... and can't find anything on it


You don't need to change the CSS. The slideToggle effect does that for you.

Let's say that you want to apply a sliding-down effect on a <div id="slide">, which you want to be initially hidden. You will trigger this event by clicking on <a id="activateSlide">Toggle the div!</a>. To start with, apply this CSS:

CODE
div#slide {
display: none;
}


Then apply this javascript (you'll need jQuery.js "installed"):

CODE
$("#activateSlide").click(function(e){ $("#slide").slideToggle("slow"); e.preventDefault()})
Go to the top of the page
 
+Quote Post
Justify
post Jun 17 2008, 01:12 PM
Post #10


Squeezing
***

Group: Members
Posts: 96
Joined: 14-February 08
Member No.: 76
I need to change CSS to get div to show. I had a great design... but harder to put in place then i thought!

You can see i have to change the padding to get the div to show.

wwww.brettonconsulting.co.uk is the working example.

Unless i can do it another way? I was really stumped on it.
Go to the top of the page
 
+Quote Post
Rakuli
post Jun 17 2008, 05:57 PM
Post #11


Squeeze Machine
*****

Group: Administrators
Posts: 649
Joined: 13-February 08
From: Catching the squeezed drips downunder.
Member No.: 13
You can change your current code to work with jQuery like follows.



Really, it's just a matter of animating the appropriate CSS properties. jQuery is flexible enough that you generally don't have to change your css to accomodate it.
CODE
<script type="text/javascript">

function change()
{
    
       $('#secondary-nav').animate({height : '29px'}, 300);
       $('#header-left').animate(paddingTop : '39px'}, 300);

}
function change_back()
{
       $('#secondary-nav').animate({height : '0px'}, 300);
       $('#header-left').animate(paddingTop : '68px'}, 300);

}




</script>


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
Justify
post Jun 18 2008, 11:34 AM
Post #12


Squeezing
***

Group: Members
Posts: 96
Joined: 14-February 08
Member No.: 76
CODE
<script type="text/javascript">

function change()
{
    
       $('#secondary-nav').animate({height : '29px'}, 300);
       $('#header-left').animate(paddingTop : '39px'}, 300);

}
function change_back()
{
       $('#secondary-nav').animate({height : '0px'}, 300);
       $('#header-left').animate(paddingTop : '68px'}, 300);
}


</script>

</head>

<body>

<div id="page-container">

<div id="header">
<div id="header-left">
<div id="main-nav">

<ul class="navigation">
<li class="home"><a href="/"><span>home</span></a></li>
<li class="company"><a href="/ourcompany/company.html"><span>our company</span></a></li>
<li class="services" onmouseover="change()" onmouseout="change_back()"><a href="/services/whatwedo.html"><span>services</span></a></li>
<li class="contact"><a href="/contactus/contact.php"><span>contact us</span></a></li>
</ul>

</div>
<div id="secondary-nav" onmouseover="change()">
</div>
</div>
<div id="header-logo"><img src="/images/bretton-logo.png" width="362" height="99" id="bretton-logo" alt="Bretton Consulting. Procurement Management"/></div>

</div>
</div>

</body>
</html>


Am i implementing this wrong? I have had a play with things are search around but can't seem to figure out where i'm going wrong...
Go to the top of the page
 
+Quote Post
Rakuli
post Jun 18 2008, 05:58 PM
Post #13


Squeeze Machine
*****

Group: Administrators
Posts: 649
Joined: 13-February 08
From: Catching the squeezed drips downunder.
Member No.: 13
May be an obvious question but are you including the jQuery library into your document?

If not that. try using the jQuery document ready function instead of using the inline event handlers:

CODE
<script type="text/javascript">

function change()
{
    
       $('#secondary-nav').animate({height : '29px'}, 300);
       $('#header-left').animate(paddingTop : '39px'}, 300);

}
function change_back()
{
       $('#secondary-nav').animate({height : '0px'}, 300);
       $('#header-left').animate(paddingTop : '68px'}, 300);
}

$(document).ready(function()
{
    $('#secondary-nav').mouseover(change);
    $('#header-left').mouseover(change);
    $('#header-left').mouseout(change_back);
});

</script>


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
Justify
post Jun 19 2008, 03:51 AM
Post #14


Squeezing
***

Group: Members
Posts: 96
Joined: 14-February 08
Member No.: 76
Still not working, everything is definitely linked in...

This bit doesn't look right to me, that's only my knowledge of php etc but there is parenthesis and curly brackets inside each other...

Not sure if it's meant to be like that or not?


CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Bretton Consulting | Consulting Support Designed to Enhance Management Efforts | Procurement Management</title>
<link href="/scripts/brettonconsulting.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/scripts/jquery-1.2.6.js"></script>

<script type="text/javascript">

function change()
{
    
[b]       $('#secondary-nav').animate({height : '29px'}, 300);
       $('#header-left').animate(paddingTop : '39px'}, 300);[/b]

}
function change_back()
{
       $('#secondary-nav').animate({height : '0px'}, 300);
       $('#header-left').animate(paddingTop : '68px'}, 300);
}

$(document).ready(function()
{
    $('#secondary-nav').mouseover(change);
    $('#header-left').mouseover(change);
    $('#header-left').mouseout(change_back);
});

</script>

</head>

<body>

<div id="page-container">

<div id="header">
<div id="header-left">
<div id="main-nav">

<ul class="navigation">
<li class="home"><a href="/"><span>home</span></a></li>
<li class="company"><a href="/ourcompany/company.html"><span>our company</span></a></li>
<li class="services" onmouseover="change()" onmouseout="change_back()"><a href="/services/whatwedo.html"><span>services</span></a></li>
<li class="contact"><a href="/contactus/contact.php"><span>contact us</span></a></li>
</ul>

</div>
<div id="secondary-nav" onmouseover="change()">
</div>
</div>
<div id="header-logo"><img src="/images/bretton-logo.png" width="362" height="99" id="bretton-logo" alt="Bretton Consulting. Procurement Management"/></div>

</div>
</div>

</body>
</html>
Go to the top of the page
 
+Quote Post
Rakuli
post Jun 19 2008, 07:12 AM
Post #15


Squeeze Machine
*****

Group: Administrators
Posts: 649
Joined: 13-February 08
From: Catching the squeezed drips downunder.
Member No.: 13
Woops, that's my bad sorry mate. I forgot to open the hashes on the $header-left declarations.

CODE
<script type="text/javascript">

function change()
{
    
       $('#secondary-nav').animate({height : '29px'}, 300);
       $('#header-left').animate({paddingTop : '39px'}, 300);

}
function change_back()
{
       $('#secondary-nav').animate({height : '0px'}, 300);
       $('#header-left').animate({paddingTop : '68px'}, 300);
}

$(document).ready(function()
{
    $('#secondary-nav').mouseover(change);
    $('#header-left').mouseover(change);
    $('#header-left').mouseout(change_back);
});

</script>


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
Justify
post Jun 19 2008, 01:26 PM
Post #16


Squeezing
***

Group: Members
Posts: 96
Joined: 14-February 08
Member No.: 76
Check this out

It's working lol but is being really spastic...

What's wrong with it?

Each time i see it i want to throw Ritalan at it...
Go to the top of the page
 
+Quote Post
MikeHopley
post Jun 19 2008, 03:40 PM
Post #17


Squeeze Machine
*****

Group: Mentor
Posts: 602
Joined: 15-February 08
From: UK
Member No.: 143
QUOTE (Justify @ Jun 19 2008, 07:26 PM) *
Check this out

It's working lol but is being really spastic...

What's wrong with it?

Each time i see it i want to throw Ritalan at it...


Hmmm. I think the problem may be that your mouse events depend on the size of the very elements you are rescaling. This can cause an infinite loop effect:
  1. You hover over an item
  2. It resizes/moves
  3. Because of the movement, your mouse has now left/entered the hover area
  4. ...so it resizes/moves again
  5. Because of the movement, your mouse has now left/entered the hover area...
I've seen this kind of bug in various forms. The solution is to rethink your triggering so that the hover area itself remains the same size.
Go to the top of the page
 
+Quote Post
Justify
post Jun 19 2008, 04:16 PM
Post #18


Squeezing
***

Group: Members
Posts: 96
Joined: 14-February 08
Member No.: 76
I thought the same at first, but they section it moves to underneath is on the show.... ahhh!

Think i might of just worked this out!

Two mins...
Go to the top of the page
 
+