/    Sign up×
Community /Pin to ProfileBookmark

how to keep constant top of object

Copy linkTweet thisAlerts:
Oct 17.2008

please help

i made one click and reveal using html.
here i used style.css and function.js for function.

when i add one more button then the height of my page increases also top of my pop-up goes down. i want to keep that pop-up constant.

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorOct 17.2008 — Insufficient data.

What style.css? What function.js? What button? What pop-up? Keep the top position when? When scrolling? When what?

Do you have an example? A link to a test page? What is the problem, after all?
Copy linkTweet thisAlerts:
@PrakashChandakauthorOct 17.2008 — ok

this is my html -
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;h2&gt;Click And Reveal&lt;/h2&gt;
&lt;link rel="stylesheet" href="style.css" type="text/css"/&gt;
&lt;script language="Javascript" src="function.js" type="text/JavaScript"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body onload = "fvisibleHidden()"&gt;
&lt;div class="CNR"&gt;
&lt;div class="question"&gt;&lt;p&gt;This space is for question.&lt;/p&gt;&lt;/div&gt;
&lt;div class="instruction"&gt;&lt;p&gt;Click each button to know more.&lt;/p&gt;&lt;/div&gt;
&lt;div class="button"&gt;
&lt;div class="button_item"&gt;&lt;a id="button_1" onMouseOver="javascript:showover(this.id);" onMouseOut="javascript:showout(this.id);" onClick="showcontent(this.id);"&gt;&lt;p&gt;First Tab&lt;/p&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="button_item"&gt;&lt;a id="button_2" onMouseOver="javascript:showover(this.id);" onMouseOut="javascript:showout(this.id);" onClick="showcontent(this.id);"&gt;&lt;p&gt;Second Tab&lt;/p&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="button_item"&gt;&lt;a id="button_3" onMouseOver="javascript:showover(this.id);" onMouseOut="javascript:showout(this.id);" onClick="showcontent(this.id);"&gt;&lt;p&gt;Third Tab&lt;/p&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="button_item"&gt;&lt;a id="button_4" onMouseOver="javascript:showover(this.id);" onMouseOut="javascript:showout(this.id);" onClick="showcontent(this.id);"&gt;&lt;p&gt;Fourth Tab&lt;/p&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="button_item"&gt;&lt;a id="button_5" onMouseOver="javascript:showover(this.id);" onMouseOut="javascript:showout(this.id);" onClick="showcontent(this.id);"&gt;&lt;p&gt;Fifth Tab&lt;/p&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="button_item"&gt;&lt;a id="button_6" onMouseOver="javascript:showover(this.id);" onMouseOut="javascript:showout(this.id);" onClick="showcontent(this.id);"&gt;&lt;p&gt;Fifth Tab&lt;/p&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="pop"&gt;
&lt;div id="pop_1" class="pop_item"&gt;&lt;p&gt;This is the first tab content&lt;/p&gt;&lt;/div&gt;
&lt;div id="pop_2" class="pop_item"&gt;&lt;p&gt;This is the second tab content&lt;/p&gt;&lt;/div&gt;
&lt;div id="pop_3" class="pop_item"&gt;&lt;p&gt;This is the third tab content&lt;/p&gt;&lt;/div&gt;
&lt;div id="pop_4" class="pop_item"&gt;&lt;p&gt;This is the fourth tab content&lt;/p&gt;&lt;/div&gt;
&lt;div id="pop_5" class="pop_item"&gt;&lt;p&gt;This is the fifth tab content&lt;/p&gt;&lt;/div&gt;
&lt;div id="pop_6" class="pop_item"&gt;&lt;p&gt;This is the fifth tab content&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

