|
JavaScript - Close One Div When Another Opens
I have a page with categories of images. When clicked, each image on the left opens a div with it's own gallery of thumbnails.
http://myspringslandscaping.com/portfolio.html Right now, to close a div, the category image has to be clicked a second time. How can I set it so that when one div opens, the other closes automatically? The client wants only one category displayed at a time. Any help would be appreciated. Thanks! Marita Similar TutorialsI can't seem to figure out what I am doing wrong. When you click the photo the script opens and then closes and never shows the slide show. Test site : http://www.royalraves.com/test/html/pets.html Blackbox.css Code: #lightbox{
position: absolute;
top: 0px;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
}
#lightbox a img{ border: none; }
#outerImageContainer{
position: relative;
background-color: #f7f6f1;
width: 250px;
height: 250px;
margin: 0 auto;
border: 1px #CCC solid;
border-bottom:0px;
}
#imageContainer{
padding: 10px;
}
#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 0px;
width: 0px;
z-index: 0;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }
#prevLink2, #nextLink2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000;
font-weight:bold;
cursor:pointer;
}
#imageDataContainer{
font: 14px Arial, Helvetica, sans-serif;
background-color: #f7f6f1;
height: 35px;
border:1px #ccc solid;
border-top:0px;
margin:auto;
}
#imageData{
padding:0px 10px 10px 10px;
}
#imageData #imageDetails{ width: 50%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; font-size:11px; color:#666; max-height:20px; }
#imageData #numberDisplay{ display: block; clear: left; font-weight: normal; font-size:14px; color:#333; padding-bottom: 5px; }
#imageData #slideshowLink{ width: 55px; float: right; padding:5px 0px 0 0px;}
#imageData #bottomNavClose{ width: 55px; float: right; padding:5px 0px 0 0px; }
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html>body .clearfix {
display: inline;
width: 100%;
}
* html .clearfix {
/* Hides from IE-mac \*/
height: 1%;
/* End hide from IE-mac */
}
In Head: Code: <!--- JS Code for album ---> <link rel="stylesheet" href="backbox.css" type="text/css" /> <script type="text/javascript" src="js/prototype.compressed.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="js/dhtmlHistory.js"></script> <script type="text/javascript" src="js/customsignsheader.js"></script> Code: For the album:
<!--- Album Code for Pets --->
<div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()">
<a href="images/pets/7.jpg" rel="lightbox[slide]" caption="Benjamin">
<img src="images/pets/7.jpg" alt="Benjamin" width="250" height="180" border="0" /></a>
</div>
<a href="images/pets/1.jpg" rel="lightbox[slide]" caption="Benjamin"></a>
<a href="images/pets/2.jpg" rel="lightbox[slide]" caption="Cat TV"></a>
<a href="images/pets/3.jpg" rel="lightbox[slide]" caption="Hamie"></a>
<a href="images/pets/4.jpg" rel="lightbox[slide]" caption="Sun Spot"></a>
<a href="images/pets/5.jpg" rel="lightbox[slide]" caption="Kita"></a>
<a href="images/pets/6.jpg" rel="lightbox[slide]" caption="Paws to you"></a>
<a href="images/pets/7.jpg" rel="lightbox[slide]" caption="Sun Spot"></a>
<a href="images/pets/8.jpg" rel="lightbox[slide]" caption="Yard Work"></a>
<a href="images/pets/9.jpg" rel="lightbox[slide]" caption="Yes"></a>
<a href="images/pets/10.jpg" rel="lightbox[slide]" caption="Best of Buds"></a>
</center>
</div>
<!--- End of Album Code--->
Hi, I'm doing something wrong, I want my script to execute when the browser window opens, can someone please help me? Code: <p><iframe id="myFrame" style="display: none;" width="500" height="300"></iframe>
<script type="text/javascript">// <![CDATA[
window.onload=openpdf();
type="text/javascript">// <![CDATA[
function openPdf()
{
var omyFrame = document.getElementById("myFrame");
omyFrame.style.display="block";
omyFrame.src = "myFile.pdf";
}
// ]]></script>
Hi Friends, I am facing one problem that screw me left and right. Please share me if anyone of you faced this problem and solved already. I am using the below code to assign the javascript function on select on radio button. This may vary based on radio button selection. For some radio button selection the button will be disabled. if(yes) { document.getElementById("Name").href = "javaScript:functionA()"; document.getElementById("Name").onclick = "javaScript:functionA()"; }else { document.getElementById("Name").href = "#"; } This is the code i am using to activate the button or disable the button. For some causes i am getting "javaScript:functionA()" in the address bar instead of calling that java script method. So my new window is not showing me the correct result. Please some one advise me how to solve this problem. Thanks in advance. Regards, Jeva For my Javascript class, we are to take a code from the book and add on to it. In this code, I decided to add custom markers and info windows for each location. I got the info windows to work but they are the same for each marker. How can I fix this? Here is what I have: Code: <script>
function init() {
var myLatLng = new google.maps.LatLng(36.795209, -3.339844);
var myOptions = {
zoom: 2,
center: myLatLng
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
//This is Location 1
var image = 'image1.jpg';
var canyon= new google.maps.Marker({
position: new google.maps.LatLng(35.9766,-113.7717),
map: map,
title:"Grand Canyon, USA"});
var infoWindow = new google.maps.InfoWindow({
content: "Grand Canyon, USA"});
google.maps.event.addListener(canyon, 'click', function(){
infoWindow.open(map, canyon); });
//This is Location 2
var image = 'image2.jpg';
var paricutin= new google.maps.Marker({
position: new google.maps.LatLng(19.5948,-102.4331),
map: map,
title:"Paricutin, Mexico"});
var infoWindow = new google.maps.InfoWindow({
content: "Paricutin, Mexico"});
google.maps.event.addListener(paricutin, 'click', function(){
infoWindow.open(map, paricutin); });
//This is Location 3
var image = 'image3.jpg';
var victoria= new google.maps.Marker({
position: new google.maps.LatLng(-17.928,25.826),
map: map,
title:"Victoria Falls, Zimbabwe"});
var infoWindow = new google.maps.InfoWindow({
content: "Victoria Falls, Zimbabwe"});
google.maps.event.addListener(victoria, 'click', function(){
infoWindow.open(map, victoria); });
//This is Location 4
var image = 'image4.jpg';
var reef= new google.maps.Marker({
position: new google.maps.LatLng(-17.98,146.76),
map: map,
title:"Great Barrier Reef, Austrailia"});
var infoWindow = new google.maps.InfoWindow({
content: "Great Barrier Reef, Austrailia"});
google.maps.event.addListener(reef, 'click', function(){
infoWindow.open(map, reef); });
//This is Location 5
var image = 'image5.jpg';
var harbor= new google.maps.Marker({
position: new google.maps.LatLng(-22.8424,-43.1502),
map: map,
title:"Harbor Rio De Janerio, Brazil"});
var infoWindow = new google.maps.InfoWindow({
content: "Harbor Rio De Janerio, Brazil"});
google.maps.event.addListener(harbor, 'click', function(){
infoWindow.open(map, harbor); });
//This is Location 6
var image = 'image6.jpg';
var everest= new google.maps.Marker({
position: new google.maps.LatLng(27.98783,86.92476),
map: map,
title:"Mount Everest Peak, Nepal"});
var infoWindow = new google.maps.InfoWindow({
content: "Mount Everest Peak, Nepal"});
google.maps.event.addListener(everest, 'click', function(){
infoWindow.open(map, everest); });
}
google.maps.event.addDomListener(window, 'load', init);
</script>
Hey everyone. Been racking my brain all day trying to figure out how to duplicate this code with the limited javascript knowledge I have been trying to learn. This code is a Dropdown menu of Yes or No, than a Select button that Opens up a Text Input directly below the dropdown. So far, It works great. My problem is I need at least two of these on the same page and I do not know how to go about it. I have tried changing values to accommodate adding another on the same form, but than both stop working. Can someone Please HELP! Thank you in advance. Code: <html>
<head>
<SCRIPT language="javascript">
function add(type) {
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", type);
element.setAttribute("value", type);
element.setAttribute("name", type);
element.setAttribute("id", type);
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
}
</SCRIPT>
</head>
<body>
<label>
<SELECT name="element">
<OPTION value="text" name="refer_yes" id="refer_yes">Yes</OPTION>
<OPTION value="text" name="refer_no" id="refer_no">No</OPTION>
</SELECT>
<INPUT type="button" value="Select" onclick="add(document.forms[0].element.value='')"/>
</label>
<span id="fooBar"> </span>
</body>
<html>
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?
Hello I am trying to create a form which when the submit button is selected will open a new window with 1 of 4 URLs based on the the combination of data in 2 select boxes. For example: if select box 1 = a and select box 2 = a then open new window with URL 1 if select box 1 = a and select box 2 = b then open new window with URL 2 if select box 1 = b and select box 2 = a then open new window with URL 3 if select box 1 = b and select box 2 = b then open new window with URL 4 Any help would be greatly appreciated. Thanks Daniel Hi! I'm new to this, so please bare with me. My terminology may not be up to par. Here's the deal: - I have a button on my Flash site that opens an HTML page in a popup window. In Flash, I open the new window using Actiosnscript 2.0: Code: on (release) {
getURL("example1.html", "_blank");
}
- Within the popup window are links to other HTML pages. They all open in the same window. I've been using the following to create the links in Dreamweaver: Code: onClick="MM_goToURL('parent','example2.html')"
- On each page, I have a "Return to Main Menu" button that should close the popup window. To do this, I have been using: Code: onClick="window.close()" - The problem is that it works differently in each browser, and I can't even get it to consistently close the window in most browsers: Internet Explorer = popup message appears, asking "Are you sure you want to close this window?" or something similar; window closes after clicking "Yes." Safari = Only closes if I'm on the original HTML page. If I click on any of the other links (note that these all open in the same window), those pages' "Return to Main Menu" buttons cease to work. However, if I keep clicking "Back" until I get to the original page, it closes. Opera = Button actually works for each page. Firefox & Chrome = Does not close the window at all. I looked into it and saw that others have used a window.opener to solve similar issues. But, since my popup window is opened using Flash/AS2, I need to find a way around it. I've tried preceding "window.close()" with "window.opener=null" (i.e. - onClick="window.opener=null; window.close()"), but I don't think I'm doing it right because it still doesn't work. I've also seen others use codes that involve functions and variables, but it is beyond my current coding knowledge to implement this. Like I said, I'm sort of new at this. Any advice would be greatly appreciated. Thank you. - PW ok, so i got some help on here to modify some java that resides in a server-side program that is limited in scope of modification, but i was able to find the code that i need to modify to perform the behavior i need. the code below works great at making sure the user entry data is formatted correctly, but fails on 2 critical points: 1) it allows a blank entry (needs to give similar error message as when formatted incorrectly - see code) 2) it allows any formatting if a combination of alpha and numeric characters are used (needs to give error message if ANY alpha characters are used). THANKS so much in advance. Code: if( ! Form1.elements['EIF2'].disabled )
var n=Form1.elements['EIF2'].value.match(/\d/g).join('');
Form1.elements['EIF2'].value=
[n.substring(0,4),n.substring(4,9),n.substring(9)].join('-');
{
var re = /^\d{4}\-?\d{5}\-?\d{6}$/
if ( ! re.test( Form1.elements['EIF2'].value ) )
{
alert( 'Lawson # must be 15 digits\r(Example: 1234-12345-123456)' );
return false;
}
}
how to close a tab in html or javascript
I am trying to execute a simple window.close function to be used in IE8 and IE9, and window.close() doesn't seem to be working. Are there any known fixes?
this is quite embarrasing as i've done it before, but oh well... trying to close a window that is opened with a built-in dreamweaver function called MM_openBrWindow(). trying to use this code: PHP Code: if ($OutsideVisitors == "false") { echo '<center><strong><em><font size="4">THERE HAVE BEEN NO VISITORS TO THE WEBSITE TODAY... </font></em></strong><br><br><input name="closeme" type="button" id="closeme" value="Close Window" onclick="Window.Close()"; /></center>'; } i have also tried: PHP Code: onclick=javascript:Window.Close() it's just not behaving for me. any hints anyone? thanks a bunch! (the BrWindow() function in DW does open a popup window, so I think the js close() should work. if i remember right, a popup window is a prereq for that function to even work...) I have this script to close a div when I click outside of it. It works in Firefox but in IE7 i get an error: 'divid' is undefined. mydiv is the div I want to close and clickclick is the link that makes the div appear. Code: <script type="text/javascript">
function monitorClick(e){
var evt = (e)?e:event;
var theElem = (evt.srcElement)?evt.srcElement:evt.target;
while(theElem!=null){
if(theElem.id == "mydiv" || theElem.id == "clickclick" && document.getElementById(divid).style.display == 'none') {
document.getElementById('mydiv').style.display = 'block';
return true;
}
theElem = theElem.offsetParent;
}
document.getElementById('mydiv').style.display = 'none';
return true;
}
document.onclick = monitorClick;
</script>
What should I change to make it work in IE7? Within my Flex application I write stuff to the browser via a javascript document write. Is there a command to send to indicate I want to close that stream? When I send the command the rotating indicator keeps running indicating the browser is still expecting some stuff. If I click the stop button on the browser it stops spinning and the stuff I sent (an xml stream) becomes available. As this is an automated process, there is no person to hit the stop button. 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? Have been trying to make a button to close a web page but every time i try to get it validated "strict" it fails. I have used the following code. Code: <form action=""> <input type="button" value="Close Window" onclick="window.close()"> </form> Would really appreciate any help. Thanks Hi! I have a problem with the function close(); The window does open but then it immediately closes by itself. I didn't even get to see the content and of course I didn't even click on the button "close the window!" I want to be able to see the content of the page and when I click on the button, it will close the window. Thank you in advance for your help! Code: var window;
function newWindow(){
window=window.open("", "Results", "width=400, height=250");
window.document.write("<body><table>");
window.document.write("<h1 style='border-bottom-style: dotted; border-bottom-width: 1px;font: italic 16pt Times New Roman, sans-serif; color: navy;'>Survey's Results</h1>");
for(var i=0; i<tabVotes.length; i++){
window.document.writeln("<tr>");
window.document.writeln("<td style='text-align: center'>" + tabPeople[i] + "</td>");
window.document.writeln("<td style='text-align: center'>" + tabVotes[i] + " votes </td>");
window.document.writeln("</tr>");
}
window.document.writeln("</table>");
window.document.writeln("<input name='Close' type='button' value='Close the window' />");
window.document.getElementById('Close').onclick = window.close();
window.document.writeln("<br /><br />Thank you!");
window.document.writeln("</body>");
}
Can someone tell me how to make a close button for this? The close button I currently have here makes the IMAGE2 disappear but I cannot see IMAGE1 until the time runs out on the setTmeout. I want to be able to click the closeX and close out the whole script leaving IMAGE1 showing. Here is what I have: Code: <table border="0" width="650" id="table1" cellspacing="0" cellpadding="0" bgcolor="#000000" height="350">
<tr>
<td align="center">
<script type="text/javascript">
window.onload = function () {
setTimeout(function () {
var div = document.getElementById('hideOverlay');
div.innerHTML = 'IMAGE1 GOES HERE'; }, 6000);}
</script>
<div id="hideOverlay">
<table border="0" width="650" id="table1" cellspacing="0" cellpadding="0" height="350">
<tr>
<td align="center" width="650" height="350"><a style="text-decoration: none" href="javascript:void(0)" onclick="var lyr =document.getElementById('hideOverlay'); lyr.innerHTML='';"/><font color="#666666" size="2">Close [x]</font></a>IMAGE2 GOES HERE</td>
</tr>
</table></div>
</td>
</tr>
</table>
</div>
Can someone help me to modify this JS to close if user is no longer hovering over child link after 5 seconds? Code: $(document).ready(function () {
$('#menuHolder ul li a').mouseover(function (event) {
if (this == event.target) {
$(this).parent().toggleClass('clicked');
if ($(this).parent().attr('class').indexOf('clicked') != -1) {
$(this).siblings('ul').animate({"top": "35px"}, {queue:false,duration:(500)}, "swing");
}
else {
$(this).siblings('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
}
$(this).parent().siblings().removeClass('clicked').find('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
}
})
$('#menuHolder ul li:not(:has(ul)) a').mouseout(function (event) {
if (this == event.target) {
$(this).parent().toggleClass('clicked');
$(this).parent().siblings().removeClass('clicked').find('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
}
});
});
</script>
Hello all, i need a help that i have a submit form a iframe. Normally the code process is : Code: <a href="submit_news7c98.html?iframe=true&width=420&height=560" name="submit_news" class='ie6fix' id='submit_news' rel="prettyPhoto">Submit Query</a> Now iframe load and form process to form_process.php and then when i click submit the form process to form_process2.php now i will able to close the iframe after submit. I have tried simple javascript solution like body onload function timer function but they only work with if the open the submit_news7c98.html page direct it is not working when i am opening it as iframe from my site. so anybody can help me on this ? |
|||||||