|
JavaScript - Multiple Pop Up Windows
Hello!
I'm trying to make a website that from one link, opens multiple windows. It is for a design project (I'm still at uni). So far I have mustered just the one window. Here is the website: http://popmeup.org/ The idea is that you get bombarded with lots of nice quotes. I don't know my arse from my Javascript - but has anyone got any advice? Similar TutorialsI am having trouble running multiple windows.onload functions and having trouble how to implement them. I found a couple articles on but couldn't really get them to work. Here are the two functions I'm trying to load: Code: <script type="text/javascript">
//<![CDATA[
window.onload=function(){
//randomize order of contents with DIV class="group1"
randomizeContent("group1")
randomizeContent("group2")
randomizeContent("group3")
}
//]]>
</script>
Code: <script type="text/javascript">
function showHideMore(obj) {
var contObj = obj.parentNode.getElementsByTagName('div')[0];
var status = (contObj.style.display == 'block')? 'none' : 'block'
contObj.style.display = status;
<!-- obj.innerHTML = (status == 'block')? 'Show less' : 'Show more'; -->
obj.curPic = (obj.curPic == 0)? 1 : 0;
obj.style.backgroundImage = 'url("'+plusMinusPics[obj.curPic]+'")';
}
window.onload=function(){
plusMinusPics = ['plus.png','minus.png'];
oMoreLessSpans = document.getElementById('list1').getElementsByTagName('span');
for(i=0; i < oMoreLessSpans.length; i++){
oMoreLessSpans[i].curPic = 0;
oMoreLessSpans[i].style.background = 'url("'+plusMinusPics[oMoreLessSpans[i].curPic]+'") no-repeat 0 50%';
oMoreLessSpans[i].onclick=function(){showHideMore(this);}
}
}
</script>
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 am currently designing a website for our public library. I have added a card catalog search bar on the side of every page. Our catalog software company has supplied the code. After embedding it, I previewed each page to make sure it was working properly. At the time, it worked fine. Since then, I have added other elements to the homepage such as a Twitter feed and a Flickr slideshow. Now, when I attempt to search in the catalog search bar on the homepage, it opens two tabs, but only in Firefox. Our IT person from the software company suggested I make a copy of the page and strip the code down to see what the problem is. After doing this, I have made no headway. Even with the catalog as the only code left on the page, other than text, it still opens two tabs. The following is the code embedded on the homepage: Code: <div>
<script type='text/javascript'>
function gotoserver() {
sn = document.getElementById('server').value;
redirecturl = 'http://webopac.infovisionsoftware.com/stephenville/default.aspx?Title='+sn;
window.open(redirecturl)
//document.location.href=redirecturl;
}
</script>
<input type='text' name='server' id='server' />
<input type='submit' id='mySearch' value='Go' onclick='javascript:gotoserver();' />
</div>
I would appreciate any advice given. Thank you for your time. I thought I did everything right but pop-up windows aren't working... Code: <td>
<a href="javascript:popUp('http://www.retrocitysunglasses.com/popupfreeshipping.html')"><img src="http://www.retrocitysunglasses.com/website_graphics/header_free_shipping.jpg" alt="Free Shipping"></a>
</td>
Code can be found on this page (very first section after body opens): http://retrocitysunglasses.com/ You can see the website here with all the code to make it easier for you to diagnose what is happening: Code: http://www.fdfdaa.com/desktop/desktop.html When you go to the start menu and select anything on the left side, you will see that windows open 100% of the screen by default. I did that by adding maximized:true but that doesn't appear to be working for the icons on the desktop itself. If you click on one of those 4 icons on the desktop though, it isn't opening at 100% for some reason. You can see my classes file here as well: Code: http://www.fdfdaa.com/desktop/classes.js Any help will be greatly appreciated. Thank you for your time! Hi. I don't know if anyone here has downloaded the dev edition of windows 8 yet (it was released last night 5:00p, est) I am trying to get jquery to work, but it just wont... I tried simple stuff, but I was hoping someone here knew how. Thanks This is my first time writing any JavaScript, so I am not very familiar with the language. I want to make a window be kept at the back, under all other windows. From what I understand, the method to do this would be window.blur(), but I cannot seem to get it to work. Have I misunderstood the functionality, or am I implementing it wrong? The part of the code I have that currently deals with this (or at least tries) is as follows: Code: <BODY onclick="window.blur()" > <img src="imageurl" id="image"></img> </BODY> I've tried a few other events to trigger this (onmouseover, setInterval, etc.) but no way I've tried has worked. So, is blur() the right method to do this? have I done something wrong in the implementation? Any help and guidance is appreciated. Backstory (if it should matter for some reason) : I found a webpage ( here and here ) that generates an image of the Earth as seen from space at a given time and I wanted to place that image, updated on a regular basis, as my desktop image. I looked around for a way to do it, but as far as I could find, there was no way to do it easily in Windows XP. Thus, I am now using Samurize (a program for overlaying graphics etc. at your desktop) to create a browser window that loads a html file that periodically updates the image. While this window cannot be moved and has no borders, it can be selected and if it is selected, the image is brought to the front, overlapping any other windows. I wish to make it such that this cannot happen; I have tried configuring Samurize as well as asking for help on their forums, but no luck so far. -Removed due to solution found-
I have searched high and low to find this script. Not having much luck at all. What i want to do is, when someone clicks a link the image pops up on screen in its own nice window smack down in the middle of the screen over top of the website. I want it to look neat tho, best example i can find is @ curse.com http://wow.curse.com/downloads/wow-a...st-helper.aspx If you click that link and scroll down to the screen shot section and click on one of the images you can see how nice and professional it looks. How can i accomplish this? Thanks so much in advance~ In the past I write the jave script to popup windows in the browser for tell our visitor about news & event but now most of browser will block popup by default. Someone can show me an example about the professional popup with out the block.Thank you
Hi, I need javascript to sort as windows sorts its file. For eg: When the files name contains special characters, number and alphabets(#@!$%.doc, test1.doc,test2.doc, 1.doc) javascript sorts alphabets first and then special characters, but windows sorts special characters first and then alphabets in ascending. I want javascript to sort my array as windows. Kindly help me out in this case. Thanks, Deva. This is a pet peeve of mine and I'm still looking for a solution. If I have designated a specific size dimension for a popup window to open with (as one must, otherwise why even use a pop-up window?) then it should be obvious that the window needs to open up at 100% (normal) magnification, otherwise the contents of the window will not be displayed properly. It seems to me current browsers are struggling with this problem, as Firefox, Safari, and Opera all handle it differently. For example, Firefox applies magnification settings defined by the user to dimensions of the pop-up window but not to the contents (an odd solution!); Opera retains the correct dimensions but applies magnification to the contents. Only Safari handles it correctly: even if you have applied magnification to a web page it will still open pop-up windows at default 100% magnification and honor the dimensions specified in the HTML code by the page designer. Thanks for any help you can provide. This seems like it would be so simple and I have absolutely no idea. I have one page with no frames, and two links on it. The second page has an iframe on it. Both links on page 1 point to page 2 (which houses the iframe), but based on which link is clicked will determine what that iframe will display. Basically I need to figure out a way to target the iframe on page 2 after executing a window.open statement. Much like how google images creates a frame at the top after you click on one of the images from the search results. I've attached two simple files to better explain what I'm trying to do. FrameSet.zip I'd appreciate the help, I'm losing my mind. Hi, I'm trying to make a pop up window that should work such as the window the pops up when you press "View all friends" on one of your friends' profiles on Facebook. Is this possible? Thank you! Hi everyone, I'm trying to capture the order in which the windows I've opened using window.open are layered on top of each other. For example, if I open three windows, starting with the first on the bottom and the third on top, but I then focus on the second window, bringing it to the top, is there a way to capture the new window order (2 on top, then 3, then 1)? I know that window.top can give me the first one, but from there, without closing it, is there a way to tell what the next one underneath it is? Thanks in advance, Katherine Hi Guys, I want to develop a javascript code which will open a pop up window and a JSP page in it. That JSP page will load a 'Select' list which user will select a value from and I want that value to be returned to my parent form (window). I remember implementing the same long time back (almost 5years now) ...can anyway help remind me how did I do it...or how can I do it? Regards, -- SJunejo Ok I need to open a popup in a second monitor. The browser will be open in the first monitor and the popup needs to open in the second monitor (we'll say it's to the left for now). I have tried a few Javascript methods. I don't have PHP avaliable to me in this case but I do have the ability to use JSP and will shortly have JQuery. Here is what I have tried so far: Code: <script type="text/javascript">
function popup(url, winName, xOffset, yOffset) {
var x = (window.screenX || window.screenLeft || 0) + (xOffset || 0);
var y = (window.screenY || window.screenTop || 0) + (yOffset || 0);
return window.open(url, winName, 'top=' +y+ ',left=' +x);
}
</script>
<form>
<input type="button" onClick="popup('http://www.google.com', 'myWin', -600, 100)" value="Show Customer"/>
</form>
and Code: <script type="text/javascript">
function popup() {
window.open( "http://igatedev.kirbyrisk.com/DualMonitorTest/product.jsp?part=545347", "myWindow",
"status=0, fullscreen=0, resizable=1" )
}
</script>
Any help is much appreciated. Also I was wondering if there was a way to have the popup close with the original window, or with a button click from the first. Hi - I have an ASP.Net 4.0 solution that runs fine on a Windows 2008 server. However, I've just been given a new Windows 7 64-bit machine to use as my development machine and I'm having a problem with one of my aspx pages. This page has some javascript on it, which runs fine, but then it gets to the following code: Code: <script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
This not code that I've written; it's code that's generated client-side that I see as I'm debugging my app in Visual Studio 2010 (trying to figure out what the $^#$ is going on). At any rate, once this code completes, the app does nothing. The debugger should take me to some server-side code, but it doesn't. It just sits there. The result is that the page doesn't do what it's supposed to do (no inserts to databases, no success messages, no nothing). As I said, this problem is restricted to my W7 64-bit machine; it runs fine on W2008. Other pages with javascript in the same solution work fine on my W7 machine. I found a post (http://dopostback.net/index.php/net-...anel-problems/) that discusses a similar issue within an UpdatePanel, but I'm not using UpdatePanel. My page does have hidden controls on it, but so do other pages that work just fine. Does anyone know what could be causing this? Thanks! sorry if this is in the wrong place, but it does include js and ajax. hi all, ive downloaded the DHTML window script from here : http://www.dynamicdrive.com/dynamici...ndow/index.htm and have it running on my site. i also have a DTHML / ajax chat running on the site which is currently on the main page in an iframe. im trying to put this iframe inside the DHTML window, i have tried all 4 of the window types and for each one i either get the items in the directory or the source code eg if i put the link as test/ i get the list of files in that directory, if i put test/index.php i get <php? source code blah blah ?> it works fine with .html files i assume its because they are .php ? any ideas ? thanks Doing a bit of window-opening: the idea is, when a link is clicked, it selects a random one from an array of urls, and then opens it with certain toolbars missing. Got a script for each part, but not sure how to combine them: ' location ' seems to be talking about different things in each script. the random script: Code: var single = new Array ("a.htm","b.htm","z.htm")
function choose(){
window. location =choose[Math.floor(Math.random()*single.length)] }
the opener script: Code: function open() {
window.open('myurl',' location =no,toolbar=1, directories=no,status=no,menubar=no,resizable=yes,scrollbars=yes') }
Any suggestions? (No comments plz about removing toolbars: still experimenting, and the viewer won't be left stranded). |
|||||||