javascript collapse

Hulp nodig bij een stijl? Voor zowel XHTML/CSS als grafische vragen uiteraard gerelateerd aan phpBB3.
Forumregels

LEES: Richtlijnen voor Support. Vul de support template in!
phpBB3.0.x
Verschaf iemand geen servertoegang tenzij het niet anders kan. Maak altijd eerst een volledige backup en verander de inloggevens na afloop. Eigen risico.
Plaats reactie
Gebruikersavatar
Laurette
Berichten: 290
Lid geworden op: 22 jul 2005, 10:40
Locatie: emmen
Contacteer:

javascript collapse

Bericht door Laurette » 21 jan 2010, 17:29

  • Adres van je forum: http://iven.nl/cafe
    Event. modificaties op je forum: geen
    Wanneer ontstond het probleem? geen probleem
    phpBB versie: 3.0.6


    Heb je onlangs iets veranderd aan je forum?
    Wat is het probleem?

Geen probleem maar een vraag.

Zou graag net als dit forum het onderste gedeelte (wie is er online ed) uitklapbaar maken. Nu ben ik een eindje op weg maar kom niet verder. Ik heb de volgende code gebruikt in index_body en viewforum_body.

Code: Selecteer alles

<h3>{L_INFORMATION} <a href="javascript:collapse1.slidedown()"><img src="./styles/coffee_time/theme/images/down.png" alt="Down" /></a> <a href="javascript:collapse1.slideup()"><img src="./styles/coffee_time/theme/images/up.png" alt="Up" /></a></h3>
<div id="dog" style="width: auto; height: auto;">
<!-- IF S_DISPLAY_ONLINE_LIST -->
	<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
	<p>{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <br />{LOGGED_IN_USER_LIST}
	<!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF -->
	<!-- IF U_TEAM --><br /><em>Staff : <a href="{U_TEAM}">{L_THE_TEAM}</a></em><!-- ENDIF --></p>
<!-- ENDIF -->

<!-- IF S_DISPLAY_BIRTHDAY_LIST and BIRTHDAY_LIST -->
	<h3>{L_BIRTHDAYS}</h3>
	<p><!-- IF BIRTHDAY_LIST -->{L_CONGRATULATIONS}: <strong>{BIRTHDAY_LIST}</strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF --></p>
<!-- ENDIF -->

<!-- IF NEWEST_USER -->
	<h3>{L_STATISTICS}</h3>
	<p>{TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}</p>
<!-- ENDIF -->
</div>
<script type="text/javascript">
//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse1=new animatedcollapse("dog", 500, false)
</script>
Het woord informatie met de daarbij horende pijlen komen netjes te voorschijn maar de tekst blijft eronder staan en het gewenste effect is dus nog niet bereikt?
Hoe verder?
Als men te veel stapeld word men stapelgek.

Gebruikersavatar
Jeroen
Berichten: 3639
Lid geworden op: 10 mei 2008, 21:22

Re: javascript collapse

Bericht door Jeroen » 21 jan 2010, 17:33

Verplaats naar 3.0 Stijlen
- Pietje
Jeroen

Gebruikersavatar
brandsrus
Berichten: 1966
Lid geworden op: 01 jul 2005, 19:38
Locatie: r. Лeувapдeн
Contacteer:

Re: javascript collapse

Bericht door brandsrus » 22 jan 2010, 12:05

Welke stijl gebruik je? Dan kan ik even kijken welke code je eventueel kunt gebruiken.

Gebruikersavatar
Laurette
Berichten: 290
Lid geworden op: 22 jul 2005, 10:40
Locatie: emmen
Contacteer:

Re: javascript collapse

Bericht door Laurette » 22 jan 2010, 14:55

Dank voor je hulp,

De stijl waarvan ik uit werk is de stijl Attriuum. Ik wou even een linkje geven naar de stijl toe maar ik kan hem nergens meer vinden :?: .
Als men te veel stapeld word men stapelgek.

Gebruikersavatar
Kevin
Berichten: 1684
Lid geworden op: 06 nov 2007, 17:22
Locatie: Brabants schoon
Contacteer:

Re: javascript collapse

Bericht door Kevin » 22 jan 2010, 16:01

Afbeelding
ForumHulp.nl kan u helpen met: Technisch onderhoud, Extensies installaties/aanpassingen en Webdesign.

Teammember op Afbeelding phpBBservice.nl Afbeelding , Winnaar in de phpBB awards 2009, 2010 en 2012 met AquaforA

Gebruikersavatar
brandsrus
Berichten: 1966
Lid geworden op: 01 jul 2005, 19:38
Locatie: r. Лeувapдeн
Contacteer:

Re: javascript collapse

Bericht door brandsrus » 23 jan 2010, 00:39

De code in je index_body.html en forum_body.html is goed.

Je moet een .js bestand aanmaken met de volgende inhoud (kopieren naar kladblok en opslaan als animatedcollapse.js en plaatsen in je template map (Attriuum/template/)

Code: Selecteer alles

//Animated Collapsible DIV- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Last updated Aug 1st, 07'. Fixed bug with "block" parameter not working when persist is enabled
//Updated June 27th, 07'. Added ability for a DIV to be initially expanded.

var uniquepageid=window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, "") //get current page path and name, used to uniquely identify this page for persistence feature

function animatedcollapse(divId, animatetime, persistexpand, initstate){
	this.divId=divId
	this.divObj=document.getElementById(divId)
	this.divObj.style.overflow="hidden"
	this.timelength=animatetime
	this.initstate=(typeof initstate!="undefined" && initstate=="block")? "block" : "contract"
	this.isExpanded=animatedcollapse.getCookie(uniquepageid+"-"+divId) //"yes" or "no", based on cookie value
	this.contentheight=parseInt(this.divObj.style.height)
	var thisobj=this
	if (isNaN(this.contentheight)){ //if no CSS "height" attribute explicitly defined, get DIV's height on window.load
		animatedcollapse.dotask(window, function(){thisobj._getheight(persistexpand)}, "load")
		if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes" && this.isExpanded!="") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
			this.divObj.style.visibility="hidden" //hide content (versus collapse) until we can get its height
	}
	else if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes" && this.isExpanded!="") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
		this.divObj.style.height=0 //just collapse content if CSS "height" attribute available
	if (persistexpand)
		animatedcollapse.dotask(window, function(){animatedcollapse.setCookie(uniquepageid+"-"+thisobj.divId, thisobj.isExpanded)}, "unload")
}

animatedcollapse.prototype._getheight=function(persistexpand){
	this.contentheight=this.divObj.offsetHeight
	if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes"){ //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
		this.divObj.style.height=0 //collapse content
		this.divObj.style.visibility="visible"
	}
	else //else if persistence is enabled AND this content should be expanded, define its CSS height value so slideup() has something to work with
		this.divObj.style.height=this.contentheight+"px"
}


