JavaScript - How Does This Image Overlay Work ?

I have a script that brings up an overlay box onclick that needs to be on top of everything else on page, however I can't get it to show on top of the navigation tabs. I tried calling the overlay script at the very beginning of the head section as well as tried to call it at the end but it doesn't seem to matter.

Is there something I can add to the script to force it on top of every other object on the page?

Hi Everyone,

I want to create an JS function wherein i'll be passing an URL as a parameter, which opens the passed URL in an overlay pop-up. Since I'll be calling this function through an XML which renders data to flash, lightbox, etc are not useful i guess. Please let me know can I do it.

My xml code looks like this :
Code:

<data name="gallery_vote_url" ns1:space="preserve">
		<value><![CDATA[http://www.JSCallInsteadOfThisURL.com]]></value>
	</data>

Thanks!

Hi,

I want to a javascript function like showModalDialog(<page_name>,'','<options>')

here in the option I need to have overlay property where I can set opacity values.

Is there any solution? Please letme know

Does anyone knows how to make an overlay ad with close button?
Well I have seen already on another websites.I want to make an ad which is over a video and that video can't be started without closing this ad.So when ad is closed then video can be loaded.Something like on this webiste:
http://www.soccerclips.net/videos/we...-villa-fortune
But i don't know how to do it?If someone knows please post the code.

Hi,

I wrote a function which animates an image which looks similar to this:

Quote:
function animate()
{
var image = document.getElementById("frontImage");
var cssLeft = image.style.left;
var px = cssLeft.substring(0, cssLeft.search("px"));
if (px == 100) return;
px++;
image.style.left = px + "px";
//alert(timage.style.left);
setTimeout(this.rotate(), 1);
}
This seems to be working fine. However, the image goes directly to its final position (100px to the right) and does not go through all the intermediate positions. As soon as I add an alert (the one which is now commented) everything works fine.

Anyone knows what the problem is?

Thanks in advance for any help

Hi

I am a complete novice with Javascript.

I posted a question on another site as I want to show a series of 9 images in a random order - ie all 9 images but changing their order every time the page loaded.

Someone responded with the following script:

onload= function(){
var n, pic,
A= [1, 2, 3, 4, 5, 6, 7, 8, 9];// replace integers with urls
var pa= document.getElementById('image_set'); // reference the container element
pa=mr('evalBlock')
while(A.length){
pic=document.createElement('img');
n= Math.floor(Math.random()*A.length);
pic.src= A.splice(n, 1);
pa.appendChild(pic);
}
}

However - I don't know how to put it into my pages to get it to work and they have not replied to my further query.

I think I have to put something in the () after function, also, do the URLs have to be absolute and do they need enclosing in ' or ".
Also what code do I then have to put on the page to call the image?

Would anyone here be able to help?

Many thanks
Carol

Hello to all, new to this forum so pardon any mistakes in my question.


I have an overlay that contains a video which loads upon page load.

Code:

<script type="text/javascript">
$(function() {	
	$("#intro_video").overlay({
	mask: {
		color: '#000',
		loadSpeed: 1000,
		startOpacity: 0,
		zIndex: 9997,
		opacity: .85
	},
	top: 131,
	closeOnClick: true,
	load: true,

onLoad: function(){
var $overlay = this;
setTimeout(function(){$overlay.close()}, 44000)
	}});
  });

</script>

I'd like to delay this by about 5 seconds or so but can't figure out how to do so as I am a JS n00b.

The overlay is contained in a div: <div id="intro_video">

Thank you for your help.

Not sure if the root problem is a js load issue or rather css. Problem page is he http://arcangelmetalworks.com/pictures.php

I've had success using the Lightbox2 module on several Drupal-based sites, but this is the first time I've handled the straight code and tried to drop it into a hand-coded site. Internet Explorer fails to draw the overlay div to the full page height. Firefox 3 performs as expected.

The web site suggests setting the body margin and padding to zero, but those were set anyway and tweaking didn't help. Another suggestion was to stick initLighbox() into the body onload, but that function doesn't exist. Also tried initialize() and Lightbox.initialize(), but again it's claimed those functions don't exist. Looking into the code, however, initialize() is where the div height is calculated, I think.

It should be noted that the lightbox still works on IE even when using one of these failed onload attempts. And I don't actually get IE to report any js error with the onloads - I have to rely on Firebug for that.

Anyone have an idea of what I'm overlooking? I've spent too much time staring at code and coming up blank.

On twitter, when you change your avatar/background a small white box covering an inch of the top of the page appears. How can I do this?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Overlay test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	#overlay {
		background-color: #ccffcc;
		display: none;
		margin-left: -400px;
	position: absolute;
	top: -250px;
	left: 50%;
	width: 800px;
	height: 500px;
	visibility: visible

	}
	
	#container{
	
		color: white;
	background-color: #0ff;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	overflow: visible;
	visibility: visible;
	display: block

		
	}
	</style>
    <script type="text/javascript" src="swfobject/swfobject.js"></script>

	<script type="text/javascript">
	//<![CDATA[
			   
			  
	function hide() {
		document.getElementById("overlay").style.display = "none";
	}
	
	function show() {
		document.getElementById("overlay").style.display = "block";
		swfobject.embedSWF("helpdeskApp_three.swf", "flashcontent", "800", "500", "9.0.0", "expressInstall.swf");
	

		
	
	}
	
	

	//]]>
	</script>
