AJAX

Need help in javascript and modal window

Please support our JavaScript / DHTML / AJAX advertiser: 50% off 6 Months Dedicated Server Hosting from 1&1!

•

Join Date: Mar 2006

Posts: 39

Reputation: sree22_happy is an unknown quantity at this point

Solved Threads: 1

sree22_happy sree22_happy is offline

Offline

Light Poster

Need help in javascript and modal window

Apr 4th, 2008

hi friends,

I need your help............. I have a div content in my home page.while clicking on that div i need a modal window... i have done that using jquery. In that modal window i need to call accordion java script for sliding menu.... and again i need to use a tab menu with fading effect.. i need all these in the same modal window..... Does any one know how to incorporate all these things in to one page..............

Please help me

•

Join Date: Apr 2005

Posts: 1,538

Reputation: ShawnCplus is a glorious beacon of light

Solved Threads: 256

ShawnCplus ShawnCplus is offline

Offline

Code Monkey

Re: Need help in javascript and modal window

Apr 4th, 2008

Well the only thing you need for a modal window is two divs, and outer div to make the page modal and an inner div to hold the modal content. For example

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<html>
<head>
<title>Blah</title>
<style type='text/css'>
   .modal
   {
      z-index:998;
      height:100%;width:100%;
      position:absolute;
      left:0px;top:0px; 
   }
   .modalContent{  z-index:999; }
</style>
</head>
<body>
   <div id='hello'>
       <a href='#'>You can't click on me!</a>
 
        <div id='modal' class='modal'>
            <div id='modalContent' class='modalContent'>
               <a href='#'>You can click on me though!</a>
            </div> <!-- end modal content div -->
        </div> <!-- end modal div -->
    </div><!-- end hello div -->
</body>
</html>
<html>
<head>
<title>Blah</title>
<style type='text/css'>
   .modal
   {
      z-index:998;
      height:100%;width:100%;
      position:absolute;
      left:0px;top:0px; 
   }
   .modalContent{  z-index:999; }
</style>
</head>
<body>
   <div id='hello'>
       <a href='#'>You can't click on me!</a>
   
        <div id='modal' class='modal'>
            <div id='modalContent' class='modalContent'>
               <a href='#'>You can click on me though!</a>
            </div> <!-- end modal content div -->
        </div> <!-- end modal div -->
    </div><!-- end hello div -->
</body>
</html>

With that said, if you know how to do all those effects in a modeless div then you know how to do them in a modal div. Just place the content inside the inner modal div (modalContent)

Last edited by ShawnCplus; Apr 4th, 2008 at 6:28 pm.

GCS d- s+ a-->? C++(++++) UL+++ P+>+++ L+++ E--- W+++
N+ o K w++(---) O? !M- V PS+>++ PE+ Y+ PGP !t- 5? X- R tv+
b+>++ DI+ D G++>+++ e+ h+>++ r y+
PMs asking for help will not be answered, post on the forums. That's what they're there for.

•

Join Date: Mar 2006

Posts: 39

Reputation: sree22_happy is an unknown quantity at this point

Solved Threads: 1

sree22_happy sree22_happy is offline

Offline

Light Poster

Re: Need help in javascript and modal window

Apr 7th, 2008

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<html>
<head>
	<script type="text/javascript" src="modal.js"></script>
    <script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
    <script type="text/javascript" src="ddaccordion.js"></script>
    <script type="text/javascript">
        ddaccordion.init({
            headerclass: "expandable", //Shared CSS class name of headers group that are expandable
            contentclass: "categoryitems", //Shared CSS class name of contents group
            collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
            defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
            animatedefault: false, //Should contents open by default be animated into view?
            persiststate: true, //persist state of opened contents within browser session?
            toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
            togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
            animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
            oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
                //do nothing
            },
            onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed
                //do nothing
            }
        })
 
</script>
<style type="text/css">
 
.arrowlistmenu{
width: 180px; /*width of accordion menu*/
}
 
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}
 
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(titlebar-active.png);
}
 
.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
 
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
 
.arrowlistmenu ul li a{
color: #A70303;
background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
 
.arrowlistmenu ul li a:visited{
color: #A70303;
}
 
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}
 
</style>
	<link rel="stylesheet" href="modal.css" type="text/css" /> 
	<script language="javascript">
		function showModal()
		{
			var x = 'something to check';
			$('txt').innerHTML = x;
			sm('box',300,300);
		}
 
		function okSelected() 
		{
			var y = x;
			alert(y);
		}		
	</script>
</head>
<body>
	<div id="box" class="dialog">
		<div style="text-align:center">
			<span id="txt">Press OK to continue.</span><br>
			<button onclick="hm('box');okSelected()">OK</button>
		</div> 
        <div class="arrowlistmenu">
 
<h3 class="menuheader expandable">CSS Library</h3>
<ul class="categoryitems">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>
<div>
Regular contents here. Header does not expand or contact.
</div>
 
</div>
	</div> 
	<input type="text" size=250/><br/>
	<input type="button" onClick="showModal()" value="CLICK ME"></input>
</body>
</html>
<html>
<head>
	<script type="text/javascript" src="modal.js"></script>
    <script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
    <script type="text/javascript" src="ddaccordion.js"></script>
    <script type="text/javascript">
        ddaccordion.init({
            headerclass: "expandable", //Shared CSS class name of headers group that are expandable
            contentclass: "categoryitems", //Shared CSS class name of contents group
            collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
            defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
            animatedefault: false, //Should contents open by default be animated into view?
            persiststate: true, //persist state of opened contents within browser session?
            toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
            togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
            animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
            oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
                //do nothing
            },
            onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed
                //do nothing
            }
        })

</script>
<style type="text/css">

.arrowlistmenu{
width: 180px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(titlebar-active.png);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

</style>
	<link rel="stylesheet" href="modal.css" type="text/css" /> 
	<script language="javascript">
		function showModal()
		{
			var x = 'something to check';
			$('txt').innerHTML = x;
			sm('box',300,300);
		}
		
		function okSelected() 
		{
			var y = x;
			alert(y);
		}		
	</script>
</head>
<body>
	<div id="box" class="dialog">
		<div style="text-align:center">
			<span id="txt">Press OK to continue.</span><br>
			<button onclick="hm('box');okSelected()">OK</button>
		</div> 
        <div class="arrowlistmenu">

<h3 class="menuheader expandable">CSS Library</h3>
<ul class="categoryitems">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>
<div>
Regular contents here. Header does not expand or contact.
</div>

</div>
	</div> 
	<input type="text" size=250/><br/>
	<input type="button" onClick="showModal()" value="CLICK ME"></input>
</body>
</html>

•

Join Date: Mar 2006

Posts: 39

Reputation: sree22_happy is an unknown quantity at this point

Solved Threads: 1

sree22_happy sree22_happy is offline

Offline

Light Poster

Re: Need help in javascript and modal window

Apr 7th, 2008

In this code i am getting the modal window .. but when i put this accordion menu script its not working the modal window page.....I want a modal window in which i can put tab contents or sliding menus like accordion menu
Please help me