We Keep Coding

Hiding Arrows Based on Horizontal Scroll

I'm struggling to make a tiny change in this horizontal scroll code: http://jsfiddle.net/Lpjj3n1e/
I want to make the right button disappear when you scroll all the way to the right (just like it happens with the left button in the original code).
There should be a quick and easy solution but I haven't been able to find one. Please help me and thank you in advance!
$(function() {
var print = function(msg) {
alert(msg);
};
var setInvisible = function(elem) {
elem.css('visibility', 'hidden');
};
var setVisible = function(elem) {
elem.css('visibility', 'visible');
};
var elem = $("#elem");
var items = elem.children();
// Inserting Buttons
elem.prepend('<div id="right-button" style="visibility: hidden;"><</div>');
elem.append(' <div id="left-button">></div>');
// Inserting Inner
items.wrapAll('<div id="inner" />');
// Inserting Outer
debugger;
elem.find('#inner').wrap('<div id="outer"/>');
var outer = $('#outer');
var updateUI = function() {
var maxWidth = outer.outerWidth(true);
var actualWidth = 0;
$.each($('#inner >'), function(i, item) {
actualWidth += $(item).outerWidth(true);
});
if (actualWidth <= maxWidth) {
setVisible($('#left-button'));
}
};
updateUI();
$('#right-button').click(function() {
var leftPos = outer.scrollLeft();
outer.animate({
scrollLeft: leftPos - 200
}, 800, function() {
debugger;
if ($('#outer').scrollLeft() <= 0) {
setInvisible($('#right-button'));
}
});
});
$('#left-button').click(function() {
setVisible($('#right-button'));
var leftPos = outer.scrollLeft();
outer.animate({
scrollLeft: leftPos + 200
}, 800);
});
$(window).resize(function() {
updateUI();
});
});

The main problem seems to be that on clicking the left button there is no function to check whether the arrow should be removed or not.
To test for this we can use the actualWidth which has already been calculated (but it needs to be made more global so its declaration has moved).
There is another small thing which needs rectification - if the maxWidth is greater than the actualWidth there is no need for the arrows. In the code below therefore setVisible has become setVisibleIfNeeded
Here is the revised JS - the original was taken from the jsfiddle. There is a NOTE beside each alteration.
$(function() {
var print = function(msg) {
alert(msg);
};
var setInvisible = function(elem) {
elem.css('visibility', 'hidden');
};
var setVisibleIfNeeded = function(elem) {
if (actualWidth>maxWidth) {//NOTE we don't want to show the arrows if there is space in the div for everything without the need to scroll
elem.css('visibility', 'visible');
}
};
var elem = $("#elem");
var items = elem.children();
// Inserting Buttons
elem.prepend('<div id="right-button" style="visibility: hidden;"><</div>');
elem.append(' <div id="left-button" style="visibility: hidden;">></div>');//NOTE: visibility set to hidden
// Inserting Inner
items.wrapAll('<div id="inner" />');
// Inserting Outer
debugger;
elem.find('#inner').wrap('<div id="outer"/>');
var outer = $('#outer');
var actualWidth=0;//NOTE the declaration is moved up here from the function it was in
var maxwidth=0;//ditto
var updateUI = function() {
maxWidth = outer.outerWidth(true);
actualWidth = 0;
$.each($('#inner >'), function(i, item) {
actualWidth += $(item).outerWidth(true);
});
setVisibleIfNeeded($('#left-button'));
};
updateUI();
$('#right-button').click(function() {
setVisibleIfNeeded($('#left-button'));//NOTE added
var leftPos = outer.scrollLeft();
outer.animate({
scrollLeft: leftPos - 200
}, 800, function() {
debugger;
if ($('#outer').scrollLeft() <= 0) {
setInvisible($('#right-button'));
}
});
});
$('#left-button').click(function() {
setVisibleIfNeeded($('#right-button'));
var leftPos = outer.scrollLeft();
outer.animate({
scrollLeft: leftPos + 200
}, 800,function() {//NOTE function added here to get rid of left button
if (leftPos>=(actualWidth-400)) {setInvisible($('#left-button'));}
});
});
$(window).resize(function() {
updateUI();
});
});

