Javascript Text Collapse

Door Zero XT, 13 jaar geleden, 3.646x bekeken

Ik zie een heleboel sites die gewoon wisselt tussen de display none en block eigenschappen waardoor tekst en afbeeldingen uit het niets verschijnen en weer verwijderen. Ik wilde dit oplossen door het langzaam te laten verschijnen of te laten verdwijnen.

Met dit eenvoudig stukje JavaScript heb je die mogelijkheid. Je kan ook de snelheid aan passen. Hoe hoger het getal, hoe langzamer het gaat.

Voorbeeld: http://leaked.nl/javascript slider/

Gesponsorde koppelingen

PHP script bestanden

  1. javascript-text-collapse

 

Er zijn 18 reacties op 'Javascript text collapse'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
- SanThe -
- SanThe -
13 jaar geleden
 
0 +1 -0 -1
Werkt erg netjes.
Jeffrey H
Jeffrey H
13 jaar geleden
 
0 +1 -0 -1
Erg nice, vooral als je niet met een js library werkt of je niets meer wilt.

Je ziet hem alleen even flikkeren hier(Firefox 2.0.0.14)
Mebus  Hackintosh
Mebus Hackintosh
13 jaar geleden
 
0 +1 -0 -1
Waarom niet gewoon een framework gebruik zoals Mootools?
Zero XT
Zero XT
13 jaar geleden
 
0 +1 -0 -1
@Tha Wizekid:
Dat flikkeren doet hij maar heel af en toe bij mij. Maar dan is mijn CPU even met iets anders bezig.

@mebus:
Omdat ik het zelf wilde maken. Ik maak geen gebruik van frameworks.. maar dat is een discussie apart.
Jaron T
Jaron T
13 jaar geleden
 
0 +1 -0 -1
Met jquery kan dit met één regel :)
Zero XT
Zero XT
13 jaar geleden
 
0 +1 -0 -1
@Jaron:
1 regel + het hele framework. Dan is dit toch net ietsjes korter en hier leer je tenminste wat van. Dit is basis JavaScript in plaats van een regeltje toevoegen waar je niets van leert omdat je een framework gebruikt.

Laat toekomstige opmerkingen aub niet meer gaan over frameworks.. ik word er moe van:P
Mark L
Mark L
13 jaar geleden
 
0 +1 -0 -1
Ik vind het echt cool dat je dit hebt gemaakt. Zelf gebruik ik ook geen framework, simpelweg omdat ik JavaScript al ken en dan zit ik ook niet vast aan een framework. Ik snap wel de voordelen ervan, maar Eigen JavaScript vind ik leuker en uitdagender.

Ik vind dat je hem mooi gemaakt hebt!
Richard van Velzen
Richard van Velzen
13 jaar geleden
 
0 +1 -0 -1
Mag ik vragen waarvoor je 3 globale variabelen en 3 globale functies nodig hebt? Dit kan in 1 enkele globale functie. Waarom geef je strings mee aan setInterval?
M Ypma
M Ypma
13 jaar geleden
 
0 +1 -0 -1
leuk scriptje, maar erg netjes vind ik hem ook niet.
Enkele kritiek:
- waarom gebruik je strings in je setInterval?
- wat is de meerwaarde van 0001 tegenover gewoon 1? De waarde is exact hetzelfde.
- het gebruik van globale variabelen en functies is af te raden omdat dit conflicten kan veroorzaken met andere functionaliteiten. je kan dit prima verwerken in 1 functie verwerkt in een logisch namespace principe.
- je cleart op 4 plaatsen de interval... 2 zou voldoende moeten zijn als ik er zo naar kijk.
Ceasar Feijen
Ceasar Feijen
13 jaar geleden
 
Remie
remie
13 jaar geleden
 
0 +1 -0 -1
ik denk dat een slome computer er ook niet echt blij van wordt omdat je elke 1 milliseconde de hoogte overnieuw uitrekent ipv uitrekenen om de hoeveel milliseconde je 1pixel om laag moet.
Zero XT
Zero XT
13 jaar geleden
 
0 +1 -0 -1
@Ypma:
Bedankt voor alle punten. Ik ga er mee aan de slag en zal de nieuwe zodra hij klaar is uploaden.

@remie:
Ik heb het getest op een laptop. Windows 2000, 700MHz CPU en 300MB geheugen. Dat alles in Internet Explorer 6.

Het liep vlekkeloos en dat komt omdat je denkt dat de functie meer word aangeroepen naarmate je lange tekst heb maar dat is niet zo. Er zit een exponentiële groei in het aantal pixels dat er bij komen of eraf gaan. Dus als de div hoogte 1000 pixels is gaat er bijv. 20pixels per keer eraf terwijl als een div 10 pixels hoog is er maar 1 pixel per keer af gaat. Hij zal die functie ook niet meer dan 20-40 keer aanroepen en daar kijkt zelfs de CPU van de laptop van 700MHz niet van op.
Midas
Midas
13 jaar geleden
 
0 +1 -0 -1
@HellRazer,
Wat is er erg aan het gebruiken van een framework? Waarom is het erg om daar aan vast te zitten? Zo ongeveer iedereen gebruikt tegenwoordig een framework en dat is omdat het voordeel duidelijk bewezen is.
Remie
remie
13 jaar geleden
 
0 +1 -0 -1
@Midas, omdat iedereen het gebruikt hoeft het niet beter te zijn.
Het is uiteraard makkelijker om code te schrijven maar je kan er lang niet alles mee, elk framework is idioot groot of heeft te niet te features die je moet hebben en je krijgt veel functies die je nooit gebruikt.
Roel -
Roel -
13 jaar geleden
 
0 +1 -0 -1
Ik vind dit ZO geweldig, niet sarcastisch. Ik ben hier zelf al tijden mee bezig en die hoogte lukt niet. Hiermee gaat het perfect. 10/10 :)
Martijn van Boxtel
Martijn van Boxtel
13 jaar geleden
 
0 +1 -0 -1
leuk script maar als je nou een inhoud hebt die steeds veranderd? ik heb er mee zitte stoeien maar hij onthoud de hoogte van de vorige inhoud.

denk iemand mij te kunnen helpen met dit probleem of is dit niet mogelijk met het bovenstaande js script
Koen
koen
13 jaar geleden
 
0 +1 -0 -1
klein bugje,
als je de tekst eruit haalt, zet ie bij elke keer dat je klikt een pixel hoogte erbij...
en waarvoor gebruik je "return false"
want het werkt ook zonder.
verder netjes script
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Karl Karl
Karl Karl
13 jaar geleden
 
0 +1 -0 -1
Quote:
koen schreef op 30.10.2009 15:20
klein bugje,
als je de tekst eruit haalt, zet ie bij elke keer dat je klikt een pixel hoogte erbij...
en waarvoor gebruik je "return false"
want het werkt ook zonder.
verder netjes script

Dat script is zo gebouwd dat het om de zoveel tijd (een interval) de div of whatever it is groter maakt. Zo lijkt het dus of die open en dicht 'klapt'.
Die return false is goed en moet ook als er een 'echte link' wordt gebruikt, anders gaat de browser die link volgen.
Het is denk ik zelfs beter als die return false in die slide functie zou worden gestopt.
In php kan je ook dit doen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<?php
$var1
= '3 appels';
$var2 = '5 peren';
$var3 = $var1 + $var2;
var_dump($var3);
# Levert 8
[/code]
Dat werkt wel, maar dat moet je dus nooit doen. Zelfde geldt hier, het werkt wel zonder, maar is niet goed.

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. javascript-text-collapse

Labels

  • Geen tags toegevoegd.

Navigatie

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.