animatedcollapse.prototype._slideengine=function(direction){
	var elapsed=new Date().getTime()-this.startTime //get time animation has run
	var thisobj=this
	if (elapsed<this.timelength){ //if time run is less than specified length
		var distancepercent=(direction=="down")? animatedcollapse.curveincrement(elapsed/this.timelength) : 1-animatedcollapse.curveincrement(elapsed/this.timelength)
	this.divObj.style.height=distancepercent * this.contentheight +"px"
	this.runtimer=setTimeout(function(){thisobj._slideengine(direction)}, 10)
	}
	else{ //if animation finished
		this.divObj.style.height=(direction=="down")? this.contentheight+"px" : 0
		this.isExpanded=(direction=="down")? "yes" : "no" //remember whether content is expanded or not
		this.runtimer=null
	}
}


animatedcollapse.prototype.slidedown=function(){
	if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped running
		if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
			alert("Please wait until document has fully loaded then click again")
		else if (parseInt(this.divObj.style.height)==0){ //if content is collapsed
			this.startTime=new Date().getTime() //Set animation start time
			this._slideengine("down")
		}
	}
}

animatedcollapse.prototype.slideup=function(){
	if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped running
		if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
			alert("Please wait until document has fully loaded then click again")
		else if (parseInt(this.divObj.style.height)==this.contentheight){ //if content is expanded
			this.startTime=new Date().getTime()
			this._slideengine("up")
		}
	}
}

animatedcollapse.prototype.slideit=function(){
	if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
		alert("Please wait until document has fully loaded then click again")
	else if (parseInt(this.divObj.style.height)==0)
		this.slidedown()
	else if (parseInt(this.divObj.style.height)==this.contentheight)
		this.slideup()
}

// -------------------------------------------------------------------
// A few utility functions below:
// -------------------------------------------------------------------

animatedcollapse.curveincrement=function(percent){
	return (1-Math.cos(percent*Math.PI)) / 2 //return cos curve based value from a percentage input
}


animatedcollapse.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
	var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
	if (target.addEventListener)
		target.addEventListener(tasktype, functionref, false)
	else if (target.attachEvent)
		target.attachEvent(tasktype, functionref)
}

animatedcollapse.getCookie=function(Name){ 
	var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
	if (document.cookie.match(re)) //if cookie found
		return document.cookie.match(re)[0].split("=")[1] //return its value
	return ""
}

animatedcollapse.setCookie=function(name, value){
		document.cookie = name+"="+value
}
En in overall_header nog de volgende stap
[FIND]

Code: Selecteer alles

<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>
[AFTER ADD]

Code: Selecteer alles

<script type="text/javascript" src="{T_TEMPLATE_PATH}/animatedcollapse.js"></script>
Opslaan en dan alles refreshen (Cache legen) en de nieuwe bestanden uploaden.

Dan zou het moeten werken.. mocht er toch onduidelijkheden zijn hoor ik het wel.

Veel succes.

Dan zou het moeten werken!
Laatst gewijzigd door Paul op 23 jan 2010, 11:18, 1 keer totaal gewijzigd.
Reden: Onnodige BBCode verwijderd.

Gebruikersavatar
Laurette
Berichten: 290
Lid geworden op: 22 jul 2005, 10:40
Locatie: emmen
Contacteer:

Re: javascript collapse

Bericht door Laurette » 23 jan 2010, 13:31

Dank je wel voor de hulp. Het staat er op :mrgreen:
Als men te veel stapeld word men stapelgek.

Plaats reactie