I need to have a jQuery UI draggable element inside a Slick-slider. I know that jQuery UI has the handles option http://jqueryui.com/draggable/#handle but I'm not sure how to apply this to the slick-slider.
I found this SO question: jQuery UI Slider Interference with slick carousel but it's using jQuery UI's slider option. When I did something similar on my example I was able to disable the slick-slider dragging... But my draggable elements still aren't draggable.
JSfiddle: http://jsfiddle.net/NateW/u1burczm/
How do I disable dragging on the Slick-slider only when it's inside one of my draggable elements and still have the draggable elements draggable?
HTML:
<div class="wrapper-slider">
<div>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<div id="draggable" class="ui-widget-content">
<p>and me!</p>
</div>
</div>
<div><h3>1</h3><h3>1</h3><h3>1</h3></div>
<div><h3>2</h3><h3>2</h3><h3>2</h3><h3>2</h3></div>
<div><h3>3</h3><h3>3</h3></div>
</div>
JS:
$('.wrapper-slider').slick({
dots: false,
infinite: false,
centerPadding: "20px",
speed: 300,
slidesToShow: 1,
adaptiveHeight: true
});
$(function() {
$( ".draggable-element" ).draggable();
});
$(".draggable-element").on("draggable mouseenter mousedown",function(event){
event.stopPropagation();
});
for that to work you need to unbind the dragstart event registered by slick slider like follow before binding the draggble to element
$('.wrapper-slider').slick({
dots: false,
infinite: false,
centerPadding: "20px",
speed: 300,
slidesToShow: 1,
adaptiveHeight: true
});
$(function() {
$('*[draggable!=true]','.slick-track').unbind('dragstart');
$( ".draggable-element" ).draggable();
});
$(".draggable-element").on("draggable mouseenter mousedown",function(event){
event.stopPropagation();
});
here is working jsfiddle
http://jsfiddle.net/samcoolone70/u1burczm/3/
Related
I have multiple nested JQuery UI accordions - one accordion contains another.
Look at the attached fiddle and the animation (or rather missing animation) after unfolding the nested accordion which is not visible at first. It's hard to explain by words.
How can i achieve a smooth "pushing" animation?
HTML with accordions:
<div id="accordion_broadcasts">
<div id="acc_broadcasts_header">
<div class="accordion_descriptions">
<div class="acc_descriptions_header">
<table class="broadcast_table">
<tr class="broadcast_tr">
<td class="broadcast_td1">foobar</td>
<td class="broadcast_td2">CLICK (working)</td>
</tr>
</table>
</div>
<div>
only visible if unfolded
</div>
</div>
</div>
<div>
<div class="accordion_descriptions">
<div class="acc_descriptions_header">
<table class="broadcast_table">
<tr class="broadcast_tr">
<td class="broadcast_td1">foobar</td>
<td class="broadcast_td2">CLICK (poorly animated)</td>
</tr>
</table>
</div>
<div>
only visible if unfolded
</div>
</div>
</div>
</div>
Javascript:
//Outer accordion
$( "#accordion_broadcasts" ).accordion({
collapsible: true,
active: false,
disabled: true,
header: "#acc_broadcasts_header",
activate: function(event, ui) {
$( ".accordion_descriptions" ).accordion("refresh");
$( "#accordion_broadcasts" ).accordion("refresh");
}
});
//Inner accordion
$( ".accordion_descriptions" ).accordion({
collapsible: true,
active: false,
header: ".acc_descriptions_header",
disabled: true,
activate: function(event, ui) {
$( ".accordion_descriptions" ).accordion("refresh");
$( "#accordion_broadcasts" ).accordion("refresh");
}
});
//fold outer accordion
$("#unfold_broadcast").click(function(){
if ($("#accordion_broadcasts").accordion( "option", "active") === false){
$( "#accordion_broadcasts" ).accordion({active: 0});
}
else{
$( "#accordion_broadcasts" ).accordion({active: false});
}
$( "#unfold_broadcast" ).remove();
});
//fold inner accordion
$(".broadcast_td2").click(function(){
if ($(this).closest(".accordion_descriptions").accordion( "option", "active") === false){
$(this).closest(".accordion_descriptions").accordion({active: 0});
}
else{
$(this).closest(".accordion_descriptions").accordion({active: false});
}
});
JSFiddle
Note 1: The jsfiddle example is a simplified version of my actual code. The problem remains the same.
Note 2: There are probably some unnecessary refresh calls on these accordions. I've played around with the refresh method until the accordions worked somewhat.
The magic is to add heightStyle: "content" to the properties of the outer accordion.
So its Javascript looks like that:
$( "#accordion_broadcasts" ).accordion({
collapsible: true,
active: false,
disabled: true,
header: "#acc_broadcasts_header",
heightStyle: "content",
activate: function(event, ui) {
$( ".accordion_descriptions" ).accordion("refresh");
$( "#accordion_broadcasts" ).accordion("refresh");
}
});
See my updated JSFiddle.
I had the same problem, and fixed it this way.
During my research, i found out, that the content height of the outer accordion was zero while it was unfolded. So setting a height to the content div would be a solution, if you now the exact size of the nested content, but heightStyle: "content" does this for you.
I have created a logo slider which displays similar to marquee. What I want to do is to add next/prev arrows that can accelerate the speed of slider when click next arrow and reverse the slider when click prev arrow. I currently use slick carousel to make it.
Also I have no idea why sometimes my carousel pause for a second then continue, can anyone help me with this?
$(document).ready(function($) {
$('.marquee-logo').slick({
autoplay: true,
infinite: true,
autoplaySpeed: 0,
slidesToScroll: 1,
slidesToShow: 5,
arrows: false,
cssEase: 'linear',
speed: 6500,
initialSlide: 1,
draggable: false,
});
});
<div class="marquee-logo">
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
</div>
http://codepen.io/takumi24/pen/JRzEjA
This can be used to make slider slow
$("#slowbutton").click(function(){
$('.marquee-logo').slick('unslick');
$('.marquee-logo').slick({
autoplay: true,
infinite: true,
autoplaySpeed: 0,
slidesToScroll: 1,
slidesToShow: 5,
arrows: false,
cssEase: 'linear',
speed: 10000,
initialSlide: 1,
draggable: false,
});});
This for making faster
$("#nextbutton").click(function(){
$('.marquee-logo').slick('unslick');
$('.marquee-logo').slick({
autoplay: true,
infinite: true,
autoplaySpeed: 0,
slidesToScroll: 1,
slidesToShow: 5,
arrows: false,
cssEase: 'linear',
speed: 300,
initialSlide: 1,
draggable: false,
});
});
http://codepen.io/anon/pen/yawgra
On button click first destroy the slider and add slider again with increased/decreased speed
You can also try by this $('.marquee-logo').slick('slickSetOption', 'speed', 500,true); with out destroying the slider
But speed change by slickSetOption method cause a delay:issue https://github.com/kenwheeler/slick/issues/2334
User XZY's answer worked for me. While playing with it I also noticed that slick (at least in the implementation I was using) exposes an options property which is modifiable. So the below might work as well:
var slickSlider = $('.marquee-logo')[0]
slickSlider.slick.options.autoplaySpeed = 500
I have a jquery accordion inside a draggable div. Once the div has been dragged it becomes a fixed height and doesn't react to the accordion as expected. Any advice?
You can see it not working at http://addresslabels.tk/templates just select the 14 per sheet template and it's the menu on the left.
$(function() {
$( ".draggable" ).draggable();
});
$(function() {
$( ".closedaccordion" ).accordion({
collapsible: true,
active: false
});
$( ".openaccordion" ).accordion({
collapsible: true,
});
Css:
#printmenu {
position:fixed;
width: 235px;
height: auto;
padding: 10px;
border-radius: 5px;
}
html
<div id="printmenu" class="jsonly ui-widget-content draggable">
<div class="closedaccordion">
<h3>Accordion</h3>
<p>content</p>
</div>
</div>
The answer shown in the duplicate question doesn't work for me so I have to add this question!
I used this javascript to fix this problem happening in firefox -
$("#printmenu").draggable({ handle: "#printmenutitle" });
$( ".closedaccordion" ).accordion({ collapsible: true, active: false });
$( ".openaccordion" ).accordion({ collapsible: true, });
$('#printmenutitle') .bind('mouseup', function(){
document.getElementById('printmenu').style.height = 'auto';
});
It looks glitchy because it isn't animated, but adding $('#printmenu').css('height', 'auto') to the activate event of the accordian does resize the box properly:
$(function () {
$(".draggable").draggable();
$(".closedaccordion").accordion({
activate: function () {
$('#printmenu').css('height', 'auto');
},
collapsible: true,
active: false
});
$(".openaccordion").accordion({
collapsible: true
});
});
I have no knowlege in JS so please help me with it. I have a slider (Slider JS) I need to make the slider to stop on hovering it and when the cursor is moved away it should resume again.
I refered this slidejs website which is here and i found this code which did not work form me
$(function(){
$("#slides").slides({
hoverPause: true
});
});
Here is my JS code
jQuery.noConflict();
jQuery(function() {
jQuery(".slider_container").jCarouselLite({
btnNext: ".arrow_right",
btnPrev: ".arrow_left",
visible: 4,
speed :1000,
auto : 500,
hoverPause: true,
});
});
Html
<div id="slide_image_contener" class="slider_container">
<ul id="slide">
<li><a class="vlightbox1" href="popup/vlb_images1/certification_1.jpg" title="certification_1"><img src="popup/vlb_thumbnails1/certification_1.jpg" class="vlightbox_1" alt="certification_1"/></a></li>
<li><a class="vlightbox1" href="popup/vlb_images1/certification_1.jpg" title="certification_1"><img src="popup/vlb_thumbnails1/certification_1.jpg" class="vlightbox_1" alt="certification_1"/></a></li>
<li><a class="vlightbox1" href="popup/vlb_images1/certification_1.jpg" title="certification_1"><img src="popup/vlb_thumbnails1/certification_1.jpg" class="vlightbox_1" alt="certification_1"/></a></li>
</ul>
</div>
You have error in code.
Your JS is referring to #slides:
$(function(){
$("#slides").slides({
hoverPause: true
});
});
But you are using ul id="slide"
Change this line: <ul id="slide"> to this: <ul id="slides">
The options which you are passing is wrong. You should pass pause instead of hoverPause Try the below code
jQuery(".slider_container").jCarouselLite({
btnNext: ".arrow_right",
btnPrev: ".arrow_left",
visible: 4,
speed :1000,
auto : 500,
pause: true
});
When I drag my child div inside the parent div, it is disappearing when my mouse drags outside the boundaries. In the draggable Jquery documentation example, the child div cannot go beyond the boundaries of the parent container. Any thoughts on what my code is missing?
HTML markup:
<div class="containment-wrapper">
<div class="boxone" class="draggable ui-widget-content">
</div>
<div class="boxtwo" class="draggable ui-widget-content">
</div>
<div class="boxthree">
</div>
</div>
JavaScript:
$(".boxtwo").draggable({ containment: "#containment-wrapper", scroll: false });
$(".boxthree").draggable({ containment: "#containment-wrapper", scroll: false});
http://jqueryui.com/draggable/#constrain-movement (I'm looking at the "I'm contained within my box" example)
CodePen demo
JSFiddle demo
Change this:
$(".boxtwo").draggable({ containment: "#containment-wrapper", scroll: false });
$(".boxthree").draggable({ containment: "#containment-wrapper", scroll: false});
to this:
$(".boxtwo").draggable({ containment: "#containment-wrapper", scroll: false });
$(".boxthree").draggable({ containment: "parent", scroll: false});