Loading...

Search jQuery

Search

jQuery Forum

Using jQuery Plugins

davy_yg

Programming nav button for jquery

in Using jQuery Plugins • 4 months ago

Hi,

I have this jquery slideshow but no navigation. at this point the navigation is numbering 1 2 3 (according to the number of slides). I would like to change it to button nav as attached.

Can anyone help me edit the JS file or show me how to (I hardly know js)?

(Mmm.. Am I not able to attached JS or php file?)

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function() {
    $('#slideshow').before('<div id="nav" class="nav">').cycle({
        fx:     'fade',
        speed: 'fast',
        timeout: 3000,
        pager: '#nav',
        before: function() { if (window.console) console.log(this.src); }
    });
});
</script>
</head>
<body>
<h2 id="header">This page shows how to create a pager that auto-advances.</h2>
<div id="main">
<div id="demos">
    <table cellspacing="20"><tr>
    <td>
        <div id="slideshow" class="pics">
            <img src="images/bannerside.png">
            <img src="images/bannerside2.png">
            <img src="images/bannerside3.png">
        </div>
    </td></tr>
    </table>

Well, if possible I would like to attached the JS code (since it's 1500 line long) I also do not know what to search to change the navigation since I hardly know JS. I am a freelance web developer that's still new to JS. I have the design and need to create codes exactly like the design.

Attachments

bannerside.png
Size : 23.17 KB Download : 336

1

Replies(27)

Re: Programming nav button for jquery

4 months ago

Try changing you're first line from: "$(function() {" to "$(document).ready(function() {"

If that doesn't work, the check for any JS errors in Firefox.

davy_yg

Re: Programming nav button for jquery

4 months ago

Well,

I tried changing the line but it doesn't add the button navigation. The slideshow already running (the picture keep changing automatically from one pic to the next. but the button navigation button is not functioning. How to create them ? The picture that I attached is simply picture the code for the button navigation button is not written yet. (only numbers navigation above it - which I plan to disable)

Here is the <script type="text/javascript" src="js/jquery.cycle.all.js"></script>

Jquery cycle all

Could anyone help modify it or tell me how to do it ?

Here is what I've done so far: http://www.masterlink.co.id/slideshow2.php

Re: Programming nav button for jquery

4 months ago

link provided won't open

make a sprite for your round buttons and use the pager activeclass to change sprite background of your pager anchors

davy_yg

Re: Programming nav button for jquery

3 months ago

How to link the sprite background to the pager anchors ? Where is the pager anchors ? Are you sure the link won't open ? since I am able to open both link.

sidebanner.css

.button {
background: url(../images/buttonnav.png) no-repeat 0 0;
width: 100px;
height: 50px;
display: block;
text-indent: -9999px;
}
.button a:hover { background-position: 0 -2px; }
.button a:active { background-position: 0 -8px; }

slideshow2.php

       <link rel="stylesheet" type="text/css" media="screen" href="../sidebanner.css" />

       <div class="button">Button</div>

That's what I have done to change the nav background. but it does not work yet.

The image is this big:

buttonnav.png
I-I
I-I The image is this big:

Re: Programming nav button for jquery

3 months ago

you have anchor tags <a> in div id="nav".

Position that div over top of slide container with a higher z-index than slides and use css to style them

davy_yg

Re: Programming nav button for jquery

3 months ago

what should I do besides the z-index ?

I have tried defining the navigation z-index higher then the slideshow. Instead of moving the navigation on top of the slides, it presses the slideshow downward. Besides that, I do not know how to erase the number navigation.

davy_yg

Re: Programming nav button for jquery

3 months ago

http://www.masterlink.co.id/slideshow2.php

1) How to create button without the text. If erase the text then the button also disappeared.

2) The image does not change when I place cusor on it. It suppose to change.

This is the original image file:

http://www.masterlink.co.id/images/buttonnav.png

slideshow.php

<div id="nav">Button</div>

sidebanner.css

#nav {
background: url(images/buttonnav.png);
background-repeat:no-repeat;
z-index: 5;
margin: 50px 0 0 0;
}
#nav a:hover { background-position: -40px 0; }
#nav a:active { background-position: 0 0; }
#slideshow {
z-index: 1;
}

Re: Programming nav button for jquery

3 months ago

is fairly straightforward css... give <a> some dimensions and display:inline-block

davy_yg

Re: Programming nav button for jquery

3 months ago

I wonder why I cannot control the slideshow css.

sidebanner.css

#nav a:link {
background: url(images/buttonnav.png);
background-repeat:no-repeat;
background-position: 0 -25px;
z-index: 5;
margin: 50px 0 0 0;
display: inline-block;
width: 20px;
}
/* mouse over */
#nav a:hover { background: url(images/buttonnav.png);
      background-repeat:no-repeat;
      background-position: 0 -5px;
      display: inline-block;
      width: 20px; }
/* selected link */
#nav a:active { background: url(images/buttonnav.png);
      background-repeat:no-repeat;
      background-position: 0 -5px;
      display: inline-block;
      width: 20px; }
#slideshow {
z-index: 1;
width: 200px;
}slideshow2.php

slideshow.php

<script type="text/javascript">
$(document).ready(function() {
    $('#slideshow').before('<div id="nav" class="nav">').cycle({
        fx:     'fade',
        speed: 'fast',
        timeout: 3000,
        pager: '#nav',
        before: function() { if (window.console) console.log(this.src); }
    });
});
</script>
</head>
<body>
<h2 id="header">This page shows how to create a pager that auto-advances.</h2>
<div id="main">
<div id="demos">
    <table cellspacing="20"><tr>
    <td>
        <div id="slideshow">
            <img src="images/bannerside.png">
            <img src="images/bannerside2.png">
            <img src="images/bannerside3.png">
        </div>
    </td></tr>
    </table>

http://localhost/ocklaw/slideshow2.php

Jquery Cycle All

I cannot move the navigation overlapping the slideshow. And also how to erase the number navigation ?

Also, I have tried to control the slideshow with css but it does not work.

Re: Programming nav button for jquery

3 months ago

in order for pager to be over top of slides you need an outer container that holds both and is position:relative

then position slide container and pager accordingly within the outer container

a <td> will not work, wrap slide container in an outer div

davy_yg

Re: Programming nav button for jquery

3 months ago

I still do not get it.

Do you mean like this:

sidebanner.css

#container {
position:relative;
}
#nav a:link {
background: url(images/buttonnav.png);
background-repeat:no-repeat;
background-position: 0 -25px;
margin: 50px 0 0 0;
display: inline-block;
width: 20px;
z-index: 0;
}
/* mouse over */
#nav a:hover { background: url(images/buttonnav.png);
      background-repeat:no-repeat;
      background-position: 0 -5px;
      display: inline-block;
      width: 20px;
     }
/* selected link */
#nav a:active { background: url(images/buttonnav.png);
      background-repeat:no-repeat;
      background-position: 0 -5px;
      display: inline-block;
      width: 20px;
     }
#slideshow{
background: white;
z-index: 1;
width: 200px;
}

slideshow2.php

   <div id="container">
        <div id="slideshow">
            <img src="images/bannerside.png">
            <img src="images/bannerside2.png">
            <img src="images/bannerside3.png">
        </div>
</div>

There is no difference. Or can you show me what's the code like ?

Re: Programming nav button for jquery

3 months ago

example

http://jsfiddle.net/avPJn/

davy_yg

Re: Programming nav button for jquery

3 months ago

I try this:

sidebanner.css

#container {
width: 200px;
height: 200px;
position:relative;
}
#nav {
background: url(images/buttonnav.png);
background-repeat:no-repeat;
background-position: 0 -25px;
position: absolute;
bottom: 20px;
left: 20px;
display: inline-block;
width: 20px;
z-index: 2;
}
#nav a:link {
background: url(images/buttonnav.png);
background-repeat:no-repeat;
background-position: 0 -25px;
bottom: 20px;
left: 20px;
display: inline-block;
width: 20px;
z-index: 2;
}
/* mouse over */
#nav a:hover { background: url(images/buttonnav.png);
      background-repeat:no-repeat;
      background-position: 0 -5px;
      bottom: 20px;
            left: 20px;
      display: inline-block;
      width: 20px;
      z-index: 2;
     }

#nav li{ float:left; padding-right:10px;}

/* selected link */
#nav .activeSlide a{ background: url(images/buttonnav.png);
      background-repeat:no-repeat;
      background-position: 0 -5px;
      bottom: 20px;
            left: 20px;
      position: absolute;
               display: inline-block;
      width: 20px;
      float: left;
      z-index: 2;
     }
#slideshow{
background: white;
z-index: 1;
width: 200px;
}

slideshow2.php

<div id="container">
        <div id="slideshow">
            <img src="images/bannerside.png">
            <img src="images/bannerside2.png">
            <img src="images/bannerside3.png">
        </div>
</div>

http://www.masterlink.co.id/slideshow2.php

1) The button is vertical

2) The numbers still remain there. I do not know how to erase them.

Re: Programming nav button for jquery

3 months ago

if you are using console look at generated html..will see that you have <a> as child of <ul> in pager which is invalid html and can also see css rules that apply

I used a pagerAnchorBuilder return that didn't include numbers but you can use css text indent to move them off screen also

davy_yg

Re: Programming nav button for jquery

3 months ago

Yea,

How to code it ? Do I have to code it from the beginning ? Can I just modify or add the code ?

Thanks.

Re: Programming nav button for jquery

3 months ago

use the example code I gave you on jsfiddle.net and adjust your css accordingly

davy_yg

Re: Programming nav button for jquery

3 months ago

slideshow2.php

<script type="text/javascript">
$(document).ready(function() {
    $('#slideshow').before('<ul id="nav" class="nav">').cycle({
        fx:     'fade',
        speed: 'fast',
        timeout: 3000,
        pager: '#nav',
  pagerAnchorBuilder: function(idx, slide) {
        return '<li><a href="#"></a></li>';
        before: function() { if (window.console) console.log(this.src); }
    });
});
</script>

Re: Programming nav button for jquery

3 months ago

you haven't closed the pagerAnchorBuilder function

I realize you said you weren't strong with javascript but brackets and commas are very important to follow proper syntax.

If you are using console you will see the script errors reported there and should see a syntax error. If you aren't using console your before function does nothing so just remove it.

You can use jslint.com to verify syntax also

davy_yg

Re: Programming nav button for jquery

3 months ago

I am using dreamweaver and XAMPP.

Is that not a closing brackets:

pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"></a></li>';
}

Do you mean like that ? If it is, it still does not work.

Re: Programming nav button for jquery

3 months ago

worked fine in demo... post a link

davy_yg

Re: Programming nav button for jquery

3 months ago

http://www.masterlink.co.id/slideshow2.php

Re: Programming nav button for jquery

3 months ago

link doesn't include pagerAnchorBuilder code

davy_yg

Re: Programming nav button for jquery

3 months ago

It's updated now.

Re: Programming nav button for jquery

3 months ago

you have syntax errors not closing all brackets

I could rewrite your code but it would be a duplication of the demo and waste of time. Use a debugging console to look for errors. All I had to do was open your page and console showed me the problem immediately

davy_yg

Re: Programming nav button for jquery

3 months ago

How to install the debugging console? My dreamweaver does not show me the errors.

Re: Programming nav button for jquery

3 months ago

debug in browser not dreamweaver , tools available there

davy_yg

Re: Programming nav button for jquery

3 months ago

I am using IE for my browser. How to debug in browser ? Where is the debugging tools ?

By the way, why the slides now turns in vertical row. What's wrong with it ? I forget what code have I change until it turns that way.