</head>
<body>
<div id="container"> <div id="overlay"><div id="flashcontent">fdgfdg</div>

 <a href="#" onclick="hide();">Click me</a> to close.</div></div>

<div><a href="#" onclick="show();">Click me</a> to show the hidden content.</div>


</body>
</html>

I got some of this code from these forums. Thank you.

It works great, however I'll be using this code with a school's website's template. The problem is that the "overlay" div tags would be placed within the container div tags of the template,therefore confining to these dimensions.

How can I modify my code to have my div tags not affected by the templates div tags... and have the overlay be center in the browser..

Thanks

I would like to add a submenu that pops up when the mouse moves over the first-level menu option.
I succesfully added the submenu. However, now the image-swap script (the script that makes that the image that you see change as you move your mouse on the image) doesn't work anymore.
Does anyone have any idea what I'm doing wrong?


The relevant part of the header:
Code:

<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

	#nav, #nav ul { /* all lists */
		padding: 0;
		margin: 0;
		list-style: none;
		float : left;
		width : 20.35em;
	}
	
	#nav li { /* all list items */
		position : relative;
		float : left;
		line-height : 0em;
		margin-bottom : -1px;
		width: 11em;
	}
	
	#nav li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		margin-left : 18.35em;
		margin-top : -1.35em;
	}
	
	#nav li a {
		width : 10em;
		display : block;
		color : none;
		font-weight : bold;
		text-decoration : none;
		background-color : none;
		padding : 0 0.5em;
	}
	
	#nav li a:hover {
		color : none;
		background-color : none;
	}
	
	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
		left: -999em;
	}
	
	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
	}
	
	#content {
		margin-left : 12em;
	}
-->
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

The relevant part of the body code:

Code:

<table width="314" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="315"><div align="center"><a href="ob.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','afbeeldingen/menuob2.gif',1)"><img src="afbeeldingen/spacer.gif" alt="spacer" width="5" height="10" hspace="0" vspace="0" border="0" /><br />
                  <img src="afbeeldingen/menuob1.gif" alt="OB" name="Image10" width="309" height="27" border="0" id="Image10" /></a><br />

<a href="MS.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menums2.gif',1)"><img src="afbeeldingen/menums1.gif" alt="MS" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br />

<a href="kt.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','afbeeldingen/menukt2.gif',1)"><img src="afbeeldingen/menukt1.gif" alt="KT" name="Image12" width="309" height="27" border="0" id="Image12" /></a>

