Loading a javascript alert onload without preventing the - javascript

I am trying to load an alert that redirects to another page, but the problem is the background of the page doesn't load. The only html to be rendered is the javascript alert. Any idea how to fix this so that at least some of the html loads before the alert?
also tried
var onFooEndFunc = function()
{
var delay = 50; /* milliseconds - vary as desired */
var executionTimer;
return function()
{
if (executionTimer)
{
clearTimeout(executionTimer);
}
executionTimer = setTimeout(function()
{
window.alert('Please download a game');
window.location.href='games.html';
}, delay);
};
}();

Since you've tagged using jQuery, you could do this:
$(document).ready(function(){
window.alert('Please download a game')
window.location.href='games.html';
});
Or natively:
window.onload=function(){
window.alert('Please download a game')
window.location.href='games.html';
};

Popup is what you need
just set a div
<div id="popup_download">
Please download a game!
Mario
Sonice Rider
</div>
at style set display:hidden
#popup_download
{
position:absolute;
display:none;
top:200px;
left:50%;
width:500px;
margin-left:-250px;
border:1px solid blue;
padding:20px;
background-color:white;
}
when page is loaded just set display:block
<script type="text/javascript">
function show_popup()
{
document.getElementById('popup_download').style.display = 'block';
}
window.onload = show_popup;
</script>
The benefit of it is you can add any HTML elements,css and even php or asp or any code inside and your background will continue working.

Related

Refreshing an ad-banner in a div container

Got a webpage which is used for voting on different pictures (voting-tool).
On the page there are 2 different ad-banners which are stored in div containers.
The ads themselves get loaded by a script which fills the divs with the ads. (just as regular).
Now my problem is that the ads should reload after 5 pictures are clicked or after an amount of time. The option of page reload is also not possible. If the page is refreshed the pictures start at picture 1 again, so its not very useful if the viewer already is at like picture 10.
How can we reload a script / a single div container on a page so that the page stays exactly the same and only the ads reload and show another banner?
Any help is really appreciated.
Note:
I've already tried it with
document.getElementById("addBoxOne").innerHTML
It works fine for text or pictures but not for a script and with
document.write("")
While using the document.write the whole page gets overwritten and not only the div itself. and I cant figure out how to only rewrite / refresh the Adbox
edit: script of the ad-banner
<div class="superbanner">
This is the div where the ad-banner is in and which i want to reload
<script language="JavaScript">
if (typeof (WLRCMD) == "undefined") {
var WLRCMD = "";
}
if (typeof (adlink_randomnumber) == "undefined") {
var adlink_randomnumber = Math.floor(Math.random() * 10000000000)
}
document
.write('<scr'
+ 'ipt language="JavaScript" src="http://ad.de.doubleclick.net/adj/oms.skol.de/localnews_bilder;oms=localnews_bilder;reg=;nielsen=3b;dcopt=ist'
+ WLRCMD + ';sz=728x90;tile=1;ord='
+ adlink_randomnumber + '?"><\/scr'+'ipt>');
</script>
<noscript>
<a
href="http://ad.de.doubleclick.net/jump/oms.skol.de/localnews_bilder;oms=localnews_bilder;nielsen=3b;sz=728x90;tile=1;ord=1734775579?"
target="_blank"><img
src="http://ad.de.doubleclick.net/ad/oms.skol.de/localnews_bilder;oms=localnews_bilder;nielsen=3b;sz=728x90;tile=1;ord=1734775579?"
border="0" width="728" height="90"></a>
</noscript>
<div class="clear"></div>
Try using AJAX instead of Document.write. . doc.write will remove everything in the dom before adding new stuff..
$.ajax({
url: "http://ad.de.doubleclick.net/adj/oms.skol.de/localnews_bilder;oms=localnews_bilder;reg=;nielsen=3b;dcopt=ist",
dataType: "script",
cache: true,//This will decide whether to cache it or no so that it will not add the timestamp along with the request
success: function(){}//In the success handler you can write your code which uses resources from this js file ensuring the script has loaded successfully before using it
});
<body class="white">
<h1 class="black">3 seconds image.</h1>
</body>
.white {
background-color:#FFFFFF;
color:#000000;
}
.black {
background-color:#000000;
color:#FFFFFF;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function changeColor(){
if ($('body').hasClass('white')) {
$('body').removeClass('white');
$('body').addClass('black');
$('h1').removeClass('black');
$('h1').addClass('white');
}
else {
$('body').removeClass('black');
$('body').addClass('white');
$('h1').removeClass('white');
$('h1').addClass('black');
}
}
setInterval(changeColor, 3000);
});
</script>
other. see here documentation
$(document).ready(function() {
// Put all your code here
setInterval(function() {
//$("#content").load(location.href+" #content>*","");
$("#content").load('image.png').fadeIn("slow")
}, 5000);
});
// simple example using the concept of setInterval
$(document).ready(function(){
var g = $('.jumping');
function blink(){
g.animate({ 'left':'50px'
}).animate({
'left':'20px'
},1000)
}
setInterval(blink,1500);
});

