problem with simple onClick event - page seems to be refreshing

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • stevemtno
    New Member
    • Feb 2008
    • 3
    #1

    problem with simple onClick event - page seems to be refreshing

    I've got a problem with a web page I'm working on. I have 4 modules - one of them has 2 tabs, two of them have 4 tabs. When the user clicks on the tabs, the content below them changes. However, when the user clicks on the tab (any tab), the browser goes back to the top of the page (I'm assuming it's refreshing, I'm not sure). I'm attaching the JS code below, along with the 2-tab version of the module and its accompanying CSS. Any help will be greatly appreciated.. thanks!

    SteveMTNO

    [CODE=javascript]<script type="text/javascript">
    window.onload = function() {
    document.getEle mentById('tab2' ).style.display = 'block';
    document.getEle mentById('tab3' ).style.display = 'block';
    document.getEle mentById('tab7' ).style.display = 'block';
    var topHeadlinesbut ton = document.getEle mentById('topHe adlinesbutton') ;
    var latestNewsbutto n = document.getEle mentById('lates tNewsbutton');
    var storiesButton = document.getEle mentById('stori esButton');
    var commentsButton = document.getEle mentById('comme ntsButton');
    var emailedButton = document.getEle mentById('email edButton');
    var videoButton = document.getEle mentById('video Button');
    var jobsbutton = document.getEle mentById('jobsb utton');
    var autosbutton = document.getEle mentById('autos button');
    var homesbutton = document.getEle mentById('homes button');
    var classifiedsbutt on = document.getEle mentById('class ifiedsbutton');
    topHeadlinesbut ton.onclick = function() {
    document.getEle mentById('tab1' ).style.display = 'block';
    document.getEle mentById('tab2' ).style.display = 'none';
    }
    latestNewsbutto n.onclick = function() {
    document.getEle mentById('tab1' ).style.display = 'none';
    document.getEle mentById('tab2' ).style.display = 'block';
    }
    storiesButton.o nclick = function() {
    document.getEle mentById('tab3' ).style.display = 'block';
    document.getEle mentById('tab4' ).style.display = 'none';
    document.getEle mentById('tab5' ).style.display = 'none';
    document.getEle mentById('tab6' ).style.display = 'none';
    }
    commentsButton. onclick = function() {
    document.getEle mentById('tab3' ).style.display = 'none';
    document.getEle mentById('tab4' ).style.display = 'block';
    document.getEle mentById('tab5' ).style.display = 'none';
    document.getEle mentById('tab6' ).style.display = 'none';
    }
    emailedButton.o nclick = function() {
    document.getEle mentById('tab3' ).style.display = 'none';
    document.getEle mentById('tab4' ).style.display = 'none';
    document.getEle mentById('tab5' ).style.display = 'block';
    document.getEle mentById('tab6' ).style.display = 'none';
    }
    videoButton.onc lick = function() {
    document.getEle mentById('tab3' ).style.display = 'none';
    document.getEle mentById('tab4' ).style.display = 'none';
    document.getEle mentById('tab5' ).style.display = 'none';
    document.getEle mentById('tab6' ).style.display = 'block';
    }
    jobsbutton.oncl ick = function() {
    document.getEle mentById('tab7' ).style.display = 'block';
    document.getEle mentById('tab8' ).style.display = 'none';
    document.getEle mentById('tab9' ).style.display = 'none';
    document.getEle mentById('tab10 ').style.displa y = 'none';
    }
    autosbutton.onc lick = function() {
    document.getEle mentById('tab7' ).style.display = 'none';
    document.getEle mentById('tab8' ).style.display = 'block';
    document.getEle mentById('tab9' ).style.display = 'none';
    document.getEle mentById('tab10 ').style.displa y = 'none';
    }
    homesbutton.onc lick = function() {
    document.getEle mentById('tab7' ).style.display = 'none';
    document.getEle mentById('tab8' ).style.display = 'none';
    document.getEle mentById('tab9' ).style.display = 'block';
    document.getEle mentById('tab10 ').style.displa y = 'none';
    }
    classifiedsbutt on.onclick = function() {
    document.getEle mentById('tab7' ).style.display = 'none';
    document.getEle mentById('tab8' ).style.display = 'none';
    document.getEle mentById('tab9' ).style.display = 'none';
    document.getEle mentById('tab10 ').style.displa y = 'block';
    }
    }
    </script>
    [/CODE]

    [HTML]<HTML>

    <div id="background" >

    <div id="tabs">
    <ul>
    <li><a href="#" title="topHeadl ines" id="topHeadline sbutton"><span> Top headlines</span></a></li>
    <li><a href="#" title="latestNe ws" id="latestNewsb utton"><span>La test news</span></a></li>
    </ul>
    </div>

    <div id="tab1">
    <div id="topHeadline s">
    <div class="content" >
    <ul>
    <li>Top headlines will go here</li>
    </ul>
    </div>
    </div>
    </div>

    <div id="tab2">
    <div id="latestNews" >
    <div class="content" >
    <ul>
    <li>
    <script language="javas cript" type="text/javascript" src="http://images.stltoday .com/stltoday/js/com_stltoday_rs s.js"></script>
    <div>
    <a href="/news" class="rss_titl e">Latest News</a>
    </div>
    <div id="latest_news _rss" class="rss_item ">loading.. .</div>
    <script language="javas cript" type="text/javascript">
    <!--
    try {
    rss1 = new com_stltoday_rs s_reader("lates t_news_rss");
    rss1.getRSS("/rss/news",12);
    } catch(e) {
    document.getEle mentById("lates t_news_rss").in nerHTML="Curren tly offline, please try later...";
    };
    //-->
    </script>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>

    </HTML>
    [/HTML]

    [CODE=css]<style type="text/css">

    img {
    border: none;
    }

    a {
    text-decoration: none;
    color: #000;
    }

    ul {
    list-style:none;
    }

    #background {
    width: 300px;
    height: 229px;
    position: relative;
    background-color: white;
    }

    #background #tabs {
    width:300px;
    height: 21px;
    position: relative;
    top:-1px;
    left:-6px;
    line-height:normal;
    }

    #background #tabs ul {
    margin:0px;
    padding:0px 0px 0px 5px;
    }

    #background #tabs li {
    display:inline;
    margin:0px;
    padding:0px;
    }

    #background #tabs a {
    float:left;
    background:url( "http://images.stltoday .com/stltoday/images/tableft.gif") no-repeat left top;
    margin:0px;
    padding:0px 0px 0px 4px;
    }

    #background #tabs a span {
    float:left;
    display:block;
    background:url( "http://images.stltoday .com/stltoday/images/tabright.gif") no-repeat right top;
    padding:5px 15px 4px 6px;
    color:#fff;
    font-weight: bold;
    font-size: 12px;
    }

    /* Commented Backslash Hack hides rule from IE5-Mac \*/

    #background #tabs a span {
    float:none;
    }

    /* End IE5-Mac hack */

    #background #tabs a:hover span {
    color:#fff;
    }

    #background #tabs a:hover {
    background-position:0% -42px;
    }

    #background #tabs a:hover span {
    background-position:100% -42px;
    }

    #background #tab1, #background #tab2 {
    width: 299px;
    height: 228px;
    border: 1px solid black;
    position: relative;
    left:-1px;
    display: none;
    background-color: white;
    }

    #background #tab3, #background #tab4, #background #tab5, #background #tab6, #background #tab7, #background #tab8, #background #tab9, #background #tab10 {
    width: 299px;
    height: 278px;
    border: 1px solid black;
    left:-1px;
    display: none;
    background-color: white;
    }

    #background #tab1 ul, #background #tab2 ul, #background #tab3 ul, #background #tab4 ul, #background #tab5 ul, #background #tab6 ul, #background #tab7 ul, #background #tab8 ul, #background #tab9 ul, #background #tab10 ul {
    list-style: none;
    padding: 0px; /* this is needed for non-IE browsers */
    margin-left: 0px;
    font-family: sans-serif;
    font-size: 12px;
    }

    #background #tab1 #topHeadlines a:hover, #background #tab2 #latestNews a:hover, #background #tab3 #stories a:hover, #background #tab4 #comments a:hover, #background #tab5 #emailed a:hover, #background #tab6 #videos a:hover, #background #tab7 #stories a:hover, #background #tab8 #comments a:hover, #background #tab9 #emailed a:hover, #background #tab10 #videos a:hover {
    text-decoration: underline;
    }

    #background .content {
    width: 300px;
    height: 229px;
    margin-left: 10px;
    float: left;
    padding-top: 10px;
    }

    #background .content2 {
    width: 300px;
    height: 279px;
    margin-left: 10px;
    float: left;
    padding-top: 10px;
    }

    #background .left {
    width: 155px;
    height: 259px;
    margin-top: 10px;
    margin-left: 10px;
    float: left;
    }

    #background .right {
    width: 115px;
    height: 259px;
    margin-top: 10px;
    margin-left: 10px;
    border-left: 1px solid #e5e5e5;
    float: right; /* this needs to be here for non_IE browsers to display properly */
    }

    </style>[/CODE]
    Last edited by acoder; Feb 26 '08, 11:15 AM. Reason: Added code tags
    Tags: None
    • stevemtno
      New Member
      • Feb 2008
      • 3
      #2
      Thanks to Arty Effem on the WebDeveloper forum for giving me the solution to this problem. All I had to do was add "return false;" to the end of all the functions.

      Additional thanks to Arty for letting me know 'the rules' of sites like this..

        Comment

        • acoder
          Recognized Expert MVP
          • Nov 2006
          • 16032
          #3
          Originally posted by stevemtno
          Thanks to Arty Effem on the WebDeveloper forum for giving me the solution to this problem. All I had to do was add "return false;" to the end of all the functions.

          Additional thanks to Arty for letting me know 'the rules' of sites like this..
          That's correct and thanks for posting back. One of these rules is using code tags when posting code.

          PS. welcome to TSDN (and to forums in general)!

            Comment

            Previous template Next
            Working...