jQuery Table Slider?

Gestart doorTuffs5 jan 20124 reacties60 weergaven

5 berichten · pagina 1 van 1

Lid · Topicstarter

Berichten: 251
Reputatie: 0
Punten: 0,00

Lid sinds: 2011
Laatst gezien: 12 jun 2025

5 jan 2012, 11:03

Hey,

Ik ben niet zo goed met jQuery, maar voor een klant moet ik het volgende doen:

Een grafiek(dus een tabel wordt dat als je jQuery gebruikt), in 4 verschillende stijlen.
Ik heb dus:
-Staafdiagram
-Cirkeldiagram
-Lijndiagram
-Lijndiagram(ingekleurd)(in engels heet het Area chart)

Dit werkt allemaal zeer goed, de data wordt correct weergegeven.

Maar nu wil de klant dat er altijd maar 1 tabel(grafiek) zichtbaar is, en hij met een pijltje tussen de 4 verschillende stijlen kan scrollen.

Na enig opzoekwerk moet dit met een jQuery slider(anders moet je telkens de pagina herladen).

Ik heb een paar sliders opgezocht maar ze werken niet, de grafiek wordt slechts voor een deel getoond & als ik met de css knoei lukt het ook niet.

Weet iemand hulp?

Tuffs

Milan

Lid

Berichten: 8.602
Reputatie: 0
Punten: 0,00

Lid sinds: 2008
Laatst gezien: 12 jun 2025

5 jan 2012, 11:40

Je kunt de grafieken elk in een aparte div zetten, en dan de klant kiezen welke hij wil zien, en dan die inladen, met jQuery, bijv:

if (loadChart == staafdiagram)
{

    $(#staafdiagram).fadeIn(2000);

}

Tuffs

Lid · Topicstarter

Berichten: 251
Reputatie: 0
Punten: 0,00

Lid sinds: 2011
Laatst gezien: 12 jun 2025

5 jan 2012, 12:19

Ja weet ik, dat lukt, maar ik vind nergens een slider die een div van die grootte kan verschuiven, zelfs niet als ik met de css knoei

Calvin

Lid

Berichten: 907
Reputatie: 0
Punten: 0,00

Lid sinds: 2009
Laatst gezien: 11 jan 2021

5 jan 2012, 15:13

Je hoeft geen slider van internet te halen om dat te doen.
Het enige wat je moet doen is elke diagram in een div stoppen
En aanroepen via jQuery om ze laten infaden.

Heeel snel en simpel gedaan, hij is nog niet af, maar om een voorbeeld te geven: (css moet je maar ff zelf doen)

<script type="javascript/text">
$("div.graphs").hide();

$("a#graph1").click(function(){
$("div#grafiek1").fadeIn(1000);
});
</script>


<body>
<a href="#" id="graph1">Staafdiagraam</a>
<a href="#" id="graph2">Cirkeldiagraam</a>
<a href="#" id="graph3">Lijndiagraam</a>
<a href="#" id="graph4">Lijndiagraam</a>

<div class="graphs" id="grafiek1"><img src="img/grafiek1.jpg" name="grafiek 1" /></div>
<div class="graphs" id="grafiek2"><img src="img/grafiek2.jpg" name="grafiek 2" /></div>
<div class="graphs" id="grafiek3"><img src="img/grafiek3.jpg" name="grafiek 3" /></div>
<div class="graphs" id="grafiek4"><img src="img/grafiek4.jpg" name="grafiek 4" /></div>

</body>

Fass

Lid

Berichten: 3.771
Reputatie: 0
Punten: 0,00

Lid sinds: 2009
Laatst gezien: 3 mrt 2023

5 jan 2012, 15:43

Easyslider al geprobeerd?

Jouw reactie

Deel je idee, stel een vraag of help een ander verder.