SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can Somebody PLEASE Get This Script to Work With XHTML?

    I'm using the script found at the page below. The problem is I've converted my entire site to XHTML only to find the Tooltip script I'm using is having problems due to the XHTML doctype. I have a page that scrolls three screen sizes and I cannot split it up into different pages or move the tooltip links closer together.

    With HTML doctype the tooltips popup right next to the link. With XHTML doctype they popup at the very top of the page so you can't see the tooltips when you've scrolled down the page.

    Can somebody PLEASE take a look at the script found at this page and see if you can get it to work so it appears next to the link in XHTML? I would REALLY appreciate it. This dang thing has wasted hours of my time and I cannot figure it out!

    http://www.graphicsnstuff.com/archiv...rnatealts.html

    -or-

    http://www.guistuff.com/gen.shtml?tooltip (login required)
    Last edited by JohnSaunders; Mar 18, 2003 at 22:22.
    John Saunders

  2. #2
    SitePoint Enthusiast RogueJedi's Avatar
    Join Date
    Oct 2001
    Location
    Texas
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You may need to enclose your script in a CDATA block to prevent the XML parser from reading special characters in your script as XHTML markup (i.e. "<",">","&",";", etc.):

    Code:
    <script type="text/javascript">
    <!--[CDATA[ 
     
    //]]-->
    </script>
    Rob Nolan
    Do or do not, there is no try.

  3. #3
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    RogueJedi,

    I tried adding the CDATA block but unfortunately it didn't fix the problem.

    Do you have any other ideas?
    John Saunders

  4. #4
    SitePoint Enthusiast RogueJedi's Avatar
    Join Date
    Oct 2001
    Location
    Texas
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I copied the script off that page in the first link you gave and ran it in Homesite5. I had to make a number of changes to get it to work, mainly correcting unterminated strings (a result of using single quotes and double quotes in reverse), and clearing up an elusive syntax error that turned out to be a missiog "." in a DOM call. The script works now. I even made an addition that clears table from tool tip in the deActivate function because I descovered that if you kept mousing over the link it would add table after table to the tooltip. The deActivate function now takes the same layerName parameter as the EnterContent function. I also changed the text color of the tooltip because it was the same color as the background.

    I suggest you try to be consistent in your coding style. Don't use two different naming conventions. For example, if your going to use the convention of captilaizing all words in a complex variable/function name, then use that convention for all of them. Don't switch back and forth with the convention of using lowercase for the firts word then uppercase for all other words in the name. Pick one and stick with it. Also, as I mentioned above, you used your single and double quotes in reverse. It's easier to spot errors if you put use double quotes for your main strings and single quotes for "inner" strings. Also, use spaces liberally. It really doesn't make that big a difference in download times, plus it can make debugging much, much easier. For example:

    Code:
    document.write("<table width='" + nWidth + "'>")
    rather than

    Code:
    document.write('<table width="'+100+'">')
    When I reversed the quotes and added spaces in your script I found 3 places where you had not terminated a string.

    One more thing, since you are trying to use XHTML, drop the use of the font tags in your script and make sure you use the type="text/javascript" parameter of the script tag.

    These are just suggestions to try to be helpful, please don't take it the wrong way.

    Here's the working script:

    Code:
    <style type="text/css"><!--
    .tooltiptitle{color: #000000; text-decoration: none; cursor: default; font-family: arial; font-weight: bold; font-size: 10pt}
    .tooltipcontent{color: #ffffff; text-decoration: none; cursor: default; font-family: arial; font-size: 8pt}
    #ToolTip{position:absolute; width: 100px; top: 0px; left: 0px; z-index:4; visibility:hidden;}
    -->
    </style>
     
    <script type="text/javascript">
    <!--[CDATA]
    var ie = document.all ? 1 : 0;
    var ns = document.layers ? 1 : 0;
    var ContentInfo = "";
    if(ns) {
    	doc = "document"; 
    	sty = "";
    }
    if(ie) {
    	doc = "document.all"; 
    	sty = "style";
    } 
    var initialize = 0;
    var Ex, Ey, topColor, subColor, ContentInfo;
    if(ie) {
    	Ex = "event.x";
    	Ey = "event.y";
    	
    	topColor = "#FFFFFF"; 
    	subColor = "#000000";
    }
    if(ns) { 
    	Ex = "e.pageX"; 
    	Ey = "e.pageY"; 
    	window.captureEvents(Event.MOUSEMOVE); 
    	window.onmousemove=overhere();
    	
    	topColor = "#FFFFFF";
    	subColor = "#000000"; 
    }
    function MoveToolTip(layerName, FromTop, FromLeft, e){ 
    	if(ie) {
    		eval(doc + "." + layerName + "." + sty + "." + "top = " + (eval(FromTop) + document.body.scrollTop))
    	}
    	if(ns) {
    		eval(doc + "." + layerName + "." + sty + "." + "top = " + eval(FromTop))
    	} 
    	eval(doc + "." + layerName + "." + sty + "." + "left = " + (eval(FromLeft) + 15)) 
    }
    	
    function ReplaceContent(layerName){
    	if(ie) {
    		document.all[layerName].innerHTML = ContentInfo
    	}
    	if(ns) {
    		with(document.layers[layerName].document) { 
    			open(); 
    			write(ContentInfo); 
    			close(); 
    		} 
    	} 
    }
    function Activate() {
    	initialize=1;
    } 
    function deActivate(layerName) {
    	initialize=0;
    	ContentInfo = "";
    	ReplaceContent(layerName);
    } 
    function overhere(e){ 
    	if(initialize) { 
    		MoveToolTip("ToolTip", Ey, Ex, e);
    		eval(doc + "." + "ToolTip" + "." + sty + "." + "visibility = 'visible'");
    	} 
    	else { 
    		MoveToolTip("ToolTip", 0, 0);
    		eval(doc + "." + "ToolTip" + "." + sty + "." + "visibility = 'hidden'"); 
    	}
    }
    function EnterContent(layerName, TTitle, TContent){
    	ContentInfo += "<table border='0' width='150' cellspacing='0' cellpadding='0'>";
    	ContentInfo += "<tr><td width='100%' bgcolor='#000000'>";
    	
    	ContentInfo += "<table border='0' width='100%' cellspacing='1' cellpadding='0'>";
    	ContentInfo += "<tr><td width='100%' bgcolor="+topColor+">";
    	
    	ContentInfo += "<table border='0' width='90%' cellspacing='0' cellpadding='0' align='center'>";
    	ContentInfo += "<tr><td width='100%'>";
    	
    	ContentInfo += "<font class='tooltiptitle'> "+TTitle+"</font>";
    	
    	ContentInfo += "</td></tr>";
    	ContentInfo += "</table>";
    	ContentInfo += "</td></tr>"; 
    	ContentInfo += "<tr><td width='100%' bgcolor="+subColor+">";
    	
    	ContentInfo += "<table border='0' width='90%' cellpadding='0' cellspacing='1' align='center'>";
    	
    	ContentInfo += "<tr><td width='100%'>";
    	ContentInfo += "<font class='tooltipcontent'>"+TContent+"</font>";
    	ContentInfo += "</td></tr>";
    	ContentInfo += "</table>";
    	
    	ContentInfo += "</td></tr>";
    	ContentInfo += "</table>";
    	ContentInfo += "</td></tr>";
    	ContentInfo += "</table>"; 
    	
    	ReplaceContent(layerName);
    }
    //]]-->
    </script>
    Rob Nolan
    Do or do not, there is no try.

  5. #5
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rob,

    Thanks a lot for looking at the script and fixing the errors. I tried it out and for some reason I keep getting an error that says "Description: 'document.all[...]' is null or not an object." on line 65, which is " document.all[layerName].innerHTML = ContentInfo". It pops up whenever I move my mouse anywhere on the page. Do you know how to fix this?

    Also, I was able to get the menus to pop up even though the errors were there and they were still showing up at the top of the page, so I couldn't see the menus when mousing over links towards the bottom of the page. Do you know how to fix it so it will just show the tooltips next to the actual link?

    I really appreciate your help. Thanks a lot.
    John Saunders

  6. #6
    Froot r gewd SubKamran's Avatar
    Join Date
    May 2002
    Location
    North Star State
    Posts
    597
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why don't you just use the tags for tooltips? <a> <abbr> <defn> and <acronym>?
    "Sometimes little is more."
    Kamran A
    Web Dev/Designer
    Keyboard not found: Please Press F1 to Continue

  7. #7
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I considered it but I had hoped to get this working with XHTML. I spent many hours with setting it up a while back, and a couple of hours trying to get it to work in XHTML.

    If anybody has any suggestions as to getting the popups to display right next to the link in XHTML, I would really appreciate it.
    John Saunders


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •