JQuery Slider Help

  • 1
  • Question
  • Updated 6 years ago
  • Answered
Ok so I'll be honest here, I'm a complete newbie at JQuery. I really have no idea what I'm doing at the moment.

I've downloaded this source code http://bxslider.com/ for a really neat image slider that I'd like on my index page of my site. I have followed the instructions the site has given. I have uploaded the files to my file manager, and inserted the two code snippets they provide. However, I'm not sure where to go from here.

I'd really appreciate someone who is experienced with JQuery and also has some time and patience to please help me out.

Stuff that might be important:
- I'm going to make about 4 or five slides, each 870px by 200px
- The files I uploaded to the manager are all in one folder named 'JQuery'

Thanks in advance for the help!
Brandon
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
  • unsure

Posted 8 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Brandon

I am not sure if JQuery will work on the Yola Sitebuilder. I will try my best to make this work for you. Can you please share with me your site URL?

Thanks!
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Thank you so much for your offer! my website URL is http://www.bsdesignonline.com/ and the page I'd like the slider on would be that too (My index page).

Thanks again! :)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks for your patience, Brandon. I have fixed this up for you. You will need to click on the "Publish to the web" button to apply the changes to your live site.
Photo of mik

mik

  • 172 Posts
  • 3 Reply Likes
how did you make this work Sanja? would be great if you could elaborate if you recall. Mik
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Thanks!! Now If I want to add an image in the slide, do I just add an img tag somewhere between the li tags?

EDIT: Ok never mind, I added an HTML tag and it works! Thanks for all the help :)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Oh great to hear, Brandon! It was no problem to help! :)
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Hi Sanja, just one more query. It seems the slider is a little out of line (possibly due to too much width?) I would like it to fit nice and centered on my index page. When you have the time, please could you fix this? I would really appreciate it! The slides themselves are fine, it's only the previous and next buttons that aren't centered. Thanks.
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hi Brandon,
Sanja is on leave until Tuesday but I will forward this to her so that she sees it when she returns. Thank you for your patience in the meantime.

Emmy
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Thanks Emmy, that's fine! :)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Brandon,

Thanks so much for your patience while I've been away. You should be able to adjust the width by fine tuning your CSS stylesheet for that slider code. You will need to download your CSS file and then edit it using NotePad. It may take a few tweaks to figure out the correct placement - I advise saving a mastercopy of your CSS file!

If you still have trouble with this, please let me know.
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Thanks for the help! :-)
Photo of kade

kade

  • 27 Posts
  • 0 Reply Likes
I know this topic was posted quite a while ago, but has JQuery been supported fully by the yola sitebuilder yet? or does it still require tweaks?

I'm knew to this form also.

Thanks :)
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
I have since learned a bit more about JQuery and become more familiar, and I am able to place it in Yola by myself quite fine. No adjustments need to be made specially for Yola as far as I have seen!

- Brandon
Photo of kade

kade

  • 27 Posts
  • 0 Reply Likes
is there any tutorials out there? Because i'm looking to add related posts and featured articles to my blog. and also play around with my basic navigation bar?

Thanks for the reply Brandon!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello kade,

We don't have any specific tutorials on our Yola support page but I'm sure if you Google JQuery tutorials, you'll have a whole range of topics from which to select.

As for your basic navigation bar - can you let us know what exactly you would like to do? We might be able to assist with this.
Photo of kade

kade

  • 27 Posts
  • 0 Reply Likes
I would like something like his for my navigation bar...http://net.tutsplus.com/tutorials/htm...

Thanks, hope you can help :)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello kade,

I'm sure that you can add this to your site but this would mean removing the default menu to implement this. You should be able to add the codes via an HTML Widget. Many of our forum members are quite knowledgeable in this area. If you happen to get stuck, I'm sure that someone will be able to help.
Photo of kade

kade

  • 27 Posts
  • 0 Reply Likes
Right, I have reached step 24 of the tutorial. However i am confused how you are meant to do the clipping part? this would complete my designing bit so I need help before i can move on.

Hope someone can help. Thanks!
Photo of kade

kade

  • 27 Posts
  • 0 Reply Likes