Trying To Correct retail price display

I am working with a code that seems to be displaying incorrectly. In my slider I have mulitple products that are displayed. When the script runs it should grab the retail price from each of the products.
Currently, it is only grabbing the retail price of the first product. Some of the sliders will display the retail price without the strike through as well.
Any suggestions could help, and I appreciate it.
<script type="text/javascript">
var ajax_load = " ";
var loadMagaziner = "/spotlite-deals/";
$("#SpotliteDeals .slider-block .ProductList").html(ajax_load).load(loadMagaziner + " .ProductList li", function(){
var $window = jQuery(window),
flexslider = { vars:{} };
// tiny helper function to add breakpoints
function getGridSize() {
return (window.innerWidth < 601) ? 1:
(window.innerWidth < 900) ? 1 : 1;
}
// check grid size on resize event
$window.resize(function() {
var gridSize = getGridSize();
flexslider.vars.minItems = gridSize;
flexslider.vars.maxItems = gridSize;
});
jQuery('#SpotliteDeals .BlockContent .slider-block').flexslider({
animation: "slide",
//selector: 'ul.ProductList > li',
slideshow: false,
itemWidth: 285,
controlNav: true,
minItems: 1, // use function to pull in initial value
maxItems: 1 // use function to pull in initial value
});
var rprice = jQuery(this).find('.p-price .RetailPriceValue').html();
var sprice = jQuery(this).find('.p-price .SalePrice').html();
if(rprice && sprice ){
var newrp = rprice.replace('$','');
var newsp = sprice.replace('$','');
var newds = Math.round(((newrp-newsp)/newrp)*100);
jQuery(this).find('.p-price .RetailPriceValue').append().html('Price: <strike>' + rprice + '</strike> (' + newds + '% off)' );
jQuery(this).find('.deal-tag').css('display','block');
} else {
jQuery(this).find('.deal-tag').css('opacity','0');
}
});
</script>

My custom javascript Carousel is not working properly [duplicate]

This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 7 years ago.
I'm trying to implement a carousel with Javascript but I'm having trouble with my navigation buttons.
Prev and Next works fine but the navigation dots as I'm calling are not.
Also, I want to show the title of the images on a span as per the HTML on jsfiddle. You can see my attempt on the javascript file bellow the following comment.
// show the title of the image when hovering the associated dot.
Here is the javascript. The other files can be seem at jsfiddle
$(document).ready(function() {
var carouselItems = [
{ src: "http://placehold.it/600x300/cccccc/000000", title: "Sample 01" },
{ src: "http://placehold.it/600x300/f45a45/000000", title: "Sample 02" },
{ src: "http://placehold.it/600x300/b78d65/000000", title: "Sample 03" },
{ src: "http://placehold.it/600x300/666aa0/000000", title: "Sample 04" },
{ src: "http://placehold.it/600x300/cccddd/000000", title: "Sample 05" }
];
Carousel = function() {
// keep track of the current position
var position = 0;
// build carousel based on items in the carouselItems array
$(carouselItems).each(function(index, value){
var li = $('<li/>');
li.addClass('carousel-item');
li.css('width', 100 / carouselItems.length + '%');
li.appendTo($('#carousel'));
var img = $('<img/>');
img.attr('src', value.src);
img.appendTo(li);
var liDot = $('<li/>');
liDot.addClass('carousel-dots-nav-item').html('o');
liDot.appendTo($('#carousel-dots-nav'));
});
// increase width of the carousel
$('#carousel').css('width', carouselItems.length * 100 + '%');
// add events to dots
for (i = 0; i < $('.carousel-dots-nav-item').length; i++) {
var dot = $('.carousel-dots-nav-item')[i];
// show the title of the image when hovering the associated dot
$(dot).hover(function(e){
$('#title').text(carouselItems[i].title);
}, function(e){
$('#title').text('');
});
// move to the appropriate slide when a dot is clicked
$(dot).click(function(e){
position = i;
$('#carousel').animate({
left: -position * 100 + '%'
}, 500);
});
}
// add click event to next button
$("#next").click(function(e){
e.preventDefault();
if (position == carouselItems.length - 1) return;
position++;
$('#carousel').animate({
left: -position * 100 + '%'
}, 500);
});
// add click event to previous button
$("#previous").click(function(e){
e.preventDefault();
if (position == 0) return;
position--;
$('#carousel').animate({
left: -position * 100 + '%'
}, 500);
});
};
var carousel = new Carousel();
});
jsfiddle

