SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    expanding menu bottlenecked by ticker.js

    Hello,

    I am using a script for my navigation which is a vertical expanding menu that opens when clicked on. However when i have added another script which creates a scrolling marquee across the page, the menu links dont stay expanded as the page gets reloaded (ie. <a href="#".. ) as if its a normal link.

    Here is the javascript for the menu:

    Code JavaScript:
    menu_status = new Array(); 
    function showHide(theid){
        if (document.getElementById) {
        var switch_id = document.getElementById(theid);
     
            if(menu_status[theid] != 'show') {
               switch_id.className = 'show';
               menu_status[theid] = 'show';
            }else{
               switch_id.className = 'hide';
               menu_status[theid] = 'hide';
            }
        }
    }

    and an example link for the menu
    Code HTML4Strict:
    <a class="mymenu" href="#" onclick="showHide('submenu1');" 
    onmouseover="document.getElementById('MYMSM_world').src='images/mymsm_nav_btn_world-over.gif';" 
    onmouseout="document.getElementById('MYMSM_world').src='images/mymsm_nav_btn_world.gif';" 
    onmousedown="document.getElementById('MYMSM_world').src='images/mymsm_nav_btn_world-over.gif';" 
    onmouseup="document.getElementById('MYMSM_world').src='images/mymsm_nav_btn_world-over.gif';">
    <img src="images/mymsm_nav_btn_world.gif" alt="" width="188" height="38" border="0" id="MYMSM_world" /></a>
    <div id="submenu1" class="hide">
    	<a href="sublink1.html" target="_blank" class="submenu">Sub-Link 1</a>
    	<a href="sublink2.html" target="_blank" class="submenu">Sub-Link 2</a>
    	<a href="sublink3.html" target="_blank" class="submenu">Sub-Link 3</a>
    </div>

    as you can see i also have mouseover image code in there and the rest of the settings are applied in a stylesheet.

    Now this is probably one of those annoying posts, as i have no idea whats causing the links to reload the page. When i take out <script type="text/javascript" src="js/ticker.js"></script> the menu works fine.

    Here is the code for the Ticker:
    Code JavaScript:
    */
    //---------------------------------------------------------------------------------------------------------
    // Ticker entries
    //---------------------------------------------------------------------------------------------------------
     
    var tickerEntries = new Array(
      "NEWS ITEM 1",
      "NEWS ITEM 2",
      "NEWS ITEM 3",
    );
     
    //---------------------------------------------------------------------------------------------------------
    // Configuration
    //---------------------------------------------------------------------------------------------------------
     
    var tickerWidth = 562;                               // width (pixels)
    var tickerMargin = 0;                               // margin (pixels)
    var tickerDelay = 30;                                // scrolling delay (smaller = faster)
    var tickerSpacer = "+++";                            // spacer between ticker entries
     
    var tickerBGColor = "";                       // background color
    var tickerHLColor = "";                       // hilight (mouse over) color
     
    var tickerFont = "Courier New, Courier, Monospace";  // font family (CSS-spec)
    var tickerFontSize = 12;                             // font size (pixels)
    var tickerFontColor = "#000000";                        // font color
     
    var tickerBorderWidth = 1;                           // border width (pixels)
    var tickerBorderStyle = "solid";                    // border style (CSS-spec)
    var tickerBorderColor = "#FFFFFF";                   // border color
     
    //---------------------------------------------------------------------------------------------------------
    // Functions
    //---------------------------------------------------------------------------------------------------------
     
    var DOM = document.getElementById;
    var IE4 = document.all;
     
    var tickerIV, tickerID;
    var tickerItems = new Array();
    var tickerHeight = tickerFontSize + 8;
     
    function tickerGetObj(id) {
      if(DOM) return document.getElementById(id);
      else if(IE4) return document.all[id];
      else return false;
    }
     
    function tickerObject(id) {
      this.elem = tickerGetObj(id);
      this.width = this.elem.offsetWidth;
      this.x = tickerWidth;
      this.css = this.elem.style;
      this.css.width = this.width + 'px';
      this.css.left = this.x + 'px';
      this.move = false;
      return this;
    }
     
    function tickerNext() {
      if(!DOM && !IE4) return;
      var obj = tickerItems[tickerID];
      obj.x = tickerWidth;
      obj.css.left = tickerWidth + 'px';
      obj.move = true;
    }
     
    function tickerMove() {
      if(!DOM && !IE4) return;
      for(var i = 0; i < tickerItems.length; i++) {
        if(tickerItems[i].move) {
          if(tickerItems[i].x > -tickerItems[i].width) {
            tickerItems[i].x -= 2;
            tickerItems[i].css.left = tickerItems[i].x + 'px';
          }
          else tickerItems[i].move = false;
        }
      }
      if(tickerItems[tickerID].x + tickerItems[tickerID].width <= tickerWidth) {
        tickerID++;
        if(tickerID >= tickerItems.length) tickerID = 0;
        tickerNext();
      }
    }
     
    function tickerStart(init) {
      if(!DOM && !IE4) return;
      if(tickerBGColor) {
        var obj = tickerGetObj('divTicker');
        obj.style.backgroundColor = tickerBGColor;
      }
      if(init) {
        tickerID = 0;
        tickerNext();
      }
      tickerIV = setInterval('tickerMove()', tickerDelay);
    }
     
    function tickerStop() {
      if(!DOM && !IE4) return;
      clearInterval(tickerIV);
      if(tickerHLColor) {
        var obj = tickerGetObj('divTicker');
        obj.style.backgroundColor = tickerHLColor;
      }
    }
     
    function tickerInit() {
      if(!DOM && !IE4) return;
      for(var i = 0; i < tickerEntries.length; i++) {
        tickerItems[i] = new tickerObject('divTickerEntry' + (i+1));
      }
      var obj = tickerGetObj('divTicker');
      obj.style.width = tickerWidth + 'px';
      obj.style.visibility = 'visible';
      tickerStart(true);
    }
     
    function tickerReload() {
      if(!DOM && !IE4) return;
      document.location.reload();
    }
     
    window.onresize = tickerReload;
    window.onload = tickerInit;
     
    //---------------------------------------------------------------------------------------------------------
    // Build ticker
    //---------------------------------------------------------------------------------------------------------
     
    document.write('<style> ' +
                   '#divTicker { ' +
                   'position: absolute; ' +
                   'width: 10000px; ' +
                   'height: ' + tickerHeight + 'px; ' +
                   'cursor: default; ' +
                   'overflow: hidden; ' +
                   'visibility: hidden; ' +
                   (tickerBorderWidth ? 'border-width: ' + tickerBorderWidth + 'px; ' : '') +
                   (tickerBorderStyle ? 'border-style: ' + tickerBorderStyle + '; ' : '') +
                   (tickerBorderColor ? 'border-color: ' + tickerBorderColor + '; ' : '') +
                   '} ' +
                   '.cssTickerContainer { ' +
                   'position: relative; ' +
                   'height: ' + tickerHeight + 'px; ' +
                   'margin-top: ' + tickerMargin + 'px; ' +
                   'margin-bottom: ' + tickerMargin + 'px; ' +
                   '} ' +
                   '.cssTickerEntry { ' +
                   'font-family: ' + tickerFont + '; ' +
                   'font-size: ' + tickerFontSize + 'px; ' +
                   'color: ' + tickerFontColor + '; ' +
                   '} ' +
                   '</style>');
     
    document.write('<div class="cssTickerContainer">' +
                   '<div id="divTicker" onMouseOver="tickerStop()" onMouseOut="tickerStart()">');
     
    for(var i = 0; i < tickerEntries.length; i++) {
      document.write('<div id="divTickerEntry' + (i+1) + '" class="cssTickerEntry" ' +
                     'style="position:absolute; top:2px; white-space:nowrap">' +
                     tickerEntries[i] + ((tickerEntries.length > 1) ? ' ' + tickerSpacer + '&nbsp;' : '') +
                     '</div>');
    }
    document.write('</div></div>');
     
    //---------------------------------------------------------------------------------------------------------

    Please help as my deadline is imminent and ive torn out 40% of my hair!

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    would it be possible for a live example?


  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just a guess but...

    comment-out the following line in the ticker file
    Code:
    //window.onresize = tickerReload;

  4. #4
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    haha, awesome guess!

    works smooth!

    Cheers! ill have a drink for you today!


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
  •