Develop Reference

html5 custom control not work if multiple video

I'm trying to make a custom video player. Unfortunately, I have an issue to set the control to all videos. The control button is working well, but only on the first video. I would like to make it without adding all video unique IDs. Is that even possible?
Here is my code:
const video = document.querySelector('.video');
const btn = document.getElementById('play-pause');
const sound = document.getElementById('volume');
sound.addEventListener('click', ()=>{
video.muted = !video.muted;
sound.classList.toggle('mute');
});
btn.addEventListener('click', ()=>{
video.paused ? video.play() : video.pause();
btn.classList.toggle('pause');
});
.container {
background:#ccc;
justify-content:center;
align-items:center;
/* height:100vh; */
flex-direction:column;
}
.c-mst-video-container , .video {
width:100%;
}
.mst-video-container {
max-width:800px;
position:relative;
overflow:hidden;
display:block;
}
.mst-video-container:hover .controls {
transform: translateY(0);
}
.mst-video-control {
display:flex;
position:absolute;
bottom:0;
width:100%;
flex-wrap:wrap;
background-color: black;
}
.mst-video-btn button {
background:none;
border:0;
outline:0;
cursor:pointer;
}
.mst-video-btn #play-pause:before {
content: '\f144';
font-family: FontAwesome;
width:30px;
height:30px;
display: inline-block;
font-size:28px;
color: #fff;
}
.mst-video-btn #volume:before {
content: '\f028';
font-family: FontAwesome;
width:30px;
height:30px;
display: inline-block;
font-size:28px;
color: #fff;
}
.mst-video-btn {
padding:10px;
}
.mst-video-btn #play-pause.play:before {
content:'\f144';
}
.mst-video-btn #play-pause.pause:before {
content:'\f28b';
}
.mst-video-btn #volume.sound:before {
content:'\f028';
}
.mst-video-btn #volume.mute:before {
content:'\f6a9';
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="container">
<div class="mst-video-container">
<video src="https://www.w3schools.com/html/movie.mp4" class="video" ></video>
<div class="mst-video-control">
<div class="mst-video-btn">
<button id="play-pause"></button>
<button id="volume"></button>
</div>
</div>
</div>
<div class="mst-video-container">
<video src="https://www.w3schools.com/html/movie.mp4" class="video" ></video>
<div class="mst-video-control">
<div class="mst-video-btn">
<button id="play-pause"></button>
<button id="volume"></button>
</div>
</div>
</div>
</div>
Thanks for the advice.
Best regards

Use a class .play-pause instead than #play-pause and attach a listener to all the buttons. Furthermore, when a button is clicked you have to select the video and you have to navigate and I used closest() to select the container of the btn clicked and querySelector not on the document but on this container to select the .video child. e.target return the btn clicked, in this case you can't use this because you are using an arrow function. I modified the css too transforming the id #play-pause in a class.
const video = document.querySelector('.video');
const btns = document.querySelectorAll('.play-pause');
const sound = document.getElementById('volume');
sound.addEventListener('click', ()=>{
video.muted = !video.muted;
sound.classList.toggle('mute');
});
for(const btn of btns){
btn.addEventListener('click', (e)=>{
const currentBtn = e.target;
const videoContainer = currentBtn.closest(".mst-video-container")
const videoParent = videoContainer.querySelector(".video");
videoParent.paused ? videoParent.play() : videoParent.pause();
currentBtn.classList.toggle('pause');
});
}
.container {
background:#ccc;
justify-content:center;
align-items:center;
/* height:100vh; */
flex-direction:column;
}
.c-mst-video-container , .video {
width:100%;
}
.mst-video-container {
max-width:800px;
position:relative;
overflow:hidden;
display:block;
}
.mst-video-container:hover .controls {
transform: translateY(0);
}
.mst-video-control {
display:flex;
position:absolute;
bottom:0;
width:100%;
flex-wrap:wrap;
background-color: black;
}
.mst-video-btn button {
background:none;
border:0;
outline:0;
cursor:pointer;
}
.mst-video-btn .play-pause:before {
content: '\f144';
font-family: FontAwesome;
width:30px;
height:30px;
display: inline-block;
font-size:28px;
color: #fff;
}
.mst-video-btn #volume:before {
content: '\f028';
font-family: FontAwesome;
width:30px;
height:30px;
display: inline-block;
font-size:28px;
color: #fff;
}
.mst-video-btn {
padding:10px;
}
.mst-video-btn .play-pause.play:before {
content:'\f144';
}
.mst-video-btn .play-pause.pause:before {
content:'\f28b';
}
.mst-video-btn #volume.sound:before {
content:'\f028';
}
.mst-video-btn #volume.mute:before {
content:'\f6a9';
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="container">
<div class="mst-video-container">
<video src="https://www.w3schools.com/html/movie.mp4" class="video" ></video>
<div class="mst-video-control">
<div class="mst-video-btn">
<button class="play-pause"></button>
<button id="volume"></button>
</div>
</div>
</div>
<div class="mst-video-container">
<video src="https://www.w3schools.com/html/movie.mp4" class="video" ></video>
<div class="mst-video-control">
<div class="mst-video-btn">
<button class="play-pause"></button>
<button id="volume"></button>
</div>
</div>
</div>
</div>