In this loop:
for (i = 0; i < $('.carousel-dots-nav-item').length; i++) {
var dot = $('.carousel-dots-nav-item')[i];
/*...*/
// move to the appropriate slide when a dot is clicked
$(dot).click(function(e){
position = i;
$('#carousel').animate({
left: -position * 100 + '%'
}, 500);
});
}
You are using i to define the position. But all that is in the click function is not executed inside the loop but when you click on a dot element. So i is equal to $('.carousel-dots-nav-item').length. And you are lucky to have defined it globally.
fiddle
A solution is to store the position of each item in a data-position attribute. As you are using jquery, I used also it:
//
var liDot = $('<li/>');
liDot.data("position", index);
liDot.addClass('carousel-dots-nav-item').html('o');
liDot.appendTo($('#carousel-dots-nav'));
//
$(dot).click(function(e){
var position= $(this).data('position');
$('#carousel').animate({
left: -1*position * 100 + '%'
}, 500);
});

Adding delay to DIV animation

I'm trying to create div boxes step by step and animate them for several times when a button is pressed. I have a running code, and everything is going well. It goes right to the endhost, then it goes left again to its original place. This is mainly what I do, and also the demo is found here: http://jsfiddle.net/54hqm/3/
Now I want to happen after each click, is basically to move each DIV one after another, with a delay, instead of moving the whole stack of DIVs at once. I don't exactly know what to do. Can anyone help me with that?
$(document).ready(function () {
var count = 0;
var items = 0;
var packetNumber = 0;
var speed = 0;
$("button").click(function () {
if (count < 4) {
items = items + 1;
count++;
} else {
items = items * 2;
}
speed = $("#speed").val();
createDivs(items);
animateDivs();
});
function createDivs(divs) {
packetNumber = 1;
var left = 60;
for (var i = 0; i < divs; i++) {
var div = $("<div class='t'></div>");
div.appendTo(".packets");
$("<font class='span'>" + packetNumber + "</font>").appendTo(div);
packetNumber++;
div.css("left",left+"px");
div.hide();
left += 20;
}
}
function animateDivs() {
$(".t").each(function () {
var packet = $(this);
packet.show();
packet.animate({
left: '+=230px'
}, speed);
packet.animate({
left: '+=230px'
}, speed);
packet.animate({
top: '+=20px',
backgroundColor: "#f09090",
text: '12'
}, speed / 4, "swing", function () {
$('.span').fadeOut(100, function () {
$(this).text(function () {
return 'a' + $(this).text().replace('a', '');
}).fadeIn(100);
});
});
packet.delay(1000).animate({left:'-=230px'}, speed);
packet.animate({left:'-=230px'}, speed);
}).promise().done(function(){
$(".packets").empty();});
}
});

