PDA

View Full Version : Making The "Drop-In" Content Box Drop Only When Clicked!



rhlblue
09-03-2007, 04:33 AM
1) Script Title: Drop-in content box

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/dropinbox.htm

3) Describe problem: Humm, not a problem basically :) ......the script is awesome !
all i want to do is.........i have a free webhosting site and i'm making a new theme for it.....now......i want that when people click on "sign up" the Drop in box drops and in that i will put the registration form...

i'm totally new to java scripts so i'm not able to figure it out :(

so.......by default the drop in box drops itself......i don't want that....i just want it to drop only when we click on the button....

this is really important for me because rest of my designing will be based on this feature only......so i'll be waiting for the replies

regards

jscheuer1
09-03-2007, 05:04 AM
Basically, just install the script from the (select):


1) Every time page loads

option. Follow the instructions, then get rid of this:


window.onload=initbox

Then you could launch it from a button like:


<input type="button" value="Register" onclick="initbox();">

or from a link like:


<a href="registration.htm" onclick="initbox();return false;">Register</a>

The second method might be better because you could have a registration page called registration.htm for non-javascript enabled browsers.

rhlblue
09-03-2007, 06:21 AM
hey thanks man........really appreciate :)

erm one more question, how do i center the box ? :D (not able to do it)

thanks again !

jscheuer1
09-03-2007, 06:31 AM
The box is absolutely positioned (from the demo):


<div id="dropin" style="position:absolute;visibility:hidden;left:200px;top:100px;width:500px;height:300px;background-color:#F5F5F5">

I am assuming you mean centering it horizontally. To do that, set its left to 50% and set a margin-left property to a negative value equal to half of its width. Working from the demo's specs, that would come out like so:


<div id="dropin" style="position:absolute;visibility:hidden;left:50%;margin-left:-250px;top:100px;width:500px;height:300px;background-color:#F5F5F5">

rhlblue
09-03-2007, 06:38 AM
hey thanks again :)

well, i was finally able to make it center and came back and saw ur reply .....

this is what i did :


div#dropin
{
position:absolute;
visibility:hidden;
left: 50&#37;;
margin-left: -400px;
margin-top: 10%;
width: 800px;
height: 400px;
background-color:#F5F5F5;
}

little strange though......

anyways, i still need to work on the code have to make it look good....
i'll come back and show my final work when done ....

a big thanks to DD......i'm using around 5+ scripts in my design right now and the site looks awesome :)

cheers

EDIT: oh snap........by now everything was working fine and all the codes worked fine......but after i finished my work it was time to check Browser Compatibility.........it works fine on FireFox and IE7........now i'm using another script :

1) Ulimate Fade-in Slideshow
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

so on my home page i have this slide show.......now when i use Opera and use the drop down box ....... it goes below the Slide show :( ........means that the slide show is always on top of other windows (only on Opera ).......

is there any way to fix that ?

sorry for buggin so much

rhlblue
09-03-2007, 11:30 AM
i know i should not bump the topic but the last time i posted a topic here , i waited for one week and no one replied :( ..... so this time i'm not taking any chance...

well, as i mentioned above also......the Fade In Slideshow is a very good tool and it looks like Flash ......but the only problem is that it always comes above all other divs,images etc.....(only in opera).....is there any fix for it ?

second question.......can i make 2 drop down boxes in one page ?
like 2 different buttons opening 2 different drop down boxes.....

thanks again !

jscheuer1
09-03-2007, 03:48 PM
The below script should work out for you. To get it to always be on top of the slideshow, set its base zIndex to 100000:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#dropin {
position:absolute;
visibility:hidden;
left:200px;
top:200px;
width:450px;
height:300px;
background-color:#F5F5F5;
}
#dropin2 {
position:absolute;
visibility:hidden;
left:10px;
top:100px;
width:200px;
height:300px;
background-color:#dcdcdc;
}
#dropin3 {
position:absolute;
visibility:hidden;
right:10px;
top:50px;
width:250px;
height:200px;
background-color:yellow;
color:blue;
}
</style>
<script type="text/javascript">

// Drop-in content box- By Dynamic Drive
// For full original source code and more DHTML scripts, visit http://www.dynamicdrive.com
// This credit MUST stay intact for use. Last Modified: 3/Sep/2007

