CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

kurdo Novice

23. august 2013 - 09:46 Der er 16 kommentarer

sortering af .div tags CSS/Javascript

Hej eksperter.

jeg er havnet i et kæmpe dilemma, som jeg ikke kan løse selv. jeg håber i kan hjælpe.

jeg bruger joomla til at sortere mine artikler på forsiden, og det ser sådan ud:

https://dl.dropboxusercontent.com/u/10218159/Sk%C3%A6rmbillede%202013-08-23%20kl.%2009.34.26.png

jeg vil gerne have at boks 25(markeret med rødt) skal rykke op til den tomme hul der er.
opstillingen i html ser sådan ud:

https://dl.dropboxusercontent.com/u/10218159/Sk%C3%A6rmbillede%202013-08-23%20kl.%2009.39.45.png

og mit CSS til .span6 ser sådan ud:

.span6

{
display: inline-block;
float: left;
background: #fff;
margin: 0px 17px 30px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-khtml-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;

}

de tomme felter kommer når jeg poster noget der er højere/breddere end det sædvanlige. ligesom det stor billede. hvis i kan bruge det, kan jeg godt poste php filen, men jeg tror ikke der er noget specielt i det?

mit problem kan nok løses med CSS/Javascript?

Kort fortalt: jeg vil gerne have det ligesom http://masonry.desandro.com/ hvor <div> felterne rykker op under hinanden automatisk uafhængig af højde osv. (masonry virker ikke for mig)

Alternativ: det behøves ikke være <div tags> jeg er åben for alle forslag. :)

Synes godt om

herlevsen123 Nybegynder

23. august 2013 - 14:18 #1

Du kommer ikke uden om at skulle bruge javascript.

Det du kan se masonry gør, er at den bruger absolute position til at placere elementerne, på vinduets resize event.

Nu ved jeg at joomlas UI er bygget på bootstrap (hvilket også er tydeligt i din kode). Jeg jgorde så en søgning på bootstrap and masonry og fandt denne side: http://www.maurizioconventi.com/2012/06/19/responsive-example-integrating-twitter-bootstrap-and-jquery-masonry/

Så jeg er sikker på du kan få masonry til at virke med bootstrap.

Eftersom du allerede gerne skulle have jQuery, så prøv noget ala det her:

<script type="text/javascript">

$(function() {
var $container = $('.blog-featured_frontpage');
// initialize
$container.masonry({
columnWidth: 1,
itemSelector: '.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12'
});
})

</script>

(Det skal indsættes under div'en blog-featured_frontpage som minimum, gerne helt i bunden af siden)

Synes godt om

herlevsen123 Nybegynder

23. august 2013 - 14:19 #2

Og husk forresten at du også skal loade masonry(efter jQuery er loaded).

Synes godt om

kurdo Novice

23. august 2013 - 16:04 #3

Hej herlevsen

tak for svaret.. jeg prøvede uden held. ejeren mener at man skal bruge:

http://masonry.desandro.com/appendix.html#imagesloaded

imagesloaded, hvor skal jeg i din kode sætte det ind?

ps. hvis du vil/har tid og vil hjælpe på teamviewer eller andet, så er jeg villig til at betale dig for det.. har installeret det på localhost. :)

Synes godt om

herlevsen123 Nybegynder

23. august 2013 - 16:34 #4

Du kan godt prøve at wrappe det i imagesLoaded eventen. Så ser det sådan her ud:

$(function() {
var $container = $('.blog-featured_frontpage');

$container.imagesLoaded( function() {
$container.masonry({
columnWidth: 1,
itemSelector: '.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12'
});
});
});

Har du husket at loade masonry?
Har du loadet det efter jQuery?
Har du indsat den bid javascript jeg har givet dig, under din .blog-featured_frontpage container?

