Jump to content

How to hide div to make it look like there are many unique pages on one petpage?


Recommended Posts

Hello!

 

I've been working on this :

 

http://www.neopets.com/~factsoflife

 

It's the second layout that I made.

 

I've seen pages which have all the div hidden until you toggle it with a button with a # linked button and a specific part of the content appears. I looked around in tutorials but nothing seems to work for me. How could I do this with my page?

 

Thank you!

 

 

PS. My # buttons are set up and they work to direct to a portion of the content. I only need to know how to hide the rest of the stuff.

Link to comment
Share on other sites

What you're looking for is page anchors. You can head on over to ~Decreta or ~nappy07 and take a look at how my pages are designed.

 

you'll need something like this in your css codes:

.page {
	height: 800px;
	overflow: auto;}

and in your html for each section, something like this:

<a name="home"></a>
<div id="text" class="page">

followed by your content.

 

I used an image map for my buttons, so whichever method you're using to link to certain pages the link will be

~PETNAME#PAGENAME

 

If we use the example I gave the link would be this: ~nappy07#home

 

I hope this makes sense!

Link to comment
Share on other sites

Thank you so much for your answer!

 

I replaced the appropriate elements with your bits of code but it doesnt work. I took a screenshot to be able to show what I mean. It created a few other scrolling bars to the right, made the text hide in odd places and if I keep scrolling, all the other div pages of content are still as visible as before.

 

 

 

 

1t7tpf.png

Link to comment
Share on other sites

in your .box code you need to have a height value otherwise it won't work.
Additionally you may want to get rid of all your <br><br><br> repeats, this is poor coding practice.
 
Example of your code:

<div align="left">
<div style="overflow: auto; position: relative; width: 1172px; height: 972px; top: 112px; left: 313px; margin-right: -1172px; margin-bottom: -972px;">
<br><br><br><a name="home"></a><div class="box">
<h1>Home</h1>

Home things.

</div>

Example of how I'd adjust your code:

#home {align: left;
       overflow: auto;
       position: relative;
       width: 1172px;
       height: 972px;
       top: 112px;
       left: 313px;
       margin-right: -1172px;
       margin-bottom: -972px;
}

<div id="home"><a name="home"></a><div class="box">
<h1>Home</h1>

Home things.

</div>

I hope this makes sense and I hope this helps. If you're still having problems getting the pages to work, let me know and send me a copy of your code so I can test it on one of my pet pages.

 

Additionally you can look at my Wishlist petpage's source code for help. :)

Link to comment
Share on other sites

I'm trying a lot of things but I can't get it to work. This is my previous code with the bits of code above and how I tried to incorporate it :

 

http://pastebin.com/aRfPFc4j

 

 

This is my original, unbroken code :

 

http://pastebin.com/1Jmq7DNC

 

 

And thank you. I did look at the code source of your pages and I'll see if I can learn about what I'm doing or not doing to make that bit of code work! :laughingsmiley:

 

Oh, and yes, I wasn't aware <br><br><br> could be bad. I'll look into replacing them with other more effective codes.

Link to comment
Share on other sites

You're so so sooo kind and patient. Thank you.

 

I'm still discovering the world of coding but I'm a good student and I take notes so that I don't encounter the same problem in the future. ^_^

Link to comment
Share on other sites

You're very welcome! I love coding and actually find it soothing when I'm having a bad day. Though today was a good day. :)

 

I made some changes and figured out what was going wonky in your code. In the .box I changed that to .page as I thought it mattered, you can probably change that back to .box if you like. Just if it messes things up, revert back to my way. I added a height value based off your image size which tells the box how big it needs to be or else you get things at the bottom and the page anchors not working properly.

 

Next I made a #container div for you. This tells everything that it needs to stay nicely in the blue section. I used the code you had for your home section and converted that. I moved your navigation to the top of your HTML codes under your image to make it neater and so it remains out of the container and out of the way if you add more sections to your page. I tweaked your navigation coding as well so you'll see #topnavi and #leftnavi . The </div> at the very end of the code is to close the container so everything you add needs to go before that.

 

