PDA

View Full Version : Confining the height of the Advanced Gallery script



AshleyQuick
08-28-2007, 09:07 PM
1) Script Title: Advanced Gallery script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/agallery.htm

3) Describe problem: How is it possible to constrain the size of the div to a certain height and then place scrollbars if the content exceeds the height?

I love the way this works but I want the content area to remain visible in one particular area.

jscheuer1
08-28-2007, 09:17 PM
In the demo, the height is already constrained, just add overflow:auto; to make it use a scrollbar instead of allowing it to overflow the container:


<style type="text/css">

.gallerycontroller{
width: 250px
}

.gallerycontent{
width: 250px;
height: 200px;
border: 1px solid black;
background-color: #DFDFFF;
padding: 3px;
display: block;
overflow:auto;
}

</style>

AshleyQuick
08-29-2007, 02:42 PM
One other question, sorry! Is it possible to use standard href links instead of the select box?

jscheuer1
08-29-2007, 04:17 PM
I had this laying around:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

.gallerycontroller{
width: 250px
}

.gallerycontent{
width: 250px;
height: 200px;
border: 1px solid black;
background-color: #DFDFFF;
padding: 3px;
display: block;
}

</style>

<script type="text/javascript">

/***********************************************
* Advanced Gallery script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var tickspeed=3000 //ticker speed in miliseconds (2000=2 seconds)
var displaymode="auto" //displaymode ("auto" or "manual"). No need to modify as form at the bottom will control it, unless you wish to remove form.

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.gallerycontent{display:none;}\n')
document.write('</style>\n')
}

var selectedDiv=0
var totalDivs=0

function getElementbyClass(classname){
partscollect=new Array()
var inc=0
var alltags=document.all? document.all.tags("DIV") : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
partscollect[inc++]=alltags[i]
}
}

function contractall(){
var inc=0
while (partscollect[inc]){
partscollect[inc].style.display="none"
inc++
}
}

function expandone(){
var selectedDivObj=partscollect[selectedDiv]
contractall()
selectedDivObj.style.display="block"
if (document.gallerycontrol)
temp.options[selectedDiv].selected=true
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
if (displaymode=="auto")
autocontrolvar=setTimeout("expandone()",tickspeed)
}

function populatemenu(){
temp=document.gallerycontrol.menu
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<totalDivs;i++){
var thesubject=partscollect[i].getAttribute("subject")
thesubject=(thesubject=="" || thesubject==null)? "HTML Content "+(i+1) : thesubject
temp.options[i]=new Option(thesubject,"")
}
temp.options[0].selected=true
}

function manualcontrol(menuobj){
if (displaymode=="manual"){
selectedDiv=menuobj
expandone()
}
}

function preparemode(themode){
displaymode=themode
if (typeof autocontrolvar!="undefined")
clearTimeout(autocontrolvar)
if (themode=="auto"){
document.gallerycontrol.menu.disabled=true
autocontrolvar=setTimeout("expandone()",tickspeed)
}
else
document.gallerycontrol.menu.disabled=false
}


function startgallery(){
if (document.getElementById("controldiv")) //if it exists
document.getElementById("controldiv").style.display="block"
getElementbyClass("gallerycontent")
totalDivs=partscollect.length
if (document.gallerycontrol){
populatemenu()
if (document.gallerycontrol.mode){
for (i=0; i<document.gallerycontrol.mode.length; i++){
if (document.gallerycontrol.mode[i].checked)
displaymode=document.gallerycontrol.mode[i].value
}
}
}
if (displaymode=="auto" && document.gallerycontrol)
document.gallerycontrol.menu.disabled=true
expandone()
}

if (window.addEventListener)
window.addEventListener("load", startgallery, false)
else if (window.attachEvent)
window.attachEvent("onload", startgallery)
else if (document.getElementById)
window.onload=startgallery

</script>
</head>
<body>
<div class="gallerycontent" subject="What is JavaScript?">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>

<div class="gallerycontent" subject="Java & JavaScript Differences">
Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages.
</div>

<div class="gallerycontent" subject="What is DHTML?">
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</div>

<!--HTML for gallery control options below. Remove checkboxes or entire outer DIV if desired -->

<div id="controldiv" style="display:none" class="gallerycontroller">
<form name="gallerycontrol">

<select style="display:none;" class="gallerycontroller" size="3" name="menu" onChange="manualcontrol(this.options.selectedIndex)">
<option>Blank form</option>
</select><br>

<div style="display:none;">Auto: <input type="radio" name="mode" value="auto" onClick="preparemode('auto')"> Manual: <input checked type="radio" name="mode" value="manual" onClick="preparemode('manual')"></div>

</form>
<a href="#" onclick="manualcontrol(0);return false;">0</a><br>
<a href="#" onclick="manualcontrol(1);return false;">1</a><br>
<a href="#" onclick="manualcontrol(2);return false;">2</a><br>
</div>
</body>
</html>

AshleyQuick
08-29-2007, 04:52 PM
Nice, works great! Thanks for your help!

AshleyQuick
08-31-2007, 08:58 PM
I'm trying to use this advanced gallery script inside the sub-pages of this:

http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

Please tell me there is a way! Currently, it doesn't break/affect the ajax tabs content script but all the divs in the advanced gallery script are stacked on top of one another (I haven't forgotten to include the js and css stuff for the gallery script...I've tried adding it to both the index file and the sub-pages...and both...to no avail). Is this even feasible?

jscheuer1
09-01-2007, 04:46 AM
One way or another these sorts of problems can be resolved. But, as has recently been pointed out by ddadmin on numerous occasions, the easiest method is to make your external page have an iframe on it. The source for this iframe is then a 'stand alone' page with the other script on it. That way, all of the document.write and/or onload stuff that the other script needs to do can happen as it loads into the imported iframe.

AshleyQuick
09-06-2007, 08:36 PM
The iframe solution worked, thanks!