How to show two div when user scroll down using jquery? - javascript

Can anyone please tell me how to show two divs when the user scroll down using jquery.I want to push values on the array .Is it possible to add a div on the bottom.As we add when user scroll to top ?
http://jsfiddle.net/Gbd3z/2/
$("#fullContainer").scroll(function () {
// top
if ($(this).scrollTop() === 0 && pages.length) {
console.log("up"+pages);
var stringLoad = "page_" + pages.length;
$("<div id='" + stringLoad + "'>" + pages.pop() + "</div>").prependTo($("#fullContainer"));
$('#fullContainer').children().slice(3).remove()
}
if ($(this).scrollTop() >= $(this)[0].scrollHeight - document.body.offsetHeight) {
console.log("down");
}
});

I'm not entirely sure what you're asking for, but does this do it?
http://jsfiddle.net/luken/R24TH/
var pages = [page_1, page_2, page_3, page_4,page_5];
var lastLoadedPageIndex = -1;
var $container = $('#fullContainer');
addNextPageToContainer();
function addNextPageToContainer () {
lastLoadedPageIndex++;
if (lastLoadedPageIndex < pages.length) {
$( '<div id="page_'
+ lastLoadedPageIndex
+ '" class="page">'
+ pages[lastLoadedPageIndex]
+ '</div>'
).slideDown().appendTo( $container );
}
}
$container.scroll(function(){
if ($container.scrollTop() === 0 && pages.length) {
console.log("up");
} else if ($container.scrollTop() >= $container[0].scrollHeight - document.body.offsetHeight) {
console.log("down");
addNextPageToContainer();
}
});

Related

Easy Pagination add extra navi bar on top

Easy pagination plugin has default bottom bar under list.
I tried to add extra navi bar on top.
It displays. But it doesn't work pagination.
here is original code.
var displayNav = function() {
htmlNav = '<div class="easyPaginateNav">';
if(plugin.settings.firstButton) {
htmlNav += ''+plugin.settings.firstButtonText+'';
}
if(plugin.settings.prevButton) {
htmlNav += ''+plugin.settings.prevButtonText+'';
}
for(i = 1;i <= plugin.settings.pages;i++) {
htmlNav += ''+i+'';
};
if(plugin.settings.nextButton) {
htmlNav += ''+plugin.settings.nextButtonText+'';
}
if(plugin.settings.lastButton) {
htmlNav += ''+plugin.settings.lastButtonText+'';
}
htmlNav += '</div>';
plugin.nav = $(htmlNav);
plugin.nav.css({
'width': plugin.el.width()
});
plugin.el.before(plugin.nav);
plugin.el.after(plugin.nav);
var elSelector = '#' + plugin.el.get(0).id + ' + ';
$(elSelector + ' .easyPaginateNav a.page,'
+ elSelector + ' .easyPaginateNav a.first,'
+ elSelector + ' .easyPaginateNav a.last').on('click', function(e) {
e.preventDefault();
displayPage($(this).attr('rel'));
});
$(elSelector + ' .easyPaginateNav a.prev').on('click', function(e) {
e.preventDefault();
page = plugin.settings.currentPage > 1?parseInt(plugin.settings.currentPage) - 1:1;
displayPage(page);
});
$(elSelector + ' .easyPaginateNav a.next').on('click', function(e) {
e.preventDefault();
page = plugin.settings.currentPage < plugin.settings.pages?parseInt(plugin.settings.currentPage) + 1:plugin.settings.pages;
displayPage(page);
});
};
I tried to put plugin.nav .before and .after plugin.el at the same time but top doesn't display and work but buttom one does.
here is jSFiddle link - https://jsfiddle.net/ezq9zf1j/
Use clone to clone the navigation and prepend it to the parent element
$('#easyPaginate').easyPaginate({
paginateElement: 'img',
elementsPerPage: 3,
effect: 'climb'
});
var nav = $('.easyPaginateNav').clone(true,true);
nav.prependTo('body');
demo:http://jsfiddle.net/s41buqkc/

Masonary reload item not working

