PDA

View Full Version : Change towards opening



Cino
06-28-2008, 12:36 PM
1) Script Title: Drop Down/ Overlapping Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

3) Describe problem:

Hi, im italian so excuse me for my language errors. Im using ur script, found at link above to open and close a popup. I would need to change the direction of opening. Now the window opens towards right and i would like to open it to left.

Can u help me? I would appreciate any ur advice. :)

jscheuer1
06-28-2008, 01:47 PM
That script is actually officially presented here:

http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

Which is the official demo page for it. On that page, your question is answered in the section headed:

More Information

Please see that section on the demo page.

Cino
07-03-2008, 02:53 AM
Thanks jscheuer1

Ive tested the script following the instructions but unfortunately it seems not to work...When i click, it opens the link in this part instead of the popup

<a href="http://www.dynamicdrive.com" id="searchlink" rel="subcontent">Search DD</a>

Ive tried to replace the address with the symbol #, but the link remains static...

how can I solve?

ddadmin
07-03-2008, 08:28 AM
Not sure if I understood you correctly, but as John said, the orientation of where the Content Drops down relative to the anchor link is explained in the "More Information" section on the script page. Specifically, the parameter in red below:


dropdowncontent.init("searchlink", "right-bottom", 500, 'mouseover')

Valid values are: "left-bottom", "right-bottom", "left-top", or "right-top"

