Develop Reference

JQuery slider with fixed minimum value

I'm trying to make a slider where :
the min/max values are 0/100% (That I can do)
it has a fixed first value that cannot be change and is filled with a color (Let say 30% for the example)
it has an handler to complete the previous value (eg: From 30% to 100%) and will be filled with another color.
Here is that it should look like. '=' is the fixed first value, '-' is what we add, '_' is what remains :
[===|_____] A first
[===------|_] When we move the handler
I tried to make it with a range slider, hiding the first handler but I had a problem with the color thing. All I did was putting a color to the entire background, which is not my goal.

Create a div with background-color for each handler and append them to slider.
$(document).ready(function () {
var minFixedValue = 10;
var maxValue = 30;
var updateEvent = function (event, ui) {
if (ui != undefined) {
var index = $(ui.handle).index();
if (index === 1) return false;
}
$('#slide1 .slide-back').remove();
var backgrouldColorSettings = ['blue', 'grey']
$($('#slide1 a').get().reverse()).each(function (i) {
$('#slide1').append(
$('<div></div>').addClass('slide-back')
.width($(this).offset().left - 5)
.css('background', backgrouldColorSettings[i]));
});
};
$('#slide1').slider({
range: true,
slide: updateEvent,
change: updateEvent,
values: [minFixedValue, maxValue]
});
updateEvent();
});
See jsFilddler here

jQuery - use .hover instead of .click

I have the following code on my page.
http://jsfiddle.net/SO_AMK/r7ZDm/
As you see it's a list of links, and every time a link is clicked, the popup box opens up right underneath the link in question.
Now, what I need to do is basically the same, except I need to use the .hover event and delay the execution by 2 seconds. So instead of clicking, the user should keep the cursor over a link for 2 seconds.
Sounds simple enough but I can't get the positioning to work properly. here's what I tried:
$('a.showreranks').hover(function()
{
$(this).data('timeout', window.setTimeout(function()
{
position = $(this).position();
$('#rerank_details').css('top', position.top + 17);
$('#rerank_details').slideToggle(300);
}, 2000));
},
function()
{
clearTimeout($(this).data('timeout'));
});
Can someone modify this to make it work?

Try like this:
$('a.showreranks').hover(function()
{
var self = this;
$(this).data('timeout', window.setTimeout(function() {
var position = $(self).offset();
$('#rerank_details').css('top', position.top + 17);
$('#rerank_details').slideToggle(300);
}, 2000));
},
function()
{
clearTimeout($(this).data('timeout'));
});
DEMO

jsFiddle demo
$('ul').on('mousemove','li',function(e){
var m = {x: e.pageX, y: e.pageY};
$('#rerank_details').css({left: m.x+20, top: m.y-10});
}).on('mouseenter','li',function(){
var t = setTimeout(function() {
$('#rerank_details').stop().slideDown(300);
},2000);
$(this).data('timeout', t);
}).on('mouseleave','li',function(){
$('#rerank_details').stop().slideUp(300);
clearTimeout($(this).data('timeout'));
});
The setTimeout will act like a hover intent that actually delays the execution for 2 seconds and counts the time hovered inside a data attribute of the hovered element - that gets 'nulled' on mouseleave.
I added also a few lines of code that will make your tooltip follow the mousemove.

position not changing

I'm trying to move a div to one side or the other depending on it's position, BUT! no matter what method I use to chance its position, it doesn't really change.
var $ancho = $(document).width();
var $posP = $("#portafolio").offset().left;
var $porP = Math.floor($posP * 100 / $ancho);
the var porP saves the percentage of the div's (portafolio) position
Now, the initial position of portafolio is 13(%)
if($porP == '13')
{
$("#portafolio").mouseenter(function(){
$("#imge").stop().fadeTo('500', 0.3, function() {});});
$("#portafolio").mouseleave(function(){
$("#imge").stop().fadeOut('500', function() {});
});
$("#portafolio").click(function(){
$("#portafolio").animate({
left: "+=87%",},
{ queue: false, duration: 900, easing:'swing' });
$("#imge").fadeTo('500', 0.3, function() {
});
$(iframe).attr('src','portafolio.html');
$("#marco").fadeTo('500', 1 , function() {});
$(iframe).open();
});
}
but even when I move portafolio to the right, in the animation function, the porP var still shows 13, therefore it never reaches the else
else
{ move to the other side }
I already tried to assign a new value to the porP var inside the click function but to no avail. It just always executes the IF statement.
Does someone know why the value (porP) doesn't change? and how can I actually change it to make the else finally work?
I searched everywhere and tried everything that came to my mind with my very limited knowledge of jquery and got to nowhere. Please!!
edit// #portafolio is a relative positioned div to its parent #contenido which is absolute positioned and is left 20px . #portafolio is left 15% . I don't know if that has something to do.

Alice, I'm not sure exactly what you're trying to do, but the if and else statements probably should be inside the 'click()' handler. Something like,
$("#portafolio").click(function(){
var $ancho = $(document).width();
var $posP = $("#portafolio").offset().left;
var $porP = Math.floor($posP * 100 / $ancho);
if($porP == '13')
{
$("#portafolio").animate({
left: "+=87%",},
{ queue: false, duration: 900, easing:'swing' });
$("#imge").fadeTo('500', 0.3, function() {
});
$(iframe).attr('src','portafolio.html');
$("#marco").fadeTo('500', 1 , function() {});
$(iframe).open();
}
else
{ move to the other side }
});

javascript - position not being set properly on page load

