how to show two div only at onetime? - javascript

can you please tell me how to show two div one at time ?
Actually I make one demo where I scroll to top it create one div and prepend to main div.But I want only two div show at one time.Now it will create new divs whenever user goes to top.I want user remove below div.
Example on starting : it show On div id="page_5"
when user scroll up it create div id="page_4" .It is fine
But when user scroll again it create div id="page_3" but that time I need user delete that div id="page_5" from below.again user go up it remove div id="page_4".
if user come down it remove upper div and show below div .remove remove div id="page_1" or remove div id="page_2" and show div id="page_5" or div id="page_4"
http://jsfiddle.net/Gbd3z/2/
var pages = [page_1, page_2, page_3, page_4,page_5];
var totalPage = "page_" + pages.length;
$("<div id='" + totalPage + "'>" + pages.pop() + "</div>").prependTo($("#fullContainer"));
$("#fullContainer").scroll(function () {
// top
if ($(this).scrollTop() === 0 && pages.length) {
console.log("up");
var stringLoad = "page_" + pages.length;
$("<div id='" + stringLoad + "'>" + pages.pop() + "</div>").prependTo($("#fullContainer"));
}
if ($(this).scrollTop() >= $(this)[0].scrollHeight - document.body.offsetHeight) {
console.log("down");
}
});

Try
$("#fullContainer").scroll(function () {
// top
if ($(this).scrollTop() === 0 && pages.length) {
console.log("up");
var stringLoad = "page_" + pages.length;
$("<div id='" + stringLoad + "'>" + pages.pop() + "</div>").prependTo($("#fullContainer"));
//remove element at 2nd index
$('#fullContainer').children().slice(2).remove()
}
if ($(this).scrollTop() >= $(this)[0].scrollHeight - document.body.offsetHeight) {
console.log("down");
}
});
Demo: Fiddle

Related

Event when window scrolled to footer in all resolutions - jquery

I have html which has header footer and divs between. I am trying to create an event when the window is scrolled to footer. As the footer appears immediately an alert must popup which shows a message.
Here is my HTML content
http://jsfiddle.net/q4bw82gy/
I have tried the below jquery code, but it is not working for resolutions other than desktop
$(window).scroll(function() {
var scrollPosition = $(window).height() + $(window).scrollTop();
var theight = ($('.banner-section').height()+$('.section-one').height()+$('.section-two').height()+$('.read-one').height()+$('.read-two').height()+$('.next-program').height())-($('.navbar-dark').height()+
($('.main-navigation').height()));
var height1 = $(window).scrollTop();
var height2 = $('.main').height()-$('.expand-section').height()-$('.ftr').height();
if(height1 >= theight){
alert('message 1');
}
else{
alert('message 2');
}
});
Please help with a better solution
Do you want something like this?
$(function() {
$(window).scroll(function() {
var footerTop = $('.ftr').position().top; // or .offset().top
var scrollTop = $(window).scrollTop();
var viewportHeight = $(window).height();
if (footerTop <= scrollTop + viewportHeight) {
console.log("true|" + footerTop + "|" + scrollTop + "|" + viewportHeight);//alert
} else {
console.log("false|" + footerTop + "|" + scrollTop + "|" + viewportHeight);//alert
}
});
});

Switch Positions of Tablerows only work once

