Li tweet horizontale slider

Status
Niet open voor verdere reacties.
L

lerrie

Gebruiker
Lid geworden
2 nov 2010
Berichten
300
Voor een website waar ik mee bezig ben heb ik geprobeerd door midden van 2 scripts een news balk te maken die al scrollend tweets weergeeft. Ik krijg het alleen niet voor elkaar om de tweets juist weer te geven. Het is de bedoeling dat de tweet, die al <li> uit twitter wordt gehaald naast elkaar komen met wat ruimte er tussen.

Het lukt me wel om de tweets uit te twitter te halen, en te laten scrollen, alleen komen de tweets onder elkaar. Ik heb hier een test pagina gemaakt: http://www.goodnightladies.nl/test.php

Ik gebruik de volgende css:
Code: 
CSS voor de nieuws balk:

#newsbalk {
	height: 25px;
	width: 920px;
	background-color: #000;
	float: left;
	margin-bottom: 25px;
	margin-top: 20px;
}
#gnltwitter {
	float: left;
	height: auto;
	width: auto;
	margin: 0px;
	padding: 0px;
}
#news {
	float: left;
	height: 22px;
	width: 805px;
	margin-top: 4px;
}

CSS voor de LI scroll /* liScroll styles */

.tickercontainer { /* the outer div with the black border */
	width: 805px;
	height: 21px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	float: left;
	color: #FFF;
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
	position: relative;
	width: 805px;
	overflow: hidden;
	float: left;
	color: #FFF;
}
div.tweets { /* that's your list */
	left: 805px;
	list-style-type: none;
	float: left;
	width: 100%;
	color: #FFF;
	position: relative;
	height: 22px;
}
div.tweets li {
	color: #FFF;
	list-style-type: none;
	float: left;
	height: 22px;
	position: relative;
	text-align: left;
	display: inline;
	padding-right: 20px;
	overflow: visible;
}
div.tweets a {
	color: #AA0159;
} 
div.tweets span {
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 0;
}

}

Ik hoop dat iemand mij hier mee kan helpen! Want na 2 weken kom ik er niet meer uit!

Groeten,
Lars
 
Hoi lerrie,
Ze staan op moment wel naast elkaar. :)
Op een of andere manier wordt de tweets-breedte door een script op 1px gezet, en dan zijn de tweets onzichtbaar. Om ze zichtbaar te maken moet er bij komen in de css:
Code: 
div.tweets { 
   ...
   width: 100% !important;
   }
De onderlinge afstand kan via de margin geregeld worden:
Code: 
div.tweets li {
   ...
   margin-right: 70px;
   }
(En de EHBO hiervoor was: Firebug; die doet het in < 2 minuten. ;) )

Met vriendelijke groet,
CSShunter
 
Ik heb nu de volgende css met de aanpassing 100% width maar hij werkt nog steeds niet:

Code: 
div.tweets { /* that's your list */
	left: 805px;
	list-style-type: none;
	width: 100%;
	color: #FFF;
	position: relative;
	height: 22px;
}
div.tweets li {
	color: #FFF;
	list-style-type: none;
	float: left;
	height: 22px;
	position: relative;
	text-align: left;
	display: inline;
	padding-right: 70px;
	overflow: visible;
}
div.tweets a {
	color: #AA0159;
}

Bvd,
Lerrie
 
Hoi lerrie,
In de div.tweets heb je nog niet de !important achter de 100% toegevoegd. Dan kan het script de breedte van 100% terugbrengen tot 1px.
De !important is een voorrangsregel, die maakt dat dat niet kan, en dat de 100% gehandhaafd wordt.
Als ik 'm zo via Firebug uitprobeer, komen de volledige tweets tevoorschijn. :)

Groetjes,
CSShunter
 
Top bedankt! Ze komen nu eindelijk naast elkaar. Het probleem is echter dat er alleen 2 tweets zichtbaar zijn en de rest er, wel naast elkaar, onder komen te staan. De tweets worden, denk ik hierdoor, daarom ook weer vanaf het begin afgespeeld zodra ze het einde vd balk bereiken, ipv van dat ze door blijven scrollen. Zou top zijn als je mij daar nog bij kan helpen!
 
Hoi Lerrie,
Ik heb deze al even bekeken, maar kan ik niet zo 1-2-3 oplossen. Staat in m'n ToDo-lijstje, maar eerst nog wat andere dingen omhanden.

Wordt vervolgd,
CSShunter
 
Ja, khebm! :d