I hope this makes sense and is what you wanted. Additionally you have a lot of places where <br><br> is being used before a header and this doesn't need to be used. I left it that way so everything doesn't look scrunched until you add some things to those sections. Just be sure to use <p></p> tags and that will give you the ideal proper spacing.
 

<style>
table, .sf, td {
	display: none;
	background: none;
}
#header, #footer, .sidebar {
	display: none;
}
#main {
	background: none;
	border: none;
margin-top: 0px;
	margin-left: 0px;
}
#container {
overflow: hidden;
position: relative;
width: 1180px;
height: 972px;
top: 112px;
left: 300px;
}
.contentHeader, .contentModuleHeaderAlt {
	display: none;
}
#ban {
	display: none;
}
.content table table img {
	display: none;
}
.content table .content table img {
	display: inline;
}
#text, table, td, tr, body {
	font: 8pt verdana;
	line-height: 15px;
	color: #996699;
}
.page {height: 970px;
	overflow: auto;
}
a:link, a:visited {
	color: #aaaaaa;
	text-decoration: none;
	font-weight: -blocked-;
}
h1 {
	padding-top: 0px;
	height: 16px;
	text-transform: uppercase;
	font: 8pt verdana;
	text-align: center;
	color: #aaaaaa;
	background: #000055;
}
h2 {
	padding-top: 0px;
	height: 14px;
	font: 8pt verdana;
	text-align: center;
	color: #aaaaaa;
	background: #000055;
}
#image {
position: absolute;
	top: 0px;
	left: 0px;
	z-index: -1;
}
#topnavi {
position: relative;
width: 635px;
height: 38px;
top: 58px;
left: 880px;
margin-right: -635px;
margin-bottom: -38px;
}
#leftnavi {
position: relative;
width: 169px;
height: 974px;
top: 123px;
left: 122px;
margin-right: -169px;
margin-bottom: -974px;
}
</style>

<div id="image">
<img src="//images.weserv.nl/?url=http://i67.tinypic.com/vytdfc.png">
</div>

<div id="topnavi">
<a href="/explore.phtml">
<img src="//images.weserv.nl/?url=http://i65.tinypic.com/rgyvm0.png" alt="Explore"></a>
<a href="/nf.phtml">
<img src="//images.weserv.nl/?url=http://i67.tinypic.com/f3x6wk.png" alt="News"></a>
<a href="/ntimes/index.phtml">
<img src="//images.weserv.nl/?url=http://i66.tinypic.com/112apts.png" alt="The Neopian Times"></a>
<a href="/market.phtml?type=wizard">
<img src="//images.weserv.nl/?url=http://i63.tinypic.com/5dpelh.png" alt="Shop Wizard"></a>
</div>

<div id="leftnavi"> 
<a href="/~Brewtrella">
<img src="//images.weserv.nl/?url=http://i67.tinypic.com/34fb62h.png" alt="Webbie"></a><br><br><a href="/guilds/guild.phtml?id=4172081">
<img src="//images.weserv.nl/?url=http://i64.tinypic.com/6genhi.png" alt="Guild"></a><br><br><a href="/~Mortenebra">
<img src="//images.weserv.nl/?url=http://i65.tinypic.com/2vwg4uw.png" alt="Portal"></a><br><br><br><br><br><br><br><br><a href="#home"><img src="//images.weserv.nl/?url=http://i66.tinypic.com/2r2bvdd.png" alt="Home"></a>
<br><br><a href="#dailies"><img src="//images.weserv.nl/?url=http://i65.tinypic.com/rsualx.png" alt="Dailies"></a>
<br><br><a href="#plaza"><img src="//images.weserv.nl/?url=http://i67.tinypic.com/21liays.png" alt="The Nefarious Plaza"></a>
<br><br><a href="#recipes"><img src="//images.weserv.nl/?url=http://i63.tinypic.com/f4fn9u.png" alt="Recipes"></a>
<br><br><a href="#bewitching"><img src="//images.weserv.nl/?url=http://i63.tinypic.com/23si36c.png" alt="Bewitching Looks"></a>
</div>

