Help
Hey there,
I'm finishing off a website for a client at the moment and I've got one final (major) issue that I'm coming across.
http://www.coralmedi...ogress/Website/
If you look in the portfolio section there are currently three videos. When you click on the 'more info' text the div expands to show more info. When it expands you'll notice that the video below it has to move. The problem I'm facing is that it moves the video appropriately for displaying more info on the first video, but if I expand the second video there is a large gap. (just play around with it and you'll know what I mean).
any ideas what I can do to stop the video from moving down (and creating the gap)?
(I hope this makes sense)
Thanks,
Joel.
Page 1 of 1
Divs sliding out of place.
#2
Wickham 
- Web Guru
-
- Group: Moderators
- Posts: 2,876
- Joined: 11-June 09
- Reputation: 257
- Gender:Male
- Location:Salisbury UK
- Experience:Intermediate
- Area of Expertise:Web Developer
Posted 28 January 2012 - 02:48 PM
The .content div on the right under SEALS with the expand/collapse jQuery is in fact doing exactly the same as the .content div on the left by pushing down all content below.
The left one needs to push down the content with the third video below, but I decided that the only way to stop the right one doing it unnecessarily was to take it out of the flow of the code with position: absolute. So the css file is unchanged but you have to add it into the HTML markup just for that right .content div and also add clear: both just for the third .portfoliocontainer div above Citiyouth:-
It works in my test in Firefox and IE9. The position: absolute is enough to stop the right side expanding div from pushing everything down, but the clear: both for the third div is to stop the third video moving to the right when you use the first "More Info" expanding div under the first video because the third video jumps to the right unless it has clear: both.
The left one needs to push down the content with the third video below, but I decided that the only way to stop the right one doing it unnecessarily was to take it out of the flow of the code with position: absolute. So the css file is unchanged but you have to add it into the HTML markup just for that right .content div and also add clear: both just for the third .portfoliocontainer div above Citiyouth:-
<div class="portfolioinfo">
<div
style="float:left">SEALS - Long Slow Summer</div>
<div class="reveal"><a
href="JavaScript:void()"> More Info ▼ </a></div>
</div>
<div class="content" style="position: absolute;">
This
project was made as a part of the MVMU (Music Video
Mash Up) Competition. ...........
............
Matthew Nainby<br />
</div>
</div>
<div class="portfoliocontainer" style="clear: both;">
<div
class="portfoliovideo">
<iframe ..............
It works in my test in Firefox and IE9. The position: absolute is enough to stop the right side expanding div from pushing everything down, but the clear: both for the third div is to stop the third video moving to the right when you use the first "More Info" expanding div under the first video because the third video jumps to the right unless it has clear: both.
This post has been edited by Wickham: 28 January 2012 - 03:28 PM
#3
joel1st
- Dedicated Member
-
- Group: Members
- Posts: 218
- Joined: 29-June 08
- Reputation: 2
- Experience:Intermediate
- Area of Expertise:Web Designer
Posted 29 January 2012 - 04:48 AM
Wickham, on 28 January 2012 - 02:48 PM, said:
The .content div on the right under SEALS with the expand/collapse jQuery is in fact doing exactly the same as the .content div on the left by pushing down all content below.
The left one needs to push down the content with the third video below, but I decided that the only way to stop the right one doing it unnecessarily was to take it out of the flow of the code with position: absolute. So the css file is unchanged but you have to add it into the HTML markup just for that right .content div and also add clear: both just for the third .portfoliocontainer div above Citiyouth:-
It works in my test in Firefox and IE9. The position: absolute is enough to stop the right side expanding div from pushing everything down, but the clear: both for the third div is to stop the third video moving to the right when you use the first "More Info" expanding div under the first video because the third video jumps to the right unless it has clear: both.
The left one needs to push down the content with the third video below, but I decided that the only way to stop the right one doing it unnecessarily was to take it out of the flow of the code with position: absolute. So the css file is unchanged but you have to add it into the HTML markup just for that right .content div and also add clear: both just for the third .portfoliocontainer div above Citiyouth:-
<div class="portfolioinfo">
<div
style="float:left">SEALS - Long Slow Summer</div>
<div class="reveal"><a
href="JavaScript:void()"> More Info ▼ </a></div>
</div>
<div class="content" style="position: absolute;">
This
project was made as a part of the MVMU (Music Video
Mash Up) Competition. ...........
............
Matthew Nainby<br />
</div>
</div>
<div class="portfoliocontainer" style="clear: both;">
<div
class="portfoliovideo">
<iframe ..............
It works in my test in Firefox and IE9. The position: absolute is enough to stop the right side expanding div from pushing everything down, but the clear: both for the third div is to stop the third video moving to the right when you use the first "More Info" expanding div under the first video because the third video jumps to the right unless it has clear: both.
Thanks Wickham, it works a charm. Another question if I may, If I were to say add a fourth video next the bottom video, would that be difficult to do considering the position is now absolute? Either way thanks
#4
Wickham
- Web Guru
-
- Group: Moderators
- Posts: 2,876
- Joined: 11-June 09
- Reputation: 257
- Gender:Male
- Location:Salisbury UK
- Experience:Intermediate
- Area of Expertise:Web Developer
Posted 29 January 2012 - 07:21 AM
If you add another video, ie two above two; I can't stop one sliding down when the other makes space for the expanding div, but I can make both upper expanding divs slide over the top of the lower video panels by adding z-index: 5; in addition to position: absolute; for the .content divs for the top two videos:-
..............<div id="portfolio">
<div id="portfoliominimum">
<!--start of first video-->
<div class="portfoliocontainer">
<div
class="portfoliovideo">
<iframe
src="http://player.vimeo.com/video/35620103?
title=0&byline=0&portrait=0&color=b80009"
width="465" height="266" frameborder="0"
webkitAllowFullScreen allowFullScreen></iframe>
</div>
<div class="portfolioinfo">
<div
style="float:left">Enter Existence - What Can I Do
</div>
<div class="reveal"><a
href="JavaScript:void()"> More Info ▼ </a></div>
</div>
<div class="content"
style="position: absolute; z-index: 5;">
Enter
Existence approached us in early December 2011. After
being a four piece band for close to three years they
decided it was time to bring a story to their song
'What Can I Do'. Our team worked closely with the band
to create something unique and moving that everyone was
happy with. We filmed the clip in a total of 48 hours
and edited the clip in another 72 hours. Filmed on a
budget of $100 - this is the finished product.
<p> </p>
Director - Joshua Hodgman <br />
Assistant Director - Matthew Nainby <br />
Producer - Tess McGoldrick <br />
Cinematographers - Matt Nainby<br />
Lighting - Jean-Paul Malengret & Jarryd Shuker <br />
Editor - Matthew Nainby <br />
Colorist - Matthew Nainby<br />
Makeup Artists - Yasmin Williams & Alycia Webb <br />
</div>
</div>
<!--end of first video-->
<div class="portfoliocontainer">
<div
class="portfoliovideo">
<iframe
src="http://player.vimeo.com/video/25294955?
title=0&byline=0&portrait=0&color=b80009"
width="465" height="266" frameborder="0"
webkitAllowFullScreen allowFullScreen></iframe>
</div>
<div class="portfolioinfo">
<div
style="float:left">SEALS - Long Slow Summer</div>
<div class="reveal"><a
href="JavaScript:void()"> More Info ▼ </a></div>
</div>
<div class="content"
style="position: absolute; z-index:5;">
This
project was made as a part of the MVMU (Music Video
Mash Up) Competition. Our team was given 72 hours to
meet our band, brainstorm an idea, shoot, edit our
final music video, and submit it. It was awarded 'Best
overall Music Video', placing 1st in the competition.
Our editor was also awarded 'Best Editing' in the
competition.
<p> </p>
Director - Joshua Hodgman <br />
Assistant Director - Matthew Nainby <br />
Producer - Tess McGoldrick <br />
Cinematographers - Matt Nainby & Ariel Vargas <br />
Lighting - Sebastian Mcallister & Sam Wright <br />
Editor - Matthew Nainby <br />
Colorist - Matthew Nainby<br />
</div>
</div>
<!--end of second video-->
<div class="portfoliocontainer">
<div
class="portfoliovideo">
<iframe
src="http://player.vimeo.com/video/19769564?
title=0&byline=0&portrait=0&color=b80009"
width="465" height="266" frameborder="0"
webkitAllowFullScreen allowFullScreen></iframe>
</div>
<div class="portfolioinfo">
<div
style="float:left">Citiyouth Brisbane Promotional
</div>
<div class="reveal"><a
href="JavaScript:void()"> More Info ▼ </a></div>
</div>
<div class="content">
This
short promotional video was made for 'Citiyouth
Brisbane' for their event called 'Amplified' - a
quarterly event in which youth come together for a
crazy night of dancing, comedy, and to hear about Jesus
Christ. Our team recorded the song, shot, and edit the
video in 48 hours. We teamed up with Citiyouth's comedy
team called 'QuietTime' and produced this comical and
fun video.
<p> </p>
Amplified Rap Produced, Recorded, Mixed by Matthew
Nainby and written by Christopher Hodgman.
<p> </p>
Director - Joshua Hodgman <br />
Assistant Director - Matthew Nainby <br />
Producer - Matthew Nainby <br />
Cinematographers - Matthew Nainby & Samuel Wright <br
/>
Editor - Matthew Nainby <br />
Colorist - Matthew Nainby <br />
</div>
</div>
<!--end of third video-->
<!--start of extra video-->
<div class="portfoliocontainer">
<div
class="portfoliovideo">
<iframe
src="http://player.vimeo.com/video/19769564?
title=0&byline=0&portrait=0&color=b80009"
width="465" height="266" frameborder="0"
webkitAllowFullScreen allowFullScreen></iframe>
</div>
<div class="portfolioinfo">
<div
style="float:left">Citiyouth Brisbane Promotional
</div>
<div class="reveal"><a
href="JavaScript:void()"> More Info ▼ </a></div>
</div>
<div class="content">
This
short promotional video was made for 'Citiyouth
Brisbane' for their event called 'Amplified' - a
quarterly event in which youth come together for a
crazy night of dancing, comedy, and to hear about Jesus
Christ. Our team recorded the song, shot, and edit the
video in 48 hours. We teamed up with Citiyouth's comedy
team called 'QuietTime' and produced this comical and
fun video.
<p> </p>
Amplified Rap Produced, Recorded, Mixed by Matthew
Nainby and written by Christopher Hodgman.
<p> </p>
Director - Joshua Hodgman <br />
Assistant Director - Matthew Nainby <br />
Producer - Matthew Nainby <br />
Cinematographers - Matthew Nainby & Samuel Wright <br
/>
Editor - Matthew Nainby <br />
Colorist - Matthew Nainby <br />
</div>
</div>
<!--end of fourth video-->
<!--same as before below here-->
</div>
</div>
<div id="about">
<div class="aboutoverlay">................
This post has been edited by Wickham: 29 January 2012 - 09:42 AM
Share this topic:
Page 1 of 1