Permalänk

[HTML/CSS med jQuery]

Halllå.. igen

Fråga gärna om ni inte förstå. Suger på att beskriva problem

Har ett problem med min div som ska expandera när jag trycker på en text

Såhär ser det ut från början :

Och när man klickar på texten :

http://piclair.com/22li5

Det jag vill är att diven som texten "Visa mer/m" står i ska expandera sig i höjd efter den vita diven (den det står massa random text i).

Lägger upp det mest relevanta koden här nedan :

HTML

<html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#info").hide(); $("#show_more").show(); $('#show_more').click(function(){ $("#info").slideToggle(); }); }); </script> </head> <body> <div id="container"> <div id="header"></div> <div id="menu"></div> <div id="content"> <div id="inner_content"> <div class="recension_video"> <iframe width="560" height="315" src="http://www.youtube.com/embed/kXYiU_JCYtU" frameborder="0" allowfullscreen></iframe> <p id="show_more">Visa mer/m</p> <div id="info">gfdgfgfd <br /> gfdgfgfd <br /> gfdgfgfd <br /> gfdgfgfd <br /></div> </div> </div> <!--ijo-- <hr> <div id="inner_content"> <div class="recension_video"> <iframe width="560" height="315" src="http://www.youtube.com/embed/Og8ZYvJ3VFY" frameborder="0" allowfullscreen></iframe> <div class="info"><h2>Zache Super elite chassi</h2></div> </div> </div> <hr> ----> </div> </div> </body> </html>

Dold text

CSS

#container { width:800px; height:2000px; margin:auto; } #content { width:580px; height:1500px; background-image:url('bodyBG-dark.jpg'); padding-left:10px; padding-top:10px; padding-right:10px; float:right; border-radius:4px; } #inner_content { width:570px; padding-bottom:100px; padding-top:10px; padding-left:10px; background-image:url('bodyBG-dark2.png'); border-radius:4px; } #info { width:550px; height:80px; background-image:url('bodyBG-dark3.png'); margin-top:7px; border-radius:4px; padding-left:10px; }

Dold text

#info är den vita diven med random text i.
#inner_content är den diven som innhåller youtube klippet.

Visa signatur
Permalänk
Medlem

Prova lägga overflow:hidden; på #inner_content

Permalänk
Medlem

Testa köra en clearfix:

in med det hä i CSS-filen:

.cleaner {
clear: both;
font-size: 1px;
}

och det här längst ner i parent-diven (dvs den "Visa mer/m"-diven)

<div class='cleaner'> </div>

Hoppas det hjälper

Visa signatur

Neon
Citera mig om du vill ha svar!

Permalänk
Skrivet av azoapes:

Prova lägga overflow:hidden; på #inner_content

Skrivet av Neonxz:

Testa köra en clearfix:

in med det hä i CSS-filen:

.cleaner {
clear: both;
font-size: 1px;
}

och det här längst ner i parent-diven (dvs den "Visa mer/m"-diven)

<div class='cleaner'> </div>

Hoppas det hjälper

Tyvärr, inget hjälpte. Har även testat clear:both på i princip alla divar men det fungerar ändå inte.

Visa signatur
Permalänk
99:e percentilen

Testa alla olika typer av positionering på parent-diven, t ex absolute och relative. Såna grejer kan ligga bakom helt random problem utan att man förstår varför.

Jag skulle spontant sätta absolute, men, som sagt, testa alla möjliga värden.

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem
Skrivet av Neonxz:

Testa köra en clearfix:

Clearfix-divar är helt meningslöst i moderna webbläsare. Använd overflow: auto eller overflow: hidden istället.

Permalänk
Skrivet av Zuggmate:

Testa alla olika typer av positionering på parent-diven, t ex absolute och relative. Såna grejer kan ligga bakom helt random problem utan att man förstår varför.

Jag skulle spontant sätta absolute, men, som sagt, testa alla möjliga värden.

Har testat detta nu. Blir ingen bättring.. Skumt. Men tack för all hjälp

Visa signatur
Permalänk
Medlem

Vilken browser är det du har problemet med? För jag har tagit en exakt kopia av din kod (bara ändrat bakgrunderna i css) och det funkar för mig i Chrome och IE9.

Visa signatur

Neon
Citera mig om du vill ha svar!

Permalänk
Skrivet av Neonxz:

Vilken browser är det du har problemet med? För jag har tagit en exakt kopia av din kod (bara ändrat bakgrunderna i css) och det funkar för mig i Chrome och IE9.

