PDA

View Full Version : How to combine "Link Floatie script" & "Bullet Link script"?



noize
04-19-2005, 06:32 PM
Is it possible to combine
"Link Floatie script"
http://www.dynamicdrive.com/dynamicindex5/linkfloaties.htm

with
"Bullet Link script"
http://www.dynamicdrive.com/dynamicindex5/bulletlink.htm

for the same link?

It uses both onmouseover, and somehow only the "Bullet Link script" works
when i define class=ddbullet.

jscheuer1
04-19-2005, 08:00 PM
Well, it is a little more complicated than that. First of all these custom bullets can only show on links displayed in a floatie that is visible until dismissed. I've created a demo that combines the two scripts by modifying both of them slightly. What you need to know is that the class="ddbullet" declarations now belong in the floattext[x] numbered declarations. And the onmouseOver event has been added to for the second floatie. Here it is:
<html>
<title>Link Floatie script- w/ Custom Bullets</title>
<head>
<script type="text/javascript">

/***********************************************
* Bullet Link 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
***********************************************/

//Write out bullet image. Change "x.gif" below to desired image path:
var bulletimg='<img id="bullet" style="z-index:500;position:absolute; left: -300px" src="x.gif">'

var bulletoffX=2 //Set horizontal offset of bullet image from link's root. (ie: -2 or 5)
var bulletoffY=0 //Set vertical offset of bullet image from link's root. (ie: -2 or 5)

function caloffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function displaybullet(linkobj){
bulletobj.style.left=caloffset(linkobj, "left")-bulletobj.width-bulletoffX+"px"
bulletobj.style.top=caloffset(linkobj, "top")-bulletoffY+linkobj.offsetHeight/3+"px"
bulletobj.style.visibility="visible"
}

function modifylinks(){
bulletobj=document.all? document.all.bullet : document.getElementById("bullet")
for (i=0; i<document.links.length; i++){
if (document.links[i].className=="ddbullet"){
document.links[i].onmouseover=function(){displaybullet(this)}
document.links[i].onmouseout=function(){bulletobj.style.visibility="hidden"}
}
}
}

if (document.all || document.getElementById)
document.write(bulletimg)

</script>
<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 class="ddbullet" href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a><br>- <a class="ddbullet" href="http://www.javascriptkit.com/javaindex.shtml">JavaScript Tutorials</a><br>- <a class="ddbullet" href="http://www.javascriptkit.com/dhtmltutors/index.shtml">DHTML/ CSS Tutorials</a><br>- <a class="ddbullet" 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>
<div id="dhtmlfloatie" ></div>

<a href="#" onMouseover="showfloatie('Web coding and development forums. Get help on JavaScript, CGI, PHP, CSS, and more.', event)" onMouseout="hidefloatie()">Coding Forums</a> | <a href="#" onMouseover="showfloatie(floattext[0], event, '#D9FFD9', 250, 100);modifylinks()">JavaScript Kit</a>
</body>
</html>

noize
04-19-2005, 10:00 PM
I appreciate your help jscheuer1 very much !

The script you posted doesn't work for me.
class="ddbullet" now doesn't work at all.

The floaty does work.

What I want is to have the bullet appear next to the link i hover on,
and the floaty to appear as well.

jscheuer1
04-20-2005, 12:59 AM
Script works perfectly here. I copied it off the message above, pasted it as a new HTML document. Works in IE6 and NS7.2. It will show the floaties and when you mouse over a floatie, show the custom bullets on the floatie. If what you want is to have the custom bullets for the floatie link selectors (the text that when hovered, pops up the floatie), that will be another matter, I will have to get back to you on that.

jscheuer1
04-20-2005, 04:10 AM
Where exactly do you want the custom bullets to appear? On all the links? Just the ones that call the floatie? Anyways, I decided that the custom bullets could more easily be integrated as a rollover. This way they can be used wherever you want them. I'll attach the script with the now two images needed to accomplish the rollover which I have on all links.