JavaScript - Window.showmodaldialog() Opens Up New Modaldialog Instead Of Using Existing Dialog

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

I 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

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">&nbsp;</span>
</body>
<html>

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,

Is there any way (any api) to display the confirm dialog box with yes/no buttons instead of ok/cancel in javascript.

Can any one please let me know.

Thanks in advance.

Hey Scripters,

I need to complete a task for a friend and I am stuck at this part. I am new with Javascript but I'm his only friend that knows a bit of Javascript.

So for this problematic part of my task, I need to use tables and dialog boxes.

First of all I need to define an array of 3 elements. Each element is associated with a different first name.

Then I shall realize a first function to add a name in the table. The function takes as parameter the table previously created and return it containing an additional element whose value is the name that the visitor wants to add. I must use the dialog box prompt so that the user can specify the name he wishes to add in the table.

I shall also perform a second function which will display the name that is included in the different array elements. This function will also take the table in parameters and proceed with setting the display name with a dialog box alert type that contains all of the name separated by ";".


Help is very much appreciated.

Please don't post links, I need explanations, so that I can understand next time I encounter this situation.

I have created a button with a window.confirm() method but when I click on it in firefox the dialog box does not appear. It does however appear in all the other browsers

Hello,

I have some code to open 1 dialog box. Could someone please help me manipulate this code to open multiple boxes with different contents. I would like to do this with out duplicating the existing code, maybe setting a variable. The least amount of code the better.

Thanks in advance.

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">
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
</head><body>
<div id="dialog" title="Example dialog">
  <p>Some text that you want to display to the user.</p>
</div>
<script type="text/javascript">
  $(document).ready(function() {
   
    $("#dialog").dialog({
      bgiframe: true, autoOpen: false, height: 100, modal: true
    });
  });
</script>
<a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Click here to see the popup</a>
</body>
</html>

http://tinyurl.com/bw2y3sr
This is my site and I want to create a Yes and No dialogue box when user closes a browser so this popup confirm dialogue should appear. Can anyone help me?

I have a ZIP file in the server. I want create a create a save dialog to save the zip file in local machine.


The below code works perfectly fine for firefox but not on IE. apparently I want the code to work in IE. this is 4th JS forum I am posting my question......any help is greatly appreciated.

<html>
<head></head>
<script language='javascript'>
function JBTRunZip( ){

location.href="IMAN_IMAGE_FILES.zip";

}
function download(locate){
window.open(locate)
}
</script>
<body>
<button onclick="JBTRunZip()">generateZip</Button>
<td><input type ="Button" value ="Scarica" onclick="download('Test.zip');"></td>
</body>
</html>

Hello,

I have a dialog box and in there I have a button that says New Service. When a user clicks on New Service, another dialog is shown where they the put the name of the service and after they click Create, I want that dialog box and the first one close as well. Here is my code, I can't figure it out.

I want the #create-userDialog box to close after the user clicks on Create in #new-serviceDialog.

<script>
$(function() {

$( "#dialog:ui-dialog" ).dialog( "destroy" );

$( "#create-userDialog" ).dialog({
autoOpen: false,
width: 600,
modal: true,
buttons: {
"OPEN": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );


},
CLOSE: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});

$( "#create-user" )
.button()
.click(function() {
$( "#create-userDialog" ).dialog( "open" );
});

$( "#new-serviceDialog" ).dialog({
autoOpen: false,
width: 400,
modal: true,
buttons: {
"Create": function() {
var bValid = true;
onclick = $( this ).dialog( "close" );
allFields.removeClass( "ui-state-error" );

},
Close: function() {
$( this ).dialog( "close" );

}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}

});

$( "#new-service" )
.button()
.click(function() {
$( "#new-serviceDialog" ).dialog( "open" );
});

});
</script>

I have searched this, I promise. But everything I've tried either does nothing or just opens a new window.

All I want to be able to do is to have a button that when the user clicks on it, it will open a "save as" dialog box so they can save a file (a separate file, not the html one that they are looking at) from my server. Is this really not possible using javascript, or am I just completely confused again?

Hi,
i have an popup which is an aspx page and when i click on browser close button..., the system should check if there is any unsaved data in the form or not. If there is any unsaved data then the message should be displayed (Do you want to leave..?) with OK and Cancel button...
On click of the OK button, the data should not be saved and the user should be returned parent form ie popup should be closed and return to the parent form.On click of the cancel button, the control should return to the Pop.

I had tried the below code...

window.onbeforeunload = close;
function close() {
var result=confirm("Do you really want to close this window");
if (result) {
return true;
}
else {
location.href = document.URL;

}
}
The above code is not working ie the popup is getting closed even on click of closse button....
and when clicked on OK it is dispalying another msgbox with leave this page and Stay on this page buttons...

Please help me regarding the same...