dropBox.zIndex=1000; //Set Base z-index style for drop boxes

// Instructions -

/* Usage:

to drop:
new dropBox('id_of_dropin_division', optional_bounce, optional_final_top);

bounce defaults to 32, final_top defaults to the division's style top (offsetTop).

to close:
dropBox['id_of_dropin_division'].dismissBox();

////////////////////////// Do Not Edit ///////////////////////*/

function dropBox(id, bounceLimit, finalTop){
if (!document.getElementById)
return
dropBox[id]=this;
this.finalTop=typeof finalTop=='number'? finalTop : document.getElementById(id).offsetTop;
this.bounceLimit=typeof bounceLimit=='number'? bounceLimit-bounceLimit%8 : 32;
this.obj=document.getElementById(id).style;
this.obj.zIndex=dropBox.zIndex++;
this.scrollTop=typeof window.pageYOffset=='number'? window.pageYOffset : this.trueBody().scrollTop;
this.obj.top=this.scrollTop-250+'px';
this.obj.visibility='visible';
this.dropStart=setInterval(function(){dropBox[id].dropIn();},50);
}

dropBox.prototype.dropIn=function(){
this.scrollTop=typeof window.pageYOffset=='number'? window.pageYOffset : this.trueBody().scrollTop;
if (parseInt(this.obj.top)<this.finalTop+this.scrollTop)
this.obj.top=Math.min(this.finalTop+this.scrollTop ,parseInt(this.obj.top)+40)+'px';
else{
var dropper=this;
clearInterval(this.dropStart);
this.bounceStart=setInterval(function(){dropper.bounceIn();},50);
}
}

dropBox.prototype.bounceIn=function(){
this.obj.top=parseInt(this.obj.top)-this.bounceLimit+'px';
if (this.bounceLimit<0)
this.bounceLimit+=8;
this.bounceLimit=this.bounceLimit*-1;
if (this.bounceLimit==0)
clearInterval(this.bounceStart);
}

dropBox.prototype.dismissBox=function(){
clearInterval(this.bounceStart);
this.obj.visibility='hidden';
}

dropBox.prototype.trueBody=function(){
return (document.compatMode && document.compatMode!='BackCompat')? document.documentElement : document.body;
}

</script>
</head>
<body>
<input type="button" value="Drop 1" onclick="new dropBox('dropin');"><br>
<input type="button" value="Drop 2" onclick="new dropBox('dropin2',64);"><br>
<input type="button" value="Drop 3" onclick="new dropBox('dropin3',0);">
<div id="dropin">

<div align="right"><a href="#" onClick="dropBox['dropin'].dismissBox();return false">[Close Box] </a></div>
Drop 1 - SPECIFY YOUR CONTENT HERE. IT COULD BE TEXT, IMAGES, OR RICH HTML

</div>
<div id="dropin2">

<div align="right"><a href="#" onClick="dropBox['dropin2'].dismissBox();return false">[Close Box] </a></div>
Drop 2 - SPECIFY YOUR CONTENT HERE. IT COULD BE TEXT, IMAGES, OR RICH HTML

</div>
<div id="dropin3">

<div align="right"><a href="#" onClick="dropBox['dropin3'].dismissBox();return false">[Close Box] </a></div>
Drop 3 - SPECIFY YOUR CONTENT HERE. IT COULD BE TEXT, IMAGES, OR RICH HTML

</div>
</body>
</html>

rhlblue
09-03-2007, 06:03 PM
i just want to say one thing :

jscheuer u are the coolest person in this world :)

thanks for all ur help.....

finally......i just added
z-index:100; in the css and it worked :D

this is how it looks like now


<div id="dropin" style="position:absolute;visibility:hidden;left:50&#37;;margin-left:-375px;top:2%;width:750px;height:auto;background-color:#FFFFFF;color: #000000;padding: 5px;border: 4px solid #FF9900;overflow:hidden;background-image: url('images/bodybackground.png');z-index:100;">
<img src="images/freewebsite.png" alt="Make A Free Website!" />

i was missing the z-index part and u reminded me of that......
and also thanks for the 1+ drop down box codes.......

have a nice day mate