The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> HEAD TAG, Conflicting scripts
springwood
post Oct 25 2007, 11:22 AM
Post #1





Group: Members
Posts: 3
Joined: 25-October 07
Member No.: 4,149
Hello.

I've found some code on the net (see below) which needs to be placed in the head tag. The first bit of code makes my image tremble. The second bit of code makes an image appear on the mouseover event. Both bits of code work independently but not when combined. I commented out

window.onload=init //in first bit of code

and

window.onload = initTip; //in second bit of code


and tried this code in the body tag which failed. <body onload="init();initTip()">

Could someone explain how to fix this?

Thank you.

Steve



<style>
.jc{
position:relative;
}
</style>


<script language="JavaScript1.2">

//Trembling message script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com

var ns6=document.getElementById&&!document.all
var ie=document.all

var customcollect=new Array()
var i=0

function jiggleit(num){
if ((!document.all&&!document.getElementById)) return;
customcollect[num].style.left=(parseInt(customcollect[num].style.left)==-1)? customcollect[num].style.left=1 : customcollect[num].style.left=-1
}

function init(){
if (ie){
while (eval("document.all.jiggle"+i)!=null){
customcollect[i]= eval("document.all.jiggle"+i)
i++
}
}
else if (ns6){
while (document.getElementById("jiggle"+i)!=null){
customcollect[i]= document.getElementById("jiggle"+i)
i++
}
}

if (customcollect.length==1)
setInterval("jiggleit(0)",80)
else if (customcollect.length>1)
for (y=0;y<customcollect.length;y++){
var tempvariable='setInterval("jiggleit('+y+')",'+'100)'
eval(tempvariable)
}
}

window.onload=init

</script>



<script type="text/javascript">

/***********************************************
* Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
* Copyright 2002-2007 by Sharon Paine
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

/* IMPORTANT: Put script after tooltip div or
put tooltip div just before </BODY>. */

var dom = (document.getElementById) ? true : false;
var ns5 = (!document.all && dom || window.opera) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;

var origWidth, origHeight;

// avoid error of passing event object in older browsers
if (nodyn) { event = "nope" }

/////////////////////// CUSTOMIZE HERE ////////////////////
// settings for tooltip
// Do you want tip to move when mouse moves over link?
var tipFollowMouse= true;
// Be sure to set tipWidth wide enough for widest image
var tipWidth= 160;
var offX= 20; // how far from mouse to show tip
var offY= 12;
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "8pt";
// set default text color and background color for tooltip here
// individual tooltips can have their own (set in messages arrays)
// but don't have to
var tipFontColor= "#000000";
var tipBgColor= "#DDECFF";
var tipBorderColor= "#000080";
var tipBorderWidth= 3;
var tipBorderStyle= "ridge";
var tipPadding= 4;

// tooltip content goes here (image, description, optional bgColor, optional textcolor)
var messages = new Array();
// multi-dimensional arrays containing:
// image and text for tooltip
// optional: bgColor and color to be sent to tooltip
messages[0] = new Array('100_2288 (600 x 400).jpg','Here are my beehives',"#FFFFFF");
messages[1] = new Array('100_2296(600x400).gif','Here are my beehives.',"#DDECFF");
messages[2] = new Array('test.gif','Test description','black','white');

//////////////////// END OF CUSTOMIZATION AREA ///////////////////

// preload images that are to appear in tooltip
// from arrays above
if (document.images) {
var theImgs = new Array();
for (var i=0; i<messages.length; i++) {
theImgs[i] = new Image();
theImgs[i].src = messages[i][0];
}
}

// to layout image and text, 2-row table, image centered in top cell
// these go in var tip in doTooltip function
// startStr goes before image, midStr goes between image and text
var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';
var midStr = '" border="0"></td></tr><tr><td valign="top">';
var endStr = '</td></tr></table>';

