| Autor |
Nachricht |
Kash
Moderator
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 29
Geschlecht: 
|
Verfasst Di 20.07.2010 15:19
Titel [jQuery] - Elemente automatisch anzeigen |
  |
|
Hallo zusammen,
ich bin daran mittels jQuery Elemente zu bilden wenn bestimmte Klassen auf bestimmten Elementen angewendet worden sind.
Derzeit funktioniert das nur beim Mouseover dieser bestimmten Elemente, brauche es aber so das es von alleine Angezeigt wird. Also nachdem die Seite geladen wurde.
Das HTML MarkUp schaut in etwa so aus
| Code: |
<div id="example_horizontal" class="countune-holder" style="overflow-x: auto; overflow-y: hidden;">
<table class="scrollpane">
<tbody>
<tr>
<td offset="0" len="1" class="batch"><div class="stripe blue"><div class="w20 purple bottom h30" title="0"> </div></div></td>
<td offset="0" len="1" class="batch"><div class="start stripe blue"><div class="w20 purple bottom h30" title="1"> </div></div></td>
<td offset="0" len="1" class="batch"><div class="stripe blue"><div class="w20 purple bottom h30" title="2"> </div></div></td>
</tr>
</tbody>
</table>
</div>
|
Das JavaScript
| Code: |
$(document).ready(function(){
$('<div id="pos-result" style="position:absolute;top:200px;left:0;height:200px;width:100%;z-index:1000;"></div>').appendTo('#example_horizontal');
/* -- T1 -- */
$('#example_horizontal .scrollpane tr td', document.body).mouseover(function (e) {
var offset = $(this).offset();
e.stopPropagation();
if ($(this).find('div').is('.start')) {
$('#pos-result').append('<div class="info-box" style="position:absolute;left:' + offset.left + 'px;top:0;width:100px;height:100px;background:#fff;opacity:0.7;">Info - Pos:' + offset.left + '</div>');
}
});
$("#example_horizontal .scrollpane td", document.body).mouseout(function (e) {
$("#pos-result > div").css("display","none");
});
/* -- T1 -- */
});
|
Ich hatte es schon mittels $('foo').each.function() probiert, aber das klappt leider nicht.
Hat mir jemand eine Idee/Tipp wie ich das lösen kann?
Falls ich mich schlecht ausgedrückt habe, bitte nachfragen.
Zuletzt bearbeitet von Kash am Di 20.07.2010 15:39, insgesamt 2-mal bearbeitet
|
|
| |
  |
 |
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 30
Geschlecht:
|
Verfasst Di 20.07.2010 16:21
Titel
|
|
|
| Code: |
$(document).ready(function(){
$exampleHorizontal = $('#example_horizontal');
$posResult = $('<div />',{
position : "absolute",
top : "200px",
left : "0",
height : "200px",
width : "100%",
z-index : "1000"
})
.appendTo($exampleHorizontal);
$scrollpaneDivs = $exampeHorizontal.find('.scrollpane tr td div');
$scrollpaneTDsLength = $scrollPaneTDs.length;
var isWorking = false;
setInterval (function () {
if(isWorking) { // last interval function not finished
return false;
}
isWorking = true;
tmpHTML = false;
for(i=0,I=scrollpaneTDsLength;i<I;i++) {
$currentDiv = $(scrollpaneDivs[i]);
if($currentDiv.hasClass('start') {
$currentDivOffset = $currentDiv.offset();
tmpHTML += "<div class="info-box" style="position: absolute;left:' + $currentDivOffset.left + 'px;top:0;width:100px;height:100px;background:#fff; opacity:0.7;">Info - Pos:' + $currentDivOffset.left + '</div>"
}
}
if(tmpHTML) {
$posResult.html($posResult.html() + tmpHTML);
}
isWorking = false;
}, 500);
});
|
(ungetestet)
Zuletzt bearbeitet von sahnemuh am Di 20.07.2010 16:23, insgesamt 2-mal bearbeitet
|
|
| |
|
|
Kash
Moderator
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 29
Geschlecht:
|
Verfasst Di 20.07.2010 16:35
Titel
|
|
|
Vielen Dank für den Ansatz ich schau mir das genau an.
Folgendes meldet die Konsole
| Zitat: | missing : after property id
z-index : "1000"\n |
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 30
Geschlecht:
|
Verfasst Di 20.07.2010 16:40
Titel
|
|
|
|
oops. bitte zIndex statt z-index schreiben.
|
|
| |
|
|
Kash
Moderator
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 29
Geschlecht:
|
Verfasst Di 20.07.2010 17:28
Titel
|
|
|
Hi Sahnemuh,
folgend das korrigierte Script
| Code: | $(document).ready(function(){
$exampleHorizontal = $('#example_horizontal');
$posResult = $('<div />',{
position : "absolute",
top : "200px",
left : "0",
height : "200px",
width : "100%",
zIndex : "1000"
}).appendTo($exampleHorizontal);
$scrollpaneDivs = $exampleHorizontal.find('.scrollpane tr td div');
$scrollpaneDivsLength = $scrollpaneDivs.length;
var isWorking = false;
setInterval (function () {
if(isWorking) { // last interval function not finished
return false;
}
isWorking = true;
tmpHTML = false;
for(i=0,I=scrollpaneDivsLength;i<I;i++) {
$currentDiv = $(scrollpaneDivs[i]);
if($currentDiv.hasClass('start')) {
$currentDivOffset = $currentDiv.offset();
tmpHTML += '<div class="info-box" style="position:absolute;left:' + $currentDivOffset.left + 'px;top:0;width:100px;height:100px;background:#fff;opacity:0.7;">Info - Pos:' + $currentDivOffset.left + '</div>'
}
}
if(tmpHTML) {
$posResult.html($posResult.html() + tmpHTML);
}
isWorking = false;
}, 500);
}); |
Bisher werden die Infoboxen noch nicht angezeigt. Und unter der Tabelle wird ein leeres Div erzeugt.
Die Konsole gibt noch den Fehler
| Zitat: | | Fehler: scrollpaneDivsLength is not defined |
aus.
// Den letzten Fehler konnte ich selbst ausmachen
| Code: | | for(i=0,I=$scrollpaneDivsLength;i<I;i++) { |
Die Konsole gibt jetzt keinen Fehler mehr an.
Der Div unter der Tabelle schaut leider immer noch so aus
Zuletzt bearbeitet von Kash am Di 20.07.2010 17:41, insgesamt 1-mal bearbeitet
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 30
Geschlecht:
|
Verfasst Di 20.07.2010 17:42
Titel
|
|
|
asdf.
flüchtigkeit ick hör' dir trapsen.
| Code: | $(document).ready(function(){
$exampleHorizontal = $('#example_horizontal');
$posResult = $('<div />',{
position : "absolute",
top : "200px",
left : "0",
height : "200px",
width : "100%",
zIndex : "1000"
}).appendTo($exampleHorizontal);
$scrollpaneDivs = $exampleHorizontal.find('.scrollpane tr td div');
scrollpaneDivsLength = $scrollpaneDivs.length;
var isWorking = false;
setInterval (function () {
if(isWorking) { // last interval function not finished
return false;
}
isWorking = true;
tmpHTML = false;
for(i=0,I=scrollpaneDivsLength;i<I;i++) {
$currentDiv = $($scrollpaneDivs[i]);
if($currentDiv.hasClass('start')) {
$currentDivOffset = $currentDiv.offset();
tmpHTML += '<div class="info-box" style="position:absolute;left:' + $currentDivOffset.left + 'px;top:0;width:100px;height:100px;background:#fff;opacity:0.7;">Info - Pos:' + $currentDivOffset.left + '</div>'
}
}
if(tmpHTML) {
$posResult.html($posResult.html() + tmpHTML);
}
isWorking = false;
}, 500);
}); |
|
|
| |
|
|
Kash
Moderator
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 29
Geschlecht:
|
Verfasst Di 20.07.2010 17:54
Titel
|
|
|
Bringt leider keinen Unterschied 
Was hattest Du geändert? Wenn ich die Scripte vergleiche kann ich keinen Unterschied erkennen.
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 30
Geschlecht:
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
jQuery - folgende Elemente ansprechen
jQuery bei .clone() entstehen unerwünschte Elemente
Slideout Tip automatisch öffnen [jquery]
onclick für bestimmte Elemente automatisch "vorbelegen"
jQuery Plugin - Slider als Input wie in jQuery UI
jquery - hide content in jquery object
|
|
Willkommen auf dem Portal für Mediengestalter
