Overlapping content problems with z-index and margins

[FrickenTrevor]

I need some help on my personal site, the goal is to have a "reveal" between two different sets of content such as this fiddle (http://jsfiddle.net/3n1gm4/8gDDy/). However I cant figure out how to position elements so that the content that is supposed to be revealed is hidden until the page is scrolled down. Heres some of the problems, you can check out the site here (http://ctec.clark.edu/~t.reece/). Please use Google Chrome 30+ to test the page, also the problems do not appear until you click the button that says "More" then refresh the page

I have also included this picture to help:

5454
1) The link to have the content scroll back down and to go back up the page does not work
2) The button is hidden by the overlapping content
3) The overlapping content that is supposed to be hidden is visible and is above the first content

[FrickenTrevor]

Anyone willing to help?

[molendijk]

Where's the More button?

[FrickenTrevor]

It is on my website, on the bottom of the page. It should be easy to see.

[molendijk]

I don't see it here.

[FrickenTrevor]

I don't see it here.

Like I said,

It is on my website, on the bottom of the page. It should be easy to see.

My website can be found here (http://ctec.clark.edu/~t.reece/), if you still dont see it could I have a screenshot of what you see?

[molendijk]

This is what I see:
5456
So there's a black box (a video?) and text beneath it, but no more button.

[FrickenTrevor]

It looks like the background video isnt loading, are you on a mobile device? If you can view the site on a computer, I have not made it optimized for mobile yet.

[molendijk]

I'm on a computer. The screenshot was made when viewing your site with Firefox. With IE I get this (still no button):
5457

[FrickenTrevor]

I used Chrome to design my site, I should point out I have not done very much testing yet as the site is still being designed. Since you can't view my site, I will just post up the code in a Zip file.

Edit: Just to make things clear I need my CSS looked at, something is strange with the code

[molendijk]

Try the following:
Immediately after the opening body tag and before the section having id="fox":

<section id="correct_scroll" style="position: absolute; top: 0px; height: 100%; ">&nbsp;</section>
The more-button must have position: fixed; bottom: 5px; so:

<a href="#work" class="button down" style="position: fixed; bottom: 5px">More</a>
Replace <p><a href="#fox">Go back up</a></p> with:

<p><a href="#correct_scroll">Go back up</a></p>
Class for button:
Replace margin: -960px 0px 0px 710px; with
left: 50%; margin-left: -50px;
That should do it.

[FrickenTrevor]

Thanks for helping with that, also im thinking about creating an IE only stylesheet. The site works good on chrome but IE destroys the whole page. Take a look , the left is Chrome 34 and the right is IE 11

5463

Edit: It looks like I have to change the #big-video-vid or the #header margin-top property to a negative value, it kind of seems like IE is adding tons of extra top margin for some reason
Edit 2: Also when the section id work and section class slide2 is visible and the page gets refreshed, for some reason both of those are still visible at the bottom of the page. Use Chrome to test the page to see the more button.

[jscheuer1]

As far as I can tell, it's the hash (#work). Two choices I see for avoiding that, onunload (not executed in Opera) or onload (might not be as soon as we would like) (we can try document ready, or even just putting it in the flow of the page load, that might be best, but might not work). Let's try both one at a time. Add the highlighted -

For document ready:


<script>
$(function() {
window.location.hash = '';
var BV = new $.BigVideo();
BV.init();
BV.show('fox-background.mp4', {altSource:'fox-background.ogv'});
});

For in the flow of the page (best if it works and causes no other problems):


<script>
window.location.hash = '';
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('fox-background.mp4', {altSource:'fox-background.ogv'});
});

The browser cache may need to be cleared and/or the page refreshed to see changes.

If neither work, or if you want to be able to use/keep the hash as long as it isn't #work and/or have other requirements that void this approach, more code and/or a different approach will be required.

That fox video is creepy. I thought it was a static image at first. Then I noticed it was breathing.

[FrickenTrevor]

