•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 329,104 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,474 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 322 | Replies: 5 | Solved
 |
•
•
Join Date: Aug 2007
Posts: 20
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
Professional javascripters plz help or illl be screwed at work.....plz guys.....
I have made this sliding div....but i am having a big problem.....i dont want the div to appear in the first place....but in the code below its is already open when the page refreshed....I want it to open when i click on toggle.....n i cant understand what shud i do for that.....i have tried giving the "visibility:hidden;" to the 'testDiv'...after that it doesnt show up....but there is a whitespace of the div's size instead of the div itself......plz help....my code is below.....(i have made this with the help of a tutorial)....i'm kind of new at javascript.....
plz help......
Thanks
I have made this sliding div....but i am having a big problem.....i dont want the div to appear in the first place....but in the code below its is already open when the page refreshed....I want it to open when i click on toggle.....n i cant understand what shud i do for that.....i have tried giving the "visibility:hidden;" to the 'testDiv'...after that it doesnt show up....but there is a whitespace of the div's size instead of the div itself......plz help....my code is below.....(i have made this with the help of a tutorial)....i'm kind of new at javascript.....
plz help......
Thanks
<html>
<head>
<script language="javascript">
var active = 1;
var height = 100;
function toggle_visible() {
if(active == 0) {
active = 1;
divPlusOne();
} else if(active == 1){
active = 0;
divMinusOne();
}
}
function divMinusOne() {
if(height >= 20) {
height = height - 1;
document.getElementById('testDiv').style.height=height + 'px';
window.setTimeout('divMinusOne()', 1);
} else {
document.getElementById('testDiv').style.visibility="hidden";
}
}
function divPlusOne() {
if(height <= 100) {
document.getElementById('testDiv').style.visibility="visible";
height = height + 1;
document.getElementById('testDiv').style.height=height + 'px';
window.setTimeout('divPlusOne()', 1);
}
}
</script>
<title>JavaScript test</title>
</head>
<body>
<div id="testDiv">And here is my very slick menu!</div>
<a href="#" onClick="toggle_visible()">Toggle</a>
</body>
</html>
•
•
Join Date: Apr 2005
Location: New York state
Posts: 403
Reputation:
Rep Power: 5
Solved Threads: 54
Code Monkey
The div should look like this if you want it to be hidden in the first place.
html Syntax (Toggle Plain Text)
Quote by AncientDragon:
Requests for help via PM will just be ignored. Post your questions in one of the technical boards and you will get an answer from someone.
And I WILL NOT DO YOUR HOMEWORK!
Requests for help via PM will just be ignored. Post your questions in one of the technical boards and you will get an answer from someone.
And I WILL NOT DO YOUR HOMEWORK!
•
•
Join Date: Aug 2007
Posts: 20
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
•
•
•
•
Originally Posted by ShawnCplus 
The div should look like this if you want it to be hidden in the first place.
html Syntax (Toggle Plain Text)
•
•
Join Date: Aug 2007
Posts: 20
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
i did that...but it shows a white space same size as the div.....thats where i'm stuck.......
•
•
Join Date: Jun 2006
Location: India
Posts: 6,610
Reputation: 
Rep Power: 21
Solved Threads: 297
You need to toggle the rendering and not visibility. Even invisible elements takes up space on the page. Use the "display" property to create invisible elements that do not take up space.
<div id="testDiv" style="display: none;">Content</div>
"I don't accept change. I don't deserve to live."
"Working a real job is a win if you're lazy, greedy, or unmotivated. If you're average, you fit right in. And if you're above average, the basic terms of employment and premise of the arrangement is against your interests."
"Working a real job is a win if you're lazy, greedy, or unmotivated. If you're average, you fit right in. And if you're above average, the basic terms of employment and premise of the arrangement is against your interests."
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
DaniWeb Marketplace (Sponsored Links)
Linear Mode
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: sifr and javascript
- Next Thread: Suggestion.