<a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','afbeeldingen/menucontact2.gif',1)"><img src="afbeeldingen/menucontact1.gif" alt="Contact" name="Image15" width="309" height="27" vspace="3" border="0" id="Image15" /><br /></a>

</div></td>
      </tr>
    </table>

<ul id="nav">
<li>
<a href="MS.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menums2.gif',1)"><img src="afbeeldingen/menums1.gif" alt="MS" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br />
<ul>
<li>
<a href="aa.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menuaa2.gif',1)"><img src="afbeeldingen/menuaa1.gif" alt="AA" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br />
</li>
<li>
<a href="bb.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menubb2.gif',1)"><img src="afbeeldingen/menubb1.gif" alt="BB" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br />
</li>
<li>
<a href="cc.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menucc2.gif',1)"><img src="afbeeldingen/menucc1.gif" alt="CC" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br />
</li>
</ul></li></ul>

Hi

I am trying to create a page that has a couple of pop-up overlay boxes from a couple of links, Everything is working ok I think except for a problem on a browser resize.

The original code I found : ( http://kalyanchakravarthy.net/?p=208 ) was created or only one window so the resize code controls both windows, when I think need each one controlled separately. The resize code will make a closed overlay box appear.

Any suggestions or help will be greatly appreciated. THANK YOU



Code:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script language="javascript" src="jquery-1.2.6.min.js"></script>
<!--script language="javascript" src="jquery-schedule-overlay.js"></script-->
<style type="text/css">

.bgCover { background:#000; position:absolute; left:0; top:0; display:none; overflow:hidden }


.overlayBox {
border:1px solid #09F;
position:absolute;
display:none;
width:730px;
height:600px;
background:#fff;
}

.overlayBoxb {
border:1px solid #09F;
position:absolute;
display:none;
width:730px;
height:600px;
background:#fff;
}

.overlayContent {
padding:0px;
}

.overlayContentb {
padding:0px;
}

.closeLink {
float:right;
color:red;
text-decoration:none;
}
a:hover { text-decoration:none; }

</style></head>

<body>

<div class="bgCover">&nbsp;</div>

<a href="#" class="launchLink">Launch Window</a>

<div class="overlayBox">
<div class="overlayContent">
<a href="#" class="closeLink">Close</a>

<img src="Session-A-mock-up.jpg" alt="Session A Schedule " />
</div></div>

<br /><br />

<a href="#" class="launchLinkb">Launch Window 2</a>

<div class="overlayBoxb">
<div class="overlayContentb">
<a href="#" class="closeLink">Close</a>

<img src="Session-B-mock-up.jpg" alt="Session B Schedule "/>
</div></div>

<script language="javascript">

function showOverlayBox() {

//if box is not set to open then don't do anything 
if( window.isOpen == false ) return;

// set the properties of the overlay box, the left and top positions
$('.overlayBox').css({
display:'block',
left:( $(window).width() - $('.overlayBox').width() )/2,
top:( $(window).height() - $('.overlayBox').height() )/2 -20,
position:'absolute'
});


// set the window background for the overlay. i.e the body becomes darker
$('.bgCover').css({
display:'block',
width: $(window).width(),
height:$(window).height(),
});



function showOverlayBoxb() {

windowb=window.open;
//if box is not set to open then don't do anything
if( windowb.isOpen == false ) return;

// set the properties of the overlay box, the left and top positions
$('.overlayBoxb').css({
display:'block',
left:( $(window).width() - $('.overlayBoxb').width() )/2,
top:( $(window).height() - $('.overlayBoxb').height() )/2 -20,
position:'absolute'
});
// set the window background for the overlay. i.e the body becomes darker
$('.bgCover').css({
display:'block',
width: $(window).width(),
height:$(window).height(),
});
}

function doOverlayOpen() {
//set status to open
isOpen = true;
showOverlayBox();
$('.bgCover').css({opacity:0}).animate( {opacity:0.5, backgroundColor:'#000'} );
// dont follow the link : so return false.
return false;
}

function doOverlayOpenb() {
//set status to open
isOpen = true;
showOverlayBoxb();
$('.bgCover').css({opacity:0}).animate( {opacity:0.5, backgroundColor:'#000'} );
// dont follow the link : so return false.
return false;
}

function doOverlayClose() {
//set status to closed
isOpen = false;
$('.overlayBox,.overlayBoxb').css( 'display', 'none' );
// now animate the background to fade out to opacity 0
// and then hide it after the animation is complete.
$('.bgCover').animate( {opacity:0}, null, null, function() { $(this).hide(); } );
}

// if window is resized then reposition the overlay box

$(window).bind('resize',showOverlayBox) ;
$(window).bind('resize',showOverlayBoxb) ;

// activate when the link with class launchLink is clicked
$('a.launchLink').click( doOverlayOpen );
// activate when the link with class launchLink2 is clicked
$('a.launchLinkb').click( doOverlayOpenb );
// close it when closeLink is clicked
$('a.closeLink').click( doOverlayClose );

</script>

</body>
</html>

I wish to add a help icon to variousd parts of my pages that places an overlay text box for the help that that help icon relates to.

maybe a call like

help(datefield) or
help(somethingelse)

then the script that shows the help text shows the text that relates to the string passed.

can someone please provide information on how i can do this.

I want a Login Box to be opened in modal window when user clicks on a link and authentication is done with Ajax.
I tried jQuery BlockUI, jQuery UI, ThickBox. But they are large in scope.
I also tried writing separate plugin for my need but i don't have clear idea how does it work.

So please either suggest a way or give me link to article which is simple to understand and can clear how it work.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slayeroffice Image Slider (altered)</title>
<script>

var img = new Array();
img[0] = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";
img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";
img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";
img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";

for(var image=[], p=0; p<img.length; p++){
	image[p] = new Image();
	image[p].src = img[p];
	}

var current = 0;

window.onload = function so_init() {
	if(!document.getElementById || !document.createElement){
		return;
		}

	 for(var q=0; q<img.length; q++){
		imgs = document.createElement("img");
		imgs.src = img[q];
		img[q].style.display = "none";
		document.getElementById("imageContainer").appendChild(imgs.cloneNode(true)); 
		}
	
	for(i=1;i<img.length;i++){
		img[i].xOpacity = 0;
		}
	img[0].style.display = "block";
	img[0].xOpacity = .99;
	setTimeout(so_xfade,1000);
}

function so_xfade() {
	cOpacity = imgs[current].xOpacity;
	nIndex = imgs[current+1] ? current+1 : 0; 
	nOpacity = imgs[nIndex].xOpacity;

	cOpacity-=.05; 
	nOpacity+=.05;

	img[current].xOpacity = cOpacity;
	img[nIndex].xOpacity = nOpacity;

	img[nIndex].style.display = "block";
	setOpacity(img[current]); 
	setOpacity(img[nIndex]);
	
	if(cOpacity<=0) {
		img[current].style.display = "none";
		current = nIndex;
		setTimeout(so_xfade,1000);
	} 

	else {
		setTimeout(so_xfade,100);
	}
}

function setOpacity(obj) {
		if(obj.xOpacity>.99) {
			obj.xOpacity = .99;
			return;
		}
		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
	}


</script>
<style>
#imageContainer {
	height:309px;
}

#imageContainer img {
	width:500px;
	height:309px;
	position:absolute;
	top:0; left:0;
}
</style>
</head>
<body>
<div id="imageContainer">
 <!--
		<img src="http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png" alt="Swimming Pool Water" />
		<img src="http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png" alt="Notebook" />
		<img src="http://www.techlifeweb.com/facebook_logo.jpg" alt="Bottle Neck" />
		<img src="http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png" alt="Nail in a Board" />
--> 
</div>
</body>
</html>

The script works if the images are stored within the HTML but
when I try to store them in the JS array, it fails.
Is there any way to store the images in JS with this script?