|
JavaScript - Showmodaldialog With Overlay Properties
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 Similar TutorialsHi Experts here, Pls help. I have written the html code like this: <a href="http://mypage.com/docfiles" target="_blank"> Click </a> But the problem is when ever the user click the click option complete url is displaying in two ways 1)on the buttom of the status bar 2)Right click on the option open the properties than also we are getting the complete url. But we don't want to see the complete url,How to hide the Url. Please give me solution I am struggling alot. Thanks and Regards, Srinivas yadav. I have written base rel="nofollow" target="_self" tag in head tag. It works fine in IE6 but not in IE8. window.showModalDialog() opens up new ModalDialog instead of using existing Dialog. Can anybody help me?
I HAVE BEEN TRYING TO FIGURE OUT THE PARAMETERS IN THE FUNCTIONS, INCLUDING THE ARRAYS [i], [p], ["get_" + i], ["set_" + i] AND HOW THE METHODS ARE BEING CALLED IN RELATION TO i, p and val, so that I can make sense of this code. If possible can you explain the code also What I will like to know are the properties and methods of the objects generated in the following code? Also I want to know how I can use those methods to show and change the name and age for the emp2 object. this is the code: function Employee(properties) { for (var i in properties) { if (properties.hasOwnProperty(i) && typeof properties[i] != 'function') { this["get_"+i] = (function(p) { return function() { return properties[p]; }; })(i); this["set_"+i] = (function(p) { return function(val) { properties[p] = val; }; })(i); } } } var emp1 = new Employee({ name: "Bob", age: 35, foo: function() {} }); var emp2 = new Employee({ name: "Gary", age: 54 }); 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 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: 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. Hello, I dont know anything about javascript, I was wondering if there is a way to take one image and put it over another, sort of like php's imagecopymerge function. In other words combine two images. For example, take "image a", and combine it with "image b"... Thanks for any help! -Flightfanatic1 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 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. 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? I am looking to have the same effect as this site when images are hovered over. http://www.istockphoto.com/search/agency#3fa3a34 Is it javascript ? 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?
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. 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"> </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. Hi, I've done control in asp.net/javascript and it works on some pages of mine and as it often happens doesn't work on customer's pages . All pages are run in IE 6.0. After I run debugger I've found out that on my page offsetLeft/Top clientHeight properties have some non-zero values. I have <span id="listCLient" style="width:200px;">..</span> and on my test page elListClient.clientHeight = 200, but on customer's app's page it is 0x0 ? Same with other offsetXXX properties etc. But elListClient.style.height bears correct value. I use those properties everywhere. I think it is some settings somewhere ? or CSS styles ? Can anyone help ? Thanks a lot Vladislav |
|||||||