I am pretty new to JavaScript.
I am using SlidesJS, which works perfectly fine.
However, when dealing with JavaScript disabled users, it is kind of tricky. For JavaScript disabled users, the images will be lined up. And I don't know how to deal with it because the images are embedded in the HTML code.
<div id="slides">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
</div>
<script>
$(function(){
$("#slides").slidesjs({
......
</script>
Is there a way to use SlidesJS still, but for JavaScript disabled user, the webpage shows one default image, and hides all the other images?
Use CSS and Modernizr, which can add a class to the HTML element if and only if JavaScript is enabled.
#slides > img + img {
display: none; // may need to make this !important
}
.js #slides > img + img {
display: block;
}
(Note that modernizr.js should be run before any other JS on the page.)
If all you want is JavaScript detection, you don't even need Modernizr -- just one line of code and the above CSS:
document.getElementsByTagName("html")[0].className = "js";
or, to be non-destructive about it:
document.getElementsByTagName("html")[0].className
= document.getElementsByTagName("html")[0].className + " js";
Related
On my website, I share a lot of large images. I use the following HTML tags to display the images:
<img src="/path/to/image" width=x height=y alt="whatever">
Of course the values are replaced with proper values.
I would like to implement a solution so that all browsers (including those capable of supporting ONLY basic HTML and images including the Arachne browser) can access the image, while the browsers with javascript can see the image loading in action. (for example, the loading screen followed by the image appearing instantly)
The following URL gave me an idea:
http://blog.teamtreehouse.com/learn-asynchronous-image-loading-javascript
It suggested I should use this type of javascript
var image = document.images[0];
var downloadingImage = new Image();
downloadingImage.onload = function(){
image.src = this.src;
};
downloadingImage.src = "http://an.image/to/aynchrounously/download.jpg";
and this type of CSS:
img {
width: 600px;
height: 450px;
background: url(loading.gif) 50% no-repeat;
border: 1px solid black;
border-radius: 5px;
}
The problem with this setup is that browsers that don't support javascript or CSS will always see the loading graphic and therefore become frustrated.
Is there a way I can achieve this loading effect but still allow browsers without javascript or CSS to still see the proper image?
The only thing I can think of is to use javascript to somehow force-stop an image from loading but I don't know if such commands exist. In code, I'm thinking:
<script>
document.getElementById('delayme').dontLoadImage=true;
//stop image from loading
//ajax code to fetch image url as if it was html
document.getElementById('delayme').dontLoadImage=false;
//let image continue loading
</script>
<img ID="delayme" src="image.jpg" width=100 height=100 alt="image">
Any ideas?
and remember, the image must appear regardless of whether the user has javascript enabled or not.
UPDATE
So far, this code works for my needs, but only if both javascript and CSS are enabled or if both javascript and css are disabled. However if CSS is enabled and javascript is disabled, then the image stays hidden. How do I fix this?
<style>
img{display:none}
</style>
<div ID="loading">
</div>
<script>
document.getElementById("loading").innerHTML="Loading picture...";
</script>
<img src="http://127.0.0.1/x.jpg" onload="func()">
<script>
function func(){
document.images[0].style.display="block";
document.getElementById("loading").innerHTML="Picture loaded";
}
</script>
You can make something like this:
var asyncImgs = []; // empty array to store the img src's to load them asyncronously
var imgs = document.getElementsByTagName("img");
for(i = 0; i < imgs.length ; i++) {
asyncImgs.push(imgs[i].src); // store the src
imgs[i].src = null; // remove the src
}
With this method, the non-javascript browsers render the normal <img> tag, but with javascript you iterate all images in page, stores the src into an empty array, and then remove the src of the image. You can add your code to load images with new Image() now.
Good luck!
This will work with CSS on and JS off or both on. I don't know if I've seen anyone running JS with CSS off, but if that is something you are trying to solve, I'll have to rethink this quite a bit. I'll be honest, it's not really pretty, but it works.
If only CSS is enabled or if both JS and CSS are disabled, the page loads like any other basic HTML page. The images are loaded from the src.
Once we have JS support, we insert a loading <div> before the image and hide the image until it is loaded at which time we show it and remove the loading div. This is the best case I could think of without having to enclose every image tag in a <div> in the HTML.
HTML/JS:
<img src="https://upload.wikimedia.org/wikipedia/commons/1/13/05S_Jan_7_2012_1035Z.jpg" />
<img src="https://placehold.it/998x999.png"/>
<img src="https://placehold.it/997x999.png"/>
<img src="https://placehold.it/996x999.png"/>
<img src="https://placehold.it/995x999.png"/>
<img src="https://placehold.it/994x999.png"/>
<img src="https://placehold.it/993x999.png"/>
<img src="https://placehold.it/992x999.png"/>
<img src="https://placehold.it/991x999.png"/>
<img src="https://placehold.it/990x999.png"/>
<img src="https://placehold.it/999x991.png"/>
<img src="https://placehold.it/999x992.png"/>
<img src="https://placehold.it/999x993.png">
<img src="https://placehold.it/999x994.png"/>
<script>
var imgList = document.getElementsByTagName('img');
for (var i = 0; i < 3; i++) {
imgList[i].insertAdjacentHTML('beforebegin', '<div id="loading' + i + '" style="height:' + imgList[i].clientHeight + 'px;width:' + imgList[i].clientWidth + 'px;background: url(\'http://loading.io/assets/img/default-loader.gif\') center no-repeat;z-index:9999;"></div>');
imgList[i].style.display = "none";
imgList[i].onload = function() {
this.style.display = "block";
this.previousSibling.remove();
};
}
</script>
CSS:
img {
display: block;
width: 600px;
height: 450px;
border: 1px solid black;
border-radius: 5px;
}
Demo: https://jsfiddle.net/hopkins_matt/abychvxc/
After looking at answers and my own testing, it turns out that I needed the noscript tag and that I needed to fully generate a new image to attach to the existing DOM structure. Because of Internet Explorer's bugs, I forced internet explorer to load the image an old-fashioned-ish way where the status isn't updated as the image loads. In other browsers, the load is more progressive because those browsers were invented correctly (I hope). Nevertheless, this code works for me and I will use it as my starting point.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div ID="LOAD"></div>
<div ID="IMAGE">
<noscript>
<img src="/x.jpg">
</noscript>
</div>
<script>
var x=document.getElementById('LOAD');
x.innerHTML='Loading...';
downloadingImage=document.createElement('IMG');
if (navigator.userAgent.indexOf("MSIE") == -1){
downloadingImage.onload=function(){
x.innerHTML='';
document.getElementById('IMAGE').appendChild(downloadingImage);
}
}else{
x.innerHTML='IE';
document.getElementById('IMAGE').appendChild(downloadingImage);
}
downloadingImage.src = "/x.jpg";
</script>
</body>
</html>
The issues is that the slider is not displaying properly when a user first visits the site. In testing the slider worked fine.
Or actually there was problem that it would not load when first visiting the page, but would then show up when (and only when) you refresh the page. But otherwise the slider shows up but not the images
I looked at the documentation from Zurb at Zurbs documentation for the Orbit slider and they have a sample file, That original demo file has a link above the images (which I removed)
I then searched more on Google using the phrase about this topic using the keyword "orbit preload images" and found a One solution with a preload function. Below is the code that I used to preload (I only modified the path to the images)
<script language="javascript">
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
});
}
preload([
'../images/products/mill/slider/dentist.jpg',
'../images/products/mill/slider/side.jpg',
'../images/products/mill/slider/before.jpg',
'../images/products/mill/slider/after.jpg',
'../images/products/mill/slider/radio.jpg'
]);
</script>
I went ahead and added script but it is still not loading. The complete code for that page is viewable in a Gist on GitHub
The code for the setup of the image slider is viewable in a Gist on GitHub
The site is hosted on a server that is in a .net environment that does not support php.
I had the same issue and after some research, found the answer that works for me;
Basically, you can use jquery to hide the slider whilst it's loading.
See also, this link for further info: how to show div #loading whilst div #content loads
Looking at your code, this should work (untested)
In the <head> section, add this;
<script type="text/javascript">
jQuery(document).ready(function() {
// hide orbit slider on load when user browses to page
$('#featured.orbit').hide(); // hide div, may need to change id to match yours
$('.loading').show(); // show the loading gif instead
// then when the window has fully loaded
$(window).bind('load', function() {
$('.loading').hide(); // hide loading gif
$('#featured.orbit').fadeIn('slow'); // show orbit
});
});
</script>
In your html page that contains the orbit slider code (content copied from your page)
<!-- =======================================
ORBIT SLIDER CONTENT
======================================= -->
<div style="width:100%;">
<div style=" max-width:480px; margin: 0px auto;">
<div id="featured" >
<!-- your content etc..... -->
<span class="orbit-caption" id="radioCaption">Radiograph shows crown seated with
excellent marginal integrity</span>
</div>
</div>
<?php //
// load the loading image - you need to add one to your image directory
// see here to generate one: http://www.ajaxload.info/ ?>
<div class="loading">
<img src="http://www.yourdomain.com/path/to/folder/loading.gif"/>
</div>
</div> <!-- end twelve columns-->
In your CSS you need to hide the #featured div
#featured { display: none; background: #f4f4f4; height: 600px;}
#featured img { display: none; }
#featured.orbit { background: none; }
.loading {margin: 0 auto;text-align:center;margin:30px; }
Hope that helps!
I have a div in my php page that uses jQuery to hide it once the page has loaded. But is there a way to hide it from the very start of loadup?
The reason I ask is because for a brief second, you can see the div when the page is loading, and then hides when the page is fully loaded.
It looks unprofessional.
Just wondering if there is a way around this?
Thanks
Use css style to hide the div.
#selector { display: none; }
or Use it like below,
CSS:
.hidden { display: none; }
HTML
<div id="blah" class="hidden"><!-- div content --></div>
and in jQuery
$(function () {
$('#blah').removeClass('hidden');
});
I've had the same problem.
Use CSS to hide is not the best solution, because sometimes you want users without JS can see the div..
The cleanest solution is to hide the div with JQuery. But the div is visible about 0.5 seconde, which is problematic if the div is on the top of the page.
In these cases, I use an intermediate solution, without JQuery. This one works and is immediate :
<script>document.write('<style>.js_hidden { display: none; }</style>');</script>
<div class="js_hidden">This div will be hidden for JS users, and visible for non JS users.</div>
Of course, you can still add all the effects you want on the div, JQuery toggle() for example.
And you will get the best behaviour possible (imho) :
for non JS users, the div is visible directly
for JS users, the div is hidden and has toggle effect.
Barring the CSS solution. The fastest possible way is to hide it immediatly with a script.
<div id="hideme"></div>
<script type="text/javascript">
$("#hideme").hide();
</script>
In this case I would recommend the CSS solution by Vega. But if you need something more complex (like an animation) you can use this approach.
This has some complications (see comments below). If you want this piece of script to really run as fast as possible you can't use jQuery, use native JS only and defer loading of all other scripts.
Why not add "display: none;" to the divs style attribute? Thats all JQuery's .hide() function does.
This method I've used a lot, not sure if it is a very good way but it works fine for my needs.
<html>
<head>
<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
</head>
<body>
<div id="HiddenStuff1" style="display:none">
CONTENT TO HIDE 1
</div>
<div id="HiddenStuff2" style="display:none">
CONTENT TO HIDE 2
</div>
<div id="HiddenStuff3" style="display:none">
CONTENT TO HIDE 3
</div>
<input id="YOUR ID" title="HIDDEN STUFF 1" type=button name=type value='HIDDEN STUFF 1' onclick="setVisibility('HiddenStuff1', 'inline');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'none');";>
<input id="YOUR ID" title="HIDDEN STUFF 2" type=button name=type value='HIDDEN STUFF 2' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'inline');setVisibility('HiddenStuff3', 'none');";>
<input id="YOUR ID" title="HIDDEN STUFF 3" type=button name=type value='HIDDEN STUFF 3' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'inline');";>
</body>
</html>
Using CSS you can just set display:none for the element in a CSS file or in a style attribute
#div { display:none; }
<div id="div"></div>
<div style="display:none"></div>
or having the js just after the div might be fast enough too, but not as clean
My HTML markup looks like that
<html>
<body>
<div id="loading"><img src="core/design/img/load/load.gif" /></div>
<div id="wrap"></div>
<div id="footer"></div>
</body>
</html>
I'm trying to hide whole page loading process with following solution.
CSS Rules:
#loading {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-image:url("img/load/tr.png");
z-index:100;
}
#loading img {position: absolute; margin-left:-110px; margin-top:-9px; left:50%; top:50%}
And Jquery
$(document).ready(function(){
$('#loading').fadeOut(500);
});
Now, the problem is page loads like that:
first ugly draft of page (for 1-2 seconds)
appears loading div
loading whole content
disappears loading div
You can see it in action
I don't understand why loading div appears after 1-2 seconds?
I want to prevent 1).
I think this is a pretty simple one.
First make sure jQuery is called in your section.
First, wrap all the content of your page (except the loading div) in a div called
<div id="content-wrapper">
CONTENT HERE
</div>
Then using CSS set:
#content-wrapper {
visibility:hidden;
}
Then just make the jQuery into a function like this:
$(window).load(function(){
document.getElementById("content-wrapper").style.visibility="hidden";
$('#loading').fadeOut(500, function()
{
document.getElementById("content-wrapper").style.visibility="visible";
});
});
and I can see you're using Nivo Slider. Me too ;)
Edit: I fixed it, now it works perfectly. (You don't need the onload event in your body tag anymore)
Check out the example here: JSFiddle
Try moving the styles for loading to be inline instead of relying on the full external css file to load. If you look at Google Chrome Developer Tools and the Network tab, or a similar tool, you'll see the content of the page loads first, as expected, but then you have to wait until the external css is loaded and downloaded, and then the referenced image in the css file is loaded. Placing the style inline should assist in getting the loading element to display as soon as it can, or at least sooner.
<div id="loading" style="position: fixed;left: 0;top: 0;
width: 100%;height: 100%;background-image: url(core/design/img/load/tr.png);z-index: 100;"><img src="core/design/img/load/load.gif"></div>
Why not start everything else inside a <div style="display: none;" id="loaded">, and then when the loading has finished use $("#loaded").fadeIn()?
I want to be able to provide a button to my users to just print a particular portion of my dojo/dijit application. There seems to be a general lack of documentation and examples when it comes to printing.
For example, I have a specific dijit.layout.ContentPane that contains the content that I would like to print, but I wouldn't want to print the rest of the document. I have seen some pure JavaScript examples on the web where the node.innerHTML is read into a "hidden" iframe and then printed from there. I suspect that would work, but I was wondering if there was a more dojo centric approach to printing.
Any thoughts?
I have decided to go down the path of reading into <iframe> and printing from there, but because I am using a rendered dojox.gfx surface, a direct read from the target ContentPane to the invisible iframe did not work correctly in some browsers. So what I do is set the "src" of the iframe to a page which re-renders the diagram and then prints itself out when it is finished. In the main document it looks something like this:
<iframe id="printIFrame4" src="#" style="width: 0px; height:0px;
border: none; background: transparent"></iframe>
<button dojoType="dijit.form.Button" style="margin-top: -3px;" id="buttonPrintMap4">
Print...
<script type="dojo/method" event="onClick" args="event">
dojo.byId("printIFrame4").src = "logmap/docMap.php?id=4";
</script>
</button>
And then the page does the necessary dojo stuff to redrew the diagram and then once it is loaded it does a:
this.focus();
this.print();
Which then follows through with the printing.
One solution would be to create a print-only stylesheet while the first rule hiding everything by default:
body {
display: none;
}
Then, a second CSS rule, also in your print-only stylesheet, displays only the Dojo content pane:
#contentPaneId {
display: block;
}
The Dojo ContentPane ID needs to match what you use for #contentPaneId in the CSS.
Finally, you can instruct browsers that it's a print-only CSS file using media="print" in your link tag:
<link rel="stylesheet" type="text/css" href="printOnly.css" media="print"/>