In my application i used repeater control.For that i have loaded item at a time.But my client wants to display first 6 items then if the user come to end of the page it will display a image named loading image and after a short time display another 6 items and again the user came to end of page it will display loading image at the end of screen and load another 6 items like that and so on. ex:Facebook loading
It sounds like you need to use continuous scrolling, to load images as the user scrolls. Here are a couple of articles which demonstrate how to use continuous scrolling:
http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=371
http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/
Here's an example of an image gallery that uses continuous scrolling:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" >
div { border: solid 1px black; height:200px; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script type="text/javascript">
var pixelsBetweenImages = 200;
var imagesArray = {}
var imagesArray = new Array(); // regular array (add an optional integer argument to control array's size)
imagesArray[0] = "";
imagesArray[1] = "";
imagesArray[2] = "";
imagesArray[3] = "/images/ImageThree.gif";
imagesArray[4] = "/images/ImageFour.gif";
imagesArray[5] = "/images/ImageFive.gif";
imagesArray[6] = "/images/ImageSix.gif";
imagesArray[7] = "/images/ImageSeven.gif";
imagesArray[8] = "/images/ImageEight.gif";
$(window).scroll(function() {
var scrollpos = $(window).scrollTop() + $(window).height();
var imageIndex = Math.floor(scrollpos / pixelsBetweenImages);
if (imagesArray[imageIndex] != "") {
var div = $("#" + imageIndex);
div.html(imagesArray[imageIndex]);
imagesArray[imageIndex] = "";
}
});
</script>
<div>Visible on first load</div>
<div>Visible on first load</div>
<div>Visible on first load</div>
<div id="3">3 </div>
<div id="4">4 </div>
<div id="5">5 </div>
<div id="6">6 </div>
<div id="7">7 </div>
<div id="8">8 </div>
</body>
</html>
Source: Is there ability to load page images partially when scroll down to it or is it just effect?
As for displaying a loading image, just use an animated gif as the default image, and delay loading of the actual image for effect, using setTimeout or something along those lines.
Related
I am just starting out with javascript and I am trying to create an interactive web map....
I want to be able to position the map then press a button that will take a screenshot and save it to the computer.
Here is the code for my map.....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display a map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = '[TOKEN]';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/charlie-enright/cl5b8bjil002y14o5u8xrssah', // style URL
center: [-4.369240916438415, 51.925803756014965], // starting position [lng, lat]
zoom: 8, // starting zoom
projection: 'globe' // display the map as a 3D globe
});
map.on('style.load', () => {
map.setFog({}); // Set the default atmosphere style
});
</script>
</body>
</html>
I have tried using html2canvas (https://codepen.io/samsammurphy/pen/VXdOPv) but the button seems to end up in a layer behind my map and I can not take a screenshot of the displayed map.
Any ideas how I could create a button that allows for a screenshot to be taken which saves to the computer will be greatly appreciated.
Thanks,
Here's an example of using map.getCanvas().toDataURL() and then injecting an img tag into the DOM. (This is not my example, I found it on this codepen by Sam Murphy https://codepen.io/samsammurphy/pen/VXdOPv)
$('button').click(function() {
var img = map.getCanvas().toDataURL();
var width = $('#screenshotPlaceholder').width()
var height = $('#screenshotPlaceholder').height()
var imgHTML = `<img src="${img}", width=${width}, height = ${height}/>`
$('#screenshotPlaceholder').empty();
$('#screenshotPlaceholder').append(imgHTML);
});
});
The codepen I found this on was not working due to an expired access token, so here's a fork that works if you want to try it out.
https://codepen.io/chriswhong/pen/YzapomG
Here's the code I use to take map screenshots using html2canvas
html2canvas(document.getElementById("map"), {useCORS:true}).then(canvas => {
var pseudolink = document.createElement('a');
pseudolink.download = 'myMapScreenshot.png';
pseudolink.href = canvas.toDataURL()
pseudolink.click();
})
Requirements:
1) Create dynamic iFrame.
2) Hide the main <my-app> element.
3) In the onClose() click event: Show <my-app> element, Remove iFrame.
PROBLEM: I can successfully create a dynamic iFrame in my application and hide the main element.
However, the problem is that within the onClose() click event I cannot get access to those elements on the document.body.
Here's my javascript code:
#1: The html var with head/body, Cancel button, and the onClose() func:
const html = `
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href="assets/dependencies/print/print.css" rel="stylesheet"/>
<script>
function showHeader(ele) {
...
}
function showFooter(ele) {
...
}
// *** TRY TO CLOSE IFRAME AND SHOW <APP-ROOT> ELEM. ***
function onClose(ele) {
let frameToRemove = window.document.getElementById("iframe");
console.log(frameToRemove); // returns zero elements of HTMLCollection[]
var harmonyRootTag = window.document.getElementsByTagName('app-root');
harmonyRootTag[0].setAttribute('style', 'display:block;');
document.body.removeChild(iframetest);
}
// *******************
</script>
</head>
<body>
<section id="print-menu" class="no-print">
<div>
<button onclick="window.print()" class="primary-button">Print</button>
<button onclick="onClose()" class="secondary-button">Cancel</button>
</div>
</section>
<section id="articles">
..
</section>
</body>
`;
#2: iFrame creation (working fine, meaning it HIDES app-root and creates iFrame)
// Hide root element
const appRootTag = document.getElementsByTagName('app-root');
if (appRootTag && appRootTag.length > 0) {
appRootTag[0].setAttribute('style', 'display:none;');
}
// Create iFrame, set style, write html markup to it.
const iframetest = document.createElement('iframe');
document.body.appendChild(iframetest);
iframetest.setAttribute('style', 'height:100%;width:100%;');
iframetest.contentWindow.document.open();
iframetest.contentWindow.document.write(html);
iframetest.contentWindow.document.close();
After I load the iFrame, clicking the Cancel buttons triggers onClose() , but it basically does nothing:
window.document.getElementById("iframe"); // RETURN ZERO ELEMEMTS OF HTMLCollection[]
I am pulling blog posts in from the blogger JSON api into my page. The posts are HTML formatted. Some of the posts have floated content; an image, for instance, that is floated left with text to the right that is shorter than the image. The title and date of the post below it are pushed to the right as well. I remember there being an esoteric way within CSS to isolate float within a div. I can't remember how. And I don't remember what it is even called. I've been searching all day. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sandy Reads - News</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style></style>
</head>
<body>
<div class="container-fluid">
<section id="posts">
<div class="page-header">
<h1>Sandy Reads <small>News</small></h1>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js"></script>
<script>
$(function () {
var key = "Redacted";
var blogId = "Redacted";
var resource = "https://www.googleapis.com/blogger/v3/blogs/" + blogId + "/posts?maxResults=10&key=" + key;
$.getJSON(resource, function (data) {
var items = [];
$.each(data.items, function (key, val) {
var kind = val.kind;
if (kind !== 'blogger#post')
return;
var blogId = val.id;
var title = val.title;
var content = val.content;
var date = moment(val.updated);
items.push("<li id='" + blogId + "' class='post'>" +
"<a href='blog.html?id=" + blogId + "'><h3>" + title + "</h3></a>" +
"<i>" + date.format('MMMM Do YYYY') + "</i></div>" +
"<div>" + content + "</div>" +
"</li>");
});
$("<ul/>", {
"class": "list-group my-new-list",
html: items.join("")
}).appendTo("#posts");
});
});
</script>
</body>
</html>
You're probably thinking of overflow: hidden, but which element you apply it to depends on what your markup looks like. I can tell you to apply it to the parent of the float, but if the content that is being pushed aside appears in this same parent, then that's not going to help.
OK, so your script generates posts in a series of li.post elements. The content appears in a div following the title and date. You can either set li.post to clear floats, or apply overflow: hidden to the div. (There is a spurious </div> end tag after your post date that you may want to account for.)
I am using iframe to use an html page as header in another html page. The source header width does not fit the screen. Is there any way I can use to make it fit the screen?
Try this code
<script type="text/javascript" >
$(document).ready(function(){
window.setInterval(resizeIframeHeader, 2000);
});
var pastHeight = 0;
function resizeIframeHeader() {
var currentHeight = document.body.scrollHeight;
var currentWidth = document.body.scrollWidth;
if (currentHeight != pastHeight){
pastHeight = currentHeight;
parent.postMessage(document.body.scrollHeight, '*');
}
if (currentWidth != pastWidth){
pastHeight = currentWidth ;
parent.postMessage(document.body.scrollWidth, '*');
}
}
</script>
Here is a fiddle for your page: Fiddle
<body>
Your page content
</body>
Using TideSDK, how can I have a window with no Windows style border, and keep it draggable ?
I try two things :
First config my tiapp.xml like this
<width>3000</width>
<max-width>3000</max-width>
<min-width>0</min-width>
<height>1280</height>
<max-height>1280</max-height>
<min-height>0</min-height>
<fullscreen>false</fullscreen>
<resizable>true</resizable>
<transparency >1.0</transparency >
<transparent-background>true</transparent-background>
And contains my application in a div like this :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#draggable { width: 150px; height: 150px; left: 10px}
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
It's cool cause I have my full css customizable window draggable, BUT if I want it's work in dual screen I have to set the maximum width to ~4000 and it's look limited to 3000 max. (even if I set a greater value inside the tiapp.xml file ). Notice, if I'm not setting a huge widht and height, when my application (div) is near from the limit, a scroll bar appear in my desktop.
I trying a quick other thing to add the tag
<chrome>false</chrome>
It's look a better method but, I loose the draggable control on my windows. And I don't know how can drag the tidesdk windows with javascript. May be there is solution to create my own "chrome" ?
Gold mine for this question are the answers posted on this tidesdk google groups thread: https://groups.google.com/forum/#!topic/tidesdk/jW664E2lPlc
First, you need to provide your own way to let the user move the window around—your own version of something like a Windows 8 Metro style top-is-draggable-where-the-title-bar-used-to-be.
For the sake of example (not worrying about styling), e.g.
<div id="windowTitleBar">
<button id="windowMinimize" class="windowMaxMinButtons">[_]</button>
<button id="windowClose" class="windowMaxMinButtons">[X]</button>
</div>
Second, in your javascript you provide your own drag handling, taking advantage of the Ti.UI API. Here's a sample from a proof of concept I did.
(Note in the following, the minimize function has a little hack (?) to make the window work after being restored. If you find a better way, please add your fix so everyone can benefit!)
$(document).ready(function() {
/*
* WINDOW HIDE
*/
$("#windowMinimize").click(function()
{
event.preventDefault();
// From http://developer.appcelerator.com/question/131596/minimize-unminimize-under-windows-7
// One user found if we follow this magical sequence (max-unmax-min), the
// window will be responsive after restore. Confirmed on my Win 7
Ti.UI.getMainWindow().maximize();
Ti.UI.getMainWindow().unmaximize();
Ti.UI.getMainWindow().minimize();
});
$(".maximize").click(function() {
event.preventDefault();
if(!Ti.UI.getMainWindow().isMaximized())
{
Ti.UI.getMainWindow().maximize();
} else {
Ti.UI.getMainWindow().unmaximize();
}
});
/*
* WINDOW CLOSE
*/
$("#windowClose").click(function()
{
event.preventDefault();
Ti.UI.getMainWindow().close();
//system.window.target.hide();
Ti.App.exit();
});
/*
* WINDOW "Title Bar"
*/
$("#windowTitleBar").mousedown ( function ( event )
{
event.preventDefault();
if(!Ti.UI.getMainWindow().isMaximized())
{
var diffX = event.pageX;
var diffY = event.pageY;
$(document).mousemove ( function ( event )
{
event.preventDefault();
if (event.screenY - diffY < screen.height-100)
Ti.UI.getMainWindow().moveTo(event.screenX - diffX, event.screenY - diffY);
});
}
});
$(document).mouseup ( function ( event )
{
event.preventDefault();
$(document).unbind('mousemove');
});
$("#windowTitleBar").dblclick ( function ( event )
{
event.preventDefault();
if (!Ti.UI.getMainWindow().isMaximized())
Ti.UI.getMainWindow().maximize();
else
Ti.UI.getMainWindow().unmaximize();
});
});