How to make images change a little quicker?

My code works just fine but for some reason when you click on the play button it takes a bit longer to switch over to the pause sign, and occasionally it takes a bit longer for the pause button to go to the play button. I also have one more question, when you click on the rain and beach icon there's a blue square border that I didn't remember putting, how do you remove it?
Thanks, Love2code
<!DOCTYPE html>
<html>
<head>
<title>Meditation App</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.app{
height:100vh;
display:flex;
justify-content:space-evenly;
align-items:center;
}
.time-select,.sound-picker,.player-container{
height:80%;
flex:1;
display:flex;
flex-direction:column;
justify-content:space-evenly;
align-items:center;
}
.player-container{
position:relative;
}
.player-container svg{
position:absolute;
height:50%;
top:50%;
left:50%;
transform:translate(-50%,-50%);
pointer-events:none;
}
.time-display{
position:absolute;
bottom:10%;
color:white;
font-size:50px;
}
video{
position:fixed;
top:0%;
left:0%;
width:100%;
z-index:-10;
}
.time-select button,
.sound-picker button{
color:white;
width:30%;
height:10%;
background:none;
border:2px solid white;
cursor:pointer;
border-radius:5px;
font-size:20px;
transition:all 0.5s ease;
}
.time-select button:hover{
color:black;
background:white;
}
.sound-picker button{
border:none;
height:120px;
width:120px;
border-radius:50%;
}
.sound-picker button:nth-child(1){
background:#4972a1;
}
.sound-picker button:nth-child(2){
background:#a14f49;
}
.sound-picker:focus{
outline: none;
}
</style>
</head>
<body>
<div class="app">
<div class="vid-container">
<video Loop>
<source src="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"/>
</video>
</div>
<div class="time-select">
<button data-time="120">2 Minutes</button>
<button data-time="300">5 Minutes</button>
<button data-time="600">10 Minutes</button>
</div>
<div class="player-container">
<audio class="song">
<source src="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1"></source>
</audio>
<img src="https://www.dropbox.com/s/8unx3knosmefedk/download%20%281%29.svg?raw=1" class="play-container" alt="">
<svg class="track-outline"
width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-width="20"/>
</svg>
<svg class="moving-outline"
width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-width="20"/>
</svg>
<h3 class="time-display">0:00</h3>
</div>
<div class="sound-picker">
<button data-sound="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1" data-video="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"><img src="https://i.ibb.co/8BspYTV/rain-1.png"></button>
<button data-sound="https://www.dropbox.com/s/6k9nauf2ffyvfuu/beach.mp3?raw=1"
data-video="https://www.dropbox.com/s/tsdd86bxmax32jp/beach.mp4?raw=1"><img src="https://i.ibb.co/T0xw4k7/sun-umbrella.png"></button>
</div>
</body>
<script>
const app = () => {
const song = document.querySelector(".song");
const play = document.querySelector(".play-container");
const outline = document.querySelector(".moving-outline circle");
const video = document.querySelector(".vid-container video");
//Sounds
const sounds = document.querySelectorAll(".sound-picker button");
//Time Display
const timeDisplay = document.querySelector(".time-display");
//Get length of the outside
const outlineLength = outline.getTotalLength();
//Duration
let fakeDuration = 600;
outline.style.strokeDasharray = outlineLength;
outline.style.strokeDashoffset = outlineLength;
//play sounds
play.addEventListener("click", () => {
checkPlaying(song);
});
//stop and play the sounds
const checkPlaying = song =>{
if(song.paused){
song.play();
video.play();
play.src = 'https://www.dropbox.com/s/3zvnjkebwt1sjgq/download%20%283%29.svg?raw=1';
}else{
song.pause();
video.pause();
play.src = 'https://www.dropbox.com/s/8unx3knosmefedk/download%20%281%29.svg?raw=1';
}
}
};
app();
</script>
</html>