<div id="container">

<a name="home"></a><div class="page">
<h1>Home</h1>

<p>Home things.</p>

</div>


<a name="dailies"></a><div class="page">
<h1>Dailies</h1>

<p style="text-align: center;"><a href="http://www.neopets.com/winter/adventcalendar.phtml">Advent Calendar</a> - Only available in the holidays.
<br><a href="http://www.neopets.com/pirates/anchormanagement.phtml">Anchor Management</a>
<br><a href="http://www.neopets.com/halloween/applebobbing.phtml">Apple Bobbing</a>
<br><a href="http://www.neopets.com/bank.phtml">Bank Interest</a>

<br><a href="http://www.neopets.com/desert/shrine.phtml">Coltzan's Shrine</a>
<br><a href="http://www.neopets.com/worlds/deadlydice.phtml">Count von Roos's Deadly Dice</a> - From 12 to 1 AM NST. Effects from this can be positive or negative.
<br><a href="http://www.neopets.com/worlds/geraptiku/tomb.phtml">Deserted Tomb</a>
<br><a href="http://www.neopets.com/faerieland/tdmbgpop.phtml">Discarded Magical Blue Grundo Plushie of Prosperity</a>
<br><a href="http://www.neopets.com/pirates/forgottenshore.phtml">Forgotten Shore</a> - Requires the completed map.
<br><a href="http://www.neopets.com/desert/fruit/index.phtml">Fruit Machine</a>
<br>Giant Jelly - Remove the three spaces in the following link: www .neopets .com/jelly/jelly. phtml
<br><a href="http://www.neopets.com/prehistoric/omelette.phtml">Giant Omelette</a>
<br><a href="http://www.neopets.com/halloween/gravedanger/index.phtml">Grave Danger</a>
<br><a href="http://www.neopets.com/medieval/grumpyking.phtml">Grumpy Old King</a>
<br><a href="http://www.neopets.com/medieval/guessmarrow.phtml">Guess the Weight of the Marrow</a>
<br><a href="http://www.neopets.com/altador/hallofheroes.phtml">Hall of Heroes Altador Prizes</a> - Only if you have completed Altador plot.
<br><a href="http://www.neopets.com/faerieland/springs.phtml">Healing Springs</a>
<br><a href="http://www.neopets.com/games/hidenseek.phtml">Kacheek Seek</a>
<br><a href="http://www.neopets.com/keyquest/redeem.phtml">Key Quest</a>
<br><a href="http://www.neopets.com/worlds/kiko/kpop/">Kiko Pop</a>
<br><a href="http://www.neopets.com/shenkuu/lunar/">Lunar Temple</a>
<br><a href="http://www.neopets.com/moon/meteor.phtml">Meteor Crash Site 725-XZ</a>
<br><a href="http://www.neopets.com/donations.phtml">Money Tree</a>
<br><a href="http://www.neopets.com/freebies/index.phtml">Monthly Freebies</a>
<br><a href="http://www.neopets.com/shenkuu/neggcave/">Mysterious Negg Cave</a>
<br><a href="http://www.neopets.com/medieval/symolhole.phtml">Mysterious Symol Hole</a>
<br><a href="http://www.neopets.com/thriftshoppe/index.phtml">Neopian Second-Hand Shoppe</a>
<br><a href="http://www.neopets.com/magma/quarry.phtml">Obsidian Quarry</a>
<br><a href="http://www.neopets.com/medieval/potatocounter.phtml">Potato Counter</a>
<br><a href="http://ncmall.neopets.com/mall/shop.phtml?page=giveaway">Qasalan Expellibox</a>
<br><a href="http://www.neopets.com/shop_of_offers.phtml?slorg_payout=yes">Shop of Offers</a>
<br><a href="http://www.neopets.com/market.phtml?type=till">Shop Till</a>
<br><a href="http://www.neopets.com/winter/snowager.phtml">Snowager</a> - 6 to 7 AM, 2 to 3 PM, 10 to 11 PM NST.
<br><a href="http://www.neopets.com/soupkitchen.phtml">Soup Kitchen</a> - Only available if you have less than 3000 NP.
<br><a href="http://www.neopets.com/freebies/tarlastoolbar.phtml">Tarla's Non-Toolbar Treasures</a>
<br><a href="http://www.neopets.com/island/tombola.phtml">Tombola</a>
<br><a href="http://www.neopets.com/medieval/turmaculus.phtml">Turmaculus</a> - Guide: <a href="http://www.neopets.com/~brownhownd">Turmaculus Times</a>
<br><a href="http://www.neopets.com/medieval/wiseking.phtml">Wise Old King</a>
<br><a href="http://www.neopets.com/water/fishing.phtml">Ye Olde Fishing Vortex</a></p>