You can make this with 2 small modifications:
In your each() function, add the index parameter to know the index of the currently animating packet:
$(".t").each(function (index) {
Before your animate calls, insert a packet.delay() with a delay increasing with every item:
packet.delay(index * 250);
I updated your fiddle to show results.
Update: I made a second version based on your comment.

javascript not working when page is loaded qtip2

I wrote a nice heatmap in javascript, and that worked pretty nice so far. The heatmap is basically a table with a coloring variation, based on the threshold of the value displayed in the table. I used JavaScript to create the table, and to set up the colors. However, I wanted to show a nice pop up window, so when the user hover over the table's cell, some additional information is displayed. I found this library qTip2
$(document).ready(function(){
$('#mytable td').qtip({
overwrite : false, // make sure it can't be overwritten
content : {
text : function(api){
return "Time spent: " + $(this).html();
}
},
position : {
my : 'top left',
target : 'mouse',
viewport : $(window), //keep it on-screen at all time if possible
adjust : {
x : 10, y : 10
}
},
hide : {
fixed : true // Helps to prevent the tooltip from hiding occassionaly when tracking!
},
style : 'ui-tooltip-tipsy ui-tooltip-shadow'
});
});
This function creates the heatmap:
function makeTable(data)
{
var row = new Array();
var cell = new Array();
var row_num = 26;
var cell_num = 44;
var tab = document.createElement('table');
tab.setAttribute('id', 'mytable');
tab.border = '1px';
var tbo = document.createElement('tbody');
for(var i = 0; i < row_num; i++){
row[i] = document.createElement('tr');
var upper = (i+1)*44;
var lower = i*44;
for(var j = lower; j < upper; j++){
cell[j] = document.createElement('td');
//cell[j].setAttribute('class', 'selector');
if(data[j] != undefined){
var count = document.createTextNode(data[j].diff);
cell[j].appendChild(count);
var index = parseInt(data[j].diff);
/* specify which color better suits the heatmap */
if(index >= 0 && index <= 100){
cell[j].style.backgroundColor = '#00BFFF';
}
else if(index > 100 && index <= 1000){
cell[j].style.backgroundColor = "#6495ED";
}
else if(index > 1000 && index <= 4000){
cell[j].style.backgroundColor = "#4682B4";
}
else if(index > 4000 && index <= 6000){
cell[j].style.backgroundColor = "#0000FF";
}
else{
cell[j].style.backgroundColor = "#00008B";
}
row[i].appendChild(cell[j]);
}
}
tbo.appendChild(row[i]);
}
tab.appendChild(tbo);
document.getElementById('mytable').appendChild(tab);
}
Inside of my <body> tag I have:
<div id="body">
<div id="mytable"></div>
</div>
However, when I load the page, I expect to see the pop up box when I hover the mouse over the table's cell, however something happens. Also, when I execute that $(document).ready part from firebug's terminal, then the program starts to execute as suppose to. I also made sure the library is being loaded into my page before I used it. I also don't see any errors in the firebug's terminal.
<script src="http://localhost/heatmap/javascript/jquery.qtip.js">
Could someone please give me a clue why is this happening?
The main function of my javascript is
function OnLoad() {
$.post('index.php/heatmap/getDatalines',
function(answer){
var data = eval('(' + answer + ')');
var list = [];
makeTable(data);
});
}
Thanks
whis is called on load: google.setOnLoadCallback(OnLoad);

You need to create the qtip after you have loaded the table like this:
function OnLoad() {
$.post('index.php/heatmap/getDatalines',
function(answer){
var data = eval('(' + answer + ')');
var list = [];
makeTable(data);
$('#mytable td').qtip({
overwrite : false, // make sure it can't be overwritten
content : {
text : function(api){
return "Time spent: " + $(this).html();
}
},
position : {
my : 'top left',
target : 'mouse',
viewport : $(window), // keep it on-screen at all time if possible
adjust : {
x : 10, y : 10
}
},
hide : {
fixed : true // Helps to prevent the tooltip from hiding occassionaly when tracking!
},
style : 'ui-tooltip-tipsy ui-tooltip-shadow'
});
});
}