Demo

Probiere ClanSphere aus und teste daran herum. Demo


Antworten: 6
Seite [1]
Leitwolf


Try to beat me





Beiträge: 188
# Thema - 27.02.2011 um 14:29 Uhr
Guten Tag zusammen,

ich habe heute etwas gesehen was ich für meine Page auch gerne hätte, es geht um einen Mouseovereffekt der mit Javascript umgesetzt wird. In Sachen Js habe ich leider Null Ahnung und hoffe auf Eure kompetente Hilfe...

Ich habe auf meiner "Bastel & Testseite" dieses Template eingefügt und mir gefallen die Mouseovereffekte von den Links (Menüpunkte) sehr gut & wollte diese gerne auf meine normale Page übernehmen.

Das JavaScript +-

$(document).ready(function(){

$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

$("ul.topnav li span").hover(function() { //When trigger is clicked...

//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
&#125;

//Following events are applied to the trigger (Hover events for the trigger)
&#125.hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
&#125;

&#125;

$(".navbody").hover(
function(){
$(this).animate({
marginBottom: "40px"
}, 400 );
},
function(){
$(this).animate({
marginBottom: "0px"
}, 400 );
}
);
$("a").hover(
function(){
$(this).animate({
opacity: 0.7
}, 400 );
},
function(){
$(this).animate({
opacity: 1
}, 400 );
}
);
$("#head_container").hover(
function(){
$("#head_logo").animate({
opacity: 0.9
}, 400 );
$("#head_shadow").animate({
opacity: 0.2
}, 400 );
$("#head_shadow").animate({
opacity: 0.5
}, 400 );
},
function(){
$("#head_logo,#head_shadow").animate({
opacity: 1
}, 400 );
}
);


Könntet Ihr mir helfen das Script so anzupassen das es bei mir funktioniert? In meiner CSS werden die "Links" auch mit "a" angepasst, wenn ich das Script 1:1 übernheme funktioniert es leider nicht.

Vielen Dank schonmal...


------------------


Zuletzt editiert von Leitwolf am 27.02.2011 um 14:30 Uhr (1x Editiert)
Inaktiv
ichraffsnicht ClanSphere Team

Supporter
Supporter



Herkunft: Erdeborn bei Lutherstadt Eisleben
Beiträge: 3191
# Antwort: 1 - 27.02.2011 um 15:15 Uhr
das template ist von mir ;-)

erstell dir eine datei in deinen template verzeichnis z.b. template.js mit folgenden inhalt:

$("a").hover(
function(){
$(this).animate({
opacity: 0.7
}, 400 );
},
function(){
$(this).animate({
opacity: 1
}, 400 );
}
);


dann füge am ende deines templates direkt vor </body> folgendes ein

{func:javascript}
<script src="template.js" type="text/javascript"></script>

speichern, fertig^^


------------------



Inaktiv
|
Leitwolf
Thread-Ersteller


Try to beat me





Beiträge: 188
# Antwort: 2 - 27.02.2011 um 16:32 Uhr
Besten Dank funktioniert super!


------------------


Inaktiv
|
ichraffsnicht ClanSphere Team

Supporter
Supporter



Herkunft: Erdeborn bei Lutherstadt Eisleben
Beiträge: 3191
# Antwort: 3 - 27.02.2011 um 18:03 Uhr
gerne doch ;-)


------------------



Inaktiv
|
Jam2 ClanSphere Team


Highlander





Beiträge: 3291
# Antwort: 4 - 27.02.2011 um 19:24 Uhr
Hallo X-R4Y, natürlich auch die anderen...

mir kam gerade noch eine Idee zu dem Thema leider warst Du etwas flink und hast das Thema schon geschlossen ;-)

Lässt es sich machen wenn jemand einen Link anklickt das dieser kurz größer wird? Quasi auf einen zukommt....

Danke...!



http://www.csphere.eu/index/board/thread/where/15110


------------------
Gruß/ Best regards
Jam2

Nützliche Forumbeiträge/Codepastes: (Useful comments in our board / codepastes)
Template Switch for index.php
Board Navlist last posts

Edi: könnte man denn auch hier eine erweiterung einfügen?
Jam2: das web ist wie toyota.....
Edi: hö ?
Jam2: nichts ist unmöglich!


Inaktiv
|
ichraffsnicht ClanSphere Team

Supporter
Supporter



Herkunft: Erdeborn bei Lutherstadt Eisleben
Beiträge: 3191
# Antwort: 5 - 27.02.2011 um 20:00 Uhr
was heißt kurz bei dir?^^

wie genau stellst du es dir vor?

maus drauf - wird größer und bleibt groß bis ich wieder runter gehe mit der maus

oder

maus drauf - wird größer - wird normal ohne das die maus runter mus^^


btw:

http://www.csphere.eu/support/static/view/id/6

auszug:
Dieser muss jederzeit, ohne Interaktion des Besuchers, sichtbar sein.


am besten packst du ihn in den footer.

vorher gehts hier ned weiter ;-)


------------------



Zuletzt editiert von X-R4Y ClanSphere Team am 27.02.2011 um 20:12 Uhr (1x Editiert)
Inaktiv
|
Leitwolf
Thread-Ersteller


Try to beat me





Beiträge: 188
# Antwort: 6 - 28.02.2011 um 04:19 Uhr
Guten Morgen X-R4Y,

Deinen Wunsch für den Link zur "About - Seite" bin ich nachgekommen, ein Link ist jetzt im Footer enthalten.

Der Effekt den ich mir wünsche soll den Klick bestätigen und insgesamt 0,2 Sekunden dauern (sag ich jetzt mal so) Evtl 0.1 Sekunde die Schrift wird größer und 0,1 Sekunde die Schrift geht in die Ursprungsgröße zurück.

Wahrscheinlich verschieben sich dann auch Textelemente um den Link herum, oder? Kann man das "Objekt" auf das man geklickt hat als "Bild" ansehen lassen? Wenn ich ein >Wort< vergrößere ist ja der Ausgangspunkt linksbündig für das Wachstum, das "W" (W vom Wort als Bsp.) ich hatte mir es aber so vorgestellt das der Effekt zentrischen Ursprung hat und Elemente herum unberührt bleiben.

Ich hoffe ich habe das ganze jetzt etwas besser Erklärt und wünsche Euch n guten Start in die neue Woche...!


------------------


Zuletzt editiert von Leitwolf am 28.02.2011 um 04:20 Uhr (1x Editiert)
Inaktiv
|
Antworten: 6
Seite [1]


Sie müssen sich registrieren, um zu antworten.