div problem - expand by content
09-18-08, 08:54 AM
New Member
Join Date: Sep 2008
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
div problem - expand by content
hello
I'm am trying to make a php page, the uneasy thing for me now is to make the main div expandable by the content. I tried a lot of things but not even one worked for me.
And the next problems is that when i put a footer, the footer is not going down after the menu and content, it goes up.
The content is loaded on the page automatic through ajax, and are running two javascripts, one for ajax and one for menu.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript" src="menu_produse/jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="menu_produse/ddaccordion.js"></script>
<script type="text/javascript">
ddaccordion.init({ //top level headers initialization
headerclass: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
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
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
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: ["prefix", "", ""], //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, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
ddaccordion.init({ //2nd level headers initialization
headerclass: "subexpandable", //Shared CSS class name of sub headers group that are expandable
contentclass: "subcategoryitems", //Shared CSS class name of sub contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["opensubheader", "closedsubheader"], //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, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
<script type="text/javascript">
/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>
<style type="text/css">
.hide {
display: none;
}
a:link
{
text-decoration: none;
color: white;
}
a:visited
{
color: white;
text-decoration: none;
}
a:hover
{
color: black;
text-decoration: none;
}
a:active
{
color: black;
text-decoration: none;
}
body
{
background-color: rgb(170,179,255);
}
#pagina
{
width: 1000px;
height: 1000px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
#pag
{
width: 1000px;
}
#menu_produse
{
background-color: rgb(170,179,255);
position: relative;
margin-top: 250px;
width: 250px;
height: auto;
}
.arrowlistmenu{
float: left;
background-color: rgb(100,158,204);
width: 250px; /*width of accordion menu*/
border: 1px solid rgb(4,51,79);
}
#arrowlistmenuhead{
height: 50px;
color: black;
font-size: 20px;
font-family: arial;
text-align: center;
}
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
width: 230px;
font: bold 14px Arial;
color: white;
text-align: center;
background: black url(menu_produse/titlebar.png) repeat-x center left;
margin-bottom: 5px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
margin-left: 5px;
margin-right: 5px;
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .menuheader a{ /*CSS class for menu headers in general (expanding or not!)*/
color: white;
text-decoration: none;
}
.arrowlistmenu .menuheader a:visited{ /*CSS class for menu headers in general (expanding or not!)*/
color: white;
text-decoration: none;
}
.arrowlistmenu .menuheader a:hover{ /*CSS class for menu headers in general (expanding or not!)*/
color: white;
text-decoration: none;
}
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(menu_produse/titlebar-active.png);
}
.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 5px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
text-align: center;
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li .opensubheader{ /*Open state CSS for sub menu header*/
background: lightblue !important;
}
.arrowlistmenu ul li .closedsubheader{ /*Closed state CSS for sub menu header*/
background: lightgreen !important;
}
.arrowlistmenu ul li a{
color: #000000;
background-color: rgb(100,158,204);
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: normal;
font-size: 90%;
}
.arrowlistmenu ul li a:visited{
color: #404040;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: white;
background-color: rgb(100,158,204);
}
.arrowlistmenu ul li a.subexpandable:hover{ /*hover state CSS for sub menu header*/
background: lightblue;
}
TABLE.MYTABLE
{
font-family:arial;
font-size:20pt;
background-color:rgb(100,158,204);
width:742px;
border-style:solid;
border-color:rgb(4,51,79);
border-width:1px;
}
TH.MYTABLE
{
font-size:14pt;
background-color:rgb(4,51,79);
color:white;
border-style:solid;
border-width:1px;
border-color:rgb(4,51,79);
text-align:center;
}
TR.MYTABLE
{
height:23;
}
#meniu_pagina
{
width: 740px;
height: auto;
margin-right: 0px;
margin-top: 0px;
position: relative;
float: right;
}
#navigation
{
width: 740px;
background-color: rgb(4,51,79);
height: 30px;
font: bold 23px arial;
text-align: center;
}
#content_panel
{
width: 738px;
position: relative;
min-height: 400px;
margin-top: 12px;
float: right;
border: 1px solid rgb(4,51,79);
background-color: rgb(100,158,204);
}
#content
{
width: 680px;
min-height: 340px;
margin-top: 30px;
margin-right: auto;
margin-left: 30px;
margin-bottom: 30px;
}
#container
{
position: relative;
float: right;
}
#footer
{
margin-top: 50px;
width: 1000px;
height: 50px;
background-color: rgb(4,51,79);
}
</style>
</head>
<body>
<div id="pagina">
<div id="menu_produse">
<div class="arrowlistmenu">
<div id="arrowlistmenuhead">
<br />
Produsele BIG DD
<br />
</div>
<h3 title="Extinde meniu" class="menuheader expandable">Showroom</h3>
<ul class="categoryitems">
<li><a href="javascript
see it in action
If anybody knows how to help me, many thanks...
03-17-09, 01:00 AM
New Member
Join Date: Mar 2009
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Reinit ddaccordion after ajax
hi
i m facing the same problem. i am using the ajax to replace the content of the html file. but after when the content is replaced, headers don't expand collapse.
03-24-09, 07:43 AM
Newbie Coder
Join Date: Jan 2009
Posts: 25
Thanks: 0
Thanked 0 Times in 0 Posts
IE problems trying to get a large amount of content to sit in a smaller div with overflow set to auto. In FF it works perfectly, but in IE the outer div ignores the width value I have set and instead expands to the width of the content.
My code:
Code:
<div id="calendarWrapper" style="width:800px;height:600px;overflow:scroll;">
<div style="width:4000px;height:1000px;overflow:auto;ba ckground-image:url(img/calendarBackground.gif);position:relative">
<div style="background-color:#FFFFCC;position:absolute;top:76px;left:150p x;width:1000px;height:74px;">Test</div>
<div style="background-color:#FFFFCC;position:absolute;top:151px;left:300 px;width:750px;height:74px;">Test</div>
<div style="background-color:#FFFFCC;position:absolute;top:1px;left:75px; width:100px;height:74px;">Test</div>
</div>
</div>
try this may be it will work for you.
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Thread Tools
Display Modes
Linear Mode
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
div problem - expand by content
Reinit ddaccordion after ajax
Linear Mode