Cino
07-03-2008, 11:33 PM
Sorry ddadmin, ive some problem with english :(

The problem is that this script (http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm)doesn't work correctly and I don't understand the reason...

When i click on the link, it doesn't open the popup but this address:

<p>Demo #1: <a href="http://www.dynamicdrive.com" id="searchlink" rel="subcontent">Search DD</a></p>

Ive tried this way:

<p>Demo #1: <a href="#" id="searchlink" rel="subcontent">Search DD</a></p>

but the problem remains and the link doesn't work...

With the previous script (this: http://www.dynamicdrive.com/forums/showpost.php?p=49208&postcount=6) it was ok.

Im sure this is a small problem, but Im not able to solve it.

jscheuer1
07-04-2008, 06:36 AM
Please post a link to the page on your site that contains the problematic code so we can check it out.

Cino
07-05-2008, 12:21 AM
Please post a link to the page on your site that contains the problematic code so we can check it out.

For the moment i work in local, so ive update a test page here:

http://www.clanlasicilia.altervista.org/pag.html

Here's the script:

http://www.clanlasicilia.altervista.org/dropdowncontent.js

If u click on both links, the script doesn't show any popup. What's the error?

jscheuer1
07-05-2008, 01:24 AM
You left out the initialization (from the demo - goes right before the closing </body> tag):



<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:

dropdowncontent.init("searchlink", "right-bottom", 500, "mouseover")
dropdowncontent.init("contentlink", "left-top", 300, "click")

</script>

Your first test would init on just:


<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:

dropdowncontent.init("searchlink", "right-bottom", 500, "mouseover")


</script>

But your second test uses the same id as the first test, so some browsers will give up and not init either. Go back to the demo page and follow the instructions for Step 1 and Step 2 exactly as written.

Once you do that, it will work. Then you can begin customizing it.

Cino
07-05-2008, 03:51 AM
I'm a true idiot! I hadn't seen that part of code...

Thank you very much jscheuer1 and excuse me for my stupid distraction. :rolleyes:

Ive a last question (just a little curiosity): is it possible to move this part in the file .js in some way?


dropdowncontent.init("searchlink", "right-bottom", 500, "mouseover")
dropdowncontent.init("contentlink", "left-top", 300, "click")


Thanks again for the support!

jscheuer1
07-05-2008, 04:19 AM
Yes, but it would require using the onload event*. If your page has another script or scripts that already use the onload event, that can get a little complicated, but can be worked out. If this is the only script on your page, or the only script on your page that would be using the onload event, it is comparatively simple. You could add at the very end of the dropdowncontent.js file:


window.onload = function(){
dropdowncontent.init("searchlink", "right-bottom", 500, "mouseover");
dropdowncontent.init("contentlink", "left-top", 300, "click");
};

If you have a problem with doing it this way, (once again) a link to the page would be required to diagnose that.


* The onload event can take various forms. So if you have another script or scripts on the page, and are unfamiliar with the concept of the onload event, it may already be in use without your being aware of it. The worst that can happen in such a case is that one or the other of the scripts or script attempting to use the onload event would stop working.

Cino
07-05-2008, 07:41 AM
Great! It works perfectly!

Sorry, I still have some question. Unfortunately I don’t know javascript and it’s a totally new language for me.

My question: how can I replace the function “hide div on mouseout” with “hide div on click everywhere in the page”? I would want that the window was closed when users click somewhere on the page. The problem is that if I move the popup from the link , e.g.


subobj.style.top=this.getposOffset(anchorobj, "offsetTop")+verticaloffset+10+"px"

users will not be able to use the popup because it disappears when they will remove the mouse cursor from the anchor link.

jscheuer1
07-05-2008, 02:43 PM
There are various ways to deal with that problem. I think the best would be to simply increase the amount of time it takes the drop down to disappear:


hidedivmouseout: [true, 1000], //Set hiding behavior within Drop Down DIV itself: [hide_div_onmouseover?, miliseconds_before_hiding]

That will give people a full second to move over the drop down before it disappears.

Cino
07-05-2008, 11:00 PM
Thanks jscheuer1. I've already tried that way but it doesn't work. The script closes the window every time the mouse goes outside the content, regardless of the time. So, the window must be pasted to the anchor link to work.
I've also tried so: hidedivmouseout: false, , but anything change...

Here you can see the modified script in action: http://www.clanlasicilia.altervista.org/page.html

My only changes are:


hidedivmouseout: [true, 1000],

and


subobj.style.top=this.getposOffset(anchorobj, "offsetTop")+verticaloffset+10+"px"

Thanks for your precious help jscheuer1 :)

jscheuer1
07-06-2008, 06:33 AM
I think I have it worked out. Use this version of the script (addition highlighted):


//Drop Down/ Overlapping Content: http://www.dynamicdrive.com
//**Updated: Dec 19th, 07': Added ability to dynamically populate a Drop Down content using an external file (Ajax feature)
//**Updated: Feb 29th, 08':
//1) Added ability to reveal drop down content via "click" of anchor link (instead of default "mouseover")
//2) Added ability to disable drop down content from auto hiding when mouse rolls out of it
//3) Added hidediv(id) public function to directly hide drop down div dynamically

var dropdowncontent={
disableanchorlink: true, //when user clicks on anchor link, should link itself be disabled (always true if "revealbehavior" above set to "click")
hidedivmouseout: [true, 1000], //Set hiding behavior within Drop Down DIV itself: [hide_div_onmouseover?, miliseconds_before_hiding]
ajaxloadingmsg: "Loading content. Please wait...", //HTML to show while ajax page is being feched, if applicable
ajaxbustcache: true, //Bust cache when fetching Ajax pages?

getposOffset:function(what, offsettype){
return (what.offsetParent)? what[offsettype]+this.getposOffset(what.offsetParent, offsettype) : what[offsettype]
},

isContained:function(m, e){
var e=window.event || e
var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
if (c==m)
return true
else
return false
},

show:function(anchorobj, subobj, e){
if (subobj.style.visibility == 'visible'){
if (typeof window["hidetimer_"+subobj.id]!="undefined") //clear timer that hides drop down box?
clearTimeout(window["hidetimer_"+subobj.id])
return;
}
if (!this.isContained(anchorobj, e)){
var e=window.event || e
if (e.type=="click" && subobj.style.visibility=="visible"){
subobj.style.visibility="hidden"
return
}
var horizontaloffset=(subobj.dropposition[0]=="left")? -(subobj.offsetWidth-anchorobj.offsetWidth) : 0 //calculate user added horizontal offset
var verticaloffset=(subobj.dropposition[1]=="top")? -subobj.offsetHeight : anchorobj.offsetHeight //calculate user added vertical offset
subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + horizontaloffset + "px"
subobj.style.top=this.getposOffset(anchorobj, "offsetTop")+verticaloffset+10+"px"
subobj.style.clip=(subobj.dropposition[1]=="top")? "rect(auto auto auto 0)" : "rect(0 auto 0 0)" //hide drop down box initially via clipping
subobj.style.visibility="visible"
subobj.startTime=new Date().getTime()
subobj.contentheight=parseInt(subobj.offsetHeight)
if (typeof window["hidetimer_"+subobj.id]!="undefined") //clear timer that hides drop down box?
clearTimeout(window["hidetimer_"+subobj.id])
this.slideengine(subobj, (subobj.dropposition[1]=="top")? "up" : "down")
}
},

curveincrement:function(percent){
return (1-Math.cos(percent*Math.PI)) / 2 //return cos curve based value from a percentage input
},

slideengine:function(obj, direction){
var elapsed=new Date().getTime()-obj.startTime //get time animation has run
if (elapsed<obj.glidetime){ //if time run is less than specified length
var distancepercent=(direction=="down")? this.curveincrement(elapsed/obj.glidetime) : 1-this.curveincrement(elapsed/obj.glidetime)
var currentclip=(distancepercent*obj.contentheight)+"px"
obj.style.clip=(direction=="down")? "rect(0 auto "+currentclip+" 0)" : "rect("+currentclip+" auto auto 0)"
window["glidetimer_"+obj.id]=setTimeout(function(){dropdowncontent.slideengine(obj, direction)}, 10)
}
else{ //if animation finished
obj.style.clip="rect(0 auto auto 0)"
}
},

hide:function(activeobj, subobj, e){
if (!dropdowncontent.isContained(activeobj, e)){
window["hidetimer_"+subobj.id]=setTimeout(function(){
subobj.style.visibility="hidden"
subobj.style.left=subobj.style.top=0
clearTimeout(window["glidetimer_"+subobj.id])
}, dropdowncontent.hidedivmouseout[1])
}
},

hidediv:function(subobjid){
document.getElementById(subobjid).style.visibility="hidden"
},

ajaxconnect:function(pageurl, divId){
var page_request = false
var bustcacheparameter=""
if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE6 or below
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
document.getElementById(divId).innerHTML=this.ajaxloadingmsg //Display "fetching page message"
page_request.onreadystatechange=function(){dropdowncontent.loadpage(page_request, divId)}
if (this.ajaxbustcache) //if bust caching of external page
bustcacheparameter=(pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', pageurl+bustcacheparameter, true)
page_request.send(null)
},

loadpage:function(page_request, divId){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(divId).innerHTML=page_request.responseText
}
},

init:function(anchorid, pos, glidetime, revealbehavior){
var anchorobj=document.getElementById(anchorid)
var subobj=document.getElementById(anchorobj.getAttribute("rel"))
var subobjsource=anchorobj.getAttribute("rev")
if (subobjsource!=null && subobjsource!="")
this.ajaxconnect(subobjsource, anchorobj.getAttribute("rel"))
subobj.dropposition=pos.split("-")
subobj.glidetime=glidetime || 1000
subobj.style.left=subobj.style.top=0
if (typeof revealbehavior=="undefined" || revealbehavior=="mouseover"){
anchorobj.onmouseover=function(e){dropdowncontent.show(this, subobj, e)}
anchorobj.onmouseout=function(e){dropdowncontent.hide(subobj, subobj, e)}
if (this.disableanchorlink) anchorobj.onclick=function(){return false}
}
else
anchorobj.onclick=function(e){dropdowncontent.show(this, subobj, e); return false}
if (this.hidedivmouseout[0]==true) //hide drop down DIV when mouse rolls out of it?
subobj.onmouseout=function(e){dropdowncontent.hide(this, subobj, e)}
}
}

You can still add the onload event at the end as we discussed before, or leave the small initialization script on the page as you have on your test page, and as is instructed on the DD demo page for this script. The choice for that is still up to you.

However, even with the modification I made, you also need to hard code this event to the drop down content division in the page's markup (highlighted):


<DIV id="subcontent" onmouseover="clearTimeout(window['hidetimer_'+this.id]);" style="position:absolute; visibility: hidden; border: 9px solid orange; background-color: white; width: 300px; padding: 8px;">

Demo:

http://home.comcast.net/~jscheuer1/side/overlap_content_h.htm

Cino
07-07-2008, 03:52 PM
I really thank you jscheuer1! Now it’s perfect! :D