Jquery - how to fire the plug in...

  • 1
  • Question
  • Updated 7 years ago
  • Answered
Hi all... last week someone gave me a great tip on a jquery plug-in see link:
http://caroufredsel.frebsite.nl/examp...

I'm really excited about this and would love to start understanding how jquery is able to function through yola.

I'm having problems with fireing the plug in. I saved the jquery files in file-manager and I've tweeked html to suit my req.

I basically followed the installation process on caroufred, but am now stumped on where to add the FIRE PLUG-IN code.

I added some code in CSS and had a play, but I feel like I'm in the wrong place... it should be pretty straight forward, but I'm just not sure on how to get around it. I've attached the code that I've added in an html widget... please see attached..

the other attachment is the actual jquery fire code, taken from the caroufred site...

it would be great to hear back from anyone interested in jquery and how it can work through yola.

:) thanks for your help in advance.

Mik

Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes

Posted 7 years ago

  • 1
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Mik
I'm no expert but I will try and help, you will need 2 HTML widgets for this, just copy and paste the code inbetween the <!-- and -->
I assume you've uploaded the .js files to your file manager, in the first widget place this code

<!--
<script type="text/javascript" src="resources/jquery.js"></script>
<script type="text/javascript" src="resources/jquery.carouFredSel.js"></script>
<script type="text/javascript">
// Using default configuration
$("#foo1").carouFredSel();
</script>
-->

Or use the custom configuration.

In the second widget place this code

<!--
<div id="foo1">
<img src="resources/aptatbiz/grey.jpg" width="300" />
<img src="resources/aptatbiz/purple.jpg" width="300" />
<img src="resources/aptatbiz/red.jpg" width="300" />
</div>
-->

Alter the width if required

Cross your fingers! If this doesn't work hopefully someone else will be along to help.
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
Hi David, thanks for the quick response :))

do you mean copy the code that I featured as a jpg in my first post and place it within the first piece of html you quoted?

must I also include the code featured in the second jpg I attached prev. ?

finally, the last piece of code just goes in an html widget by itself?

*yes the 3 files I downloaded from caroufred are in my file manager.

I'll keep playing around with it, but the first few alternate attempts have failed :(

*thanks again for your help :)
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Sorry I couldn't be more helpful, I'm an amateur at this and not even a gifted one. If no one else helps out take a look at some alternatives here

http://www.dynamicdrive.com/dynamicin...

I am more familiar with these.
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
yea, same here... but the jquery one allows interaction and just slides a bit smoother.. thank you again for your input... anyone else out there, please share your views. :)
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
are there any Yola reps out there that can elaborate on this topic?

that would be amazing.

Mik
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Mik,

Can I direct you to this thread. Shawn is very good with this coding and may be able to help you.
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
thanks Gop... I'll head there now!
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
ok, I posted on that thread, but I don't really want to spam it too much, hence re-posting on here and directing Shawn to this thread.

I've alternated the code as much as I can..

I've attached 3 jpgs. these show both html widgets I'm using, and the outcome when viewed in sidebuilder.

I'm hoping someone will be able to find the issue... :)

I think jquery is really cool, it's a shame it's not being pushed by the yola team.. a tutorial would really help on this matter.

thanks for the help in advance.... :))

Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
Where's all the yola-team at??

I've made a few alterations, only have the 1 caroufred source in the top code.. instead of packed and the other version..

MAIN ISSUE: I'm still not sure where to put this proportion of the code, as it's not being recognised by the html widgets... unless I close it with <!-- and --> then it turns a golden colour and ..... ?

where do I put this....???

$(document).ready(function() {

// Using default configuration
$("#foo1").carouFredSel();

// Using custom configuration
$("#foo2").carouFredSel({
items : 2,
direction : "up",
scroll : {
items : 1,
easing : "easeOutBounce",
duration : 1000,
pauseOnHover : true
}
});
});
Photo of Justine

Justine

  • 751 Posts
  • 45 Reply Likes
Hi mk.key1,

I have referred your query to our HTML team, and they will certainly assist you with your query if they are able to.

Please allow them 48 hours to take a look at your case and respond to you.
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
4 sho! thank you Justine ;)
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
Hey all...
I'm referring to this thread:

http://forum.yola.com/yola/topics/jqu...

sadly I am still having trouble with this jquery and how to actually import the function proportion of the code.

Please take a look at the quoted forum link and try to help me out... It was suggested that I post on this link too:

http://forum.yola.com/yola/topics/201...

which I did, but sadly have not heard a reply yet.

I feel like I've wrapped my head around this and am just missing something simple... this makes me think that there are yola pro's out there that can easily resolve this query for me...(because I'm def no pro :)

please try and assist me with this,.. it would be much appreciated.

lots of love,

Mik

This reply was created from a merged topic originally titled
jquery issue still not resolved.....
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Mik,

As Justine has said this will take about 48 hours for a response from the HTML team. It's really frustrating I know having to wait so long for a reply but just sit tight and hopefully there will be an answer.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Mik,

Thanks for your patience. I believe you might need to wrap your jquery code with script tags or style tags. For example:

<script>your jquery code goes in here </script>

I hope that helps get you started in the right direction. Hopefully other forum members who are well-versed with these type of coding questions will be able to hop on and assist.
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
Thanks for the merge... I only reposted again, as the original thread said answered... and I was worried there would be no other reply.. there was a 6 day gap of no responses...

but thanks for the last one *Sanja... and I will go ahead and try this out right away - I will of course keep you all posted. - thanks.

M
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
ok, so I added the tags... and it seems that the code is now being accepted into a widget, rather than just showing as random text in the html widget.... thanks...

However... there must be further complications with the, as there is still nothing happening to my images. :(

I will be patiently waiting for the Yola html ppl to look at this or any one else who feels they can issue tips... *cant wait to get it working...

thanks again.

M
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
I've uploaded a different jquery.. it's working and I've got a buddy coming over tomorrow to give me some more tips.

it would be really cool for yola to post a tutorial on how to work with jquery and yola at some stage..

mik
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
ok, it's been 120 hrs... not quite 48.. it's ok tough, I'm using a different JQUERY slider right now...

fyi: I had to open the downloaded JS file using NOTEPAD and I was able to change variables and functions there... I then saved the JS file again and uploaded it to file-manager... MOST of the functions work... I tested my code from my PC and it worked perfectly, then uploaded it to YOLA and there was something in builder that made the slide acti different, so not perfectly smooth/compatible... BUT I have a jquery slide, which I'm able to influence....

sorry that there seems to be a lack of interest or knowledge regarding jquery and yola functioning together...

personally, I love Jquery, makes sites look so much more pro and modern...

good luck to anyone using it... dnt worry, you are not pushing yola to the max... it will work.

Mik