Hm konstigt. Jag kör chrome.

Skickades från m.sweclockers.com

Visa signatur
Permalänk
Medlem
Skrivet av Kebabhyvlarn:

Hm konstigt. Jag kör chrome.

Skickades från m.sweclockers.com

Så här ser det ut för mig:

Bilderna dyker upp om ett tag

Visa signatur

Neon
Citera mig om du vill ha svar!

Permalänk
Medlem

Jag får också samma resultat som neon, prova att strunta i resten av sidan, och bara köra det här i en html-fil (antar att du har mer på sidan), det skulle kunna vara så att det är något annat som trycker din div på det där sättet.

EDIT: kan väl i och för sig börja med att fråga: har du något övrigt content på sidan? Om du har en annan div som ska ligga bredvid så kanske den trycker ner info-diven... Det konstiga är dock att inner-content alltid ska expanderas i och med att innehållet expanderar, så vida man inte har någon konstig kombination med floats och sånt, kanske :S

Visa signatur

Citera för svar!|Fraktfritt hos INET|Min hemsida
Fractal Design Define R3|Corsair AX 850W|Gigabyte Nvidia GeForce GTX 570|Corsair Vengeance 1600MHz 2x4GB|ASRock P67 Extreme4|Intel Core i5 2500K|2x Samsung Spinpoint F3 1TB|Samsung Blu-Ray läsare
Nikon D7000|Nikon 60mm macro|Nikon 18-70|Nikon 55-300|Nikon 10.5 Fisheye

Permalänk
Medlem

Fröst och främst, det skall ej förekomma taggar med samma id. ID är unikt, använd istället klasser.

Ontopic: Sätt #inner_content till
position: relative
height: auto

Direkt efter du stänger #content-diven kör en clear: both.
<div id="content">blabla</div>
<div style="clear: both;"></div>

Floatar kan ge konstiga positionsproblem om de inte clearas rätt.

Skickades från m.sweclockers.com

Edit: Har testat både HTML och CSS nu och jag ser inte det problemet du har heller (kör Chrome).
Dock förstår jag inte varför du specifierat höjderna på det sättet du gjort.

Visa signatur

- Åldern har tagit ut sig i form av bekvämlighet -
------- Playstation 4/5 - Nintendo Switch -------

Permalänk

Aha. Jo jag har ju lite annat på sidan också. Kan ju vara det som gör att det inte fungerar. Ska testa utan det nu.

Varför jag har flera id ä bara för att jag har lagt en stor del av koden inom kommentarer och inte orkat ändra.till class
Tack för alla svar, ska se om jag kan fixa det nu

Skickades från m.sweclockers.com

Visa signatur
Permalänk
99:e percentilen
Skrivet av Kebabhyvlarn:

Varför jag har flera id ä bara för att jag har lagt en stor del av koden inom kommentarer och inte orkat ändra.till class
Tack för alla svar, ska se om jag kan fixa det nu

Det är helt rätt att man inte får ha flera element med samma id, men man bör också tänka på att man faktiskt bör använda id till element som det bara finns ett av, t ex, på SweClockers hemsida, diven som SweClockers-loggan ligger i. Den (precis som flera andra element i sidhuvudet) har felaktigt class="logo", när det bör vara id="logo". Detta ska man tänka på, bland annat för att underlätta skrivandet av JavaScript (där document.getElementById('logo') är enklare än document.getElementsByClassName('logo')[0]). (Jag vet att det inte spelar någon roll om man använder jQuery, men det ska gå att skriva JS utan jQuery.)

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Skrivet av Zuggmate:

Det är helt rätt att man inte får ha flera element med samma id, men man bör också tänka på att man faktiskt bör använda id till element som det bara finns ett av, t ex, på SweClockers hemsida, diven som SweClockers-loggan ligger i. Den (precis som flera andra element i sidhuvudet) har felaktigt class="logo", när det bör vara id="logo". Detta ska man tänka på, bland annat för att underlätta skrivandet av JavaScript (där document.getElementById('logo') är enklare än document.getElementsByClassName('logo')[0]). (Jag vet att det inte spelar någon roll om man använder jQuery, men det ska gå att skriva JS utan jQuery.)

JAha, ja där lärde man sig något nytt

Hursomhelt, har fixat det nu ! Var en jävla div som youtubeklippet låg i, som inte var lika hög och bred som själva in bäddningen av youtubeklippet Fan, att det kunde ställa till det så mycket.

Tack för alla svar än en gång

Visa signatur
Permalänk

