BF2S - Slide in Info ...

DaReal

Enthusiast
Thread Starter
Mitglied seit
07.04.2005
Beiträge
8.056
Ort
Greifswald
Bin auf BF2S auf nen netten Effekt gestoßen ...

http://bf2s.com/player/44597255/

Wenn man da bei den Badges/Medals/Ribbons auf die Bildchen klickt slidet darunter die Info auf .. wie bekomme ich das extrahiert bzw. für meine seite umgesetzt? Wenn ich die seite speicher klappts nicht (wie gewohnt ... :rolleyes: ) und sonst kenne ich mich auch nur sehr schlecht mit JS aus .. :heul:
 
Wenn Du diese Anzeige nicht sehen willst, registriere Dich und/oder logge Dich ein.
auf bf2s werden 5 js dateien included:
Code:
<script type="text/javascript" src="http://images.bf2s.com/js/nt2.js" ></script>
<script type="text/javascript" src="http://images.bf2s.com/js/exp.js" ></script>
<script type="text/javascript" src="http://images.bf2s.com/js/pngfix.js"></script>
<script type="text/javascript" src="http://images.bf2s.com/js/linkjax.js"></script>
<script type="text/javascript" src="http://images.bf2s.com/js/ajform.js"></script>

welche davon welche ist kA aber du wirst schon die passende finden ;)
 
so, habe mal weitergearbeitet ...

es scheint wohl ne kombination aus "ajform" und "exp" zu sein ..

