Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    May 2006
    Posts
    216
    Thanks
    4
    Thanked 0 Times in 0 Posts

    How to set scroll function but class target?

    Issue is that I have to use due to application CLASS specifications and not id=....
    <li>
    <a href="#paragraph1">Paragraph 1</a>
    </li>
    is ID specification and it works perfect with ID like

    <p id="paragraph1">
    In ut sapien sem, a convallis odio. Aenean consequat ornare egestas. Aenean adipiscing magna et ante varius viverra. Nullam hendrerit, augue et porta bibendum, est ante pretium nunc, quis euismod enim dui sed neque. Duis dictum odio quis lacus tempor a hendrerit elit laoreet. Nunc id nisl vel risus rutrum mattis. Sed fringilla ultrices eleifend. Curabitur mi sem, hendrerit et semper gravida, gravida eget ipsum. Ut sit amet magna elit, non viverra ante. Nulla ut lorem risus. Morbi ac iaculis sem. Maecenas accumsan arcu eu nulla aliquet non pharetra risus adipiscing. Suspendisse consequat justo a sapien dictum dapibus. Duis fermentum risus a neque bibendum quis malesuada erat tempus. Nunc sodales hendrerit porta.
    </p>

    Is it technically possible to set CLASS like:
    <p class="paragraph1">

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    You can't target a class as the destination of an href - because there can be more than one element in the page with the same class and no way to tell which of them is supposed to be the destination.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Regular Coder
    Join Date
    May 2006
    Posts
    216
    Thanks
    4
    Thanked 0 Times in 0 Posts
    1. I have received an error from debugger like: Object doesn't support this property or method
    Which object defines working scroll as removed nav will not work scroll but even I put nav it will report
    Object doesn't support this property or method

    2. Where to put jQuery ad not $ in the correct way?
    Lines:
    PHP Code:

               
    $('nav ul li a').click(function(){
                  var 
    el = $(this).attr('href');
                  var 
    elWrapped = $(el);

                  
    scrollToDiv(elWrapped,40);

                  return 
    false;
                }); 
    Javascript is the following:
    PHP Code:

    <script language "javascript" type "text/javascript" charset="utf-8">
                
    jQuery(document).ready(function() {
                function 
    scrollToDiv(element,navheight){
                  var 
    offset element.offset();
                  var 
    offsetTop offset.top;
                  var 
    totalScroll offsetTop-navheight;

                  $(
    'body,html').animate({
                          
    scrollToptotalScroll
                  
    }, 500);
                }
                
    jQuery('nav ul li a').click(function(){
                  var 
    el = $(this).attr('href');
                  var 
    elWrapped = $(el);

                  
    scrollToDiv(elWrapped,40);

                  return 
    false;
                });
                } );
    </script> 
    Last edited by toplisek; 03-25-2013 at 04:40 PM.


  •  

    Posting Permissions

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