Dynamically change content when slider values are updated - javascript

I am trying to dynamically change my page content when the slider values are changed. At the moment the user sets the slider, clicks a button below and content is displayed. When the sliders are changed again, the user has to click the button again to reload the content (because each button is assigned to the goalkeeperstat function.
<a class="chosenstat" title="Saves" value="saves" name="save" onclick="goalkeeperstat(this);">Saves</a>
Rather than having to press the button again I would like the content to change as soon as the user drags the slider handles to their chosen values.
Below is a screenshot of my page.
http://i.imgur.com/eZq08sI.jpg
$(function initSlider() {
$("#slider1").slider({
range: true,
min: 0,
max: 100,
values: [0, 100],
slide: function update1 (event, ui) {
$(".amount").val(ui.values[0] + " - " + ui.values[1]);
slidervalueg1 = $('#g1').val(ui.values[0]);
slidervalueg2 = $('#g2').val(ui.values[1]);
}
});
$(".amount").val($("#slider1").slider("values", 0) +
" - " + $("#slider1").slider("values", 1));
});
function goalkeeperstat(element){
$('#result1').empty();
$('.amount').empty();
var category = element.getAttribute("value");
var categoryprompt = element.getAttribute("title");
var infocategory = element.getAttribute("name");
var position = 1;
var fr = $(myjson).filter(function (i,n){return n.element_type===position & n[category] >= slidervalueg1.val() && n[category] <= slidervalueg2.val() });
for (var i=0;i<fr.length;i++)
{
document.getElementById('result1').innerHTML += ("<div class='profile'><img src='https://platform-static-files.s3.amazonaws.com/premierleague/photos/players/110x140/p" + fr[i].code + ".png'/><div class='playerinfo'><p>Name: " + fr[i].first_name + " " + fr[i].second_name + "</p><p>Position: " + posdictionary[fr[i].element_type.toString()] + "</p><p class='teamname'>Team: " + dictionary[fr[i].team.toString()] + "</p><p>" + categoryprompt + ": <span class='categoryprompt'>" + fr[i][category] + "</span></p></div><div class='infobg'><p>Minutes: " + fr[i].minutes + "</p><p>Minutes per " + infocategory + ": " + parseFloat(Math.round((fr[i].minutes / fr[i][category]) * 100) / 100).toFixed(2) + "</p></div></div>");
}
}
EDIT: Tried using "stop" but it wouldn't work. Any other tips?

you can use event or method explicit :
$("#slider1").slider({
range: true,
min: 0,
max: 100,
values: [0, 100],
slide: function update1 (event, ui) {
$(".amount").val(ui.values[0] + " - " + ui.values[1]);
slidervalueg1 = $('#g1').val(ui.values[0]);
slidervalueg2 = $('#g2').val(ui.values[1]);
},
stop : function(event, ui){
console.log("slider changed");
// call your fucntion here
}
});

Related

Set click as default

I´m using Megafolio so now I filter category with clic, but I want to set default category when page loads, how can I do that?
There is my filter function
function completeGalleryContent(data, target, eng) {
var items = data.d.results;
console.log(items);
var menu = "";
var cat = "";
for (var item in items) {
if(items[item].DescriptionEnglish==null)
items[item].DescriptionEnglish="";
if(items[item].Description==null)
items[item].Description="";
if(items[item].Categoria.results!= null && items[item].Categoria.results!= undefined && items[item].Categoria.results.length > 0){
cat =setCategories(eng,items[item].Categoria.results);
}
if (eng){
menu += "<div class='mega-entry " + cat + " cat-all' id='mega-entry-1' data-src='" + items[item].EncodedAbsUrl + "' data-width='' data-height='' data-lowsize=''><div class='mega-covercaption mega-square-bottom mega-landscape-right mega-portrait-bottom mega-red'><div class='mega-title'>" + items[item].TitleEnglish + "</div><p>" + items[item].DescriptionEnglish + "</p></div><div class='mega-coverbuttons'><div class='mega-link mega-red'></div><a class='fancybox' rel='group' href='" + items[item].EncodedAbsUrl + "' title='" + items[item].TitleEnglish + "'><div class='mega-view mega-red'></div></a></div></div>";
}else{
menu += "<div class='mega-entry "+ cat + " cat-all' id='mega-entry-1' data-src='" + items[item].EncodedAbsUrl + "' data-width='' data-height='' data-lowsize=''><div class='mega-covercaption mega-square-bottom mega-landscape-right mega-portrait-bottom mega-red'><div class='mega-title'>" + items[item].Title + "</div><p>" + items[item].Description + "</p></div><div class='mega-coverbuttons'><div class='mega-link mega-red'></div><a class='fancybox' rel='group' href='" + items[item].EncodedAbsUrl + "' title='"+ items[item].Title +"'><div class='mega-view mega-red'></div></a></div></div>";
}
}
$(target).html(menu);
var api = $(target).megafoliopro(
{
filterChangeAnimation: "pagebottom", // fade, rotate, scale, rotatescale, pagetop, pagebottom,pagemiddle
filterChangeSpeed: 400, // Speed of Transition
filterChangeRotate: 99, // If you ue scalerotate or rotate you can set the rotation (99 = random !!)
filterChangeScale: 0.6, // Scale Animation Endparameter
delay: 20,
defaultWidth: 980,
paddingHorizontal: 10,
paddingVertical: 10,
layoutarray: [9, 11, 5, 3, 7, 12, 4, 6, 13] // Defines the Layout Types which can be used in the Gallery. 2-9 or "random". You can define more than one, like {5,2,6,4} where the first items will be orderd in layout 5, the next comming items in layout 2, the next comming items in layout 6 etc... You can use also simple {9} then all item ordered in Layout 9 type.
});
//console.log("entra");
// FANCY BOX ( LIVE BOX) WITH MEDIA SUPPORT
jQuery(".fancybox").fancybox();
//console.log("sale");
// THE FILTER FUNCTION
$('.filter').click(function () {
$('.filter').each(function () { jQuery(this).removeClass("selected") });
api.megafilter(jQuery(this).data('category'));
$(this).addClass("selected");
});
var categorySelected = getParameterByName("Category");
$("div[data-category='"+categorySelected +"']").click();
}
I try change these line like these but did´t works:
var categorySelected = getParameterByName("Office");
Or something like
var categorySelected = getParameterByName().first;
To take first one populated of db
With jQuery, you can use click() function :
$(document).ready(function(){
$('[href="#first_steps"]').click();
});
Just change first_steps by other link if you want.
EDIT
With data-category :
$('[data-category="Office"]').click(); // An html attribute with value

Restart CSS3 animation after it's stopped

I try to implement a CSS3 list menu with animation on each item. On page load, this is an hidden menu and the animation starts on click on the button with "#trigger-overlay" ID. There's a cross to close the menu and I would like to start again the animation on new click on the button with "#trigger-overlay" ID. I think there's a piece of code missing, probably something to do with style.webkitAnimationPlayState but I don't know how. Any help ?
Here's my code :
$( "#trigger-overlay" ).click(function() {
$("ul#menu-main-menu li").each(function (i) {
$(this).attr("style", "-webkit-animation-delay:" + i * 300 + "ms;"
+ "-moz-animation-delay:" + i * 300 + "ms;"
+ "-o-animation-delay:" + i * 300 + "ms;"
+ "animation-delay:" + i * 300 + "ms;");
if (i == $("ul#menu-main-menu li").size() -1) {
$("ul#menu-main-menu").addClass("play")
}
});
You could use the transitionend event handler:
function addAnimation($elem) {
$elem.attr("style", "-webkit-animation-delay:" + i * 300 + "ms;"
+ "-moz-animation-delay:" + i * 300 + "ms;"
+ "-o-animation-delay:" + i * 300 + "ms;"
+ "animation-delay:" + i * 300 + "ms;");
}
$( "#trigger-overlay" ).click(function() {
$("ul#menu-main-menu li").each(function (i) {
addAnimation($(this));
if (i == $("ul#menu-main-menu li").size() -1) {
$("ul#menu-main-menu").addClass("play")
}
$(this).off('transitionend').on('transitionend', function() {
addAnimation($(this));
});
});
});

Jquery saying that object doesn't support 'each'

When I run my web app, I get an error saying that "JavaScript runtime error: Object doesn't support property or method 'each'", I'm trying to create a legend below or above my jquery slider...
here is the scripts I'm using
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
and this is my JQuery script
$(function () {
$("#slider-range").slider({
range: true,
min: 0,
max: 100,
values: [0, 100],
animate: 'slow',
slide: function (event, ui) {
//$(ui.handle).find('span').html('$' + ui.value);
//
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
.each(function() {
// Get the options for this slider
var opt = $(this).data().uiSlider.options;
// Get the number of possible values
var vals = opt.max - opt.min;
// Space out values
for (var i = 0; i <= vals; i++) {
var el = $('<label>'+(i+1)+'</label>').css('left',(i/vals*100)+'%');
$( "#slider" ).append(el);
}
})
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) +
" - $" + $("#slider-range").slider("values", 1));
});
Any help would be appreciated.
Thanks
You are applying each on the options object, which only has range, min, max, values and animate. Indeed, no each.
You were calling each() on the slide handler function - misplaced })
$("#slider-range").slider({
range: true,
min: 0,
max: 100,
values: [0, 100],
animate: 'slow',
slide: function (event, ui) {
//$(ui.handle).find('span').html('$' + ui.value);
//
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
}// <-- you had it here
}).each(function () {
// Get the options for this slider
var opt = $(this).data().uiSlider.options;
// Get the number of possible values
var vals = opt.max - opt.min;
// Space out values
for (var i = 0; i <= vals; i++) {
var el = $('<label>' + (i + 1) + '</label>').css('left', (i / vals * 100) + '%');
$("#slider").append(el);
}
});
You are calling .each() at wrong place you need to do }).each(function () {
$(function () {
$("#slider-range").slider({
range: true,
min: 0,
max: 100,
values: [0, 100],
animate: 'slow',
slide: function (event, ui) {
//$(ui.handle).find('span').html('$' + ui.value);
//
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
}).each(function () { //you each loop like this
// Get the options for this slider
var opt = $(this).data().uiSlider.options;
// Get the number of possible values
var vals = opt.max - opt.min;
// Space out values
for (var i = 0; i <= vals; i++) {
var el = $('<label>' + (i + 1) + '</label>').css('left', (i / vals * 100) + '%');
$("#slider").append(el);
}
})
});

location of moved piece

I am creating a checker variation game.
I am new to jquery but through some help the pieces can now move around the board.
Is there a way to indicate the start location and end location of a move?
I would also like to disable all piece movement once a move has been made.
current code:
$('img').draggable();
$('#tbl td').droppable({
hoverClass: 'over',
drop: function(event, ui) {
var cell = ui.draggable.appendTo($(this)).css({
'left': '0',
'top': '0'
});
var row = cell.closest('tr').prevAll().length + 1;
var col = cell.closest('td').prevAll().length + 1;
$('#coords').html('Row ' + row + ', Col ' + col);
}
});
jsfiddle http://jsfiddle.net/blueberrymuffin/bLb3H/
thanks.
$('img').draggable({
start: function(e, ui) {
alert('Starting move from position (' + ui.position.top + ', ' + ui.position.left + ')');
},
stop: function(e, ui) {
alert('Ending move at position (' + ui.position.top + ', ' + ui.position.left + ')');
}
});
$('#tbl td').droppable({
hoverClass: 'over',
drop: function(event, ui) {
var cell = ui.draggable.appendTo($(this)).css({
'left': '0',
'top': '0'
});
var row = cell.closest('tr').prevAll().length + 1;
var col = cell.closest('td').prevAll().length + 1;
$('#coords').html('Row ' + row + ', Col ' + col);
$('img').draggable('disable');
}
});​
I think I figured it out.
Here is the code:
$('img').draggable({
start: function(e, ui) {
var myCol = $(this).closest("td").index() + 1;
var myRow = $(this).closest("tr").index() + 1;
$('#coords').html('Row ' + myRow + ', Col ' + myCol);
},
});
$('#tbl td').droppable({
hoverClass: 'over',
drop: function(event, ui) {
var cell = ui.draggable.appendTo($(this)).css({
'left': '0',
'top': '0'
});
var row = cell.closest('tr').prevAll().length + 1;
var col = cell.closest('td').prevAll().length + 1;
$('#coords').html('Row ' + row + ', Col ' + col);
$('img').draggable('disable');
}
});
and the jsfiddle: http://jsfiddle.net/bLb3H/5/
I am not sure though how to replace the current image with the new one that was dragged onto it (currently both images occupy the same cell). Any ideas?
Thanks.

How to replace a div content with other div using jquery or Javascript?

Hi all i am having some which i am appending to a div dynamically in my view....i have three ajax calls for different methods....firstly i show all the images of product in a div ....and if a user selects the price range the proucts will be displayed of that price range only and same for colours..what i want is i want this when user selects price range or color the div with all images should be replaced with the new images how can i do this can any one help me here
<script type="text/javascript">
$(document).ready(function () {
$.getJSON("/api/ProductLayout", function (data) {
$.each(data, function (idx, ele) {
$("#makeMeScrollable").append('ProdcutID'+'<span>' + ele.ProductID +
'</span>ProductName<span>' + ele.ProductName + '</span>Price<span>' + ele.Price + '</span>');
$("<img/>").attr({ src: ele.ImageURL }).appendTo("#makeMeScrollable");
});
scrollablediv();
});
});
function scrollablediv() {
$("div#makeMeScrollable").smoothDivScroll({
mousewheelScrolling: true,
manualContinuousScrolling: true,
visibleHotSpotBackgrounds: "always",
autoScrollingMode: "onstart"
});
}
</script>
<script type="text/javascript">
$(function () {
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [0,0],
slide: function (event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
},
change: function (event, ui) {
// when the user change the slider
},
stop: function (event, ui) {
// when the user stopped changing the slider
$.get("/api/ProductLayout", { firstPrice: ui.values[0], secondPrice: ui.values[1] }, function (data) {
$.each(data, function (idx, ele) {
$("#makeMeScrollable").append('<lable>ProdcutID:</label>' + '<span>' + ele.ProductID +
'</span><br/><lable>ProductName:</label><span>' + ele.ProductName + '</span><br/><label>Price:</label><span>' + ele.Price + '</span>');
$("<img/>").attr({ src: ele.ImageURL }).appendTo("#makeMeScrollable");
});
});
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) +
" - $" + $("#slider-range").slider("values", 1));
});
</script>
<script type="text/javascript">
function getproductbycolor(colours) {
alert(1);
$.get("/api/ProductLayout", { color: colours }, function (data) {
alert(data.toString());
$.each(data, function (idx, ele) {
$("#makeMeScrollable").append('<lable>ProdcutID:</label>' + '<span>' + ele.ProductID +
'</span><br/><lable>ProductName:</label><span>' + ele.ProductName + '</span><br/><label>Price:</label><span>' + ele.Price + '</span><br/><label>Product Color:</label><span>'+ele.ProductColor+'</span>');
$("<img/>").attr({ src: ele.ImageURL }).appendTo("#makeMeScrollable");
});
});
}
</script>
and this is my html
<div id="makeMeScrollable" style="height: 400px; width: 400px;">
</div>
i should append all the images only to the above div replacing the previous images
As said by jaswant you can use .empty() method but not .empty().append() what this does is it will empty the data when ever an new record is binded so use .empty() method before your ajax call or json call
$("#makeMeScrollable").empty();
add the above line before your ajax call
<script type="text/javascript">
function getproductbycolor(colours) {
alert(1);
$("#makeMeScrollable").empty();
$.get("/api/ProductLayout", { color: colours }, function (data) {
alert(data.toString());
$.each(data, function (idx, ele) {
$("#makeMeScrollable").append('<lable>ProdcutID:</label>' + '<span>' + ele.ProductID +
'</span><br/><lable>ProductName:</label><span>' + ele.ProductName + '</span><br/><label>Price:</label><span>' + ele.Price + '</span><br/><label>Product Color:</label><span>'+ele.ProductColor+'</span>');
$("<img/>").attr({ src: ele.ImageURL }).appendTo("#makeMeScrollable");
});
});
}
Try this,
$("#makeMeScrollable").html('ProdcutID<span>' + ele.ProductID +
'</span>ProductName<span>' + ele.ProductName + '</span>Price<span>' +
ele.Price + '</span><img src="' + ele.ImageURL + '" />');
You can always use html() in place of append() to remove the existing content.
or you can do empty the element before append with .empty().append()
EDIT (after comments)
var $div = $("#makeMeScrollable");
$div.empty();
$.each(data, function (idx, ele) {.append('ProdcutID' + '<span>' + ele.ProductID + '</span>ProductName<span>' + ele.ProductName + '</span>Price<span>' + ele.Price + '</span>');
$("<img/>").attr({
src: ele.ImageURL
}).appendTo("#makeMeScrollable");
});
You should do the empty as the first action in your success handler. Because the calls are asynchroneous, you will have the risk of products interfering with each other if you clear the area before you do the ajax call.
$(document).ready(function () {
$.getJSON("/api/ProductLayout").success(function (data) {
clearProductDisplayArea();
displayProductInfo(data);
scrollablediv();
});
});
function clearProductDisplayArea(){
$("#makeMeScrollable").empty();
}
function displayProductInfo(data){
$.each(data, function (idx, ele) {
$("#makeMeScrollable").append('ProdcutID'+'<span>' + ele.ProductID +
'</span>ProductName<span>' + ele.ProductName + '</span>Price<span>' + ele.Price + '</span>');
$("<img/>").attr({ src: ele.ImageURL }).appendTo("#makeMeScrollable");
});
}

Categories

Resources