Skjul tabel men vis ved klik på link...

Tilmeldt 21. Nov 11

Indlæg ialt: 134

Indy Skrevet 17-02-2013 kl. 14:45

Hvor mange stjerner giver du? :

På min webshop som jeg selv programmere vil der har jeg to tabeller hvor man kan vælge størrelser som man ønsker en vare i.

Der er bare så mange størrelser at siden hurtigt bliver uoverskuelig.

Derfor så vil jeg lave et link der hedder "Se flere størrelser" og når der klikkes på det vises tabel 2

Siden er sådan opbygget.

Link: Vis flere størrelser

Når siden vises skal <tabel 2> IKKE vises.

Først når der klikker på linket "Vis flere størrelser" vises tabel <tabel 2>

Jeg har kæmpet med en masse eksempler med java, css osv. men jeg har ikke kunne få en løsning som er i orden.

Det nærmeste jeg er kommet er der virker det fint med vis/skjul funktionen. Men når den er skjult så optager den stadig plads på siden så der bare er blankt der hvor tabellen vises så bunden af min side kommer langt nede så man skal scrolle for at komme til knappen i bunden.

Er der ikke nogen kloge hoveder der kender en sikker løsning at lave sådan en funktion der kan forenkle min webshop?

/Magnus

Fra Odense

Tilmeldt 4. Jun 06

Indlæg ialt: 953

Elias Sørensen Fra Veronté Skrevet 17-02-2013 kl. 15:03

Hvor mange stjerner giver du? :

Gennemsnit 5,0 stjerner givet af 1 person

Kan let klares med jQuery:

<a href="#" onclick="$('.class_på_tabel').toggle();return false;">Vis/skjul tabel</a>

Mvh., Elias Sørensen

Ved siden af mit arbejde som udvikler, sælger jeg også sokker på nettet :o)

Tilmeldt 21. Nov 11

Indlæg ialt: 134

Indy Skrevet 17-02-2013 kl. 16:16

Hvor mange stjerner giver du? :

Hvad gør jeg galt eller kan man ikke undgå at siden genindlæses og man derved igen er ved toppen men derimod mere som en tænd/sluk knap der tænder for tabellen.

Jeg laver det i ASP og ser sådan ud:

response.write "<a href=""#"" onclick=""$('.blok1').toggle();return false;"">Vis/skjul tabel</a>

response.write "<table width=""100%"" border=""0"" cellspacing=""0"" cellpadding=""5"" class=""blok1"">" & Chr(10)

......

response.write "</table>"

/Magnus

Fra Odense

Tilmeldt 4. Jun 06

Indlæg ialt: 953

Elias Sørensen Fra Veronté Skrevet 17-02-2013 kl. 16:27

Hvor mange stjerner giver du? :

Lad være med at udskrive HTML med response.write. Afslut din ASP-kode og udskriv det normalt.

.... asp kode
%>
<a href="#" onclick="$('.blok1').toggle();return false;">Vis/skjul tabel</a>
<table width="100%" border="0" cellspacing="0" cellpadding="5" class="blok1">
<%
.........
%>
</table>
<%
.......

Grunden til den genindlæser siden..... Kodemæssigt er der ikke noget problem, men kalder du jQuery i din kode? Ellers vil der jo opstå en javascript-fejl, og derved bliver return false; ikke læst, hvorfor den i stedet følger linket. Husk at indlæs jQuery i <head> af din side:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Mvh., Elias Sørensen

Ved siden af mit arbejde som udvikler, sælger jeg også sokker på nettet :o)

Tilmeldt 21. Nov 11

Indlæg ialt: 134

Indy Skrevet 17-02-2013 kl. 21:28

Hvor mange stjerner giver du? :

SUPER så lykkedes det.

Det var JQuery jeg ikke fik indlæst i min <head>

Nu virker det både i ASP og når jeg går ud af det.

response.write "<a href=""#"" onclick=""$('.blok1').toggle();return false;"">Vis/skjul tabel</a>" & Chr(10)

%>

<a href="#" onclick="$('.blok1').toggle();return false;">Vis/skjul tabel</a>

<%

Hvorfor var det jeg skulle gå ud af ASP med %> <% og ikke bare kunne udskrive det med response.write?

I min lille test på min computer der virker det men det skulle jo gerne også virke i alle andre browseres m.m.

Tak for hjælpen.... men lige til sidst kan du sige mig hvad der skal rettes for det som udgangspunkt er skjult og først så man skal klikke på vis for at se det?

/Magnus

Fra Odense

Tilmeldt 4. Jun 06

Indlæg ialt: 953

Elias Sørensen Fra Veronté Skrevet 17-02-2013 kl. 21:44

Hvor mange stjerner giver du? :

1) Der sker bare oftere (taste)fejl når man udskriver HTML i koden :o)

2) Du skal give din tabel display:none; i CSS, så bliver den skjult.

3) jQuery virker i alle browsere :o)

Mvh., Elias Sørensen

Ved siden af mit arbejde som udvikler, sælger jeg også sokker på nettet :o)