Today I saw my Facebook account and scroll the contend bottom. After some time I found it load more -2 data while scrolling (scroll position same where it was previously). I think it is new functionality given by Facebook. Previously they first go to bottom and get that event than load the data example pull to refresh. Can we do load new data while scrolling so that it look all data in same page ?
http://jsfiddle.net/N5LZB/28/
$(document).ready(function(){
$('#fullContainer').on('scroll', function () {
if ($(this).scrollTop() === 0 ) {
// alert('--')
if(file_show_counter>0){
var precontent=$("#preRealTimeContents").html();
//$("#loadingImg").hide();
$("#realTimeContents").html($("#preRealTimeContents").html() + '<div style="clear:both;"></div>');
console.log("preRealTimeContents : " + $("#preRealTimeContents").height());
//$("#preRealTimeContents").html('');
$("#preRealTimeContents").html(pages[--file_show_counter]+ '<div style="clear:both;"></div>');
$("#fullContainer").scrollTop(
$("#preRealTimeContents").height()
);
}
}
else if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight ) { if(++file_show_counter<count) {
//alert(file_show_counter);
$("#preRealTimeContents").html($("#realTimeContents").html());
$("#realTimeContents").html(pages[file_show_counter+1]+'<div style="clear:both;"></div>');
$("#fullContainer").scrollTop(
$("#preRealTimeContents").height()- $("#fullContainer").height()
);
}else {
file_show_counter--;
}
}
});
});
Thanks
Try this (pattern)
css
#realTimeContents div {
padding-top : 8px;
padding-bottom : 8px;
}
js (updated)
$(function () {
var page_0 = "Shikhar Dhawan is an Indian international cricketer."; // `page_1`
var page_1 = "Rohit Gurunath Sharma is an Indian international cricketer."; // `page_2`
var page_2 = "Virat Kohli is an Indian cricketer."; // `page_3`
var page_3 = "Suresh Raina is currently a player of Indian Cricket Team"; // `page_4`
var page_4 = "Yuvraj Singh is an Indian international cricketer."; // `page_5`
var pages = [page_0, page_1, page_2, page_3, page_4];
$("#fullContainer")
.find("#preRealTimeContents")
.html("<div id=0>" + pages[0] + "</div>")
.parent("#fullContainer")
.one("scroll", function (e) {
$.each(pages.slice(1, 5), function (k, v) {
$("#realTimeContents")
.append("<div id=" + (++k) + ">" + v + "</div>");
// append `2` `pages`,
// adjust for number
// of `pages` to append
// i.e.g., `0` - `4`
return (k != 2)
});
});
});
jsfiddle http://jsfiddle.net/guest271314/h95h5/
Related
I have several images as slide. On clicking next button, images are being slide shown but i want to add a text for each image over the image.
javacsript code:
afterShow: function( instance, current ) {
//alert($(this).find('img').attr('alt'));
var url = window.location.href;
var cat = url.substring(url.lastIndexOf('#') + 1);
var cats = cat.split('-');
catId= cats[0];
var index=catId+$("[data-fancybox-index]").html();
//alert($("[data-fancybox-index]").html());
//$('.fancybox-slide').children(".imagecontainer").remove();
//alert($("#d_" + index).length);
if($("#d_" + index).length == 0) {
var strDiv='<div id="d_'+index+'" class="centerdivCont"></div>';
$(".fancybox-content").append(strDiv);
return false;
}
/*if($("#d_" + index).length> 0) {
var strDiv='<div id="d_'+index+'" class="centerdivCont"></div>';
$(".fancybox-content").remove(strDiv);
}else{
var strDiv='<div id="d_'+index+'" class="centerdivCont"></div>';
$(".fancybox-content").append(strDiv);
}*/
//alert($("#d_" + index).length);
//$(".fancybox-slide").append($('#'+index).html());
},
i posted this question earlier however it was a jumbled and made no real sense.
Also I've re hashed the code but i'm still getting the same issue.
To explain; i have an SVG element that i can current click on and drag about, this will works peachy and i'm, pleased with it, however once the user unclicks the mouse button and then goes and moves the mouse and starts the dragging functionality, the svg co-ords simply go back to 0 and the whole image just starts back at 0.0.
this is really buggin me now, i feel like i'm missing something simple.
edit: JSFiddle as requested - https://jsfiddle.net/2cu2jvbp/2/
Here is the code that i've "hashed" together:
var states = '', stateOrigin;
var root = document.getElementById("svgCanvas");
var viewport = root.getElementById("viewport");
function setAttributes(element, attribute)
{
for(var n in attribute) //rool through all attributes that have been created.
{
element.setAttributeNS(null, n, attribute[n]);
}
}
function setupEventHandlers() //self explanatory;
{
setAttributes(root, {
"onmousedown": "mouseDown(evt)", //do function
"onmouseup": "mouseUp(evt)",
"onmousemove": "mouseMove(evt)",
});
}
function setCustomTransMatrix(element, a,b,c,d,e,f) {
var m = "matrix(" + a + " " + b + " " + c + " " +d + " " + e + " " + f + ")";
element.setAttribute("transform", m);
}
function getMousePoint(evt) { //this creates an SVG point object with the co-ords of where the mouse has been clicked.
var points = root.createSVGPoint();
points.x = evt.clientX;
points.Y = evt.clientY;
return points;
}
function mouseDown(evt)
{
if(evt.target == root || viewport)
{
states = "pan";
stateOrigin = getMousePoint(evt);
}
}
function mouseMove(evt)
{
var pointsLive = getMousePoint(evt);
var storedCo = [];
if(states == "pan")
{
setCustomTransMatrix(viewport, 1,0,0,1, pointsLive.x - stateOrigin.x, pointsLive.Y - stateOrigin.Y);
storedCo[0] = pointsLive.x - stateOrigin.x
storedCo[1] = pointsLive.Y - stateOrigin.Y;
}
else if(states == "store")
{
stateOrigin = pointsLive;
states = "stop";
}
}
function mouseUp(evt)
{
if(states == "pan")
{
states = "store";
if(states == "stop")
{
states ='';
}
}
}
function intialize() {
var matrik = root.getCTM();
setupEventHandlers();
console.log(matrik);
//setCustomTransMatrix(viewport, matrik.a, matrik.b, matrik.c, matrik.d, matrik.e,matrik.f);
}
intialize();
the hosting company loads a script on all their sites that is allowing for the tabs to be dragged/dropped , however it is also causing the caption images within the same body_home page to be drag/drop , i have requested this be fixed but i don't think they are concerned.
I am permitted to load my own jquery, javascript , html ,css onto the site to do changes , but i can not stop the host from loading this js file , so how can i reverse this ? Here is a snippet of the portion of the js file i think that is causing this problem .
I am permitted to load my own footer and header messages , so is there anyway i can remove what they are doing here , or reverse the effect on the captions ?
i cant find a way for the listener to be removed from outside.
They have used an anonymous function on the event 'domready' .
Does javascript have a feature to remove the listener from outside the anonymous method
window.onload=function() {
if (document.getElementById("body_home")) {
set_up_double_click_events();
if (document.getElementById("homepagetabs") && document.getElementById("tab2")) {
new Sortables($('homepagetabs'), {
onComplete: function() {
var parent = this.element.parentNode;
var saveIt = false;
if (typeof currentTabOrder == "undefined") {
currentTabOrder = new Array();
for (var i = 0; i < parent.getChildren().length; i++) {
currentTabOrder[i] = i;
}
}
for (var i = 0; i < parent.getChildren().length; i++) {
var seqno = parent.getChildren()[i].id.substr("tab".length);
if (currentTabOrder[i] != seqno) {
saveIt = true;
currentTabOrder[i] = seqno;
}
}
if (saveIt) {
var url = window.location.protocol + "//" + window.location.host + "/" + year + "/save_setting?L=" + league_id + "&TITLE=TABORDER&VALUE=" + currentTabOrder.join();
makeHttpRequest(url);
}
}
});
}
window.addEvent('domready', function() {
new Sortables('.homepagemodule CAPTION', {
clone: true,
revert: true,
opacity: 0.7,
onStart: function() {
dndMovingModule = this.element.parentNode.parentNode.id.toUpperCase();
},
onComplete: function() {
dndDroppedOntoModule = this.element.parentNode.parentNode.id.toUpperCase();
if (typeof dndMovingModule != "undefined" && typeof dndDroppedOntoModule != "undefined" && dndMovingModule != dndDroppedOntoModule) {
var url = window.location.protocol + "//" + window.location.host + "/" + year + "/save_setting?L=" + league_id + "&TITLE=MODULE&VALUE=" + dndMovingModule + "," + dndDroppedOntoModule;
// alert("calling: " + url);
makeHttpRequest(url);
setTimeout("window.location.reload();", 250);
}
}
});
});
}
}
$(document).ready(function() {
$('#DIVID').on('mousedown', function(e) {
return false;
});
});
I would put an HTML class attribute on all of your images that are producing the problem. Obviously, jQuery uses CSS style selectors. See the following example.
$(function(){
$('.ElementClass').mousedown(function(){
return false;
});
});
When you return false; onmousedown it prevents the default behavior in most Browsers, which is to grab the image so the Client can drop and drag the image into into a new tab or window to view it with their Browser.
my code just works perfectly but in a big data with lack of usability...
My table should work with 500-600 rows (updated in every 5 seconds)...
So therefore I want to make something similar:
http://i.stack.imgur.com/nPKtu.png
//Buttons added via photoshop.
I can't find this functionality #jQuery.
So I want to group data under 20/25 group header.
Each IP has 60-70 row.
2 column:
IP and FPS are the same for each group.
this is how my recent application looks like:
http://www11.pic-upload.de/03.06.14/rv6w1tboi1ip.png
so main question is: How to add Expand/collapse functionality to group of rows UNDER one main table.
and this is main part of JS code:
//მაგიდის ახლიდან დახატვა
function reDrawTable(){
"use strict";
$("table#content").dataTable({
"destroy" : true,
"ajax": "/json",
"tableTools": true,
"columnDefs": [
{
"render": function (data) {
var labelType, labelTitle;
if (data === 1) {
labelTitle = "ჩართულია";
labelType = " alert-success";
} else {
labelTitle = "გათიშულია";
labelType = " alert-danger";
}
return "<span class='label " + labelType + "'>" + labelTitle + "</span>";
},
"targets": 3
}
]
});
}
//მთავარი ფუნქცია
$(document).ready(function() {
//LastUpdate-ში ინახება ინფორმაციის განახლების დრო.
var table = $("table#content").dataTable(),
lastUpdate;
//პირველი გაშვება
$.getJSON("/json", function(data){
"use strict";
if (data.hasOwnProperty("data") === false) {
console.log("URL-ზე მონაცემები ცარიელია");
}
else {
console.log("პირველი პროცესი");
lastUpdate = data.lastUpdate;
reDrawTable();
calculateBar(data);
search();
}
});
//ყოველ 5 წამში ერთხელ ეშვება.
setInterval(function() {
"use strict";
$.getJSON("/json", function(data){
"use strict";
if (lastUpdate === data.lastUpdate) {
console.log("ახალი მონაცემები არ მოიძებნა");
} else if (data.hasOwnProperty("data") === false) {
$("table#content").dataTable({
"destroy" : true
});
console.log("მონაცემები არ იქნა მოწოდებული");
document.getElementById("success").style.width = 0 + "%";
document.getElementById("danger").style.width = 0 + "%";
} else {
reDrawTable();
search();
calculateBar(data);
lastUpdate = data.lastUpdate;
}
});
}, 5000);
} );
Solution:
Moved to Ext Js 5(new beautiful UI CRISP).
The ONLY enterprise js framework.
http://www.kars4kids.org/charity/v2/nirangahtml/program_pop/meet_animals.asp
above link,
when I select one of icon at below.
it's change to selected states, but problem is I need to restrict hover effect and further selecting for that Icon . ( since I am using Image changing).
below is the my complete, jquery code.
$(document).ready(function(){
$('#animal_content_text_horse').css("display", "block");
$('#animal_pic_horse_span').css("display", "block");
$('#page_animal_img_horse').css("display", "block");
$('.animal_thumb_link').each(function() {
$(this).click(function(e) {
e.preventDefault();
default_set($(this).attr('id'));
$(".animal_thumb_link").removeClass("thumbselected");
$(this).addClass("thumbselected");
$(".animal_thumb_link").find('img').addClass("imgHoverable");
$(this).find('img').removeClass("imgHoverable");
});
});
// Change the image of hoverable images
$(".imgHoverable").hover( function() {
var hoverImg = HoverImgOf($(this).attr("src"));
$(this).attr("src", hoverImg).hide().fadeIn(0);
}, function() {
var normalImg = NormalImgOf($(this).attr("src"));
$(this).attr("src", normalImg).show();
}
);
function HoverImgOf(filename)
{
var re = new RegExp("(.+)\\.(gif|png|jpg)", "g");
return filename.replace(re, "$1_r.$2");
}
function NormalImgOf(filename)
{
var re = new RegExp("(.+)_r\\.(gif|png|jpg)", "g");
return filename.replace(re, "$1.$2");
}
});
function default_set(obj12){
var arr = ["horse_content", "camel_content", "peacock_content", "goat_content", "donkey_content", "rooster_content", "sheep_content", "alpacas_content", "cynthia_content", "rabbit_content", "cow_content"];
var arr2 = ["../images/horse_thumb.gif", "../images/camel_thumb.gif", "../images/peacock_thumb.gif", "../images/goat_thumb.gif", "../images/donkey_thumb.gif", "../images/rooster_thumb.gif", "../images/sheep_thumb.gif", "../images/alpacas_thumb.gif", "../images/cynthia_thumb.gif", "../images/rabbit_thumb.gif", "../images/cow_thumb.gif"];
for ( var i = 0; i <= arr.length; i++ ) {
if ( arr[ i ] === obj12 ) {
old_url = $("#" + obj12).children('img').attr('src');
new_url = old_url.replace(/thumb/,'thumb_r');
$("#" + obj12).children('img').attr('src',new_url);
}else{
$('#' +arr[ i ]).children('img').attr('src',arr2[ i ]);
}
}
}
function load_page(obj1,obj2,obj3){
/* detect current div if so hide */
current_pagepharadiv = document.getElementById("pagepharadiv_hidden").value;
current_pageheadertext = document.getElementById("pageheadertext_hidden").value;
current_pageimage = document.getElementById("pageimage_hidden").value;
$('#' + current_pagepharadiv).css("display", "none");
$('#' + current_pageheadertext).css("display", "none");
$('#' + current_pageimage).css("display", "none");
image_hover(obj1);
image_hover(obj2);
$('#' + obj3).fadeIn("fast");
//image_hover(obj3);
//$('#' + obj1).fadeIn("fast");
//$('#' + obj2).fadeIn("fast");
document.getElementById("pagepharadiv_hidden").value = obj1;
document.getElementById("pageheadertext_hidden").value = obj2;
document.getElementById("pageimage_hidden").value = obj3;
}
can you please advice guys,
cheers!
It seems to me that you're really making things more complicated than they need to be. Here's how I would implement the page:
Bottom squares as divs, make the images transparent pngs
Change bottom square color using css :hover
Generate the entire top content on the server for each animal in a div: so you have 11 divs one after the other, instead of having to hide/show things in 3 places. In my code example below I assume they have the class animal-content
Add the id of each top div as a html5 data attribute to the corresponding thumb link
This way all you need to do in jQuery is:
$(".animal_thumb_link").click(function() {
var topId = $(this).data("topId");
$(".animal_thumb_link").removeClass("thumbselected");
$(this).addClass("thumbselected");
$(".animal-content").toggle(function() { return this.id === topId; });
});