Because your SVGs are remotely sourced, it takes a bit of time to download them. I've created two hidden images with the remote sources. This will download these and have them ready in your cash for when you need them. I've also changed the sequence of when you switch the source path to come before you play the video.
I've set all elements to have an outline of none to take away the blue border when clicking on the image.
const app = () => {
const song = document.querySelector(".song");
const play = document.querySelector(".play-container");
const outline = document.querySelector(".moving-outline circle");
const video = document.querySelector(".vid-container video");
//Sounds
const sounds = document.querySelectorAll(".sound-picker button");
//Time Display
const timeDisplay = document.querySelector(".time-display");
//Get length of the outside
const outlineLength = outline.getTotalLength();
//Duration
let fakeDuration = 600;
outline.style.strokeDasharray = outlineLength;
outline.style.strokeDashoffset = outlineLength;
//play sounds
play.addEventListener("click", () => {
checkPlaying(song);
});
//stop and play the sounds
const checkPlaying = song => {
if (song.paused) {
play.src = 'https://www.dropbox.com/s/3zvnjkebwt1sjgq/download%20%283%29.svg?raw=1';
song.play();
video.play();
} else {
play.src = 'https://www.dropbox.com/s/8unx3knosmefedk/download%20%281%29.svg?raw=1';
song.pause();
video.pause();
}
}
};
app();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
.app {
height: 100vh;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.time-select,
.sound-picker,
.player-container {
height: 80%;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.player-container {
position: relative;
}
.player-container svg {
position: absolute;
height: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.time-display {
position: absolute;
bottom: 10%;
color: white;
font-size: 50px;
}
video {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
z-index: -10;
}
.time-select button,
.sound-picker button {
color: white;
width: 30%;
height: 10%;
background: none;
border: 2px solid white;
cursor: pointer;
border-radius: 5px;
font-size: 20px;
transition: all 0.5s ease;
}
.time-select button:hover {
color: black;
background: white;
}
.sound-picker button {
border: none;
height: 120px;
width: 120px;
border-radius: 50%;
}
.sound-picker button:nth-child(1) {
background: #4972a1;
}
.sound-picker button:nth-child(2) {
background: #a14f49;
}
.sound-picker:focus {
outline: none;
}
<img src="https://www.dropbox.com/s/3zvnjkebwt1sjgq/download%20%283%29.svg?raw=1" style="display:none;">
<img src="https://www.dropbox.com/s/8unx3knosmefedk/download%20%281%29.svg?raw=1" style="display:none;">
<div class="app">
<div class="vid-container">
<video Loop>
<source src="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"/>
</video>
</div>
<div class="time-select">
<button data-time="120">2 Minutes</button>
<button data-time="300">5 Minutes</button>
<button data-time="600">10 Minutes</button>
</div>
<div class="player-container">
<audio class="song">
<source src="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1"></source>
</audio>
<img src="https://www.dropbox.com/s/8unx3knosmefedk/download%20%281%29.svg?raw=1" class="play-container" alt="">
<svg class="track-outline" width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-width="20"/>
</svg>
<svg class="moving-outline" width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-width="20"/>
</svg>
<h3 class="time-display">0:00</h3>
</div>
<div class="sound-picker">
<button data-sound="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1" data-video="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"><img src="https://i.ibb.co/8BspYTV/rain-1.png"></button>
<button data-sound="https://www.dropbox.com/s/6k9nauf2ffyvfuu/beach.mp3?raw=1" data-video="https://www.dropbox.com/s/tsdd86bxmax32jp/beach.mp4?raw=1"><img src="https://i.ibb.co/T0xw4k7/sun-umbrella.png"></button>
</div>

How to make a label that expands when hovering?

How can I make a label that has the name of the section "expand" from an SVG in a navbar when hovering with the cursor. To make things more clear:
here's a sketch of the wanted effect
/*this class is inside the <polyline> tag*/
.hover {
opacity: 0.5 !important;
}
.hover:hover {
opacity: 1 !important;
}
svg {
width: 50%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="jquery.scrollTo.js" type="text/javascript"></script>
<script src="jquery.localScroll-1.4.0/jquery.localScroll.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="container">
<div id="firstPage">
<div id="navbar">
<!--these are the SVGs wrapped into an <a> tag-->
<a href="#firstPage" id="a">
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Livello_1" x="0px" y="0px" viewBox="0 0 118.7 103.3" xml:space="preserve" enable-background="new 0 0 118.7 103.3">
<style type="text/css">
.st0 {
fill: #FF3333;
}
</style>
<polyline class="st0 hover" points="59.3 34.4 59.5 34.4 0.3 0 0.3 68.4 0.2 68.4 59.4 103.4 59.4 103.4 118.5 68.4 118.3 68.4 118.3 0 59.2 34.4 " />
</svg>
</a>
</div>
</div>
</div>
This is my code
Any help would be great!

You can achieve this with CSS transitions. See my code:
CSS:
#container{
width:180px;
margin:0 auto;
text-align:center;
}
svg {
width: 50%;
}
a{
text-decoration:none;
}
label{
position:relative;
left:-70px;
top:-30px;
color:#fff;
text-transform:uppercase;
background:red;
transition: all 1s ease;
z-index:-1;
}
svg:hover ~ label{
left: -200px;
transition: all 1s ease;
}
As an addition, make sure you add the -webkit-, -moz-, and -o- prefixes to the transitions to make sure it is crossbrowser.
See the DEMO for your solution

How to mask two half images and on hover show a full image with an nice animation

I doesn’t know how to do the following with jQuery.
I have created a page hero with two sections (red/black):
What I want is, when hovering over the black one for example, it will expand over the red section, so you get a full black box. The same result I want of course for the red section:
How should I make this work?
var redSection = $('#red');
var blackSection = $('#black');
redSection.on('mouseover', function() {
// Do something - overlay the other section
});
The HTML markup is as follow:
<section id="hero">
<figure id="urbandesign">
<a href=“#" target="_blank">
<img src="images/urbandesign.jpg" alt="Urban Design">
</a>
</figure><!-- End figure -->
<figure id="photography">
<a href=“#" target="_blank">
<img src="images/photography.jpg" alt="Photography">
</a>
</figure><!-- End figure -->
</section><!-- End section#hero -->
And the CSS:
#hero {
height: 480px; /* Default 500px */
padding: 0;
position: relative;
overflow: hidden;
z-index: 1;
background: url(../images/hero.jpg) no-repeat center; /* remove */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#hero figure {
position: absolute;
top: 0;
background: #FFF;
}
#hero img {
width: 100%;
max-width: none;
position: relative;
opacity: 0.4;
}
The final result I want to replace the red and black section with images.
Look out to your response! Thank you.

A mix of CSS3 and jQuery with Graceful Degradation should sort this.
CSS
.page {
position:fixed;
width:100%;
height:100%;
overflow:hidden;
}
.black {
background:#000;
width:50%;
height:100%;
position:absolute;
width:100%;
left:-50%;
transform:skew(30deg,0);
transition:0.5s ease-in-out;
z-index:1;
}
.red {
background:#ff0000;
width:50%;
height:100%;
position:absolute;
width:100%;
right:-50%;
transform:skew(30deg,0);
transition:0.5s ease-in-out;
}
.red:hover {
transform:skew(0);
transform:translate(-50%,0);
}
.black:hover {
transform:skew(0);
transform:translate(50%,0);
}
.inactive {
z-index:-1
}
HTML
<div class="page">
<div class="black"></div>
<div class="red"></div>
</div>
jQuery
The jQuery is necessary to fix a z-index problem with the last element in the DOM tree that ruins the fluid animation.
$(document).ready(function(){
$('.black').hover(function(){
$('.red').addClass('inactive');
},function(){
$('.red').removeClass('inactive');
});
$('.red').hover(function(){
$('.black').addClass('inactive');
},function(){
$('.black').removeClass('inactive');
});
});
Be aware that adding any content to the two divs you will have to add an inner div and reset the skew with 'transform:skew(-30deg,0);'. The prefixed versions of transition and transform will also need adding.
JSFiddle Reference

You could do this using svg's path for the shape, pattern for the image and a little bit of JavaScript for handling the mouseover and mouseleave events.
var hero = document.getElementById('hero');
var animLeft = document.getElementById('anim-left');
var animRight = document.getElementById('anim-right');
hero.addEventListener('mouseover', function(e) {
(e.target.id == 'left') ? animRight.beginElement() : animLeft.beginElement();
})
hero.addEventListener('mouseleave', function(e) {
(e.target.id == 'left') ? animRight.endElement() : animLeft.endElement();
})
<svg id="hero" width="600" height="200" viewBox="0 0 600 200">
<defs>
<pattern id="image-left" patternUnits="userSpaceOnUse" width="600" height="200" viewBox="0 0 600 200">
<image xlink:href="http://dummyimage.com/600x200/40000c/000" width="600" height="200" />
</pattern>
<pattern id="image-right" patternUnits="userSpaceOnUse" width="600" height="200" viewBox="0 0 600 200">
<image xlink:href="http://dummyimage.com/600x200/002a33/fff" width="600" height="200" />
</pattern>
</defs>
<a xlink:href="#">
<path id="right" d="M0,0 h600 v200 h-600z" fill="url(#image-right)" />
</a>
<a xlink:href="#">
<path id="left" d="M0,0 h350 l-100,200 h-250z" fill="url(#image-left)" />
<animate id="anim-left" xlink:href="#left" attributeType="XML" attributeName="d" from="M0,0 h350 l-100,200 h-250z" to="M0,0 h0 l-100,200 h0z" dur="1" begin="indefinite" repeatCount="1" fill="freeze" />
<animate id="anim-right" xlink:href="#left" attributeType="XML" attributeName="d" from="M0,0 h350 l-100,200 h-250z" to="M0,0 h700 l-100,200 h-600z" dur="1" begin="indefinite" repeatCount="1" fill="freeze" />
</a>
</svg>

A simple CSS only solution with no additional re-paints, etc.:
.parent {
overflow: hidden;
position: absolute;
width: 90%;
height: 90%;
}
.item {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
transition: transform 1s, z-index 1s;
z-index: 1;
overflow: hidden;
}
.item .image {
transition: transform 1s;
}
.item:hover {
transform: translate3d(0px, 0px, 0px);
z-index: 100;
}
.item:hover .image {
transform: skewX(0deg);
}
.red {
background: #f00;
transform: translate3d(-50%, 0px, 0px) skewX(-10deg);
}
.red .image {
transform: skewX(10deg);
}
.black {
background: #000;
transform: translate3d(50%, 0px, 0px) skewX(-10deg);
}
.black img {
transform: skewX(10deg);
}
<section class="parent">
<div class="red item">
<img class="image" src="http://placehold.it/450/ff0000/000000" />
</div>
<div class="black item">
<img class="image" src="http://placehold.it/450/000000/ffffff" />
</div>
</section>

Way to not display webpage in Internet Explorer until after javascript is allowed?

I have built a simple page that displays text and various formatted elements and also a photo gallery. The photo gallery has a horizontal scrollbar beneath a larger image. The scroll area contains thumbnails that are loaded into the larger image area after they are clicked on. This works fine in Chrome, Firefox, and Safari.
However, in Internet Explorer the JavaScript is blocked initially and the user must allow it to run. Prior to the JavaScript being allowed by the user the page is displayed in the background but the formatting for the photo gallery is incorrect because it relies upon the currently blocked JavaScript (the larger images that are currently hidden are displayed down the page and it looks bad). Is there a workaround where I do not display the webpage at all until after the JavaScript is unblocked or perhaps another easy solution?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index</title>
<style type="text/css">
body {
/*font-size:12px; modify this within each element*/
}
#wrapper {
width:950px;
height:800px;
margin-left:5px;
margin-top:5px;
border-top:2px solid #bbb;
border-bottom:2px solid #bbb;
border-right:5px solid #000000;
border-left:5px solid #000000;
padding:0px;
}
#topwrap {
width:950px;
height:50px;
}
#topturqsq {
float:left;
width:250px;
height:50px;
background-color:#7ECCC0;
}
#topartdeco{
float:left;
width:698px;
height:48px;
background-color:#FA8072;
padding:1px;
}
#aptname{
float:left;
width:248px;
height:149px;
border-bottom:1px solid #bbb;
vertical-align:top;
}
#contactbanner{
float:left;
width:690px;
height:29px;
border-bottom:1px solid #000000;
text-align:right;
font-size:20px;
padding-right: 10px;
padding-top:10px;
font-family:arial,helvetica,sans-serif;
}
#photogallery{
width:698px;
height:555px;
border-bottom:1px solid #bbb;
float:left;
}
#maintext{
font-size:15px;
font-family:arial,helvetica,sans-serif;
}
ul{
list-style-type:none;
margin:10;
padding:0;
vertical-align:top;
position:relative;
}
a{
display:block;
color:#000000;
text-decoration:none;
}
#leftnav{
position:relative;
width:248px;
height:600px;
font-size:20px;
float:left;
font-family:arial,helvetica,sans-serif;
}
#leftwrap{
position:relative;
float:left;
width:249px;
height:750px;
border-right: 1px solid black;
}
#linkDiv{
width:698px;
height:120px;
overflow:auto;
white-space:nowrap;
border: 1px solid black;
float:left;
padding-top:15px;
}
#divLinks{
float:left;
}
#container1,#container2,#container3,#container4,#container5,#container6,#container7,#container8{
width:500px;
height:375px;
margin:0 auto;
padding-left:95px;
padding-top:20px;
padding-bottom:20px;
}
</style>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?266743-Switch-Div-Content-Using-Javascript&p=1229155#post1229155
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
document.getElementById('container'+idInfo).style.display = 'block';
return false;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="topwrap">
<div id="topturqsq">
</div>
<div id="topartdeco">
<img src="images/artdeco.png" width="349" align="left"> <img src="images/artdeco.png" width="349" align="right">
</div>
</div>
<div id="leftwrap">
<div id="aptname">
<img style="position:relative; top:15px; left:0px;" src="images/banner.png" width="248" >
</div>
<div id="leftnav">
<ul>
<li>Home</li>
<li>Amenities</li>
<li>Nearby</li>
<li>Photos</li>
<li>Lease</li>
<li>Contact US</li> <br>
<li><span style="text-align:center;display:block;text-decoration:underline">Floor Plans </span></li>
<li>2 Bedroom</li>
<li>1 Bedroom</li>
<li>Corporate</li>
<li>Efficiency</li>
</ul>
</div>
</div>
<div id="contactbanner">
<img src="images/phone.png" height="20" > Call us: (555) 555 - 5555
</div>
<div id="photogallery">
<div id="divLinks">
<div id="container1"><img src="images/Chrysanthemum.jpg" width="500" height="375" border="1"></div>
<div id="container2"><img src="images/Desert.jpg" width="500" height="375" border="1"></div>
<div id="container3"><img src="images/Hydrangeas.jpg" width="500" height="375" border="1"></div>
<div id="container4"><img src="images/Jellyfish.jpg" width="500" height="375" border="1"></div>
<div id="container5"><img src="images/Koala.jpg" width="500" height="375" border="1"></div>
<div id="container6"><img src="images/Lighthouse.jpg" width="500" height="375" border="1"></div>
<div id="container7"><img src="images/Penguins.jpg" width="500" height="375" border="1"></div>
<div id="container8"><img src="images/Tulips.jpg" width="500" height="375" border="1"></div>
</div>
<script type="text/javascript">
window.onload = function() { showDiv('1'); }
</script>
<div id="linkDiv">
<img src="images/Chrysanthemum.jpg" width="120" height="90">
<img src="images/Desert.jpg" width="120" height="90">
<img src="images/Hydrangeas.jpg" width="120" height="90">
<img src="images/Jellyfish.jpg" width="120" height="90">
<img src="images/Koala.jpg" width="120" height="90">
<img src="images/Lighthouse.jpg" width="120" height="90">
<img src="images/Penguins.jpg" width="120" height="90">
<img src="images/Tulips.jpg" width="120" height="90">
</div>
</div>
<div id="maintext">
<strong>heading</strong>
<blockquote>bunch of text</blockquote>
</div>
</div>
</body>
</html>

I guess in theory you could * { display:none; } to hide everything, then bring it back when JS is accepted.. assuming that version of IE supports the wildcard (*) in CSS.
Update: Since you're doing this with the header.. I'm just going ot assume it has an ID of header..
<div id="header" style="display:none;">CONTENT</div>
<script type="text/javacript">
window.onload = function(){
var h = document.getElementById('header');
h.style.display = 'block';
}
</script>