FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

[JS] pop up slider.

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


DanielXP
I made this div what slides up and down to display names and descriptions on my site.

It don't really seem to work that good. If you move over fast it seems to mess up.

This is my code.

Code:
var bbxdesc_bottom = -85;
var bbxdesc_time;
var bbxdesc_current = -85;

document.write('<div id="bboxdesc" style="background-color:#333333; z-index:1000; position:fixed; bottom:'+bbxdesc_bottom+'px; padding:5px; height:70px; width:340px; border-top:5px solid #1E1E1E; border-right:5px solid #1E1E1E;"></div>');

function bboxdesc(name, desc) {
   document.getElementById('bboxdesc').innerHTML = '<b>'+name+'</b><br />'+desc;
   document.getElementById('bboxdesc').style.bottom = bbxdesc_bottom+'px';
   if((bbxdesc_current != 0) && (bbxdesc_current != bbxdesc_bottom)) { clearTimeout(bbxdesc_time); }
   bboxdescslide();
}

function bboxdescslide() {
var bbdele = document.getElementById('bboxdesc');
if(bbxdesc_current >= 0) {
bbdele.style.bottom = '0px';
clearTimeout(bbxdesc_time);
}else{
bbxdesc_current++; bbxdesc_current++;  bbxdesc_current++;
bbdele.style.bottom = bbxdesc_current+'px';
bbxdesc_time = setTimeout('bboxdescslide()', 1);
}
}

function bboxdescslided() {
var bbdele = document.getElementById('bboxdesc');
if(bbxdesc_current <= bbxdesc_bottom) {
bbdele.style.bottom = bbxdesc_bottom+'px';
clearTimeout(bbxdesc_time);
}else{
bbxdesc_current--; bbxdesc_current--;  bbxdesc_current--;
bbdele.style.bottom = bbxdesc_current+'px';
bbxdesc_time = setTimeout('bboxdescslided()', 1);
}
}


Im not very good at javascript (as you can tell from my code Razz)

Is there any way to fix this and a way to tidy my code up a bit? (As in make it shorter)

You can see an online demo of the script below.
http://rmb-arcade.com/V2.0/
(Just hover over a game image)

Ps. I have tested it on FF which really messes up, ie slides slow and if u don't hold over while it goes up it stops)

Thanks in advance for ya help!
Dan
LukeakaDanish
Just quickly looking at your source code I noticed that you have:
Code:
onmouseover="javascript:#####"

Usually you would put:
Code:
onmouseover="#####"

I don't think thats causing it to break, but start by fixing it with that. The "javascript:" usually goes in the href attribute if you want that to be javascript
DanielXP
LukeakaDanish wrote:
Just quickly looking at your source code I noticed that you have:
Code:
onmouseover="javascript:#####"

Usually you would put:
Code:
onmouseover="#####"

I don't think thats causing it to break, but start by fixing it with that. The "javascript:" usually goes in the href attribute if you want that to be javascript


OK ive done that. Does any one have ideas on how i can fix this?
Jaspa
Hi,

I'm quite new to js myself but if your refering to the 'bouncing' effect you get when moving from one img to the next....

instead of using:
Code:
onmouseout = bboxdescslided();
on the <img> tag like you have...

I think by calling it on the 'td .thrpad center' tag will delay the downward movement until the mouse leaves the outer container of your imgs, and by leaving the...

Code:
onmouseover = bboxdesc('...');
where it is, the discription should still change for each img.

But, then again I could be wrong Wink

I think you have a good looking site, but may I suggest resizing your 'sliding box' to be tall and narrower so that it doesn't cover part of the bottom left img. (you can tell me to ****off if you like, I just thought it would look better Smile )
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.