Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Putting things in own scroll able box

So I am making a idle clicking game. And for all of the things you can buy i want to put them in their own box to the right. Basically instead of having to scroll down a entire page you just need to scroll down in its own little box. How would i put the code in a box like that? Basically it is like the box to the right of cooike clicker where yopu scroll through all the things you can but without scrolling down the real page. Like a window inside a window http://jsfiddle.net/blosche/nHPMx/30/ I want to put this text into the window inside the window that you can scroll down on so it does not take up as much room.

<img src="http://i788.photobucket.com/albums/yy168/Boone_Losche/th_MomObject_zps20d68d83.png" alt="mom" />
<button style="background-color:Purple; color:red; border:red; font-size:15px;" type="button" onclick="buyMom()">Buy 1 mom</button>
<p>Moms:+1 animals per second
    <br>(Makes baby animals with mom powers)</p>
<div id="momCount">0</div>
<div id="momPrice">50</div>
<br>
<p>================================</p>
<img src="http://i788.photobucket.com/albums/yy168/Boone_Losche/th_Incuobject_zpsee0cee76.png" alt="Incubator" />
<button style="background-color:lightcoral; color:purple; border:red; font-size:15px;" type="button" onclick="buyIncu()">Buy 1 incubator</button>
<p>Incubator:+10 animals per second
    <br>(Just the right growing conditions)</p>
<div id="incuCount">0</div>
<div id="incuPrice">150</div>
<br>
<p>================================</p>
<img src="http://i788.photobucket.com/albums/yy168/Boone_Losche/th_Farmobject_zps29b6cd87.png" alt="Farm" />
<button style="background-color:red; color:purple; border:red; font-size:15px;" type="button" onclick="buyFarm()">Buy 1 farm</button>
<p>Farms:+50 animals per second
    <br>(More room for more reproduction!)</p>
<div id="farmCount">0</div>
<div id="farmPrice">500</div>
<br>
<p>================================</p>
<img src="http://i788.photobucket.com/albums/yy168/Boone_Losche/th_Factoryobject_zps8aa2f150.png" alt="factory" />
<button style="background-color:yellow; color:blue; border:red; font-size:15px;" type="button" onclick="buyFactory()">Buy 1 factory</button>
<p>Factorys:+100 animals per second
    <br>(Genetic baby animals!)</p>
<div id="factoryCount">0</div>
<div id="factoryPrice">1000</div>
<br>



<p>================================</p>
<img src="http://i788.photobucket.com/albums/yy168/Boone_Losche/th_Clonreobject_zps0f89c829.png" alt="Cloner" />
<button style="background-color:orange; color:red; border:red; font-size:15px;" type="button" onclick="buyClone()">Buy 1 cloner</button>
<p>Cloners:+500 animals per second
    <br>(Cloning babys in the clone-o-matic)</p>
<div id="cloneCount">0</div>
<div id="clonePrice">2000</div>
<br>
<p>================================</p>
<img src="http://i788.photobucket.com/albums/yy168/Boone_Losche/th_Dnaobject_zps32b2a5e4.png" alt="Dna" />
<button style="background-color:lime; color:black; border:red; font-size:15px;" type="button" onclick="buyDna()">Buy 1 Dna Changer</button>
<p>Dna Changer:+800 animals per second
    <br>(Changing pesky humans into animals!)</p>
<div id="dnaCount">0</div>
<div id="dnaPrice">8000</div>
<br>



<p>================================</p>
<img src="http://i788.photobucket.com/albums/yy168/Boone_Losche/th_Animalfarm_zps5c2bc06a.png" alt="Af" />
<button style="background-color:red; color:yellow; border:red; font-size:15px;" type="button" onclick="buyAf()">Invoke AиIMAL FAяM</button>
<p>Protocol ANIMAL FAяM:+2000 animals per second comrade
    <br>(four legs not two)</p>
<div id="afCount">0</div>
<div id="afPrice">15000</div>
<br>

<p>================================</p>
like image 759
blsoche Avatar asked Jan 26 '26 03:01

blsoche


1 Answers

To make an inset frame, put a div there wherever you want it, and set the overflow to auto. This acts like a mini scrollable window.

Set up HTML:

<div id = "frameright">
<p>Your Stuff</p>
</div>

The CSS:

#frameright {
position:absolute; 
top:0px; 
left:400px; /*Change the position*/ 
width:250px; /*Width of right frame div*/
overflow:auto; /*Lets you scroll*/
}
like image 72
thefourtheye Avatar answered Jan 27 '26 18:01

thefourtheye