Beiträge von Garavani

Garavani

Hallo Synaptic,

doch ich verstehe schon, denke ich

Ich muss also den code-snippet immer wiederholen wenn ich ihn brauche (so wie ich es jetzt schon tue)
Habe nur einen Weg gesucht das skript schlanker zu machen.

Danke für Deine Ausführungen jedenfalls!

Gruß
Garavani

Garavani

Hallo Profis,

ich hoffe ich bin hier im richtigen Unterforum.
Meine Frage dreht sich um Javascript.

Eine simple Sache, denke ich, die ich trotz googlen und lesen nicht hinbekomme

function blabla() {
…
[INDENT]var comp = $.Edge.getComposition("animation_content"); [/INDENT]
[INDENT]var stage = comp.getStage();
stage.getSymbol("Stage").$("NextChart").attr("src","templates/Chart_"+ e.data.suggestion +"/images/Chart.gif");[/INDENT]
…
}

Ich möchte nun den fett markierten Teil in einer globalen Variable verstauen, weil dieser Teil sich in mehreren Funktion stets wiederholt
und ich den code etwas schlanker machen will.

Sollte also darauf hinauslaufen:[INDENT]var animation = "var comp = $.Edge.getComposition("animation_content"); [/INDENT]
[INDENT=4]var stage = comp.getStage();
[/INDENT]
[INDENT=4]stage.getSymbol("Stage")"[/INDENT]

function blabla() {
…
[INDENT]animation.$("NextChart").attr("src","templates/Chart_"+ e.data.suggestion +"/images/Chart.gif");[/INDENT]
…
}

Damit ich mich verständlich mache: es soll da kein Wert auftauchen (denn der liegt bei der Variablendefinition am Anfang noch nicht fest),
sondern nur stupide der gesamte string (der dann dort die enthaltenen Variablen definiert) in der jeweiligen Funktion eingesetzt werden.

Ich habe aber Probleme mit den Anführungsstrichen oder ähnliches, schätze ich.

Wie bekomme ich das hin?
Bin sicher es gibt einen einfachen Clou.

Danke!
Garavani

Garavani

Ich will die Type_Lab vom index aus per click öffnen in einem neuen Fenster und irgendwie eine Struktur reinbringen, die nur von der globalen Variable workChart abhängig ist,
so dass ich nach Zufügen neuer Ordner mit Inhalten (nummeriert nach workChart) nicht jedes Mal alle Links, srcs usw. per Hand überschreiben muss.
Aber das übersteigt wohl mein Denkvermögen.

Was mich auch einfach kirre macht ist, dass Dinge wie das hier:

$('#text').load('templates/Chart_" + workChart + "/characters/text.html #description');

einfach nicht funktionieren. Ich krieg die Variablen nicht in die Pfad strings rein.

Mann, Mann…
Danke für die Hilfe und Tipps

Garavani

- - - Aktualisiert - - -

Jetzt funktionierts. Lag wohl an den Anführungsstrichen

$('#text').load("templates/Chart_" + workChart + "/characters/text.html #description");

Trotzdem musste ich mir jetzt hinten rum in der Nase bohren um die globale(!-und ich dachte immer der Sinn einer globalen variable wäre, dass sie, während User die Seite benutzt, immer und von überall erreichbar ist )
überhaupt im neuen Fenster abrufbar zu machen

sData = window.location.search;
var workChart = sData.substr(11);

