• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Tagcloud mit jquery.tagcloud.js

V

vitek

New member
Hallo Leute,

bin ziemlich neu auf dem JS Gebiet und habe eine kleine "Tagwolke" schon zum laufen bekommen.
Das wird folgenderweise gebaut:

HTML: 
<!doctype html public "lice">
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
	<head>
    <meta charset="utf-8">
    <title>jquery tagcloud</title>
    
		<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
		<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="jquery.tagcloud.min.js"></script>
		<script type="text/javascript" src="jquery.tinysort.min.js"></script>
		<script type="text/javascript">
			<!--
			$(function(){
				$("h1").text("jQuery."+$.tagcloud.id+" "+$.tagcloud.version);
				$("#page>table>tbody>tr:odd").addClass("odd");
				$("#page>table>tbody>tr:even").addClass("even");
				$("#page tbody>tr").find("td:eq(0)").addClass("property");
				$("#footer").html($("#footer").html().replace(/(project)/,$.tagcloud.id));
 
				var mMenu = $("<ul id=\"menu\" />").appendTo("#header");
				$("h2").each(function(i,o){
					mMenu.append("<li> <a href=\"#"+$(this).text()+"\">"+$(this).text()+"</a></li>");
					$(this).attr("id",$(this).text());
				});
 
				var aLi = $("#delicious>li");
				var iLi = aLi.length;
				$.each(aLi,function(i,o){
					//$(o).val(iLi-i);
					//$(o).val(Math.round(iLi*Math.sqrt(1-i/iLi)));
					$(o).val(Math.round(iLi*Math.pow(1-i/iLi,2))).attr("title",$(o).text());
				});
				
 
				$("pre.example").each(function(i,o){
					var mPre = $(o);
					var aTg = mPre.text().match(/(\w+)(?=#)/);
					var sTg = aTg===null?"ul":aTg[0];
					var sId = mPre.text().match(/(?:#)(\w+)/)[1];
					mPre.after("<"+sTg+" id=\""+sId+"\" class=\"xmpl\"></"+sTg+">").after("<p>test: <a onclick='"+mPre.text().replace(/\n/g,"")+"'>create tagcloud</a> or <a onclick=\"refill('"+sId+"')\">reset</a></p>");
					refill(sId);
				});
			});
 
			function refill(s) {
				var mList = $("#"+s);
				mList.html($("#delicious>li").clone());
				$.each(["list-style","margin","padding","position","height"], function(i,o){ mList.css(o,$("#delicious").css(o)); } );
			}
			-->
		</script>
	</head>
	<body>
		<div id="header">
			<h1><span>TagCloud</span></h1>
		</div>
		<div id="page">
 
			


			<pre class="example">$("#xlist").tagcloud({height:"auto", type:"list",sizemin:12,colormin:"5297ff"}).find("li").tsort();</pre>


 
			<ul id="delicious" class="">
                                              <li><a href="https://link1">Link 1</a></li>
                                              <li><a href="https://link2">Link 2</a></li>
                                              <li><a href="https://link3">Link 3</a></li>
                                              <li><a href="https://link4">Link 4</a></li>
                                              <li><a href="https://link5">Link 5</a></li>
                                              <li><a href="https://link6">Link 6</a></li>
                                              <li><a href="https://link7">Link 7</a></li>
                                              <li><a href="https://link8">Link 8</a></li>
 			</ul>
 
		</div>
		<div id="footer"> 
		</div>
		
	</body>

Die benötigten Dateien finden sich hier:
Anhang anzeigen tagcloud-master.zip


Jetzt habe ich eine blöde Frage: ich muss ja auf der so entstandenen HTML Seite auf "create tagcloud" drücken um diese cloud auch zu bekommen.
Ich blicke leider noch nicht so ganz durch durch die jquery Geschichte.

Meine Frage: Wie gestalte ich denn das damit die Tagcloud gleich beim laden der Seite generiert wird?

Hoffe ihr könnt mir helfen!

Danke und Gruß
Viktor
 
Äh... warum hast du denn überhaupt dieses seltsame Konstrukt mit dem <pre>? Wenn du das nicht haben willst, kannst du den Code, der im <pre> steht doch gleich im window.onload() ausführen.
 
Ja super. So habe ich mir das vorgestellt.
Mit dem hier klappt es wunderbar
Code: 
<script type="text/javascript">
window.onload=function(){
	$("#xlist").tagcloud({height:"auto", type:"list",sizemin:12,colormin:"5297ff"}).find("li").tsort();
}
</script>

dank dir.
 
Allerdings sehe ich grade dass der IE8 den code in function() nicht ausführt?!?
Packe ich da ein bloßes alert('hello'); rein dann wird es ausgeführt. Aber das mit $("#xlist").... wird nur ausgeführt wenn ich
die Variante mit dem drauf klicken verwende...

Hat jemand noch ein Tip?
 
Diese Art von Eventlistenerregistrierung ist veraltet (ich weiß, dass ich es so geschrieben habe - tut mir leid... schreibe das immer so aus Faulheit). Da du schon jQuery am Start hast, kannst du das auch dafür verwenden:
Code: 
$(document).ready(function(){
	$("#xlist").tagcloud({height:"auto", type:"list",sizemin:12,colormin:"5297ff"}).find("li").tsort();
});
- vielleicht verschwindet damit auch das Problem im IE8, den ich ja noch maximal für das nächste halbe Jahr unterstützen würde...

PS: Steht im IE8 etwas in der Fehlerkonsole?
 
Funktioniert leider auch nicht außer ich setze das <pre> Konstrukt davor dann gehts.
Das ist doch bestimmt dieses class="example" im <pre> oder?
Kann man das class Attribut auch ohne das <pre> definieren? Sonst hat man ja den Ausdruck
$("#xlist").tagcloud({height:"auto", type:"list",sizemin:12,colormin:"5297ff"}).find("li").tsort();
auf der Seite stehen...

Danke nochmal!
 
auweia, das ist je echt übel, wer kommt auf so eine idee(mit dem pre)?

was schreibt der denn in das pre rein (im original)? da werden doch auch noch tags geschrieben
wann wird denn dein ready-handler ausgeführt? vor oder nach dem ursprünglichen?
 
Das wurde von mir aus einem Beispiel extrahiert...
Gefunden habe ich es unter jquery tagcloud.

Mit den weiteren Fragen bin ich etwas überfragt... Vor allem mit dem ready-handler...
 
Stimmt - da ist ja schon ein ready-Handler... hatte ich ganz übersehen.

@vitek: pack den Code aus dem <pre> einfach da hin, wo jetzt das
Code: 
$("pre.example").each(function(i,o){ ...});
steht. Das pre.example Zeugs kannst du dann löschen.
 
kkapsner schrieb:
pack den Code aus dem <pre> einfach da hin, wo jetzt das
Code: 
$("pre.example").each(function(i,o){ ...});
steht. Das pre.example Zeugs kannst du dann löschen.
Zum Vergrößern anklicken....

vorsicht, ich überblicke jedenfalls nicht, was er da in dem each generiert, und ob der code aus dem (ehemaligen) clickhandler darauf aufsetzt.
(bzw. vermute eigentlich, das sind die tags)
 
Ich bekomme das einfach nicht zum laufen... :( :(
im Moment sieht es so aus:
Code: 
$(function(){
				$("h1").text("jQuery."+$.tagcloud.id+" "+$.tagcloud.version);
				$("#page>table>tbody>tr:odd").addClass("odd");
				$("#page>table>tbody>tr:even").addClass("even");
				$("#page tbody>tr").find("td:eq(0)").addClass("property");
				$("#footer").html($("#footer").html().replace(/(project)/,$.tagcloud.id));
 
				var mMenu = $("<ul id=\"menu\" />").appendTo("#header");
				$("h2").each(function(i,o){
					mMenu.append("<li> <a href=\"#"+$(this).text()+"\">"+$(this).text()+"</a></li>");
					$(this).attr("id",$(this).text());
				});
 
				var aLi = $("#delicious>li");
				var iLi = aLi.length;
				$.each(aLi,function(i,o){
					//$(o).val(iLi-i);
					//$(o).val(Math.round(iLi*Math.sqrt(1-i/iLi)));
					$(o).val(Math.round(iLi*Math.pow(1-i/iLi,2))).attr("title",$(o).text());
				});
				
 				$("#delicious").tagcloud({height:"auto", type:"list",sizemin:12,colormin:"5297ff"}).find("li").tsort();
			});

und

Code: 
	<body>
		<div id="header">
			<h1><span>TagCloud</span></h1>
		</div>
		<div id="page">
 
			


			

<script>
	$(document).ready(function(){
	$("#delicious").tagcloud({height:"auto", type:"list",sizemin:12,colormin:"5297ff"}).find("li").tsort();
});
</script>

 
			<ul id="delicious" class="">
                                              <li><a href="https://link1">Link 1</a></li>
                                              <li><a href="https://link2">Link 2</a></li>
                                              <li><a href="https://link3">Link 3</a></li>
                                              <li><a href="https://link4">Link 4</a></li>
                                              <li><a href="https://link5">Link 5</a></li>
                                              <li><a href="https://link6">Link 6</a></li>
                                              <li><a href="https://link7">Link 7</a></li>
                                              <li><a href="https://link8">Link 8</a></li>
 			</ul>
 
		</div>
		<div id="footer"> 
		</div>
		
	</body>

Und die Tagcloud wird nicht erzeugt, keine Ausgabe in Fehlerkonsole...
Hilfe, ich blick nicht mehr durch...

Danke und Gruß!
 
OK - man musste noch ein bisschen was anderes ändern (v.A. da im CSS das #delicious versteckt wird...)
Code: 
<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>jquery tagcloud</title>
    
		<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
		<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="jquery.tagcloud.min.js"></script>
		<script type="text/javascript" src="jquery.tinysort.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("h1").text("jQuery."+$.tagcloud.id+" "+$.tagcloud.version);
				$("#page>table>tbody>tr:odd").addClass("odd");
				$("#page>table>tbody>tr:even").addClass("even");
				$("#page tbody>tr").find("td:eq(0)").addClass("property");
				$("#footer").html($("#footer").html().replace(/(project)/,$.tagcloud.id));
 
				var mMenu = $("<ul id=\"menu\" />").appendTo("#header");
				$("h2").each(function(i,o){
					mMenu.append("<li> <a href=\"#"+$(this).text()+"\">"+$(this).text()+"</a></li>");
					$(this).attr("id",$(this).text());
				});
 
				var aLi = $("#xlist>li");
				var iLi = aLi.length;
				$.each(aLi,function(i,o){
					//$(o).val(iLi-i);
					//$(o).val(Math.round(iLi*Math.sqrt(1-i/iLi)));
					$(o).val(Math.round(iLi*Math.pow(1-i/iLi,2))).attr("title",$(o).text());
				});
				
				$("#xlist").tagcloud({height:"auto", type:"list",sizemin:12,colormin:"5297ff"}).find("li").tsort();
			});
		</script>
	</head>
	<body>
		<div id="header">
			<h1><span>TagCloud</span></h1>
		</div>
		<div id="page">
			<ul id="xlist" class="xmpl">
				<li><a href="https://link1">Link 1</a></li>
				<li><a href="https://link2">Link 2</a></li>
				<li><a href="https://link3">Link 3</a></li>
				<li><a href="https://link4">Link 4</a></li>
				<li><a href="https://link5">Link 5</a></li>
				<li><a href="https://link6">Link 6</a></li>
				<li><a href="https://link7">Link 7</a></li>
				<li><a href="https://link8">Link 8</a></li>
			</ul>
 
		</div>
		<div id="footer"> 
		</div>
		
	</body>
</html>
- hab' deswegen die ID auf "xlist" geändert.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben