nicht angemeldet
Tooltip auf Custom Checkbox
Hallo,
ich hoffe jemand kann mir weiterhelfen:
Ich entwickle gerade Markenverzeichnis, bei dem jeder Eintrag anklickbar (Custom Checkbox) sein soll und dazu noch einen Tooltip enthält.
Soweit bin ich schon:
http://www.franckreich.de/wip/brandbar.html
<body>
<!-- brand container -->
<div id="brandBar">
<form method="post" action="">
<div class="brands">
<table class="brandTable">
<tr>
<td class="logoCarrier_checked" id="marke9900000000073_Troyan">
<input type="checkbox" name="0" checked="checked" class="styled" />
<div class="tooltip" id="0">
<p>bl2bl2</p>
</div>
</td>
</tr>
<tr>
<td>
<span class=brandName">name</span>
</td>
</tr>
</table>
</div>
<div class="brands">
<table class="brandTable">
<tr>
<td class="logoCarrier_checked" id="marke9900000000097_bleed">
<input type="checkbox" name="1" class="styled" />
<div class="tooltip" id="1">
<p>bl3bl3</p>
</div>
</td>
</tr>
<tr>
<td>
<span class=brandName">name</span>
</td>
</tr>
</table>
</div>
<div class="brands">
<table class="brandTable">
<tr>
<td class="logoCarrier">
<img class="shrunkLogo" src="members/logos/marke9900000000097_bleed.jpg" rel="bleed"/>
<!-- tooltip-->
<div class="tooltip" id="bleed">
<p>bl1bl1</p>
</div>
<!-- end tooltip -->
</td>
</tr>
<tr>
<td>
<span class=brandName">name</span>
</td>
</tr>
</table>
</div>
</form>
</div>
</body>
1. Eintrag = Checkbox, anklickbar
2. Eintrag = Checkbox, anklickbar
3. Eintrag = reguläres IMG mit Tooltip
Beim Laden der Datei werden die Checkboxen ausgeblendet und stattdessen Images erzeugt. Beim Anklicken wechselt der Status von Checked/Unchecked und entsprechend das Hintergrundbild.
// -------------------------- Tooltip Functions -------------------------------------------
$(function()
{
$('.logocarrier img[rel], .logoCarrier_checked img[rel]').tooltip(
{
offset: [0, 0],
effect: 'slide'
});
})
// -------------------------- Replace Checkbox Buttons -------------------------------------
window.onload = init;
var d=document;
function init() {
so_createCustomCheckBoxes();
}
function so_createCustomCheckBoxes()
{
events = new Array("onfocus", "onblur", "onselect", "onchange", "onclick", "ondblclick", "onmousedown", "onmouseup", "onmouseover", "onmousemove", "onmouseout", "onkeypress", "onkeydown", "onkeyup");
var i=0;
instance = d.getElementById("brandBar").getElementsByTagName ("table");
for(a=0;a<instance.length;a++)
{
kopf = instance[a].getElementsByTagName("td");
for (w=0;w<kopf.length;w++)
{
v = kopf[w].id
if (v != "")
{
formField = kopf[w].childNodes.item(1).getAttribute("type");
if (formField == "checkbox")
{
cover = kopf[w].childNodes.item(1);
cover.style.display = "none";
n = d.createElement("img");
n.setAttribute("class","styled");
n.setAttribute("src","members/logos/"+v+".jpg");
n.setAttribute("width","58px");
n.setAttribute("style","cursor:pointer;");
n.setAttribute("rel",i);
cover.parentNode.insertBefore(n,cover.nextSibling);
if(cover.checked == false)
{
n.previousSibling.parentNode.setAttribute("class","logoCarrier");
}
else
{
n.previousSibling.parentNode.setAttribute("class","logoCarrier_checked");
}
n.xid = cover.getAttribute("name");
n.onclick = function()
{
so_toggleCheckBox(this,0);
return false;
}
n.frmIndex = i;
cover.objRef = n;
}
i = i+1;
}
}
}
};
function so_toggleCheckBox(imgObj,caller)
{
formObj = d.forms[imgObj.frmIndex];
objName = imgObj.xid;
status = d.getElementsByName(objName)[0].checked
if (status == true)
{
d.getElementsByName(objName)[0].checked = false;
d.getElementsByName(objName)[0].parentNode.setAttribute("class","logoCarrier");
}
else
{
d.getElementsByName(objName)[0].checked = true;
d.getElementsByName(objName)[0].parentNode.setAttribute("class","logoCarrier_checked");
}
}
Beim Erzeugen der Images werden alle IMG durchlaufen. Der Zähler i läuft mit (0,1,2). Wenn ich mit n.setAttribute ("rel",i) definiere sollte doch jedem erzeugten Bild das Attribut "rel" mit dem Wert i (0,1,2) zugeordnet werden?
Der Tooltip hat als ID die entsprechenden Nummern (0,1,2) und müsste eigentlich aufgerufen werden.
Frage: WARUM FUNKTIONIERT ES NICHT?
Schon mal vielen Dank für Input.
Gruss
Frequent
-
Grüße,
hast du versucht den Script schritt für schritt durchzulaufen und die variablenwerte zu kontrollieren?
MFG
bleicher-
Grüße,
hast du versucht den Script schritt für schritt durchzulaufen und die variablenwerte zu kontrollieren?
MFG
bleicherHallo,
hab nochmal geschaut. Ich finde nichts.
aktualisiert:
http://www.franckreich.de/wip/brandbar.htmlDie relevante Variable für rel = i, dem 1. Bild wird rel=0 zugeordnet, dem 2. Bilder rel=1, usw. Stimmt mit den ID`s der Tooltips überein.
Liegt es vielleicht am Tooltip?
Gruss
Frequent
-
Grüße,
Liegt es vielleicht am Tooltip?
jQuery ist oversized für das project, die ganzen abläufe zu verfoglen würde stunde oder mehr (je nach glück) brauchen, was ich logischerweise nciht tun werde, also liegt es an die den prozess zu verfolgen - was nutzst du? Dragonfly?
MFG
bleicher-
was nutzst du? Dragonfly?
nen stinknormalen HTML Editor. Phase5.
Ich dachte, vielleicht springt einem Fachmann der Fehler ins Auge. Mir jedenfalls nicht... :-(
Bin aber schon etwas schlauer. Hier die Zusammenfassung:
HTML
<tr> <td class="logoCarrier_checked"> <!-- wird versteckt & img danach eingeblendet --> <input type="checkbox" name="0" checked="checked" /> <!--tooltip--> <div class="tooltip" id="0"> <p>bl2bl2</p> </div> </td> </tr>Javascript - IMG genieren und Atttribute einfügen
/* Checkbox ausblenden */ cover.style.display = "none"; /* IMG generieren */ n = d.createElement("img"); /* class zuweisen */ n.setAttribute("class","steil"); /* nach Checkbox einfügen */ cover.parentNode.insertBefore(n,cover.nextSibling);CSS wird auch auf genierete IMG angewendet
.steil { position: relative; right: 2px; cursor: pointer; } .tooltip { display:none; }Der Tooltip, der nicht will...
$(function() {$('.steil').tooltip( { effect: 'slide' }) });Dem IMG wird eine Klasse und entsprechendes CSS zugewiesen.
Danke für Input & Grüße,
Frequent
-
Grüße,
nen stinknormalen HTML Editor. Phase5.
Tipp für die zukunft - da niemand sich die mühe machen wird mehr als dutzend zeilen JS für dich zu checken, solltest du Opera als Browser installeiren, es bringt Dragonfly mit - damit kansnt du JSscripte "schritt für schritt" durchgehen und die ereignisse/variablenwerte/DOMoperationen dabei genau beobachten.
MFG
bleicher
-
-
-
-
-
Hallo,
was mir auffällt:
<input type="checkbox" name="0" checked="checked" class="styled" />
<div class="tooltip" id="0">Du verwendest reine Zahlen für die Werte von id- und name-Attributen. Vor HTML5 war das nicht erlaubt. Problematisch mit (definitiv bei älteren) IEs ist der gemeinsame Namensraum von id und name. Ich würde keinem Element eine id geben, die ein anderes Element als Name hat.
n.setAttribute("class","styled");n.xid = cover.getAttribute("name");
Probleme im IE mit setAttribute() sind bekannt, <http://de.selfhtml.org/javascript/objekte/node.htm#set_attribute@title=siehe SELFHTML>. Einfaches Umgehen dieser Probleme: setAttribute() gar nicht verwenden.
Freundliche Grüße
Vinzenz
