Funj0y
Mitglied
Hallo,
Wie dem Titel zu entnehmen versuche ich irgendwie den Focus neu zu setzen sobald ich ein A- Element geklickt habe. Es ist zwar nur ein Schönheitsfehler jedoch stört er mich irgendwie ^^
Hier mal ein Screen zur Veranschaulichung wie es aussieht wenn der Focus nicht neu gesetzt wurde.
Nun suche ich nach einer optimalen Lösung wenn es die gibt?!
Normaler weise geh ich immer so vor, da ich nun kein wirklicher Javascript Programmierer bin (meine Stärken liegen eher in PHP) suche ich via Google nach möglichen Methoden-Namen wie z.B. Focus oder View. Bei Focus werde ich natürlich auf die Methode focus() verwiesen, die jedoch eher für Form- Elemente gedacht ist. Bei View bekomme ich nur Methoden genannt wo ich mir Werte wie die X/Y-Achse zurückgeben lassen kann, was mir hier auch nicht hilft. Da ich nun mit mein Latein am Ende bin wende ich mich an euch
Nun erstmal zu meiner AJAX Funktion ^^
Ich habe mir mittels dem Prototype Framework eine kleine AJAX Funktion geschrieben die mir anhang der Navigation die Daten asynchron an meine Sidebar schickt, und dann natürlich den benutzten Link in der Navigation hervorhebt. Das funktioniert auch alles einwandfrei!
Hier meine AJAX Funktion:
Hier die HTML Datei dazu:
Bin für jede Hilfe dankbar
Gruß Funj0y
Wie dem Titel zu entnehmen versuche ich irgendwie den Focus neu zu setzen sobald ich ein A- Element geklickt habe. Es ist zwar nur ein Schönheitsfehler jedoch stört er mich irgendwie ^^
Hier mal ein Screen zur Veranschaulichung wie es aussieht wenn der Focus nicht neu gesetzt wurde.
Nun suche ich nach einer optimalen Lösung wenn es die gibt?!
Normaler weise geh ich immer so vor, da ich nun kein wirklicher Javascript Programmierer bin (meine Stärken liegen eher in PHP) suche ich via Google nach möglichen Methoden-Namen wie z.B. Focus oder View. Bei Focus werde ich natürlich auf die Methode focus() verwiesen, die jedoch eher für Form- Elemente gedacht ist. Bei View bekomme ich nur Methoden genannt wo ich mir Werte wie die X/Y-Achse zurückgeben lassen kann, was mir hier auch nicht hilft. Da ich nun mit mein Latein am Ende bin wende ich mich an euch
Nun erstmal zu meiner AJAX Funktion ^^
Ich habe mir mittels dem Prototype Framework eine kleine AJAX Funktion geschrieben die mir anhang der Navigation die Daten asynchron an meine Sidebar schickt, und dann natürlich den benutzten Link in der Navigation hervorhebt. Das funktioniert auch alles einwandfrei!
Hier meine AJAX Funktion:
Javascript:
// Observe all events...
Event.observe(window, 'load', init, false);
/**
* Located the start selector id
*
* @var string
*/
var linkStartId;
/**
* Initialized all methods
*/
function init() {
navigation();
}
/**
* Observe all events in the navigation
*/
function navigation() {
// Array with all A- element's in the
// DIV- element with the id 'navigation'
var naviElement = $('navigation').select('a');
// Search the class 'HoverActivated' and set it to the start id
naviElement.each(function (name) {
if($(name.readAttribute('id')).hasClassName('HoverActivated')) {
linkStartId = name.readAttribute('id');
}
});
// Observe all events by a click of the A- element
naviElement.each(function (name) {
Event.observe(name.readAttribute('id'), 'click', sidebar, false);
});
}
/**
* Require the request in the sidebar
*/
function sidebar(objectEvent) {
var id = $(Event.element(objectEvent)).readAttribute('id');
var send = false;
// Check if a request need via AJAX
if($(id).hasClassName('HoverActivated') == false) {
send = true;
}
// Remove the class name from the old link
$(linkStartId).removeClassName('HoverActivated');
linkStartId = id;
// If will the link used, then add the class name
$(id).addClassName('HoverActivated');
// Have the query a sidebar then request via AJAX the sidebar
if(id.indexOf('-SB') > 0 && send == true) {
var url = 'index.php';
var pars = 'page=sidebar&file='+id;
var target = 'sidebarMenu';
var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars});
}
}Hier die HTML Datei dazu:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title>SV Bau-Union e.V. - Abteilung Tischtennis</title>
<meta http-equiv="Content-type" content="text/html; CHARSET=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="src/style/svbu-2010/css/design.css" media="screen" />
<script type="text/javascript" src="src/js/prototype.js"></script>
<script type="text/javascript" src="src/js/sidebar.js"></script>
</head>
<body>
<div id="wrap" class="FullHeigh">
<div id="header"></div>
<!-- ////////// Navigation -->
<div id="navigation">
<ul>
<li><a id="idImpressum" href="#">Impressum</a></li>
<li><a id="idSection" href="#">Abteilungen</a></li>
<li><a id="idContact" href="#">Kontakt</a></li>
<li><a id="idTeams-SB" href="#">Mannschaften</a></li>
<li><a id="idHomepage" href="index.php?page=index" class="HoverActivated">Startseite</a></li>
</ul>
</div>
<!-- ////////// Sidebar -->
<div id="sidebar" class="FloatLeft">
<p id="logoIds">
<a href="http://www.integration-durch-sport.de">
<img src="src/img/logoIds.jpg" height="47" width="93" alt="Integration durch Sport" title="Integration durch Sport" />
</a>
</p>
<div id="sidebarMenu">
....
</div>
</div>
<!-- ////////// Content -->
<div id="content" class="FloatLeft">
...
</div>
</div>
</body>
</html>Bin für jede Hilfe dankbar
Gruß Funj0y
