Need help in javascript and modal window

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 423,729 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,300 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 2483 | Replies: 3

•

Join Date: Mar 2006

Posts: 36

Reputation: sree22_happy is an unknown quantity at this point

Rep Power: 3

Solved Threads: 0

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

Location: New York state

Posts: 465

Reputation: ShawnCplus will become famous soon enough

Rep Power: 5

Solved Threads: 72

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 z+*

•

Join Date: Mar 2006

Posts: 36

Reputation: sree22_happy is an unknown quantity at this point

Rep Power: 3

Solved Threads: 0

sree22_happy sree22_happy is offline

Offline

Light Poster

Re: Need help in javascript and modal window

Apr 7th, 2008

Help with Code Tags

(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: 36

Reputation: sree22_happy is an unknown quantity at this point

Rep Power: 3

Solved Threads: 0

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