Button kreist nach oben

DonPharao · 11.11.2012

Wie kann ich dies lösen:
Und zwar wenn ich nun auf Kontakt Button klicke soll es den äußeren Kreis nach oben drehen mit dem Button

Der Kreis außen ist ein Bild.

Hier eine Demo wie die Seite aussieht:

mfg DonPharao

hub · 11.11.2012

AW: Button kreist nach oben

Moin moin,
für die schnelle Lösung: für jQuery gibt es ein rotate - plugin. Damit sollte es lösbar sein.

Gruß Ulli

Duddle · 11.11.2012

AW: Button kreist nach oben

Mir fallen da zwei Wege ein:
Entweder hast du 4 statische Bilder mit den möglichen Anordnungen. Sobald du auf einen Button drückst, dreht sich das Bild (z.B. mit ). Da jetzt aber alle Elemente auf ihrer Seite stehen, blendest du das aktuelle Bild aus und das Bild mit der derzeitigen Anordnung (aber richtigen Orientierung) ein.

Oder du behandelst die Buttons als einzelne Elemente und benutzt ein PlugIn wie um sie zu positionieren. Damit werden die Elemente nur kreisförmig verschoben, nicht gedreht.

Duddle

mapegele · 11.11.2012

AW: Button kreist nach oben

Zunächst mal herzlich willkommen hier im Forum.

Die Idee von Ulli kenne ich jetzt nicht, wäre mir aber unbedingt ein Versuch wert.

Vom Fleck weg hätte ich es (bitte jetzt nicht hauen) in Flash versucht umzusetzen, wenn es denn unbedingt solch eine Funktion sein soll.

Verpixelte Grüße

Edit: @ Duddle -> danke für den Tipp auf Radmenu. Sieht interessant aus. Kannte ich noch nicht und werde es mal testen.

DonPharao · 11.11.2012

AW: Button kreist nach oben

Danke für die Tipps.

Könne mir einer mal ein Beispiel Code geben? Da ich mich bis jetzt nur mit PHP und HTML auseinander gesetzt habe und noch nicht in JavaScript.

Ist mein erstes Design mit solchen Effekten

Bin gespannt wie es wird.

hub · 11.11.2012

AW: Button kreist nach oben

Das Radmenu kannte ich auch noch nicht. Dank @Duddle.
@DonPharao: Bei beiden Plugins gibt es brauchbare Beschreibungen und zum Teil umfangreiche Code-Beispiele.

Gruß Ulli

Lycanos · 11.11.2012

AW: Button kreist nach oben

Interessante Idee, halte uns bitte auf dem Laufenden und poste mal das Ergebnis

DonPharao · 11.11.2012

AW: Button kreist nach oben

Werde ich auf jeden fall machen

Sorry wenn ich wieder etwas frage, aber ich finde dazu nichts :/ Und zwar möchte ich diesen Effekt "Shake":
http://jqueryui.com/effect/

haben wenn der Gast als erstes auf die Seite kommt

Nun weiß ich nicht wie ich dies schreiben soll ohne das der Gast auf etwas drücken muss. Ich hoff ich nerve euch nicht mit meinen Problemen, hab erst angefangen mit HTML und PHP

Hier mein Code:

Code:

<!doctype html>
 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Effects - Show Demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <style>
    .toggler { width: 500px; height: 200px; }
    #button { padding: .5em 1em; text-decoration: none; }
    #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
    #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
    </style>
    <script>
    $(function() {
        // run the currently selected effect
        function runEffect() {
            // get effect type from
            var selectedEffect = $( "#effectTypes" ).val();
 
            // most effect types need no options passed by default
            var options = {};
            // some effects have required parameters
            if ( selectedEffect === "scale" ) {
                options = { percent: 100 };
            } else if ( selectedEffect === "size" ) {
                options = { to: { width: 280, height: 185 } };
            }
 
            // run the effect
            $( "#effect" ).show( selectedEffect, options, 500, callback );
        };
 
        //callback function to bring a hidden box back
        function callback() {
            setTimeout(function() {
                $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
            }, 1000 );
        };
 
        // set effect from select menu value
        $( "#button" ).click(function() {
            runEffect();
            return false;
        });
 
        $( "#effect" ).hide();
    });
    </script>
