Slick slider function inside change function doesn't work - javascript

I have built a product page that has a colour variation select. I'm trying to make it work that when a user selects a colour from the dropdown the slick slider will go to the corresponding slide.
I have added data-attr to each slick slide that contain the colour name and use this to the slide index.
The slickgoto function works when I move it outside of the change function.
$( "#pa_colour" ).change( function() {
var prod_color = $( "#pa_colour option:selected" ).val();
var slide_index = parseInt( $( ".slider-for" ).find('[data-color="' + prod_color + '"]').data("slick-index") ) -1;
$( ".slider-for" ).slick( 'slickGoTo', slide_index, false);
});
Thanks

No sure the false is necessary. Have you tried:
$('.slide-for').slick('slickGoTo', slide_index);
Otherwise I would adjust it to:
var slideshow = $( ".slider-for" );
slideshow.slick({ ... });
$( "#pa_colour" ).change( function() {
var prod_color = $( "#pa_colour option:selected" ).val();
var slide_index = parseInt( $( ".slider-for" ).find('[data-color="' + prod_color + '"]').data("slick-index") ) -1;
slideshow.slick( 'slickGoTo', slide_index );
});
Hope this helps.

Related

How do I make elements in jQuery Selectable deselected?

How do I make elements in jQuery Selectable deselected? At this Link it is well documented how to use jQuery Selectable but it is never mentioned how to deselect selected elements again. Any ideas?
<script>
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
</script>
<ol id="selectable">
<?php
for($i=1;$i<=9;$i++) {
echo "<li id=\"field_$i\" class=\"ui-state-default\">$i</li>";
}
?>
</ol>
Hold ctrl and click on the elements. It can also be used to make multiple selections.

Jquery Mobile 1.4 swipe demo in Chrome with mobile device

My question concerns the swipe event on a mobile device (I'm using a Nexus 7) with Chrome. I am working off the Jquery Mobile 1.4.2 demo which can be found here:
http://demos.jquerymobile.com/1.4.2/swipe-page/
I'll ask my question and copy the sample javascript below. I can get everything to work, both on my laptop (using Chrome) and on my tablet (using Firefox), but the swipe works maybe one out of ten times in Chrome with my tablet. Any advice? Thanks!
// Pagecreate will fire for each of the pages in this demo
// but we only need to bind once so we use "one()"
$( document ).one( "pagecreate", ".demo-page", function() {
// Initialize the external persistent header and footer
$( "#header" ).toolbar({ theme: "b" });
$( "#footer" ).toolbar({ theme: "b" });
// Handler for navigating to the next page
function navnext( next ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", next + ".html", {
transition: "slide"
});
}
// Handler for navigating to the previous page
function navprev( prev ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", prev + ".html", {
transition: "slide",
reverse: true
});
}
// Navigate to the next page on swipeleft
$( document ).on( "swipeleft", ".ui-page", function( event ) {
// Get the filename of the next page. We stored that in the data-next
// attribute in the original markup.
var next = $( this ).jqmData( "next" );
// Check if there is a next page and
// swipes may also happen when the user highlights text, so ignore those.
// We're only interested in swipes on the page.
if ( next && ( event.target === $( this )[ 0 ] ) ) {
navnext( next );
}
});
// Navigate to the next page when the "next" button in the footer is clicked
$( document ).on( "click", ".next", function() {
var next = $( ".ui-page-active" ).jqmData( "next" );
// Check if there is a next page
if ( next ) {
navnext( next );
}
});
// The same for the navigating to the previous page
$( document ).on( "swiperight", ".ui-page", function( event ) {
var prev = $( this ).jqmData( "prev" );
if ( prev && ( event.target === $( this )[ 0 ] ) ) {
navprev( prev );
}
});
$( document ).on( "click", ".prev", function() {
var prev = $( ".ui-page-active" ).jqmData( "prev" );
if ( prev ) {
navprev( prev );
}
});
});
$( document ).on( "pageshow", ".demo-page", function() {
var thePage = $( this ),
title = thePage.jqmData( "title" ),
next = thePage.jqmData( "next" ),
prev = thePage.jqmData( "prev" );
// Point the "Trivia" button to the popup for the current page.
$( "#trivia-button" ).attr( "href", "#" + thePage.find( ".trivia" ).attr( "id" ) );
// We use the same header on each page
// so we have to update the title
$( "#header h1" ).text( title );
// Prefetch the next page
// We added data-dom-cache="true" to the page so it won't be deleted
// so there is no need to prefetch it
if ( next ) {
$( ":mobile-pagecontainer" ).pagecontainer( "load", next + ".html" );
}
// We disable the next or previous buttons in the footer
// if there is no next or previous page
// We use the same footer on each page
// so first we remove the disabled class if it is there
$( ".next.ui-state-disabled, .prev.ui-state-disabled" ).removeClass( "ui-state-disabled" );
if ( ! next ) {
$( ".next" ).addClass( "ui-state-disabled" );
}
if ( ! prev ) {
$( ".prev" ).addClass( "ui-state-disabled" );
}
});
I've done the same experiment and I've observed similar results with my tablet (Nexus 7 - Google Chrome).
You should not use heavy frameworks like jQueryMobile if you are going to create a web app or a mobile website because even if these tools make your life easier at the end the result, especially on Android devices, will be slow and sluggish.
In other words you should create your own .css and .js.
If you need to manipulate the DOM very often you should also look for alternatives to jQuery.
I suggest that you use Zepto.js.
In the end, I decided to use the jQuery touchSwipe plugin and write my own code, works fine in different browsers and across devices. Some of this may not make sense without the HTML, but essentially I determine the direction of the swipe based on the variable that is passed into the method. Then, by getting various attributes and class names, I am turning on and off the display of the various divs that have previously loaded the JSON into them from another method. The way I do that is through substrings, where the last digit of the id is a number. If anyone has any comments about how this code could be more efficient, I'd be happy to hear your thoughts. Cheers.
function swipeLiterary() {
$("#read").swipe({
swipe:function(event, direction, distance, duration, fingerCount) {
switch (direction) {
case 'left':
var thisPage = $('.display').attr('id');
var nextPageNum = parseInt(thisPage.substring(8)) + 1;
var nextPage = thisPage.substring(0,8) + nextPageNum;
if (nextPageNum > 9) {
break
}
$('#' + thisPage).removeClass('display').addClass('nodisplay');
$('#' + nextPage).removeClass('nodisplay').addClass('display');
console.log(nextPage);
break;
case 'right':
var thisPage = $('.display').attr('id');
var prevPageNum = parseInt(thisPage.substring(8)) - 1;
var prevPage = thisPage.substring(0,8) + prevPageNum;
if (prevPageNum < 0){
break;
}
$('#' + thisPage).removeClass('display').addClass('nodisplay');
$('#' + prevPage).removeClass('nodisplay').addClass('display');
console.log(prevPage);
break;
case 'up':
console.log('up');
break;
}
//$(this).text("You swiped " + direction );
//console.log(this);
}
});
}

