| Autor |
Nachricht |
type1
Threadersteller
Dabei seit: 19.11.2004
Ort: -
Alter: 44
Geschlecht: 
|
Verfasst Di 22.03.2011 09:38
Titel
|
  |
|
| Karlarsch hat geschrieben: | Die unterschiedlichen Browser akzeptieren nicht zwingend für alle Elemente :focus (wie auch :hover).
|
Ich habe es für die aktuellen Versionen Firefox, IE und Opera getestet.
Der Hinweis auf die Verwendung von Technologien unter Berücksichtigung der Empfangs und Interpretationsgeräte ist zwar richtig, doch mehr Pflichthinweis. Irgendwann muss man auch einfach mal eine Minimalkonfiguration festlegen.
Danke für jeden Post!
//Zum Thema:
Ich habe kein "ready" 
Meine header.php enthält folgenden Code:
| Code: | <script type="text/javascript">
function hide($id){
$div = document.getElementById($id);
$div.style.display = 'none';
}
function show($id){
$div = document.getElementById($id);
$div.style.display = 'block';
}
</script>
<script type="text/javascript">
var angeschaltet = 0;
function anzeigen(das){
if(angeschaltet != 0)
document.getElementById(angeschaltet).style.display='none';
if(document.getElementById(das).style.display=='none')
document.getElementById(das).style.display='block';
else
document.getElementById(das).style.display='none';
angeschaltet= das;
}
</script>
|
Auf der entsprechenden Templateseite ist dann folgender Aufruf:
| Code: | | <div id="navi_kopf"><a href="javascript:void(0);" onclick="anzeigen('textbox_kopf')"></a></div> |
Zuletzt bearbeitet von type1 am Di 22.03.2011 09:41, insgesamt 2-mal bearbeitet
|
|
| |
  |
 |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 22.03.2011 10:03
Titel
|
|
|
| Code: | #navi_kopf a#active {
position:absolute; top:0px; left: 80px;
background-image: url(http://192.168.118.14/wordpress/wp-content/uploads/2011/02/markierung_aktiv.png);
display:inline-block;
width: 35px;
height: 35px;
background-repeat:no-repeat;
opacity:1;
outline:0;
}
<a href="#" id="active">Dein aktives Element</a> |
|
|
| |
 |