can we have a pop up without the use of alert or windows.alert

ideally when i a click a action item in my table it shows "show message" on clicking on to it i need a popup without the use of window.alert or alert instead show a pop up based on my website design
function showFailedWarning(){
dijit.byId('validationsForm').clearMessages();
dijit.byId('validationsForm').popup(alert("Upload Correct File "));
}
Method #1 - Pure JavaScript
You can build your own pop-up with whatever design you want. Either hardcode the elements in HTML and set display:none to the container in CSS, or dynamically append the container.
Note: Why I used innerHTML in place of appendChild().
Live Demo
HTML
<button id="error">Click for error</button>
JavaScript
document.getElementById('error').onclick = function (event) {
event.preventDefault();
/*Creating and appending the element */
var element = '<div id="overlay" style="opacity:0"><div id="container">';
element += "<h1>Title</h1><p>Message</p>";
element += "</div></div>";
document.body.innerHTML += (element);
document.getElementById('overlay').style.display = "block";
/* FadeIn animation, just for the sake of it */
var fadeIn = setInterval(function () {
if (document.getElementById('overlay').style.opacity > 0.98) clearInterval(fadeIn);
var overlay = document.getElementById('overlay');
overlay.style.opacity = parseFloat(overlay.style.opacity, 10) + 0.05;
console.log(parseFloat(overlay.style.opacity, 10));
}, 50);
};
CSS
#overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background-color: rgba(0, 0, 0, 0.5);
opacity:0;
display:none;
}
#container {
position:absolute;
top:30%;
left:50%;
margin-left:-200px;
width: 400px;
height:250px;
background-color:#111;
padding:5px;
border-radius:4px;
color:#FFF;
}
Method #2 - Third-party libraries
You can use libraries such as jQuery UI to achieve what you want:
Live Demo
HTML
<button id="error">Click for error</button>
JavaScript/jQuery
$('#error').click(function (event) {
event.preventDefault();
$('<div id="container"><h1>Error</h1><p>Message</p></div>').dialog({
title: "Error"
});
});
Since you this question has the dojo tag and you have dijit code in your example, I would suggest using dijit.Dialog to do this.
I put together a quick example on jsfiddle demonstrating it.
require(['dijit/Dialog', 'dijit/form/Button'], function (Dialog, Button) {
//create a new button (doesn't matter if it is programmatically or not)
var button = new Button({
label: 'Validate',
type: 'button'
});
button.placeAt(dojo.body());
button.on('click', function () {
//instantiate the dialog with our error message and content
var dialog = new Dialog({
title:'Error Message title',
content: '<div>Something is invalid!</div>',
style:'min-width:300px;'
});
//show the error message
dialog.show();
});
});
The dojo docs for dijit/Dialog should also be helpful to look at.

Visible Image buildup from top to bottom: is there a way to show in one stroke?

