SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    <script type="text/javascript">
    window.onload = function() {
    document.getElementById('tab2').style.display = 'block';
    document.getElementById('tab3').style.display = 'block';
    document.getElementById('tab7').style.display = 'block';
    var topHeadlinesbutton = document.getElementById('topHeadlinesbutton');
    var latestNewsbutton = document.getElementById('latestNewsbutton');
    var storiesButton = document.getElementById('storiesButton');
    var commentsButton = document.getElementById('commentsButton');
    var emailedButton = document.getElementById('emailedButton');
    var videoButton = document.getElementById('videoButton');
    var jobsbutton = document.getElementById('jobsbutton');
    var autosbutton = document.getElementById('autosbutton');
    var homesbutton = document.getElementById('homesbutton');
    var classifiedsbutton = document.getElementById('classifiedsbutton');
    topHeadlinesbutton.onclick = function() {
    document.getElementById('tab1').style.display = 'block';
    document.getElementById('tab2').style.display = 'none';
    }
    latestNewsbutton.onclick = function() {
    document.getElementById('tab1').style.display = 'none';
    document.getElementById('tab2').style.display = 'block';
    }
    storiesButton.onclick = function() {
    document.getElementById('tab3').style.display = 'block';
    document.getElementById('tab4').style.display = 'none';
    document.getElementById('tab5').style.display = 'none';
    document.getElementById('tab6').style.display = 'none';
    }
    commentsButton.onclick = function() {
    document.getElementById('tab3').style.display = 'none';
    document.getElementById('tab4').style.display = 'block';
    document.getElementById('tab5').style.display = 'none';
    document.getElementById('tab6').style.display = 'none';
    }
    emailedButton.onclick = function() {
    document.getElementById('tab3').style.display = 'none';
    document.getElementById('tab4').style.display = 'none';
    document.getElementById('tab5').style.display = 'block';
    document.getElementById('tab6').style.display = 'none';
    }
    videoButton.onclick = function() {
    document.getElementById('tab3').style.display = 'none';
    document.getElementById('tab4').style.display = 'none';
    document.getElementById('tab5').style.display = 'none';
    document.getElementById('tab6').style.display = 'block';
    }
    jobsbutton.onclick = function() {
    document.getElementById('tab7').style.display = 'block';
    document.getElementById('tab8').style.display = 'none';
    document.getElementById('tab9').style.display = 'none';
    document.getElementById('tab10').style.display = 'none';
    }
    autosbutton.onclick = function() {
    document.getElementById('tab7').style.display = 'none';
    document.getElementById('tab8').style.display = 'block';
    document.getElementById('tab9').style.display = 'none';
    document.getElementById('tab10').style.display = 'none';
    }
    homesbutton.onclick = function() {
    document.getElementById('tab7').style.display = 'none';
    document.getElementById('tab8').style.display = 'none';
    document.getElementById('tab9').style.display = 'block';
    document.getElementById('tab10').style.display = 'none';
    }
    classifiedsbutton.onclick = function() {
    document.getElementById('tab7').style.display = 'none';
    document.getElementById('tab8').style.display = 'none';
    document.getElementById('tab9').style.display = 'none';
    document.getElementById('tab10').style.display = 'block';
    }
    }
    </script>


    <div id="background">

    <div id="tabs">
    <ul>
    <li><a href="#" title="topHeadlines" id="topHeadlinesbutton"><span>Top headlines</span></a></li>
    <li><a href="#" title="latestNews" id="latestNewsbutton"><span>Latest news</span></a></li>
    </ul>
    </div>

    <div id="tab1">
    <div id="topHeadlines">
    <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="javascript" type="text/javascript" src="http://images.stltoday.com/stltoday/js/com_stltoday_rss.js"></script>
    <div>
    <a href="/news" class="rss_title">Latest News</a>
    </div>
    <div id="latest_news_rss" class="rss_item">loading...</div>
    <script language="javascript" type="text/javascript">
    <!--
    try {
    rss1 = new com_stltoday_rss_reader("latest_news_rss");
    rss1.getRSS("/rss/news",12);
    } catch(e) {
    document.getElementById("latest_news_rss").innerHTML="Currently offline, please try later...";
    };
    //-->
    </script>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>


    <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>

  2. #2
    SitePoint Zealot rhlowe's Avatar
    Join Date
    Sep 2006
    Location
    San Diego
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your href is "#" which scrolls you back to the top of the page, it isn't refreshing.

    That said, I think, without actually testing this myself, the fastest way to fix that would be to make all your onclicks return false, ie
    Code JavaScript:
    storiesButton.onclick = function() {
    document.getElementById('tab3').style.display = 'block';
    document.getElementById('tab4').style.display = 'none';
    document.getElementById('tab5').style.display = 'none';
    document.getElementById('tab6').style.display = 'none';
    }
    becomes
    Code JavaScript:
    storiesButton.onclick = function() {
    document.getElementById('tab3').style.display = 'block';
    document.getElementById('tab4').style.display = 'none';
    document.getElementById('tab5').style.display = 'none';
    document.getElementById('tab6').style.display = 'none';
    return false;
    }
    San Diego Freelance Web Development Contractor
    Great Taste, no Filler. Now with no Trans Fat!

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rhlowe View Post
    Your href is "#" which scrolls you back to the top of the page, it isn't refreshing.

    That said, I think, without actually testing this myself, the fastest way to fix that would be to make all your onclicks return false, ie
    Code JavaScript:
    storiesButton.onclick = function() {
    document.getElementById('tab3').style.display = 'block';
    document.getElementById('tab4').style.display = 'none';
    document.getElementById('tab5').style.display = 'none';
    document.getElementById('tab6').style.display = 'none';
    }
    becomes
    Code JavaScript:
    storiesButton.onclick = function() {
    document.getElementById('tab3').style.display = 'block';
    document.getElementById('tab4').style.display = 'none';
    document.getElementById('tab5').style.display = 'none';
    document.getElementById('tab6').style.display = 'none';
    return false;
    }
    That's exactly what I ended up doing. Thanks, rhlowe!

    I also wanted to say thanks to Arty Effem on the WebDeveloper forum for giving me the (same) solution to this problem.

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

  4. #4
    SitePoint Zealot rhlowe's Avatar
    Join Date
    Sep 2006
    Location
    San Diego
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem! I am glad I could help.
    San Diego Freelance Web Development Contractor
    Great Taste, no Filler. Now with no Trans Fat!


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
  •