Antworten zum Thema „Side-Panel für die Website“

armanix · 04.02.2010

Ich suche für meine Website ein Panel an der Seite des Bildschirms. Ähnlich wie auf folgender Seite:

SlideDeck | Free Slideshow Software Download, Slide Show jQuery Plugin Javascript Library

Ich habe den Quellcode soweit reduziert, dass nur noch der entscheidende Quelltext übrig blieb (siehe hier)

Code:

<script type="text/javascript" charset="utf-8">
var is_ssl = ("https:" == document.location.protocol);
var asset_host = is_ssl ? "https://s3.amazonaws.com/getsatisfaction.com/" : "http://s3.amazonaws.com/getsatisfaction.com/";
document.write(unescape("%3Cscript src='" + asset_host + "javascripts/feedback-v2.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript" charset="utf-8">
var feedback_widget_options = {};

feedback_widget_options.display = "overlay";  
feedback_widget_options.company = "slidedeck";
feedback_widget_options.placement = "left";
feedback_widget_options.color = "#222";             <!-- Hintergrundfarbe des Fähnchens -->
feedback_widget_options.style = "question";

var feedback_widget = new GSFN.feedback_widget(feedback_widget_options);
</script>

Es handelt sich hierbei also um ein Java-Script (oder Mootools o.Ä.)
Beim anklicken soll sich eine Fancybox öffnen (wie es des Fähnchen bisher auch macht) allerdings mit einem Bild - und nicht als Anfrage-Formluar.

Habt ihr eine Ahnung wie das Script heißt (Jquery / Mootool / JavaScript) oder könnt ihr mir sagen, wo ich es als OpenSource herbekomme ?

Danke schonmal !

leveler · 04.02.2010

AW: Side-Panel für die Website

<script type="text/javascript" src=""></script>

so wie ich das im quellcode sehe, wird`s wohl 'scriptaculous' sein

armanix · 04.02.2010

AW: Side-Panel für die Website

leveler schrieb:
so wie ich das im quellcode sehe, wird`s wohl 'scriptaculous' sein

Das wäre schon mal ein Ansatz ... nur leider erzählt mir das jetzt noch nicht wirklich, wie das Script(aculous) heißt !?

Weißt du wo ich es finde ?

LG

esupanetz · 04.02.2010

AW: Side-Panel für die Website

"Das script(aculos)" wird in der Zeile die leveler reinkopiert hat ziemlich genau vorgestellt (wo und wie du es finden kannst)

Ansonsten kopier ich dir eine Zeile aus dem Code des Scripts raus:
For details, see the script.aculo.us web site: script.aculo.us - web 2.0 javascript

lG

Eva

leveler · 04.02.2010

AW: Side-Panel für die Website

script.aculo.us ist eine JavaScript-Bibliothek, die auf dem JavaScript-Framework aufbaut. Sie bietet dynamische visuelle Effekte und GUI-Elemente über das Document Object Model (DOM).

Weißt du wo ich es finde ?

script.aculo.us - web 2.0 javascript

ist nur meine Vermutung, kein Plan, ob die Funktionen tatsaechlich nicht doch auf einem anderen Script beruhen...aber das war das einzige was mir im Quelltext ins Auge sprang und von der Funktionalitaet dem entspricht, was ich ueber prototype/ scriptaculuos weiss...muss also nicht richtig sein...

armanix · 04.02.2010

AW: Side-Panel für die Website

leveler schrieb:
script.aculo.us - web 2.0 javascript

ist nur meine Vermutung, kein Plan, ob die Funktionen tatsaechlich nicht doch auf einem anderen Script beruhen...aber das war das einzige was mir im Quelltext ins Auge sprang und von der Funktionalitaet dem entspricht, was ich ueber prototype/ scriptaculuos weiss...muss also nicht richtig sein...

Auf der Seite war ich schon und bin leider nicht fündig geworden ... vielleicht suche ich aber auch einfach nach dem falschen Namen !? Findest du dazu nen DirectLink ?

leveler · 04.02.2010

AW: Side-Panel für die Website

script.aculo.us - downloads

esupanetz · 04.02.2010

AW: Side-Panel für die Website

Hi armanix,

wenn du HTML lesen kannst brauchst du die script.aculo.us-Seite gar nicht........ Sondern kannst dir den Quellcode es JavaScripts direkt anschauen

lg

Eva

armanix · 04.02.2010

AW: Side-Panel für die Website

esupanetz schrieb:
Hi armanix,

wenn du HTML lesen kannst brauchst du die script.aculo.us-Seite gar nicht........ Sondern kannst dir den Quellcode es JavaScripts direkt anschauen

lg

Eva

Danke Eva für deine Antwort !

Aber wie du schon geschrieben hast ist JAVASCRIPT kein HTML ... vor allem weil ich aus dem Quelltext nicht schlau werde - Es werden 2 JavaScripts ausgeführt (ohne externe Datei) aber keines der Scripte geht z.B. auf das Aussehen ein.
Ich habe schon rausgefunden, dass eine Art Datenbank oder XML in die Fancybox geladen wird ... allerdings ist das ja nicht, um was es geht !

Ich möchte wissen, wie ich so ein "Fähnchen" da hinbekomme (selbes Aussehen und selbe Animation) - Per onClick kann ich dann die Fancybox öffnen lassen, das ist mir klar !

armanix · 04.02.2010

AW: Side-Panel für die Website

leveler schrieb:
script.aculo.us - downloads

Da war irgendwie nix für mich dabei !

leveler · 04.02.2010

AW: Side-Panel für die Website

also es geht um dieses "Get Support"-Kaesztchen/Faehnchen, oder?! den quelltext dazu hast Du ja schon rausgefischt ( per firebug ?)

evt. hilft Dir das hier weiter:

armanix · 04.02.2010

AW: Side-Panel für die Website

leveler schrieb:
also es geht um dieses "Get Support"-Kaesztchen/Faehnchen, oder?! den quelltext dazu hast Du ja schon rausgefischt ( per firebug ?)

evt. hilft Dir das hier weiter:

Nö, nicht per Firebug ... hab einfach alle "nichtbenötigten" Ellemente gelöscht und auf nen Server von mir hochgeladen (natürlich mit den entsprechenden Verlinkungen zur Originalseite)

Dein Link hat leider nix geholfen ... ich brauche keine Hilfe zur Fancybox sondern zu dem "Fähnchen" (das "Get Support"-Kästchen) Fancybox ist nur eine Abwandlung der Lightbox (also zum Bilder anschauen)

leveler · 04.02.2010

AW: Side-Panel für die Website

also ich weiss jetzt nicht so genau, worin Dein Problem besteht...gehts grundsaetzlich darum, so ein Faehnchen zu bauen und zu platzieren? oder die aktion als solche, dass wenn man drauf klickt, neuer inhalt( a la lightbox) geoeffnet wird?
das ding zu bauen und zu platzieren sollte keine grosse sache sein, untersuche es halt nochmal mit firebug.......die aktion wirdt so ausgeloest:
gib dem element eine id/class und eine onClick-Definiton, die halt, je nach eingebundenem JS, entsprechend benannt sein muss,damit`s funzt..
hier nochmal ein anderer link:
Highslide JS - JavaScript thumbnail viewer

unter "with HTML" sollte es das sein, was Du suchst...

armanix · 05.02.2010

AW: Side-Panel für die Website

leveler schrieb:
also ich weiss jetzt nicht so genau, worin Dein Problem besteht...gehts grundsaetzlich darum, so ein Faehnchen zu bauen und zu platzieren? oder die aktion als solche, dass wenn man drauf klickt, neuer inhalt( a la lightbox) geoeffnet wird?
das ding zu bauen und zu platzieren sollte keine grosse sache sein, untersuche es halt nochmal mit firebug.......die aktion wirdt so ausgeloest:
gib dem element eine id/class und eine onClick-Definiton, die halt, je nach eingebundenem JS, entsprechend benannt sein muss,damit`s funzt..
hier nochmal ein anderer link:
Highslide JS - JavaScript thumbnail viewer

unter "with HTML" sollte es das sein, was Du suchst...

Also nochmal:
Es geht mir darum, wie ich so ein Fähnchen erstelle (das würde theoretisch ja noch mit XHTML und CSS gehen), es so am Rand platziere (würde auch noch mit CSS gehen) und einen solchen mouseOver (das Fähnchen "rutscht" ein wenig nach innen).
In dem beschriebenen Quelltext wir das Fähnchen allerdings nicht per XHTML und CSS erzeugt ... und genau darin besteht meine Frage !?

Ein onClick Element zuzuweisen ist dann denke ich kein Thema ...

armanix · 05.02.2010

AW: Side-Panel für die Website

Im übrigen habe ich ja auch die CSS rausgelöscht ... kann also gar nicht damit formatiert sein

MyBad · 05.02.2010

AW: Side-Panel für die Website

Das Teil muss aber per CSS positioniert worden sein, selbst wenn es "on the Fly" durch ein JavaScript erzeugt worden sein sollte.

Ich sehe da also überhaupt kein Problem!

armanix · 05.02.2010

AW: Side-Panel für die Website

Ist es aber nicht ... weder im header noch als externe Datei ist ein CSS definiert !
Ich habe den notwendigen Quelltext (also das JavaScript) extrahier und als neue HTML Datei gespeichert - Hier der Quelltext !

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>TestSeite Slider 2</title>        
	</head>
    
    
    
    
    
<body>



<script type="text/javascript" charset="utf-8">
var is_ssl = ("https:" == document.location.protocol);
var asset_host = is_ssl ? "https://s3.amazonaws.com/getsatisfaction.com/" : "http://s3.amazonaws.com/getsatisfaction.com/";
document.write(unescape("%3Cscript src='" + asset_host + "javascripts/feedback-v2.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript" charset="utf-8">
var feedback_widget_options = {};

feedback_widget_options.display = "overlay";  
feedback_widget_options.company = "slidedeck";
feedback_widget_options.placement = "left";
feedback_widget_options.color = "#e2001a";     /* Hintergrundfarbe der Fahne */
feedback_widget_options.style = "question";

var feedback_widget = new GSFN.feedback_widget(feedback_widget_options);

</script>




</body>
</html>

Funktioniert einwandfrei ! Habe schon rausgefunden, wo man die Hintergrundfarbe ändert ... mehr aber auch nicht - also auch nicht die Beschriftung !?

MyBad · 05.02.2010

AW: Side-Panel für die Website

Habe es gerade mit FireBug untersucht:

HTML:

a#fdbk_tab {
background-image:url(http://s3.amazonaws.com/getsatisfaction.com/images/feedback_trans_tab.png);
color:#FFFFFF;
cursor:pointer;
height:102px;
left:0;
margin-left:-7px;
overflow:hidden;
position:fixed;
text-indent:-100000px;
top:25%;
width:42px;
z-index:100000;
}

Das JS erzeugt also wie schon geschrieben sicherlich die CSS on the Fly.

Das Script wir von einem Drittanbieter abgerufen. Und zwar diesem hier:

Es gibt mehrere Seiten, die diesen Service nutzen.

armanix · 05.02.2010

AW: Side-Panel für die Website

Ahhh ... habe gerade gesehen, dass ein JS in einer ausgelagerten Datei auf nem Server liegt (bissle komplizierte SRC-Angabe

)

https://s3.amazonaws.com/getsatisfaction.com/javascripts/feedback-v2.js

Vielleicht hilft euch das weiter, mir zu helfen

MyBad · 05.02.2010

AW: Side-Panel für die Website

Kann es sein, dass du es nicht verstehen willst? Das ist eine externe Dienstleistung. Wenn du was eigenes haben möchtest, musst du das Fähnchen schon per CSS positionieren.

Du kannst dich auf deren Internetseite anmelden, deren JS bei dir einbinden und dann hast du auch so ein tolles Feedback-Formular mit dem Fähnchen auf deiner Page. Aber du willst ja was eigenes. Also positionier den Link per css und verlinke es mit deinem Bild, dass dann über die Lightbox aufgerufen wird. So kompliziert ist das doch nun echt nicht...

Es gibt doch mehrere Wege zum Ziel!