|
|
Anzeige
|
|
|
type1
Threadersteller
Dabei seit: 19.11.2004
Ort: -
Alter: 44
Geschlecht:
|
Verfasst Di 22.03.2011 10:16
Titel
|
|
|
Das schnall ich so nicht.
Ich mache also eine weitere DIV id auf, und die lade ich dann?
Habe das gerade mal schnell getestet, aber in meiner unfähigen Art kommt da nur Unfug bei raus.
|
|
| |
|
|
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht:
|
Verfasst Di 22.03.2011 12:14
Titel
|
|
|
Du hast kein "ready", weil du augenscheinlich auch kein jQuery einsetzt (was dir btw. ne Menge Arbeit ersparen könnte).
Alle innerhalb von "ready" gesetzten scripte werden erst ausgeführt wenn das DOM vollständig vorhanden ist.
Statt jede style-Eigenschaft mittels JS zu setzen, solltest du dir überlegen einfach eine entsprechende CSS-Klasse zu tauschen. Das ist performanter und ressourcenschonender.
Ausserdem solltest du dich mal mit unobtrusivem JavaScript beschäftigen...ist ganz interessant 
Das hier
| Code: | | <a href="javascript:void(0);" onclick="anzeigen('textbox_kopf')"> |
ist ganz böse. Schon, dann so:
| Code: | | <a href="#" onclick="anzeigen('textbox_kopf'); return false;"> |
Gruß
Karl
|
|
| |
|
|
type1
Threadersteller
Dabei seit: 19.11.2004
Ort: -
Alter: 44
Geschlecht:
|
Verfasst Di 22.03.2011 14:59
Titel
|
|
|
Da ich das nur für ein konkretes "Projekt" benötige wurste ich mir das (berechtigterweise kritisiert, was sauberes Arbeiten angeht) so zusammen.
Daher wäre ich um einen Tipp dankbar, das in dem von mir geposteten Code zu lösen.
Stelle auch Bier in den Kühlschrank - wer gerade mal in Bielefeld ist 
Aber interessehalber: Warum ist das Bäh was da bis jetzt steht? Lernen tu ich ja dennoch gerne
Danke!
Zuletzt bearbeitet von type1 am Di 22.03.2011 15:00, insgesamt 1-mal bearbeitet
|
|
| |
|
|
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Di 22.03.2011 15:48
Titel
|
|
|
hier mal ein weg du du das mit jquery lösen könntest: http://jsfiddle.net/zgPtM/
jquery liest sich etwas besser, vielleicht wird kommt es dir da logischer vor. Ebenso gibt es kein Javascript "Müll" im HTML-Code sondern du kannst alles gesondert ablegen (worauf Karlarsch hingewiesen hatte).
Natürlich kannst du das auch ohne jQuery lösen, es ist aber eben aufwändiger, ebenso musst du dich mit jQuery nicht um verschiedene Browser kümmern. Etwas mit Kanonen auf Spatzen, aber es geht.
Edit: Code in Post kopiert, für später.
| Code: | $(function(){
// element
var $boxes = $('.box');
var $links = $('a');
// verstecken
$boxes.hide();
// klick auf links "beobachten"
$links.click(function(){
// Attribut REL auslesen
var class = $(this).attr('rel');
// Nochmals alle Boxen verstecken
$boxes.hide();
// Box mit Klasse == REL anzeigen
$('.'+class).show();
});
}) |
| Code: | <a rel="b1" href="#">Box 1</a>
<a rel="b2" href="#">Box 2</a>
<a rel="b3" href="#">Box 3</a>
<div class="box b1">Lorem ipsum Box1</div>
<div class="box b2">Ipsem dolor Box2</div>
<div class="box b3">Sit amet Box3</div> |
Zuletzt bearbeitet von choise am Di 22.03.2011 15:50, insgesamt 1-mal bearbeitet
|
|
| |
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Di 22.03.2011 17:37
Titel
|
|
|
| Zitat: | Die unterschiedlichen Browser akzeptieren nicht zwingend für alle Elemente :focus (wie auch :hover).
|
Guter Punkt. Gottseidank kann man das in jQuery/JS gut nachbilden. Ein CSS könnte dann so aussehen:
| Code: | #navi_kopf a.active ,
#navi_kopf a:active {
...
}
#navi_kopf a.focus ,
#navi_kopf a:focus{
...
} |
Die Klassen würde dabei JS schalten. Im Wesentlichen focus über onclick und active über onMouseover, onmouseover und onmouseout.
| Zitat: | Das hier
| Code: | <a href="javascript:void(0);" onclick="anzeigen('textbox_kopf')">
|
ist ganz böse. Schon, dann so:
| Code: | <a href="#" onclick="anzeigen('textbox_kopf'); return false;">
|
|
Auch nicht ganz richtig. Unobtrusive wäre, das href-Attribut mit Javascript umzuschreiben. Und dabei würde ich sehr wohl auf void statt auf Anker setzen. Anker lassen nämlich die Seite u. U. nach oben springen.
Und inline-Code-Attribute ist jetzt auch nicht gerade unobtrusive..
.
Zuletzt bearbeitet von pantonine am Di 22.03.2011 17:39, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht:
|
Verfasst Mi 23.03.2011 11:07
Titel
|
|
|
[/quote]Auch nicht ganz richtig. Unobtrusive wäre, das href-Attribut mit Javascript umzuschreiben. Und dabei würde ich sehr wohl auf void statt auf Anker setzen. Anker lassen nämlich die Seite u. U. nach oben springen.
Und inline-Code-Attribute ist jetzt auch nicht gerade unobtrusive..
.[/quote]
Ich meinte damit, wenn schon mit javascript in der Form gearbeitet wird, dann bitte kein "javascript:" im href-attribut.
Gruß
Karl
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
RollOver Zustand in Flash AS2?
Farbig hinterlegt bei aktivem Zustand
hover-zustand mit imagemaps ändern.
User nur bei eingeloggten Zustand pers. Ansprechen
[JavaScript] Accordion-Effekt mit Aktiv-Zustand versehen
on.../load Movie
|
|
Willkommen auf dem Portal für Mediengestalter
