webForumDet fria alternativet
Logga in / Bli medlem

Enkel slide-effekt med jQuery? Hur göra?

JavaScriptur Javascript

30 svar · 1 520 visningar · startad av ramo_and

ramo_andMedlem sedan nov. 2010214 inlägg
Frågan#1

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?

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#2

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
#3

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...

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#4

$(this) pekar på ".next" så du få ju ta .next() på din #rightField .gridItemFirstColumn

ramo_andMedlem sedan nov. 2010214 inlägg
#5

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 :)

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#6

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
#7

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.

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#8

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
#9

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?

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#10

event.preventDefault / return false på dina click element

ramo_andMedlem sedan nov. 2010214 inlägg
#11

Kanon! Tackar!

ramo_andMedlem sedan nov. 2010214 inlägg
#12

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å?

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#13

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
#14

har gjort en demo på http://jsbin.com/erefiw

Får inte css:en att funka, har jag gjort nåt fel?

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#15

ä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
#16

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
#17

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å?

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#18

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
#19

Har testat lite mer nu och min sida funkar bra i IE9, men inte i IE8. Där blir de nåt fel..

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#20

fungera för mig i en ren IE8

146 ms totalt · 3 externa anrop · v20260731065814-full.b746b907
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
143 ms — hämta tråd, inlägg och bilagor (db)