Right, i've clipped the image now. Could someone help me wit hthe coding and how it is meant to be implemented into yola?
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi kade,

Once you have the HTML code, you can add it to your site by pasting it into an HTML widget. Please give that a try and let us know how it goes for you!
Photo of kade

kade

  • 27 Posts
  • 0 Reply Likes
Do I need to delete my menu first? do i put the javascript, css and html all in one html widget? Or do i put the .css in the File settings css overrides? Also, how do i link the code to the menu that i have designed or is this done automatically in the code?

Thanks for your help as my knowledge is limited here.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Kade,

Yes, you would need to hide your default navigation:

1. Click on "Page" > "Page Manager" in the main menu.
2. The Page Manager will open and you will see the list of your pages.
3. To remove pages from your navigation, you need to click on the green check for the page that you would like to remove. This check is located next to the green "indent" arrow to the right of each page name (if you mouse over it, you will see the words "Click here to hide this in your menu").
4. Click on the green check, so it becomes a red "x". This removes it from your navigation.
5. Click "OK" and save your changes.

You should be able to upload your .js file, .css file and .html file to your File Manager. Then using the code you have from that site, you need to change the URL pathway to each of your files.
Photo of kade

kade

  • 27 Posts
  • 0 Reply Likes
I have hidden my menu. Uploaded the files to file manager, created the widgets and changed to links in the url. However I am only getting a list of 4 dots on my home page? Please help :)
Photo of kade

kade

  • 27 Posts
  • 0 Reply Likes
It wont let me put the .css into my custome .css overrides. But i also have the .css file uploaded to my file manager anyway :( thanks.
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi kade

I'll ask Sanja to take a look at this problem for you.

In the meantime, can you check that the file path to the css file is something like resources/folder/filename.css?
Photo of kade

kade

  • 27 Posts
  • 0 Reply Likes
Thank you :) would this be on my website or in the css file itself? Sorry I'm just learning.
Photo of kade

kade

  • 27 Posts
  • 0 Reply Likes
Part of my html code i have changed to is that correct? then I have put the javascript in a HTML widget on my page.
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
It would be added to your html code so that your css file is referenced correctly.

<!--<link rel="stylesheet" type="text/css" href="resources/folder/style.css" />-->

If your css file is inside a folder in the File Manager, then add the folder name. Also, make sure that the file name is exactly the same in the file path as you have named your file. So if your file is called style.css, then the above code is correct.

Also, if the css file is referenced anywhere else in the code you added for the HTML Widget, then also add the file path as in the example.

Nazlie
Photo of kade

kade

  • 27 Posts
  • 0 Reply Likes
Thanks for the help...

<!--<html>
<head>
<link rel="stylesheet" type="text/css" href="resources/menu/style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="sprite.js"></script>
<title>Awesome Menu</title>
</head>

<body>
<div id="nav">
<ul id="navigation">
<li ><a class="index" href="#"></a></li>
<li ><a class="rkade-world" href="#"></a></li>
<li ><a class="forums" href="#"></a></li>
<li ><a class="store" href="#"></a></li>
<li ><a class="about-us" href="#"></a></li>
<li ><a class="contact-us" href="#"></a></li>
</ul>
</div>
</body>
</html>-->

That is the html i have with a .css file called "style.css" uploaded to my file manager under the folder "menu". Still no change however.
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi kade

Thanks for pasting your code here.

You will also need to change the file paths for your other files such as the .js file. The file paths should also be resources/menu/jquery.js, for example.

<!--<head>
<link rel="stylesheet" type="text/css" href="resources/menu/style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="sprite.js"></script>
<title>Awesome Menu</title>
</head>-->

Try doing that and letting us know if there is any change.

Nazlie
Photo of kade

kade

  • 27 Posts
  • 0 Reply Likes
I've only got the "sprite.js" file. for the jquery and jqureryeasing, what files do i need for that? I think i may have included those in another file.

http://net.tutsplus.com/tutorials/htm...

What are the files from that tutorial? Thanks again!
Photo of kade

kade

  • 27 Posts
  • 0 Reply Likes
My HTML is as follows...

