SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    UK, Scotland
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I hope someone might be able to help me. I have used the Hierarchical Menus from www.dhtml.com the new version. In my web page design.

    I have been trying to include Mike's DHTML scroller from www.dynamicdrive.com my problem being is that when I add the scroller the menus dissapear.

    I would be really gratful for any help as I have tried placing the script in different parts of the code and still can't get it to work. Either one works and the other doesn't perhaps its something I am not aware of if anyone can offer advice please do.

    Here is a sample of the code:

    <HTML>
    <HEAD>
    <TITLE>Scottish Leadership Foundation - Home Page</TITLE>

    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    <!--

    if(window.event + "" == "undefined") event = null;
    function HM_f_PopUp(){return false};
    function HM_f_PopDown(){return false};
    popUp = HM_f_PopUp;
    popDown = HM_f_PopDown;

    //-->
    </SCRIPT>

    <SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
    <!--
    HM_PG_MenuWidth = 125;
    HM_PG_FontFamily = "arial,verdana,helvetica,sans-serif";
    HM_PG_FontSize = 8;
    HM_PG_FontBold = 0;
    HM_PG_FontItalic = 0;
    HM_PG_FontColor = "#FFFFFF";
    HM_PG_FontColorOver = "#FFFFFF";
    HM_PG_BGColor = "#336699";
    HM_PG_BGColorOver = "#6699CC";
    HM_PG_ItemPadding = 4;

    HM_PG_BorderWidth = 1;
    HM_PG_BorderColor = "#000000";
    HM_PG_BorderStyle = "solid";
    HM_PG_SeparatorSize = 1;
    HM_PG_SeparatorColor = "#000000";
    HM_PG_ImageSrc = "tri.gif";
    HM_PG_ImageSrcLeft = "tril.gif";

    HM_PG_ImageSize = 5;
    HM_PG_ImageHorizSpace = 0;
    HM_PG_ImageVertSpace = 2;

    HM_PG_KeepHilite = true;
    HM_PG_ClickStart = 0;
    HM_PG_ClickKill = false;
    HM_PG_ChildOverlap = 0;
    HM_PG_ChildOffset = 0;
    HM_PG_ChildPerCentOver = 0;
    HM_PG_TopSecondsVisible = 0;
    HM_PG_StatusDisplayBuild =0;
    HM_PG_StatusDisplayLink = 1;
    HM_PG_UponDisplay = null;
    HM_PG_UponHide = null;
    HM_PG_RightToLeft = false;

    //HM_PG_CreateTopOnly = 1;
    HM_PG_ShowLinkCursor = 1;

    //HM_a_TreesToBuild = [1];


    function hiLiteOn(imgName) {
    if (document.images) {
    hiLiteImage = eval(imgName + "HiLite.src");
    document [imgName].src = hiLiteImage
    }
    }

    function hiLiteOff(imgName) {
    if (document.images) {
    originalImage = eval(imgName + "White.src")
    document [imgName].src = originalImage
    }
    }

    function switchIcon(imgName) {
    if (document.images) {
    iconImage = eval(imgName + "Icon.src")
    document.Icon.src = iconImage
    }
    }

    if(document.images) {

    PBDHIcon = new Image(96, 229);
    PBDHIcon.src = "images/pbdhicon.gif"

    PeopleIcon = new Image(96, 229);
    PeopleIcon.src = "images/peplicon.gif";

    EmailIcon = new Image(96, 229);
    EmailIcon.src = "images/mailicon.gif";

    NewsIcon = new Image(96, 229);
    NewsIcon.src = "images/newsicon.gif";

    PortfolioIcon = new Image(96, 229);
    PortfolioIcon.src = "images/porticon.gif";

    cat1Icon = new Image(96, 229);
    cat1Icon.src = "images/cat1icon.gif";

    cat2Icon = new Image(96, 229);
    cat2Icon.src = "images/cat2icon.gif";

    cat3Icon = new Image(96, 229);
    cat3Icon.src = "images/cat3icon.gif";

    PeopleHiLite = new Image(96, 20);
    PeopleHiLite.src = "images/part2.jpg";
    PeopleWhite = new Image(96, 20);
    PeopleWhite.src = "images/part1.jpg";

    PortfolioHiLite = new Image(96, 20);
    PortfolioHiLite.src = "images/man2.jpg";
    PortfolioWhite = new Image(96, 20);
    PortfolioWhite.src = "images/man1.jpg";

    NewsHiLite = new Image(96, 20);
    NewsHiLite.src = "images/e2.jpg";
    NewsWhite = new Image(96, 20);
    NewsWhite.src = "images/e1.jpg";

    PBDHHiLite = new Image(96, 20);
    PBDHHiLite.src = "images/pbdhlite.gif";
    PBDHWhite = new Image(96, 20);
    PBDHWhite.src = "images/pbdh.gif";

    WebHiLite = new Image(96, 20);
    WebHiLite.src = "images/catlite.gif";
    WebWhite = new Image(96, 20);
    WebWhite.src = "images/cat.gif";

    EmailHiLite = new Image(96, 20);
    EmailHiLite.src = "images/maillite.gif";
    EmailWhite = new Image(96, 20);
    EmailWhite.src = "images/email.gif";

    HomeHiLite = new Image(96, 20);
    HomeHiLite.src = "images/homelite.gif";
    HomeWhite = new Image(96, 20);
    HomeWhite.src = "images/home.gif";

    JobsHiLite = new Image(96, 20);
    JobsHiLite.src = "images/jobs.gif";
    JobsWhite = new Image(96, 20);
    JobsWhite.src = "images/jobswite.gif";

    swenHiLite = new Image(96, 20);
    swenHiLite.src = "images/led2.jpg";
    swenWhite = new Image(96, 20);
    swenWhite.src = "images/led1.jpg";

    portHiLite = new Image(96, 20);
    portHiLite.src = "images/port2.jpg";
    portWhite = new Image(96, 20);
    portWhite.src = "images/port1.jpg";

    peopHiLite = new Image(96, 20);
    peopHiLite.src = "images/peop2.jpg";
    peopWhite = new Image(96, 20);
    peopWhite.src = "images/peop1.jpg";

    }

    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }

    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function MM_findObj(n, d) { //v3.0
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </SCRIPT>

    </HEAD>

    <BODY bgcolor="#FFFFFF" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" BACKGROUND="Div2.gif" onLoad="MM_preloadImages('tn2.gif','tn4.gif','tn6.gif','tn8.gif')">

    <SCRIPT LANGUAGE="JavaScript1.2" SRC="HM_Loader.js" TYPE='text/javascript'></SCRIPT>

    <a NAME="top"></a>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" HEIGHT="50">
    <tr BGCOLOR="#FFFFFF">

    <td width="63%"> <font FACE="Arial, Helvetica, sans-serif" SIZE="+1" COLOR="#FFFFFF"><img SRC="log.gif" WIDTH="48" HEIGHT="48" ALIGN="LEFT" border="0"><font COLOR="#000066"><b>
    <br>
    Scottish Leadership Foundation</b></font></font></td>
    <td width="37%">
    <div ALIGN="RIGHT"><img SRC="lib.jpg" WIDTH="300" HEIGHT="50" border="0"></div>
    </td>
    </tr>
    </table>
    <table WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
    <tr>

    <td>
    <table width="100%" border="0" cellspacing="1" cellpadding="0" height="20" bgcolor="#336699">
    <tr bgcolor="#336699">
    <td> <img src="Clear.gif" width="148" height="1" border="0"><a href="sample2.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image18','','tn2.gif',1)"><img name="Image18" border="0" src="tn1.gif" width="120" height="22"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image16','','tn4.gif',1)"><img name="Image16" border="0" src="tn3.gif" width="120" height="22"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image17','','tn6.gif',1)"><img name="Image17" border="0" src="tn5.gif" width="120" height="22"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image19','','tn8.gif',1)"><img name="Image19" border="0" src="tn7.gif" width="120" height="22"></a></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <table WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
    <tr>
    <td WIDTH="150"><img src="Clear.gif" width="150" height="1" border="0"></td>
    <td WIDTH="25"><img SRC="Clear.gif" WIDTH="25" HEIGHT="1" BORDER="0"></td>

    <td COLSPAN="2" VALIGN="TOP"> <br>
    <br>
    <table border="1" cellpadding="0" cellspacing="0" bordercolor="#000000" align="CENTER">
    <tr>
    <td valign="TOP"><a href="news.htm" onMouseOver="hiLiteOn('News'); switchIcon('News'); window.status= 'The latest news from PBDH';return true"
    onMouseOut="hiLiteOff('News'); switchIcon('PBDH'); window.status= ' ';return true"><img
    src="images/e1.jpg" width="120" height="120" alt="e-learning" border="0"
    name="News"></a></td>
    <td valign="TOP"><a href="people.htm" onMouseOver="hiLiteOn('People'); switchIcon('People'); window.status= 'Meet the people here at PBDH';return true"
    onMouseOut="hiLiteOff('People'); switchIcon('PBDH'); window.status= '';return true"><img
    src="images/part1.jpg" width="120" height="120" alt="Partnerships" border="0"
    name="People"></a></td>
    <td valign="TOP"><a href="portfolio/portfolio.htm" onMouseOver="hiLiteOn('port'); switchIcon('cat2'); window.status= 'Browse though our work';return true"
    onMouseOut="hiLiteOff('port'); switchIcon('PBDH'); window.status= '';return true"><img
    src="images/port1.jpg" width="120" height="120" alt="Research" border="0"
    name="port"></a></td>
    <td valign="TOP"><a href="news.htm" onMouseOver="hiLiteOn('swen'); switchIcon('cat1'); window.status= 'The latest news from PBDH';return true"
    onMouseOut="hiLiteOff('swen'); switchIcon('PBDH'); window.status= ' ';return true"><img
    src="images/led1.jpg" width="120" height="120" alt="Leadership" border="0"
    name="swen"></a></td>
    </tr>
    <tr>
    <td valign="TOP"><a href="portfolio/portfolio.htm" onMouseOver="hiLiteOn('Portfolio'); switchIcon('Portfolio'); window.status= 'Browse though our work';return true"
    onMouseOut="hiLiteOff('Portfolio'); switchIcon('PBDH'); window.status= '';return true"><img
    src="images/man1.jpg" width="120" height="120" alt="Management" border="0"
    name="Portfolio"></a> </td>
    <td colspan="2" valign="top"><img src="images/pbdhicon.gif" width="240" height="120" border="0"
    name="Icon"> </td>
    <td valign="TOP"><a href="people.htm" onMouseOver="hiLiteOn('peop'); switchIcon('cat3'); window.status= 'Meet the people here at PBDH';return true"
    onMouseOut="hiLiteOff('peop'); switchIcon('PBDH'); window.status= '';return true"><img
    src="images/peop1.jpg" width="120" height="120" alt="Analysis" border="0"
    name="peop"></a></td>
    </tr>
    <tr>
    <td valign="TOP" colspan="4" bgcolor="#EEEEEE"> <a href="people.htm" onMouseOver="hiLiteOn('peop'); switchIcon('cat3'); window.status= 'Meet the people here at PBDH';return true"
    onMouseOut="hiLiteOff('peop'); switchIcon('PBDH'); window.status= '';return true">
    </a>
    <script language="JavaScript" src="dhtmllib.js"></script>
    <script language="JavaScript" src="scroller.js"></script>
    <script language="JavaScript">

    </script>
    <div id="placeholder" style="position:relative; width:350px; height:32px;"></div>
    <script language="JavaScript">var myScroller1 = new Scroller(0,0, 350,32, 1,6);
    myScroller1.setColors("#000000", "#EEEEEE", "#EEEEEE");
    myScroller1.setFont("Verdana,Arial,Helvetica", -2);
    myScroller1.addItem("<b>Click here for <a href='http://dynamicdrive.com'>News & Events</a> happening near you.</b>");
    myScroller1.addItem("<b>Visit <a href='http://www.brainjar.com'>Leadership</a> the new way forward.</b>");
    myScroller1.addItem("<b>Looking for membership <a href='http://wsabstract.com'>click here.</a>");
    myScroller1.addItem("<b>Current events and news in our <a href='http://news.com'>Newsletter.</a></b>");

    function runmikescroll() {

    var layer;
    var mikex, mikey;

    // Locate placeholder layer so we can use it to position the scrollers.

    layer = getLayer("placeholder");
    mikex = getPageLeft(layer);
    mikey = getPageTop(layer);

    // Create the first scroller and position it.

    myScroller1.create();
    myScroller1.hide();
    myScroller1.moveTo(mikex, mikey);
    myScroller1.setzIndex(100);
    myScroller1.show();
    }

    window.onload=runmikescroll
    </script>
    </td>
    </tr>
    <tr>
    <td valign="TOP" colspan="4" bgcolor="#336699">
    <p align="center"><font size="-2" face="Verdana, Arial, Helvetica, sans-serif" color="#666666">
    <br>
    <font color="#FFFFFF">&copy; 2001 Copyright Scottish Leadership Foundation,
    All Rights Reserved</font><br>
    <br>
    </font></p>
    </td>
    </tr>
    </table>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </td>
    <td WIDTH="25"><img SRC="Clear.gif" WIDTH="25" HEIGHT="1" BORDER="0"></td>
    </tr>
    </table>
    </BODY>
    </HTML>


    Thanks,

    Donna_F

  2. #2
    Irritability Defined
    Join Date
    Jul 2000
    Location
    80,000 feet below the surface
    Posts
    1,442
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Donna, it will most probably be the two scripts having one or two of the same 'variable' or 'function' names which are conflicting with each other. As a result one will work (when the DHTML code is parsed) and the other one won't (as the other one is loaded first, the second one will be relegated to the dustbin).

    When I get some time I'll have a good look through the two scripts and find the exact cause...
    My 2 Cents (or is that 2.2 Cents including GST?)

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    UK, Scotland
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    I would be really grateful for your help. I have a feeling it might be the fact that the two scripts may require to run on the page load at the same time.

    The menus are generated during page load I think the ticker needs to work at the same time.

    Perhaps this is not possible!

  4. #4
    Irritability Defined
    Join Date
    Jul 2000
    Location
    80,000 feet below the surface
    Posts
    1,442
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm..... I was close. Wasn't necessarily the same variable/function name (though this could still be the case); the problem is with this :

    Code:
    <BODY bgcolor="#FFFFFF" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" BACKGROUND="Div2.gif" onLoad="MM_preloadImages('tn2.gif','tn4.gif','tn6.gif','tn8.gif')">
    and in the scroller code to activate the scroller:

    Code:
     myScroller1.show();
    }
    
    window.onload=runmikescroll
    </script>
    Basically the onLoad calls are conflicting with each other, so you would need to call both at the same time like :

    Code:
    <BODY bgcolor="#FFFFFF" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" BACKGROUND="Div2.gif" onLoad="MM_preloadImages('tn2.gif','tn4.gif','tn6.gif','tn8.gif');runmikescroll">
    and remove the

    window.onload=runmikescroll

    from the other script; or write a JScript function to call both scripts at the same time. This tutorial from WSAbstract (DynamicDrive's sister site) explains the problem with running multiple scripts.

    Unfortunately because you're basically running 3/4 JavaScripts at the same time (rollovers, DHTML menu + the scroller) it's immensely complicated and what I supplied above may not necessarily work. Come back if it doesn't work and I'll keep plugging further (and other JScript gurus, if you can help separate the muck it would be much appreciated).

    The very best of luck.
    Last edited by BC; Feb 8, 2001 at 05:05.
    My 2 Cents (or is that 2.2 Cents including GST?)

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    UK, Scotland
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again,

    I did try that but unfortunatly it didn't work. I will agree my code is a bit messy. I have included rollovers but as you can see I also use the Dreamweaver rollovers option as well.

    When I did this the menus came back and the ticker dissapeared.

    Not having any luck here! sorry to trouble you with this.

    I plan to clean the code up a bit if I can get these working together but it may not be possible to get them working together.

  6. #6
    SitePoint Enthusiast Vman's Avatar
    Join Date
    Feb 2001
    Location
    Australia
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow - you are not going to believe this. As much as I hate javascript, I love a good mystery. Thanks to BC I was able to figure it out.

    First off your body should be like this:
    <BODY bgcolor="#FFFFFF" ...... onLoad="MM_preloadImages('tn2.gif','tn4.gif','tn6.gif','tn8.gif');HM_f_StartIt();runmikescroll()">

    Now the HM_f_StartIt is the call for the menu script and it has an onload call at the bottom of 3 files: HM_ScriptDOM.js, HM_ScriptIE4.js, HM_ScriptNS4.js. I just commented these out.

    Once you have all of the onload funcion calls in the one line, it works fine. At least in IE 5.5. I did notice that there are a few function names that are the same, though it doesn't seem to be a problem.

    Hope this helps.

  7. #7
    Irritability Defined
    Join Date
    Jul 2000
    Location
    80,000 feet below the surface
    Posts
    1,442
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhhhhhhh, bugger it! Thank you VMan, I forgot to check the hierarchial menus for the startup function. That should be it.

    Donna, test it out and let us know how it goes.
    My 2 Cents (or is that 2.2 Cents including GST?)

  8. #8
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    UK, Scotland
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Guys,

    I will try this out over the weekend. I tried it yesterday but I still couldn't get it to work. I think you said to comment out the onload events within the JS files is that correct?

    I will certainly try this out thanks very much for all your help.

  9. #9
    Irritability Defined
    Join Date
    Jul 2000
    Location
    80,000 feet below the surface
    Posts
    1,442
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's correct.
    My 2 Cents (or is that 2.2 Cents including GST?)


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
  •