Can't get sliding box to work - Probably a simple solution

[ukmgranger]

Hi there,

I am trying to create an area on my site that has a box of content that can slide in and out.  I have found a javascript framework that can do this called http://mootools.net/, and what I am specifically trying to do can be seen here http://demos.mootools.net/Fx.Slide.

Let me point out that I am really not great with java! - So this will hopefully be easy for someone to give me an answer.

My site is here http://www.your-web-designer.co.uk/index.php/home-v3.

I think that the problem lies in the 'href' in the actual <a code in the html?!?  see the code below:

Code: Select all

<div class="marginbottom">
		<a id="v_slideout" href="#">slide out</a>
		|
		<a id="v_slidein" href="#">slide in</a>
		|
		<a id="v_toggle" href="#">toggle</a>
		|
		<a id="v_hide" href="#">hide</a>
		|
		<a id="v_show" href="#">show</a>
		| <strong>status</strong>: <span id="vertical_status">open</span>
	</div>
	<div id="vertical_slide">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>

I have done everything that I know of to try to get it to work, but when you click on any of the links to make the slide occur,  you get sent to the sites homepage.

Any help would be great!

[Russ]

Mmmm, check the paths to your JS and your CSS?
I cannot find Mootools here...
http://www.your-web-designer.co.uk/demos/mootools.js

Which is where you are saying it is?
/demos/mootools.js

There maybe other path problems?

[ukmgranger]

I'm not sure I get you?

The paths are as set up as below:

Code: Select all

<__script__ type="text/javascript" src="uploads/java/mootools.js" type="text/javascript" ></__script> 
	<__script__ type="text/javascript" src="uploads/java/demo.js" type="text/javascript" ></__script> 

I know that the .js files are in the 'java' directory as above.

[Russ]

Sorry, I think I was looking at the example site whilst comparing to yours and gave their paths - time for a coffee I think

It looks like some JS is not loaded or not being used, hence jump to hompage. Try using the 'name' attribute? Not sure how it hooks in

Russ

[ukmgranger]

Thanks for the help, but unfortunately I am none the wiser!!

[Russ]

What I meant by the 'name attribute' is,
You use:

Code: Select all

<a id="v_slideout" href="#">slide out</a>

They use:

Code: Select all

<a id="v_slideout" href="#" name="v_slideout">slide out</a>

I don't know, but I was thinking maybe the JS is hooking its stuff on the 'name' rather than the 'id'. I'd also check paths to all the relevant JS files - it is often the problem, try substituting absolute paths to begin with.

Russ

[joecannes]

on your anchor tags, change:

Code: Select all

href="#"

to

Code: Select all

href="javascript:;"

and see if that helps. For some people, it is not recommended to use it

Code: Select all

href="javascript:;"

, but its worth a shot, sometimes, you are just forced to use it this way,


JC

[calguy1000]

This is not a topic specifically related to CMS Made Simple.

Please take it elsewhere.

[Russ]

Sorry it is not the name attribute, but the stuff does work in CMSMS, I've just downloaded the demo and tried it as is in 1.5.2 and it is fine.

Perhaps the JS below is interfering - maybe worth removing it temporarily?

Code: Select all

<__script__ src="/js-global/FancyZoom.js" type="text/javascript"></__script>
<__script__ src="/js-global/FancyZoomHTML.js" type="text/javascript"></__script>
<__script__ src="/uploads/java/script.js" type="text/javascript" ></__script>