PDA

View Full Version : Problem with always on top content script



mcgyve
06-17-2010, 09:43 PM
1) Script Title: Always on top content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/topcontent.htm

3) Describe problem: I can't get the drag and drop aspect or the toggle on/off button to work.

Hello, I'm very new to using javascript but have managed to get a few things working now. I've used the above script for keeping content in one place but I don't know how to activate the drag & drop functionality. Also the toggle button doesn't appear (i've uploaded the button to the same folder as the page).

I've basically got the script as straight from the link above but with my own content.

Any help with this would be much appreciated. Thanks
Paul


Code is as follows:-




<html>

<head>

<!--[if IE]>

<!--
Always On Top Content Script-
Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
-->

<style>
<!--
.drag{position:relative;cursor:hand
}
#scontentmain{
position:absolute;
width:150px;
}
#scontentbar{
cursor:hand;
position:absolute;
background-color:green;
height:15;
width:100%;
top:0;
}
#scontentsub{
position:absolute;
width:100%;
top:15;
background-color:lightyellow;
border:2px solid green;
padding:1.5px;
}
-->
</style>

<script language="JavaScript1.2">
<!--
//Drag and drop engine for static content
// Dynamic Drive (www.dynamicdrive.com)

var dragapproved=false
var zcor,xcor,ycor

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function movescontentmain(){
if (event.button==1&&dragapproved){
zcor.style.pixelLeft=tempvar1+event.clientX-xcor
zcor.style.pixelTop=tempvar2+event.clientY-ycor
leftpos=document.all.scontentmain.style.pixelLeft-ietruebody().scrollLeft
toppos=document.all.scontentmain.style.pixelTop-ietruebody().scrollTop
return false
}
}
function dragscontentmain(){
if (!document.all)
return
if (event.srcElement.id=="scontentbar"){
dragapproved=true
zcor=scontentmain
tempvar1=zcor.style.pixelLeft
tempvar2=zcor.style.pixelTop
xcor=event.clientX
ycor=event.clientY
document.onmousemove=movescontentmain
}
}
document.onmousedown=dragscontentmain
document.onmouseup=new Function("dragapproved=false")
//-->
</script>

<![endif]-->

</head>

<body>
<!--[if IE]>
<div id="scontentmain">
<div id="scontentbar" >
<img align="right" src="barbutton.gif" onClick="onoffdisplay()">
</div>
<div id="scontentsub">


<p align="center"><br>
<a href="http://wsabstract.com"><img src="http://wsabstract.com/wabutton5.gif" border="1"
alt="Click here for Website Abstraction"></a><br>
<font face="Arial"><small><small>While we didn't invent JavaScript, we sure as hell
created the best site on IT. <a href="http://wsabstract.com">Website Abstraction</a> is
considered by many online as the definitive JavaScript technology site on the
internet. Online since December, 1997, <a href="http://wsabstract.com">Website Abstraction</a> features over 300+ original scripts, 100+
tutorials on JavaScript programming and web design, and a highly active programming forum
where developers from all over meet and share ideas on their latest projects. Click <b><a href="http://wsabstract.com">HERE</a></b>
for JavaScript!</small></small></font></p>


</div>
</div>
</div>

<script language="JavaScript1.2">

/*
Always On Top Content Script-
Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

//configure the below two variables to determine where the static content will initially be positioned when the document loads, in terms of X and Y cooridinates, respectively

var w=ietruebody().clientWidth-195
var h=50


////Do not edit pass this line///////////
w+=ietruebody().scrollLeft
h+=ietruebody().scrollTop

var leftpos=w
var toppos=h
scontentmain.style.left=w
scontentmain.style.top=h

function onoffdisplay(){
if (scontentsub.style.display=='')
scontentsub.style.display='none'
else
scontentsub.style.display=''
}

function staticize(){
w2=ietruebody().scrollLeft+leftpos
h2=ietruebody().scrollTop+toppos
scontentmain.style.left=w2
scontentmain.style.top=h2
}
window.onscroll=staticize

</script>
<![endif]-->
</body>
</html>