jquery sliders contain a "animate" opton that when set to "true" will slide the handle into postion when the slider bar is clicked.
Im using my slider to scroll the content in another div, creating a similar eeffect as the one on the apple website. http://www.apple.com/mac/
the problem is that when i click the sliderbar it smoothly animates the handle but not the other div. i have the other div scrolling on the "slide" and "change" events. any ideas how i can achieve smooth scrolling for the other div?
Thanks in advance, oh gods of jQuery.
my code:
var list = $('.sliderGallery ul');
$('.slider').slider({
min:0,
max:1500,
animate: true,
slide: function(event, ui) { list.css('left', '-' + ui.value + 'px'); },
change: function(event, ui) { list.css('left', '-' + ui.value + 'px'); }
});
It's been a while since I used JavaScript but as far as I remember jQuery you can try to do the same thing you are already doing but using animation effect. Try this:
var list = $('.sliderGallery ul');
$('.slider').slider({
min:0,
max:1500,
animate: true,
slide: function(event, ui) { list.animate({'left': '-' + ui.value + 'px'}, 'normal'); },
change: function(event, ui) { list.animate({'left': '-' + ui.value + 'px'}, 'normal'); }
});
This code may not work right away but it hopefully might serve as a starting point. Here's a link to this function documentation: animate( params, [duration], [easing], [callback] ) in Effects/animate.
Related
I have created a website where the users can pull widgets from a pop up modal onto the main drop zone and create widgets. Initially, the widgets are just images eg: BBC. When dragged onto the droppable area they become widgets that pull in information from an API. I have set up location saving using local storage so that when the user refreshes the page, the widgets stay in their location.
The problem I am having, is that the widget will not save its location
until the user has refreshed once, then it will continue to save from
here
I think I know why, i just don't know how to fix it! See info below on what I have gathered.
My code for drag and drop:
$(function () {
$("#techcrunch").draggable({ revert: 'invalid', helper:"clone",
containment:"#dropZonetc",snap: '#dropZonetc',addClasses: false});
$( "#dropZonetc" ).droppable({
accept: '#techcrunch',
activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active',
drop: function( event, ui ) {
var offset = ui.helper.offset();
var dropElem = ui.helper.clone()
$(dropElem).html("<div id='techcrunchwidget' class='widgets'><img src='http://i.newsapi.org/techcrunch-s.png' alt='Tech Crunch' height='22' width='100'><button class='closewidget' onclick='destroytechcrunch()'>X</button><div class='techCrunchContent'><ul id='techcontent'></ul><script>retrieveTechCrunchNews();</script></div></div>");
dropElem.appendTo( this ).offset( offset ).hide().fadeIn(1500);
localStorage.setItem("techcrunch", "true");
$( "#techcrunch" ).remove();
$("div.widgets").draggable();
}
});
});
My code for saving the location:
$(function () {
var widget3 = $("#techcrunchwidget");
updatePosition3(widget3);
widget3.draggable({ stop: function () {
var left = this.offsetLeft;
var top = this.offsetTop;
console.log(left);
console.log(top);
localStorage.setItem("lefttech", left);
localStorage.setItem("toptech", top);
$("div.widgets").draggable();
}
});
window.addEventListener("storage", function (e) {
updatePosition3(widget3);
},
false);
});
function updatePosition3(widget3) {
var left = localStorage.getItem("lefttech");
var top = localStorage.getItem("toptech") - 20;
widget3.css({ left: left + "px", top: top + "px" });
widget3[0].offsetTop = top;
widget3[0].offsetLeft = left
}
**
I am 80% sure it is because I am appending the dropElem which is a
clone, therefore the save script is not finding the "techcrunchwidget"
as it is the clone until refresh, this can be seen in the image below
**
Chrome Element Inspecter
Once refreshed, it is not wrapped in that wierd class.
Thanks for your time!
I would try simply append the new HTML in drop and just remove the helper.
drop: function( event, ui ) {
var offset = ui.helper.offset();
var $widget = $("<div id='techcrunchwidget' class='widgets'><img src='http://i.newsapi.org/techcrunch-s.png' alt='Tech Crunch' height='22' width='100'><button class='closewidget' onclick='destroytechcrunch()'>X</button><div class='techCrunchContent'><ul id='techcontent'></ul><script>retrieveTechCrunchNews();</script></div></div>");
$widget.appendTo(this).offset(offset).hide().fadeIn(1500);
localStorage.setItem("techcrunch", "true");
ui.helper.remove();
$("#techcrunch").remove();
$("div.widgets").draggable();
}
Untested solution.
Starting by simply generating a draggable box, and a handle at the top using jquery-ui draggable().
However, sometime the content inside of the box can be flash and this tends to cause the dragging function to move too slowly. I decided to move to a ghosting type system where you drag it and it shows a box where you are moving it, and then moves it to the location you drop this.
I have gotten it running perfectly in Chrome/Firefox, but cannot get it to run in either IE8 or IE9. Wondering if anyone had any suggestions. Below is the jquery specific code.
$(document).ready(function () {
$container = $('#container');
$container.draggable({
handle: "#header",
containment: "parent",
scroll: false,
helper: function () {
return "<div class='dragbox' style='width:" + ($container.width()) + "px;height:" + ($container.height()) + "px'></div>";
},
stop: function (e, ui) {
var top = ui.position.top,
left = ui.position.left;
$container.css({
'top': top + "px",
'left': left + "px"
});
}
});
});
Example can be found at http://jsfiddle.net/Ep5wu/.
Thanks in advance!
The argument 'ui' in drag stop event is the element that is dragged itself and not the the 'helper' div (green box) .. you need the top/left values of the 'helper' after the drag stops.
Try this ..works in IE10
$(document).ready(function () {
$container = $('#container');
$container.draggable(
{
handle: "#header", scroll: false,
helper:function () {
return "<div class='dragbox' style='width:" + ($container.width()) + "px;height:" + ($container.height()) + "px'></div>";
},
stop: function (e, ui) {
console.log(ui.helper);
var top = $(ui.helper).offset().top;
var left = $(ui.helper).offset().left;
$container.css({
'top': top + "px",
'left': left + "px"
});
}
});
});
Fiddle here : http://jsfiddle.net/Ep5wu/16/
I am using jQuery UI Slider in a div which is dragable. On clicking the slider, the event propogated and the div starts to drag! Is there a way to stop its propogation on the mouse down event?
Using return false doesn't work to me.
$('#slider-' + boxId).slider(
{
step: 0.2,
min: 0.2,
max: 2,
value: [1],
stop: function( event, ui )
{
var value = 0.2;
value = ui.value;
$('#' + boxId + ' .timeText').text(value + ' secs');
$('#' + boxId).attr('data-time' , value);
_timeLineUtility.reCalculateAll();
return false;
},
slide: function (event, ui)
{
return false;
},
start: function(event, ui) { return false; }
});
event.stopPropagation()
http://api.jquery.com/event.stopPropagation/
Here is a possible duplicate - Stopping propagation of mousedown/mouseup from a click handler
Try using this
event.stopPropagation()
I have an image which when onmousedown is triggered, it runs a function that changes its class and makes it draggable, however the first time I drag it it wont drag, it changes the class but will not drag? After the intial failed drag, if you then drag again it will drag but why wont it drag at first?
function element_click(element_class) {
$("#" + element_class).draggable("enable");
$("." + element_class).addClass("element_select");
$("#" + element_class).draggable({
disabled: false,
opacity: 0.9,
revert: true,
stop: function(event, ui) {
$(".element_select").removeClass('element_select');
$("#" + element_class).addClass(element_class);
$("#" + element_class).draggable("disable");
}
});
}
<img id="element_air_1" style="z-index: 5;" class="element_air_1"
onmousedown="javascript: element_click('element_air_1')"
src="Doodle God Elements/air.png">
You're meant to make it draggable once when it's added to the DOM, before it gets dragged for the first time.
Add this block of code to your script:
window.onload = function(){
element_click($('#element_air_1').attr('class'));
}
It will trigger your script before your first click.
I have a set of images placed as position:relative (showing one next to the other).
I use this code to drag and drop them (stolen from the jQuery API documentation, modified to my needs).
$(function() {
$( ".draggable" ).draggable({
start: function(event, ui) {
// Show start dragged position of image.
var Startpos = $(this).offset();
$("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
pos_left = Startpos.left; //pos_left is global
pos_top = Startpos.top; //pos_top is also global
},
stop: function(event, ui) {
// Show dropped position.
var Stoppos = $(this).offset();
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
$(this).css('position', "fixed"); //tried absolute and relative, too
$(this).css('left', pos_left);
$(this).css('top', pos_top);
}
});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
id = $(this).attr('id');
alert(id);
}
});
});
What I am trying to do is to return the draggable element to its initial position, after user drops it. However because my elements are relatively positioned the initial left,top coords are the same for all of them (or this is what I understand from the documentation -- I might be wrong here). So although images return, they actually stack each one on top of the other.
What am I doing wrong? What am I supposed to do?
Well. Instead of doing that by yourself use the revert option of the draggable. From the jQuery UI docks:
$( ".selector" ).draggable({ revert: true });
You could make its position relative, top=0px, and left=0px. Worked for me with this code:
$(function(){
$('#draggable').draggable().append('<a href=# class=exit>x</a>');
});
$(function(){
$('.exit').click(function(){
$('#draggable').css({
'top': '0px',
'left': '0px',
'position': 'relative'
});
});
});