mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 17:42 Benutzername: Passwort: Auto-Login

Thema: angeklickter DIV container hervorgehoben (unerwünscht) ! vom 23.03.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> angeklickter DIV container hervorgehoben (unerwünscht) !
Seite: 1, 2, 3, 4, 5  Weiter
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) !

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Fr 23.03.2012 11:46
Titel

Antworten mit Zitat Zum Seitenanfang

Vielleicht hilft
Code:

#content:active{border:0;}

... oder ein allgemeines CSS Reset. Ohne dir jetz das Layout zerschiessen zu wollen tuts aber auch
Code:
*{border:0;}


Zuletzt bearbeitet von SimonDerDude am Fr 23.03.2012 11:58, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
elagil
Threadersteller

Dabei seit: 21.03.2012
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 23.03.2012 12:50
Titel

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden
gotoAndPlay

Dabei seit: 22.11.2006
Ort: -
Alter: 40
Geschlecht: Männlich
Verfasst Fr 23.03.2012 14:15
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
elagil
Threadersteller

Dabei seit: 21.03.2012
Ort: -
Alter: -
Geschlecht: -
Verfasst Sa 24.03.2012 02:35
Titel

Antworten mit Zitat Zum Seitenanfang

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 *zwinker* wer weiß wozu das zu gebrauchen ist Lächel
  View user's profile Private Nachricht senden
gotoAndPlay

Dabei seit: 22.11.2006
Ort: -
Alter: 40
Geschlecht: Männlich
Verfasst Sa 24.03.2012 06:22
Titel

Antworten mit Zitat Zum Seitenanfang

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 *zwinker*
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 *zwinker*
  View user's profile Private Nachricht senden
elagil
Threadersteller

Dabei seit: 21.03.2012
Ort: -
Alter: -
Geschlecht: -
Verfasst Sa 24.03.2012 10:01
Titel

Antworten mit Zitat Zum Seitenanfang

vielen dank! das spart schonmal viel arbeit Lächel

ich habe die links im menü dann doch mal ersetzt *zwinker* 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" *zwinker* :

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
  View user's profile Private Nachricht senden
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst Sa 24.03.2012 11:35
Titel

Antworten mit Zitat Zum Seitenanfang

Ich würde Dir zu einer server-dynamischen Lösung raten. Dein Menüverhalten bekommst DU dann mit bissl wenig Ajax hin.
  View user's profile Private Nachricht senden
 
Ä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?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3, 4, 5  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


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.