[SOLVED] problem: JQuery and anchors not scrolling smoothly

joecannes · Post by **joecannes** » Tue Feb 10, 2009 9:15 pm

I am having problem with jquery and the anchor tag. This jquery function allows for smooth scrolling. I am using CMSMS 1.52 MLE.

1. I've called the jquery file and code for the scrolling from my header:

Code: Select all

{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{title} - {global_content name='sitename'}</title>
{metadata}

<__script__ src="uploads/scripts/jquery-1.2.3.js" type="text/javascript"></__script>

{literal}
<__script__ language="javascript" type="text/javascript" >
$(document).ready(function() {
	anchor.init()
});

anchor = {
	init : function()  {
		$("a.jqueryScrollto").click(function () {	
			elementClick = $(this).attr("href")
			destination = $(elementClick).offset().top;
			$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 1100 );
		  	return false;
		})
	}
}
</__script>
{/literal}



{stylesheet}
</head>

and in my content block, here are my anchors:

Code: Select all

<ul>
<li>{anchor anchor='faq_01' text='Question 1' class='jqueryScrollto'}</li>
<li>{anchor anchor='faq_02' text='Question 2' class='jqueryScrollto'}</li>
<li>{anchor anchor='faq_03' text='Question 3' class='jqueryScrollto'}</li>
<li>{anchor anchor='faq_04' text='Question 4' class='jqueryScrollto'}</li>

<li>{anchor anchor='faq_05' text='Question 5' class='jqueryScrollto'}</li>
</ul>

<hr />

<a id="faq_01" name="faq_01"></a>
<p><strong>Question 1</strong></p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>

<a id="faq_02" name="faq_02"></a>
<p><strong>Question 2</strong></p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>

<a id="faq_03" name="faq_03"></a>
<p><strong>Question 3</strong></p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>

<a id="faq_04" name="faq_04"></a>
<p><strong>Question 4</strong></p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>

<a id="faq_05" name="faq_05"></a>
<p><strong>Question 5</strong></p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor.</p>

When I create a static version of this site, it works fine.

i.e the link would be

Code: Select all

<li><a href="#faq_01" title="What are stem cell therapies?" class="jqueryScrollto">Question 1</a></li>

But when I set it up in CMSMS, jquery does not work. The anchor is reandered out as:

Code: Select all

<li><a href="/mysite/index.php?page=faqs&hl=eng#faq_01" class="jqueryScrollto">Question 1</a></li>

Does anyone know why, or see what I am doing wrong? Am I declaring something wrong? Or if anyone knows a better script out there, that would be great to know about it

Thanks,

Joe Cannes

sleepingcavalry · Post by **sleepingcavalry** » Tue Feb 24, 2009 8:01 pm

I've recently been going through a few of the same issues. Have you checked in firebug to see if the script is loading or giving an error? If the script is producing an error, it should give a you a pinpointed look at where it breaks down.

In my situation, I have a slider working but it is a plugin that was developed for CMSMS.

joecannes · Post by **joecannes** » Tue Mar 10, 2009 6:27 pm

It seems to be href the anchor is generating that is giving the problem..

For example, the anchor tag spits out this:

Code: Select all

<a href="/mysite/index.php?page=faqs&hl=eng#faq_01" class="jqueryScrollto">FAQ 1</a>
...
...
...
<a id="faq_01" name="faq_01"></a>
<p>FAQ 1</p>

however, if I copy the source code of the page, and create a blank page in Dreamweaver, then modify the href to this:

Code: Select all

<a href="#faq_01" class="jqueryScrollto">FAQ 1</a>

It works. Gonna try and see what I can do...Mind you, the content editor will be updating the site, so I have to make it as simple as possible, so if I have to make it more complicated, then I'll scrap using the idea of animated scrolling.

joecannes · Post by **joecannes** » Tue Mar 10, 2009 7:34 pm

So i think I just solved the problem...Basically, dont use the {anchor} tag. I changed all my anchor links to this:

Code: Select all

<ol>
<li><a href="#faq_01" class="jqueryScrollto">FAQ 1</a></li>
<li><a href="#faq_02" class="jqueryScrollto">FAQ 2</a></li>
<li><a href="#faq_03" class="jqueryScrollto">FAQ 3</a></li>
<li><a href="#faq_04" class="jqueryScrollto">FAQ 4</a></li>
</ol>

And it worked..The important thing is having the

Code: Select all

class="jqueryScrollto"

in you link tag, without it, the link will not work and take the user back to the default homepage.

So basically, at this point, if you want generic page anchors, user the {anchor} tag, and use this for jquery animated anchors. It's simple enopugh to let the content editor know.

Joe Cannes

P.S. If anyone wants the scripts or sample code of my page, i can post that up if you'd like

sleepingcavalry · Post by **sleepingcavalry** » Tue Mar 24, 2009 9:13 pm

Joe,

Thats great. I might take you up on that code. I have a quick thought on implementing this in a degradable format:

1. Having the html output to the browser as if no JS will be used
2. in the "init : function" , run a quick change to pull out the anchors and drop in the proper HTML for the JS effects.

With this method, the page will function whether or not the JS loads into the browser.

S C

CMS Made Simple Forums