$(document).ready(function(){
[INDENT]…[/INDENT]
[INDENT]$('#text').load("templates/Chart_" + workChart + "/characters/text.html #description");
…[/INDENT]
}

und im Index:

window.open("Type_Lab.html?workChart=1", "g","status=0");

Kommt mir reichlich beknackt vor.
Denke ich da irgendwie grundliegend falsch?

Wie würdet ihr so etwas angehen?

Danke für Eure Geduld mit einem blutigen Anfänger, der sich Zeug zusammengoogelt

Garavani

Garavani

Danke für den Tipp. geht leider nicht
Hier ist irgendwas total im Eimer.
Sobald ich die vom index aus angesteuerte Datei Type_lab.html in den Ordnern unterbringen will, gehen die Pfade total durcheinander und es geht gar nix mehr und ich blick nicht durch

Also Datei wieder raus auf die oberste Ebene

Garavani

Garavani

hello again,

so I tried to do so:

var workChart = 1; //only for test here

$(document).ready(function(){
[INDENT]
// refreshes img and name pathes to match character work (inside respective folder)
$name = $("#name img");
$name.attr("src", "templates/Chart_"+ workChart +"/characters/name.png");

for (var i=1;i<=5;i++){
$("#letters img").attr("src", "templates/Chart_"+ workChart +"/characters/Style_reg/Letter_"+ i +".gif");
}
[/INDENT]
});

</script>

</head>
<body>
<div id="letters" class="letters_fit">
<div id="1"><img class="center fit"></img></div>
<div id="2"><img class="center fit"></img></div>
<div id="3"><img class="center fit"></img></div>
<div id="4"><img class="center fit"></img></div>
<div id="5"><img class="center fit"></img></div>
</div>
<div id="text" class="description pos">bla bla</div>

<div id ="name" class ="name fixed display_none"><img></img></div>

</body>

</html>

with a DOM structure as:

and the images couldn’t be found.
I tried similar things, that always worked, but when both html docs layed on the same level. Maybe this is the problem,
that the path couldn’t find the start level

Thanks for help!

Garavani

Garavani

Danke für die Tipps!

garavani

Garavani

Hallo Threadi,

Danke erstmal für Dein Interesse!
Ein bisschen knifflig zu erklären.
Vorweg: bin mit JS, nicht php unterwegs (davon habe ich noch weniger, nämlich gar keine Ahnung).

Habe eine Basis html, in die per JS (mustache.js) templates eingefügt werden. Diese template parts rufen (z.T.) auch weitere separate html Dateien auf, die Bilder benutzen.

Wenn ich alle Bilder aller templates in einem gemeinsamen image Ordner aufbewahre, ist das gar kein Problem, alles geht glatt.
Ich möchte aber nun, dass die Dateien und Bilder die zu je einem template gehören in dessen Unterordner aufbewahrt werden (mit dem Pfad z.B.: …templates/Chart_1/images/Xxx.gif)
Diese Unterordner sind nummeriert (es handelt sich letztendlich um eine Art Präsentationsslider mit mehr oder weniger Verzweigung in tiefere Info/Extras).
Was ich letztlich erreichen will, dass ich nur die Nummern der Ordner tauschen (oder z.B. neue Dateien in einem neuen Ordner dazwischen fügen) brauche, um die Reihenfolge des
Sliders zu ändern oder neue Charts (komplette Ordner also) zu ergänzen. Wie gesagt geht alles, außer dass die per Link aufgerufenen Unterseiten ihre Bilder nicht finden*, wenn sie sich im image Ordner des eigenen Unterordners befinden.
Daher wollte ich den Pfad zu den Bildern mit variable versehen (die selbe globale Var, die alles durchzählt)

Konnte ich das halbwegs erklären?

Danke vielmals!

Garavani

PS*
Geht natürlich, wenn ich beim Ändern der Ordnernummerierung auch alle Links der darin liegenden Dateien per Hand ändere,
aber dazu will ich einfach zu faul sein dürfen

Garavani

Danke

Mist, und ich dachte immer, „geht nicht“ gibt’s nicht

Garavani

Garavani

Hallo Profis,

eine hoffentlich einfach zu beantwortende Frage.

Das hier:

funktioniert nicht. Wieso?
Ich würde gerne die Variable workChart in die src im body einbinden ohne irgendwelche zusätzlichen Skripte. Geht das nicht?
Oder ist einfach die syntax wegen der "/"s unkorrekt?

Danke für Eure Hilfe

Garavani

Garavani

Hey Bandit!

Danke für die schnelle Antwort.
Habs ausprobiert, hat sich ein paar mal übel aufgehängt der arme Safari…
Hängt wohl da in einer Schleife fest.

Hab den Code ja 1:1 reinkopiert, mich ein bisschen gewundert, weil die Funktion ja dann unten offen ist…
oder bin ich einfach zu doof. Vermutlich.

Danke aber anyway.
Werde noch weiter probieren!

Garavani

PS:
Hier der ganze code der Seite.
Bitte nicht auf den anderen Murks achten

<!DOCTYPE html>
<html>
<head>
<head><title>SUPREMA LETTRES</title>
<style>
body {
background-color: #ffffff;
}
.container {
width: 100%;
max-width:1900px;
margin:0 auto;
}
h1 {
text-align: center;
color:#3c3c3c;
font: 50px/1.05 'SupranimatedRegular';
display: block;
padding-left: 5px;
}
@font-face {
font-family: 'SupranimatedRegular';
src: url('fonts/supranimate-webfont.eot');
src: url('fonts/supranimate-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/supranimate-webfont.woff') format('woff'),
url('fonts/supranimate-webfont.ttf') format('truetype'),
url('fonts/supranimate-webfont.svg#SupranimatedRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body { -webkit-font-smoothing: antialiased; }
</style>
<script src="edge_includes/jquery-1.7.1.min.js"></script>
<script src="edge_includes/jquery.fittext.js"></script>
<script type="text/javascript" language="JavaScript">

var i = 0;var steps = new Array("A","C","D","E","F","G","H","I","J","K","L","M", "N","O","P","Q","R","S","T","U","V","W","X","Y", "Z","a","b","c","d","e","g","i","j","k","l","m", "n","o","p","q","r","s","t","u","v","w","x","y", "z","0","1","2","3","4","5","6","7","8","9",":") ;function stepAnimation() { if (i < steps.length) { document.getElementById('step').innerText = steps[i]; i++; }}while (i < steps.length) setTimeout("stepAnimation()", 200);

</script>

</head>

<body>

<div id ="Supremextra" style="position: fixed; left: 5%; bottom: 15%; height: 33px; width: 120px;"><img src="images/Suprema.png"></div>
<div id ="arrowLast" style="position: fixed; margin-left: 0px; right: 50%; bottom: 5%; height: 47px; width: 50px;><img src="images/Arrow_left_pos.png"> </div>
<div id ="arrowNext" style="position: fixed; margin-left: 24px; left: 50%; bottom: 5%; height: 47px; width: 50px; cursor:pointer;" onclick="stepAnimation()"><img src="images/Arrow_right_pos.png"></div>
<script type="text/javascript">
$("#step").fitText(0.33);
</script>

</body>
</html>

Garavani

Hallo Leute,

ich versuche gerade eine Animation zu erstellen mit Hilfe eines (web)Fonts.

dazu habe ich eine Schrift erstellt, deren Buchstaben mit den einzelnen Bildern belegt sind.
Das klappt auch alles wunderbar.

lediglich mit dem Durchlaufen meines Arrays habe ich (Anfänger) Probleme.

So mein div in der page:
<div class="container"><h1 id="step">A</h1></div>

So sieht meine Animationsfunktion bisher aus (wird z.B. durch Klick oder on document ready ausgelöst):

function stepAnimation() {
steps = new Array("A","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","g","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","0","1","2","3","4","5","6","7","8","9",":");
while(show = steps.shift()) {
$('#step').delay(200).text(show);
}
}

oder auch:

function stepAnimation() {
var steps = new Array("A","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","g","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","0","1","2","3","4","5","6","7","8","9",":");
var show = "";
for(var i = 0; i < steps.length; i++) {
show = steps[i];
}
document.getElementById('step').innerText = show;
}

Bei beiden (und auch anderen Versionen) funktioniert das ganze scheinbar irgendwie, aber wohl zu schnell,
da ich stets nach dem Start nur das Endbild (also ":" aus dem Array) zu sehen bekomme.
Ich muss irgendwie eine Pause zwischen die einzelnen Bilder bekommen, damit die Animation auch sichtbar fürs Auge abläuft.
Das delay in der oberen jquery Variante ging auch nicht.
Ich mag jquery gern, ist mir also auch recht.

Kann mir jemand helfen?
Oder erkläre ich mich schlecht?

Danke Euch sehr

Garavani

Garavani

Hallo Profis,

bin Javascriptanfänger. Versuche aber auch, so wie es geht, alles selber zu machen, bastle, probiere, suche im Internet etc.…
Jetzt bin ich aber an meine Grenzen gestoßen, darum mein Frage hier. Und schon mal Danke für Euer Interesse.

Habe folgende kleine site:

HTML

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #ffffff;
}
* {

  padding-left:6px;
  padding-right:6px;




}
.fit {

  max-width: 100%;
  max-height: 100%;
}
.center {




  display: block;




  margin-left:auto;
  margin-right:auto;




}
img
{  border-style: none;
}
a:focus {
    outline: 0;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height()
{
    var wh = $(window).height();
    $('gy').attr('style', 'height:' + wh + 'px;');
}
$(document).ready(function() {
    set_body_height();
    $(window).bind('resize', function() { set_body_height(); });
});
</script>




</head>
<body style="overflow: hidden;">
<div id="g" style="cursor:pointer;" onclick="$('#g').fadeOut(900, 'linear')">
<img id="the_pic" class="center fit" src="images/Memoir_g.gif">




</div>




<div id="y">
<img id="the_pic_2" class="center fit" src="images/Memoir_y.gif">
</div> 




 
</body>
</html>

Alles anzeigen

<<Ihr könnt die Funktion der Seite unter:
http://www.stefanseifert.com/Adobe_Edge_Tests/Memoir_g.html
anschauen.>>

Die Funktionen oben hab ich mir im Internet rausgesucht. Funktioniert prima für ein Bild.
Geil finde ich vor allem, dass man die Browserfenster live aufziehen kann und verkleinern, das Bild sich live anpasst.
Diese Funktionsweise will ich gerne aufrecht erhalten.
Nun habe ich aber zwei Bilder. Geht soweit auch, aber ich möchte erreichen, dass das Bild „the_pic" ausfadet auf Klick
und darunter dann fließend „the_pic_2“ auftaucht.
Problem ist aber dass in meiner Lösung bisher die Bilder nicht wirklich untereinander liegen, sondern Bild „the_pic_2“ sich erst hochschiebt wenn „the_pic“ ganz weg ist
Leider kann aber die „position: absolute“ nicht wie gewohnt eingesetzt werden, da sie die Funktionen der Bildanpassung behindert, bzw. ungültig macht.

Hat jemand von Euch Profis eine Idee, wie man das Problem lösen könnte?
Ich glaube das Ding ist schon knifflig.

Wäre für Tipps und Ideen sehr dankbar!

Gruß
Garavani

Beiträge von Garavani

string Teile einer Funktion in variable

string Teile einer Funktion in variable

src mit variable im body

src mit variable im body

src mit variable im body

src mit variable im body

src mit variable im body

src mit variable im body

src mit variable im body

Animation erstellen mit durchlaufen eines Arrays

Animation erstellen mit durchlaufen eines Arrays

Javascript kniffliges Problem