dcsimg
www.webdeveloper.com
Results 1 to 7 of 7

Thread: Show/hide and staying and not jumping to the top

  1. #1
    Join Date
    May 2014
    Posts
    99

    Show/hide and staying and not jumping to the top

    Hi, I've taken a js-snippet, that shows or hides an id of my website. everything works fine, but each time I click and start the function, the cursor jumps to the top of the site. How can I avoid this. I'm a js absolute beginner. Here the code of my show/hide-function, that's in the head:

    Code:
                 <script type="text/javascript">
    $(document).ready(function(){
        /* Hier der jQuery-Code */
        $('#sobo-einblenden').click(function(){
        	$('#col5a').show();
        })
        $('#sobo-ausblenden').click(function(){
        	$('#col5a').hide();
        })
    });
    </script>
    HTML:

    HTML Code:
                 <p id="socialbookmarksanzeigen">
      Weiterempfehlen
      <a href="#" id="sobo-einblenden">einblenden</a>
      <a href="#" id="sobo-ausblenden">ausblenden</a>
    </p>
    
                <h2>AUSLAND</h2>
                <div class="colc">
                <div id="col5a">showhide-texttexttext</div></div>
    Thanx for help.

  2. #2
    Join Date
    Dec 2012
    Posts
    851
    The reason for this is quite simple: You assign "#" to the href attribute. This is an anchor letting the browser skip to the top of the page. You can fix this by using buttons instead of <a> tags or adding "return false;" to your click handlers.
    Last edited by Sempervivum; 01-15-2016 at 08:44 AM.

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    3,657
    JQuery has a forum of its own...
    --> JavaScript Frameworks like JQuery, Angular, Node <-- ... and please remember to wrap any code you have in forum tags:-
    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  4. #4
    Join Date
    May 2014
    Posts
    99
    Quote Originally Posted by Sempervivum View Post
    The reason for this is quite simple: You assign "#" to the href attribute. This is an anchor letting the browser skip to the top of the page. You can fix this by using buttons instead of <a> tags or adding "return false;" to your click handlers.
    Thanx again, sempervivum. WIll try it and also try, if I have to change the js-code then, too.

  5. #5
    Join Date
    May 2014
    Posts
    99
    Tried it this way:
    HTML Code:
     <p id="socialbookmarksanzeigen">
     <button type="submit" id="sobo-einblenden">einblenden</button> 
     <button type="submit" id="sobo-ausblenden">ausblenden</button>
     </p>
    and left the js as it was, but if I click now, another js-event is started from another function and brings the alert "Sie haben noch kein Medium ausgewählt.

    Code:
     function speichern() {
                    var arr = [];
                    var frm = document.getElementById('presse');
                    localStorage.clear();
                    for (var i = 0; i < frm.elements.length; i++) {
                        if (frm.elements[i].checked === true) {
                            arr.push(frm.elements[i].id);
                        }
                    }
                    if (arr.length == 0) alert("Sie haben noch kein Medium ausgewählt.")
                    else
                    str = JSON.stringify(arr);
                    localStorage.setItem("items", str);
                    lesen();
                  
    
                }

  6. #6
    Join Date
    May 2014
    Posts
    99

    My Solution

    Solved it this way (I've read that "return false' should not be used?)

    Code:
             <script>
    function swap(div_id) {
        div = document.getElementById(div_id);
     
        div.style.display = (div.style.display == 'none') ? 'block' : 'none';
        this.value = (this.value == 'einblenden') ? 'ausblenden' : 'einblenden';
    }
    </script>
    HTML Code:
                <h2>AUSLAND</h2>
    <input type="button" value="Ein-/Ausblenden" onClick="swap('colwrap')">
                <div id="colwrap">
    Kind regards pt004

  7. #7
    Join Date
    Nov 2015
    Posts
    3
    It's very good
    sbobet333

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles