|
JavaScript - Display Div When Lightwindow Closed?
I'm not great with javascript and I'd appreciate any help or guidance. I'm using jquery colorbox to open a window when the page loads. However there is also a video player that automatically plays at the same time (flash). I'm trying to figure out how to modify the colorbox code so that the containing div for the video is initially hidden from view until the colorbox window is closed.
The function to initialize it is: Code: $(document).ready(function() {
$.fn.colorbox({href:"#inline_example1", width:"33%", inline:true, open:true});
});
Which I thought is where code should go to initially hide the div? Then I'm not sure but inside the actual colorbox code there is a function for closing the window. Is there a way to attach an event to that closing function that will change the hidden div to being visible? Code: $overlay.click(function () {
if (settings.overlayClose) {
publicMethod.close();
}
});
Similar Tutorialshi! i know little about programming, or javascript... ...i've set up several lightwindows on a site... ...fine in all browsers except IE (8 for sure, maybe others too...) ...the lightwindows load normally the first time they are clicked, but if they are closed and opened again, on the 2nd or subsequent times the window opens up at the bottom and an extra 'secret panel' (!) appears... ...in it it says, 'Null' on the left hand side, and 'by null', almost like a signature, on the right! The IE error message assoc. with this is: Message: 'null' is null or not an object Line: 5 Char: 5280 Code: 0 URI: http://www.kabeoke.com/swfobject.js And the FF error console (even though it works fine in FF...) says this: Error: $("lightwindow_image_" + i) is null Source File: http://www.p51labs.com/lightwindow/c...ipt.js,html.js Line: 5595 So the error is really specific to IE, and seems to involve javascript... ...can anyone help? Many Thanks I'm trying to integrate two different scripts, one being a PHP/CSS form (this part seems to be working fine) with a LightWindow script built by Kevin Miller: http://www.stickmanlabs.com/lightwindow/ I have installed the lightwindow script at: http://www.mikeandzachsbbq.com/Catering/ The Click Here link in the second paragraph opens the lightwindow, which shows the PHP form, located at http://www.mikeandzachsbbq.com/Catering/form.php If you go to form.php directly and fill out the form, it sends with no issues. However, if you fill out the form inside the lightwindow and click send, while it says that it sent successfully, no email is ever received. I've tried different form methods using the lighbox script, neither GET nor POST will make the email send inside the lightwindow. Anyone have any ideas? I'll try anything to get it working, or attach any needed files. Thanks a lot. Chris Hello there everyone! I am currently rebuilding my portfolio and utilizing lightwindow as a means to display my projects. I have set up the site so that there is a grid of thumbnail images and also a textual list of links (basically another means for the user to navigate the projects if they prefer not to use the thumbnail links). For some projects I need to use the gallery function to display multiple images. I have this functioning when you click on the thumbnail link just fine. The problem is having the corresponding text link utilize the same set of images without creating a duplicate set. Is there a way to call the gallery without putting links to each image utilizing "class" and "rel". Here is a brief section of the html to show you what I mean...I have minimized it to show you clearly what I am trying to do... Code: <!-- Text List of Links to Projects -->
<div id="subNav" style="display:none;">
<ul>
<li class="listHeader">Web & Interactive</li>
<li>
<a href="imgs/gallery/proj1.jpg" class="lightwindow" title="Dynamic Info Design" caption="A caption can go here..." >Dynamic Info Design</a>
</li>
</ul>
</div>
<!-- Thumbnail Image Links to Projects -->
<div id="portfolioContent">
<div id="thumbnail">
<!-- Set of Images to be used in gallery-->
<a href="imgs/gallery/projectName/proj2A.jpg" class="lightwindow" title="Dynamic Info Design" caption="A caption can go here..." rel="Web & Interactive[Dynamic Info Design]">
<img src="imgs/thumbnails/project1.jpg" alt="Project Name" />
</a>
<a href="imgs/gallery/projectName/proj2B.jpg" class="lightwindow" title="Dynamic Info Design" caption="A caption can go here..." rel="Web & Interactive[Dynamic Info Design]"></a>
<a href="imgs/gallery/projectName/proj2C.jpg" class="lightwindow" title="Dynamic Info Design" caption="A caption can go here..." rel="Web & Interactive[Dynamic Info Design]"></a>
</div>
</div>
I want to call that same set of 3 images with the text link <a href="imgs/gallery/proj1.jpg" class="lightwindow" title="Dynamic Info Design" caption="A caption can go here..." >Dynamic Info Design</a> Right now it's just showing the one image...if I use the rel tag in that link, it adds the image as a duplicate and then says there are 4 images in the set instead of 3. Does this make sense to anyone. How can I pull this same gallery up without duplicating the images or having the same project show up twice when you click on the gallery tab. View actual site in progress at: http://www.reneeclements.com/newWebs...sign/index.php Any insight would be greatly appreciated! Thanks! Reply With Quote The follow code DOES WORK, however not as I want it TO. I have a domain FRAMED / Redirect to a free blogging site. at the BLOGGING site I have to following code in the header to redirect to my domain name. WHAT IS HAPPENING IS AS YOU CAN GUEST IT is going into a loop. WHAT I am trying to do is get the LINK juice SERP to the domain name. SO the java code is right but I want it to quit ONCE after the redirect / forward. as the site is in FRAME once directed to the domain name it STICKS....on the domain name. <script language='javascript'> document.location='http://www.GOOGLE.COM/'; </script> I am new VERY new to javascript I have to create a mock up page with a popup that reopens every time you close it. Can someone explain to me how to do this?
Hello Everybody I have recently been tasked with a unique task and for the life of me I can not work out how to do it. Using this website as an example: http://www.coastalcontacts.com/cFaq.html You can see that the FAQ questions open and close as you click on them, leaving the page looking clean for the most part. Now I am writing up a landing page that will be doing something similar, however I would like the page to scroll down as each new question is opened up. Meaning I click on one of the faq questions closer to the bottom of the page and then it scrolls down to show all the new content. This does not need to happen for questions that do not go to the bottom of the page and are fully visible. Any and all ideas would be much appreciated Thank you Hello, I had a php page, which contains links when I click on a link it will issue a new page, I want to make the main page to be refreshed once the new page being closed. Any suggestions? thanks I am very new to Javascript and I have been able to get the menu to close and open, but I can't figure out how to start it up automatically closed at first. I've tried setting ids and values, but nothing seems to work! Please help me out! Code: <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Lab 5_3</title>
<script type="text/javascript">
function collapseItem(whichitem)
{
if (document.getElementById(whichitem).style.display == "none")
{
document.getElementById(whichitem).style.display = "block";
}
else
{
document.getElementById(whichitem).style.display = "none";
}
}
</script>
</head>
<body>
<p><a href="#" onClick="collapseItem('category1')">Menu 1</a></p>
<div id="category1">
<ul>
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
</body>
</html>
The bit of code in bold in the code below is giving me this error in IE: Error: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB) Timestamp: Tue, 16 Mar 2010 15:07:11 UTC Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code: 0 URI: http://www.mateinastate.co.uk/users/mateinastate Code: Code: if(document.getElementById('msn1').innerHTML=="")
{
document.getElementById('msn1').style.display='none';
}
if(document.getElementById('yahoo1').innerHTML=="")
{
document.getElementById('yahoo1').style.display='none';
}
if(document.getElementById('skype1').innerHTML=="")
{
document.getElementById('skype1').style.display='none';
}
if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">')
{
document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">')
{
document.getElementById('facebook1').style.display='none';
} else
{
document.getElementById('fbook-add').innerHTML='Facebook Profile';
}
What it's saying isn't actually true (I don't think)... this is how the section is laid out: Code: <div id="submenu1" class="anylinkcss"> <ul> <li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li> <li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li> <li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li> <li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li> <li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li> <li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li> </ul> </div> <script type="text/javascript" src="/html_1/js/contact-information.js"></script> Does anyone know why this might error in just IE? For a parent window opened a child window, how can the parnet window be notified when the child window is closed or terminated? Thank you. I guess this case applies to both popup windows opened by window.open() and by showModalWindow(). I have two buttons in popup window, "Cancel" and "Save". If the user clicks either button, there is a "process" at parent window before close() at popup being called. The problem now is, if the user click the "X" sign at top right corner of that popup window, how to trigger the "process"? I think I can do nothing in popup window since the closure is unexpected programmatically. Can I put some kind of listener in parent window to detect if popup is closed? Why isnt this working? Code: function display_form(obj) {
var button_name = obj.id.split("dialog_");
var t = document.getElementById(button_name[1] + '_form').style.visibility = 'visible';
alert(t);
}
IE is saying: Code: id is 'null' or not an object I'm trying to set an if statement so if one element is set to display:none, another element(s) sets margin-left to a certain number of pixels. Sort of like this (however, it's not working): Code: <script>
if (document.getElementById('#why-choose-content').style.display = 'none') {
document.getElementById('#always-content').style.margin-left = '335px';
}
</script>
Here is the site in question: http://bit.ly/8XfM0Q You can get a better idea of what I mean by clicking the 'plus' icons for the three colored tabs above the main content. Or if anybody has a more elegant way to get the divs to toggle under their respective headers, I'd love to hear. Thank you. All, If a user is going to my site with IE7 or less I call the following JS file. Code: // JavaScript Document
var ie6_warning=navigator.userAgent.indexOf('MSIE 6')
if (ie6_warning > 0)
{
document.write("<div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative; z-index:5000'> <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display=\"none\"; return false;'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div> <div style='width: 740px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'> <div style='width: 75px; float: left;'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-warning.jpg' alt='Warning!'/></div> <div style='width: 275px; float: left; font-family: Arial, sans-serif; color:#000'> <div style='font-size: 14px; font-weight: bold; margin-top: 12px; color:#000'>You are using an outdated browser</div> <div style='font-size: 12px; margin-top: 6px; line-height: 12px; color:#000'>For a better experience using this site, please upgrade to a modern web browser.</div> </div><div style='width: 75px; float: left;'><a href='http://www.firefox.com' rel="nofollow" target='_blank'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div><div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' rel="nofollow" target='_blank'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div> <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' rel="nofollow" target='_blank'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div> <div style='float: left; width: 73px;'><a href='http://www.google.com/chrome' rel="nofollow" target='_blank'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div><div style='float: left;'><a href='http://www.opera.com/' rel="nofollow" target='_blank'><img src='http://info.template-help.com/files/ie6_warning/ie6nomore-opera.jpg' style='border: none;' alt='Opera'/></a></div> </div></div>" );}
Right now it only goes 75pixels. How can I make it so that it spans the whole screen of the users computer? Thanks in advance! Hi There, I am attempting to do a site which is of a similar format to a TV listings website. Each day's schedule will be on a different HTM page (contained within an iFrame), and I would like it to display the current day's schedule on the appropriate day. I have searched the forum, but can't find anything exactly like this (maybe I'm searching for the wrong thing), so any answers greatly appreciated. Thanks, Roz I would like to display the elements in my array but it is NOT working. Here's my code: Code: <HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<script type="text/javascript">
function addtext() {
var openURL=new Array("http://google.com","http://yahoo.com","http://www.msn.com","http://www.bing.com");
document.writeln('<table>');
for (i=0;i<=openURL.length-1;i++){
document.writeln('<tr><td>openURL[i]</td></tr>');
}
document.writeln('</table>');
}
</script>
</HEAD>
<body onload="addtext()">
</BODY>
</HTML>
Here's the ouput: Code: openURL[i] openURL[i] openURL[i] openURL[i] It should display: Code: http://google.com http://yahoo.com http://msn.com http://bing.com Any comments or suggestions are greatly apprecitated. thanks Hi, I'm just the custom scrollbar javascript 'Flexcroll' to customise div scrollbars on my website. However the section of my website I'm using this on has 'tabbed divs'. Ie. I'm hiding some div's using 'display:none;' then using javascript to change their state to 'display:block;' It seems if the div im attaching the 'Flexcroll' scrollbar to is initially 'display:none' then this scrollbar doesn't work when its shown on the page. Has anyone come across this issue before, and if so what was your solution? Any help, much appreciated! Thanks Curt hey all, Am trying to display the div tag and its content by clicking it. the code below displays the whole source code when cliked on the div with id = softros. I want to make this script to display the div in view source format of the browser when clicked on any div. Thanks in advance, looking forward for your ideas Regards, Bala <html> <head> <script> function viewSource() { window.open('view-source:'+location.href); } </script> </head> <body> <div id="softros" onClick="viewSource();" style="border:1px red solid;"> <img src="images/rain_small.jpg" alt="rain_small" title="rain_small" /> </div> </body> </html> 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] |
|||||||