Antworten auf deine Fragen:
Neues Thema erstellen

Side-Panel für die Website

armanix

Nicht mehr ganz neu hier

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 !
 

esupanetz

Immer wieder mal da :-)

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

00110100 00110010

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

Nicht mehr ganz neu hier

AW: Side-Panel für die Website

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 ?
 

esupanetz

Immer wieder mal da :-)

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

Nicht mehr ganz neu hier

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

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 !
 

leveler

00110100 00110010

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:
 
Zuletzt bearbeitet:

armanix

Nicht mehr ganz neu hier

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:

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

00110100 00110010

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

Nicht mehr ganz neu hier

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...

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 ...
 

MyBad

localhorst

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

Nicht mehr ganz neu hier

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

localhorst

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.
 
Zuletzt bearbeitet:

MyBad

localhorst

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!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.620
Beiträge
1.538.374
Mitglieder
67.544
Neuestes Mitglied
janusbarman
Oben