JavaScript - Image Overlay Problem In Browsers

Hi, I have a JS that can run on IE but cannot on FireFox and Safari. The script like this:
Code:

function DeleteClick()
        	{
        		var frmSWO = document.getElementById("form");
        		
        		var answer = confirm("Do you really want to delete?")
				if (answer != 0)
				{
					frmSWO.action = "/domsWeb/controller/manageWorkOrder/DeleteJobOrImage.do";
        			frmSWO.method = "post";
        			this.form.fireEvent('onsubmit');
        			frmSWO.submit();			
				}   		
        	}

So after I change the script, it now can work on Safari and Firefox but cannot on IE. The script is below:
Code:

	    function DeleteClick()
        	{
        		var frmSWO = document.getElementById("form");
        		
        		var answer = confirm("Do you really want to delete?")
				if (answer != 0)
				{
					frmSWO.action = "/domsWeb/controller/manageWorkOrder/DeleteJobOrImage.do";
        			frmSWO.method = "post";
        			if(frmSWO.fireEvent) {
					frmSWO.fireEvent('onsubmit');		//'this.form' might be not clear enough
				}
				else {
					frmSWO.submit(); 	//fireEvent may not be neccessary since submit() is also called
				}			
				}   		
        	}

This is really troublesome! Please help me to amend the script for it to be able to work on all 3 browsers.
Appreciate any help.

This is my test page: http://www.thesacstudio.com/ccid_web...ndex_copy.html

Am using Dynamic Drive's smooth menu javascript

When viewed on a PC using IR the menu makes the page "jump" i am a Mac guy and at my limit of what to do.

thanks for any assistance

Hello,