Ny fråga

Ännu en fråga, så jag fortsätter i denna tråd då det handlar om samma sak.
Jo, det är så att jag har flera divar som använder samma jQuery script. När jag trycker på knappen för att expandera en av divarna, så expanderas alla.
Det jag behöver veta är hur man säger åt just den diven att expandera sig, och inte alla andra också.

Jag har samma kod som på första inlägget

Tacksam för svar!

Visa signatur
Permalänk

$('.show_more').click(function(){ $(this).next().slideToggle(); });

Permalänk
Skrivet av Yxskaftet:

$('.show_more').click(function(){ $(this).next().slideToggle(); });

Tack för svar!
Hm, nu kan inte jag alls mycket jQuery, men såhär ser iaf koden ut just nu:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $(".info").hide(); $(".show_hide").show(); $('.show_hide').click(function(){ $(this).next().slideToggle(); }); });

Nu händer ingenting när jag trycker på min länk som ska expandera diven.
Har bara bytt några namn.

Visa signatur
Permalänk

Ser det ännu ut såhär?:
<p class="show_more">Visa mer/m</p>
<div class="info">gfdgfgfd <br />

Permalänk
Skrivet av Yxskaftet:

Ser det ännu ut såhär?:
<p class="show_more">Visa mer/m</p>
<div class="info">gfdgfgfd <br />

Istället för "show_more" så heter den nu "show_hide". Och det är en class.

Och detta

<div class="info">gfdgfgfd</div>

är rätt, förutom att det står lite php-kod istället för "gfdgfgfd "

Visa signatur
Permalänk

Fungerar på jsfiddle iaf: http://jsfiddle.net/x2SgN/

Permalänk
Skrivet av Yxskaftet:

Fungerar på jsfiddle iaf: http://jsfiddle.net/x2SgN/

Konstigt, jag får det fortfarande inte att fungera. Jag har skrivit i princips exakt likadant

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min...." type="text/javascript"></script> <script type="text/javascript"> $('.show_hide').click(function(){ $(this).next().slideToggle(); }); </script>

.info { width:550px; height:150px; background-image:url('bodyBG-dark3.png'); margin-top:7px; border-radius:4px; padding-left:10px; display:none; } .inner_content { width:570px; padding-top:10px; padding-left:10px; padding-bottom:10px; background-image:url('bodyBG-dark2.png'); border-radius:4px; }

PHP

echo '<div class="inner_content">'; echo '<iframe width="560" height="315" src="'.$row['video'].'" frameborder="0" allowfullscreen></iframe>'; echo '<h1>'.$row['overskrift'].'</h1>'; echo '<ul id="date"><span class="green">'.$row['datum'].'</span></ul>'; echo '<br />'; echo '<div class="info">'; echo nl2br($row['beskrivning']); echo "<br />"; echo '</div>'; echo '<a href="#" class="show_hide">Visa mer/mindre</a>'; echo '</div>'; echo "<hr>";

Det ända som inte fungerar är att klicka så att diven expanderar sig..

Visa signatur
Permalänk

Du har bytt plats på elementen, detta borde fungera:

$('.show_more').click(function(){ $(this).parent('div').find('.info').slideToggle(); });​

Den där php koden var inte vacker.
Varför skriver du ut alla html-taggar med php? :S

Tex:

echo '<ul id="date"><span class="green">'.$row['datum'].'</span></ul>';

Borde vara:

<ul id="date"><span class="green"><?php echo $row['datum']; ?></span></ul>

För övrigt borde den heller inte vara en ul och borde ha class='date' istället för id='date'

Permalänk
Skrivet av Yxskaftet:

Du har bytt plats på elementen, detta borde fungera:

$('.show_more').click(function(){ $(this).parent('div').find('.info').slideToggle(); });​

Den där php koden var inte vacker.
Varför skriver du ut alla html-taggar med php? :S

Tex:

echo '<ul id="date"><span class="green">'.$row['datum'].'</span></ul>';

Borde vara:

<ul id="date"><span class="green"><?php echo $row['datum']; ?></span></ul>

För övrigt borde den heller inte vara en ul och borde ha class='date' istället för id='date'

Det fungerar inte heller :S. Helknäppt.

Och jag vet att PHP-koden inte ser så fin ut. Det är bara temporärt, då jag håller på att testa en funktion på hemsidan.

Tack för alla svar!

EDIT: Nu fungerar det Skrev bara om det, exakt likadant igen. Konstigt att det fungerar nu.

Visa signatur