<!--<html>
<head>
<link rel="stylesheet" type="text/css" href="resources/menu/style.css" />
<script type="text/javascript" src="resources/menu/jquery.js"></script>
<script type="text/javascript" src="resources/menu/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="resources/menu/sprite.js"></script>
<title>Awesome Menu</title>
</head>

<body>
<div id="nav">
<ul id="navigation">
<li ><a class="index" href="#"></a></li>
<li ><a class="rkade-world" href="#"></a></li>
<li ><a class="forums" href="#"></a></li>
<li ><a class="store" href="#"></a></li>
<li ><a class="about-us" href="#"></a></li>
<li ><a class="contact-us" href="#"></a></li>
</ul>
</div>
</body>
</html>-->

That is on a HTML widget on my home page and uploaded to ym file manager...
Then, this is the .css code that I have put in the custom .css override

body{
background:#000000;
}
#navigation
{
margin-left:250px;
}

#navigation li
{
float:left;
}
#navigation li a
{
background-image:url(resources/menu/sprite.jpg);
display:block;
}
body{
background:#000000;
}
#navigation
{
margin-left:250px;
}
#navigation li
{
float:left;
}
#navigation li a
{
background-image:url(resources/menu/sprite.jpg);
display:block;
}
.index
{
background-position:0px 0px;
width:102px;
height:70px;
}
.rkade-world
{
background-position:-102px 0px;
width:110px;
height:70px
}
.forums
{
background-position:-212px 0px;
width:108px;
height:70px
}
.store
{
background-position:-320px 0px;
width:102px;
height:70px
}
.about
{
background-position:-422px 0px;
width:103px;
height:70px
}
.contact
{
background-position:-530px 0px;
width:103px;
height:70px
}
#navigation a .hover {
background:url(resources/menu/sprite.jpg) no-repeat;
display: block;
opacity: 0;
position: relative;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#navigation a.index .hover {
background-position: -0px -72px;

}
#navigation a.rkade-world .hover{
background-position: -102px -72px;

}
#navigation a.forums .hover {
background-position: -212px -72px;
}
#navigation a.about-us .hover {
background-position: -320px -72px;
}
#navigation a.contact-us .hover {
background-position: -422px -72px;
}

This file has also been uploaded to my file manager. A javascript document is also uploaded to my file manager :/
Photo of kade

kade

  • 27 Posts
  • 0 Reply Likes
#navigation li a
{
background-image:url(resources/menu/sprite.jpg);
display:block;
}

That section is what should grab my menu design am I correct? Because the image does not show up at all :/ is the directory right?
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hi Kade,
Nazlie is not currently online, however when she returns she will be able to take a look at this and assist further. Thank you for your patience in the meantime.

Kind Regards,
Emmy
Photo of kade

kade

  • 27 Posts
  • 0 Reply Likes
All my files are now correct as I have tested them in Dreamweaver. When trying to upload all files to my yola site, the major problem i have is linking my sprite image.

I have tried the above suggested (resources/folder/filename) directory. But it is not getting the image so this location seems wrong :/
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello kade,

Do you mind sharing your domain URL and then we can determine if your image is coming through?
Photo of kade

kade

  • 27 Posts
  • 0 Reply Likes
my url is http://www.startrkade.co.uk i fixed the image problem. It would not work when placed in my folder in my file manger.

It just needs the buttons to be together and to cover the dots that are with the list and move the menu to the top of the page. Could you help me with this last bit please?

Thanks sanja.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello kade,

Thanks for posting that. I'm glad that you were able to resolve the issue with your image. The reason why it was not working is because URLS are case sensitive and the image extension is not jpg but png.

Your URL to your image would actually be:

resources/Menu/sprite.png.

I'm not sure why it's not covering the dots. I suggest contacting the place where you got the code from to see why this is occurring. I'm sure they would be able to help. It could be that you're missing a code or something.
Photo of kade

kade

  • 27 Posts
  • 0 Reply Likes
I have altered the code and it is now exactly what it should be. the only problem is aligning for Yola. If I give you the HTML and .CSS, you can see that it works fine when tested. But it is altered when in Yola. You have permission to access me account to take a look if that is easier :)
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi Kade,
Sanja is currently offline, however, she will gladly look into this further with you when she arrives back online. Thanks for your patience!