Welcome to WebmasterWorld Guest from 54.205.75.60

Forum Moderators: open

Message Too Old, No Replies

How to set scrollTo with class setting?

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

WebmasterWorld Senior Member 5+ Year Member



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>
8:22 pm on Mar 23, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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">
12:37 pm on Mar 25, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



<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>
4:14 pm on Mar 25, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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]
11:57 pm on Mar 25, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.
10:29 am on Mar 26, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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;
});
10:39 pm on Mar 26, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.