<p style="text-align: center;"><a href="http://www.neopets.com/games/crossword/index.phtml">Faerie Crossword</a> - Find a frequently updated solution on SunnyNeo.
<br><a href="http://www.neopets.com/games/game.phtml?game_id=805">Fashion Fever</a>
<br><a href="http://www.neopets.com/games/favourites.phtml">Favourite Games</a>
<br><a href="http://www.neopets.com/games/gmc2015/index.phtml">Games Master Challenge 2015 - Team Fire vs Team Snow!</a> - Available in late november.
<br><a href="http://www.neopets.com/games/game.phtml?game_id=381">Kass Basher</a>
<br><a href="http://www.neopets.com/games/lobby/mp_comp.phtml">Monthly Multiplayer Competitions</a>
<br><a href="http://www.neopets.com/games/neoquest/neoquest.phtml">Neoquest</a>
<br><a href="http://www.neopets.com/games/nq2/index.phtml">Neoquest II</a>

<br><a href="http://www.neopets.com/games/tycoon/index.phtml">Plushie Tycoon</a>
<br><a href="http://www.neopets.com/games/pyramids/index.phtml">Pyramids</a>
<br><a href="http://www.neopets.com/games/game.phtml?game_id=820">Roodoku</a></p>

<p style="text-align: center;"><a href="http://www.neopets.com/mall/wheel/">NC Archives Wheel</a>
<br><a href="http://www.neopets.com/faerieland/wheel.phtml">Wheel of Excitement</a>
<br><a href="http://www.neopets.com/desert/extravagance.phtml">Wheel of Extravagance</a>
<br><a href="http://www.neopets.com/medieval/knowledge.phtml">Wheel of Knowledge</a>
<br><a href="http://www.neopets.com/prehistoric/mediocrity.phtml">Wheel of Mediocrity</a>
<br><a href="http://www.neopets.com/halloween/wheel/index.phtml">Wheel of Misfortune</a>
<br><a href="http://www.neopets.com/prehistoric/monotony/monotony.phtml">Wheel of Monotony</a></p>


<p style="text-align: center;"><a href="http://www.neopets.com/halloween/braintree.phtml">Brain Tree Quest</a>
<br><a href="http://www.neopets.com/space/coincidence.phtml">Coincidence Quest</a>
<br><a href="http://www.neopets.com/halloween/witchtower.phtml">Edna's Quest</a>
<br><a href="http://www.neopets.com/faerieland/employ/employment.phtml">Employment Agency</a>
<br><a href="http://www.neopets.com/halloween/esophagor.phtml">Esophagor Quest</a> - Gives the answers to the Brain Tree if done twice after starting the Brain Tree Quest.
<br><a href="http://www.neopets.com/quests.phtml">Faerie Quests</a>
<br><a href="http://www.neopets.com/medieval/earthfaerie.phtml">Illusen's Glade</a>
<br><a href="http://www.neopets.com/faerieland/darkfaerie.phtml">Jhudora's Bluff</a>
<br><a href="http://www.neopets.com/island/kitchen.phtml">Mystery Island Kitchen</a>
<br><a href="http://www.neopets.com/winter/snowfaerie.phtml">Snow Faerie's Quest</a></p>


