Problem with javascript - I am a newbie (Resolved)

hdiaz36 · Post by **hdiaz36** » Thu Feb 22, 2007 12:41 pm

Hello everyone!

First of all let me say that I am no computer/programming expert.. so maybe this is a simple problem with a simple answer (I hope so) Secondly let me say thank you to everyone at Serendipity etc - I really like the software from what I have seen so far.
I'm having a hard time getting something to work. I picked up the code from dynamicdrive.com Anyway, it's supposed to be a "link floatie script"
Anyway, for some reason it doesn't seem to work within Serendipity. (I used Firefox and IE 6 to test)

I'll post exactly what I added to "entry body" (not sure of the exact name)
Here it is: (I know it's long.. sorry)

<html>
<head>
<style type="text/css">

#dhtmlfloatie{
position: absolute;
left: 0;
left: -900px;
filter:alpha(opacity=0);
-moz-opacity:0;
border: 2px solid black;
padding: 5px;
z-index: 100;
}

</style>

<script type="text/javascript">

/***********************************************
* Link Floatie script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var floattext=new Array()
floattext[0]='- <a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a><br>- <a href="http://www.javascriptkit.com/javaindex. ... JavaScript Tutorials</a><br>- <a href="http://www.javascriptkit.com/dhtmltutor ... ml">DHTML/ CSS Tutorials</a><br>- <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a><br><div align="right"><a href="javascript:hidefloatie()">Hide Box</a></div>'
floattext[1]='Some other floatie text'

var floatiewidth="250px" //default width of floatie in px
var floatieheight="60px" //default height of floatie in px. Set to "" to let floatie content dictate height.
var floatiebgcolor="lightyellow" //default bgcolor of floatie
var fadespeed=70 //speed of fade (5 or above). Smaller=faster.

var baseopacity=0
function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",fadespeed)
}

function instantset(degree){
cleartimer()
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

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

function paramexists(what){
return(typeof what!="undefined" && what!="")
}

function showfloatie(thetext, e, optbgColor, optWidth, optHeight){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var floatobj=document.getElementById("dhtmlfloatie")
floatobj.style.left="-900px"
floatobj.style.display="block"
floatobj.style.backgroundColor=paramexists(optbgColor)? optbgColor : floatiebgcolor
floatobj.style.width=paramexists(optWidth)? optWidth+"px" : floatiewidth
floatobj.style.height=paramexists(optHeight)? optHeight+"px" : floatieheight!=""? floatieheight : ""
floatobj.innerHTML=thetext
var floatWidth=floatobj.offsetWidth>0? floatobj.offsetWidth : floatobj.style.width
var floatHeight=floatobj.offsetHeight>0? floatobj.offsetHeight : floatobj.style.width
var winWidth=document.all&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winHeight=document.all&&!window.opera? ietruebody().clientHeight : window.innerHeight
e=window.event? window.event : e
floatobj.style.left=dsocx+winWidth-floatWidth-5+"px"
if (e.clientX>winWidth-floatWidth && e.clientY+20>winHeight-floatHeight)
floatobj.style.top=dsocy+5+"px"
else
floatobj.style.top=dsocy+winHeight-floatHeight-5+"px"
slowhigh(floatobj)
}

function hidefloatie(){
var floatobj=document.getElementById("dhtmlfloatie")
floatobj.style.display="none"
}

</script>
</head>
<body>
There are two <div id="dhtmlfloatie" ></div><a href="#" onMouseover="showfloatie('test1', event)" onMouseout="hidefloatie()">1test</a>
in a park; one of a <div id="dhtmlfloatie" ></div>

<div id="dhtmlfloatie" ></div> a

<a href="#" onMouseover="showfloatie('开始', event)" onMouseout="hidefloatie()">ensues</a>

</body>
</html>

Ok, well anyway it doesn't work for me. Any help that anyone can offer me will be greatly appreciated. If you need more information, please let me know.
Thanks!

Post by **garvinhicking** » Thu Feb 22, 2007 1:08 pm

Hi!

The problem can best be seen if you view your entry on the blog. You'll see that you will have fully invalid HTML, because you have the <html> tag twice etc.

The entry body of a serendipity entry can only contain HTML markup, but not a full HTML page - because an entry is always embedded in such.

So you need to add the javascript stuff etc. all to the 'index.tpl' file of the template you are currently using. Then only paste the entry code :

Code: Select all

(There are two <div id="dhtmlfloatie" ></div><a href="#" onMouseover="showfloatie('test1', event)" onMouseout="hidefloatie()">1test</a>
in a park; one of a <div id="dhtmlfloatie" ></div>

<div id="dhtmlfloatie" ></div> a 

<a href="#" onMouseover="showfloatie('开始', event)" onMouseout="hidefloatie()">ensues</a>

as your blog entry, and it should work.

Instead of editing your templates index.tpl file, you could also try to use a serendipity event plugin "HTML Page Nugget" (see spartacus / plugin repository) whic allows you to put stuff into the <head> section of the final blog page.

HTH,
Garvin

hdiaz36 · Post by **hdiaz36** » Thu Feb 22, 2007 2:44 pm

Thank you very much for your help.
I decided to try to install the plugin you suggested - this seemed to go fine.
The only problem is that I don't know how to use it. I configured my plugins to include it.
I'm not sure what is the next step. I proceeded to add a new entry which is where I assumed the option to add code to the head would be available, but I don't see anything there.
Sorry to ask so many questions, but I'm guessing that by now it must be fairly obvious to anyone reading this that I am a beginner at this.

Once again any help is appreciated.
Thanks!

Post by **garvinhicking** » Thu Feb 22, 2007 2:50 pm

Hi!

No problem.

Onec you have installed the plugin, you can configure it in the "Configure Plugins" serendipity admin panel. Click on its name to see the options.

There you have a large textarea where you can paste the javascript into. This block, to be precise:

Code: Select all

<style type="text/css">

#dhtmlfloatie{
position: absolute;
left: 0;
left: -900px;
filter:alpha(opacity=0);
-moz-opacity:0;
border: 2px solid black;
padding: 5px;
z-index: 100;
}

</style>

<script type="text/javascript">

/***********************************************
* Link Floatie script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var floattext=new Array()
floattext[0]='- <a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a><br>- <a href="http://www.javascriptkit.com/javaindex.shtml">JavaScript Tutorials</a><br>- <a href="http://www.javascriptkit.com/dhtmltutors/index.shtml">DHTML/ CSS Tutorials</a><br>- <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a><br><div align="right"><a href="javascript:hidefloatie()">Hide Box</a></div>'
floattext[1]='Some other floatie text'

var floatiewidth="250px" //default width of floatie in px
var floatieheight="60px" //default height of floatie in px. Set to "" to let floatie content dictate height.
var floatiebgcolor="lightyellow" //default bgcolor of floatie
var fadespeed=70 //speed of fade (5 or above). Smaller=faster.

var baseopacity=0
function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",fadespeed)
}

function instantset(degree){
cleartimer()
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

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

function paramexists(what){
return(typeof what!="undefined" && what!="")
}

function showfloatie(thetext, e, optbgColor, optWidth, optHeight){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var floatobj=document.getElementById("dhtmlfloatie")
floatobj.style.left="-900px"
floatobj.style.display="block"
floatobj.style.backgroundColor=paramexists(optbgColor)? optbgColor : floatiebgcolor
floatobj.style.width=paramexists(optWidth)? optWidth+"px" : floatiewidth
floatobj.style.height=paramexists(optHeight)? optHeight+"px" : floatieheight!=""? floatieheight : ""
floatobj.innerHTML=thetext
var floatWidth=floatobj.offsetWidth>0? floatobj.offsetWidth : floatobj.style.width
var floatHeight=floatobj.offsetHeight>0? floatobj.offsetHeight : floatobj.style.width
var winWidth=document.all&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winHeight=document.all&&!window.opera? ietruebody().clientHeight : window.innerHeight
e=window.event? window.event : e
floatobj.style.left=dsocx+winWidth-floatWidth-5+"px"
if (e.clientX>winWidth-floatWidth && e.clientY+20>winHeight-floatHeight)
floatobj.style.top=dsocy+5+"px"
else
floatobj.style.top=dsocy+winHeight-floatHeight-5+"px"
slowhigh(floatobj)
}

function hidefloatie(){
var floatobj=document.getElementById("dhtmlfloatie")
floatobj.style.display="none"
}

</script>

Once you added this, this code will apear on all of your blog pages. Then just create an entry with the code I pasted earlier, and it should work.

If not, please give us the URL to the entry you created which does not work, then we can check some things.

Best regards,
Garvin

hdiaz36 · Post by **hdiaz36** » Thu Feb 22, 2007 3:12 pm

Wow!
Thanks.. it seems to be working fine for me now.
I still need to test a few things. I'll come back here once that is done to let you know how it worked out.

hdiaz36 · Post by **hdiaz36** » Thu Feb 22, 2007 3:33 pm

Thank you, thank you, thank you!
Ok, sorry I have another unrelated question.
I want to keep the "Powered by serendipity" logo on my blog, but I want it to open a link in a new window instead of taking people away from my blog.
Is there an easy way to do this?

Post by **garvinhicking** » Thu Feb 22, 2007 3:37 pm

Hi!

You could remove the "Powered by" plugin and then create your own "HTML nugget" sidebar plugin in which you can enter any HTML code to link to serendipity?

HTH,
Garvin

Problem with javascript - I am a newbie (Resolved)

Problem with javascript - I am a newbie (Resolved)

Re: Problem with javascript - I am a newbie