The document ready code, the first code you posted, worked. Im surprised its actually a scripting issue, and the whole time I thought it was CSS :rolleyes:
Would there be any way to remove the hash from the URL?



That fox video is creepy. I thought it was a static image at first. Then I noticed it was breathing.
I laughed a little at that, and its the best I can do for a free video to be used as a background. Trying to find a free video for a background is hard since you have to pay for most "premium" videos


E̶d̶i̶t̶:̶ ̶I̶E̶ ̶1̶1̶ ̶s̶t̶i̶l̶l̶ ̶k̶i̶l̶l̶s̶ ̶m̶y̶ ̶s̶i̶t̶e̶,̶ ̶I̶ ̶h̶a̶v̶e̶ ̶n̶o̶t̶ ̶d̶o̶n̶e̶ ̶v̶e̶r̶y̶ ̶m̶u̶c̶h̶ ̶t̶e̶s̶t̶i̶n̶g̶ ̶y̶e̶t̶ ̶w̶i̶t̶h̶ ̶1̶0̶ ̶o̶r̶ ̶9̶

Edit 2: IE 9+ does not work on my site. I do not know if the current CSS can be changed or if I have to attach a conditional statement just for IE and go from there

[jscheuer1]

Would there be any way to remove the hash from the URL?

You mean the # symbol itself? I'm not sure. I don't think so. I mean, sure it can be done. But I'm almost positive it requires reloading the page. The trick would be to avoid it in the first place. That is use a different script for the raising and lowering of the light blue background content element. Or at least eliminate (if that's possible without stopping it from working) the part of it that changes the page's hash.

The problem in IE is how styles.css interacts with the bg video script. Not sure of the particulars.

OK, this seems workable (gets rid of the hash, also works in IE 9 +):

http://home.comcast.net/~jscheuer1/side/demos/tidbits/fox-vid-ie.htm

[FrickenTrevor]

Wow! Thank you for your work, if I had extra money to spare I would donate some. Also is this script hardcoded or could it be changed, say if the HTML that it is attached to changes?


$('.button').click(function(e){
e.preventDefault();
$('#work').animate({top: 0});
});
$('#splash a').click(function(e){
e.preventDefault();
$('#work').animate({top: '105%'});
});

[jscheuer1]

It can be changed to do whatever it needs to do. BTW, that BV script doesn't appear to work in Firefox or Opera even with the altSource. So I came up with this alternative way of getting it to work, replace:


var BV = new $.BigVideo();
BV.init();
BV.show('fox-background.mp4', {altSource:'fox-background.ogv'});


with:


var BV = new $.BigVideo();
BV.init();
if(/(MSIE )(\d+)/.test(navigator.userAgent)){
BV.show('fox-background.mp4');
} else {
BV.show('fox-background.ogv');
}
$('video').error(function(){
this.src = 'fox-background.mp4'
this.play();
});

That way IE 9 and 10 will use the mp4, all others will try the ogv and on error fall back to the mp4. That's what IE 11 does - all others work fine with ogv. I was surprised that IE 11 no longer identifies itself as MSIE, yet it still requires mp4.

Oh, and one other thing about bg video. Videos will not autoplay in most hand helds.

[FrickenTrevor]

Videos will not autoplay in most hand helds.

Thats another thing I need to adapt for too, is adapt for mobile. I know I could use Modernizr then detect touch and load a static image but I have not done that yet.
Even if I did add a touch event I would end up with a ton of If Else statements, something like this


var BV = new $.BigVideo();
BV.init();

if (Modernizr.touch) {
BV.show('video-poster.jpg');
} else {
BV.show('video.mp4',{ambient:true});
}

if(/(MSIE )(\d+)/.test(navigator.userAgent)){
BV.show('fox-background.mp4');
} else {
BV.show('fox-background.ogv');
}


Also the plugin I am using for the video is called BigVideo.js (http://dfcb.github.io/BigVideo.js/)