this is my css -
<i>
</i>@media all
{

<i> </i>/* document body style */
<i> </i>body
<i> </i>{
<i> </i> background-color:#FFFFFF;
<i> </i> padding:0px 7px 0px 15px;
<i> </i> margin: 0px;
<i> </i> font-family:Arial;
<i> </i> font-size:12px;
<i> </i>}
<i> </i>/*............................................................................*/
<i> </i>/* Paragraph padding and margin */
<i> </i>p{
<i> </i> padding:0px 0px 10px 0px;
<i> </i> margin:0px;
<i> </i>}
<i> </i>/*............................................................................*/
<i> </i>/* Paragraph at end of page content box style */
<i> </i>p.pageContentEnd{
<i> </i> padding:0px;
<i> </i> margin:0px;
<i> </i>}


<i> </i>/*............................................................................*/
<i> </i>/* Click and reveal template style ..... */
<i> </i>/*............................................................................*/
<i> </i>DIV.CNR{
<i> </i> position:relative;
<i> </i> width:652px;
<i> </i> border:1px solid #000000;
<i> </i> background-color:#FFFFFF;
<i> </i>}
<i> </i>DIV.CNR DIV.question{
<i> </i>position:relative;
<i> </i>margin-left:10px;
<i> </i>color:#000000
<i> </i>}
<i> </i>Div.CNR Div.instruction{
<i> </i>position:relative;
<i> </i>margin-left:10px;
<i> </i>color:#660033;
<i> </i>}
<i> </i>DIV.CNR DIV.button{
<i> </i>position:relative;
<i> </i>margin-bottom:10px;
<i> </i>}
<i> </i>DIV.CNR DIV.button Div.button_item{
<i> </i> position:relative;
<i> </i> width:100px;
<i> </i> height:30;
<i> </i> border:2px solid #000000;
<i> </i> background-color:#FF6699;
<i> </i> font-weight:bold;
<i> </i> font-size:12;
<i> </i> margin-top:10px;
<i> </i> margin-bottom:10px;
<i> </i> margin-left:5px;
<i> </i> text-align: center;
<i> </i> cursor:hand;
<i> </i>}
<i> </i>/*
<i> </i>DIV.button_item A.over{
<i> </i> background-color:#FFCC99;
<i> </i> border:1px solid #000000;
<i> </i> width:100&amp;#37;;
<i> </i>}
<i> </i>DIV.button_item A.click{
<i> </i> background-color:#FFCC99;
<i> </i> border:1px solid #000000;
<i> </i> width:100%;
<i> </i>}
<i> </i>DIV.button_item A.back{
<i> </i> background-color:#FF6699;
<i> </i>}
*/
DIV.CNR DIV.pop_item{
position:absolute;
margin-left:120px;
margin-top:-199px;
margin-bottom:10px;
width:510px;
height:187px;
border:1px solid #000000;
background-color:#FFCCCC;
cursor:default;
}
}

here is my function.js -
<i>
</i>//var original;
var temp = "";
var current = "";
var count = 1;
var tabName;
var tabPrefix ="pop_";
tabName = tabPrefix+count;
function fvisibleHidden(){
//document.getElementById(tabName).style.marginTop=document.getElementById('button_1').style.marginTop;
//alert(button_item.style.marginTop);
while(tabName != null){
tabName = tabPrefix+count;
document.getElementById(tabName).style.visibility = "hidden";
count++;
}
}
function showover(obj){
if(obj==current){return}
//original = obj.className;
//obj.className = "over";
document.getElementById(obj).style.background='#FFCC99';
document.getElementById(obj).style.width="100%";
}
function showout(obj){
if(obj==current){return}
//obj.className = original;
document.getElementById(obj).style.background='#FF6699';
document.getElementById(obj).style.width="100%";
}
function showcontent(obj){
if(temp != ""){
var b, i=1;
temp = current;
while(b="button_" + i){
if(temp == b){
tabName = tabPrefix+i;
document.getElementById(tabName).style.visibility = "hidden";
break;
}
i++;
}
document.getElementById(temp).style.background='#FF6699';
document.getElementById(temp).style.cursor="hand";
}
current = obj;
document.getElementById(current).style.background='#FFCC99';
document.getElementById(current).style.borderSize="5px";
document.getElementById(current).style.width="100%";
document.getElementById(current).style.cursor="default";
var b, i=1;
while(b="button_" + i){
if(current == b){
tabName = tabPrefix+i;
document.getElementById(tabName).style.visibility = "visible";
break;
}
i++;
}
if(temp == ""){
temp = current;
}
}


First i've made this for five button as well as pop_up and aligned pop_up top to first button.

however when i've added the sixth button and pop_up, first pop_up's top goes down. Here i want to fix it to the same position.

Please help.
×

Success!

Help @PrakashChandak spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...