<p style="text-align: center;"><a href="http://www.neopets.com/dome/">Battledome</a>
<br><a href="http://www.neopets.com/prehistoric/battleground/">Battleground of the Obelisk</a>
<br><a href="http://www.neopets.com/pirates/academy.phtml">Swashbuckling Academy</a> - Recommended for levels 1 to 40. Paid in dubloons.
<br><a href="http://www.neopets.com/island/training.phtml">Mystery Island Training School</a> - Recommended for levels 40 to 250. Paid in codestones.
<br><a href="http://www.neopets.com/island/fight_training.phtml">Secret Ninja Training School</a> - Recommended for levels 250 and above. Paid in red codestones.</p>


<p style="text-align: center;"><a href="http://www.neopets.com/pirates/buriedtreasure/index.phtml">Buried Treasure</a>
<br><a href="http://www.neopets.com/charitycorner/2015/">Charity Corner</a> - Only available in early autumn.
<br><a href="http://www.neopets.com/halloween/coconutshy.phtml">Coconut Shy</a>
<br><a href="http://www.neopets.com/faerieland/caverns/index.phtml">Faerie Caverns</a>
<br><a href="http://www.neopets.com/pirates/foodclub.phtml">Food Club</a> - Guides:  <a href="http://www.neopets.com/~foodclubbets">Anisa's Food Club Bets</a>, <a href="http://www.neopets.com/~Boochi_Target">Boochi_Target</a> & Food Club Daqtools (http ://foodclub .daqtools. info/).
<br><a href="http://www.neopets.com/island/haiku/haiku.phtml">Haiku Generator</a>
<br><a href="http://www.neopets.com/winter/igloo.phtml">Igloo Garage Sale</a>
<br><a href="http://www.neopets.com/prehistoric/keno.phtml">Grarrl Keno</a>
<br><a href="http://www.neopets.com/games/kadoatery/index.phtml">Kadoatery</a>
<br><a href="http://www.neopets.com/space/strangelever.phtml">Lever of Doom</a> - Known to take more than it gives.
<br><a href="http://www.neopets.com/magma/pool.phtml">Magma Pool</a> - The guards fall asleep 15 minutes every day, allowing you to visit the Magma Pool to paint one of your pets in magma. Once you find at which NST time the guards fall asleep, note it because for you it is at that exact same time that they fall asleep every day.
<br><a href="http://www.neopets.com/island/mystichut.phtml">Mystery Island Mystic</a>
<br><a href="http://www.neopets.com/games/lottery.phtml">Neopian Lottery</a>
<br><a href="http://www.neopets.com/winter/neggery.phtml">Neopian Neggery</a>
<br><a href="http://www.neopets.com/medieval/pickyourown_index.phtml">Pick Your Own</a>
<br><a href="http://www.neopets.com/faerieland/poogleracing.phtml">Poogle Racing</a>
<br><a href="http://www.neopets.com/games/slots.phtml">Scorchy Slots</a>
<br><a href="http://www.neopets.com/petpetlab.phtml">Secret Petpet Laboratory</a> - Requires the completed maps.
<br><a href="http://www.neopets.com/lab.phtml">Secret Laboratory</a> - Requires the completed map.
<br><a href="http://www.neopets.com/stockmarket.phtml?type=portfolio">Stock Market Portfolio</a>
<br><a href="http://www.neopets.com/winter/shopofmystery.phtml">Tarla's Shop of Mystery</a>
<br><a href="http://www.neopets.com/winter/brokentoys.phtml">Toy Repair Shop</a>
<br><a href="http://www.neopets.com/wishing.phtml">Wishing Well</a></p>


<p style="text-align: center;">Place this list on your page!
<br><a href="http://www.neopets.com/~Liebling_Ae#dailies"><img src="//images.weserv.nl/?url=http://i65.tinypic.com/rsualx.png"></a>
<br><textarea rows="2" cols="13"><p><a href="http://www.neopets.com/~Liebling_Ae#dailies"><img src="//images.weserv.nl/?url=http://i65.tinypic.com/rsualx.png"></a></p>
</textarea></p>

