So I'm using Isotope to display and order a series of "items". While the items are displaying just as I want them to the order is not working at all. I'm trying to order them with a simple parseInt and I'm pulling my hair out trying to figure out what I'm doing wrong. Any help would be much appreciated!
A preview of what I'm working on can be seen here: http://tinyurl.com/jwz94pn
Javascript for Isotope:
var loadIsotope = function () {
var $container = $('#social-feed');
$container.isotope({
// options
itemSelector: '.item',
masonry: {
gutter: '.gutter-sizer'
},
getSortData: {
number: '.order parseInt',
},
sortBy: 'number'
});
};
HTML looks something like this:
<div id="social-feed">
<div class="item">
<p>item 3</p>
<p class="order">3</p>
</div>
<div class="item">
<p>item 1</p>
<p class="order">1</p>
</div>
<div class="item">
<p>item 2</p>
<p class="order">2</p>
</div>
</div>
Put your jQuery code inside document.ready or window.load like this:
$(document).ready(function() {
// All code goes here
});
This should work:
<script>
$(window).load(function(){
// init
loadInstagram().done(loadIsotope);
var loadInstagram = function () {
// create a deferred object
var r = $.Deferred();
var amount = 10;
// instagram feed script
var userFeed = new Instafeed({
get: 'user',
userId: 538920369,
accessToken: '538920369.467ede5.7ee1e8e2079e4daabd4284614c98479c',
limit: amount,
resolution: 'low_resolution',
template: '<div class="item photo instagram"><img src="{{image}}" class="image" onClick="window.open(\'{{link}}\',\'_blank\'); return false;" /><div class="content-float"><p class="message">{{caption}}</p></div><div class="base-content">Share<img src="images/instagram.png" class="social-icon" \></div></div>'/*,
filter: function(image) {
return image.caption.text.indexOf('Trim') < 0;
}*/
});
userFeed.run();
setTimeout(function () {
// and call `resolve` on the deferred object, once you're done
for (var i = 0; i < instaFeed.length; ++i) {
document.getElementById('social-feed').appendChild(instaFeed[i]);
console.log("loop " + i);
}
console.log("after loop");
r.resolve();
orderItems();
}, 2500);
// return the deferred object
return r;
};
var loadIsotope = function () {
var $container = $('#social-feed');
$container.isotope({
// options
itemSelector: '.item',
masonry: {
gutter: '.gutter-sizer'
},
getSortData: {
number: '.order parseInt',
},
sortBy: 'number'
});
};
function orderItems() {
/* TWITTER ORDER */
var order_twitter = new Array(1,6,7,10,13,15,17);
var elems = document.getElementsByClassName('twitter');
for (var i = 0; i < elems.length; ++i) {
var item = elems[i];
item.innerHTML += ('<p class="order">' + order_twitter[i] + '</p>');
}
/* FACEBOOK ORDER */
var order_facebook = new Array(3,5,8,12,19,20);
var elems = document.getElementsByClassName('facebook');
for (var i = 0; i < elems.length; ++i) {
var item = elems[i];
item.innerHTML += ('<p class="order">' + order_facebook[i] + '</p>');
}
/* INSTAGRAM ORDER */
var order_instagram = new Array(2,4,9,11,14,16,18);
var elems = document.getElementsByClassName('instagram');
for (var i = 0; i < elems.length; ++i) {
var item = elems[i];
item.innerHTML += ('<p class="order">' + order_instagram[i] + '</p>');
}
}
function fbShare(url, title, descr, image, winWidth, winHeight) {
var winTop = (screen.height / 2) - (winHeight / 2);
var winLeft = (screen.width / 2) - (winWidth / 2);
window.open('http://www.facebook.com/sharer.php?s=100&p[title]=' + title + '&p[summary]=' + descr + '&p[url]=' + url + '&p[images][0]=' + image, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width='+winWidth+',height='+winHeight+'&profile_id=38691411169');
}
//getElementsByClassName function
if (!document.getElementsByClassName) {
document.getElementsByClassName=function(cn) {
var allT=document.getElementsByTagName('*'), allCN=[], i=0, a;
while(a=allT[i++]) {
a.className==cn ? allCN[allCN.length]=a : null;
}
return allCN;
}
}
});
</script>
Related
So I have a small script here to get the coordinates of an image, I wanted it to start from the bottom left instead of the top left but when I change it from:
window.current_y = Math.round(event.pageY - $('#image').offset().top);
to:
window.current_y = Math.round(event.pageY - $('#image').offset().bottom);
It does not read the coordinates.
$( document ).ready(function() {
$('#image').mousemove( function(event) {
window.current_x = Math.round(event.pageX - $('#image').offset().left);
window.current_y = Math.round(event.pageY - $('#image').offset().top);
window.current_coords = window.current_x + ', ' + window.current_y;
$('#image_coords_now').html('Column: ' + window.current_coords + '.');
}).mouseleave( function() {
$('#image_coords_now').html(' ');
}).click( function() {
$('#x').html(window.current_x);
$('#y').html(window.current_y);
$('#image_coords_click').html('Last click: ' + window.current_coords + '. ');
var x0=21;
var y0=25;
var x1=163;
var y1=167;
var difx_cost=x1-x0;// difx=dify
var dify_cost=y1-y0;
var arr=new Array();
var j=1;
var x_reset=x0;
var y_reset=y0;
for(var i=0;i<=100;i++)
{
var prod=10*j;
var cell={x0:x0,x1:x0+difx_cost,y0:y0,y1:y0+dify_cost};
x0=cell['x1'];
if((i+1)==prod)
{
y0=cell['y1'];
x0=x_reset;
j++;
}
arr.push(cell);
}
console.log(arr);
var x=$('#x').html();
var y=$('#y').html();
//console.log(arr[0]['x0']);
var cost=0;
for(var k=0;k<=arr.length;k++){
cost=k;
if (x>=arr[k]['x0'] && x<=arr[k]['x1'] && y>=arr[k]['y0'] && y<=arr[k]['y1'])
{
alert('cell number '+(cost+1));
break;
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p id="x"></p>
<p id="y"></p>
<span id="image_coords_click"></span><span id="image_coords_now"> </span></div>
<img id="image" class="aligncenter" src="http://4.bp.blogspot.com/-c0lydOomMh8/UdMXTLn0frI/AAAAAAAAKdU/xa8kZMf23uQ/s721/100+number+grid.png" width="1475" height="1475" />
.offset() returns {top: ###, left: ###}, so there is no bottom property.
To get "bottom" you need to add element height:
$('#image').offset().top + $('#image').height()
I'm trying to add a click event to .user that will change the background color of the entire page to green. I'm very new to jQuery, but the code looks right to me. When I click the .users button, nothing happens. Anyone have any ideas?
$(document).ready(function() {
var $body = $('body')
/*$body.html('');*/
// var currentView = "Twittler Feed"
var currentView = $('<p>Twittler Feed</p>');
var refreshTweet = function() {
var index = streams.home.length - 1;
var endInd = index - 10;
while (index >= endInd) {
var tweet = streams.home[index];
var $tweet = $('<div class="tweets"><p class="posted-by"><button class="user">#' +
tweet.user + '</button><p class="message">' + tweet.message +
'</p><p class="time">' + /*$.timeago(tweet.created_at)*/ tweet.created_at + '</p></div>');
currentView.appendTo('#sidebar')
$tweet.appendTo($body);
index -= 1;
}
}
refreshTweet();
$('.refresh').on('click', function() {
if (document.getElementsByClassName('tweets')) {
$('.tweets').remove();
}
var result = refreshTweet();
$body.prepend(result);
})
$('.user').on('click', 'button', function() {
currentView = this.user
$('body').css('background-color', 'green');
});
});
<script>
var img = function(){
$("#slider").animate({"left":"-=1775px"},10000,function(){
$("#slider").animate({"left":"0px"},10000);
img();
});
};
img();
</script>
I used animation properties in jquery but i want the loop to display the three image continuously.
I once created a small js plugin that does this, you can see the code here:
$.fn.luckyCarousel = function(options) {
var car = this;
var settings = $.extend( {
'delay' : 8000,
'transition' : 400
}, options);
car.append($('<div>').addClass('nav'));
var nav = $('.nav', car);
var cnt = $("ul", car);
var car_w = car.width();
var carItems = $('li', car);
$(cnt).width((carItems.length * car_w) + car_w);
$(carItems).each(function(i) {
var dot_active = (!i) ? ' active' : '';
$(nav).prepend($('<div>').addClass('dot dot' + i + dot_active).bind('click', function(e) {
slideSel(i);
}));
});
$(carItems).css('visibility', 'visible');
$(cnt).append($(carItems).first().clone());
car.append(nav);
var sel_i = 0;
var spin = setInterval(function() {
slideSel('auto')
}, settings.delay);
function slideSel(i) {
if (i == 'auto') {
sel_i++;
i = sel_i;
} else {
clearInterval(spin)
}
var position = $(cnt).position();
var t = car_w * -i;
var last = false;
var d = t - position.left;
if (Math.abs(t) == cnt.width() - car_w) {
sel_i = i = 0;
}
$(cnt).animate({
left: '+=' + d
}, settings.transition, function() {
$('.dot', car).removeClass('active');
$('.dot' + i, car).addClass('active');
if (!sel_i) {
$(cnt).css('left', '0');
}
});
sel_i = i;
}
}
http://plnkr.co/edit/bObWoQD8sGYTV2TEQ3r9
https://github.com/luckyape/lucky-carousel/blob/master/lucky-carousel.js
The code has been adapted to be used without plugin architecture here:
http://plnkr.co/edit/9dmfzcyEMtukAb4RAYO9
Hope it helps,
g
var Slider = new function () {
var that = this;
var Recursion = function (n) {
setTimeout(function () {
console.log(n);
$('#sub_div img').attr('src', '/Images/' + n + '.JPG').addClass('current'); // n like 1.JPG,2.JPG .... stored images into Images folder.
if (n != 0)
Recursion(n - 1);
else
Recursion(5);
}, 3000);
};
var d = Recursion(5);
};
var Slider = new function () {
var that = this;
var Recursion = function (n) {
setTimeout(function () {
console.log(n);
$('#sub_div img').attr('src', '/Images/' + n + '.JPG').addClass('current'); // n like 1.JPG,2.JPG .... stored images into Images folder.
if (n != 0)
Recursion(n - 1);
else
Recursion(5);
}, 3000);
};
var d = Recursion(5);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="~/JS/Ajaxcall.js"></script>
<title>Index</title>
</head>
<body>
<div style="background: rgb(255, 106, 0) none repeat scroll 0% 0%; padding: 80px;" id="slider_div">
<div id="sub_div">
<img src="~/Images/0.JPG" style="width: 100%; height: 452px;">
</div>
</div>
</body>
</html>
I am new to javascript and have come up with this counter
Here is the JSFiddle - http://jsfiddle.net/ep6s616z/
and below is the javascript
I'm trying to figure out how i could add more values so that it goes up to 20 on the counter tool.
It must stay the same size, so how could i achieve this?
Would the new values be hidden and slide in?
Any help would be much appreciated!
var pages = ["1", "2", "3", "4", "5", "6", "7", "8"];
$(document).ready(function () {
var num = 1;
updatePrice(num);});
function updatePrice(num) {
pages.forEach(function(entry) {
if (entry == num) {
document.getElementById(entry).className = "page-selected page";
}
else {
document.getElementById(entry).className = "page";
}
document.getElementById('circle').innerHTML = num });
}
function addOne() {
var current = document.getElementsByClassName('page page-selected')[0].id
if (current < 8) {
current++;
updatePrice(current);
}
}
function takeOne() {
var current = document.getElementsByClassName('page page-selected')[0].id
if (current > 1) {
current--;
updatePrice(current);
}
}
I did a complete re-write as the events are far cleaner in pure jQuery. I also added an extra div to allow the scrolling you wanted:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/ep6s616z/18/
Simpler HTML:
<div id="circle">1</div>
<div id="calculator">
<div id="slider-left">-</div>
<div id="slider">
<div id="page-holder"></div>
</div>
<div id="slider-right">+</div>
</div>
Code:
// Generate n items
for (var i = 1; i <= 20; i++) {
$('#page-holder').append($('<div>').addClass('page').text(i));
}
// Outer slider - allows for scroller
var $slider = $('#slider');
// Actual page holding div
var $pageHolder = $('#page-holder');
// Listen for clicks on any .page divs
$pageHolder.on('click', 'div.page', function (e) {
var $div = $(this);
$('#page-holder .page').removeClass('page-selected');
$div.addClass('page-selected');
$('#circle').html($div.html());
// Ensure the element is visible - of not scrill it into view
var offset = $div.offset();
// Range of the visible area
var areaStart = $slider.scrollLeft();
var areaEnd = areaStart + $slider.width();
var x = ($div.index() + 1) * $div.outerWidth();
if (offset.left > areaEnd)
{
$slider.animate({scrollLeft: x}, 100);
}
else if (offset.left < areaStart)
{
$slider.animate({scrollLeft: x-$div.width()}, 100);
}
});
$('#slider-right').click(function () {
var $div = $('#page-holder .page-selected');
if (!$div.length) {
$div = $('#page-holder .page:first');
} else {
$div = $div.next();
}
$div.trigger('click');
});
$('#slider-left').click(function () {
var $div = $('#page-holder .page-selected');
if (!$div.length) {
$div = $('#page-holder .page').last();
} else {
$div = $div.prev();
}
$div.trigger('click');
});
Note: the scrolling to keep it in view is not perfect, as the range checks are not quite right, but you need something to do. :)
i guess this is what u wanted . i have added a button control for adding the more limits on the slider.
HTML code
<input id="add" name="addmore" type="button" value="AddMore" />
Jquery code:
$('#add').on('click', function () {
var divEle = '<div onClick="updatePrice(this.id)" id="' + count + '" class="page">' + count + '</div>';
$('#calculator').width($('#calculator').width() + sizeCounter);
$('#page-holder').width($('#page-holder').width() + sizeCounter);
$('#page-holder').append(divEle);
pages[count - 1] = count;
count++;
if (count == 10) sizeCounter += 4;
});
Live Demo :
http://jsfiddle.net/dreamweiver/ep6s616z/23/
Happy Coding :)
I have one slider that works perfectly ..... but the images are loaded at the time of page load ...
I want to load the images on click because I have lot of images to display so I can't load it my homepage because the page takes time to load so I have to use Ajax that loads one image
and and append it to my list
can any body help me how to do it ...
here is the code .. its working ..
the java script part
(function($){
$.fn.imageSlider = function(options) {
var options = $.extend({
leftBtn: '.leftBtn',
rightBtn: '.rightBtn',
visible: 3,
autoPlay: false, // true or false
autoPlayDelay: 10 // delay in seconds
}, options);
var make = function() {
$(this).css('overflow', 'hidden');
var thisWidth = $(this).width();
var mod = thisWidth % options.visible;
if (mod) {
$(this).width(thisWidth - mod); // to prevent bugs while scrolling to the end of slider
}
var el = $(this).children('ul');
el.css({
position: 'relative',
left: '0'
});
var leftBtn = $(options.leftBtn), rightBtn = $(options.rightBtn);
var sliderFirst = el.children('li').slice(0, options.visible);
var tmp = '';
sliderFirst.each(function(){
tmp = tmp + '<li>' + $(this).html() + '</li>';
});
sliderFirst = tmp;
var sliderLast = el.children('li').slice(-options.visible);
tmp = '';
sliderLast.each(function(){
tmp = tmp + '<li>' + $(this).html() + '</li>';
});
sliderLast = tmp;
var elRealQuant = el.children('li').length;
el.append(sliderFirst);
el.prepend(sliderLast);
var elWidth = el.width()/options.visible;
el.children('li').css({
float: 'left',
width: elWidth
});
var elQuant = el.children('li').length;
el.width(elWidth * elQuant);
el.css('left', '-' + elWidth * options.visible + 'px');
function disableButtons() {
leftBtn.addClass('inactive');
rightBtn.addClass('inactive');
}
function enableButtons() {
leftBtn.removeClass('inactive');
rightBtn.removeClass('inactive');
}
leftBtn.click(function(event){
event.preventDefault();
if (!$(this).hasClass('inactive')) {
disableButtons();
el.animate({left: '+=' + elWidth + 'px'}, 400,
function(){
if ($(this).css('left') == '0px') {$(this).css('left', '-' + elWidth * elRealQuant + 'px');}
enableButtons();
}
);
}
return false;
});
rightBtn.click(function(event){
event.preventDefault();
if (!$(this).hasClass('inactive')) {
disableButtons();
el.animate({left: '-=' + elWidth + 'px'}, 400,
function(){
if ($(this).css('left') == '-' + (elWidth * (options.visible + elRealQuant)) + 'px') {$(this).css('left', '-' + elWidth * options.visible + 'px');}
enableButtons();
}
);
}
return false;
});
if (options.autoPlay) {
function aPlay() {
rightBtn.click();
delId = setTimeout(aPlay, options.autoPlayDelay * 1000);
}
var delId = setTimeout(aPlay, options.autoPlayDelay * 1000);
el.hover(
function() {
clearTimeout(delId);
},
function() {
delId = setTimeout(aPlay, options.autoPlayDelay * 1000);
}
);
}
};
return this.each(make);
};
})(jQuery);
here is the html
<div class="slider-wrap">
<div class="slider">
<ul id="imgList" class="sliderList">
<li><img><src></li>
<li><img><src></li>
<li><img><src></li>
<li><img><src></li>
<li><img><src></li>
</ul>
</div>
<img src="/evfimages/prevLogo.png"/>
<img src="/evfimages/nextLogo.png"/>
This is the function that call Js File .
jQuery('.slider').imageSlider({
leftBtn: '.sa-left',
rightBtn: '.sa-right',
visible: 5,
});
And some CSS for formatting
So I have a large no of Images 500 .... so i want to use ajax that loads images on click and append to the current list of images ......
any link or suggestion will be appreciated ......