[Løst] Forflytte DIVs sidelengs og ut av bildet

[Alekplay]

Hei!

 

Noen av dere har sikkert sett min tidligere tråd, og ut i fra den har jeg tatt å lært meg litt jQuery. Nå har jeg derimot kommet til et punkt hvor jeg er ganske usikker på hva som er den korrekte måten å gjøre dette på:

 

Det jeg har er en section som inneholder flere DIV'er. Det jeg vil er at kun én og en DIV skal vises om gangen. Resten skal flyttes sidelengs og ut av bildet (ikke ut av skjermen, men bare ut av denne seksjonen). For å gjøre dette tror jeg det trengs jQuery, men det jeg fikk se når jeg lærte meg jQuery er at mye som er mulig der har også blitt mulig gjennom HTML5 og CSS3.

 

Så det ene jeg vil vite er hvordan jeg kan forflytte disse DIV'ene sidelengs via jQuery (kode?). Det andre er om dette kan gjøres i HTML5, alternativt hvordan og litt kode.

 

Jeg har søkt litt rundt på nettet og funnet noen som har spurt om noe av det samme som meg et annet sted, og fått et ganske fint svar. Problemet er at det er ikke akkurat hva jeg vil ha.

Ta å sjekk ut denne linken:

http://jsfiddle.net/jtbowden/ykbgT/2/

 

Det som jeg vil ha annerledes er at istedenfor å trykke på selve DIV'en så skal brukeren trykke på en knapp ovenfor for å vise den respektive DIV'en. Nå vet jeg forsåvidt hvordan jeg kan referere til en knapp for en hendelse, også utføre handlingen på et annet element. Men det jeg er i tvil om er om jeg må ha en slik kodeblokk for hver av de 5*3(15) knappene? Dessuten vil jeg at DIV'ene skal være plassert etter hverandre, slik at om jeg f.eks. er på DIV nr1, også trykker på knappen til DIV nr3 så flyter DIV nr2 forbi.

 

Jeg vil også gjerne at de to nærmeste divene på hver side skal vises litt. Det hadde vært veldig greit om noen kunne lagd en kode til meg som gjorde dette.

 

Koden jeg har i forbindelse med dette er (HTML) (utdag):

<section id="big">
  <section class="wrap" id="S1">
  <div id="content">
	 <p>DIV 1</p>
  </div>
  </section>
  <section class="wrap" id="S2">
  <div id="content">
	 <p>DIV 2</p>
  </div>
  </section>
  <section class="wrap" id="S3">
  <div id="content">
	 <p>DIV 3</p>
  </div>
  </section>
  <section class="wrap" id="S4">
  <div id="content">
	 <p>DIV 4</p>
  </div>
  </section>
  <section class="wrap" id="S5">
  <div id="content">
	 <p>DIV 5</p>
  </div>
  </section>
</section>

 

CSS (utdrag):

.wrap {
  background-color: white;
  width: 400px;
  height: 360px;
  margin: 10px;
  margin-left: 100px;
  box-shadow: 0px 0px 5px 0px #333 inset;
  border-radius: 2px;
}

#content {
overflow: auto;
width: 400px;
height: 358px;
padding-right: 10px;
}

 

Hadde vært greit om noen kunne ta en kikk

 

EDIT 1:

Dette er sånn jeg vil ha det (tidlig utkast til sidedesignet, overhodet ikke sånn det skal se ut, men nå har dere en idé):

 

( http://bildr.no/view/1354501 )

Endret 2. januar 2013 av Alekplay

[Crowly]

Men det jeg er i tvil om er om jeg må ha en slik kodeblokk for hver av de 5*3(15) knappene?

Nei, er derfor man har parameter.

 

Eks:

Html

<button type="button" onclick="vis('div1')">1</button>
<button type="button" onclick="vis('div2')">2</button>
<button type="button" onclick="vis('div3')">3</button>
<button type="button" onclick="vis('div4')">4</button>

<div id="div1" style="display: none">Hei</div>
<div id="div2" style="display: none">Hallo</div>
<div id="div3" style="display: none">God dag</div>
<div id="div4" style="display: none">Heisann</div>

 

js/jquery

function vis(elem) {
  $('div').toggle(false); // skjul alle div's, dette trenger en mer elegant løsning ....
  $('#'+elem).toggle(true); // vis spesifisert id
}

--

 

<section id="big">
  <section class="wrap" id="S1">
	  <div id="content">
			 <p>DIV 1</p>
	  </div>
  </section>
  <section class="wrap" id="S2">
	  <div id="content">
			 <p>DIV 2</p>
	  </div>
  </section>

Husk at id skal være unik på siden, så at du gjentar id="content" flere ganger er feil. Bruk class i stedet for, eller gjør id unik.

[Alekplay]

Ja, naturligvis. Skal endre det til class nå.

 

Men problemet var egentlig ikke å skule/vise de, for det klarer jeg. Problemet er å få lina dem opp vedsiden av hverandre, også animere det slik at en og en vises, og kommer inn fra siden.

 

Oppsettet slik jeg har det nå er at det er én slags container div (som er synlig) (id="big"), som inneholder disse mindre divene (class="wrap" id="S1/S2 etc"). Jeg må på en måte få plassert alle de mindre divene vedsidenav hverandre, men alle som er utenfor min container div, må være usynlige og ikke forlenge siden.

Jeg har delvis klart å oppnå dette med å innføre ennå en container div (usynlig) som inneholder alle disse mindre divene ->

<div id="big"><div id"container"><div class="wrap" id="S1/S2 etc"> </div></div></div>

Og bruke "float:left;" på hver wrap, samt sette en fast width på container som er like stor som alle de 15 små divene til sammen. Bruker jeg auto vil de bli plassert under hverandre.

 

Problemet nå er at alle de mindre divene er synlige, selv de som er presset utenfor <div id="big">, dessuten blir siden større.

Dette må jeg forhindre. Jeg har f.eks. klart med en annen div og sette en fast height, så legge inn kjempemasse tekst og sette overflow:auto; Da blir ikke innholdet presset utenfor. Slik vil jeg ha det, men klarer ikke det samme med divs.

 

Når jeg har klart dette ønsker jeg å lage en funksjon som forflytter disse divene sidelengs ved hjelp av knappetrykk. Altså når jeg trykker på knappen for div nr 5 vil jeg at alle divene skal forflytte seg forbi sidelengs, slik at det ender opp med å vise meg div nr 5. På en måte påkaller jeg da den diven jeg trykker på, og de andre beveger seg bare i forhold til den.

Det må være mulig å gjøre, spørsmålet er bare hvordan?

[Alekplay]

Fikk det til, koden er som følger:

 

$("#ball_S1").click(function() {
$('#feedswrap').animate({left:"-510px"}, 500);
});