|
JavaScript - Need Help With Popup Code
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> Similar TutorialsHi, I desperately need help after hours of reading 1000s of forums just to be able to have a thumbnail which will enlarge in a new window. I've found this script in one of the forums, and I am trying to apply it to my page. But when I click on a thumbnail, although it's opening a pop-up window, it also enlarges the image in the current browser. How should I fix this? I also need to do the same thing with a .swf file. How can I have a flash movie enlarge when clicked? Any help is appreciated thanks in advance!! <HTML> <Head> <Script type="text/javascript"> var largerView = ""; var winToggle = false; function openFullSize(Pix,isDesc){ if (winToggle){largerView.close()} document.getElementById('nullIMG').src = Pix; var wStr = document.getElementById('nullIMG').width; var offsetW = wStr; wStr = wStr+20; wStr = "width="+wStr; var hStr = document.getElementById('nullIMG').height; var offsetH = hStr; hStr = hStr+20; hStr = "height="+hStr; var lStr = (screen.width-50-offsetW)/2; lStr = "left="+lStr; var tStr = (screen.availHeight-50-offsetH)/2; tStr = "top="+tStr; largerView = window.open(Pix,"FullSize","toolbar=0,status=0,"+tStr+","+lStr+","+wStr+","+hStr+""); largerView.document.title = isDesc; winToggle = true; } function buildSupport(){ var styleStr = "<style>.thumb{cursorointer;border:solid blue 2px}</style>" var divStr = "<Div style='Position:Absolute;Top:-2000'><IMG ID='nullIMG'> </Div>" document.write(divStr); document.write(styleStr); } buildSupport(); window.onunload=function(){ if (winToggle && !largerView.closed){largerView.close()} } </Script> </Head> <Body> <Img Src='1/Any.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is a description')" alt='Click to enlarge'> <Img Src='1/Some.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is another description')" alt='Click to enlarge'> <!-- The following line must be the LAST line in the Body --> <Script> document.getElementById('nullIMG').src = document.images[1].src </Script> </Body> </HTML> I've changed the last part to: <Img Src='images/Any.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is a description')" alt='Click to enlarge'> <Img Src='images/Some.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is another description')" alt='Click to enlarge'> <!-- The following line must be the LAST line in the Body --> <Script> document.getElementById('nullIMG').src = document.images.src </Script> </Body> </HTML> so i have code to make a popup via javascript and it works fine, but what actually pops up is an external file that i select (in my case test.html). i want all of the code of test.html to be in my index.html and when i call the popup it doesn't call an external file but instead calls the html code in the internal file (index.html)? possible? Code: <head>
<script language="javascript" type="text/javascript">
function popitup(url) {
newwindow=window.open(url,'name','status = 0,resizable = 0,height=500,width=600');
if (window.focus) {newwindow.focus()}
return false;
}
</script>
</head>
<body>
<a href="test.html" onclick="return popitup('test.html')">About</a>
</body>
what's in test.html? it's a form why? i need the code of test.html to access some global javascript variables in index.html This code is a bit full on, but it works in IE. I am not suspecting the document.write part, but can anyone tell me why this code fails in Firefox? I think it might be the focus parts in red. Is it not right for FF? Code: function Flash1(tickerstring){
var speedText='<html><head><title>Flashcards - Speed 1</title><script>var sTickString="'+tickerstring+'"</script><script src="flasher(AC).js" language="JavaScript1.2"></script><script>var timeOutVal=300;</script></head> <body onLoad="self.focus()" onBlur="self.focus()"> <a href="javascript:parent.window.focus();top.window.close()"><p align="right"><font face="Arial" color="#808080" size="1"> <i>Close Window</i> </font><p></a><hr><div id=\"bottom_section\"> <\/div>';
function NewWindow(mypage,myname,w,h){
LeftPosition=(screen.width)?(screen.width-w)/2:100;
TopPosition=(screen.height)?(screen.height-h)/2:100;
settings='height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars=no,menubar=no,toolbar=no,directories=no,location=no,resizable=no,status=yes';
win=window.open(mypage,myname,settings);
win.document.write(speedText);
win.document.close();
if(win.focus){win.focus();}
win.refresh;
}
NewWindow('popup.html','flashcards','620','140');
}
I want to insert a link into an email that opens a new window of a specific size. All of the scripts I find require some code to be inserted into the <head> tag of the page. Obviously this will not work since I am inserting the link into an email. Is there a JavaScript code for opening a popup window that's not dependent on <head> code?
I've been trying to figure this out for quite a while now and I am at the end of my rope here. Ok a guy wanted me to edit the template to his ZenCart installation, this is no big deal as I am a graphics guy with a tiny bit of knowledge for actually doing websites. He wants a popup menu on the top he says later and the list he gave had like 37 links...lol I didn't want to write all that out - so I bought a program that makes the menu and you just insert the code. (This works fine if I insert it into a normal html file) So I get these instructions from the program - copy this code and insert it into the webpage: Code: <script language="javascript">var MenuFolderName="";</script><script charset="UTF-8" language="javascript" src="sftmp6arrays.js"></script><script charset="UTF-8" language="javascript" src="sfmenutmp6ie.js"></script> To copy two generated files to the web directory: sftmp6arrays.js sfmenutmp6ie.js That is it. Except - ZenCart is apparently more frustrating than my girlfriend. So I find out I need to put all the JS files in a jscript folder of the template. Then I need to paste the code above into a file and save it as jscript_topmenu.js I find out - that a file called "html_header.php" makes the site load all javascript. This template doesn't have it - so I copy that file from another template and put it in the template/common/ folder. And nothing is happening. Even if I dance in circles and say magic words...nothing happens. I swear. I'm going bald. So look - I presume that I need to call that script in the tpl_header.php file but I don't know how. Then I read that I also need to get rid of the <script> </script> stuff in the js file mentioned above. I am so confused. Can someone please tell me - the idiot <- that's me so talk to me like one so I get it please. - what I need to do. I will cook you grilled cheese. I will do whatever it takes. Please put an end to this misery. Please. Thanks. Hi, 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. :-) 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. 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? Is there a way to make a popup appear behind the current window?
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 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 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. 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. 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! 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] 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. 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. 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 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? 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 |
|||||||