mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 19.03.2024 11:28 Benutzername: Passwort: Auto-Login

Thema: jquery/javascript/css: jscrollpane konflikt mit css vom 03.04.2012

Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> jquery/javascript/css: jscrollpane konflikt mit css
Autor Nachricht
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

Antworten mit Zitat Zum Seitenanfang

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 Lächel
  View user's profile Private Nachricht senden
Ähnliche Themen jquery konflikt lösen
JavaScript mit jQuery
Javascript Wert zurückgeben jquery
PHP/MySQL, JQuery/Javascript, (AJAX) lernen
Colorpicker - Farbübergabe / Jquery Javascript Probl
iOS: Scrollen zu Ankern nur mit CSS, ohne JQuery/Javascript?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


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.