Jump to content

i have navbar wen i click the image is not displaying properly

anushka

By anushka
in CSS Help

 Share

Recommended Posts

anushka Member

anushka

Posted
Posted

i have navbar when i click the image is not displaying below that .Its showing toward right all the image are showing under

Here is code

Please some one help

 

<html>

<head>

<style type="text/css">

 

body{

font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */

margin:2px;

 

}

 

.dhtmlgoodies_question{ /* Styling question */

/* Start layout CSS */

color:#FFF;

font-size:0.9em;

background-color:#317082;

width:200px;

margin-bottom:2px;

margin-top:2px;

padding-left:2px;

background-image:url('images/bg_answer.gif');

background-repeat:no-repeat;

background-position: right -198px;

height:20px;

 

overflow:hidden;

cursor:pointer;

float:left;

 

 

/* End layout CSS */

 

}

.dhtmlgoodies_answer{ /* Parent box of slide down content */

/* Start layout CSS */

border:1px solid #317082;

background-color:#E2EBED;

width:200px;

 

 

/* End layout CSS */

 

visibility:hidden;

height:0px;

overflow:hidden;

position:absolute;

 

 

 

}

.dhtmlgoodies_answer_content{ /* Content that is slided down */

padding:1px;

font-size:0.9em;

position:absolute;

float:none;

}

 

</style>

<script type="text/javascript">

 

var dhtmlgoodies_slideSpeed = 10; // 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>

<body>

<div class="dhtmlgoodies_question">New Products</div>

 

<div class="dhtmlgoodies_answer">

<div>

<img src="images2.jpg"/>

</div>

</div>

 

 

<div class="dhtmlgoodies_question">Hot Products</div>

 

<div class="dhtmlgoodies_answer">

<div>

<img src="images1.jpg"/>

</div>

</div>

<div class="dhtmlgoodies_question">Comming soon</div>

<div class="dhtmlgoodies_answer">

<div>

<img src="images3.jpg"/>

</div>

</div>

 

</body>

 

</head>

 

 

</html>

Thanks in advance

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.