////////////////////////////////////////////////////////////
// initTip - initialization for tooltip.
// Global variables for tooltip.
// Set styles
// Set up mousemove capture if tipFollowMouse set true.
////////////////////////////////////////////////////////////
var tooltip, tipcss;
function initTip() {
if (nodyn) return;
tooltip = (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
tipcss = tooltip.style;
if (ie4||ie5||ns5) { // ns4 would lose all this on rewrites
tipcss.width = tipWidth+"px";
tipcss.fontFamily = tipFontFamily;
tipcss.fontSize = tipFontSize;
tipcss.color = tipFontColor;
tipcss.backgroundColor = tipBgColor;
tipcss.borderColor = tipBorderColor;
tipcss.borderWidth = tipBorderWidth+"px";
tipcss.padding = tipPadding+"px";
tipcss.borderStyle = tipBorderStyle;
}
if (tooltip&&tipFollowMouse) {
document.onmousemove = trackMouse;
}
}

window.onload = initTip;

/////////////////////////////////////////////////
// doTooltip function
// Assembles content for tooltip and writes
// it to tipDiv
/////////////////////////////////////////////////
var t1,t2; // for setTimeouts
var tipOn = false; // check if over tooltip link
function doTooltip(evt,num) {
if (!tooltip) return;
if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);
tipOn = true;
// set colors if included in messages array
if (messages[num][2]) var curBgColor = messages[num][2];
else curBgColor = tipBgColor;
if (messages[num][3]) var curFontColor = messages[num][3];
else curFontColor = tipFontColor;
if (ie4||ie5||ns5) {
var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
tipcss.backgroundColor = curBgColor;
tooltip.innerHTML = tip;
}
if (!tipFollowMouse) positionTip(evt);
else t1=setTimeout("tipcss.visibility='visible'",100);
}

var mouseX, mouseY;
function trackMouse(evt) {
standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
if (tipOn) positionTip(evt);
}

/////////////////////////////////////////////////////////////
// positionTip function
// If tipFollowMouse set false, so trackMouse function
// not being used, get position of mouseover event.
// Calculations use mouseover event position,
// offset amounts and tooltip width to position
// tooltip within window.
/////////////////////////////////////////////////////////////
function positionTip(evt) {
if (!tipFollowMouse) {
standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
}
// tooltip width and height
var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
// document area in view (subtract scrollbar width for ns)
var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
// check mouse position against tip and window dimensions
// and position the tooltip
if ((mouseX+offX+tpWd)>winWd)
tipcss.left = mouseX-(tpWd+offX)+"px";
else tipcss.left = mouseX+offX+"px";
if ((mouseY+offY+tpHt)>winHt)
tipcss.top = winHt-(tpHt+offY)+"px";
else tipcss.top = mouseY+offY+"px";
if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
}

function hideTip() {
if (!tooltip) return;
t2=setTimeout("tipcss.visibility='hidden'",100);
tipOn = false;
}

document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')

</script>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Oct 26 2007, 03:09 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Can you post the address (url) of a page that demonstrates the problem? That way, we can see the combined scripts and detect errors.
In the meantime, the Javascriptkit article Adding more than one JavaScript to a page might be of help.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
springwood
post Oct 26 2007, 05:18 AM
Post #3





Group: Members
Posts: 3
Joined: 25-October 07
Member No.: 4,149
Hi Frederiek
Thanks for replying. I've seen the link you sent. That's where I tried <body onload="init();initTip()"> which did not work. My website is not live yet. Can you spot the problem from the large code I sent? All I've done is placed the two scripts in the head tag.
Steve
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 26 2007, 07:24 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
The scripts seem conflict regarding the variable "i". Rename it to something else in one of the scripts and it will work in Opera and IE but not in Firefox.

Keep in mind moving text is distracting and annoying.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Oct 26 2007, 07:45 PM
Post #5


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Sounds like a great reason to leave JS disabled when visiting unknown sites...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
springwood
post Oct 27 2007, 04:37 AM
Post #6





Group: Members
Posts: 3
Joined: 25-October 07
Member No.: 4,149
QUOTE(Christian J @ Oct 27 2007, 01:24 AM) *

The scripts seem conflict regarding the variable "i". Rename it to something else in one of the scripts and it will work in Opera and IE but not in Firefox.

Keep in mind moving text is distracting and annoying.



Thank you Christian for checking this out for me. I'm just starting out on DHTML. If I can get my butterflies flapping and logos treambling and images appearing on mouseover, what a site it will be!

Thanks again for enabling me to continue.

Steve
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 02:43 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC