John Carney
asked on
Modifying easy slider javascript for use with a button
I would like to use this script for a nav button. How do I modify it so that it runs when I mouseover over the image instead of when I mouseover over the hyperlink text 'next'?
I've included the html and css for the menu, since I assume they will need to be modified as well.
Thanks!
John
I've included the html and css for the menu, since I assume they will need to be modified as well.
Thanks!
John
JAVASCRIPT:
(function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
orientation: '', // 'whatever' is optional;
speed: 200
};
var options = $.extend(defaults, options);
return this.each(function() {
obj = $(this);
var s = $("li", obj).length;
var w = obj.width();
var h = obj.height();
var ts = s-1;
var t = 0;
var whatever = (options.orientation == 'whatever');
$("ul", obj).css('height',s*w);
if(!whatever) $("li", obj).css('float','left');
$(obj).after('<span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span> <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>');
$("a","#"+options.prevId).hide();
$("a","#"+options.nextId).hide();
$("a","#"+options.nextId).mouseover(function(){
animate("next");
if (t>=ts) $(this).fadeOut();
$("a","#"+options.prevId).fadeIn();
});
$("a","#"+options.prevId).mouseout(function(){
animate("prev");
if (t<=0) $(this).fadeOut();
$("a","#"+options.nextId).fadeIn();
});
function animate(dir){
if(dir == "next"){
t = (t>=ts) ? ts : t+1;
} else {
t = (t<=0) ? 0 : t-1;
};
if(!whatever) {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
options.speed
);
} else {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p },
options.speed
);
}
};
if(s>1) $("a","#"+options.nextId).fadeIn();
});
};
})(jQuery);
CURRENT HTML:
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
CURRENT CSS:
#menu li{
width: 120px;
list-style: none;
float: left;
padding: 0px 2px;
font-size:12px;
display:inline-block;
}
/*#menu li a
{
display: block;
height:38px;
line-height:28px;
padding: 3px 0px 0px 0px;
background:url(../images/BtnGreen120x38.png) no-repeat;
text-align: center;
text-decoration: none;
color:white
}
#menu li a:hover
{
background:url(../images/BtnGreenHover120x38.png);
font-weight:bold;
letter-spacing: 0.2em;
font-style: italic;
}
ASKER
That's what I figured but that's exactly what I don't know how to do! :-)
I tried replacing next with the url of my default button image (images/01.png) and "prev' with my hover image (images/02.jpg) and of course that didn't work.
I'm guessing that perhaps the sript is looking for an id? In any event there are 11 instances of the word 'next' in the script, and 9 of 'prev', so I don't know where to begin.
Could you please re-post the entire script with all the necessary changes.
Thanks,
John
I tried replacing next with the url of my default button image (images/01.png) and "prev' with my hover image (images/02.jpg) and of course that didn't work.
I'm guessing that perhaps the sript is looking for an id? In any event there are 11 instances of the word 'next' in the script, and 9 of 'prev', so I don't know where to begin.
Could you please re-post the entire script with all the necessary changes.
Thanks,
John
Yes well, you see - this script is funny because it just creates not one link "next" and one "prev" but for every image it creates "prev" "next" links. So in fact when you press it, it has an information what image to show next (what is intresting way and very clear hhuh). To make it work in your case, well,...
Just delete those functions there, and do that:
under animate function make another one:
function animateTo(number)
{
t=number-1;
animate("next");
}
and now just attach this function to your buttons ;)
Just delete those functions there, and do that:
under animate function make another one:
function animateTo(number)
{
t=number-1;
animate("next");
}
and now just attach this function to your buttons ;)
ASKER
Forgive me for being so dense, but please re-post the entire javascript with your changes or else I know I won't get it.
Also please give me the exact code whereby I attach this function to my buttons.
Remember, my button images don't appear in the html. They are background images in the css:
#menu li a
{
display: block;
height:38px;
line-height:28px;
padding: 3px 0px 0px 0px;
background:url(../images/B tnGreen120 x38.png) no-repeat;
text-align: center;
text-decoration: none;
color:white
}
#menu li a:hover
{
background:url(../images/B tnGreenHov er120x38.p ng);
font-weight:bold;
letter-spacing: 0.2em;
font-style: italic;
}
Thanks,
John
Also please give me the exact code whereby I attach this function to my buttons.
Remember, my button images don't appear in the html. They are background images in the css:
#menu li a
{
display: block;
height:38px;
line-height:28px;
padding: 3px 0px 0px 0px;
background:url(../images/B
text-align: center;
text-decoration: none;
color:white
}
#menu li a:hover
{
background:url(../images/B
font-weight:bold;
letter-spacing: 0.2em;
font-style: italic;
}
Thanks,
John
Sorry for delay, I was getting breath on weekend ;)
Can you give me some example page with this script included and the call to funcitons itself? I want to see something :)
Can you give me some example page with this script included and the call to funcitons itself? I want to see something :)
ASKER
Me. too, sorry for being away from the question. Here's a link to a further simplified html file: http://www.discretedata.com/JCRD/easySlider/sliderDem.html
Basically I want the div slider turned into a button so that when you mousevoer the default image, the "hover" image slides up.
I imagine there's an easier way to create this kind of dynamic button, and please let me know if there is.
But also it would be useful to be able tomouseover an image and a have a new one would slide up; then upon mouseout, the old original one would slide back down.
Thanks,
John
Basically I want the div slider turned into a button so that when you mousevoer the default image, the "hover" image slides up.
I imagine there's an easier way to create this kind of dynamic button, and please let me know if there is.
But also it would be useful to be able tomouseover an image and a have a new one would slide up; then upon mouseout, the old original one would slide back down.
Thanks,
John
Could you give a working wersion on this link ? I mean - those when hovering on links works :) I have to images and no other things that I could simulate at my place so...:/
ASKER
Hi wilq32, I'm not sure what you mean by a "working version on this link." What you see on the link is all I have. I don't have anything that does anything on hover.
Thanks,
John
Thanks,
John
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
make sure that you have jquery.js there
ASKER
Please forgive me for being gone so long, and thank you for your very helpful post. Here are 2 links, one to my adaptation of your code (http://www.discretedata.com/jquery/easyslider1.5/ezslide_wilq32.html) and one to my adaptation of the original jquery versiuon(http://www.discretedata.com/jquery/easyslider1.5/ezslide.html).
I think that to have this work as a button, we would need something that would a) work when you mouseover the image itself and b) keep the "other image" invisible when mousing over.
If that would be an easy thing now that you have some actual pages to work with, great. If you've had enough of this question, let me know and I'll just award you the points for your last answer.
Thanks,
Jon
I think that to have this work as a button, we would need something that would a) work when you mouseover the image itself and b) keep the "other image" invisible when mousing over.
If that would be an easy thing now that you have some actual pages to work with, great. If you've had enough of this question, let me know and I'll just award you the points for your last answer.
Thanks,
Jon
What you need is to add another DIV around <div class="cut">
cutAround need to have:
width:120px;
height:38px;
overflow:hidden;
and cut need to have only:
width:3000px;
Should be ok;)
cutAround need to have:
width:120px;
height:38px;
overflow:hidden;
and cut need to have only:
width:3000px;
Should be ok;)
<div class="cutAround">
<div class="cut">
<div id="move">
<div class="box"><img src="images/BtnGreen120x38.png" width="120" height="38"></div>
<div class="box"><img src="images/BtnGreenHover120x38.png" width="120" height="38"></div>
</div>
</div>
</div>
<button id="anim1" class="overButton"> 1</button>
<button id="anim2" class="overButton"> 2</button>
ASKER
That's great. It solves the problem of the two images both showing on load, thanks.
Now how do I modify it so that I can get rid of the standard 1-2 buttons, and get the "slide in-slide out" by mousing over the green buttons themselves? That's what I want to be able to do.
Thanks,
John
Now how do I modify it so that I can get rid of the standard 1-2 buttons, and get the "slide in-slide out" by mousing over the green buttons themselves? That's what I want to be able to do.
Thanks,
John
Thats strange what you want to achieve - how do you suppose that should work ? button will go to next state when you mouseover it ? so to change state you have to get out using mouse and get back ? Thats kind of behaviour that users wont find :)
ASKER
Can we add something that says in effect:
1) on mouseout, go to the original image
2) on click, go to the original image
1) on mouseout, go to the original image
2) on click, go to the original image
Well we could but I though that you want to have more that 2 states - if you want only two states by scrolling on and out we could do this completly diffrent and easier....
ASKER
Yes let's try just the two states. Different AND easier sounds great. Thanks.
Sorry but it was almost month ago.. I completly lost focus what we want to do here... Can you please define from begining in short sentence user story for how it should work and for what is that ? So maybe there is other solution as I mention before :)
ASKER
wilq32, I've decide to close this question nd open a new followup question so you can score a higher grade after all the work you've put into this. Check it out: https://www.experts-exchange.com/questions/24469690/Creating-javascript-buttons-that-slide-fade-in-and-out-between-states.html
Thanks,
John
Thanks,
John
ASKER
Thanks again!
$("a","#"+options.nextId).
animate("next");
if (t>=ts) $(this).fadeOut();
$("a","#"+options.prevId).
});
$("a","#"+options.prevId).
animate("prev");
if (t<=0) $(this).fadeOut();
$("a","#"+options.nextId).
});
Just connect mouseover and mouseout to your images instead of this buttons and it should work ok :)