Ik was begonnen met in de css te gaan rommelen, maar dat hielp aan geen kanten.
Toen heb ik maar eens het originele liScroll-script er in gezet, en het bijbehorende originele stylesheet.
In de gebruiksaanwijzing van het liScroll-script staat dat de <ul> van het te scrollen lijstje een ID moet krijgen, die dan gebruikt wordt als trigger voor de functie die de <li>'s laat scrollen.

Bij jou was de trigger-ID op de div#tweets gezet, en niet op de <ul> die daarbinnen zit.

Nu wordt die <ul> aangemaakt door het twitter-script, en daar zit geen ID bij, als je de gegenereerde broncode (broncode met uitkomst javascripts) bekijkt met de Webdeveloper Toolbar.
Dan maken we die ID zelf!
[JS]...
var nws=document.getElementById('tweets');
var deUL=nws.getElementsByTagName('ul')[0]; // de eerste en enige UL in de #tweets

deUL.setAttribute('id','myScroller'); // deze UL krijgt nu een ID tbv de liScroll-functie[/JS]
Daarna mag de scroller in werking treden met de <ul> met deze ID als trigger:
[JS]$(function(){
$("ul#myScroller").liScroll();
});
[/JS]
Het geheel wordt ingepakt in een onload-functie, zodat eerst het twitter-script zijn werk heeft gedaan en de <ul> met inhoud aanwezig is:
[JS]window.onload=function(){
...
...
}[/JS]
Op deze manier worden de <li>'s netjes achter elkaar gescrold, en het scrollen gaat nu ook continu door ipv afgekapt te worden zodra tegen de linkerzijkant gebotst wordt.
Nu kan je voorzichtig je styles er in gaan zetten (als ik jouw stylesheet gebruik weigert ie alsnog).

Succes!
Met vriendelijke groet,
CSShunter
 
Helemaal top! Ga hem vanavond even testen. Hoop dat ik mijn eigen styles erin krijg! Ik hou je op de hoogte! Bedankt!
 
Zie hier: http://www.goodnightladies.nl/test.php het resultaat! Veel dank voor de hulp, alleen nu zit ik met het volgende: klopt het dat het nu alleen op Firefox werkt? Getest in IE en Chrome maar helaas werkt hij daar niet, zowel die van jou als die van mij. De origineel uit de tutorial werkt wel.
 
o jeetjepeetje! Ik had 'm met FF gemaakt en niet verder getest. :o
Ga gauw even kijken of ik kan vinden wat er a/d hand is.
 
Hoi lerrie,
Bij je reactie had ik 'm al te pakken: "alleen nog even opschrijven". ;)
Daar gaat ie!
Eerst uitsluiten dat voor Chrome e.a. de home-made styles in de weg zitten, door deze uit te schakelen:
  • Test: goodnight-tickertest-3.htm.
  • Nee, dat is het niet, Chrome blijft nog steeds weigerachtig.
  • NB: zodra je op OK hebt geklikt, zijn ze er wel!
=====
Dan uitsluiten dat voor Chrome de andere scripts in de weg zitten, door deze ook uit te schakelen (behalve het twitter.js, de jquery.min.js, en de jquery.li-scroller.1.0.js die voor de scroller nodig zijn):
  • Test: goodnight-tickertest-4.htm.
  • Nee, dat is het ook niet, Chrome blijft nog steeds weigerachtig.
  • Ook hier: even later zijn ze er wel!
=====
Dan wordt voor Chrome kennelijk het scroller-script te vroeg ingezet, en zou dat even moeten wachten. *)
We plaatsen daarom alles in een functie triggerTicker(), die we na de onload een seconde laten wachten voor ie van start mag gaan:
[JS]function triggerTicker() {
var twts=document.getElementById('tweets');
var deUL=twts.getElementsByTagName('ul')[0]; // de eerste en enige UL in de #tweets

if (deUL){alert('ok, de tweets zijn gearriveerd,\nen de <ul> van de tweets is getraceerd')} // kan weg
else {alert('nop, de <ul> van de tweets kan niet gevonden worden :-(')} // kan weg

deUL.setAttribute('id','myScroller'); // deze UL krijgt nu een ID tbv de liScroll-functie

$(function(){
$("ul#myScroller").liScroll();
});
}

