ramo_andMedlem sedan nov. 2010214 inlägg Hej,
Skulle vilja göra en egen liten "slider" med jQuery. Har försökt med allt möjligt men lyckas inte få till det riktigt. Så ser min html ut (går ej att ändra):
<div class="shopwindow_grid gridType6">
<h3 class="gridTitle">Erbjudande</h3>
<table width="190" cellspacing="0" cellpadding="0" border="0" class="gridRow"><tbody><tr valign="top">
<tr>
<td width="14" height="100%" class="gridItemContainer gridArticleContainer gridItemFirstColumn gridItemFirstRow"><table width="100%" cellspacing="0" cellpadding="0" border="0" height="100%">
Innehåll
</td>
<td width="30" class="twsright"></td>
<td width="14" height="100%" class="gridItemContainer gridArticleContainer gridItemFirstRow"><table width="100%" cellspacing="0" cellpadding="0" border="0" height="100%">
Innehåll
</td>
<td width="30" class="twsright"></td>
<td width="14" height="100%" class="gridItemContainer gridArticleContainer gridItemFirstRow"><table width="100%" cellspacing="0" cellpadding="0" border="0" height="100%">
Innehåll
</td>
<td width="30" class="twsright"></td>
<td width="14" height="100%" class="gridItemContainer gridArticleContainer gridItemFirstRow"><table width="100%" cellspacing="0" cellpadding="0" border="0" height="100%">
Innehåll
</td>
<td width="30" class="twsright"></td>
<td width="14" height="100%" class="gridItemContainer gridArticleContainer gridItemFirstRow"><table width="100%" cellspacing="0" cellpadding="0" border="0" height="100%">
</td>
</tr>
</table>
</div>
<div id="buttons">
<a class="prev" href="#">Förra</a> | <a class="next" href="#">Nästa</a>
</div>
Och här är CSS:en
.gridRow td.gridItemContainer {
display: none;
}
gridRow td.gridItemFirstColumn {
display: block;
}
Det ör alltså 5 st <td> i bredd där jag valt att visa endast det första <td>-fältet. Tanken är sedan att när man klickar på "nästa" så ska skall den första td:n döljas och nästa visas. Samma sak fast tvärtom gäller då när man klickar på "förra".
Har försökt göra en klickfunktion med jQuery och lyckas komma så långt att td:n döljs men jag får inte fram nästa td.
Hur kan jag åstadkomma detta?
Kolla jquery.next() för att ta nästa td (om det är td:n du har click-eventet) är lite osäker på att display-block är vettigt på en tabellcell.
ramo_andMedlem sedan nov. 2010214 inlägg Ok, bytte till display: inline istället.
Testade med detta:
$('#buttons .next').click(function() {
$('#rightField .gridItemFirstColumn').removeClass('gridItemFirstColumn');
$(this).next().addClass('gridItemFirstColumn');
});
removeClass funkar men inte addClass. Tänkte då att den td:n som har klassen gridItemFirstColumn visas eftersom det är den enda klassen som skiljer dem åt. I övrigt är ju alla andra klasser samma.
Har även provat med hide och show med de funkar inte heller...
$(this) pekar på ".next" så du få ju ta .next() på din #rightField .gridItemFirstColumn
ramo_andMedlem sedan nov. 2010214 inlägg Menar du såhär?
$('#buttons .next').click(function() {
$('#rightField .gridItemFirstColumn').removeClass('gridItemFirstColumn');
$('#rightField .gridItemFirstColumn').next().addClass('gridItemFirstColumn');
});
Detta funkar inte.. Antar att jag gör fel :)
Du är medveten om att HTML koden är felaktig?
.next() bli ju td.twsright vilket inte är önskat heller väl?
sen #rightField finns ju inte i din exempelkod finns denna med i din kod?
Du måste se till också att ditt click-event inte kör sitt default event (return false; eller event.preventDefault):
$(el).click(function(e) { e.preventDefault();});
ramo_andMedlem sedan nov. 2010214 inlägg
voigtann1 skrev:
Du är medveten om att HTML koden är felaktig?
.next() bli ju td.twsright vilket inte är önskat heller väl?
sen #rightField finns ju inte i din exempelkod finns denna med i din kod?
Du måste se till också att ditt click-event inte kör sitt default event (return false; eller event.preventDefault):
$(el).click(function(e) { e.preventDefault();});
Ja vet, men den genereras automatiskt så jag kan inte ändra den tyvärr.. Går det att lösa ändå?
#rightField glömde jag skriva med. Det är höger spalten på sidan. All html som jag skrev ovan ligger i #rightField. Anledningen till att jag har med den är för att samma htmlstruktur finns på ett annat ställe på sidan och jag vill att detta bara skall gälla i högerspalten.
Förmodligen, men koden är ju riktigt jobbig att jobba med eftersom om man kollar vad som firefox tolkar din kod som är:
<table width="190" cellspacing="0" cellpadding="0" border="0" class="gridRow">
<tbody>
<tr valign="top"></tr>
<tr>
<td width="14" height="100%" class="gridItemContainer gridArticleContainer gridItemFirstColumn gridItemFirstRow">
Innehåll
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="30" class="twsright"></td>
<td width="14" height="100%" class="gridItemContainer gridArticleContainer gridItemFirstRow">
Innehåll
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="30" class="twsright"></td>
<td width="14" height="100%" class="gridItemContainer gridArticleContainer gridItemFirstRow">
Innehåll
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="30" class="twsright"></td>
<td width="14" height="100%" class="gridItemContainer gridArticleContainer gridItemFirstRow">
Innehåll
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="30" class="twsright"></td>
<td width="14" height="100%" class="gridItemContainer gridArticleContainer gridItemFirstRow">
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0"></table>
<div id="buttons">
<a href="#" class="prev">Förra</a> | <a href="#" class="next">Nästa</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Vilket innebär att nästa och förra a-elementet alltid kommer också vara dold om jag förstått det hela rätt.
Jag förstå att du använder dig av någon tjänst för detta, men kan du inte lösa detta på ett smidigare sätt? är inget roligt projekt att försöka sig på att lösa då allt är nästlad som bara den.
ramo_andMedlem sedan nov. 2010214 inlägg Löste det med denna koden:
$("#rightField .gridRow td").each(function(index){
$(this).addClass("eq-"+index);
});
$('.eq-0, .eq-5, .eq-10, .eq-15, .eq-20').addClass('gridItemFilter');
$('.gridItemFilter:last-child').addClass('gridItemFilterLast');
$('#buttons .next').click(function() {
if ($('.eq-0:not(.gridItemFilterLast)').is(':visible')) {
$('.eq-0').attr('style','display: none;');
$('.eq-5').attr('style','display: table-cell;');
}
else if ($('.eq-5:not(.gridItemFilterLast)').is(':visible')) {
$('.eq-5').attr('style','display: none;');
$('.eq-10').attr('style','display: table-cell;');
}
else if ($('.eq-10:not(.gridItemFilterLast)').is(':visible')) {
$('.eq-10').attr('style','display: none;');
$('.eq-15').attr('style','display: table-cell;');
}
else if ($('.eq-15:not(.gridItemFilterLast)').is(':visible')) {
$('.eq-15').attr('style','display: none;');
$('.eq-20').attr('style','display: table-cell;');
}
});
$('#buttons .prev').click(function() {
if ($('.eq-20').is(':visible')) {
$('.eq-20').attr('style','display: none;');
$('.eq-15').attr('style','display: table-cell;');
}
else if ($('.eq-15:not(.gridItemFilterLast)').is(':visible')) {
$('.eq-15').attr('style','display: none;');
$('.eq-10').attr('style','display: table-cell;');
}
else if ($('.eq-10:not(.gridItemFilterLast)').is(':visible')) {
$('.eq-10').attr('style','display: none;');
$('.eq-5').attr('style','display: table-cell;');
}
else if ($('.eq-5:not(.gridItemFilterLast)').is(':visible')) {
$('.eq-5').attr('style','display: none;');
$('.eq-0').attr('style','display: table-cell;');
}
});
Kanske inte den bästa koden men det funkar iaf. Dock så har jag ett problem. Den här tabellen ligger en bit ner på sidan och jag har ju a href="#" på next- och prev-länkar. Då hoppar den upp till toppen på sidan varje gång man klickar på nån av länkarna. Går det att få bort?
event.preventDefault / return false på dina click element
ramo_andMedlem sedan nov. 2010214 inlägg Hade glömt prova det i Internet Explorer, och självklart strular det där.. det verkar bli nåt fel med click-funktionen. Detta funkar:
$("#rightField .gridRow td").each(function(index){
$(this).addClass("eq-"+index);
});
$('.eq-0, .eq-5, .eq-10, .eq-15, .eq-20').addClass('gridItemFilter');
$('.gridItemFilter:last-child').addClass('gridItemFilterLast');
Men jag klickar på "nästa" så byter den en gång och efter det händer ingeting, oavsett om jag klickar på "förra" eller "nästa". Vad kan detta bero på?
lägg upp en demo på jsbin.com
men koden i sig känns som du borde kunna optimera lite:
$('.eq-0, .eq-5, .eq-10, .eq-15, .eq-20').addClass('gridItemFilter');
$('.gridItemFilter:last-child').addClass('gridItemFilterLast');
kan ju skrivas som:
$('.eq-0, .eq-5, .eq-10, .eq-15, .eq-20').addClass('gridItemFilter').last().addClass('gridItemFilterLast');
Då du redan ha en kollektion av .gridItemFilter
ramo_andMedlem sedan nov. 2010214 inlägg har gjort en demo på http://jsbin.com/erefiw
Får inte css:en att funka, har jag gjort nåt fel?
är det den genererade HTML koden ifrån ditt system?
du försöker hitta 'gritItemContainer' men den heter (vad jag ser) 'gridArticleContainer': http://jsbin.com/erefiw/2/edit
ramo_andMedlem sedan nov. 2010214 inlägg Ja nästan, jag har tagit bort den riktiga texten, bilder osv.
gridItemContainer och gridArticleContainer är ju samma element?
<td class="gridItemContainer gridArticleContainer gridItemFirstColumn gridItemFirstRow">
Eller är jag helt ute o cyklar??
ramo_andMedlem sedan nov. 2010214 inlägg jag har ändrat html-koden till den som e på min sida exakt nu.
http://jsbin.com/erefiw/6
Detta funkar faktiskt i Internet Explorer, men jag tog den koden som Firefox genrerade. Försökte komma åt IEs källkod men när jag trycker på "visa källa" i Internet Explorer så händer ingenting. Kan det vara fel på mitt Internet Explorer då?
Du vill egentligen inte använda dig av någons webbläsares tolkning av hur dom skall rendera tabellerna, vilket i ditt fall verkar omöjligt (hade kontaktat dom som har gjort ditt verktyg och bett dom fixar uppenbara problem).
Du måste ju använda rå-html för att kunna testa något, inte det en webbläsare "tror" du vill ha då det inte kommer fungera på alla läsare.
ramo_andMedlem sedan nov. 2010214 inlägg Har testat lite mer nu och min sida funkar bra i IE9, men inte i IE8. Där blir de nåt fel..
fungera för mig i en ren IE8
