JQuery Integration with Yola

  • 1
  • Problem
  • Updated 7 years ago
  • In Progress
Here is a sample of the Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/...;
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pa...;
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle...;
<script type="text/javascript" src="http://malsup.github.com/jquery.easin...;

<script type="text/javascript">

alert("Pre Loaded");

$(document).ready(function() {
alert("Cool Loaded");
$('.slideshow').cycle({
fx: 'fade'
});
alert("Post Cool Loaded");
});

window.onload = function(){
alert("Boring Loaded");
$('.slideshow').cycle({
fx: 'fade'
});
alert("Post Boring Loaded");
}

alert("Post Loaded");

</script>

<div class="slideshow">
<img src="http://cloud.github.com/downloads/mal...; width="200" height="200" />
<img src="http://cloud.github.com/downloads/mal...; width="200" height="200" />
<img src="http://cloud.github.com/downloads/mal...; width="200" height="200" />
<img src="http://cloud.github.com/downloads/mal...; width="200" height="200" />
<img src="http://cloud.github.com/downloads/mal...; width="200" height="200" />
</div>

Here is a link to the page in question
http://jquerytestinggoodness.yolasite...

The problem is that in the editor after editing the code and clicking the save button this even fires fine and i end up with rotating images in the editor while working on the site.
But then when i pull it up in preview or on the published site it breaks

Any ideas, suggestions, or help?

Thank you

Josh W
Photo of jwillis

jwillis

  • 4 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Josh, I have to say, I'm perplexed at this problem. The jQuery that you wrote seems the be valid and is you say it works in the sitebuilder than I don't really know. However, instead of writing

window.onload = function(){
//code here
}

could you please try

$(window).load(function(){
//codehere
});

I'm just guessing that since the way you use is not jquery, it might be affecting the script. But then, calling the function directly from the address bar doesn't seem to work either.

Kevin
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Josh,

Kevin is probably one of the best person to help you with this issue. I did take a look in your Sitebuilder and see that the script does not seem to work their either. Perhaps giving Kevin's suggestion a try will help!
Photo of jwillis

jwillis

  • 4 Posts
  • 0 Reply Likes
I pulled out the repetition from the Code and it started working as described in the initial post again. Works fine in the editor. Not in the preview or the published.
Photo of jwillis

jwillis

  • 4 Posts
  • 0 Reply Likes
When i changed the code to your suggestion none of the Javascript works :(

I have used this code before without any problems. The difference was that i put the script files all in the Tags instead of the body tags.

Could this be the problem? And if so does Yola allow for editing or modifying of content in those tags?
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hello Josh,

If you would like to add the script tags to the header section of your site, open the Site Properties Panel (In the Sitebuilder, Click on the Site button at the top), then click on the Site Tracking codes section and insert the codes into the header section there. This will add the code to every page and the header section.

I hope this helps you.

Andi
Photo of jwillis

jwillis

  • 4 Posts
  • 0 Reply Likes
That did help. Turns out it was a combination of problems but it is working now.
Thank you.