Selectable Serialize jQuery UI:: How to display the content within the html tag instead of the index value?

I'm very new beginner to jquery and I'm using the 'Selectable, Serialize' interaction from jQuery UI.
The interaction shows the index value that the user has selected, but I would like to know how to instead of displaying the index value, display the content that the user has selected.
so actually its like this
SCRIPT::
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
HTML::
<ol id="selectable">
<li class="ui-widget-content">Watermelon</li>
<li class="ui-widget-content">Orange</li>
<li class="ui-widget-content">Guava</li>
<li class="ui-widget-content">Apple</li>
<li class="ui-widget-content">Banana</li>
</ol>
The result shown is "You've selected: #1."
But I would like the result to be displayed as "You've selected: Watermelon"
Thanks in advance. :)
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
//this is set by jQuery to be the current item in the each iteration
//so wrap this in the $.jQuery object and then you will be able to call the jQuery method
//text() to get the text value
result.append( " " + $(this).text());
});
}
});

convert code meant for ordered list to table

I am currently trying to figure out how to convert this codes to work for table td cells in a column. I seek help with regards to this.
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
replace the var index line in the code with this:
var index = $( "#selectable td" ).index( this );
Make sure the table has an id #selectable

jQuery Drag and Drop not working

I am trying to develop a simple drag and drop 'game'. In simple terms all you do is drag and drop various items into a area and it will say correct or wrong depending on the item dragged. This is what I have so far and its not working at all and I dont know why. My knowledge of JS and jQuery leaves a lot to be desired too.
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#wrong" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
var currentId = $(this).attr('id');
if (currentId == "draggable") {
$( this )
.addClass( "highlight" )
.find( "p" )
.html( "Correct! :)" );
} else {
$( this )
.find( "p" )
.html( "Wrong! :(" );
}
}
});
});
</script>
Now that I have it working I need more instances of the draggable images but when I add more the the new ones that have been added don't work.
http://jsfiddle.net/KcruJ/9/
var currentId = $(this).attr('id');
if (currentId == "draggable")
...
Will never result true, as $(this) represents the droppable the draggable is dropped on. ui.draggable represents the draggable[1]
Try:
var currentId = $(ui.draggable).attr('id');
if (currentId == "draggable")
...
This works: http://jsfiddle.net/T6nu3/2/
$(this).attr('id');
Will always return droppable.
You need to access the dragged element:
$(ui.draggable).attr('id');
Take a look at the jQuery UI Documentation for more information.
Code:
$(function() {
$("#draggable").draggable();
$("#wrong").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
var currentId = $(ui.draggable).attr('id');
if (currentId == "draggable") {
$(this).addClass("highlight").find("p").html("Correct! :)");
} else {
$(this).find("p").html("Wrong! :(");
}
}
});
});
haha well, Alex seems to have this one on lock.
There's the answer: http://jsfiddle.net/aGqHh/1/

Categories

Resources