aber da ich mich überhaupt nicht mit java auskenne wird das wohl nix :(

scheinbar ist AJFORM irgendwie servergebunden bzw. muss von selbigem ausgeführt werden .. ich habe keine ahnung :fresse:

Die anderen tips waren schon sehr nice aber immer noch nciht das wahre ... :(
 
Das ganze basiert auf Javascript und die Technik, welche du meinst ist evtl. AJAX. Wenn du die anzuzeigenden Daten jedoch auch statisch in die Seite einbinden kannst (kein dynamisches Nachladen von Daten), sparst du dir einen Haufen Arbeit...
 
Zuletzt bearbeitet:
Achja .. aber japanisch sprech ich leider nicht :fresse:

:(

Kannst du das evtl. in ein Sample umbasteln wenn du sowas hinbekommst?
 
Ist doch soetwas wie bei dem Link, den ich dir genannt habe, oder? Dort wird mit statischen Inhalten (und damit weniger Aufwand, allerdings auch weniger Flexibilität) das selbe Ziel erreicht!
 
naja, das ganze soll aber in einem bestimmten bereich der seite "hereinsliden" wenn man auf nen bestimmten bereich klickt und auch auf mehrere inhalte zurückgreifen können.

Bei BF2S hat nämlich jedes icon in der Tabelle ne zugehörige externe Datei, die dann eingeslidet wird ..
 
das wirst du nicht soeinfach von der site kopieren können, da dass main script anscheinend in einer php datei hängt. weil wie du schon erkannt hast wird es über eine externe datei eingebunden.
z.b.
http://bf2s.com/player-award2.php?award_id=3040718&pid=45630230
evtl mal ganz lieb den webmaster der site anschreiben und fragen :d
 
Jo, werde ich wohl machen müssen ... habe jetzt fast das halbe netz durchsucht .. :d
 
Kabelsalat schrieb:
Das ganze basiert auf Java
argh, als mod sollte man java und js net verwechseln :hmm:

edit:sorry aber auf den tipfehler reagiere ich als java fetischist empfindlich :(
 
Zuletzt bearbeitet:
;) naja kann jedem mal passieren. btw DaReal ich hab da was gefunden ich teste das schnell und dann, wenn es funktioniert, bekommst du das.
 
Ich weiß nicht ob ihr irgendwie einen am rad habt ... aber klickt doch bitte mal bei den Awards (unteres drittel) auf eine der badges oder so .. das was dann unten herausslidet meine ich !!!!
 
Wo ist jetzt bitte der Unterschied:

14010tooltip1.jpg

http://bf2s.com/player/44597255/

14010tooltip2.jpg

http://www.zerbit.de/artikel/show.asp?id=16

14010tooltip3.jpg

http://www.webmatze.de/webdesign/javascript/tooltips.htm

14010tooltip4.jpg

http://www.dyn-web.com/dhtml/tooltips/
 
Zuletzt bearbeitet:
Junge .. DRÜCK DRAUF ... da geht dann darunter ne neue Tabelle auf (slidet) in der dann die info zu dem Badge etc. steht .. darum gehts mir .. nicht um die Kontexte an der maus ... :fresse:
 
Und jetzt noch ein wenig freundlicher bzw. deine Vorstellung mit einem Screenshot untermalt und es wäre überhaupt nicht zu den Missverständnissen gekommen...
 
Sehr geehrter Kabelsalat :fresse:

bf2s_1.jpg


bf2s_2.jpg


bf2s_3.jpg


Hier eine Demonstration ... sehr gut zu erkennen wie da was "hinzukommt" .. man möge es selbst mal probieren :coolblue:
 
Wenn du den Inhalt wie auf der Seite zu sehen dynamisch nachladen willst (AJAX), empfehle ich dir folgende C'T Artikel: http://www.heise.de/ct/inhverz/search.shtml?T=ajax&Suchen=suchen



Wenn der Inhalt jedoch statisch in der HTML-Datei eingebunden werden kann, geht es relativ simpel:

Die Tabelle (oder was auch immer eingeblendet werden soll) versteckst du mit dem CSS-Tag "display:none". Anzeigen bzw. (erneut) verstecken kannst du den Bereich mit folgenden JS-Befehlen:

Anzeigen:
Code:
document.getElementById(*ID_des_unsichtbaren_Tags*).style.display = "";
Verstecken:
Code:
document.getElementById(*ID_des_unsichtbaren_Tags*).style.display = "none";



Wenn du die Inhalte ohne besonderen Aufwand dynamisch nachladen willst, kannst du mit der zuvor genannten Möglichkeit ein iFrame verstecken bzw. anzeigen und den Inhalt mit folgendem Aufruf anpassen:
Code:
document.getElementById(*ID_des_unsichtbaren_iFrame*).location = *neue_Zieladresse*;
Evtl. ist jedoch folgende Lösung zu bevorzugen (Stichwort Browserkompatibilität):
Code:
//Konstanten
id = *ID_des_unsichtbaren_iFrame*;
strNewCntUri = *neue_Zieladresse*;

//Je nach Browserfunktionen anderer Aufruf
cntWindow = window.frames? window.frames[id]: document.getElementById? document.getElementById(id): document.all? document.all[id]: null;

//Nicht bei allen Browsern kann direkt auf das Object / die Eigenschaft location zugegriffen werden
try 
{
    cntWindow.location = strNewCntUri;
}
catch (e)
{
    cntWindow.location.href = strNewCntUri;
}
 
Zuletzt bearbeitet:
Naja, das mit dem 2einfachen einfügen" von inhalten habe ich ja schon auf meiner Homepage, es ging mir eigentlich nur um das dynamische faden und das nutzen externer Dateien ... auf die externen Datei könnte ich auch gut und gerne verzichten ... hauptsache ich bekomme das sliden .. :d
 
hmm ich hab hier das jetzt mal schnell @ work getestet, aber das fadet nicht wirklich ein. selbst mit der js datei von bf2s.com nit. ich denke das muss noch an anderen dateien hängen. ich werd mir das aba noch mal angucken. jedenfalls hab ich das schonmal mit linkjax geschafft.


EDIT ich hab hier ein beispiel welches funktioniert aber nicht aus dateien nachgeladen wird sondern welches schon im quelltext ist also mit diesem hidden element, aber es slided schonmal :d
 
Zuletzt bearbeitet:
Nascar schrieb:
ich hab hier ein beispiel welches funktioniert aber nicht aus dateien nachgeladen wird sondern welches schon im quelltext ist also mit diesem hidden element, aber es slided schonmal :d
Sehr fein ... bei Kabelsalats beispiel geht ja leider nur mit bildern zu scrollen ...

Kannst mnal posten/schicken ? webmaster@dareal.info :bigok:
 
JS Teil
PHP:
var exec = new Array();
var dir  = new Array();

function startExpand(target, expandTo, speed){

	//alert(target +":"+ exec[target] +":"+ dir[target]);

	if(!exec[target])
		exec[target] = 0;

	if(!dir[target])
		dir[target] = 'open';

	if(dir[target] == 'open') {
	
		exec[target] = exec[target] + speed;
		if(exec[target] < expandTo) {
			document.getElementById(target).style.height = (exec[target]) + "px";
			setTimeout("startExpand('" + target + "'," + expandTo + "," + speed + ")",1);
		} else {
			document.getElementById(target).style.height = (expandTo) + "px";
			dir[target] = 'close';
		}
		
	} else {
	
		exec[target] = exec[target] - (speed*2);
		if(exec[target] > 0) {
			document.getElementById(target).style.height = (exec[target]) + "px";
			setTimeout("startExpand('" + target + "'," + expandTo + "," + speed + ")",1);
		} else {
			document.getElementById(target).style.height = "0px";
			dir[target] = 'open';
		}
	
	}
}


//var so_target;
var so_interval;

function slide(target, expandTo, speed) {
	var intv_call = 'slideIt(\'' + target + '\',' + expandTo + ')';
	clearInterval(so_interval);
	so_interval = setInterval(intv_call,speed);
}

function slideIt(target, expandTo) {
	
	var current = document.getElementById(target).offsetHeight;
	distTo = Math.abs(current - expandTo);
	
	var goSize = distTo/6;
	if( goSize < 1 ) goSize = 1;
	
	if( current > expandTo ) {
		//make shorter
		document.getElementById(target).style.height = (current-goSize) + "px";
	} else {
		// make taller
		document.getElementById(target).style.height = (current+goSize) + "px";
	}
	
	if( distTo < 2 ) {
		// very close, kill the timer, set it to the right height
		document.getElementById(target).style.height = expandTo + "px";
		clearInterval(so_interval);
	}
	
	//alert(distTo +":"+ goSize);
	
}

HTML Teil
PHP:
<strong onclick="startExpand('ID_DES_DIVS',40,3);">SHOW</strong>
<div id="ID_DES_DIVS" style="display: block; height: 0; overflow: hidden;">DAS WIRD NACH KLICK AUF SHOW GEZEIGT!!</div>
startExpand('ID_DES_DIVS',40,3)
40 = kA?!? musst du mal herrausfinden wofür das ist
3 = Geschwindigkeit beim "einsliden".

MfG
Alex
 
selbst ich als laie sehe das raus:
startExpand(target, expandTo, speed)

Expandto - evtl. wie HOCh der "eingeslidete" teil ist? :fresse:

aber danke schonmal, ich teste mal erstmal :)
 
*spam*ich mags halt andere als blöd darzustellen auch wenn ses nit sind :fresse:*/spam*

ne versuch das mal und ich werd evtl nachher noch mal a weng rumtesten und gucken ob ich das mit den externen dateien noch hinbekomme. Eigentlich muss man ja bf2s nur einbisschen auseinander nehmen und alles unnötige was man nicht brauch rauslöschen ;)
 
das mit der externen datei wäre erstmal nicht so schlimm .. lieber wäre mir, dass der derzeit offene div geschlossen wir, bevor ein neuer geöffnet wird ;)

ansonst klappts super mit mhereren bis auf dass die sich nicht gegenseitig schließen ;)
 
das sich die gegenseitig schließen bekomm ich auch noch hin auch wenn ich kein js kann ;) naja ich hab feierabend bye bye
 
Hardwareluxx setzt keine externen Werbe- und Tracking-Cookies ein. Auf unserer Webseite finden Sie nur noch Cookies nach berechtigtem Interesse (Art. 6 Abs. 1 Satz 1 lit. f DSGVO) oder eigene funktionelle Cookies. Durch die Nutzung unserer Webseite erklären Sie sich damit einverstanden, dass wir diese Cookies setzen. Mehr Informationen und Möglichkeiten zur Einstellung unserer Cookies finden Sie in unserer Datenschutzerklärung.


Zurück
Oben Unten refresh