I am trying to integrate Google maps Places search box into my jQuery Mobile App.
I've created a search box with preferred styling in jQuery Mobile. I would like to use this search box instead of standard google search box. But for some reason my search box styling is being over ridden by Google maps search box styling as you can see in the below image (1). Can someone please suggest me a way to achieve the desired result shown in image2. Please also find my complete code. I'd be grateful for anyone's help.
The below image (2) shows what I am trying to achieve.
Complete code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
<!-- Google maps source for places seearch box and map display on page initilization-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<style>
#map-page, #map_canvas { width: 100%; height: 80%; padding: 0; }
.container_16, #set_location {
z-index:1;
}
.container_16 .alpha { clear-left: 0; }
.grid_3,.grid_13{ margin: 0; padding: 1.5% !important; border: 0; float: left; }
.container_16 { overflow: hidden; }
.container_16 .grid_3 {
width: 15.75% !important;
}
.container_16 .grid_13 {
width: 78.25% !important;
}
</style>
<script>
function initialize() {
var markers = [];
var map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
map.fitBounds(defaultBounds);
// Create the search box and link it to the UI element.
var input = /** #type {HTMLInputElement} */(
document.getElementById('search_location')); // pac-input changed to search_location
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** #type {HTMLInputElement} */(input));
// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
// [END region_getplaces]
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div data-role="page" id="map-page" data-url="map-page">
<div data-role="header" data-theme="a">
<div>
<img id='houseid' style='width:120px; ' src="" alt="logo"/>
</div>
<div>
Cancel
</div>
</div>
<div class='container_16 ui-corner-all' style='background-color: white; z-index:1000000000 !important; ' >
<div class='grid_3' style='padding-top:0% !important; padding-bottom:0% !important;'>
<a id='location' style='padding: 0%; margin-top: 0.65em;' href="#" onclick='get_location()' class="ui-btn ui-corner-all ui-mini">
<img id='location_img' style='width:20px; padding:5px;' src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSwWvXKHpBpZ04VsfcHHtdjyHWhOrNq1zjDPWKg4vrg35wiPD8S8DQBSg" alt="HouseID">
</a>
</div>
<div class='grid_13' style='padding-top:0% !important; padding-bottom:0% !important;'>
<input id='search_location' type='search' style=''>
</div>
</div>
<div role="main" class="ui-content" id="map_canvas" style='padding:0%;'>
<!-- map loads here... -->
</div>
</div>
<div data-role="popup" id="popup_cancel" data-overlay-theme="b" data-theme="a" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a"> <!-- This div element is not allowing Google map to render -->
<h1>Cancel ?</h1>
</div>
<div role="main" class="ui-content">
<h5 class="ui-title">Are you sure you want to cancel and go back?</h5>
Cancel
Delete
</div>
</div>
</body>
</html>
Remove line 51:
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
The purpose of this line is to embed the element "input" into the map at a specific location, "TOP_LEFT". See google documentation. I trialed your code with this commented out, and observed the result you were seeking.
Related
Leaflet is not showing Control.extend data in IE and safari.
IE shows the counters box after a move on map.
Safari shows the box after a click.
For my 2nd extention(popup) safari needs 2 clicks on the marker.
And IE only shows it while holding the mousebutton down.
Expected result:
Chrome, Edge and Firefox are working fine.
The reworked code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bee-Idees kaart</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster#1.3.0/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster#1.3.0/dist/MarkerCluster.Default.css" />
<script type='text/javascript' src='https://unpkg.com/leaflet#1.3.1/dist/leaflet.js'></script>
<script type='text/javascript' src='https://unpkg.com/leaflet.markercluster#1.3.0/dist/leaflet.markercluster.js'></script>
<script type='text/javascript' src='https://unpkg.com/leaflet.featuregroup.subgroup#1.0.2/dist/leaflet.featuregroup.subgroup.js'></script>
</head>
<style>
.my-custom-counters {
padding: 10px 10px;
background: #7ab51d;
color: #000;
font-size: 11px;
line-height: 11px;
width: 310px;
border-radius: 15px;
border-style: solid;
border-color: #3A8D45;
border-width: 1px;
opacity: 0.85;
}
.my-custom-counters .ImpactHeader {
color: #fff;
line-height: 14px;
text-align: center;
font-weight: 600;
margin-bottom: 5px;
}
.my-custom-counters .ImpactLead {
font-weight: 500;
}
.my-custom-counters .ImpactCount {
text-align: right;
font-weight: 600;
}
.my-custom-counters .ImpactEnd {
font-weight: 500;
}
.my-custom-counters:empty {
display: none;
}
</style>
<body>
<div id="map" style="height: 580px; border: 1px solid #AAA;"></div>
</body>
<script>
markers = [
{
"name": "Gouda 3",
"lat": 52.021616,
"lng": 4.687917,
"marker": "red"
}
];
</script>
<script>
var iconBase = 'css\\icons\\';
// Standard fields
var groupLabel = [];
groupLabel[0] = "Red";
var map = L.map('map', {
center: [52.021616, 4.85],
zoom: 10
});
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
subdomains: ['a', 'b', 'c']
}).addTo(map);
var mcg = L.markerClusterGroup(),
group0 = L.featureGroup.subGroup(mcg),
control = L.control.layers(null, null, { collapsed: false }), i, a, title, m;
mcg.addTo(map);
var markerClusters = L.markerClusterGroup();
for (var i = 0; i < markers.length; ++i) {
var iconName = iconBase + markers[i].marker + ".png";
var myIcon = L.icon({ iconUrl: iconName, iconAnchor: [20, 40] })
var popup = '<h2>' + markers[i].name + '</h2>';
var m = L.marker( [markers[i].lat, markers[i].lng], {icon: myIcon, title: markers[i].name} )
.bindPopup( popup );
if (markers[i].marker === "red") { m.addTo(group0);}
}
control.addOverlay(group0, groupLabel[0]);
control.addTo(map);
group0.addTo(map);
map.addLayer(mcg);
var MyCounters = L.Control.extend({
options: {
position: 'bottomright'
},
onAdd: function (map) {
return L.DomUtil.create('div', 'my-custom-counters');
},
setContent: function (content) {
this.getContainer().innerHTML = content;
}
});
myCounters = new MyCounters().addTo(map);
showCounters();
function showCounters() {
impact = '<div class="ImpactHeader">TOTAAL GEMETEN IMPACT VAN ALLE PROJECTEN<br>ZICHTBAAR OP DE KAART<br> </div> <div class="undefined"> <table style="width:100%;"> <tr> <td> <div class="ImpactLead">Winst besteed aan kansarmen : </div> </td> <td> <div class="ImpactCount">275 </div> </td> <td> <div class="ImpactEnd">€ (Euro) </div> </td> </tr><tr> <td> <div class="ImpactLead">Toegang tot financiële diensten: </div> </td> <td> <div class="ImpactCount">176 </div> </td> <td> <div class="ImpactEnd">Personen </div> </td> </tr><tr> <td> <div class="ImpactLead">Veilig en gezond voedsel: </div> </td> <td> <div class="ImpactCount">250 </div> </td> <td> <div class="ImpactEnd">Personen </div> </td> </tr></table> </div>'
myCounters.setContent(impact);
}
</script>
</html>
It seems IE can't handle adding a bit more complex string to extend.
Your custom Controls are originally empty.
If you want them filled from the start, you should at least call your showCounters function just after you add your Counters Control to the map. Same for your Popup Control.
For the latter, you use a popup option, buildPopupinfo function and several variables (Maps, Markers and popup) that you do not explain / show how you assign them. The issue looks to be very probably in those.
After question edit with new code:
Hum you seem to encounter an IE bug with :empty CSS pseudo-selector and dynamically filling the element with innerHTML.
It seems that simply wrapping your HTML content with a single outer element (like a <div>) avoids this bug:
// The "one" Element is filled with a SINGLE child (but it can have many grand children)
document.getElementById('one').innerHTML = '<div> <div>one</div> <div>one</div> </div>';
// The "two" Element is filled with 2 children nodes
// Try clicking somewhere else on the page to "reveal" it
document.getElementById('two').innerHTML = '<div>two</div><div>two</div>';
.auto-hide {
background-color: green;
border: 1px solid black;
width: 100px;
height: 40px;
}
.auto-hide:empty {
display: none;
}
<div id="one" class="auto-hide"></div>
<div id="two" class="auto-hide"></div>
I guess you have a similar CSS rule for your popup, hence a similar behaviour.
I am totally unable to reproduce the issue on Safari (11.1) with the above code snippet or with the code provided in the question:
https://plnkr.co/edit/YDbSFQeaUYtVBadKnnbU?p=preview
Tnx for the solution.
Wrapping my content for both (showCounters and buildPopupinfo) with a extra div did it for IE.
Safari is still not working.
It still needs a click on the map for the showCounters and 2 clicks on the marker for the buildPopupinfo.
I have been working on a custom Google map. A few days ago I noticed that marker icons (loaded from a .png) do not appear anymore. The same issue applies to older files with this map. The markers are called like this:
var locations = [
['Location1', 46.096678, 7.2281081, 'pin.png', 1],
['Location2', 46.0230159, 7.7428676, 'pin.png', 2],
['Location3', 46.1125509, 7.919948, 'pin.png', 3],
];
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
Here's also a fiddle with more complete code, which used to work: http://jsfiddle.net/geocodezip/4skyrs58/1/
Does anyone know of any deprecations, or necessary updates, that may be the cause?
In the attached fiddle there is a problem with InfoBox. Google maps sources have been moved from svn to git, as stated here: https://code.google.com/p/google-maps-utility-library-v3/. And it looks like InfoBox is not included. You can download it here: https://github.com/mikejoyceio/google-maps-infobox/blob/master/infobox.js
The InfoBox library on google code is no longer available in a form that can be linked to. That library has been moved to GitHub.
See this related question: Google Maps API V3 Infobox.js removed
updated fiddle
code snippet linking to the github version:
var map;
var markers = [];
var content = [];
var map = new google.maps.LatLng(46.2171749, 7.5984075);
var bounds = new google.maps.LatLngBounds();
function initialize() {
var mapOptions = {
zoom: 10,
center: map
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var locations = [
['Location1', 46.096678, 7.2281081, 'pin.png', 1],
['Location2', 46.0230159, 7.7428676, 'pin.png', 2],
['Location3', 46.1125509, 7.919948, 'pin.png', 3],
];
var infobox = new InfoBox({
content: document.getElementById("infobox"),
disableAutoPan: false,
maxWidth: 800,
pixelOffset: new google.maps.Size(-400, 10),
zIndex: null,
closeBoxMargin: "12px 12px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(0, 0),
});
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
// icon: locations[i][3]
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infobox.open(map, marker);
infobox.setContent(document.getElementById(locations[i][0]).cloneNode(true));
map.panTo(marker.getPosition(0, 427));
map.panBy(0, 400);
}
})(marker, i));
bounds.extend(marker.getPosition());
}
map.fitBounds(bounds);
}
function myClick(id) {
google.maps.event.trigger(markers[id], 'click');
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
.infowindow {
border: 1px solid black;
margin-top: 8px;
background: white;
padding: 5px;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map-canvas"></div>
<div id="Location1">
<div class="infobox_wrapper">
<div class="infowindow">
<div class="infobox_title_wrapper">
<div class="info_icon">
<img src="https://www.google.com/drive/images/drive/logo-drive.png" height="20" />
</div>
<div class="info_title">
<p>##</p>
</div>
<div class="info_place">
<p>##</p>
</div>
</div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193571.43828905202!2d-74.11808638273646!3d40.7058253631455!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY!5e0!3m2!1sen!2sus!4v1461436300347"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<p class="txt">##</p>
</div>
</div>
</div>
<div id="Location2">
<div class="infobox_wrapper">
<div class="infowindow">
<div class="infobox_title_wrapper">
<div class="info_icon">
<img src="https://www.google.com/drive/images/drive/logo-drive.png" height="20" />
</div>
<div class="info_title">
<p>##</p>
</div>
<div class="info_place">
<p>##</p>
</div>
</div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d88704.87577364442!2d7.671905434077621!3d45.990682827318246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478f35a2292ee5cd%3A0x400ff8840196f70!2s3920+Zermatt%2C+Switzerland!5e0!3m2!1sen!2sus!4v1461437058426"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<p class="txt">##</p>
</div>
</div>
</div>
<div id="Location3">
<div class="infobox_wrapper">
<div class="infowindow">
<div class="infobox_title_wrapper">
<div class="info_icon">
<img src="https://www.google.com/drive/images/drive/logo-drive.png" height="20" />
</div>
<div class="info_title">
<p>##</p>
</div>
<div class="info_place">
<p>##</p>
</div>
</div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d44233.88369647231!2d7.936860760323751!3d46.13844402760392!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478f45103f606a5d%3A0xb47592074f679662!2s3910+Saas-Grund%2C+Switzerland!5e0!3m2!1sen!2sus!4v1461437405679"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<p class="txt">##</p>
</div>
</div>
</div>
I am using the following HTML items. The li tags are within a bootstrap tab structure. I think this is size related as my dragable class is 200px wide and the li tags are 100px wide.
<li id="dropmessages1">Cat 1 </li>
<li id="dropmessages2">Cat 2 </li>
<div id="1" class="dragable"></div>
<div id="2" class="dragable"></div>
and the following jquery code.
$( init );
function init() {
$('.dragable').draggable({
cursor: 'move',
revert: true
});
$('#dropmessages1').droppable({
drop: handleDropEvent
} );
$('#dropmessages2').droppable({
drop: handleDropEvent
} );
}
function handleDropEvent( event, ui ) {
var draggable = ui.draggable;
alert( 'The message with ID "' + draggable.attr('id') + '" was dropped onto me!' );
}
I am able to drag the "dragable" items, but I cannot drop them on the LI items. Is it possible to drop items on to an li tag?
hi check the below code:
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Remove revert option from draggable
$('.dragable').draggable({
cursor: 'move'
//revert: true //No need of this
});
DEMO
Remove your revert option in draggable
$('.dragable').draggable({
cursor: 'move',
// revert: true
});
If you use revert , object comes back to same place from where it was
dragged.
I used
$('#dropmessages1').droppable({
tolerance: 'pointer',
drop: handleDropEvent
} );
This allows to drag a large area onto a smaller one.
I am having trouble setting the location of a canvas relative to another, so I wrote the following test harness.
I would expect that the positioning specified by "top" amd "left" in the div's at the top of the harness would move the origin of the canvases relative to each other.
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<form id='form1' style="position:relative">
<div id='d1' style="position:absolute; top:0; left:0; z-index:1">
<canvas id='canvas1' width='200' height='100'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<div id='d2' style="position:absolute; top:50; left:50; z-index:2">
<canvas id='canvas2' width='100' height='200'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<div id='d3' style="position:absolute; top:75; left:75; z-index:3">
<canvas id='canvas3' width='50' height='50'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</form>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<input id='btn1' type="button" onClick="demoDisplay()" value="Hide canvas with display property">
<input id='btn2' type="button" onClick="demoVisibility()" value="Hide canvas with visibility property">
<input id='btn3' type="button" onClick="demoOrder()" value="Place blue over red">
</head>
<body onLoad="loadMe()">
<script>
function loadMe()
{
var canvas = document.getElementById("canvas1");
if (canvas.getContext) { // Canvas Support
var ctx = canvas.getContext("2d");
// Work with context
var grd=ctx.createLinearGradient(0,0,ctx.canvas.height,ctx.canvas.width);
grd.addColorStop(0,'#8ed6ff');
grd.addColorStop(1,'#004cb3');
ctx.fillStyle=grd;
ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.fill();
}
var canvas = document.getElementById("canvas2");
if (canvas.getContext) { // Canvas Support
var ctx = canvas.getContext("2d");
// Work with context
var grd=ctx.createLinearGradient(0,0,ctx.canvas.height,ctx.canvas.width);
grd.addColorStop(0,'#C00');
grd.addColorStop(1,'#D00');
ctx.fillStyle=grd;
ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.fill();
}
var canvas = document.getElementById("canvas3");
if (canvas.getContext) { // Canvas Support
var ctx = canvas.getContext("2d");
// Work with context
var grd=ctx.createLinearGradient(0,0,ctx.canvas.height,ctx.canvas.width);
grd.addColorStop(0,'#00C');
grd.addColorStop(1,'#00D');
ctx.fillStyle=grd;
ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.fill();
}
}
function demoVisibility()
{
btn = document.getElementById('btn2')
if (btn.value==='Hide canvas with visibility property') {
btn.value = 'Show canvas with visibility property';
document.getElementById("d2").style.visibility="hidden";
} else {
btn.value = 'Hide canvas with visibility property';
document.getElementById("d2").style.visibility="visible";
}
}
function demoDisplay()
{
btn = document.getElementById('btn1')
if (btn.value==='Hide canvas with display property') {
btn.value = 'Show canvas with display property';
document.getElementById("d1").style.display="none";
} else {
btn.value = 'Hide canvas with display property';
document.getElementById("d1").style.display="inline";
}
}
function demoOrder()
{
btn = document.getElementById('btn3')
if (btn.value==='Place blue over red') {
btn.value = 'Place red over blue';
document.getElementById("d1").style.zIndex=2;
document.getElementById("d2").style.zIndex=1;
} else {
btn.value = 'Place blue over red';
document.getElementById("d1").style.zIndex=1;
document.getElementById("d2").style.zIndex=2;
}
}
</script>
</body>
</html>
Add "px" to your style measurements. E.G top:50; => top:50px;
<form id='form1' style="position:relative">
<div id='d1' style="position:absolute; top:0px; left:0px; z-index:1">
<canvas id='canvas1' width='200' height='100'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<div id='d2' style="position:absolute; top:50px; left:50px; z-index:2">
<canvas id='canvas2' width='100' height='200'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<div id='d3' style="position:absolute; top:75px; left:75px; z-index:3">
<canvas id='canvas3' width='50' height='50'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</form>
I will make your life simple. Here is the javascript code for the same.
var can = document.querySelector('canvas');
can.style.position = 'absolute';
can.style.top = "100px";
can.style.left = "100px";
Well enjoy styling the page....
As a starter, your HTML is invalid. The content (HTML elements like <form>, <canvas> etc.) should be in a <body> tag inside the <html> tag! The <script> should probably be in the <head>.
Also, note that the solution is using absolute positioning within an element using relative positioning.
I have noticed in some site such as http://mashable.com that when you open page and try to scroll it , it appear to load images when you reach it .. i don't know if it's a just flicker effect or it's really done to make less load of images till scrolling to it ?
Here is a script to get you started. You'll need to do something with the image urls rather than just displaying them, but I'm sure you will figure this out...
<!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>
The way this site does it is to apply an invisible style to all the images at page load and when scrolling it applies display: block with some effect.
you can attach your load/download image function to scroll event.
Some event sample here.