I am looking for javascript content overlay, something exactly like LeadBolt overlay (you can see example here http://tinyurl.com/2coq2xy).

If possible to set: load on center of screen, load it just when visitor come, turn off after set amount of time, close button to be turned on/off (rather off).

Can you help me?

Thanks in advance,
chlopzmazur

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.

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,

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

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!

Hey,
I am using an RSS scroller to show recent news feeds



I am also using Ajax to change the content from page to page, but instead of using ajax to load the external page for the 'news page' (the image above is the home page) I've had to use a show/hide DIV tool as it refused to load the javascript from the external page. All is working fine apart from text overlay.

This is the news page:


Code:

<script language=javascript type='text/javascript'> 
function hidediv(pass) { 
var divs = document.getElementsByTagName('div'); 
for(i=0;i<divs.length;i++){ 
if(divs[i].id.match(pass)){//if they are 'see' divs 
if (document.getElementById) // DOM3 = IE5, NS6 
divs[i].style.display="none";// show/hide 
else 
if (document.layers) // Netscape 4 
document.layers[divs[i]].display = 'none'; 
else // IE 4 
document.all.hideshow.divs[i].display = 'none'; 
} 
} 
}

function showdiv(pass) { 
var divs = document.getElementsByTagName('div'); 
for(i=0;i<divs.length;i++){ 
if(divs[i].id.match(pass)){ 
if (document.getElementById)
divs[i].style.display="block";
else
if (document.layers) // Netscape 4 
document.layers[divs[i]].display = 'block'; 
else // IE 4 
document.all.hideshow.divs[i].display = 'block'; 

} 
} 
} 



</script>






<html xmlns="http://www.w3.org/1999/xhtml">
</head>
<body onload="show_clock()">
<div id="wrapper">
	<div id="header">
		<a href="#" rel="nofollow" target="_parent">Planet Volume</a>
	</div>
	<div id="menu">
		<ul>
			<li><a href="#" onclick="javascript:showdiv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/home.html');return false">Home</a></li>
			<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:showdiv('newspage'); ajax_loadContent('news3','external/news.html');return false">News</a></li>
			<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/request.html');return false">Request</a></li>
			<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/contact.html');return false">Contact</a></li>
			<li><a href="#" onclick="javascript:hidediv('newsbox'); javascript:hidediv('newspage'); ajax_loadContent('news3','external/tunein.html');return false">Tune in</a></li>		
			<li><a class="last"><script language="javascript" src="javascript/liveclock.js"></script></a></li>
		</ul>
	</div>
	<div id="main">
		<div id="content">
			<div class="content_box">
				<div id="mainContainer">
					<div class="news" id="news3">
						Loading news. please wait...
					</div>
				</div>
				<script type="text/javascript">
					ajax_loadContent('news3','external/home.html');
				</script>
			</div>
			<div id="newspage" style="display: none; visibility: visible;">
				<table width="600" style="">
				<tr>
					<td>
						<h5>Celebrity Gossip</h5>
						<script type="text/javascript">				
						
		var cssfeed=new gfeedpausescroller("celeb-rss", "celeb-rss", 3000, "_new")
		cssfeed.addFeed("Celebrity", "http://news.feedzilla.com/uk/headlines/celebrities/top-stories.rss") //Specify "label" plus URL to RSS feed
		cssfeed.displayoptions("date") //show the specified additional fields
		cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
		cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
		cssfeed.entries_per_page(4)
		cssfeed.init()
		</script>
					</td>
					<td>
						<h5>Music News</h5>
						<script type="text/javascript">
		var cssfeed=new gfeedpausescroller("music-rss", "music-rss", 3000, "_new")
		cssfeed.addFeed("Music", "http://news.feedzilla.com/uk/headlines/music/top-stories.rss") //Specify "label" plus URL to RSS feed
		cssfeed.displayoptions("date") //show the specified additional fields
		cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
		cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
		cssfeed.entries_per_page(4)
		cssfeed.init()
		</script>
					</td>
				</tr>
				<tr>
					<td>
						<h5>Movies Reviews</h5>
						<script type="text/javascript">
		var cssfeed=new gfeedpausescroller("movies-rss", "movies-rss", 3000, "_new")
		cssfeed.addFeed("Movies", "http://news.feedzilla.com/uk/headlines/entertainment/movies-reviews.rss") //Specify "label" plus URL to RSS feed
		cssfeed.displayoptions("date") //show the specified additional fields
		cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
		cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
		cssfeed.entries_per_page(4)
		cssfeed.init()
		</script>
					</td>
					<td>
						<h5>Technology</h5>
						<script type="text/javascript">
		var cssfeed=new gfeedpausescroller("tech-rss", "tech-rss", 3000, "_new")
		cssfeed.addFeed("Technology", "http://news.feedzilla.com/en_us/headlines/technology/top-stories.rss") //Specify "label" plus URL to RSS feed
		cssfeed.displayoptions("date") //show the specified additional fields
		cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
		cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
		cssfeed.entries_per_page(4)
		cssfeed.init()
		</script>
					</td>
				</tr>
				</table>
			</div>
			<div id="newsbox" class="newsclass" style="visibility: visible; position: absolute;">
				<h2>Latest News</h2>
				<h5>Celebrity Gossip</h5>
				<script type="text/javascript">
		var cssfeed=new gfeedpausescroller("home-celeb-rss", "home-celeb-rss", 4000, "_new")
		cssfeed.addFeed("Celebrity", "http://news.feedzilla.com/uk/headlines/celebrities/top-stories.rss") //Specify "label" plus URL to RSS feed
		cssfeed.displayoptions("date") //show the specified additional fields
		cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
		cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
		cssfeed.entries_per_page(3)
		cssfeed.init()
		</script>
				<div class="clear h40">
				</div>
				<h5>Music News</h5>
				<script type="text/javascript">
		var cssfeed=new gfeedpausescroller("home-music-rss", "home-music-rss", 4000, "_new")
		cssfeed.addFeed("Music", "http://news.feedzilla.com/uk/headlines/music/top-stories.rss") //Specify "label" plus URL to RSS feed
		cssfeed.displayoptions("date") //show the specified additional fields
		cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
		cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
		cssfeed.entries_per_page(3)
		cssfeed.init()
		</script>
				<a href="#" class="float_r" onclick="javascript:hidediv('newsbox'); javascript:showdiv('newspage'); ajax_loadContent('news3','external/news.html');return false">More news...</a>
			</div>
		</div>
		<!-- end of content -->

This problem only happens for a few seconds, then it scrolls and the news looks fine. It gets very annoying. If you could help me with this dilema I will be very great full!

Thanks alot.

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.

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.

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

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 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.

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.