I am creating a coverflow plugin but I have a slight problem when it first loads.
The size/styles of the images is set based on their position in the coverflow. When the page first loads the images all resize properly but they do not reposition themselves. If I them use the left and right navigation they work correctly.
I am not sure what is causing this. I thought it might be something to do with the variable that sets the starting position of the coverflow...
Here's my code:
<script type="text/javascript" src="/scripts/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var coverflowPos = Math.round($('#coverflow img').length / 2)
$('#coverflow img').each( function(i) {
$(this).css({'opacity' : 1-(Math.abs(coverflowPos-i)*0.4), 'z-index' : 100-(Math.abs(coverflowPos-i)) }).width(200-(Math.abs(coverflowPos-i)*50)).height(128-(Math.abs(coverflowPos-i)*50));
});
// If I run the testme() function here, it animates to the right place but I want it to start in this position rather than animate to it
$('#moveLeft').click( function() {
if(coverflowPos > 1) {
coverflowPos = coverflowPos-1
}
testme();
});
$('#moveRight').click( function() {
if(coverflowPos < $("#coverflow img").length -1) {
coverflowPos = coverflowPos+1
}
testme();
});
function testme() {
$('#coverflow img').each( function(i) {
$(this).animate({
opacity: 1-(Math.abs(coverflowPos-i)*0.4),
width: 200-(Math.abs(coverflowPos-i)*50),
height: 128-(Math.abs(coverflowPos-i)*50)
}, {
duration: 500,
easing: 'easeInOutSine'
}).css({ 'z-index' : 100-(Math.abs(coverflowPos-i)) });
});
};
});
</script>
And here's a link to a jsfiddle:
http://jsfiddle.net/r8NqP/4/

Calling testme() at the end of the ready() function moves them into place. It does ease them in though, which looks a bit odd, could get rid of the ease in testme() by adding a doease parameter.

Check you fist each :
'z-index' : 100-(Math.abs(coverflowPos-i)) }).width(200-(Math.abs(coverflowPos-i)*50)).height(128-(Math.abs(coverflowPos-i)*50));
I think U mean:
'z-index' : 100-(Math.abs(coverflowPos-i)),
'width' : 200-(Math.abs(coverflowPos-i)*50),
'height': 128-(Math.abs(coverflowPos-i)*50)
Linke In your testme() function ?!
After that, you can also add a "Hack", by executing testme(true); at the end of script.
And add, in your testme() function , a test parameter to set the duration at 0 or simply disable animate and replace by CSS().
But, it just a Hack.

200-(Math.abs(coverflowPos-i)*50) may be less than 0 -- e.g.,
200-(5-0)* 50= 200 - 250 = -50
And the negative width ends up not being applied, leaving the width at its original 200px value. The opacity gets set properly, so all you get is a huge blank space where the image is.
var width = 200-(Math.abs(coverflowPos-i)*50);
if ( width < 0 ) width = 0;
covers the init nicely.
I haven't bothered to check why it's okay once it's animated -- my guess is, that the images were already small, so it's not as noticeable.

The problem came from "Each index", that not correctly used to compute the Width and Height of the first image.
Try this :
$('#coverflow img').each( function(i) {
i++;
$(this).css({...
And remove the Blank.gif...
Here, you find my fork fiddle : http://jsfiddle.net/akarun/FQWQa/

Using offset and jQuery slider

I am using offset() with the jquery slider and I am so close to achieving my goal, but it is off slighty. I have it animating using animate to the top CSS coordinates but if you check out: http://www.ryancoughlin.com/demos/interactive-slider/index.html - you will see what it is doing. My goal is to have it fadeIn() and display the value to the right of the handle. i know I can offset the text from the handle using a simple margin:0 0 0 20px.
The part is aligning #current_value to the right of the handle. Thoughts?
var slide_int = null;
$(function(){
$("h4.code").click(function () {
$("div#info").toggle("slow");
});
$('#slider').slider({
animate: true,
step: 1,
min: 1,
orientation: 'vertical',
max: 10,
start: function(event, ui){
$('#current_value').empty();
slide_int = setInterval(update_slider, 10);
},
slide: function(event, ui){
setTimeout(update_slider, 10);
},
stop: function(event, ui){
clearInterval(slide_int);
slide_int = null;
}
});
});
function update_slider(){
var offset = $('.ui-slider-handle').offset();
var value = $('#slider').slider('option', 'value');
$('#current_value').text('Value is '+value).css({top:offset.top });
$('#current_value').fadeIn();
}
I know I could use margin to offset it to match, but is there a better way?

There are two problems. The first, like Prestaul said, the slider event fires at the "beginning" of the move, not the end, so the offset is wrong. You could fix this by setting a timeout:
$(function(){
slide: function(event, ui){
setTimeout(update_slider, 10);
},
...
});
function update_slider()
{
var offset = $('.ui-slider-handle').offset();
var value = $('#slider').slider('option', 'value');
$('#current_value').text('Value is '+value).animate({top:offset.top }, 1000 )
$('#current_value').fadeIn();
}
The second problem is that the move is instantaneous, while the animation is not, meaning that the label will lag behind the slider. The best I've come up with is this:
var slide_int = null;
$(function(){
...
start: function(event, ui){
$('#current_value').empty();
// update the slider every 10ms
slide_int = setInterval(update_slider, 10);
},
stop: function(event, ui){
// remove the interval
clearInterval(slide_int);
slide_int = null;
},
...
});
function update_slider()
{
var offset = $('.ui-slider-handle').offset();
var value = $('#slider').slider('option', 'value');
$('#current_value').text('Value is '+value).css({top:offset.top });
$('#current_value').fadeIn();
}
By using css instead of animate, you keep it always next to the slider, in exchange for smooth transitions. Hope this helps!

I had the same problem: the visible value in Jquery Ui slider lags behind from internal value. Fixed the problem by changing the slider event from "slide" to "change".

You just need to use a different event. "slide" fires before the handle is moved so your value is ending up at the previous handle position. Try the "change" event and see if that gets you there.