</div>


<a name="plaza"></a><div class="page">
<h1>The Nefarious Plaza</h1>

The Nefarious Plaza is the private marketplace for the members of the Poison Apple. It is also the only place where we are allowed to advertise shops, trades, our other affiliated organisations, pets, peculiar abilities or anything else. Here the smugglers, corrupted and underground dealers are many to roam within what could be considered the heart of the black market of Neopia...<br><br><a href="http://www.neopets.com/neomessages.phtml?type=send&recipient=populifolia0design">Contact Sab</a> if you would like to place your shop in the Nefarious Plaza or if you wish to place an ad likely to entice your fellow evildoers. For shop ads, please inform me of the name of your shop, its size, the categories you cover, a short description and the malls you are part of. The only requirement is to be a member of our guild. For board ads, please be certain to inform me when your ad is no longer relevant.<br><br><br><h2>The Shopkeepers of the Nefarious Plaza</h2>
No one for now!


<br><br><br><h2>The Ad Board of the Nefarious Plaza</h2>
No ads yet!

</div>


<a name="recipes"></a><div class="page">
<h1>Recipes</h1>
<p>Have you discovered an elixir of eternal youth? Want to share your favourite poison extraction techniques? Or perhaps you have concocted the most exquisite treats for the palate and want to share your recipes?</p>
<p><a href="http://www.neopets.com/neomessages.phtml?type=send&recipient=populifolia0design">Send Sab a tightly rolled letter attached to the talon of a crow</a> with the recipes you would like to see added to this compilation of our member's favourite cuisine. Good information to add to your letter are a name for your dish, the number of servings it would give, the ingredients as well as detailed preparation steps.</p><p style="text-align: center;">INDEX<br><br><br><a href="#apetizers">Apetizers</a>
<br><a href="#drinks">Drinks & Beverages</a>
<br><a href="#breakfast">Breakfast</a>
<br><a href="#meat">Meat</a>
<br><a href="#vegetables">Vegetables & Tofu</a>
<br><a href="#pastas">Pastas</a>
<br><a href="#pizzas">Pizzas</a>
<br><a href="#sandwiches">Sandwiches</a>
<br><a href="#desserts">Desserts</a>
<br><a href="#others">Others</a></p>


<br><br><br><a name="apetizers"></a>
<h2>Apetizers</h2>

Apetizers!


<br><br><br><a name="drinks"></a>
<h2>Drinks & Beverages</h2>

Drinks & Beverages!



<br><br><br><a name="breakfast"></a>
<h2>Breakfast</h2>

Breakfast!



<br><br><br><a name="meat">
<h2>Meat</h2>

Meat!



<br><br><br><a name="vegetables"></a>
<h2>Vegetables & Tofu</h2>

Vegetables & Tofu!



<br><br><br><a name="pastas"></a>
<h2>Pastas</h2>

Pastas!



<br><br><br><a name="pizzas"></a>
<h2>Pizzas</h2>

Pizzas!



<br><br><br><a name="sandwiches"></a>
<h2>Sandwiches</h2>

Sandwiches!



<br><br><br><a name="desserts"></a>
<h2>Desserts</h2>

Desserts!



<br><br><br><a name="others"></a>
<h2>Others</h2>

Others!


</div>


<a name="bewitching"></a><div class="page">
<h1>Bewitching Looks</h1>

bewitching pets with dresses

<br><br><br><h2>Current Theme</h2>
No theme yet!

<br><br><br><h2>Contestants</h2>
No one yet!

<br><br><br><h2>Rules</h2>
Rules!

<br><br><br><h2>Prizes</h2>
Trophies and items go here!

<br><br><br><h2>Past Winners</h2>
No one yet!

</div>

</div>
Link to comment
Share on other sites

If you've added additional content to your page while I was working on your code, it might be easier to copy paste that into the appropriate areas on what I gave you so you don't mess something up or miss something. Let me know how it goes! :)

Link to comment
Share on other sites

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.   Paste as plain text instead

  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.

Loading...
×
×
  • Create New...