JavaScript - A Little Help With A Popup
I found this popup window, and it works for my project, now i would like to include a close option to the popup window. Either "close", a button, or click aywhere. Here is the coding I am currently using:
<script type="text/javascript"> function openWin(image, w, h){ var wh='width='+w+',height='+h var tmpPage=window.open('','',wh) tmpPage.document.write('<body style="margin:0;padding:0;"><img src="'+image+'" width="'+w+'" height="'+h+'">') tmpPage.document.close() } </script> <a href="1379_files/image296.jpg" target="_blank" onclick="openWin(this.href, 1253, 940);return false;"><img src="1379_files/image296.jpg" width="348" height="261" border="0"></a> <a href="1379_files/image298.jpg" target="_blank" onclick="openWin(this.href, 1253, 940);return false;"><img src="1379_files/image298.jpg" width="348" height="261" border="0"></a> <p> <a href="1379_files/image300.jpg" target="_blank" onclick="openWin(this.href, 1253, 940);return false;"><img src="1379_files/image300.jpg" width="348" height="261" border="0"></a> This opens 3 pictures, that when clicked opens the popup of the same picture, only full screen. Similar TutorialsHi, I'm kinda hoping this is possible but haven't found any reference to it... I have a parent page that opens a popup on click that launches a sidebar navigation on the right of the screen and resizes the parent page. What I am wanting to do is create a second popup (approx 250px high) that opens below the navigation (which is only around 600px high) but I have noticed that even when you have no status bar in the popup windows, they can still end up overlapping because of additional tools or plugins that the viewer has in their browser. Is there any way to get the popups to butt up against each other instead of overlapping? More like a relative popup? Any assistance would be appreciated. :-) Hello everyone, I need help to show popup only once a day per user! The Problem is that the users of my blog gets mad when the popup displays, so i only want to show it once a day. please add the codes to it fully and send it back over thanks! [CODE]<link href='http://pwnagesource.netii.net/java/jquery.fancybox.css' media='screen' rel='stylesheet' type='text/css'/> <!--[if lte IE 6]><link href="java/jquery.fancybox_ie.css" media="screen" rel="stylesheet" type="text/css" /><![endif]--> <script src='http://pwnagesource.netii.net/java/jquery-1.4.3.min.js' type='text/javascript'/> <script src='http://pwnagesource.netii.net/java/jquery.fancybox-1.3.4.js' type='text/javascript'/> <script type="text/javascript"> $j = jQuery.noConflict(); $j.fn.countDown = function(settings,to) { settings = jQuery.extend({ startFontSize: '14px', endFontSize: '14px', duration: 1000, startNumber: 10, endNumber: 0, callBack: function() { } }, settings); return this.each(function() { //where do we start? if(!to && to != settings.endNumber) { to = settings.startNumber; } //set the countdown to the starting number $j(this).text(to).css('fontSize',settings.startFontSize); //loopage $j(this).animate({ 'fontSize': settings.endFontSize },settings.duration,'',function() { if(to > settings.endNumber + 1) { $j(this).css('fontSize',settings.startFontSize).text(to - 1).countDown(settings,to - 1); } else { settings.callBack(this); } }); }); }; </script> <script type="text/javascript"> $j(function() { $j.fancybox( "<div style='margin-left: 20px;'></br><h3 style='background-color: #000; padding: 8px; color: white; text-shadow: white 1px 2px 2px;-moz-text-shadow: black 1px 2px 2px;-webkit-text-shadow: black 1px 2px 2px;font-weight: bold;font-family: \"Trebuchet MS\", Helvetica, Geneva, san-serif; font-size: 20px; '>TheEmoLab" | Subscribe To Our Newsletter!</h3><center></br><td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Free Email Updates Daily!</p></td><form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=theemolab/feed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'><input name='uri' type='hidden' value='theemolab/feed'/><input name='loc' type='hidden' value='en_US'/><input class='mbttext' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/><input alt='' class='mbtbutton' title='' type='submit' value='Submit'/></form></tr></tbody></table></center></br><hr style='padding-bottom: 0; margin: 0 0 7px 0;' /><p style='padding-bottom:0;text-align: center; font-weight: bold;margin-top: 0; padding-top:0;'>This dialog box will close in <span id='dialog_close_countdown'>30</span> seconds.</p></div>", { 'autoDimensions' : false, 'width' : 500, 'height' : 215, 'overlayOpacity' : '0.8', 'overlayColor' : '#000', 'onComplete' : function() { $j('#dialog_close_countdown').countDown({ startNumber: 30, callBack: function(me) { $j.fancybox.close(); } }); } }); }); </script>[ICODE] Hi All How popup windows are made using Javascript? I am not talking about the popups cretaed using window.open. I am talking about the window which appears to display some advertisements in most of the sites. Charles Iv been looking and trying to get something like this forever but cant find it so can some help: I need a script that when you click the link it has a popup box with a form in it but thats easy to find, what im having trouble finding is a script that when you click submit on the form it stays in the popup box and you could use the information submited in the form. I am having a heck of a time closing this popup window when i logoff the site. i open it by Code: shoutwindow = window.open("<?=$MY_LINK_ROOT?>/shoutbox/minichat.php", "shoutwindow", "location=0,status=0,scrollbars=0,menubar=0,resizable=0 width=300,height=310"); when i click logoff the site i want the popup to close also here is the logoff php Code: session_start(); //only for testing will remove this if(!shoutwindow.closed) { echo "window open"; self.close(); //shoutwindow.close (); // also tried both these didnt work // window.close(); } else { echo "Window already closed"; } mysql_close($link); unset($_SESSION['Sess_UserId']); // Unset all of the session variables. session_unset(); // Finally, destroy the session. session_destroy(); echo "<script> location.href='$MY_LINK_ROOT'</script>"; exit; ?> what am i missing here lol ? thanks UPDATE: i just had an idea, can i mix a href and an onClick together so that both are executed like this (i never tried it before) Code: the reason i use self.close is because i heard that it always closes the child not the parent. <a href="logoff.php" onClick="self.close()" return:true;>Log Off</a> the return true will make it execute the href as well right? Hello, Take a look at this page and this just what I want: http://yensdesign.com/tutorials/popupjquery/ But I have two issues concerning this: 1)I am able to insert a youtube image into the popup BUT when I click on the 'X' the popup disappears but the audio remains.What I would like to do is somehow alter the code so the popup is "destroyed" and the clip is stopped completely including the audio. 2) I also want to able to adapt the code so that I can click on any one of multiple youtube links and get the same effect. My javascript capabilities aren't that strong so any help or links to other pages or suggestions are welcome. Ok, I'm not a javascript expert, but I'm using a Drupal module called Calendar which uses some javascript to popup links in a DIV instead of going to a new page. This appears to work by adding class="popup" to links on the calendar. I want to use the same functionality to link to calendar events from other areas on the site, not just on the calendar. It looks like the javascript file is loaded on every page of the site, but adding class="popup" only results in an empty DIV with a close button, without actually loading the content. Can anyone please help me solve this? A link to what I'm working on is he http://67.220.206.170/~jazzbone/?q=home. The upcoming events section is a block from the Calendar view (created by the Calendar module), however it does not do popups by default like the calendar page, so I've tried adding class="popup" to these links to make it work. You can see in the main body of the page is a test link with class="popup" as a test as well. I want them to behave like the popups on the event calendar page. I think this is the javascript file in question: http://67.220.206.170/~jazzbone/site...r/jcalendar.js I know this is a lot, and I'm a newbie here, but I appreciate any help, thanks. Hello all! I wanted to say hey as this is my first post! I will probably stick around for a little, but I need help first. I'm trying to make a code for something on a forum. It will prompt the user for a yes or cancel, then save a cookie with their answer. Then the next time the script is called, it will check for the cookie. If there is one saved, it won't prompt and use that value. Here's my breakdown (hope this is right) 1. Have a popup box that prompt for a 'yes' or 'cancel' Code: if(window.confirm("Use WHATEVER theme?")) { * * location.href = "URL HERE"; } Got that! 2. Save a cookie with the answer Here is where I need the help. I really don't have a clue other than the fact that you use setCookie(name, value, expire). I'm guessing that there will need to be something special in the value section. 3. When the script is loaded, it will check for the cookie saved and do whatever was saved Again, I need help. I know I'll need the getCookie function, but I dont know what else. As you can see, I'm rather hazy in the cookies department. If you ha any trouble and now understand it, please direct me to where you learned it as I am willing and wanting to learn this inportant function of JavaScript! I tried to provide as much detail as possible, but if you have questions ask! Any help would be greatly appreciated, whether or not it's the code I need. Whether it is direction or step by step help, I will still value it! Thanks! Hey everyone, I have a javascript problem which I think can be resolved by adding a few lines of code. I will try to explain my situation: Code: <img title='gameplay0001' class='popuplink' src="img/visual/gameplay/visual-gameplay-10.png"/>\ <span class='popup'> <span>gameplay0001</span> <img src="img/visual/gameplay/visual-gameplay-10_large.png" /> <div class='clear'></div> <div class='popupclosebtn'>back</div> </span> this javascript I wrote, allows me to do this: 1) I click on the element with class .popuplink 2) The span with the class popup that contains a span whose text equals the title of popuplink (in this case gameplay0001) appears 3) when I click popupclosebtn the popup closes this is all done by the next javascript: Code: $('.popuplink').each(function() { $(this).click(function() { var source = $(this).attr('title'); var popupContent = $(".popup:contains('" + source + "')"); var popupContainer = $("#popcontainerbase"); popupContainer.html(''); popupContainer.html(popupContent.html()); $("#popcontainerbase").fadeIn(200, function() { $('.popupclosebtn').click(function() { var popupContainer = $("#popcontainerbase"); popupContainer.html(''); $('#popcontainerbase').fadeOut(200, function() { }); }); $(document).keyup(function(e) { if (e.keyCode == 27) { var popupContainer = $("#popcontainerbase"); popupContainer.html(''); $('#popcontainerbase').fadeOut(200, function() { }); } }); }); }); }); Oh by the way, I put all the .popup content in a div called #popupcontainer, so my content won't affect my relative container div. So, this works perfect, text and images can be placed in the span .popup; no proplems. Additionally, I also have a jwplayer in my website. This works fine as well. With one exception: When I try to put a jwplayer video into a .popup window, IE fails to put the video in there. it just ignores it. My video popup page: Code: <img title='trailer01' class='popuplink' src="img/visual/trailer01.png"/> <span class='popup'> <span>trailer01</span> <div id="trailer01"> </div> <div class='clear'></div> <div class='popupclosebtn'>back</div> </span> The javascript source on the bottom of the page: Code: jwplayer("trailer01").setup({ controlbar:"over", "controlbar.idlehide": false, controlbar:"bottom", autostart: true, flashplayer: "jwplayer/player.swf", skin: "jwplayer/skins/glow.zip", wmode: "transparent", file: "video/trailer01.mp4", width: 490, height: 340 }); so, that is my situation. This script will not work in internet explorer. Can anyone tell me how to fix this? thanx in forward Hi, Im new with java script. I have a doubt. Im building an html web site. How to create a image pop up while opening a page, with a close button. Pls anyone share the code. thanks hi currently i am using this to goto new page: Code: <div onClick="document.location='nextpage.html';" class="active">sometext</div> how can i make it a popup to that page if i click anywhere in the div, thanks for any help. Is there a way to make a popup appear behind the current window?
Okay, first it should be noted I am a complete, 100% neophyte with javascript. I know HTML code pretty well, and I can do quite a bit of PHP as well, but it is all self-taught, so I am hardly an expert... and as I said, java is like French to me. I have a very simple website I've built, nothing complicated or dynamic - but we want to add one feature to this website which I have to say I am at a complete loss about. Basically, I want to have the main page of this website to have a popup form that somebody can plug in their name, email and zipcode load the first time somebody loads the page (which would obviously dump into a database or something), and then the next time the person goes to that page, that popup does not come up again. In other words, I want the feature to behave exactly like this: http://gopleader.gov/ Grey out the background, popup form, place a cookie so that in the future the popup doesn't load again, and that is it. I honestly am no kidding when I say I don't know javascript at all... so I would appreciate somebody helping me out with that in mind (in other words, don't just assume I know where I need to input my own custom values). Does anyone have any ideas here? I am trying to have a photo gallery where you click on a thumbnail and it automatically changes the larger image in the cell next to it. That function is working. I am now trying to add a popup feature on the larger image that will pull an additional image and I cant seem to get it to work. In addition the text that appears under the large image is the same text no matter which image you click on. Please tell me what is wrong with my code...Thank you this is in the header function changeImage(filename,filename2,txt){ document.getElementById('mainimage').src=filename; document.getElementById('image2').src=filename2; document.getElementById('ImgTxt').innerHTML=txt; } function popUp(popupimage) { newwindow=window.open(popupimage,"name","height=500,width=500"); if (window.focus) {newwindow.focus()} return false; } This is in the body tag <table width="750" border="0" align="center" cellpadding="2" cellspacing="0"><tr bgcolor="#000000"><td valign="top" align="left" width="200" style="padding-top:20px"><img src="images/mini/bobov_reb_shloime_mini.jpg" alt="" class="thumb" onclick="changeImage('images/bobov_reb_shloime.jpg','images/originals/bobov_reb_shloime.jpg','Bobover Rebbe')" /><img src="images/mini/reb_svei_mini.jpg" alt="" class="thumb" onclick="changeImage('images/reb_svei.jpg','images/originals/reb_svei_mini.jpg','Reb Svei with Talmidim')" /><img src="images/mini/rogotchover_mini.jpg" alt="" width="63" class="thumb" onclick="changeImage('images/rogotchover.jpg','images/originals/rogotchover.jpg','Rogotchover')" /></td> <td align="center" valign="top" width="500" height="600" bgcolor="#000000" style="padding-top:20px;"><p><img src="images/bobov_reb_shloime.jpg" name="mainimage" width="424" border="0" id="mainimage" onClick="popUp(this.src)" /><br /><p> <span id="ImgTxt" class="text">Bobov Rebbe</span> </p></td></tr></table> hey there i was wondering if anyone knows how to get a print option button in a pop up window , i am using html with javascript to create a currency converter i have a button on my main page which opens up a popup window with information taken and totalled from the user input , i would like to be able to offer the option to print this window off . code is function open_win(){ myWindow=window.open('','','width=300,height=300'); myWindow.document.write("<p>Current sterling recieved</p>",sterling_total,"<p>Total commision recieved</p>",commision_total,"<p>Total Money Recieved</p>",running_total); myWindow.focus(); } I am trying to modify a popup script to popup a lightbox on page load instead of a new window. The script identifies if the user is a new visitor and displays the popup only to new visitors. Typically, the lightbox is triggered by an a:link. I would like to trigger it using this script so that the lightbox pops up automatically for new visitors only. Here is the popup script: Code: <SCRIPT LANGUAGE="JavaScript"> <!-- function GetCookie(name) { var arg=name+"="; var alen=arg.length; var clen=document.cookie.length; var i=0; while (i<clen) { var j=i+alen; if (document.cookie.substring(i,j)==arg) return "here"; i=document.cookie.indexOf(" ",i)+1; if (i==0) break; } return null; } var visit=GetCookie("COOKIE1"); if (visit==null){ var expire=new Date(); window.name = "thiswin"; newwin=open("http://www.pccmedia.net/P25_60sec.php", "dispwin", "width=350,height=350,scrollbars=yes,menubar=no"); expire=new Date(expire.getTime()+7776000000); document.cookie="COOKIE1=here; expires="+expire; } // --> </SCRIPT> I want to replace the newwin=open... command with something that will trigger the lightbox. The section of the lightbox script that receives the trigger and variables is.... Code: Mediabox.scanPage = function() { // $$('#mb_').each(function(hide) { hide.set('display', 'none'); }); var links = $$("a").filter(function(el) { return el.rel && el.rel.test(/^lightbox/i); }); $$(links).mediabox({/* Put custom options here */}, null, function(el) { var rel0 = this.rel.replace(/[[]|]/gi," "); var relsize = rel0.split(" "); return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1])); }); }; window.addEvent("domready", Mediabox.scanPage); An example of the typical HTML tag that triggers the lightbox and feeds the variables is Code: <a href="http://www.pccmedia.net/other/P25_60sec.mp4" rel="lightbox[set 720 405]" title="Project 25" onClick="stop1()"/> The rel=lightbox... is the trigger for the lightbox. The stop1() function refers to a separate script that plays background music on the website. This also needs to be included in the new visitor popup script, but is a separate issue..... I'm not familiar enough with JS to be able to figure this out. Any help would be GREATLY appreciated. If anyone could please help me with this basic feature, I would much appreciate it! I have this function: Code: function popupWin(href) { window.open(href, "popup", "width=770,height=675"); return; } but when I run it, it opens in the same window. I'm really new to Javascript, and I'm sure it's a basic fix, I just can't seem to figure it out. Thank you!! I'm back, I think i've been up working on my service library too long ,,i'm confused on this subject of popup windows or something. Code: <html> <head> <script type="text/javascript"> function popUp(URL,Name) { var day = new Date(); var id = "page" + Name; window.open(URL, id, "toolbar=1,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1,width=600,height=600"); var URL='https://www....com/'; } </script> </head> <body> <input type="text" <input type="button" onclick="javascript:popUp('Samsung_SB.asp?d=TRIAGE&SB='+'value')"> </body> </html> I'm lost where the text field comes into play..what i'm looking for is the following. input text in my case service bulletin doc number. which will then be appended to the end of the http addy after hitting enter and have the popup window open. I'm not gonna lie i have no clue as too what i'm doing hey, i have a link in js file , with innerHTML. everything works fine, but i want to make the link in a popup window. now its look like this : Code: innerHTML = "<a href='http://tamarp.someee.com/test.php?code="+row[curr].name+"&name="+row[cur].real+"'>ADD</a>"; how do I make this link to be in POPUP? what should i add here? thanks |