Beiträge von nyami

Hi Basiii,

habe ich das richtig verstanden? Kennt java die Viewporthöhe?
Könnte ich also eine variable so definieren:

var abstand = "170vh";
element.setAttribute("data-x", result);

und wenn ich dann im HTML-Code (dahinter)

1
<section style="background: white" id="startfolie" class="step slide" data-x="-5000" data-y="-1500">

steht, dann hätte der Javacode den Bereich "data-x="-5000" gegen den pixelwert für 170vh ?

Es wäre mir angenehm, wenn mir jemand mir einen Tip zu lesen solcher Anwendungen geben könnte, statt hier so Newbie-Frage zu stellen.
Ich habe bisher leider immer nur Material gefunden, die entweder so basic ist, das es mich nicht interessiert oder so unvollständig, das ich den Vorgang zwar verstehe, aber keine Newbie-Info zur praktischen Anwendiung bekomme.

Das mit den 10px war nur eine idee um nicht bis ganz an den Rand zu gehen.
Ich habe einfach 1vh weniger genommen und damit halt einen Rand von 1%.

Guten Abend,

ich möchte diesen enthaltenen Text einer HTML Datei:

<section style="background: white" id="startfolie" class="step slide" data-x="-5000" data-y="-1500">

durch diesen ersetzen:

<section style="background: white" id="startfolie" class="step slide" data-x="##VARIABLE##" data-y="-1500">

Wobei ##VARIABLE## errechnet werden soll bzw. aus den CSS Attributen heigth=170vh definiert werden soll
was in diesem Fall 170% der Viewporthöhe entspricht!

Vermutlich suche ich mit Herrn Google nach den falschen Stichworten, aber da ich bisher keinen Schimmer von JavaScript habe verzeiht es mir bitte.

Schönen Abend

Danke, schaue ich mir an.

Ich glaube ich habe hier eine reine CSS Lösung!
Bitte schaut es Euch einmal an und gebt mir ein Feedback.
Mit der Maßeinheit "vh" errechnet!

Auszug der entsprechenden CSS-Datei:

.step {
 position: relative;
 width: 161vh;
 padding: 40px;
 margin: 20px auto;




 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -o-box-sizing: border-box;
 box-sizing: border-box;




 font-family: 'PT Serif', georgia, serif;
 font-size: 48px;
 line-height: 1.5;
}




/*
 ... and we enhance the styles for impress.js.




 Basically we remove the margin and make inactive steps a little bit transparent.
*/
.impress-enabled .step {
 margin: 0;
 opacity: 0.3;




 -webkit-transition: opacity 1s;
 -moz-transition: opacity 1s;
 -ms-transition: opacity 1s;
 -o-transition: opacity 1s;
 transition: opacity 1s;
}




.impress-enabled .step.active { opacity: 1 }




/*
 These 'slide' step styles were heavily inspired by HTML5 Slides:
 http://html5slides.googlecode.com/svn/trunk/styles.css




 ;)




 They cover everything what you see on first three steps of the demo.
*/
.slide {
 display: block;




 width: 161vh;
 height: 99vh;
/* padding: 40px 60px;*/




 background-color: white;
 border: 1px solid rgba(0, 0, 0, .3);
 border-radius: 10px;
 box-shadow: 0 2px 6px rgba(0, 0, 0, .1);




 color: rgb(102, 102, 102);
 text-shadow: 0 2px 2px rgba(0, 0, 0, .1);




 font-family: 'Open Sans', Arial, sans-serif;
 font-size: 30px;
 line-height: 36px;
 letter-spacing: -1px;
}

Hallo zusammen,

für eine Präsentation mit impress.js möchte ich den Slide-Container immer auf die maximale (Browserhöhe - 10px) x ((Browserhöhe - 10px) x Faktor) skalieren.
Geht das mit CSS? Welche einfache Lösung gibt es sonst?

Wenn es nur mit jquery geht kann mir jemand bitte die komplette Lösung bitte nennen?
Da ich Anfänger bin helfen mir die Codefragmente im Netz nicht wirklich weiter. und CSS reicht mir schon von der Komplexität,
da muss es nicht auch noch jquery sein! Ich möchte doch nur eine Präsentation bauen, die sich bei der Skalierung so wie
LibreOffice Impress oder Powerpoint verhält!

Vielen Dank!

Beispielseite: http://www.ub.uni-bielefeld.de…mpress-js/vorlage/#/start
dort kann auch der ganze code runter geladen werden!

So, den Fehler hatte ich eigentlich schon selber beschrieben.

Wenn der Browser nicht weiss, was er mit dem Hintergrund machen soll, wenn die Grafik nur 121 px hoch ist,
beachtet er sinnvollerweise die Höhe der Hintergrundgrafik nicht und skaliert auf maximum!

Durch einfügen von

.slide{    display: block;
    width: 900px;height: 700px;padding: 20px 60px;overflow:hidden;
    background-color: white;background-image: url(../../../grafiken/finder_blau_1x1_pixel.png);background-size: 900px 121px;background-repeat: no-repeat;border: 0px solid rgba(182, 200, 40, 1.0);border-radius: 0px;box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    color: rgb(102, 102, 102);text-shadow: 4px 4px 2px rgba(0, 0, 0, .1);
    font-size:32px;line-height:1.3;letter-spacing: -1px;}

Jo, alle Änderungen greifen.
Wie Du bei der Darstellung siehst, wird die Höhe der Hintergrundgrafik nicht beachtet und der ganze Bereich eingefärbt.

Das soll wg. der vorgegebenen Foliendarstellung aber nicht sein.

Hallo Forum,

bitte habt Nachsicht mit einem Neuling und CSS/HTML5-Dummy!

Ich sticke gerade ein Layout von Präsentationen mit impress.js nach dieser Vorlage:
http://www.ub.uni-bielefeld.de…mpress-js/vorlage/#/start

Meine Änderungen im ".slide" - Bereich greifen nicht!

/* Standard-Folie */.slide {
    display: block;
    width: 900px;
    height: 700px;
    padding: 20px 60px;
    overflow:hidden;
    background: url(../images/finder_blau_1x1_pixel.png);
    background-size: 900px 120px;
    border: 2px solid rgba(67, 147, 242, 0.7);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    color: rgb(102, 102, 102);
    text-shadow: 4px 4px 2px rgba(0, 0, 0, .1);
    font-size:32px;
    line-height:1.3;
    letter-spacing: -1px; }

Wo ist der Fehler?

Das komplettes CSS und HTML als Datei angehängt!

Vorab schonmal vielen Dank für Eure Hilfe!!

Es grüßt
der Sven