Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
elagil
Threadersteller
Dabei seit: 21.03.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 23.03.2012 11:34
Titel angeklickter DIV container hervorgehoben (unerwünscht) ! |
|
|
Hallo,
ich habe ein Problem mit einem Div Container.
In dem Div-Container befindet sich ein scrollbares menü (mit jquery die scrollbalken angepasst). Ein klick auf ein menüelement öffnet im zielcontainer "#ziel" den externen Inhalt.
In Safari (wohl nur bei Safari) erscheint ein blauer Rand (DIV hervorgehoben) bei Klick auf ein Menüelement.
Hier der Code ein bisschen gekürzt:
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 needed by jScrollPane -->
<link type="text/css" href="Scripts/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<style type="text/css">
.jspVerticalBar {
width: 4px;
background-color: transparent;
}
.jspDrag {
background-color: transparent;
background-image: url("images/drag.png");
background-repeat: repeat;
}
.jspTrack {
background-color: transparent;
background-image: url("images/scroll.png");
background-repeat: repeat;
}
body {
background-color: #CCC;
background-image: url(images/menu/bg6.jpg);
background-repeat: repeat;
}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
a:link {
text-decoration: none;
color: #FFF;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #CCC;
}
a:active {
text-decoration: none;
font-size: 14px;
}
#main {
position:absolute;
top:50%;
left: 50%;
width:950px;
height:585px;
z-index:2;
background-color: #FFFFFF;
margin: -292px 0px 0px -475px;
}
#container {
position:absolute;
left:0px;
top:0px;
width:394px;
height:585px;
z-index:4;
overflow: auto;
}
#schatten {
position:absolute;
left:50%;
top:50%;
width:10px;
height:10px;
z-index:1;
margin: -342px 0px 0px -525px;
}
#ziel {
position:absolute;
left:390px;
top:0px;
width:560px;
height:585px;
z-index:3;
overflow: hidden;
}
#content {
width:390px;
height:2250px;
position:relative;
}
<!-- Hier stehen eigentlich die CSS stile von den containern -->
</style>
<script type="text/javascript">
function MM_preloadimages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadimages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
<!-- jquery vom google server -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<!-- mausrad plugin -->
<script type="text/javascript" src="Scripts/jquery.mousewheel.js"></script>
<!-- jScrollPane script -->
<script type="text/javascript" src="Scripts/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#container').jScrollPane();
$('#ziel').load('start.html');
});
<!-- Scroll Script: Wenn Dokument geladen, dann lade "jScrollPane" auf "#container" (Zum Einschalten der Scrollbalken) -->
<!-- und die Datei "start.html" in "#ziel" (Startseite). Der DIV-Container "#ziel" ist der freie Raum auf der rechten Seite. -->
</script>
</head>
<body>
<div id="main">
<!-- großes weißes feld -->
<div id="container">
<!-- Div container mit Inhalten -->
<div id="content">
<!-- Stühle -->
<div id="gato"> <a href="#"><img src="images/menu/gato.jpg" alt="Gato" name="gato" width="122" height="200" /></a></div>
<div id="previo"> <a href="#"><img src="images/menu/previo.jpg" alt="Previo" width="160" height="200" /></a></div>
<div id="bistro"> <a href="#"><img src="images/menu/bistro.jpg" alt="Bistro" width="150" height="200" /></a></div>
<div id="tiempo"> <a href="#"><img src="images/menu/tiempo.jpg" alt="Tiempo" width="200" height="180" /></a></div>
<div id="planes"> <a href="#"><img src="images/menu/planes.jpg" alt="Planes" width="150" height="200" /></a></div>
<div id="entrada"> <a href="#"><img src="images/menu/entrada.jpg" alt="Entrada" width="163" height="200" /></a></div>
<div id="cosa"> <a href="#"><img src="images/menu/cosa.jpg" alt="Cosa" width="146" height="200" /></a></div>
<div id="an"> <a href="#"><img src="images/menu/anchair.jpg" alt="AN" width="164" height="200" /></a></div>
<div id="salida"> <a href="#"><img src="images/menu/salida.jpg" alt="Salida" width="156" height="200" /></a></div>
<div id="seminario"> <a href="#"><img src="images/menu/seminario.jpg" alt="seminario" width="200" height="200" /></a></div>
<div id="dreid"> <a href="#"><img src="images/menu/3dchair.jpg" alt="3dchair" width="190" height="220" /></a></div>
<div id="filio"> <a href="#"><img src="images/menu/filio.jpg" alt="filio" width="141" height="200" /></a></div>
<div id="xcode"> <a href="#"><img src="images/menu/xcode.jpg" alt="xcode" width="132" height="200" /></a></div>
</div> <!-- Ende content -->
</div>
<div id="ziel">
</div>
</div> <!-- Ende container -->
<div id="schatten"><img src="images/schatten.png" width="1050" height="685" />
<!-- Hintergrundschatten -->
</div>
<script type="text/javascript">
<!-- Links zu den Stuhlseiten -->
$("#gato").click(function() {
$('#ziel').load('stuhl/gato/gato.html');
});
$("#previo").click(function() {
$('#ziel').load('stuhl/previo/previo.html');
});
$("#an").click(function() {
$('#ziel').load('stuhl/anchair/anchair.html');
});
</script>
</body>
</html>
|
Hier die Seite.
Vielen Dank im Voraus
Adrian
|
|
|
|
|
SimonDerDude
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht:
|
Verfasst Fr 23.03.2012 11:46
Titel
|
|
|
Vielleicht hilft
Code: |
#content:active{border:0;}
|
... oder ein allgemeines CSS Reset. Ohne dir jetz das Layout zerschiessen zu wollen tuts aber auch
Zuletzt bearbeitet von SimonDerDude am Fr 23.03.2012 11:58, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
elagil
Threadersteller
Dabei seit: 21.03.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 23.03.2012 12:50
Titel
|
|
|
das bringt leider nichts.
betroffen ist nicht etwa der #content div sondern #container, aber egal wo ich border:0 einfüge, da tut sich nichts, denn auch vorher war ja kein rand in dem sinne zu sehen. hier mal ein screenshot:
ich habe noch eine ganz andere frage:
wenn man auf der rechten seite auf den inhalt klickt, soll sich ein neuer öffnen. das ist soweit kein problem:
Code: | <script type="text/javascript">
<!-- weiter klicken... -->
$("#weiter").click(function() {
$('#ziel').load('...nächste Datei...');
});
</script> |
Der Code liegt auf einem Div, das über die ganze fläche geht.
ich nummeriere die zieldateien von 1 bis 5 durch, kann ich sowas wie einen zähler bauen, damit ich nicht jede datei einzeln verlinken muss?
|
|
|
|
|
gotoAndPlay
Dabei seit: 22.11.2006
Ort: -
Alter: 40
Geschlecht:
|
Verfasst Fr 23.03.2012 14:15
Titel
|
|
|
elagil hat geschrieben: | ich habe noch eine ganz andere frage:
wenn man auf der rechten seite auf den inhalt klickt, soll sich ein neuer öffnen. das ist soweit kein problem:
Code: | <script type="text/javascript">
<!-- weiter klicken... -->
$("#weiter").click(function() {
$('#ziel').load('...nächste Datei...');
});
</script> |
Der Code liegt auf einem Div, das über die ganze fläche geht.
ich nummeriere die zieldateien von 1 bis 5 durch, kann ich sowas wie einen zähler bauen, damit ich nicht jede datei einzeln verlinken muss? |
Klar, ermittel doch einfach auf welches Element geklickt worden ist und lade dann die passende Zahl!
Wenn du den Stühlen in der linken Spalte eine Klasse zu weist, dann ist das kein Problem:
Code: |
$('.test').click(function(){
alert($('.test').index($(this)))
})
|
Speicher das in einer Variable ab und lade dann die jeweilige HTML Datei nach.
Vielleicht kannst du auch das Gebrauchen:
So ermittelst du wieviele Stühle in der linken Spalte zu sehen sind:
Code: |
anzahlBilder = $('#content').children().length;
|
Zuletzt bearbeitet von gotoAndPlay am Fr 23.03.2012 14:15, insgesamt 1-mal bearbeitet
|
|
|
|
|
elagil
Threadersteller
Dabei seit: 21.03.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 24.03.2012 02:35
Titel
|
|
|
Code: | $('.test').click(function(){
alert($('.test').index($(this)))
}) |
naja das meine ich nicht so ganz, vielleicht hilft es aber trotzdem... der code lädt doch bei click auf ein element der klasse "test" die nummer des div (was ist das für eine nummer? muss ich dafür die divs durchnummerieren [also die IDs hochzählen] ? ).
Was brauche ich noch dazu? alert gibt doch die nummer in einem fenster aus?..
Wie schon gesagt meinte ich aber eigentlich etwas anderes.
Wenn ich auf einen Stuhl in der scrolleiste klicke, lädt sich ein inhalt im zielcontainer. ein click auf den inhalt in diesem zielcontainer soll nun den nächsten inhalt laden! je nach stuhl liegen dateien von 1.html bis 5.html benannt in einem ordner, der dem stuhl zugehörig ist, die nacheinander aufgerufen werden müssen.
Ich hatte da eine idee, über den zielcontainer einen "clickcontainer" zu legen, der dann immer die dateinamen hochzählt und bei 5 wieder auf 1 springt.
Mir ist auch aufgefallen: wenn ich eine html in den div container lade, verhalten sich die links so, als wäre die geladene html im selben verzeichnis wie die datei in der der zielcontainer liegt.. ist das richtig?
Code: | anzahlBilder = $('#content').children().length; |
das ist interessant wer weiß wozu das zu gebrauchen ist
|
|
|
|
|
gotoAndPlay
Dabei seit: 22.11.2006
Ort: -
Alter: 40
Geschlecht:
|
Verfasst Sa 24.03.2012 06:22
Titel
|
|
|
Du hast doch in der linken Spalte die Stühle und wenn du auf einen Stuhl klickst, dann möchtest du den passenden Inhalt nachladen!?
Wenn du den Stühlen in der linken Spalte eine eindeutige Klasse zuweist, z.B. Test, dann lässt sich mit diesem Befehl:
$('.test').index($(this))
ermitteln, welcher der Stühle angeklickt worden ist.
Dieser Stuhl hat dann die Nummer 0
Und dieser die Nummer 3:
Statt in einem alert speicherst du die Nummer in einer Variablen und lädst dann die Datei mit dem Namen 3.html usw.
Code: |
$('.test').click(function(){
var Stuhl = $('.test').index($(this));
$('#ziel').load(Stuhl + '.html')
})
|
Dein eigentliches Problem
Kannst du auf einem ähnlichen Weg lösen:
Zunächst ermittelst du welche Datei/Nummer beim klick in die linke Spalte geladen worden ist:
Code: |
var Stuhl = '';
$('.test').click(function(){
var Stuhl = $('.test').index($(this));
})
|
Und bei einem klick auf den clickcontainer zählst du einfach den Zähler hoch:
Code: |
$('#clickcontainer').click(function(){
Stuhl++;
$('#ziel').load(Stuhl + '.html')
})
|
Aufgrund der frühen Uhrzeit, ist diesmal alles ungetestet
|
|
|
|
|
elagil
Threadersteller
Dabei seit: 21.03.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 24.03.2012 10:01
Titel
|
|
|
vielen dank! das spart schonmal viel arbeit
ich habe die links im menü dann doch mal ersetzt funktioniert sehr gut.. ein bisschen anders allerdings, weil ich mit der Variable "Stuhl" keine Datei sondern einen Ordner anspreche, in dem die erste Datei immer "0.html" heißt. Alle Stuhlordner liegen dabei in "stuhl" :
Code: | $('.menu').click(function(){
var Stuhl = $('.menu').index($(this));
$('#ziel').load("stuhl/" + Stuhl + "/0.html")
}) |
Entsprechend muss auch der zweite codeteil geändert werden. der ordner zu var:Stuhl soll ja derselbe bleiben, nur die Datei weiterzählen. Hier mal was ich mir gedacht habe. er soll bei 0 anfangen, die Nummer wird dann hochgezählt
Code: | var zahl = 0;
$('.menu').click(function(){
var Stuhl = $('.menu').index($(this));
$('#ziel').load("stuhl/" + Stuhl + "/0.html")
})
$('#clickcontainer').click(function(){
zahl++;
$('#ziel').load("stuhl/" + Stuhl + "/" + zahl + ".html")
}) |
geht aber nicht, weil die Variable Stuhl im zweiten teil nicht mehr verfügbar ist, wie es scheint. Wenn ich Stuhl einfach durch eine Zahl ersetze geht das ganze..
Zuletzt bearbeitet von elagil am Sa 24.03.2012 10:02, insgesamt 2-mal bearbeitet
|
|
|
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Sa 24.03.2012 11:35
Titel
|
|
|
Ich würde Dir zu einer server-dynamischen Lösung raten. Dein Menüverhalten bekommst DU dann mit bissl wenig Ajax hin.
|
|
|
|
|
|
|
|
Ä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.
|
|