</head>
<body>
 
<div class="toggler">
    <div id="effect">

        <p>
                <img src="http://www.psd-tutorials.de/forum/images/kreis.png" alt="Tanzmaus">
        </p>
    </div>
</div>
 
<select name="effects" id="effectTypes">
    <option value="blind">Blind</option>
    <option value="bounce">Bounce</option>
    <option value="clip">Clip</option>
    <option value="drop">Drop</option>
    <option value="explode">Explode</option>
    <option value="fold">Fold</option>
    <option value="highlight">Highlight</option>
    <option value="puff">Puff</option>
    <option value="pulsate">Pulsate</option>
    <option value="scale">Scale</option>
    <option value="shake">Shake</option>
    <option value="size">Size</option>
    <option value="slide">Slide</option>
</select>
 
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
 
 
</body>
</html>

dct · 11.11.2012

AW: Button kreist nach oben

Hallo,

deine Frage kann ich absolut nicht beantworten (Niemandsland für mich) - wollt Dir aber trotzdem schreiben, dass mir Dein Bild und das Farbenspiel sehr gut gefällt. Also ich würd auf deiner Seite vor Neugierde gleich weiterklicken und mir alles anschauen.

LG dct

DonPharao · 11.11.2012

AW: Button kreist nach oben

dct schrieb:
Hallo,

deine Frage kann ich absolut nicht beantworten (Niemandsland für mich) - wollt Dir aber trotzdem schreiben, dass mir Dein Bild und das Farbenspiel sehr gut gefällt. Also ich würd auf deiner Seite vor Neugierde gleich weiterklicken und mir alles anschauen.

LG dct

Danke. Mein Thema war:
-Werbeagentur Design

Ich brauchte was junges und etwas wo es so noch nicht so oft gibt. Wenn dies alles mit den Effekten klappt was ich will dann bin ich froh

Und genau des wollte ich erreichen das ein Gast auf die Seite bleibt und sagt "WOW", bei dene lasse ich ein Design machen

cebito · 11.11.2012

AW: Button kreist nach oben

DonPharao schrieb:
Und genau des wollte ich erreichen das ein Gast auf die Seite bleibt und sagt "WOW", bei dene lasse ich ein Design machen

Das wird aber nicht passieren, wenn du die Seite zu sehr mit Effekten überfrachtest, dann nehmen die meisten eher reißaus. Das würd ich z.B. auch tun, wenn ich auf eine Seite komme und die sich erstmal schüttelt wg. meinem Anblick?! So schrecklich seh ich nun nicht aus.
Wenn du den Effekt jetzt immer noch haben willst, musst du die function mit load aufrufen

PHP:

$(window).load(function () {
  // schüttel dich
});

Duddle · 11.11.2012

AW: Button kreist nach oben

Du solltest es dir abgewöhnen, Code-Beispiele zu kopieren ohne sie zu verstehen (ich gehe stark davon aus, dass das hier der Fall ist). Gerade wenn du Anfänger bist, ist es sehr viel sinnvoller die Grundlagen zu verstehen, bevor du in die höheren Sphären steigst - sonst musst du bei jedem kleinen Problem immer wieder fragen.

Wenn der Nutzer auf die Seite kommt wird nach Laden des Dokumentes ein Event gefeuert, den du mit jQuerys .ready() behandeln kannst. Ob dir das jetzt hilft, bezweifle ich aber. Es wäre aber noch weniger hilfreich, dir die Lösung zu präsentieren, dann wären wir wieder bei oben genanntem Problem.

Duddle