Min viden om masonry er lig nul, kendte det ikke før du linkede til det, så det vil jeg helst ikke rodes ud i. Mit svar er baseret på hvad jeg lige hurtigt har læst på deres side og når man ikke har det hele lige foran sig kan det være svært (:

Men når du har prøvet at indsætte det kan du prøve at gå ind i din browsers console og se hvad den skriver (: (Tryk F12 og vælg console)

Synes godt om

kurdo Novice

23. august 2013 - 19:42 #5

Masonry er loadet efter Jquery.
Jquery er loadet
den bid javascript er loadet efter frontpage diven.

konsollen viser det her:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/templates/basicjoomla3.0template/js/main.js
Uncaught TypeError: Cannot read property 'x' of undefined rokajaxsearch.js:12
Uncaught TypeError: Object [object Object] has no method 'tooltip' localhost/joomla30/:165
Uncaught TypeError: Object [object Object] has no method 'imagesLoaded' localhost/joomla30/:722

Før jeg skrev .imagesloaded ind i scriptet, så virkede Masonry scriptet, men det så helt forkert ud og divs'erne overlappede hinanden.

hvad hedder det jeg leder efter? hvad tror du jeg skal søg efter? tror du der er andre alternativer i javascript end præcis masonry? jeg har også prøvet wookmark, men det virker heller ikke..

kan det være fordi .blog-featured_frontpage bliver loaded via php et andet sted fra, mens min index.php fil er et andet sted?

Synes godt om

kurdo Novice

23. august 2013 - 19:43 #6

"(anonymous function) localhost/joomla30/:722
c jquery.js:3048
p.fireWith jquery.js:3160
x.extend.ready jquery.js:433
q" står også inde i consollen.

Synes godt om

herlevsen123 Nybegynder

23. august 2013 - 20:06 #7

Har du loadet jquery 2 gange? Joomla loader selv jquery skal du tænke på. Det kunne fejlene tyde på, men det kan være så meget. Er din console fri for fejl før du prøver at indsætte masonry? Det er du nød tril at sikre dig før du prøver at få det til at virke.

Kan være jeg kan få tid til at kigge på det enten søndag eller mandag.

Synes godt om

kurdo Novice

23. august 2013 - 20:20 #8

Det er simpelthen mærkeligt.

Joomla loader jo Jquery selv, men jeg har også loadet den en gang lige nedenunder ellers vil mine andre script ikke virke.(har en med random text color, som kører på Jquery).

og ligeså snart jeg skriver det ind, får jeg fejlen ved .imagesloaded. det er som om de Jquery scripter jeg bruger ikke tager hensyn til det Jquery som joomla allerede henter, ved hjælp af en php kode.

du må meget gerne kigge på det, evt kan vi bruge Teamviewer hvis jeg ikke finder en løsning til søndag/mandag.. :)

Synes godt om

herlevsen123 Nybegynder

23. august 2013 - 23:51 #9

Uanset hvad må du ikke loade det mere end en gang. Og du er nød til at få fjernet alle fejl, før du kan regne med om det andet virker. Din console er din ven og så snart du ser en fejl, så få den rettet, ellers kan det betyde at det næste script fejler og så er der lige pludseligt intet der duer ;)

Synes godt om

herlevsen123 Nybegynder

26. august 2013 - 22:47 #10

Fandt du ud af det?

Synes godt om

kurdo Novice

27. august 2013 - 12:00 #11

Hej.

Nej desværre.. jeg er gået i stå og jeg ved ikke hvad jeg skal gør. har søgt hele nettet for det problem, men føler ikke jeg kan finde svaret..

Synes godt om

herlevsen123 Nybegynder

27. august 2013 - 14:10 #12

Hvis du prøver at pakke det ind i en zip eller rar fil og uploader det et sted, så kan jeg kigge på det senere i dag. Det skal være inklusiv en backup af databasen.

Synes godt om

kurdo Novice

27. august 2013 - 17:21 #13

Jeg har sendt en privat besked til dig, med link til at hente det.

På forhånd mange tak. :)

Synes godt om

kurdo Novice

31. august 2013 - 12:21 #14

hej igen

fandt du nogensinde ud af noget? :)

Synes godt om

herlevsen123 Nybegynder

09. september 2013 - 15:56 #15

Din side var så fyldt med javascript fejl at jeg droppede det. Vil gerne kigge på det igen hvis du får rettet alle de errors der er i console. (:

Synes godt om

MadsHaupt Juniormester

30. september 2013 - 17:39 #16

Prøv at ændre dit css til ".span6

{
display: inline-block;
float: left;
background: #fff;
margin: 0px 0px 30px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-khtml-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;

}" eller til ".span6

{
display: inline-block;
float: left;
background: #fff;
margin: 0px 17px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-khtml-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;

}"

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS