Here is my code to re size the header on scroll on but it is not working.The didn't set the header to fixed size.But the header size isn't changing i used Javscript and css to do this but it isn't can some please help me to get rid of this error.I struct at this so please some can help me.
Thanks in advance
<!DOCTYPE html>
<html lang="en">
<head>
<title>Request Us Your Requirment</title>
<link rel="stylesheet" href="css/style.css" />
<script src="js/classie.js">
</script>
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
}
else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
</script>
</head>
<body>
<div id="wrapper">
<header>
<div class="container clearfix">
<h1 id="logo">
My Site
</h1>
<nav>
Services
About Us
Contact Us
</nav>
</div>
</header>
<div id="main">
<div id="content">
<section>
<div class="container">
<h1>Request Us Your Requirement</h1>
<p>Building a website is a time consuming process.But not now Just get your professional website by contsct us</p>
<p>We will Provide the best web sites with less cost and within the time.</p>
<p>
Follow Us On FB<br>
Follows Us On Twitter
</p>
</div>
</section>
<section class="color">
<div class="container">
<h1>Why My Site!</h1>
<p>We will provide Best Quality Webstes</p>
<p>Low Cost</p>
<p> How to contact Us</p>
</div>
</section>
</div>
</div>
<footer>
<div id="info-bar">
<div class="container clearfix">
<span class="all-tutorials">
</div>
</div>
</footer>
</div>
</body>
</html>
check this fiddle : https://jsfiddle.net/b39gx6pa/2/
Replace JavaScript with this:
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,shrinkOn = 300,header = document.querySelector("header");
if (distanceY > header.clientHeight/3) {
classie.add(header,"smaller");
}else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
Related
I am a refactoring code for a website I am making and I am trying to use Flexslider jQuery plugin instead of AnythingSlider plugin I was originally used. I downloaded the plugin and followed the directions on the website (Flexslider website) for how to get started with the plugin. However, the pictures in the ul class "slides" are still in a list form and don't appear as a slideshow. Here is my current code:
$(document).ready(function(){
/*
alert('Our JavaScriipt is working!');
console.log('Our Javascript is working!');
console.warn('A dire warning!');
console.error('ERMAGERD AN ERROR!');
*/
var modalContainer = $("#modal-container");
var hideModal = function() {
modalContainer.hide();
};
var showModal = function() {
modalContainer.show();
};
var modalShowButton = $("#modal-show");
modalShowButton.on("click", showModal);
var modalCloseButton = $("#modal-hide");
modalCloseButton.on("click", hideModal);
$(document).on("keyup", function(evt) {
evt = evt || window.event;
if (evt.keyCode === 27) {
hideModal();
}
});
var handleNewsletterSignup = function(evt) {
evt.preventDefault();
var newsletterHeader = $("#newsletter-header");
var newsletterForm = $("#newsletter-signup");
newsletterForm.hide();
newsletterHeader.text("Thank you for signing up!");
setTimeout(hideModal, 2000);
};
var newsletterForm = $("#newsletter-signup");
newsletterForm.on("submit", handleNewsletterSignup);
/* Begin the clock code */
var clockTime = function() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
if (hours <= 11) {
var period = "AM";
} else {
var period = "PM";
}
if (hours > 12) {
hours = hours - 12;
} else if (hours === 0) {
hours = 12;
}
if (minutes < 10) {
minutes = "0" + String(minutes);
}
if (seconds < 10) {
seconds = "0" + String(seconds);
}
var time = hours + ':' + minutes + ':' + seconds + ' ' + period;
return time;
}
var clock = $("#clock");
setInterval(function() {
clock.text(clockTime());
}, 1000);
});
<head>
<title>Liz Lemon's Personal Website</title>
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Open+Sans:400italic,400,700|Montserrat:400,700' rel='stylesheet' type='text/css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jQuery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({;
animation: "slide",
animationLoop: true,
slideshow: true;
randomize: false,
});
});
</script>
</head>
<body>
<div class="page">
<header>
<h1>Liz Lemon's Personal Website</h1>
<img id="headshot" src="http://i284.photobucket.com/albums/ll14/britishpandachick/liz-lemon_zps6qncghn4.jpg" alt="Headshot">
</header>
<h4>
The current time is...
<span id="clock">Clock goes here</span>
</h4>
<blockquote id="greeting">This is where the JavaScript greeting goes...</blockquote>
<section id="bio">
<h2>About me</h2>
<p>Here is a paragraph all about how awesome I am. Don't you <em>love</em> to read about me? Hmm, not so much? Well, then replace this paragraph with some information about <strong>yourself</strong>! Or you can go read some fun articles on Skillcrush.
</p>
</section>
<div class="flexslider">
<ul class="slides">
<li><img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/></li>
<li><img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/></li>
<li><img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/></li>
</ul>
</div>
<section id="contact">
<h2>Contact</h2>
<div id="social-icons">
<a href="#">
<img src="http://i284.photobucket.com/albums/ll14/britishpandachick/twitter_zpsulfh8can.png" alt="Twitter icon">
</a>
</div>
</section>
<button id="modal-show">Join the Lemon List</button>
<div id="modal-container">
<section id="modal-box">
<button id="modal-hide">x</button>
<h2 id="newsletter-header">Sign up for my email list!</h2>
<form id="newsletter-signup" action="#" method="post" accept-charset="utf-8">
<input type="email" name="email" value="" placeholder="Your email">
<input type="submit" value="Sign up">
</form>
</section>
</div>
<footer>
<p>© Skillcrush 2014</p>
</footer>
</div>
</body>
So far I have triple checked every single part of my code (especially what is in the head) with the sample ones on the website and github. I also tried moving some of the JS to the JS file. Despite these changes, the pictures in slides class remain a bullet point list. Did I link the wrong files for flexslider? I think my issue is with the HTML section, but I'm not 100% positive since my code looks the same as the ones on the sample page.
I think error in your CSS and JS inclusion.
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jQuery.flexslider.js"></script>
Like it should be:
<script type="text/javascript" src="http://www.domain.com/myphysicaldirectory/js/jQuery.flexslider.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.domain.com/myphysicaldirectory/css/flexslider.css" media="all" />
Set your JS and CSS Path properly and open your source code (ctrl + u) and check its include properly or not. also check included path open correctly in browser or not.
When you download flexslider zip file then inside that demo folder, create one test.html file and add below code in it.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta content="charset=utf-8">
<title>Liz Lemon's Personal Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- Demo CSS -->
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../flexslider.css" type="text/css" media="screen" />
<!-- Modernizr -->
<script src="js/modernizr.js"></script>
</head>
<body class="loading">
<div id="container" class="cf">
<header>
<h1>Liz Lemon's Personal Website</h1>
<img id="headshot" src="http://i284.photobucket.com/albums/ll14/britishpandachick/liz-lemon_zps6qncghn4.jpg" alt="Headshot">
</header>
<h4>
The current time is...
<span id="clock">Clock goes here</span>
</h4>
<blockquote id="greeting">This is where the JavaScript greeting goes...</blockquote>
<section id="bio">
<h2>About me</h2>
<p>Here is a paragraph all about how awesome I am. Don't you <em>love</em> to read about me? Hmm, not so much? Well, then replace this paragraph with some information about <strong>yourself</strong>! Or you can go read some fun articles on Skillcrush.
</p>
</section>
<div id="main" role="main">
<section class="slider">
<div class="flexslider carousel">
<ul class="slides">
<li>
<img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/>
</li>
<li>
<img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/>
</li>
<li>
<img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/>
</li>
<li>
<img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/>
</li>
<li>
<img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/>
</li>
<li>
<img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/>
</li>
<li>
<img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/>
</li>
<li>
<img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/>
</li>
<li>
<img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/>
</li>
</ul>
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<div id="social-icons">
<a href="#">
<img src="http://i284.photobucket.com/albums/ll14/britishpandachick/twitter_zpsulfh8can.png" alt="Twitter icon">
</a>
</div>
</section>
<button id="modal-show">Join the Lemon List</button>
<div id="modal-container">
<section id="modal-box">
<button id="modal-hide">x</button>
<h2 id="newsletter-header">Sign up for my email list!</h2>
<form id="newsletter-signup" action="#" method="post" accept-charset="utf-8">
<input type="email" name="email" value="" placeholder="Your email">
<input type="submit" value="Sign up">
</form>
</section>
</div>
<footer>
<p>© Skillcrush 2014</p>
</footer>
</div>
</div>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
<!-- FlexSlider -->
<script defer src="../jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 420,
itemMargin: 1,
pausePlay: true,
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
</body>
</html>
I already test it. its running fine.
I'm trying to make a simple page for the Gear 2 (running Tizen OS). In this page, the user can scroll up or down to see different meds, then can swipe left to see a screen asking to confirm the med as taken. I've taken some sample Tizen OS code and cobbled it together to try to achieve this, but it's not working as desired - it's just displaying all 4 text elements, one right after the other. I am very new to HTML and JavaScript so I'm sure I'm making some simple mistakes.
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<title>UITest</title>
<link rel="stylesheet" href="lib/tau/themes/default/tau.css">
</head>
<body>
<div class="ui-page ui-page-active" id="main">
<header class="ui-header">
<h2 class="ui-title">2 med(s) to take</h2>
</header>
<div id="barsectionchanger" class="ui-content">
<section class = "barcontainer">
<div class = "hsectionchanger">
<div>
<section class="section-active" style="text-align:center">
<h3> med 1 </h3>
</section>
<section style="text-align:center">
<h3> did you take med 1 </h3>
</section>
</div>
</div>
</section>
<section class = "barcontainer">
<div class = "hsectionchanger">
<div>
<section class="section-active" style="text-align:center">
<h3> med 2 </h3>
</section>
<section style="text-align:center">
<h3> did you take med 2 </h3>
</section>
</div>
</div>
</section>
</div>
</div>
</body>
<script type="text/javascript" src="lib/tau/js/tau.js"></script>
<script type="text/javascript" src="lib/tau/js/widget/virtuallist.js"></script>
<script src="app.js"></script>
</html>
app.js
( function () {
window.addEventListener( 'tizenhwkey', function( ev ) {
if( ev.keyName == "back" ) {
var page = document.getElementsByClassName( 'ui-page-active' )[0],
pageid = page ? page.id : "";
if( pageid === "main" ) {
tizen.application.getCurrentApplication().exit();
} else {
window.history.back();
}
}
} );
} () );
(function() {
var page = document.getElementById( "main" ),
changer = document.getElementById( "barsectionchanger" ),
sectionChanger, idx=1;
page.addEventListener( "pageshow", function() {
sectionChanger = new tau.SectionChanger(changer, {
circular: false,
orientation: "vertical",
scrollbar: "bar"
});
});
page.addEventListener( "pagehide", function() {
sectionChanger.destroy();
});
})();
(function() {
var underlayarray = document.getElementsByClassName( "barcontainer" ),
changerarray = document.getElementsByClassName( "hsectionchanger" ),
sectionChanger, idx=1;
for (i = 0; i < underlayarray.length; i++){
underlayarray[i].addEventListener( "pageshow", function() {
sectionChanger = new tau.SectionChanger(changerarray[i], {
circular: false,
orientation: "horizontal"
});
});
}
})();
Any insight into potential problems is appreciated. Thanks
Construction of SectionChanger widget not allow to put one widget instance inside another.
You should create another layout off aplliaction. For example you can use horizontal section changer on main level and vertical scrolled content in each section.
I fixed your code and now all section changers built correctly, but still are problems with working of widget.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<title>UITest</title>
<link rel="stylesheet" href="lib/tau/themes/default/tau.css">
</head>
<body>
<div class="ui-page ui-page-active" id="main">
<header class="ui-header">
<h2 class="ui-title">2 med(s) to take</h2>
</header>
<div id="barsectionchanger" class="ui-content">
<div>
<section class="hsectionchanger">
<div>
<section class="section-active" style="text-align:center">
<h3> med 1 </h3>
</section>
<section style="text-align:center">
<h3> did you take med 1 </h3>
</section>
</div>
</section>
<section class="hsectionchanger">
<div>
<section class="section-active" style="text-align:center">
<h3> med 2 </h3>
</section>
<section style="text-align:center">
<h3> did you take med 2 </h3>
</section>
</div>
</section>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="lib/tau/js/tau.js"></script>
<script>( function () {
window.addEventListener('tizenhwkey', function (ev) {
if (ev.keyName == "back") {
var page = document.getElementsByClassName('ui-page-active')[0],
pageid = page ? page.id : "";
if (pageid === "main") {
tizen.application.getCurrentApplication().exit();
} else {
window.history.back();
}
}
});
}() );
(function () {
var page = document.getElementById("main"),
changer = document.getElementById("barsectionchanger"),
sectionChanger, idx = 1;
page.addEventListener("pageshow", function () {
var changerarray = document.getElementsByClassName("hsectionchanger"),
i;
tau.widget.SectionChanger(changer, {
circular: false,
orientation: "vertical",
scrollbar: "bar",
items: changer.firstElementChild.children
});
for (i = 0; i < changerarray.length; i++) {
tau.widget.SectionChanger(changerarray[i], {
circular: false,
orientation: "horizontal"
});
}
});
page.addEventListener("pagehide", function () {
sectionChanger.destroy();
});
})();
</script>
</html>
On my Contact page I have a link to show an email form, which right now is just a header. I want the email form to hide whenever a different "page" is clicked on; however, right now it takes two clicks to get rid of the form. The form should only be visible on the Contact Page. I made a small testcase to illustrate the problem.
My code works, but only after you click a menu twice. I need help making it so I click a link once and it disappears.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creighton Barbershop</title>
<link href="style/main.css" rel="stylesheet">
<script src="js/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$("nav ul li").on("click", "a",
function(){
if ($("#contact").is(":hidden")) {
$(".contact_form").slideUp().hide();
};
$("div.main").slideUp();
$("div" + $(this).attr("href")).slideToggle().show().end();
event.preventDefault();
});
$("#email_link").click(
function(){
$(".contact_form").slideToggle();
event.preventDefault();
});
});
</script>
</head>
<body>
<div id="container">
<nav>
<ul>
<li>Home</li>
<li><span class="word_space">About Us</span></li>
<li><span class="word_space">Contact Us</span></li>
<li>Cuts</li>
</ul>
</nav>
<hr>
<div class="content">
<div class="main" id="home">
<h1>Home</h1>
</div>
<div class="main" id="contact">
Email Us
</div>
<div class="contact_form">
<h1>Contact Form</h1>
</div>
<div class="main" id="cuts">
<h2>These are the various cuts that Rob Ecklos Specializes in./n/n</h2>
</div>
</div>
</div>
</body>
</html>
you have to change a little thing in your html
just move the contact_form div inside contact div
let code like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creighton Barbershop</title>
<link href="style/main.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("nav ul li").on("click", "a",
function(){
if ($("#contact").is(":hidden")) {
$(".contact_form").slideUp().hide();
};
$("div.main").slideUp();
$("div" + $(this).attr("href")).slideToggle().show().end();
event.preventDefault();
});
$("#email_link").click(
function(){
$(".contact_form").slideToggle();
event.preventDefault();
});
});
</script>
</head>
<body>
<div id="container">
<nav>
<ul>
<li>Home</li>
<li><span class="word_space">About Us</span></li>
<li><span class="word_space">Contact Us</span></li>
<li>Cuts</li>
</ul>
</nav>
<hr>
<div class="content">
<div class="main" id="home">
<h1>Home</h1>
</div>
<div class="main" id="contact">
Email Us
<div class="contact_form">
<h1>Contact Form</h1>
</div>
</div>
<div class="main" id="cuts">
<h2>These are the various cuts that Rob Ecklos Specializes in./n/n</h2>
</div>
</div>
</div>
</body>
</html>
then remove the if statement form your jquery
<script>
$(document).ready(function(){
$("nav ul li").on("click", "a",
function(){
$(".contact_form").slideUp().hide();
$("div.main").slideUp();
$("div" + $(this).attr("href")).slideToggle().show().end();
event.preventDefault();
});
$("#email_link").click(
function(){
$(".contact_form").slideToggle();
event.preventDefault();
});
});
</script>
is(':visible') checks the display property of an element, you can use css method.
//Check the visiblity of #contact and hide accordangly
if ($("#contact").css('visibility') === 'hidden') {
$(".contact_form").slideUp().hide();
}
Im trying to use the jQuery plug in videoBG to have a video fill a top div of 100% width and height. I'd like the #top-video to fill the #top-content. The issue is that nothing is showing up. Any suggestions? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Dupont Studios</title>
<link href= 'style.css' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="waypoints.js"></script>
<script type="text/javascript" src="jquery.videoBG.js"></script>
<script>
$(function() {
// Do our DOM lookups beforehand
var nav_container = $(".nav-container");
var nav = $("nav");
nav_container.waypoint({
handler: function(direction) {
nav_container.toggleClass('sticky', direction=='down');
}
});
});
$('#top_video').videoBG({
mp4:'test.mp4',
scale:true,
zIndex:0
});
</script>
</head>
<body>
<div id = 'top-container'>
<div id = 'top-content'>
<div id = 'top-video'>
<span>Here is some text</span>
</div>
<div id = 'top-text'>
<div id = 'top-img'>
<img src='top-img.png' width = "600" height = '115'>
</div>
<h1 id = 'top-slogan'>A Video Production Studio</h1>
</div>
</div>
<div class = 'nav-container'>
<nav>
<div id = 'header-img'>
<img src='top-img.png' width = "450" height = '86.25'>
</div>
<div id = 'nav-items-container'>
<ul class = 'nav-items'>
<li class = 'nav-item'><a href='#'><b>w</b>hat</a></li>
<li class = 'nav-item'><a href='#'><b>h</b>ow</a></li>
<li class = 'nav-item'><a href='#'><b>w</b>hy</a></li>
<li class = 'nav-item'><a href='#'><b>w</b>here</a></li>
<li class = 'nav-item'><a href='#'><b>w</b>ho</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div id = 'main-container'>
<div id = 'main-content'>
<div id = 'main-content1'>
<section>
<h2>what we do</h2>
<p>We have built a boutique full service video producton studio quite literally in the heart of Dupont Circle.
Yes, our address is 21 Dupont Circle- we're racross from the south end of the dupont metro stop, right near the Krispy Kreme...mmm,good!</p>
<p>Unlike other video production studios, we have an exclusive focus on subscription based filming that
allows for organizations to build their brand and convey their ideas on a weekly, bi-weekly, or monthly basis.</p>
<p>
The benefits of subscription based video production allows us to more <mark class = 'blue-me'>deeply partner</mark> with our clients
and align interest for long term <mark class = 'blue-me'>strategic communication goals</mark>.
</p>
</section>
</div>
<div id = 'main-content2'>
<section>
<div id = 'video-text'>
<p>We have built a boutique full service video producton studio quite literally in the heart of Dupont Circle.
Yes, our address is 21 Dupont Circle- we're racross from the south end of the dupont metro stop, right near the Krispy Kreme...mmm,good!
</p>
</div>
<div id = 'video'>
<iframe src="http://player.vimeo.com/video/69176991?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</section>
</div>
<section>
<div id = 'picture'>
<img src='test.jpg' width = "1200" height = '800'>
</div>
</section>
</div>
</div>
</body>
</html>
shouldn't you be using #top-video as your selector instead of #top_video ?
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How can I use the HTML5 canvas element in IE?
I'm not sure what I'm doing wrong. I did what it said to do but nothing works. I'm using a grid system, but I don't think that's the problem. And I don't think it's my security settings either. Here's my HTML and Javascript if that helps.
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Zack Vivier</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
<!-- enable HTML5 elements in IE7+8 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- 1140px Grid styles for IE -->
<!--[if lte IE 9]><link rel="stylesheet" href="styles/ie.css" type="text/css" media="screen" /><![endif]-->
<link href="styles/styles.css" rel="stylesheet" type="text/css">
<link href="styles/1140.css" rel="stylesheet" type="text/css">
<!--css3-mediaqueries-js - http://code.google.com/p/css3-mediaqueries-js/ - Enables media queries in some unsupported browsers-->
<script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<script src="js/js.js"></script>
</head>
<body>
<header>
<h1 class="hidden">Zack Vivier Home</h1>
<div class="container">
<div class="row">
<div class="fivecol">
<div class="logo"><img src="images/logo.png" alt="zack vivier logo"></div>
</div>
<div class="sevencol last">
<nav>
<h2 class="hidden">Site Navigation</h2>
<ul>
<li>Home</li>
<li>Information</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="twelvecol last">
<div class="lineone"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="twelvecol last">
<div class="caption">
<h4 id="tagLine">Image Number</h4>
</div>
<div class="slideshow">
<canvas id='showCanvas' width='1022' height='397'>Canvas Not Supported</canvas>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="threecol last">
<div class="about"><h2>About Me</h2></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="twelvecol last">
<div class="linetwo"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="sevencol last">
<div class="contenthome">
<p> My Name is Zack Vivier; currently I am 19</p>
<p>years old and attend Fanshawe College for Interactive</p>
<p>Media Design and Production. I am a Designer,</p
<p>Programmer, Musician, Video Editor, and Animator.</p>
</div>
</div>
</div>
</div>
<h1 class="hidden">footer</h1>
<div class="container">
<div class="row">
<div class="twelvecol last">
<div class="footer">
<h3>Copyright © 2012 Zack Vivier. All Rights Reserved.</h3>
</div>
</div>
</div>
</div>
</body>
</html>
Javascript
// JavaScript Document
var imagePaths = new Array("images/photo_1.png", "images/game_web.jpg", "images/tattoo.jpg");
var whichImage = new Array("Graffti Project", "Game WebSite", "Tattoo Project");
var showCanvas;
var showCanvasCtx;
var imageText;
var currentImage = 0;
var currentImageText = 0;
var img = document.createElement("img");
function init() {
imageText=document.getElementById('tagLine');
showCanvas = document.getElementById('showCanvas');
showCanvasCtx = showCanvas.getContext('2d');
img.setAttribute('width','1022');
img.setAttribute('height','397');
switchImage();
setInterval(switchImage, 2500);
}
function switchImage() {
imageText.innerHTML = whichImage[currentImageText++];
img.setAttribute('src',imagePaths[currentImage++]);
img.onload = function() {
if (currentImage >= imagePaths.length) {
currentImage = 0;
currentImageText = 0;
}
showCanvasCtx.drawImage(img,0,0,1022,397);
}
window.onload = init();
Canvas is a HTML5 element which IE8 doesn't supports.
Your doctype is also wrong since you're using HTML5 set it to: "".
As said in the comments: IE8 won't support the canvas tag. However there are some plugins that mimic it's behavior. I've used this one once: http://flashcanvas.net/ and it does the job, there's another called http://code.google.com/p/explorercanvas/. but i have no comment on that one, never used, don't know what to expect.
Just one note: the fallbacks will have their limitations, but as far as 2D drawing concerns, I think these will work out for you