I am using javascript to periodically replace a .png picture, which ist viewed fullscreen as the only content of a site. No matter how I try, in Firefox, after being loaded (as seen via firebug), the new image is always drawn from top to bottom. This takes some seconds. Is there any way to prevent this and show the picture all at once?
This is my current javascript code:
function preloadScreenshotPeriodically(){
var new_screenshot = new Image();
new_screenshot.src = "screenshot.png?defeat_firefox_caching=" + counter;
new_screenshot.id = "screenshot";
counter = counter + 1;
new_screenshot.onload = function(){
loadScreenshot(new_screenshot);
setTimeout("preloadScreenshotPeriodically();", 5000);
};
}
function loadScreenshot(new_screenshot){
document.getElementById("screenshot").parentNode.replaceChild(new_screenshot, document.screenshot);
}
I also tried to use two images, one of them hidden. Then loading the picture in the hidden one and swapping them. Same results :/
In an other version, I fetched the image with Ajax and after loading is complete, changed the url of the img-tag. My hope was, that the browser would recognize the picture had already been loaded and fetch it from the browsercache rather than loading it. But this didn't happen and I ended up with two requests to the server for one picture and the same slow drawing of it as in my other trys.
edit:
Now I tried it like suggested in answer 1. While it works just fine if I switch the picture when I load the next one (I don't want this), trying to switch it as soon as it is loaded (what I want) results in a blank window (very short) and visible loading of the picture as described above.
this works:
<body>
<style type="text/css">
#loaderWin { display:block; height:1px; width:1px; overflow:hidden; }
</style>
<div id="imagewin"></div>
<div id="loaderWin"></div>
<script type="text/javascript">
var screenshotCount=0;
function showFirstImage() {
loadNextImage();
}
function showNewImage() {
loadNextImage();
}
function nextImageLoaded() {
// swapImage();
}
function loadNextImage() {
swapImage();
screenshotCount = screenshotCount +1;
var nextImage = "<img id='loaderWinImg' src='screenshot.png?x="+screenshotCount+"' onload='nextImageLoaded()' />";
document.getElementById('loaderWin').innerHTML = nextImage;
}
function swapImage() {
document.getElementById("loaderWinImg").onload = '';
var newimage=document.getElementById('loaderWin').innerHTML;
document.getElementById('imagewin').innerHTML = newimage;
}
var showImages = setInterval("showNewImage()",15000);
showFirstImage();
</script>
</div>
</body>
</html>
this doesn't work:
<body>
<style type="text/css">
#loaderWin { display:block; height:1px; width:1px; overflow:hidden; }
</style>
<div id="imagewin"></div>
<div id="loaderWin"></div>
<script type="text/javascript">
var screenshotCount=0;
function showFirstImage() {
loadNextImage();
}
function showNewImage() {
loadNextImage();
}
function nextImageLoaded() {
swapImage();
}
function loadNextImage() {
screenshotCount = screenshotCount +1;
var nextImage = "<img id='loaderWinImg' src='screenshot.png?x="+screenshotCount+"' onload='nextImageLoaded()' />";
document.getElementById('loaderWin').innerHTML = nextImage;
}
function swapImage() {
// loadNextImage();
document.getElementById("loaderWinImg").onload = '';
var newimage=document.getElementById('loaderWin').innerHTML;
document.getElementById('imagewin').innerHTML = newimage;
}
var showImages = setInterval("showNewImage()",15000);
showFirstImage();
</script>
</div>
</body>
</html>
The problem can be seen here (in firefox problem like described above, in chrome there are no pauses between pictureloads and there is a blank window in between picture changes): http://sabine-schneider.silbe.org:1666/test.html
And here, what Rob suggested in answer 1 without any changes (displays the picture fine in firefox, but not in chrome - there I get a blank window in between picture changes): http://sabine-schneider.silbe.org:1666/test0.html
sounds like the image is "progressive" ( interlaced) and the preload needs more time for it to complete download.
You can set a width and height to the image also for a more stable presentation
( poss )
using
?defeat_firefox_caching=" + counter;
means you never cache the image ( which has confused me about your question ) - remove that line( unless you need it for something you haven't mentioned)
update: Can you try ...
<style type="text/css">
#loaderWin { display:block; height:1px; width:1px; overflow:hidden; }
</style>
<div id="imagewin"></div>
<div id="loaderWin"></div>
<script type="text/javascript">
var screenshotCount=0;
function showNewImage() {
screenshotCount = screenshotCount +1;
var newimage=document.getElementById('loaderWin').innerHTML;
document.getElementById('imagewin').innerHTML = newimage;
var nextImage = "<img src='screenshot.png?defeat_firefox_caching="+screenshotCoun+"'/>";
document.getElementById('loaderWin').innerHTML = nextImage;
}
var showImages = setInterval("showNewImage()",5000);
</script>

JavaScript coding to display one div at a time

I drew an image in HTML out of div boxes. I'm not very fluent with JavaScript, I am trying to display one div at a time like a building image. What would be a good JavaScript equation to display each div one at a time like a flash movie without rewriting my code? I have access to Dreamweaver if that would make anything easier. Here is a small piece of my image:
<html>
<head>
<style type="text/css">
</head>
#apDiv6101 {
position:absolute;
width:131px;
height:81px;
z-index:35;
left:119px;
top:785px;
background-color:#80d010;}
#apDiv6102 {
position:absolute;
width:9px;
height:8px;
z-index:45;
left:119px;
top:858px;
background-color:#80d010;}
#apDiv6104 {
position:absolute;
width:9px;
height:8px;
z-index:45;
left:241px;
top:858px;
background-color:#80d010;}
#apDiv6106 {
position:absolute;
width:9px;
height:8px;
z-index:45;
left:241px;
top:785px;
background-color:#80d010;}
#apDiv6108 {
position:absolute;
width:9px;
height:8px;
z-index:45;
left:119px;
top:785px;
background-color:#80d010;}
#apDiv6110 {
position:absolute;
width:121px;
height:73px;
z-index:40;
left:124px;
top:789px;
background-color:#000000;}
</style>
<body bgcolor="#000000">
<div id="apDiv6110"></div>
<div id="apDiv6108"></div>
<div id="apDiv6106"></div>
<div id="apDiv6104"></div>
<div id="apDiv6102"></div>
<div id="apDiv6101"></div>
</body>
</html>
This page hides all divs, and then stepwise, displays one at a time until all divs in the document are displayed.
http://jsfiddle.net/fFtZc/2/
The JS code:
var current = 0, L, alldivs;
function displayOne() {
if (current < L) {
alldivs[current].style.display = '';
current++;
setTimeout(displayOne, 750);
}
}
function init() {
var i;
alldivs = document.getElementsByTagName('div');
for (i=0, L=alldivs.length; i<L; i++) {
alldivs[i].style.display='none';
}
setTimeout(displayOne, 750);
}
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}
else {
/* for other browsers */
window.onload = init;
}
As far as i understand you want the images to appear one after the another.
and you want only one image to appear at once(hide the previous one)
the code for that would be .
(assuming Jquery is used)
var img_arr = ['appDiv6101','appDiv6102'....,'appDiv6110'];
var i =0;
function cycleImages(){
// hide all the divs
$('div#^appDiv').hide();
//now show the apppropiate div
i = i++ % 12;
$('div#'+img_arr[i-1]).show();
// wait for sometime and call again.
setTimeout(cycleImages,30);
}

Printing just an iFrame

I'm working on a case resolution system, and am currently using a jquery colorbox to display a list of open tasks to the user. Users want to be able to print this list, and I guess you can do it from within the page itself by adding a JavaScript link that triggers window.print from within the iframe. However, I've also got to account for users possibly selecting print from the browser's menu. In that case, if the colorbox is open, I just want to print its contents and not the overlying page.
Is it possible to hide everything except for the iframed content using a print media CSS file? If so, how can this be achieved? Failing that, I'll need to resort to JavaScript, so would achieving the effect in JavaScript be possible?
// suppose that this is how your iframe look like <iframe id='print-iframe' name='print-frame-name'></iframe>
// this is how you do it using jquery:
$("#print-iframe").get(0).contentWindow.print();
// and this is how you do it using native javascript:
document.getElementById("print-iframe").contentWindow.print();
In case the pure CSS solution will fail (didn't work for me but maybe I just missed something) you can have combined solution of CSS and JavaScript. First have this:
<style type="text/css" media="print">
.hideonprint { display:none; }
</style>
Then such JavaScript will cause all content to be hidden when printing, except your frame:
<script type="text/javascript">
window.onbeforeprint = function WindowPrint(evt) {
for (var i = 0; i < document.body.childNodes.length; i++) {
var curNode = document.body.childNodes[i];
if (typeof curNode.className != "undefined") {
var curClassName = curNode.className || "";
if (curClassName.indexOf("hideonprint") < 0) {
var newClassName = "";
if (curClassName.length > 0)
newClassName += curClassName + " ";
newClassName += "hideonprint";
curNode.setAttribute("original_class", curClassName);
curNode.className = newClassName;
}
}
}
document.getElementById("myframe").className = document.getElementById("myframe").getAttribute("original_class");
}
</script>
This also assume the iframe is direct child of the body otherwise it won't work either.
I have found a method that works to print just the IFrame's content even if the client uses the browser's print menu item, but I couldn't tell you why that is. The trick is to set the focus to the IFrame before printing. The print stylesheet is needed too, although the javascript seems to be what is happening when the user prints from the menu. You need both parts for it to work. It prints the entire document, even if it is larger than the IFrame! I have successfully tested it in IE8, Firefox 5 and 6 and Safari 3.2.
I use this script as a handler for an onclick event for a button or "print me" link:
<script type="text/javascript" language=JavaScript>
function CheckIsIE()
{
if (navigator.appName.toUpperCase() == 'MICROSOFT INTERNET EXPLORER')
{ return true; }
else
{ return false; }
}
function PrintThisPage()
{
if (CheckIsIE() == true)
{
document.content.focus();
document.content.print();
}
else
{
window.frames['content'].focus();
window.frames['content'].print();
}
}
</script>
The IFrame in question is named and id'd content. My button is in a div called print_iframe The browser sniffing is essential!
Then I use a print only stylesheet linked in like this:
<link href="/styles/print.css" rel="stylesheet" type="text/css" media="print" />
#charset "utf-8";
/* CSS Document */
body { background:none; }
#left { display:none; }
#main img { display:none; }
#banner
{
display:none;
margin-top:0px;
padding:0px;
}
#main
{
margin-top:0px;
padding:0px;
}
#print_iframe
{
display:none;
}
This could work if the iframe is a direct child of body
<style type="text/css" media="print">
body *{display:none}
iframe{display:block}
</style>

Categories