I have made a jsfiddle
I have a table with articlepositions. And I would made it able that the User can change the position sort by clicking up or down arrows.
But when I swap once the position, i could not change the position of the changed row anymore.
Here is the function:
function switchPosition( data, direction )
{
var tableName = "artikelposition";
currentPosition = parseInt( data['position'] );
if( direction == "up" )
{
newPosition = currentPosition - 1;
}
else if( direction == "down" )
{
newPosition = currentPosition + 1;
}
var otherTr = $("tr[data-position='" + newPosition + "']").data("artikelid");
console.log("clicked object" + data['artikelid'] + " : current position " + data['position'] + " : new position " + newPosition);
console.log("other objekt" + $("#" + otherTr).data("artikelid") + " : current position " + $("#" + otherTr).data("position") + " : new Position " + currentPosition);
$( "#" + data['artikelid'] )
.data({
"position": newPosition
});
$( "#" + data['artikelid'] + " td.tdArticleNumber span.spanPositionNummer" )
.html( newPosition );
$( "#" + otherTr )
.data({
"position": currentPosition
});
$( "#" + otherTr + " td.tdArticleNumber span.spanPositionNummer" )
.html( currentPosition );
sortTable( tableName );
}
As ASGM has already mentioned, problem is with otherTr. In this line:
var otherTr = $("tr[data-position='" + newPosition + "']").data("artikelid");
I still don't know why this expression always returns data-artikelid of first tr, but if you somewhy want to save your code, than you can use replace this line with something like:
$("#artikelposition tr").each(function()
{
var that = $(this);
if (that.data("position") == newPosition)
{
otherTr = that.data('artikelid');
}
});
As Pawel said there in comments, problem is that data-position is set dynamically. But even his idea to use $("...").attr("data-...", value) seems not to work there.
You can probably accomplish this with a lot less code (see jsfiddle):
$(document).ready(function(){
$(".rowUp,.rowDown").click(function(){
var row = $(this).parents("tr:first");
if ($(this).is(".rowUp")) {
row.prev().find(".spanPositionNummer").html(row.index() + 1);
row.insertBefore(row.prev());
} else {
row.next().find(".spanPositionNummer").html(row.index() + 1);
row.insertAfter(row.next());
}
row.find(".spanPositionNummer").html(row.index() + 1);
});
});
You can attach a click handler to the images and user insertBefore() to move the rows. You can also use the built-in index() function (rather than fiddling with data-position) to set the position number span.
(Based on the answer from How to move table row in jQuery?)
Or if you want to do this with your existing code, the bug seems to be that you're selecting the wrong otherTr.
When you first click the down arrow on the top row, you can see in the console that the selected row is moved from position 1 to 2, and the middle row is moved from 2 to 1:
Angeklicktes Objekt2445 : aktuelle Position 1 : neue Position 2 (index):59
Anderes Objekt2501 : aktuelle Position 2 : neue Position 1 (index):60
But when you click the bottom arrow on what's now the top row, this is what the console logs:
Angeklicktes Objekt2501 : aktuelle Position 1 : neue Position 2 (index):59
Anderes Objekt2501 : aktuelle Position 1 : neue Position 1 (index):60
Note that the top row is (correctly) being moved from position 1 to 2. But immediately afterwards, the same row (Objekt2501, referenced by the same position) is instructed to move from 1 to 1.

Increase jquery variable by 1 on scroll

I'm having issues increasing a variable by 1 every time I scroll. I successfully increase the variable by 1, but only once. This is the code I got. I need to increase the variable page.
$(document).ready(function () {
$(document).scroll(function (e) {
currentPage = 0;
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
++currentPage;
$.getJSON("../campus/Settings/TranslationSettings.ashx?command=show&page=" + currentPage + "&Lang=en", function (data) {
var items = [];
$.each(data.Keys, function (key, val) {
$("<ul/>", {
"class": "translateinfo",
html: "<li class='keystring'><span class='label'>text string:</span>" + val["text string"] + "</li>" + "<li class='autotranslate'><span class='label'>Automated translation:</span>" + val["automated translation"] + "</li>" + "<li class='functionnumber'><span class='label'>Function Number:</span>" + val["function number"] + "</li>" + "<li class='translateurl'><span class='label'>URL:</span>" + val["url"] + "</li>"
}).appendTo("#updatepanel");
});
});
}
});
});
Not sure if you copy/paste your entire code. But you're recreating currentPage everytime the user scroll
Working fiddle, I create the variable before the scroll loop.
var currentPage = 0;
$(document).scroll(function (e) {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
++currentPage;
console.log(currentPage);
}
})
http://jsfiddle.net/dCr3Z/

Floating, scrolling element is changing scroll position

JSFiddle
I have a page, broken up into 3 sections. A header, a sidebar, and a content section. I'm trying to get the sidebar to scroll with the page until it hits the top, then stick there until we scroll back down, at which point it sticks to the bottom of the header. Relevant snippet:
var Sidebar = $("#Dock"), pos = Sidebar.offset();
$(window).scroll(function () {
console.log('pre ' + Sidebar.hasClass('fixed') + ' | ' + $(this).scrollTop() + ' | ' + (pos.top + 10));
if ($(this).scrollTop() > (pos.top + 10) && Sidebar.hasClass('notFixed')) {
Sidebar.removeClass('notFixed');
Sidebar.addClass('fixed');
} else if ($(this).scrollTop() <= (pos.top + 10) && Sidebar.hasClass('fixed')) {
Sidebar.removeClass('fixed');
Sidebar.addClass('notFixed');
}
console.log('pos ' + Sidebar.hasClass('fixed') + ' | ' + $(this).scrollTop() + ' | ' + (pos.top + 10));
});
So here's what actually happens: We scroll down, we remove the notFixed class from our floating element, give it the fixed class, and then immediately jump to $(this).scrollTop() = 23. Finally, any built up scroll events resolve, moving from our last position, and resetting to 23. On the Fiddle, instead of 23 it's 0.
Why is it jumping back, and what can I do to fix it?
edit: updated fiddle http://jsfiddle.net/WHLHW/4/
The reason it wasn't working is because you had height: 1000px on #dock, and no height for body. So because the page was the height of #dock, you couldn't scroll past #dock.
So I did the following and it works now.
#dock {
height:300px;
}
body {
height: 1000px;
}

Add description to lightbox image

I'm using this lightbox plugin: http://s.codepen.io/schadeck/pen/gjbqr
I would like to know if there is any way to add a simple description attribute in my current code.
What I want to achieve is a description text on the bottom of the image in the lightbox. I've looked for a solution, but nothing seems to apply for the lightbox.js script I'm using.
Here is the code:
jQuery(document).ready(function($) {
// global variables for script
var current, size;
$('.lightboxTrigger').click(function(e) {
// prevent default click event
e.preventDefault();
// grab href from clicked element
var image_href = $(this).attr("href");
// determine the index of clicked trigger
var slideNum = $('.lightboxTrigger').index(this);
// find out if #lightbox exists
if ($('#lightbox').length > 0) {
// #lightbox exists
$('#lightbox').fadeIn(300);
// #lightbox does not exist - create and insert (runs 1st time only)
} else {
// create HTML markup for lightbox window
var lightbox =
'<div id="lightbox">' +
'<p>Clique para fechar</p>' +
'<div id="slideshow">' +
'<ul></ul>' +
'<div class="nav">' +
'Anterior' +
'Proxima' +
'</div>' +
'</div>' +
'</div>';
//insert lightbox HTML into page
$('body').append(lightbox);
// fill lightbox with .lightboxTrigger hrefs in #imageSet
$('#imageSet').find('.lightboxTrigger').each(function() {
var $href = $(this).attr('href');
$('#slideshow ul').append(
'<li>' +
'<img src="' + $href + '">' +
'</li>'
);
});
}
// setting size based on number of objects in slideshow
size = $('#slideshow ul > li').length;
// hide all slide, then show the selected slide
$('#slideshow ul > li').hide();
$('#slideshow ul > li:eq(' + slideNum + ')').show();
// set current to selected slide
current = slideNum;
});
//Click anywhere on the page to get rid of lightbox window
$('body').on('click', '#lightbox', function() { // using .on() instead of .live(). more modern, and fixes event bubbling issues
$('#lightbox').fadeOut(300);
});
// show/hide navigation when hovering over #slideshow
$('body').on(
{ mouseenter: function() {
$('.nav').fadeIn(300);
}, mouseleave: function() {
$('.nav').fadeOut(300);
}
},'#slideshow');
// navigation prev/next
$('body').on('click', '.slide-nav', function(e) {
// prevent default click event, and prevent event bubbling to prevent lightbox from closing
e.preventDefault();
e.stopPropagation();
var $this = $(this);
var dest;
// looking for .prev
if ($this.hasClass('prev')) {
dest = current - 1;
if (dest < 0) {
dest = size - 1;
}
} else {
// in absence of .prev, assume .next
dest = current + 1;
if (dest > size - 1) {
dest = 0;
}
}
// fadeOut curent slide, FadeIn next/prev slide
$('#slideshow ul > li:eq(' + current + ')').fadeOut(750);
$('#slideshow ul > li:eq(' + dest + ')').fadeIn(750);
// update current slide
current = dest;
});
});
HTML:
<ul id="imageSet">
<li><img src="" title=""></li>
</ul>
I haven't looked at the script but you could try this:
var desc = ['some description title', 'another description title', 'etc'];
$('body').append(lightbox);
// fill lightbox with .lightboxTrigger hrefs in #imageSet
$('#imageSet').find('.lightboxTrigger').each(function(index) {
var $href = $(this).attr('href');
$('#slideshow ul').append(
'<li>' +
'<img src="' + $href + '">' +
'<span>' + desc[index] + '</span>' +
'</li>'
);
});

Categories

Resources