The basic thing is, I, being obsessed with keeping track of everything I can easily...want to keep track of image load times. I don't expect/desire perfection (e.g. It is 100% accurate, down to the millisecond, for every image load). The goal is relative accuracy (e.g. If between 10am-11am, the average is 100ms load time. It suddenly starts spiking to an average of 3s a few hours later, I'd like to know that sort of thing).
Thoughts if this solution is sufficient for that? Or did I miss something obvious?
Yes, I know it doesn't report anything anywhere...that isn't the purpose of the example code, it is merely to calculate the time.
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Image Timing Test Page</title>
</head>
<body style='background-color: black; color: white;'>
This is a page.
<div class='test' id='t1'>
<img id="1" src='/test.jpg' />
</div>
<div class='test' id='t2'>
<img id='2' src='/test2.jpg' />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/jquery.imagesloadded.js" type="text/javascript"></script> <!-- https://github.com/desandro/imagesloaded -->
<script>
var Performance = window.performance.timing;
function ImageLoadTime(ImageTime, id)
{
if(Performance.loadEventEnd > 0)
{
console.log("Image Load Time ["+id+"] " + (ImageTime-Performance.navigationStart) + " milliseconds");
}
else
{
setTimeout(function(){ImageLoadTime(ImageTime, id)},250);
}
}
$(document).ready(function() {
$('.test').each(function(index)
{
var temp = $(this).attr('id');
$(this).imagesLoaded( function( $images )
{
var d = new Date();
ImageLoadTime(d.getTime(), temp);
});
});
});
</script>
</body>
</html>
This really depends on what you're doing, but why not use the Google Chrome developer tools for this? The network tab has a very nice display of all things coming over the wire, how much time they took for request and transfer, etc...
Here's a screenshot of it on this page:
Related
So hi guys, this one has had me scratching my head for sometime now, so I wanna create an alert that will only popup when the progress of the transition gets to a certain point (ie when width gets to 3rem). Any help on this will be greatly appreciated
<!DOCTYPE HTML>
<html>
<head>
<title>converting html elements to numbers</title>
<meta charset="utf-8"/>
<style type="text/css">
.child11{background:blue;}
.transipion{
width:20px;
height:10vh;}
.cover{background:red;
width:100vw;
transition:10s all ease-in;}
</style>
</head>
<body>
<div class="child11">increaseByOne</div>
<div class="score" id="score">
score:<span>0</span>
<div class="cover"><div class="transipion"></div></div>
</div>
<script>
var rec1=document.querySelector(".child11");
var color=document.querySelector("#color");
var score=document.querySelector("span");
var vover=document.querySelector(".cover");
function funki(){
var integer=score.textContent;
var add=Number(score.textContent);
score.innerText=add + 1;}
This right here below 👇 is the js code I've tried
if(vover.style.width="50vw"){
alert("3rem");}
rec1.addEventListener("click", funki);
</script>
</body>
</html>
I also tried replacing the width there with transition=5s something like that but the alert always pops up before anything else. Oh and I don't wanna do this with setInterval.
I have found a tutorial for lazy loading Facebook's like box, but it's appropriate only if you use one FB widget on a page.
How would it look like if you want to load "like button" normally, but would like to lazy load "like box", i. e. load it only if the user scrolls and like box is in the viewport?
Also, is it possible to do it without any plugins nad possibly without jquery, i. e. using only pure javascript?
Here is the mentioned code:
/**
* check if facebookHolder is in viewport, and then load Like Box widget
*/
$(document).ready(function() {
function checkScrollingForWidget(event) {
$('#facebookHolder:in-viewport').each(function() {
$('#facebookHolder').append('<div id="fb-root"></div>');
$('#facebookHolder').append('<fb:like-box href="http://www.facebook.com/forexagone" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
FB.init({status: true, cookie: true, xfbml: true});
});
$(window).unbind('scroll', checkScrollingForWidget);
}
$(window).bind('scroll', checkScrollingForWidget);
});
Since Facebook's like box is so widely used and can slow down page loading a bit (even if it's async.), I was quite surprised to see that there are no newer tutorials how to do this. Is it possible at all?
Thank you in advance for your ideas.
This is Markus' code in a simple HTML document:
<html><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Lazy Load</title>
<script src="http://code.jquery.com/jquery-git.js" type="text/javascript"></script>
<script src="http://www.appelsiini.net/download/jquery.viewport.js" type="text/javascript"></script>
<style type="text/css">
.facebookHolder {
height: 50px;
background: #ccc;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
// initiate like boxed already in viewport as soon as fb sdk loaded.
checkScrollingForWidget();
});
function checkScrollingForWidget(event) {
$('.facebookHolder:in-viewport').each(function(index, item) {
if (!$(item).hasClass('fb_loaded')) {
$(item).append('<fb:like-box href="' + $(item).attr('data-url') + '" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
$(item).addClass('fb_loaded');
FB.XFBML.parse();
}
});
}
$(window).bind('scroll', checkScrollingForWidget);
});
</script>
</head>
<body>
<div id="fb-root"></div>
<div class="facebookHolder" data-url="https://www.facebook.com/Google"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/yahoo"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/stackoverflowpage"></div>
</body></html>
You can add a Facebook widget any time dynamically, but you need call FB.XFBML.parse after adding it to the DOM.
This could be inteteresting for me too so I just fixed the tutorial script:
JSFiddle
Of course you need to import jquery and the viewport plugin (if you want to use it).
<script src="jquery.js"></script>
<script src="jquery.viewport.js"></script>
Then include fbroot tag only once and give the holders an specific data-url attribute because loading one url multiple times doesn't seem to be possible. Late we will read out this data-attribute.
<div id="fb-root"></div>
<div class="facebookHolder" data-url="https://www.facebook.com/Google"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/yahoo"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/stackoverflowpage"></div>
Then use the following jQuery code:
$(document).ready(function() {
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
// initiate like boxed already in viewport as soon as fb sdk loaded.
checkScrollingForWidget();
});
function checkScrollingForWidget(event) {
$('.facebookHolder:in-viewport').each(function(index, item) {
if (!$(item).hasClass('fb_loaded')) {
$(item).append('<fb:like-box href="' + $(item).attr('data-url') + '" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
$(item).addClass('fb_loaded');
FB.XFBML.parse();
}
});
}
$(window).bind('scroll', checkScrollingForWidget);
});
I'm fielding a request that someone essentially wants one master page with their logo at the top, and the remainder of the page will load a series of pages (populated by a static array) and then repeat itself.
My intent is to have a page load in the 'content' div element, wait a period of time (I only listed 2 seconds for testing purposes), and then the next page loads. When it reaches the end of the array, I want the array to reset so that this is continuously loading.
I'm sure there are probably better ways to do this, but through my research this seemed the simplest.
Any help, or pointing me in another direction is all greatly appreciated.
Editing for clarity:
What I'm looking for is one master page, which just simply has a header at the top of the page. The rest of the page would be composed of a single div element (or iFrame if need be) and the content of said element would change after a determined amount of time, automatically, with no input. The element would initially load 'testdata.php' which would be composed of multiple database calls, after a determined amount of time, that div element would reload 'testdata1.php', which is composed of completely different database calls.
I hope this helps better describe what I am hoping to achieve.
What I have so far:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="scripts_css/jquery.js"></script>
</head>
<body>
<div style="background-color: #E0E0E0; height: 150px; width: 100%; margins: 0 auto;">
<img src="images/logo.png"/>
</div>
<div id="content" style="height: 850px;"></div>
</body>
<script>
var linkArray=[ "testdata.php",
"testdata1.php"];
for (var i=0; i < linkArray.length; i++) {
setTimeout(function(){$("#content").load(linkArray[i])},2000);
if (i === (linkArray.length-1))
i = 0;
}
</script>
I know this isn't very helpful, and it doesn't directly address your problem, but you might want to try using jQuery (http://jquery.com/). You could have something like this:
$(document).ready(function() {
// Set timeout to 2 seconds
var array = ['page1', 'page2'];
document.write(array[1].href);
});
Or, you could use some server-side script like ruby, or PHP.
This ended up doing the trick for me:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="scripts_css/jquery.js"></script>
</head>
<body>
<div style="background-color: #E0E0E0; height: 150px; width: 100%; margins: 0 auto;">
<img src="images/logo.png"/>
</div>
<div id="content" style="height: 850px;"></div>
</body>
<script>
var linkArray=[ "testdata.php",
"testdata1.php"];
var timeout = 0;
var counter = 0;
var arrayCount = linkArray.length;
changeContent(timeout, counter, arrayCount);
function changeContent(def_timeout, def_counter, def_arrayCount) {
//setTimeout(function() {$("#content").load(linkArray[def_counter])}, def_timeout);
$("#content").load(linkArray[def_counter]);
def_counter++;
if (def_counter >= def_arrayCount)
def_counter = 0;
def_timeout = def_timeout + 5000;
setTimeout(function() {changeContent(def_timeout, def_counter, def_arrayCount)}, 5000);
}
</script>
Creating a web mapping application in Javascript/Dojo:
When I load the app in a browser it loads the html elements but then stops processing. I have to refresh the browser to get it to load the rest of the page and the javascript.
I have done testing and debugging all day and figured out I had my external JS files in the wrong spot (I'm a rookie). Fixed that and the app loads great...EXCEPT one of my files isn't getting read correctly, or at all.
When I move the contents of the external JS file in question to the main code in the default, the functionality that they contain, work fine... BUT the map requires the refresh again.
Stumped. Below is the code in the external JS file that is causing my issue. I can't figure out why it is a problem because the functions work as expected when it is not external.
Any help is greatly appreciated.
//Toggles
function basemapToggle() {
basemaptoggler = new dojo.fx.Toggler({
node: "basemaptoggle",
showFunc : dojo.fx.wipeIn,
showDuration: 1000,
hideDuration: 1000,
hideFunc : dojo.fx.wipeOut
})
}
dojo.addOnLoad(basemapToggle);
function layerToggle() {
layertoggler = new dojo.fx.Toggler({
node: "layertoggle",
showFunc : dojo.fx.wipeIn,
showDuration: 750,
hideDuration: 750,
hideFunc : dojo.fx.wipeOut
})
}
dojo.addOnLoad(layerToggle);
function legendToggle() {
legendtoggler = new dojo.fx.Toggler({
node: "legendtoggle",
showFunc : dojo.fx.wipeIn,
hideFunc : dojo.fx.wipeOut
})
}
dojo.addOnLoad(legendToggle);
EDIT
Edited to show additional code. Genuinely stumped by this. Would love to get some feedback. I've tried moving it to the main file, reformatting the functions and all of those things work, except they require the refresh. I'm also losing some information on a refresh. Very odd behavior. Any good way to track this down?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=8, IE=9" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<link rel="Stylesheet" href="ZoningClassifications.css" />
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/esri/dijit/css/Popup.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/grid/resources/claroGrid.css">
<style type="text/css">
</style>
<script src="JS/layers.js"></script>
<script src="JS/search.js"></script>
<script src="JS/basemapgallery.js"></script>
<script src="JS/toggles.js"></script>
<script src="JS/identify.js"></script>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("dijit.TitlePane");
dojo.require("esri.dijit.BasemapGallery");
dojo.require("esri.arcgis.utils");
dojo.require("esri.tasks.locator");
dojo.require("esri.dijit.Legend");
dojo.require("esri.dijit.Popup");
dojo.require("dijit.form.Button");
dojo.require("dojo.fx");
dojo.require("dijit.Dialog");
dojo.require("dojo.ready");
dojo.require("dijit.TooltipDialog");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("esri.tasks.find");
var map, locator, layer, visible = [];
var legendLayers = [];
var resizeTimer;
var identifyTask,identifyParams;
var findTask, findParams;
var basemaptoggler = null;
var layertoggler = null;
var legendtoggler = null;
var findTaskParcel, findParamsParcel;
// var gridParcel, storeParcel;
EDIT 2
I've completely rewritten the app placing all the code (except the css) in the main default.html file. I tested piece by piece to make sure it functioned how I want. Adding the toggles code is the only code that throws it and causes the extra refresh.
So for now I am using dijit.TitlePane to hold the drop down elements (basemap gallery, layers, legend). However with this you can not change the look and feel to make them images, which is my end goal.
Can anybody suggest an alternative so I can use 3 different images so that when you click on the image and drop down menu opens holding the basemap gallery, layer list and legend?
EDIT 3
It'll probably help to show the code I use to call the toggle functions: I suspect this might be where my issues are.
<!--Legend-->
<div id="subheader">
<div style="position:absolute; right:60px; top:10px; z-Index:98;">
<div id="legendbutton">
<button dojoType="dijit.form.Button" baseClass="tomButton" title="Show Legend">
<img src="images/Legend.png" />
<script type="dojo/method" event="onClick">
legendtoggler[(dojo.style("legendtoggle","display") == "none") ? 'show':'hide']();
</script>
</button>
<div id="legendtoggle" dojoType="dijit.layout.ContentPane" style="border: 1px solid black; display: none">
<div id="legendDiv"></div>
</div>
</div>
<!--Layer Toggle-->
<div id="layerbutton">
<button dojoType="dijit.form.Button" baseClass="tomButton" border="0" title="Toggle Layers">
<img src="images/layers.png"/>
<script type="dojo/method" event="onClick">
layertoggler[(dojo.style("layertoggle","display") == "none") ? 'show':'hide']();
</script>
</button>
<div id="layertoggle" dojoType="dijit.layout.ContentPane" style="border: 1px solid black; display: none">
<span id="layer_list"><input type='checkbox' class='list_item' id='0' value=0 onclick='updateLayerVisibility();'
</span>
</div>
</div>
<!--Basemap Gallery-->
<div id="basemapbutton">
<button dojoType="dijit.form.Button" baseClass="tomButton" title="Switch Basemap">
<img src="images/imgBaseMap.png"/>
<script type="dojo/method" event="onClick">
</script>
</button>
<div id="basemaptoggle" dojoType="dijit.layout.ContentPane" style="#900;display: none;">
<span id="basemapGallery">
</span>
</div>
</div>
As a Workaround here is something similar I did:
http://www.martindueren.de/paperwriting/
The Icons on the right hand side of the app make dijit.TitlePanes wipe in and out. The effect used for this can be found on this page:
http://dojotoolkit.org/documentation/tutorials/1.8/effects/
The code for this would be something like this:
<button id="slideAwayButton">Slide block away</button>
<button id="slideBackButton">Slide block back</button>
<div id="slideTarget" class="red-block slide">
A red block
</div>
<script>
require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
var slideAwayButton = dom.byId("slideAwayButton"),
slideBackButton = dom.byId("slideBackButton"),
slideTarget = dom.byId("slideTarget");
on(slideAwayButton, "click", function(evt){
fx.slideTo({ node: slideTarget, left: "200", top: "200" }).play();
});
on(slideBackButton, "click", function(evt){
fx.slideTo({ node: slideTarget, left: "0", top: "100" }).play();
});
});
</script>
Feel free to look at my source-code and copy stuff from it! If I understood you correctly this is exactly what you need too.
Quite the story youve put up here, its difficult to pinpoint, excactly what your issue is.. But since youre saying 'map need an extra refresh', then im guessing it could be due to the flow of things you call require for. Problem may very well be, that youre rolling out legacy loader code from a dojo-version which is AMD loader capeable.
Since i really havent run any esri components before, this is kind of a wild guess - but from my pov it could be worth a shot. Im sure google maps has an onload listener - and i suspect esri to follow this behavior.
Try initializing everything in your application before loading any esri modules, like such:
dojo.addOnLoad(function() {
basemapToggle();
layerToggle();
legendToggle();
dojo.require("esri.map");
dojo.require("esri.dijit.BasemapGallery");
dojo.require("esri.arcgis.utils");
dojo.require("esri.tasks.locator");
dojo.require("esri.dijit.Legend");
dojo.require("esri.dijit.Popup");
dojo.require("esri.tasks.find");
});
As goes for the effects youre looking for, personally i'd make use of dojo.animateProperty and combine it with dijit/TooltipDialog.
This http://jsfiddle.net/seeds/a8BBm/2/ shows how to 'hack' the onShow mechanizm, leaving optional effects possible in the opening animation. By default, DropDownButton simply fades in.
See http://livedocs.dojotoolkit.org/dijit/TooltipDialog#programmatic-example for alternate ways to popup the tooltipdialog - i.e. connecting dijit.popup to any click/mouseover event.
Here is the home page for the popular jquery-plugin galleria. I need to insert the download link to the right bottom corner for the active image. Now there is available statistic like (3/10), which indicates the current number from list.
Maybe someone already did this. What is the fastest way?
UPD: using the gearsdigital's idea I wrote the code:
var gallery = Galleria.get(0);
gallery.bind(Galleria.IMAGE, function(e) {
imgHandle = e.imageTarget;
console.log(imgHandle);
console.log(imgHandle.attr('href'));
//$('.galleria-counter').append('Download');
});
The first log line shows up something like:
<img width="584" height="438" src="http://....jpg" style="display: block; position: relative; left: 0px; top: -4px; opacity: 1;">
But how to get the src location, I see the error that attr function isn't available.
your getting the imgHandle from a DOMEvent, not a jquery object.
As attr is part of the jQuery object you need to transfer the dom object to a jquery object.
gallery.bind(Galleria.IMAGE, function(e) {
imgHandle = $(e.imageTarget); //Wrap it here
alert(imghandle.attr('href'))
//$('.galleria-counter').append('Download');
});
I would try to get the current Source-Attribute from the current image and append this as link.
//Untested. This is just a suggestion :)
currentImageSource = $('.galleria-image img').attr('src');
$('.galleria-counter').append('Download');
But a link like this will open the image separatly and not download ordinary. If you want a "real" Download you have to put this image in an zip archive.
$('.galleria-counter').append('Download');
This will produce something like that: http://www.example.com/galleria/img/mygreatimage.jpg.zip
Works for me:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
currentImageSource = $('.container img').attr('src');
$('.placeholder').append('Download');
});
</script>
</head>
<body>
<div class="container">
<h2>Get img src</h2>
<img src="http://www.duba.at/wp-content/uploads/2007/08/bild_0570000.jpg" witdh="200" height="220"/>
</div>
<div class="placeholder">
<h2>Append Here</h2>
</div>
</body>
</html>