I have a series of buttons:
<div id="addBtn" style="position:relative">
<input type="button" name="add" value="add" class="btn" onClick="actionListener()">
</div>
<div id="searchBtn" style="position:relative">
<input type="button" name="search" value="search" class="btn" onClick="actionListener()">
</div>
<div id="deleteBtn" style="position:relative">
<input type="button" name="delete" value="delete" class="btn" onClick="actionListener()">
</div>
I want them to be displayed horizontally one after another, but even though I specify position:relative, all buttons are displayed vertically. How do I make them appear horizontally?
thanks,
webtekie<div style="display: inline;">thanks Dave,
Another question, visibility of divs that I have are controled by setting visibility in javascript. Sometimes I want all buttons to appear and sometimes only first and third. The thing is that when only first and third buttons are visible, I have a gap between them where second button is hidden. How do I make it so that if one of the buttons is hidden all other shift left to fill the gap?
thanks again,
webtekiecan you change the display property, rather than the visible property?
if you could switch one to display: none it would not hold it's space on the page.perfect!
thanks Dave.Why are you encapsulating buttons in block elements to begin with???
<div id="myButtons">
<input type="button" name="button1" value="Button 1" />
<input type="button" name="button2" value="Button 2" />
<input type="button" name="button3" value="Button 3" />
</div>
Should do the job.because I have to show/hide some buttons.Originally posted by webtekie
because I have to show/hide some buttons. That still doesn't warrant the use of a block-level element, however. You could just as easily access the buttons by themselves.ok, but how do I hide/show buttons without putting them in <div>?button is HTML element, just like a div, right?I would have to know what kind of algorithm you're using, however, theoretically, you'd move all of the attributes off of the <div> and place them on the them on all of your <input> elements. Moreover, if you require position: relative on all of them you could just as easily define that in your CSS.ok, so I can say something like:
document.myForm.myInput.visibility=hidden;
or
document.myForm.myInput.display=none;
Will html tag <input type="text" name="myInput"> actually understand this?
All I want is some of the buttons to show up depending on action performed.
In my page all I do is this:
<div id="addBtn" style="display: inline; postion: relative;">
<input type="button" name="add" value="add" class="btn" onClick="actionListener()">
</div>
.....
function initBtns(){
showHide('addBtn','inline');
showHide('searchBtn','inline');
showHide('deleteBtn','none');
showHide('nextBtn','none');
showHide('previousBtn','none');
showHide('firstBtn','none');
showHide('lastBtn','none');
showHide('clearBtn','none');
showHide('cancelBtn','inline');
}
function showHide(id,vis) {
document.getElementById(id).style.display=vis;
}
thanks,
webtekie
<div id="addBtn" style="position:relative">
<input type="button" name="add" value="add" class="btn" onClick="actionListener()">
</div>
<div id="searchBtn" style="position:relative">
<input type="button" name="search" value="search" class="btn" onClick="actionListener()">
</div>
<div id="deleteBtn" style="position:relative">
<input type="button" name="delete" value="delete" class="btn" onClick="actionListener()">
</div>
I want them to be displayed horizontally one after another, but even though I specify position:relative, all buttons are displayed vertically. How do I make them appear horizontally?
thanks,
webtekie<div style="display: inline;">thanks Dave,
Another question, visibility of divs that I have are controled by setting visibility in javascript. Sometimes I want all buttons to appear and sometimes only first and third. The thing is that when only first and third buttons are visible, I have a gap between them where second button is hidden. How do I make it so that if one of the buttons is hidden all other shift left to fill the gap?
thanks again,
webtekiecan you change the display property, rather than the visible property?
if you could switch one to display: none it would not hold it's space on the page.perfect!
thanks Dave.Why are you encapsulating buttons in block elements to begin with???
<div id="myButtons">
<input type="button" name="button1" value="Button 1" />
<input type="button" name="button2" value="Button 2" />
<input type="button" name="button3" value="Button 3" />
</div>
Should do the job.because I have to show/hide some buttons.Originally posted by webtekie
because I have to show/hide some buttons. That still doesn't warrant the use of a block-level element, however. You could just as easily access the buttons by themselves.ok, but how do I hide/show buttons without putting them in <div>?button is HTML element, just like a div, right?I would have to know what kind of algorithm you're using, however, theoretically, you'd move all of the attributes off of the <div> and place them on the them on all of your <input> elements. Moreover, if you require position: relative on all of them you could just as easily define that in your CSS.ok, so I can say something like:
document.myForm.myInput.visibility=hidden;
or
document.myForm.myInput.display=none;
Will html tag <input type="text" name="myInput"> actually understand this?
All I want is some of the buttons to show up depending on action performed.
In my page all I do is this:
<div id="addBtn" style="display: inline; postion: relative;">
<input type="button" name="add" value="add" class="btn" onClick="actionListener()">
</div>
.....
function initBtns(){
showHide('addBtn','inline');
showHide('searchBtn','inline');
showHide('deleteBtn','none');
showHide('nextBtn','none');
showHide('previousBtn','none');
showHide('firstBtn','none');
showHide('lastBtn','none');
showHide('clearBtn','none');
showHide('cancelBtn','inline');
}
function showHide(id,vis) {
document.getElementById(id).style.display=vis;
}
thanks,
webtekie