|
JavaScript - Dhtmlgoodies Show/hide Script With Two Classnames
Hi, I'm trying to use the code from DHTMLGoodies' show/hide script, from he
http://www.dhtmlgoodies.com/index.ht..._content_slide but I want to use it for two different classes in my HTML, as I have two sizes of header buttons (I have a taller button to cope with text that is too long to fit in one line, as it wraps around). I have created the CSS styles as given on the website, but I have made a second style, to display the taller button, but I would like to know how to make the javascript work with it. Currently I have: Code: /*********** DHTML_GOODIES SLIDING TEXT START ***********/
div#thincolumn .dhtmlgoodies_question, div#thincolumn .dhtmlgoodies_question_big {background: url(images/thincolblue.jpg) no-repeat top left;height: 32px;color:#FFFFFF;padding:8px 14px 0 14px;font:bold 1.1em Arial, sans-serif;overflow:hidden;cursor:pointer;}
div#thincolumn .dhtmlgoodies_question_big {background: url(images/thincolblue2.jpg) no-repeat top left;height:50px;}
div#thincolumn .dhtmlgoodies_answer{ /* Parent box of slide down content */
/* Start layout CSS */
width:150px;
/* End layout CSS */
visibility:hidden;
height:0px;
overflow:hidden;
position:relative;
}
div#thincolumn .dhtmlgoodies_answer_content, .dhtmlgoodies_answer_content_big { /* Content that is slided down */
padding:1px;
font-size:1em;
position:relative;
}
/*********** DHTML_GOODIES SLIDING TEXT END ***********/
(div#thincolumn is the column that I place the buttons in). I added a new style, .dhtmlgoodies_question_big, to style the taller buttons, but I don't know how to change the Javascript so that it works on these divs as well as the normal, dhtmlgoodies_question divs. Near the end of the Javascript it says: Code: if(divs[no].className=='dhtmlgoodies_question'){
Is it possible to put an "or" in there and have something like Code: if(divs[no].className=='dhtmlgoodies_question')or(divs[no].className=='dhtmlgoodies_question_big'){
Please forgive my ignorance, I am fine with CSS and HTML, but I have never used Javascript before, and searching for "Javascript" and "or" on Google obviously didn't produce the result I was looking for! I don't even know if it's possible to use "or" in Javascript. I have tried duplicated the entire Javascript like this: Code: <script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var dhtmlgoodies_slideSpeed = 60; // Higher value = faster
var dhtmlgoodies_timer = 10; // Lower value = faster
var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
function showHideContent(e,inputId)
{
if(dhtmlgoodies_slideInProgress)return;
dhtmlgoodies_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);
objectIdToSlideDown = false;
if(!answerDiv.style.display || answerDiv.style.display=='none'){
if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId){
objectIdToSlideDown = numericId;
slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
}else{
answerDiv.style.display='block';
answerDiv.style.visibility = 'visible';
slideContent(numericId,dhtmlgoodies_slideSpeed);
}
}else{
slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
dhtmlgoodies_activeId = false;
}
}
function slideContent(inputId,direction)
{
var obj =document.getElementById('dhtmlgoodies_a' + inputId);
var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height>contentObj.offsetHeight){
height = contentObj.offsetHeight;
rerunFunction = false;
}
if(height<=1){
height = 1;
rerunFunction = false;
}
obj.style.height = height + 'px';
var topPos = height - contentObj.offsetHeight;
if(topPos>0)topPos=0;
contentObj.style.top = topPos + 'px';
if(rerunFunction){
setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
}else{
if(height<=1){
obj.style.display='none';
if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);
}else{
dhtmlgoodies_slideInProgress = false;
}
}else{
dhtmlgoodies_activeId = inputId;
dhtmlgoodies_slideInProgress = false;
}
}
}
function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;no<divs.length;no++){
if(divs[no].className=='dhtmlgoodies_question'){
divs[no].onclick = showHideContent;
divs[no].id = 'dhtmlgoodies_q'+divCounter;
var answer = divs[no].nextSibling;
while(answer && answer.tagName!='DIV'){
answer = answer.nextSibling;
}
answer.id = 'dhtmlgoodies_a'+divCounter;
contentDiv = answer.getElementsByTagName('DIV')[0];
contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
contentDiv.className='dhtmlgoodies_answer_content';
contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
answer.style.display='none';
answer.style.height='1px';
divCounter++;
}
}
}
window.onload = initShowHideDivs;
</script>
<!-- END OF SLIDING TEXT JAVASCRIPT -->
and Code: <script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var dhtmlgoodies_slideSpeed = 60; // Higher value = faster
var dhtmlgoodies_timer = 10; // Lower value = faster
var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
function showHideContent(e,inputId)
{
if(dhtmlgoodies_slideInProgress)return;
dhtmlgoodies_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);
objectIdToSlideDown = false;
if(!answerDiv.style.display || answerDiv.style.display=='none'){
if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId){
objectIdToSlideDown = numericId;
slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
}else{
answerDiv.style.display='block';
answerDiv.style.visibility = 'visible';
slideContent(numericId,dhtmlgoodies_slideSpeed);
}
}else{
slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
dhtmlgoodies_activeId = false;
}
}
function slideContent(inputId,direction)
{
var obj =document.getElementById('dhtmlgoodies_a' + inputId);
var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height>contentObj.offsetHeight){
height = contentObj.offsetHeight;
rerunFunction = false;
}
if(height<=1){
height = 1;
rerunFunction = false;
}
obj.style.height = height + 'px';
var topPos = height - contentObj.offsetHeight;
if(topPos>0)topPos=0;
contentObj.style.top = topPos + 'px';
if(rerunFunction){
setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
}else{
if(height<=1){
obj.style.display='none';
if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);
}else{
dhtmlgoodies_slideInProgress = false;
}
}else{
dhtmlgoodies_activeId = inputId;
dhtmlgoodies_slideInProgress = false;
}
}
}
function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;no<divs.length;no++){
if(divs[no].className=='dhtmlgoodies_question_big'){
divs[no].onclick = showHideContent;
divs[no].id = 'dhtmlgoodies_q'+divCounter;
var answer = divs[no].nextSibling;
while(answer && answer.tagName!='DIV'){
answer = answer.nextSibling;
}
answer.id = 'dhtmlgoodies_a'+divCounter;
contentDiv = answer.getElementsByTagName('DIV')[0];
contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
contentDiv.className='dhtmlgoodies_answer_content_big';
contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
answer.style.display='none';
answer.style.height='1px';
divCounter++;
}
}
}
window.onload = initShowHideDivs;
</script>
<!-- END OF SLIDING TEXT JAVASCRIPT -->
but now it only works for the taller buttons (which the second piece of Javascript refer to). I think it might be possible to just use one instance of the original code, and some "or" operators, but I'm not sure. Any help would be very much appreciated. Similar TutorialsHey everyone. I have a simple hide/show script that is doing what I want, but I was wondering if there is an easier way around having to specify show and hide requirements "onclick" each time. Here is what I've got: Javascript: Code: <script type="text/javascript">
function show(boxid) {
document.getElementById(boxid).style.display="block";
}
function hide(boxid) {
document.getElementById(boxid).style.display="none";
}
</script>
HTML: Code: <body onload="hide('homePoster1'); hide('homePoster2'); hide('homePoster3'); hide('homePoster4'); hide('filmDesc1'); hide('filmDesc2'); hide('filmDesc3'); hide('filmDesc4'); ">
<div id="homePoster1"><img src="img/posters/babystory.gif" width="419" height="419" /></div>
<div id="homePoster2"><img src="img/posters/converse.gif" width="419" height="419" /></div>
<div id="homePoster3"><img src="img/posters/cookingchannel.jpg" width="419" height="419" /></div>
<div id="homePoster4"><img src="img/posters/culturesofresistance.jpg" width="419" height="419" /></div>
<div class="filmDescAll">
<h2>Film 1 title</h2>
<div id = "filmDesc1">Film 1 description</div>
<div class="more"><a href="#" onclick="show('filmDesc1'); hide('filmDesc2'); hide('filmDesc3'); hide('filmDesc4');
show('homePoster1'); hide('homePoster2'); hide('homePoster3'); hide('homePoster4');">+ more info</a></div>
</div>
<div class="filmDescAll">
<h2>Film 2 title</h2>
<div id="filmDesc2">Film 2 description</div>
<div class="more"><a href="#" onclick="show('filmDesc2'); hide('filmDesc1'); hide('filmDesc3'); hide('filmDesc4');
show('homePoster2'); hide('homePoster1'); hide('homePoster3'); hide('homePoster4');">+ more info</a></div>
</div>
<div class="filmDescAll">
<h2>Film 3 title</h2>
<div id="filmDesc3">Film 3 description</div>
<div class="more"><a href="#" onclick="show('filmDesc3'); hide('filmDesc1'); hide('filmDesc2'); hide('filmDesc4');
show('homePoster3'); hide('homePoster1'); hide('homePoster2'); hide('homePoster4');">+ more info</a></div>
</div>
<div class="filmDescAll">
<h2>Film 4 title</h2>
<div id="filmDesc4">Film 4 description</div>
<div class="more"><a href="#" onclick="show('filmDesc4'); hide('filmDesc1'); hide('filmDesc2'); hide('filmDesc3');
show('homePoster4'); hide('homePoster1'); hide('homePoster2'); hide('homePoster3');"class="more4">+ more info</a></div>
</div>
Hi, I am new to javascript so any help would be much appreciated. I found the following script online to show/hide a login div. <script language="JavaScript" type="text/javascript"> function login(showhide){ if(showhide == "show"){ document.getElementById('popupbox').style.visibility="visible"; }else if(showhide == "hide"){ document.getElementById('popupbox').style.visibility="hidden"; } } </script> It works really well but I have other div I would also like to show/hide. Is it possible to have a variable in the function that I could pass the name of the div to show/hide. I have a ul list that I am using for a navigation menu and I would like to be able to click on items in the list to show different div's. I assume this is possible, so could someone please give me an indication of how to do it as I have been trying for a few days now and no joy. Thanks, James Helloo Im new to javascript.. I need help badly... here are two tabless. 1. information of a friend. 2nd table i get when i click da image (ADD ANOTHER FRIEND) but, on validation and submission.. the second table is not showing upp... When i once click ADD FRIEND.. i want the table to show up on reload and validation.... Thanks Here is my code <? if (isset($_POST['submit'])) { if (!$frndname) { $frndname_error = 1; $problems=1; } if (!$frndcity) { $frndcity_error = 1; $problems=1; } ///doo db stuff insertion } ?> <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript"> function showTable() { var table = document.getElementById("myTable"); if (table) table.style.display = "block"; var div = document.getElementById("frndimg"); if(div) div.style.display = "none"; } </script> </head> <body> <form action="" method="POST" name="form1"> <?php if(!isset($_POST['submit']) or $problems) { ?> <table> <tr> <td colspan="2"> <table width="21%"> <tr> <td width="3%" align="left" valign="top"> </td> <td colspan="2"> <b class="referralheading"> YOUR FRIEND'S INFORMATION: </b> </td></tr> <tr> <td width="3%" align="left" valign="top"> </td> <td width="16%"><? if ($frndname_error) { echo ("<font color='#FF0000'>Name:</font>"); } else { echo ("Name:"); }?> <b><font color="#FF0000">*</font></b><br> <input type="text" name="frndname" id ="frndname" value="<?php echo $frndname; ?>" maxlength=45 size=25></td> <td width="81%" colspan="3">City: <b><font color="#FF0000">*</font></b><br><input type="text" id="frndcity" name="frndcity" value="<?php echo $frndcity; ?>" maxlength=45 size=25> </td> </tr> </table></td></tr> <tr> <td width="4%" align="left" valign="top"> </td> <td > <div style="float:left;cursorointer;"> <img src="images/referral_add_friend.jpg" width="190" height="28" onClick="showTable()" title="Click to add another friend" id="frndimg"> </div> </td></tr> <tr> <td colspan="2"> <table width="100%" id="myTable" style="display:none;"> <tr> <td width="4%" align="left" valign="top"> </td> <td colspan="2"> <b class="referralheading"> YOUR FRIEND'S INFORMATION: </b> </td></tr> <tr> <td width="4%" align="left" valign="top"> </td> <td width="53%"> NAme: <b><font color="#FF0000">*</font></b><br> <input type="text" name="frnd1name" id ="frnd1name" value="<?php echo $frnd1name; ?>" maxlength=45 size=25></td> <td width="47%" colspan="3">City: <b></b><br><input type="text" id="frnd1city" name="frnd1city" value="<?php echo $frnd1city; ?>" maxlength=45 size=25> </td> </tr> <tr> <td width="4%" align="left" valign="top"> </td> <td>Phone Number: <b></b><br> <input type="text" name="frnd1phone" id ="frnd1phone" value="<?php echo $frnd1phone; ?>" maxlength=45 size=25></td> <td colspan="3">Email: <br><input type="text" id="frnd1email" name="frnd1email" value="<?php echo $frnd1email; ?>" maxlength=45 size=25> </td> </tr> <tr><td> </td></tr> </table> </td></tr> <tr> <td><input type="image" src="images/submit_referral.jpg" height="30" width="173" border="0" alt="Submit Form" value="submit"></td></tr> <tr><td> </td><td align="center" class="referralheading"> Fields Marked With * Are Required</td></tr> </table> <? } ?> </form> </body> </html> I found this script on a tutorial site but it had no summary of browser compatibility or any other issues. I know absolutely nothing about javascript and, although it works fine when I test it, I would appreciate it very much if someone else would review this page and give me feedback. Code: <head>
<script type="text/javascript">
lastone='empty';
function showIt(lyr)
{
if (lastone!='empty') lastone.style.display='none';
lastone=document.getElementById(lyr);
lastone.style.display='block';
}
</script>
</head>
<body>
<!--links-->
<a href="JavaScript:;" onClick="showIt('divID1')" ">link1</a>
<a href="JavaScript:;" onClick="showIt('divID2')" ">link2</a>
<a href="JavaScript:;" onClick="showIt('divID3')" ">link3</a>
<a href="JavaScript:;" onClick="showIt('divID4')" ">link4</a>
<!--layers-->
<div id="divID1" style="display:none;">content1</div>
<div id="divID2" style="display:none;">.content2</div>
<div id="divID3" style="display:none;">..content3</div>
<div id="divID4" style="display:none;">...content4</div>
</body>
Here is a demo of it in action: http://www.mousegrey.com/layers.html Im pretty new to JS so Im sure this is not the best way to go about this but it'll do for now, any suggestions welcome I have a script to show and hide various divs based on a function & var. The problem im having is that when ANY of the variables ('hate', 'ok' and 'love') are passed all 3 different feedback forms ('FeedbackHate', 'FeedbackOk' and 'FeedbackLove') appear, not just the one I want. here is the JS: Code: function sitesurveyswitch(emotion) {
var e = emotion;
document.getElementById('site_survey_hate').style.backgroundPosition = '0px 0px';
document.getElementById('site_survey_ok').style.backgroundPosition = '0px 0px';
document.getElementById('site_survey_love').style.backgroundPosition = '0px 0px';
document.getElementById('FeedbackHate').style.display = 'none';
document.getElementById('FeedbackOk').style.display = 'none';
document.getElementById('FeedbackLove').style.display = 'none';
if (e == 'hate')
document.getElementById('site_survey_hate').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackHate').style.display = 'block';
if (e == 'ok')
document.getElementById('site_survey_ok').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackOk').style.display = 'block';
if (e == 'love')
document.getElementById('site_survey_love').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackLove').style.display = 'block';
}
and here is the code related to this function: Code: <div id="siteSurveyBox">
<span id="site_survey_hate" onclick="sitesurveyswitch('hate');return false;"></span>
<span id="site_survey_ok" onclick="sitesurveyswitch('ok');return false;"></span>
<span id="site_survey_love" onclick="sitesurveyswitch('love');return false;"></span>
</div>
<div id="FeedbackHate" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>
<div id="FeedbackOk" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>
<div id="FeedbackLove" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>
Hi all, Check this code: PHP Code: <a>text</a> <div id="pkg">pkg</div> <div id="table_pkg">table_pkg</div> I'd like to show table_pkg and hide pkg when I click on <a>text</a>. How can I do? Thank you very much I don't know a lot about Javascript... still learning.. I am trying to create a show/hide effect that displays an image based on the users text input. I have coded this before for a list/menu and it works fine. With this particular project there are too many selections to choose from to put in a list/menu. I am trying to use if and else if statements to make this work. With the code the way it is only the first function on the list works. I tried just using repeating if statements and only the last function on the list works. Here is the code: Code:
<script type="text/javascript" >
function showSample() {
if (document.getElementById('input').value='SW001') {
document.getElementById('SW001').style.display='block';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW002') {
document.getElementById('SW001').style.display='none';
document.getElementById('SW002').style.display='block';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW003') {
document.getElementById('SW001').style.display='none';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='block';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW004') {
document.getElementById('SW001').style.display='block';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW005') {
document.getElementById('SW001').style.display='none';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='block';
}
}
</script>
<style type="text/css">
<!--
#main {
width: 400px;
margin-right: auto;
margin-left: auto;
height: 125px;
}
#imageArea {
float: right;
width: 200px;
}
#formArea {
float: left;
width: 200px;
height: 125px;
}
.image {
height: 125px;
width: 125px;
margin-right: auto;
margin-left: auto;
display: none;
}
#SW001 {
background: url(../_images/Colorfil/SW0001.jpg) no-repeat center center;
}
#SW002 {
background: url(../_images/Colorfil/SW0002.jpg) no-repeat center center;
}
#SW003 {
background: url(../_images/Colorfil/SW0003.jpg) no-repeat center center;
}
#SW004 {
background: url(../_images/Colorfil/SW0004.jpg) no-repeat center center;
}
#SW005 {
background: url(../_images/Colorfil/SW0005.jpg) no-repeat center center;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="imageArea">
<div class="image" id="SW001"></div>
<div class="image" id="SW002"></div>
<div class="image" id="SW003"></div>
<div class="image" id="SW004"></div>
<div class="image" id="SW005"></div>
</div>
<div id="formArea">
<form action="" method="get">
<input type='text' name="input" id='input' />
<input name="" type="button" onclick="showSample(this.selectedIndex)"/>
</form>
</div>
</div>
</body>
</html>
Any help would be greatly appreciated! ok trying to get a Div tag to show if something is True and hide if something is False JS Code: unction eToggle(anctag,darg)
{
var ele = document.getElementById('Module1');
var ele = document.getElementById('Module2');
var ele = document.getElementById('Module3');
var ele = document.getElementById('Module4');
if("module1" + "module2" + "module3" + "module4" <40)
{
div.id.Failed = "block";
div.Failed = "Failed";
}
else
{
div.style.Passed = "block";
div.Passed = "show";
}
}
HTML Code: <div id="Fail" class="hidden" style="display: none"><b><i>You will need to Repeat the Semester!</b> <br /> </div> <div id="Passed" class="hidden" style="display: none"> <img src="faces.png" width="50" height="50"><b><i> "Good Job you passed the Semster!"</b></div> Hello, I'm trying to have a div be hidden on loading the page but when you click a link it will show the div... here's code I have but it doesn't show when you click the link... <script type="text/javascript"> function show(){ document.getElementById(test).style.display="block"; } </script> <div id="test" style="display:none;"> <p>Some text</p> </div> <a href="#" onclick="show(); return false;">Show</a> Hello, I have the folowing code but it seems to be broken between "SM Decision Support" and "Incident and Request Management". Does anyone know how I resolve ?. The idea is when somebody opens the page all the sections are hidden/uncollapsed and the user can collapse individually each section with a click or by hitting the expand/collapse all link. ------------ Have placed code in attachment as too long for this section Hi guys, im new to forums and need some help with my website. I have embed a flash player known as: JW player into my website and put it into a div. Now my problem is I want javascript to hide the div containing the flash player for atleast a few seconds to display a loading image.gif. How would I set this up? Im not to familiar about using javascript so im not sure if its even possible. Anways thx for any help ore suggestions related to this subject. Code: <html>
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
var noticecontent = document.getElementsByTagName("div");
for(var x=1; x < noticecontent.length; x++) {
name = noticecontent[x].getAttribute("name");
if (name == 'noticecontent') {
if (noticecontent[x].id == thechosenone) {
noticecontent[x].style.display = 'block';
}
else {
noticecontent[x].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<center>
<div id="parentdiv">
<div id="expandall">OPEN/CLOSE ALL</div>
<div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div>
<div id="noticecontent1" name="noticecontent" class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div>
<div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div>
<div id="noticecontent2" name="noticecontent" class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div>
<div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div>
<div id="noticecontent3" name="noticecontent" class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div>
</div>
</center>
</body>
</html>
can anyone help on "OPEN/CLOSE ALL" to show or hide all .noticecontent divs this is what im trying to do: http://www.linkstraffic.net/programm...d/movebox.html using this code: http://www.linkstraffic.net/programm...nd/movediv.php heres my code. can someone fix it? html: [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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Chris MacDonald - Javascript Assignment 2</title> <link href="styles/styles.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="java.js"></script> <div id="header"> <div id="logo"><img src="images/beat.png" /></div> </div> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="http://beatthreads.bigcartel.com/category/tees">Shirts</a></li> <li><a href="#">About Us</a></li> </ul> </head> <body> <div id="content"> <a href="#" onclick="interv=setInterval('ShowBox()',3);return false;">Upcoming Designs</a> <div id="coverlogin"> <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique cursus dui, a venenatis diam consectetur fermentum. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent aliquam ornare nunc non semper. Morbi blandit lectus non elit ultricies ultricies. Fusce mattis purus et eros ultrices et facilisis nulla consequat. Vestibulum tellus libero, tempor vel tincidunt nec, consectetur non ante. Donec sed malesuada felis. Mauris lorem lorem, ornare a rutrum quis, rutrum in mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <br/> <p align="left"><a href="#" onClick="interv=setInterval('HideBox()',3);return false;">X</a></p> </div> </div> </div> <div id="footer"> <div id="footertext">Beat Threads - 2010</div> </div> </body> </html> [CODE] javascript: // JavaScript Document var hh=0; var interv; //we show the box by setting the visibility of the element and incrementing the height smoothly function ShowBox() { //Depending on the amount of text, set the maximum height here in pixels if(hh==40) { clearInterval(interv); return; } obj = document.getElementById("coverlogin"); obj.style.visibility = 'visible'; hh+=2; obj.style.height = hh + 'px'; } function HideBox() { obj = document.getElementById("coverlogin"); if(hh==2) { obj.style.visibility = 'hidden'; obj.style.height = '0.1em'; clearInterval(interv); return; } hh-=2; obj.style.height = hh + 'px'; } [CODE] Can someone fix this for me? hi all, i'm new here. i'm designing websites. here is address where i need little help: http://raftingtara.com/sajt5/ i want to make action: when top sub-menu disappear, that gray background disappear too!!?? anyone can help me with that? i can send all source code if you need? THANKS I want some thing that when i click a button it shows a div then hides the button. I found this: Code: <script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
<input type=button name=type value='Show Layer' onclick="setVisibility('sub3', 'inline');";><input type=button name=type value='Hide Layer' onclick="setVisibility('sub3', 'none');";>
<div id="sub3">Message Box</div>
But it has two buttons that show and then hide the div, i only want one that shows the div then hides the button. Please help. Hey, I wonder how I'm going to do when it comes to the function of "show/hide" with JavaScript. My question is: I'm working on a web form. The following question is on the form: "Was ITK used?", and you're supposed to be able to pick "Yes" or "No" (by radio buttons), and this I've already fixed with no issues. But what I CAN'T do, for some strange reason, is that when you've clicked "Yes" on that question, it should appear another question: "Does customer have ITK in their network?", and when that comes up you're supposed to choose between "Yes"/"No" with radio buttons there as well. BUT if you click "No" on the first question (Was ITK used?), the other question (Does customer have ITK in their network?) shouldn't appear... Do you understand what I mean? How do I do this? Thanks in advance! I have a previous post where I asked about showing or hiding a div based on user answers in a form, and I got a great response that let me do that with radio buttons ... but can I do that with drop down lists too? Is there an equivalent to on click for drop down list? Thanks for all the help.
hey i need help of all u guys.Actually the problem is that when i am loading this html page i just want the sign in page to appear and on click of cancel button i want a page to appear and on click of login button i get log in page..but the problem is that whenever i load my html page i get the sign in page and the page that is present on the cancel page..i tried showing and hiding and tried but i dnt know what more to do...please help me out.. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="styling.css"/>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
window.onload = function() { document.getElementById('first_div').style.display = 'none';}
function toggle(link, div1id, div2id)
{
var div1 = document.getElementById(div1id);
var div2 = document.getElementById(div2id);
if (div1.style.display == 'none')
{
$('#third_div').hide();
div1.style.display = 'block';
div2.style.display = 'none';
link.innerHTML = 'Login';
} else {
$('#third_div').hide();
div1.style.display = 'none';
div2.style.display = 'block';
link.innerHTML = 'signin';
}
}
function toggleImg(divId)
{
$('#first_div').hide();
$('#second_div').hide();
$('#third_div').show();
}
</script>
</head>
<body>
<div id="first_div" class="container">
<label for="username">
<span>Username:*</span>
<input type="text" class="text" id="user" placeholder="Username" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label for="password">
<span>Password:*</span>
<input type="password" class="text" id="pass" placeholder="Password" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label>
<input type="checkbox" name="remember" id="remember" class="checkbox" value="1" tabindex="3" /> Remember Me?
</label>
<label>
<input type="submit" name="submit" class="button1" id="doLogin" value="Sign in" />
</label>
</div>
<div id="second_div" class="container1">
<label for="username">
<span>
Username:*</span>
<input type="text" id="username" class="text" placeholder="Username" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label for="password">
<span>Password:*</span>
<input type="password" id="password" class="text" placeholder="Password" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label for="repass">
<span>Re-Password:* </span><input type="password" id="repass" class="text" placeholder="Re-password" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label for="email_id">
<span>Email-Id:</span><input type="text" id="email_id" class="text" placeholder="Verify email-id" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label><input type="submit" name="submit" class="button1" value="Submit" /></label>
</div>
<div id="third_div" class="image">
<img src="https://gs1.wac.edgecastcdn.net/8019B6/data.tumblr.com/tumblr_m2rdcqQLrA1qcb6kno1_500.jpg" />
</div>
<div class="header">
<button class="button_cancel" onclick="toggleImg('third_div');">Cancel</button>
<button class="button_sign" id="sign" onclick="toggle(this,'first_div', 'second_div'); return false;">Sign_in</button>
</div>
</body>
</html>
I wanted it according to this website https://www.tumblr.com Good afternoon all, I need a bit fo help with unhiding a selection. I have a 10 checkboxes on a form. When the user clicks one of the boxes the rest are hidden and a comments box shows. That works great, the part I can't figure out is how to make all the boxes show again if the user unchecks the checkbox and make the comments box hide again. Here is the code I am using to do the hide: Code: function HideComments()
{
var a1 = document.getElementById("crmForm_answer1").checked;
var a8 = document.getElementById("crmForm_answer8").checked;
var a2 = document.getElementById("crmForm_answer2").checked;
var a3 = document.getElementById("crmForm_answer3").checked;
var a4 = document.getElementById("crmForm_answer4").checked;
var a5 = document.getElementById("crmForm_answer5").checked;
var a6 = document.getElementById("crmForm_answer6").checked;
var a7 = document.getElementById("crmForm_answer7").checked;
var a9 = document.getElementById("crmForm_answer9").checked;
var a10 = document.getElementById("crmForm_answer10").checked;
if(a1==true)
{
document.getElementById("crmForm_answer1_value").parentNode.parentNode.style.display = 'block';
document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
}
else
document.getElementById("crmForm_answer1_value").parentNode.parentNode.style.display = 'none';
if(a8==true)
{
document.getElementById("crmForm_answer8_value").parentNode.parentNode.style.display = 'block';
document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
}
else
document.getElementById("crmForm_answer8_value").parentNode.parentNode.style.display = 'none';
if(a2==true)
{
document.getElementById("crmForm_answer2_value").parentNode.parentNode.style.display = 'block';
document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
}
else
document.getElementById("crmForm_answer2_value").parentNode.parentNode.style.display = 'none';
if(a3==true)
{
document.getElementById("crmForm_answer3_value").parentNode.parentNode.style.display = 'block';
document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
}
else
document.getElementById("crmForm_answer3_value").parentNode.parentNode.style.display = 'none';
if(a4==true)
{
document.getElementById("crmForm_answer4_value").parentNode.parentNode.style.display = 'block';
document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
}
else
document.getElementById("crmForm_answer4_value").parentNode.parentNode.style.display = 'none';
if(a5==true)
{
document.getElementById("crmForm_answer5_value").parentNode.parentNode.style.display = 'block';
document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
}
else
document.getElementById("crmForm_answer5_value").parentNode.parentNode.style.display = 'none';
if(a6==true)
{
document.getElementById("crmForm_answer6_value").parentNode.parentNode.style.display = 'block';
document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
}
else
document.getElementById("crmForm_answer6_value").parentNode.parentNode.style.display = 'none';
if(a7==true)
{
document.getElementById("crmForm_answer7_value").parentNode.parentNode.style.display = 'block';
document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
}
else
document.getElementById("crmForm_answer7_value").parentNode.parentNode.style.display = 'none';
if(a9==true)
{
document.getElementById("crmForm_answer9_value").parentNode.parentNode.style.display = 'block';
document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
}
else
document.getElementById("crmForm_answer9_value").parentNode.parentNode.style.display = 'none';
if(a10==true)
{
document.getElementById("crmForm_answer10_value").parentNode.parentNode.style.display = 'block';
document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
}
else
document.getElementById("crmForm_answer10_value").parentNode.parentNode.style.display = 'none';
}
Thanks in advance for the help, Sam. Hi there, I have a site which consists of the html page and css page. I have been trying to get the image at the top of the page to dissapear when the user clicks on the footer. Any suggestions on how I can do this? Below is my code, Thanks in advance. HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { background-color: #CC6; } </style></head> <body> <div id="header-wrap"> <div id="header-container"> <div id="header"> <h1>JavaScript</h1> </div> </div> </div> <div id="ie6-container-wrap"> <div id="container"> <DIV STYLE="font-size:12pt" onmouseover="this.style.fontSize='16pt'" onmouseout="this.style.fontSize='12pt'"> <div id="content"> <h1>Mainframe</h1> <p>Enter the content of your website within this area.</p> </div></DIV> </div> </div> <div id="footer-wrap"> <div id="footer-container"> <div id="footer"> <center> <body onLoad="dateandtime()"> <script> var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday") var montharray=new Array("January","February","March","April","May","June","July","August","September","October","Novem ber","December") function getthedate(){ var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym<10) daym="0"+daym var hours=mydate.getHours() var minutes=mydate.getMinutes() var seconds=mydate.getSeconds() var dn="AM" if (hours>=12) dn="PM" if (hours>12){ hours=hours-12 } if (hours==0) hours=12 if (minutes<=9) minutes="0"+minutes if (seconds<=9) seconds="0"+seconds var cdate="<small><font color='#87ac6d' font size='2.5' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn +"</b></font></small>" if (document.all) document.all.clock.innerHTML=cdate else document.write(cdate) } if (!document.all) getthedate() function dateandtime(){ if (document.all) setInterval("getthedate()",1000) } </script> <span id="clock"></span> </center> </div> </div> </div> </body> </html> CSS: body { font: 62.5% Arial, Helvetica, sans-serif; color: #597347; margin: 0; padding: 0; background: #beffbf; } h1, h2 { color: #87ac6d; font-family: Tahoma, Arial, Geneva, sans-serif; margin: 20px 0 10px; } h1 { font-size: 2.5em; } p { margin: 10px 0; padding: 0; } blockquote { font-style: italic; } #header-wrap { position: fixed; top: 0; left: 0; width: 100%; } #header-container { height: 90px; background: url(../images/banner.jpg) repeat-x left bottom; } #header { width: 940px; margin: 0 auto; position: relative; } #header h1 { color: #beffbf; text-align: right; width: 290px; margin: 0; position: absolute; left: 476px; top: 32px; } #header h1 em{ color: #90b874; font-size: small; display: block; } #header ul { margin: 0; padding: 0; list-style: none; position: absolute; top: 35px; right: 0; } #header ul li { float: left; margin-right: 5px; } #header ul li a{ color: #90b874; font-weight: bold; font-size: 1.4em; margin-right: 5px; text-decoration: none; } #header ul li a:hover { color: #beffbf; } #container { width: 940px; margin: 0 auto; font-size: 1.4em; overflow: auto; padding: 90px 0 40px; } #content { float: left; width: 100%; } #sidebar { float: right; width: 275px; margin-top: 10px; } #footer-wrap { position: fixed; bottom: 0; left: 0; width: 100%; } #footer-container { height: 40px; background-color: #000; } #footer { width: 940px; margin: 0 auto; position: relative; } |
|||||||