I am trying to do gallery portfolio with help of masonry and custom click event. I can hide show images with the click event, but when hide show event complete masonry not reset to again.
link
Here is jQuery code:
var pmo = "#p-masonry_outer";
var ppt = "#p-portfolio_typs";
$('' + ppt + ' li span').on('click', function() {
$('' + ppt + ' li span').removeClass('p-active_work');
$(this).addClass('p-active_work');
var WorkRel = $(this).data("cat");
if (WorkRel != "0") {
$("" + pmo + " > div").hide();
$(".p-masonry a").attr('data-lightbox', '');
$("" + pmo + " > div").each(function() {
var WorkAttrStrip = $(this).data('cat');
var WorkAttr = WorkAttrStrip.split(",");
if ($.inArray(WorkRel + "", WorkAttr) !== -1) {
$(this).show;
}
});
var $container = $('.js-masonry');
$container.imagesLoaded(function() {
$container.masonry();
});
} else {
$("" + pmo + " > div").fadeIn("slow");
}
return false;
}

Function not firing correctly on first click

I have a function that makes two buttons.
One button will auto scroll down and the other up.
It goes through an array and changes the button on every tap.
My problem is that I have to click the button twice to get it to work and then it does not get fired after that at all.
Is there a logic error in here I am not seeing?
What I want it the arrows to act like the twitter bootstrap image carousal. I want to click the arrows and have them take me to the next or previous section.
This is a screenshot of the the page and the arrows I am trying to change
IMG REMOVED
URL REMOVED
Sorry, I removed the img and url but with this site not being live yet, it shouldn't be viewed like that. I was in a pickle though.
I solved the problem. Read the comments if you have a similar one like this.
Thanks everyone!
$(function () {
var leftArrow = $('#left-arrow')
var rightArrow = $('#right-arrow')
rightArrow.bind("tap", rightTapHandler)
function rightTapHandler(event){
if (ai == 0) {
alert('0' + event)
ai = 1
controllerContainer.innerHTML = linkArrayForwards[ai] + '<div id="right-arrow" class="arrow"></div></a>' + linkArrayForwards[0] + '<div id="left-arrow" class="arrow"></div></a>';
return
} else if (ai > 0) {
alert(ai)
ai++
controllerContainer.innerHTML = linkArrayForwards[ai] + '<div id="right-arrow" class="arrow"></div></a>' + linkArrayForwards[ai - 1] + '<div id="left-arrow" class="arrow"></div></a>';
return
} else if (ai >= linkArrayBackswards.length) {
ai = linkArrayBackswards.length;
controllerContainer.innerHTML = linkArrayForwards[ai] + '<div id="right-arrow" class="arrow"></div></a>' + linkArrayForwards[ai - 1] + '<div id="left-arrow" class="arrow"></div></a>';
return
} else {
alert('nothin')
return false
}
};
leftArrow.bind("tap", leftTapHandler)
function leftTapHandler(event) {
if (ai == 0) {
alert('0' + event)
ai = 1
controllerContainer.innerHTML = linkArrayBackswards[ai] + '<div id="right-arrow" class="arrow"></div></a>' + linkArrayBackswards[0] + '<div id="left-arrow" class="arrow"></div></a>';
return
} else if (ai > 0) {
alert(ai)
ai--
controllerContainer.innerHTML = linkArrayBackswards[ai] + '<div id="right-arrow" class="arrow"></div></a>' + linkArrayBackswards[ai - 1] + '<div id="left-arrow" class="arrow"></div></a>';
return
} else if (ai >= linkArrayBackswards.length) {
ai = linkArrayBackswards.length;
controllerContainer.innerHTML = linkArrayBackswards[ai] + '<div id="right-arrow" class="arrow"></div></a>' + linkArrayBackswards[ai - 1] + '<div id="left-arrow" class="arrow"></div></a>';
return
} else {
return false
}
};
})
From what i notised on your website, it alerts "0[option Option]" on the first click on any of the two arrows.
if (ai == 0) {
alert('0' + event)
ai = 1
"ai == 0" must be true.. It's the only alert with "0" in it and the only reason it would pop that alert, as far as i know & see.
Apart from that, once you have clicked OK on the alert, the arrows seem to work perfectly fine for me..
Edit
Are you sure you are declaring ai before the "if (ai == 0)" check?
If you aren't. remove the alert so the code looks like this (for both arrows):
if (ai == 0) {
ai = 1

DIV Not Being Generated in IE7 with jQuery

I can't figure out why this script isn't working in IE7 and 8. It works fine in all other browsers, but for some reason, in IE7 and 8 this script is only firing the // thumbs hover bit, and not the // loading images bit (which is actually more important). Everything seems to be fine, does anyone have any ideas?
function featuredJS() {
$("[title]").attr("title", function(i, title) {
$(this).data("title", title).removeAttr("title");
});
// loading images
var last = "featured/01.jpg";
$("#thumbs a").click(function(event) {
event.preventDefault();
var position = $(this).attr("class");
var graphic = $(this).attr("href");
var title = $(this).attr("alt");
var description = $(this).data("title");
var currentMargin = $("#full-wrapper #full").css("marginLeft");
var currentWidth = $("#full-wrapper #full").css("width");
var transitionTest = currentMargin.replace("px", "") * 1;
if(last != graphic && ((transitionTest % 938) == 0 || transitionTest == 0)) {
$("#placeholder").before( "<div class='featured'><div class='description " + position + "'>" + "<h3>" + title + "</h3>" + "<p>" + description + "</p>" + "</div><img src=\"" + graphic + "\" /><div style='clear:both;'></div></div>" );
$("#full-wrapper #full").animate({
marginLeft: "-=938px"
}, 500);
$("#full-wrapper #full").css("width","+=938px");
last = graphic;
};
});
// thumbs hover
$("#thumbs .thumb").hover(
function () {
$(this).find(".red-bar").animate({height:"72px"},{queue:false,duration:500});
},
function () {
$(this).find(".red-bar").animate({height:"3px"},{queue:false,duration:500});
}
);
};
Demo page at http://www.weblinxinc.com/beta/welex/demo/
Your problem is caused by not having a margin set to begin with. transitionTest then becomes NaN because the style is auto, not 0px like you're expecting. Consider trying this instead:
var transitionTest = parseInt("0"+currentMargin,10);
This will trim off the "px" for you, as well as handle the case where the margin is a keyword.

Can't find the issue: javascript/jQuery

I have the following function that gets called on the KeyDown event of a link.
Basically I'm trying to move down the table (the application calls it a ListBox). In the first loop what I'm trying to do is see if they use the mouse to click inside the table first and my hope was to find the row value and then manipulate the class (highlight) from there.
Unfortunately right now I'm not even getting that far. When the screen loads and I press the down button, the current row (0) has it's class changed as well as row (1). But on the next down button press the tr_lst says it is undefined. Which then throws the loop off and then I get all sorts of errors.
I tried to implement a jsfiddle, however, I couldn't get it working. But you can see some of the code I'm trying to implement.
function xKeyDown(event,ListBoxVal){
var tr_lst = $('#' + ListBoxVal).find('tr[class="LUGridRowHighlight"]');
var iCount = 0;
for (iCount = 0; iCount <= $('#' + ListBoxVal + ' tr').length; iCount++){
if($('#' + ListBoxVal + ' tr:eq('+iCount+')').attr('id') == tr_lst.attr('id')){
lstRow = iCount;
break;
}
}
if (event.keyCode == 40){
//arrow down
if(parseInt(lstRow) < $('#' + ListBoxVal + ' tr').length)
{
if(parseInt(lstRow) == 0){
document.getElementById(ListBoxVal).focus();
lstRow +=1;
document.getElementById($('#' + ListBoxVal + ' tr:eq('+parseInt(lstRow)+')').attr('id')).focus();
$('#' + ListBoxVal + ' tr:eq('+parseInt(lstRow)+')').addClass('LUGridRowHighlight');
$('#' + ListBoxVal + ' tr:eq('+parseInt(lstRow)+')').prev().removeClass('LUGridRowHighlight') .addClass('LUGridRow');
}else{
document.getElementById($('#' + ListBoxVal + ' tr:eq('+parseInt(lstRow)+')').attr('id')).focus();
$('#' + ListBoxVal + ' tr:eq('+parseInt(lstRow)+')').addClass('LUGridRowHighlight');
$('#' + ListBoxVal + ' tr:eq('+parseInt(lstRow)+')').prev().removeClass('LUGridRowHighlight') .addClass('LUGridRow');
lstRow +=1;
}
}
...
Update:
After looking into this further... It appears that when I click the down arrow more than once the following code is causing an error:
var tr_lst = $('#' + ListBoxVal).find('tr[class="LUGridRowHighlight"]');
When I try to print this out it is 'undefined'
I'm wondering since I am manipulating the class via jQuery do I need to add a .live somewhere to the find? As I believe when elements are manipulated dynamically the .live comes into play. Any suggestions?
Try this
function xKeyDown(event,ListBoxVal){
var $listBoxVal = $('#' + ListBoxVal);
var trs = $listBoxVal.find('tr');
var tr_lst = $listBoxVal.find('tr.LUGridRowHighlight');
var tr_lst_id = tr_lst.attr('id');
var iCount = 0;
for (iCount = 0; iCount <= trs.length; iCount++){
if($listBoxVal.find('tr:eq('+iCount+')').attr('id') == tr_lst_id){
lstRow = iCount;
break;
}
}
if (event.keyCode == 40){
//arrow down
if(parseInt(lstRow) < $listBoxVal.find('tr').length)
{
if(parseInt(lstRow) == 0){
$listBoxVal.focus();
lstRow +=1;
$("#"+$listBoxVal.find('tr:eq('+parseInt(lstRow)+')').attr('id')).focus();
$listBoxVal.find('tr:eq('+parseInt(lstRow)+')').addClass('LUGridRowHighlight');
$listBoxVal.find(' tr:eq('+parseInt(lstRow)+')').prev().removeClass('LUGridRowHighlight').addClass('LUGridRow');
}else{
$("#"+$listBoxVal.find('tr:eq('+parseInt(lstRow)+')').attr('id')).focus();
$listBoxVal.find('tr:eq('+parseInt(lstRow)+')').addClass('LUGridRowHighlight');
$listBoxVal.find('tr:eq('+parseInt(lstRow)+')').prev().removeClass('LUGridRowHighlight').addClass('LUGridRow');
lstRow +=1;
}
}
...

Categories