 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
elagil
Threadersteller
Dabei seit: 21.03.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 31.03.2012 21:02
Titel
|
  |
|
gut das überfordert mich ein wenig, ich schau mir das mal genauer an  ... danke für die vielen hinweise 
|
|
| |
  |
 |
elagil
Threadersteller
Dabei seit: 21.03.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 31.03.2012 23:44
Titel
|
|
|
zwischenzeitlich habe ich etwas anderes gemacht... je mehr man lernt, desto mehr will man einbauen
der #main container soll mit der seite skalieren. die menüleiste links soll immer gleich breit bleiben, das seitenverhältnis des zielcontainers auf der rechten soll immer gleich bleiben. dabei sollen die abstände von den seiten des fensters einstellbar sein. das hier ist rausgekommen:
| Code: | <script type="text/javascript">
$(window).resize(function(){
var
breite_menu = 220,
scrollbalken = 6,
breite_scroll = breite_menu - scrollbalken,
rand = 50
main_center(document.getElementById("main"));
function main_center (div)
{
var
hoehe_fenster = parseInt(window.innerHeight),
breite_fenster = parseInt(window.innerWidth),
hoehe_div = parseInt(div.offsetHeight),
breite_div = parseInt(div.offsetWidth);
if( (hoehe_div + rand) < hoehe_fenster)
{
div.style.left = "50%";
div.style.width = breite_fenster - rand + "px";
div.style.marginLeft = "-" + breite_div/2 +"px";
div.style.height = (breite_div - breite_scroll) / 1.6 + "px";
div.style.top = "50%";
div.style.marginTop = "-" + hoehe_div/2 + "px";
}
else
{
div.style.top = "50%";
div.style.height = hoehe_fenster - rand + "px";
div.style.marginTop = "-" + hoehe_div/2 +"px";
div.style.width = breite_scroll + hoehe_div * 1.6 + "px";
div.style.left = "50%";
div.style.marginLeft = "-" + breite_div/2 + "px";
}
ziel_align(document.getElementById("ziel"));
function ziel_align (div)
{
var hoehe_div = parseInt(div.offsetHeight);
div.style.height = "100%";
div.style.width = hoehe_div * 1.6 + "px";
div.style.left = breite_scroll + "px"
}
}
})
</script> |
beim verändern der größe des fensters "springt" das ein bisschen heftig. allgemein passen die größen nicht so richtig..
außerdem will ich natürlich, dass diese funktion nicht nur beim herumziehen des fensters genutzt wird, sondern schon beim laden des dokumentes. das ist an sich kein problem wenn ich die funktion doppelt aufschreibe (einmal im .resize befehl und einmal bei document.ready) ich würde aber gern auf sie verweisen..
hier nochmal der link zur seite online: Klick!
|
|
| |
|
|
|
Anzeige
|
|
|
elagil
Threadersteller
Dabei seit: 21.03.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 01.04.2012 00:40
Titel
|
|
|
ah kleine änderungen: ich habe mal bei jeder bedingung die vormals beeinflussten größen auf auto zurückgesetzt und es wird endlich flüssig.. ansonsten habe ich weniger abhängigkeiten von variablen erzeugt, damit die geschwindigkeit höher wird (?)
| Code: | $(window).resize(function(){
var
breite_menu = 220,
scrollbalken = 6,
breite_scroll = breite_menu - scrollbalken,
rand = 50
main_center(document.getElementById("main"));
function main_center (div)
{
var
hoehe_fenster = parseInt(window.innerHeight),
breite_fenster = parseInt(window.innerWidth),
hoehe_div = parseInt(div.offsetHeight),
breite_div = parseInt(div.offsetWidth);
if( (hoehe_div + rand) < hoehe_fenster)
{
div.style.bottom = "auto";
div.style.width = "auto";
div.style.left = rand/2 + "px";
div.style.right = rand/2 +"px";
div.style.height = (breite_div - breite_scroll) / 1.6 + "px";
div.style.top = (hoehe_fenster - hoehe_div)/2 + "px"
}
else
{
div.style.right = "auto";
div.style.height = "auto";
div.style.top = rand/2 + "px";
div.style.bottom = rand/2 + "px";
div.style.width = breite_scroll + hoehe_div * 1.6 + "px";
div.style.left = (breite_fenster - breite_div)/2 + "px"
}
ziel_align(document.getElementById("ziel"));
function ziel_align (div)
{
var hoehe_div = parseInt(div.offsetHeight);
div.style.height = "100%";
div.style.left = breite_scroll + "px";
div.style.right = 0 + "px"
}
}
}) |
|
|
| |
|
|
bacon
Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 01.04.2012 03:59
Titel
|
|
|
+1: Du wandelst deutlich über dem Niveau des durchschnittlichen MGI-Users, denn Du bist in der Lage, Deinen Quelltext ordentlich und lesbar zu strukturieren.
-1: Wasn jetzt die Frage? Und warum möchtest Du auf Teufel komm raus die Ausmaße Deiner Containerelemente via Javascript bestimmen!??
|
|
| |
|
|
elagil
Threadersteller
Dabei seit: 21.03.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 01.04.2012 11:02
Titel
|
|
|
| Zitat: | | Und warum möchtest Du auf Teufel komm raus die Ausmaße Deiner Containerelemente via Javascript bestimmen!?? |
ich dachte mir das geht nicht anders?.. über javascript läuft das im moment einfach nicht gut, die if-bedingung ist unzuverlässig und es kommt mir auch so vor, als würde sie logisch nicht einwandfrei arbeiten.
die frage ist noch die selbe wie oben: wie zentriere ich am besten einen container horizontal und vertikal, der folgende eigenschaften erfüllt:
-er ist gedanklich in zwei teile zu teilen
-der linke teil hat eine bestimmbare breite, die höhe skaliert mit der seite
-der rechte teil hat ein festes seitenverhältnis, skaliert aber mit der größe der seite
-die linke und rechte seite sollen immer gleich hoch sein 
wie soll ich das denn mit css machen?
|
|
| |
|
|
elagil
Threadersteller
Dabei seit: 21.03.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 01.04.2012 11:54
Titel
|
|
|
@ sahnemuh: ich hab den code mal ein bisschen durchgeschaut, ich glaube da waren ein paar kleinigkeiten nicht richtig..
| Code: | if(istLadenSichtbar==true)
{ // wenn laden sichtbar, führe den rest der funktion nicht aus.
return false;
} |
statt
| Code: | if(istLadenSichtbar()) { // wenn laden sichtbar, führe den rest der funktion nicht aus.
return false;
} |
istLadenSichtbar ist ja keine Funktion mehr?
so wie das script jetzt ist läuft es, allerdings erscheint bei klick auf den rechten container erst wieder das selbe bild, erst beim zweiten klick das neue... ich kann da nichts falsches finden
jetziger code:
| Code: | (function(){
var pfad = "images/stuhlbilder/",
menuitem = false,
seite = 0, // seite beginnt wieder bei 0, siehe unten.
seiteMax = 6, // letzte seite: wieder an einer zentralen stelle um es ggf. überall einfach ändern zu können
bilderSpeicher = {}, // dient als speicher welche bilder schon geladen wurden. dazu später mehr.
$menu = $('.menu'),
$container = $('#klickflaeche'),
$ziel = $('#ziel'),
$laden = $("#laden"),
$start = $("#start");
$menu
.on('click',function(ev)
{
ev.preventDefault();
if(istLadenSichtbar==true)
{
return false;
}
menuitem = $menu.index($(this));
seite = 0;
var bildPfad = pfad + menuitem + "/" + seite + ".jpg";
ladeBild(bildPfad);
});
$container
.on('click',function(){
if(istLadenSichtbar==true || menuitem==false)
{
return false;
}
if(seite >= seiteMax){
seite = 0
};
zeigeLaden();
var bildPfad = pfad + menuitem + "/" + seite + ".jpg";
ladeBild(bildPfad);
seite = seite+1;
});
var istLadenSichtbar = function()
{ // gibt zurück ob laden sichtbar ist oder nicht
return $laden.is(":hidden");
}
var zeigeLaden = function()
{ // zeigt den "laden" layer
$ziel.hide();
$laden.show();
}
var zeigeZiel = function(neu) { // zeigt den "ziel" bereich
$laden.hide();
$ziel.fadeIn("fast");
}
var ladeBild = function(bildPfad) {
zeigeLaden();
$start
.attr("src",bildPfad);
if(!bilderSpeicher.hasOwnProperty(bildPfad))
{ // bilder müssen nur neu geladen werden, wenn sie nicht schon mal geladen wurden (caching!)
bilderSpeicher[bildPfad] = bildPfad; // bild existierte noch nicht im "zwischenspeicher" -> Hinzufügen
$start
.load(zeigeZiel); // führe nach dem laden die funktion zeigeZiel aus
}
else
{
zeigeZiel(); // das bild wurde schon mal geladen: also müssen wir es eigentlich nur noch anzeigen.
}
}
})(); |
|
|
| |
|
|
elagil
Threadersteller
Dabei seit: 21.03.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 01.04.2012 15:57
Titel
|
|
|
probleme wurden beseitigt...er soll natürlich schon vor dem öffnen des nächsten bildes hochzählen! sonst öffnet er ja zweimal "0.jpg"...
der erste stuhl hat nicht funktioniert, der index "0" wird von der funktion if (menuitem == false) bzw. if (!menuitem) aussortiert! ich habe also den index immer um 1 erhöht und meine ordner entsprechend umbenannt...
| Code: | (function(){
var pfad = "images/stuhlbilder/",
menuindex = 0,
menuitem = 0,
seite = 0, // seite beginnt wieder bei 0, siehe unten.
seiteMax = 6, // letzte seite: wieder an einer zentralen stelle um es ggf. überall einfach ändern zu können
bilderSpeicher = {}, // dient als speicher welche bilder schon geladen wurden. dazu später mehr.
$menu = $('.menu'),
$container = $('#klickflaeche'),
$ziel = $('#ziel'),
$laden = $("#laden"),
$start = $("#start");
$menu
.on('click',function(ev)
{
ev.preventDefault();
if(istLadenSichtbar==true)
{
return false;
}
menuindex = $menu.index($(this));
menuitem = menuindex + 1
seite = 0;
var bildPfad = pfad + menuitem + "/" + seite + ".jpg";
ladeBild(bildPfad);
});
$container
.on('click',function(){
if(istLadenSichtbar==true || menuitem == 0)
{
return false;
}
if(seite >= seiteMax){
seite = 0
};
seite = seite+1;
zeigeLaden();
var bildPfad = pfad + menuitem + "/" + seite + ".jpg";
ladeBild(bildPfad);
});
var istLadenSichtbar = function()
{ // gibt zurück ob laden sichtbar ist oder nicht
return $laden.is(":hidden");
}
var zeigeLaden = function()
{ // zeigt den "laden" layer
$ziel.hide();
$laden.show();
}
var zeigeZiel = function(neu) { // zeigt den "ziel" bereich
$laden.hide();
$ziel.fadeIn("fast");
}
var ladeBild = function(bildPfad) {
zeigeLaden();
$start
.attr("src",bildPfad);
if(!bilderSpeicher.hasOwnProperty(bildPfad))
{ // bilder müssen nur neu geladen werden, wenn sie nicht schon mal geladen wurden (caching!)
bilderSpeicher[bildPfad] = bildPfad; // bild existierte noch nicht im "zwischenspeicher" -> Hinzufügen
$start
.load(zeigeZiel); // führe nach dem laden die funktion zeigeZiel aus
}
else
{
zeigeZiel(); // das bild wurde schon mal geladen: also müssen wir es eigentlich nur noch anzeigen.
}
}
})(); |
damit wäre der code geklärt, bleibt noch die frage zur skalierung der divs
| Zitat: | wie zentriere ich am besten einen container horizontal und vertikal, der folgende eigenschaften erfüllt:
-er ist gedanklich in zwei teile zu teilen
-der linke teil hat eine bestimmbare breite, die höhe skaliert mit der seite
-der rechte teil hat ein festes seitenverhältnis, skaliert aber mit der größe der seite
-die linke und rechte seite sollen immer gleich hoch sein
wie soll ich das denn mit css machen? |
danke für alles bisherige
|
|
| |
|
|
elagil
Threadersteller
Dabei seit: 21.03.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 01.04.2012 16:56
Titel
|
|
|
ich habe meine anforderungen ein wenig geändert ^^
der container soll einfach nur 2,2 mal so breit wie hoch sein und von jedem rand zu jeder zeit mindestens 30 pixel entfernt sein...
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
3D-Würfel unerwünscht!
DIV Container bei Mouseover über DIV Container anzeigen
DIV-Container soll anderen DIV-Container verdrängen
CSS: Container im Container Vertikal zentrieren
Variabler Div-Container bis zum mittigen Div-Container
CSS - was ist ein div-container?
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