window.onload=function(){
setTimeout(triggerTicker,1000); // in msec.
}
[/JS]
=====
Dan kunnen we alle andere ingrediënten (css en scripts) terugplaatsen, om te zien wat er dan gebeurt:
=====
Volgende stap is het terugbrengen van die ene seconde wachttijd tot zo kort mogelijk. Dat kan door het script (net als met de alert) te laten temperaturen of de twitter-UL al binnen is. Zo ja, dan laten zien. Zo nee, dan 10 millisec. wachten en nog eens proberen, net zo lang tot ie binnen is:
[JS]function triggerTicker() {
t=clearTimeout(triggerTicker);
var twts=document.getElementById('tweets');
var deUL=twts.getElementsByTagName('ul')[0]; // de eerste en enige UL in de #tweets

if (deUL){ // als de UL bestaat:
deUL.setAttribute('id','myScroller'); // de UL krijgt nu een ID tbv de liScroll-functie
$(function(){ // scroller aanzetten
$("ul#myScroller").liScroll();
});
}
else { // als de UL nog niet bestaat:
setTimeout(triggerTicker,10); // na 10ms nog eens proberen
}
}

window.onload=function(){
triggerTicker();
}[/JS]
  • Test: goodnight-tickertest-7.htm.
  • Ja, Chrome en IE blijven het doen, maar geven af en toe nog een flits met een paar ongestijlde blauwe tweets te zien (nog een laatste restje van het wachten).
=====
Dan zetten we in de css de div #tweets tijdelijk op onzichtbaar met de visibility-eigenschap (met {display:none} zou het binnenkomen niet meer waargenomen kunnen worden!) ...:
Code: 
#tweets {
	visibility: hidden;
	}
... om meteen na het begin van de scroller-functie de tweets te laten zien. Met de correcte "cdata" code om het script heen (bij script in een pagina, niet voor losse .js-bestanden) wordt dan het totaal:
HTML: 
<script type="text/javascript">
// <![CDATA[

function triggerTicker() {
	t=clearTimeout(triggerTicker);
	var twts=document.getElementById('tweets');
	var deUL=twts.getElementsByTagName('ul')[0]; // de eerste en enige UL in de #tweets

	if (deUL){ // als de UL bestaat:
		deUL.setAttribute('id','myScroller'); // de UL krijgt nu een ID tbv de liScroll-functie
		$(function(){                         // scroller aanzetten
			$("ul#myScroller").liScroll();
		});
		twts.style.visibility="visible"; // en de div #tweets laten zien
	} 
	else { // als de UL nog niet bestaat:
		setTimeout(triggerTicker,10); // na 10ms nog eens proberen
	}
}

window.onload=function(){
	triggerTicker();
}

// ]]>
</script>
En het resultaat is dan:
Zo zie je maar weer: stapje voor stapje kan je overal komen. ;)

Good Night!
CSShunter
_____
*) Dit heb ik al eens eerder meegemaakt, dat er soms bij het ophalen van tweets een vertraging bij twitter zit, die een "Twitter-flits" veroorzaakt.
Zie pagina 50 e.v. van het "Reisverslag uit Cascadeland", waar ook de nodige manoeuvres moesten worden uitgehaald om tweets op een dragelijke manier binnen te krijgen.

<edit>
Dat het in de originele demo wel meteen goed ging, kan kloppen: daar moet niet op binnenvliegende twittertjes gewacht worden, maar staat de te scrollen <ul> met al z'n <li>'s al kant en klaar in de html-code.
</edit>
 
Laatst bewerkt:
Mijn dank is groot. Ik ga vanavond alles eens goed doorlezen zodat ik de volgende keer weet waar het probleem zit!
 
Okidoki. - Bij javascript is de alert-methode een beproefd middel (als de javascript-console geen errors aangeeft): bovenaan in het script beginnen met een alert('piep') of een alert die een waarde opvraagt, en dan langzaam het script afzakken tot de fout optreedt.
En wat erg helpt bij error- en bughunting is een "minimale fout-pagina", waarin door uitschakelen alles geëlimineerd is wat niets met de fout/bug van doen heeft.

Gelukkig was je er snel bij met een verder mooi lege pagina: dat maakt het leuk werk en bespoedigt de analyse met 500%!
  • Ik zou de webmakers niet de kost willen geven die, resultaatbelust als ze zijn, het oplossen van dergelijke pijnpuntjes uitstellen tot de rest van de pagina vrijwel klaar is.
  • Waarmee alles veel onoverzichtelijker wordt, een analyse/oplossing veel langer duurt, en er een levensgroot risico is dat dan blijkt dat de pagina totaal omgegooid moet worden om het probleem te verhelpen.
  • Wie zondigt tegen de Golden Rule 2, zal het weten! ;)
Groetjes!
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan