homepage Welcome to WebmasterWorld Guest from 54.167.75.155
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
How to set scrollTo with class setting?
toplisek




msg:4557810
 5:37 pm on Mar 23, 2013 (gmt 0)

File: jquery.scrollTo-min.js

<html>
<head>
<script language="JavaScript">
jQuery(document).ready(function() {
$(".myclass").scrollTo($('.myclass'), 800 );
});
</script>
</head>

<head>


</head>
<body>
<a href=".myclass">Jump to class</a>

<p>vdbgdbhfdhdrhrrehs</p> <p>vdbgdbhfdhdrhrrehs</p> <p>vdbgdbhfdhdrhrrehs</p> <p>vdbgdbhfdhdrhrrehs</p> <p>vdbgdbhfdhdrhrrehs</p> <p>vdbgdbhfdhdrhrrehs</p> <p>vdbgdbhfdhdrhrrehs</p> <p>vdbgdbhfdhdrhrrehs</p> <p>vdbgdbhfdhdrhrrehs</p> <p>vdbgdbhfdhdrhrrehs</p> <p>vdbgdbhfdhdrhrrehs</p> <p>vdbgdbhfdhdrhrrehs</p> <p>vdbgdbhfdhdrhrrehs</p> <p>vdbgdbhfdhdrhrrehs</p>
<p>vdbgdbhfdhdrhrrehs</p>
<div class="myclass"><p>vdbgdbhfdhdrhrrehs</p></div>
</body>

</html>

 

toplisek




msg:4557838
 8:22 pm on Mar 23, 2013 (gmt 0)

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

daveVk




msg:4558228
 12:37 pm on Mar 25, 2013 (gmt 0)

<p class="paragraph1"> - OK

<a href=".myclass">Jump to class</a> - BAD, not a valid href

need to excecute .scrollTo like at top page

<a href="#" onclick="$('.myclass').scrollTo($('.myclass'), 800 );return false">Jump to class</a>

toplisek




msg:4558314
 4:14 pm on Mar 25, 2013 (gmt 0)

I have another issue:
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]

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

scrollToDiv(elWrapped,40);

return false;
});


[/PHP]
Javascript is the following:
[PHP]

<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({
scrollTop: totalScroll
}, 500);
}
jQuery('nav ul li a').click(function(){
var el = $(this).attr('href');
var elWrapped = $(el);

scrollToDiv(elWrapped,40);

return false;
});
} );
</script>

[/PHP]

daveVk




msg:4558453
 11:57 pm on Mar 25, 2013 (gmt 0)

I have received an error from debugger like: Object doesn't support this property or method


Note the line number in error message, and find it in 'view source'. The Object in error will be revealed.

It is better to look at (and quote) 'view source' than PHP in most cases.

toplisek




msg:4558542
 10:29 am on Mar 26, 2013 (gmt 0)

What doe sit mean object in error:
what I should change?

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

scrollToDiv(elWrapped,40);

return false;
});

daveVk




msg:4558745
 10:39 pm on Mar 26, 2013 (gmt 0)

You get the message "Object doesn't support this property or method" when you have something like

dog.name

and dog does have a name (possibly because dog is null or undefined)

The two places where it could occurs in you code are shown in red.

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

scrollToDiv(elWrapped,40);

return false;
});

if error occurs before click then 1st else 2nd

$().click and $().attr should not error in that way, make
sure error message refers to that code.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved