elagil
Threadersteller
Dabei seit: 21.03.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 03.04.2012 14:26
Titel jquery/javascript/css: jscrollpane konflikt mit css |
|
|
Hallo,
ich habe folgendes problem:
ich habe eine internetseite mit einem div container in der mitte, der zwei weitere div container enthält. der mittlere, große container (#main) wird über javascript dynamisch mit der fensterbreite skaliert. im linken teil des main containers liegt ein menü fester breite ("menu"), im rechten ein container für die bilder ("ziel") mit festem seitenverhältnis von 4:3.
dies ist mit css nicht ohne weiteres möglich, der main container skaliert ja nicht proportional! hier die skalierungsvorschrift mit zugehörigem css für...
________________________________________
...den container "main":
CSS:
Code: | #main {
position: absolute;
background-color: #FFF;
} |
der rest über js sobald das fenster in der größe verzogen wird:
Javascript/Jquery:
Code: | $(window).resize(function skalieren ()
{
var
breite_menu = 220, // breite des menüteils
scrollbalken = 6, // breite des scrollbalkens -> scrollbalken soll bild überlappen, weil er durchscheinend ist
breite_scroll = breite_menu - scrollbalken,
// verschiebung des "ziel"-bereiches nach rechts vom linken rand des main containers aus gesehen
rand = 50, // rand um den main container (oben, rechts, links)
aspect_ratio = 0.75 // Seitenverhältnis: Höhe/Breite entspricht 3/4
maxbreite_bild = 1200 // Maximalbreite des Bildes im Zielcontainer in Pixel (auflösungsgrenze bild)
minbreite_bild = 500 // analog zu oben
main_center(document.getElementById("main")); // rufe die funktion "main_center" auf, für den div container "main"
function main_center (div) // besagte funktion main_center
{
var
breite_div = parseInt(div.offsetWidth); // breite des betrachteten divs (hier main)
div.style.left = rand/2 + "px" ;
div.style.right = rand/2 +"px" ;
div.style.top = rand/2 + "px" ;
div.style.height = (breite_div - breite_scroll) * aspect_ratio + "px"
div.style.maxWidth = maxbreite_bild + breite_scroll + "px";
div.style.minWidth = minbreite_bild + breite_scroll + "px";
} |
________________________________________
nun gibt es, wie schon erwähnt, in diesem main-container einen "ziel" und einen "menu" container, der zielcontainer ist recht simpel platziert:
CSS:
Code: | #ziel {
position:absolute;
right:0px;
top:0px;
bottom: 0px;
overflow:hidden;
z-index:1;
} |
JS (damit er den abstand vom linken rand vom main container einhält. die breite ergibt sich von selbst.)
Code: | function ziel_align (div)
{
div.style.left = breite_scroll + "px";
} |
________________________________________
nun noch der menu container:
CSS:
Code: | #menu {
position:absolute;
left:0px;
top:0px;
z-index:4;
overflow:auto;
} |
JS:
Code: | menu_align(document.getElementById("menu"));
function menu_align (div)
{
div.style.height = "100%";
div.style.width = breite_scroll + "px";
} |
an dieser stelle schon ein bisschen komisch: ich muss die höhe über JS festlegen, weil sie über CSS nicht aktualisiert wird...ist aber nicht so tragisch.
________________________________________
Nun das Problem: ich möchte jscrollpane im menücontainer nutzen. wenn ich im <head> - teil des dokumentes schon das script aktiviere (on document.ready) hat es keine wirkung. vorher hatte es das immer, als ich noch keine dynamisch skalierenden container hatte. kurzerhand habe ich die aktivierung des scripts mit in den $(window).resize teil gesteckt, allerdings ersetzten die scrollbalken von jscrollpane nicht die von meinem browser. sie liegen nur daneben!
Hier die Seite online: figueroa-design
________________________________________
Ich kann den Fehler leider nicht orten. Hier das HTML:
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Figueroa Design</title>
<!-- styles für jScrollPane -->
<link type="text/css" href="Scripts/scrollbalken_style.css" rel="stylesheet" media="all" />
<!-- styles allgemein -->
<link type="text/css" href="Scripts/styles_allgemein.css" rel="stylesheet" media="all" />
<!-- styles stühle/Positionierung im Menübalken -->
<link type="text/css" href="Scripts/styles_menu.css" rel="stylesheet" media="all" />
<style type="text/css">
.jspVerticalBar {
width: 6px;
background-color: transparent;
}
.jspTrack {
background-color: transparent;
background-image: url("images/scroll.png");
background-repeat: repeat;
}
.jspDrag {
background-color: #ffffff;
width: 4px;
left: 1px;
}
</style>
<!-- jquery plugin laden -->
<script type="text/javascript" src="Scripts/jquery-bibliothek.js"></script>
<!-- mausrad plugin laden -->
<script type="text/javascript" src="Scripts/mausrad.js"></script>
<!-- jScrollPane plugin laden -->
<script type="text/javascript" src="Scripts/scrollbalken_script.js"></script>
<!-- jScrollPane einschalten für #container wenn das Dokument geladen ist -->
<script type="text/javascript">
$(document).ready(function(){
$('#container').jScrollPane();
});
</script>
</head>
<body>
<div id="main">
<div id="laden" style="display:none">
<div id="icon"><img src="images/laden.gif"/></div>
</div> <!-- Ende "laden" -->
<div id="klickflaeche"></div>
<div id="menu">
<!-- Div container mit scrollbaren Inhalten -->
<div id="stuhlliste">
<!-- Stühle -->
<div id="gato" class="menu"><a href=""><img src="images/menu/gato.jpg" alt="Gato" name="gato" width="122" height="200"/></a></div>
<div id="previo" class="menu"><a href=""><img src="images/menu/previo.jpg" alt="Previo" width="160" height="200"/></a></div>
<div id="bistro" class="menu"><a href=""><img src="images/menu/bistro.jpg" alt="Bistro" width="150" height="200"/></a></div>
<div id="tiempo" class="menu"><a href=""><img src="images/menu/tiempo.jpg" alt="Tiempo" width="200" height="180"/></a></div>
<div id="planes" class="menu"><a href=""><img src="images/menu/planes.jpg" alt="Planes" width="150" height="200"/></a></div> <div id="entrada" class="menu"><a href=""><img src="images/menu/entrada.jpg" alt="Entrada" width="163" height="200"/></a></div>
<div id="cosa" class="menu"><a href=""><img src="images/menu/cosa.jpg" alt="Cosa" width="146" height="200"/></a></div>
<div id="seminario" class="menu"><a href=""><img src="images/menu/seminario.jpg" alt="seminario" width="200" height="200"/></a></div>
<div id="anchair" class="menu"><a href=""><img src="images/menu/anchair.jpg" alt="Anchair" width="164" height="200"/></a></div>
<div id="salida" class="menu"><a href=""><img src="images/menu/salida.jpg" alt="Salida" width="156" height="200"/></a></div>
<div id="dreid" class="menu"><a href=""><img src="images/menu/3dchair.jpg" alt="3dchair" width="190" height="220"/></a></div>
<div id="filio" class="menu"><a href=""><img src="images/menu/filio.jpg" alt="filio" width="141" height="200"/></a></div>
<div id="xcode" class="menu"><a href=""><img src="images/menu/xcode.jpg" alt="xcode" width="132" height="200"/></a></div>
</div> <!-- Ende stuhlliste / Menü -->
</div> <!-- Ende container -->
<div id="ziel"><img src="images/menu/start.jpg" id="start" width=100% height=100%/></div>
</div> <!-- Ende main -->
<!-- Aktionen bei Klicks auf Menü und Container -->
<script type="text/javascript" src="Scripts/klickevents.js"></script>
<script type="text/javascript">
$(window).resize(function skalieren ()
{
var
breite_menu = 220, // breite des menüteils
scrollbalken = 6, // breite des scrollbalkens
breite_scroll = breite_menu - scrollbalken,
// verschiebung des zielbereiches nach rechts von linken rand des wrapper containers aus gesehen: dynamisch
rand = 50, // rand um den main container (oben, rechts, links)
aspect_ratio = 0.75 // Seitenverhältnis in Höhe/Breite
maxbreite_bild = 1200 // Maximalbreite des Bildes im Zielcontainer in Pixel
minbreite_bild = 500 // analog
main_center(document.getElementById("main")); // rufe die funktion "main_center" auf, für den div container "main"
function main_center (div) // besagte funktion main_center
{
var
breite_div = parseInt(div.offsetWidth); // breite des betrachteten divs (hier main)
div.style.left = rand/2 + "px" ;
div.style.right = rand/2 +"px" ;
div.style.top = rand/2 + "px" ;
div.style.height = (breite_div - breite_scroll) * aspect_ratio + "px"
div.style.maxWidth = maxbreite_bild + breite_scroll + "px";
div.style.minWidth = minbreite_bild + breite_scroll + "px";
}
ziel_align(document.getElementById("ziel"));
function ziel_align (div)
{
div.style.left = breite_scroll + "px";
}
menu_align(document.getElementById("menu"));
function menu_align (div)
{
div.style.height = "100%";
div.style.width = breite_scroll + "px";
}
})
</script>
</body>
</html>
|
Vielen Dank schonmal
|
|