I have a kiosk that I'm preparing for a conference that uses a 27 inch iMac, OSX Lion. The browser is Chrome. I'm using a lightbox to display quicktime videos. The Lightbox I"m using is fancybox.
When a video appears in the lightbox, I've programmed the lightbox to be "full screen", which is the size of the monitor. But the QUICKTIME content is not fullscreen, it's just a window inside of a very large white lightbox.
When I right click the video, there is a FULLSCREEN option that gives me exactly what I want: the QuickTime content goes full screen, filling up the entire 27 inch Mac screen and it looks beautiful.
What I need is for the video to open fullscreen automatically without having to right click it, since this is for a conference and the users can't keep right clicking videos to make them work right.
Here is my code:
<div id="videocontainerone" style="display:none; position:relative; top:0px;">
<object width="2560" height="1240">
<param name="movie"
fullscreen="full"
quitwhendone="true"
value="videos/one.mov">
</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"> </param>
<embed
src="videos/one.mov"
fullscreen="full"
quitwhendone="true"
allowscriptaccess="always" allowfullscreen="true" width="2560" height="1240">
</embed>
</object>
</div>
The lightbox is opened by js, but my hunch is that what I need is actually tweaking the quicktime settings and/or embed options. But the js to open the video is simple:
in a document.ready I just do :
$(".fancybox").fancybox({
frameWidth: 2560,
frameHeight: 1240,
overlayShow: true,
overlayOpacity: 0.7
});
Any help would be appreciated ! Thank you in advance.
EDIT:
I have tried to create an .htaccess file and a .qtl file , as instructed in this 2006 article:
http://www.kenvillines.com/archives/82.html
and it DOES pull up the movie but still no automatic fullscreen.
Anyone who answers this will get a beer !
Thanks.
So I found the answer. In a nutshell:
Works by putting target videos in display:none divs and using an href to link to #videoone , #videotwo, etc for the various videos, and doing that with the fancybox plugin.
I changed the video format to HTML5 since its running inside of a kiosk.
For the fullscreen effect, I'm using element.webkitRequestFullScreen(); on the html5 video element itself, which still uses the fancybox but puts it fullscreen ( and I mean the VIDEO ITSELF is fullscreen, which is what I wanted ).
I'm posting the code of the entire page here : ( I hope I get the indentation right , I usually don't post THIS much code, but it's useful. ) .... Hopefully this will help someone.
<!doctype html>
<html>
<head>
<link rel=stylesheet href="style.css" type="text/css" media=screen>
<!-- Add jQuery library -->
<script type="text/javascript" src="javascript/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"> </script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.1" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.1"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.4"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.4"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
console.log(element);
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}
</script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
var videotimer
$(".fancybox").fancybox({
frameWidth: 2560,
frameHeight: 1240,
overlayShow: true,
overlayOpacity: 0.7
});
$(document).keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
console.log("key pressed is "+keycode);
if(keycode == '13'){
closeWindow();
}
});
$("a.fancybox").click(function() {
//get the name of the video from the parent div
videoname = $(this).parents("div:first").attr("id");
link = '"videos/'+videoname+'.mov'+'"'
tag = $(this).attr("href");
videotimer=setTimeout(function() { closeWindow(); },$(this).attr("id"));
videotimer=setTimeout(function() { playVideo(tag); },3);
});
$(".fancybox-close").live("click", function(){
console.log(videotimer) ;
clearTimeout(videotimer);
});
});//end document.ready
function closeWindow(){
console.log("video closed");
document.webkitCancelFullScreen();
parent.$.fancybox.close();
clearTimeout(videotimer);
}
function playVideo(tag){
console.log ("tag is "+tag);
$(tag).find('video').get(0).currentTime=0;
$(tag).find('video').get(0).play();
}
</script>
<!--div id="top_bar"></div-->
<div id="container">
<div id="top_bg">
<div id="header">
<img src="images/logo.png" alt="logo" />
<br />
<br />
<span class="gotham"> 6 Reasons </span>
<span class="gothamthin">we rock <sup>TM</sup>.
</span>
<!--a class="fancybox" rel="group" href="images/one.jpg"> <img width="25" height="25" src="images/logo.png" alt="" /></a-->
</div>
<div id="reasons_container">
<div class="sub_row">
<div id="play_all">
<a id="994000" class="highlight fancybox"
href="#videocontainerall"
onclick="goFullscreen('vidall')">play all</a>
</div>
</div>
<div class="reasons_row">
<div id="one" class="home_box featured_box">
<a id="9000" class="fancybox rollover_one rollover" rel="group" href="#videocontainerone" onclick="goFullscreen('vidone')">
<span class="reasontext reasontext1">REASON 1</span>
<span class="reasontext reasontext2">etc</span>
<span class="reasontext reasontext3">etc</span>
<span class="reasontext reasontext4">PLAY</span>
</a>
</div>
<div id ="two" class="home_box featured_box">
<a id="5000" class="fancybox rollover_one rollover" rel="group" href="#videocontainertwo"
onclick="goFullscreen('vidtwo')">
<span class="reasontext reasontext1">REASON 2</span>
<span class="reasontext reasontext2">etc</span>
<span class="reasontext reasontext3">etc</span>
<span class="reasontext reasontext4">PLAY</span>
</a>
</div>
<div id="three" class="home_box featured_box">
<a id="5000" class="fancybox rollover_one rollover" rel="group"
onclick="goFullscreen('vidthree')"
href="#videocontainerthree">
<span class="reasontext reasontext1">REASON 3</span>
<span class="reasontext reasontext2">etc</span>
<span class="reasontext reasontext3">etc</span>
<span class="reasontext reasontext4">PLAY</span>
</a>
</div>
</div><!-- end reasons row -->
<div class="reasons_row">
<div id="four" class="home_box featured_box">
<a id="5000" class="fancybox rollover_one rollover" rel="group" href="#videocontainerfour"
onclick="goFullscreen('vidfour')">
<span class="reasontext reasontext1">REASON 4</span>
<span class="reasontext reasontext2">etc</span>
<span class="reasontext reasontext3">etc</span>
<span class="reasontext reasontext4">PLAY</span>
</a>
</div>
<div id="five" class="home_box featured_box">
<a id="5000" class="fancybox rollover_one rollover" rel="group" href="#videocontainerfive"
onclick="goFullscreen('vidfive')">
<span class="reasontext reasontext1">REASON 5</span>
<span class="reasontext reasontext2">etc</span>
<span class="reasontext reasontext3">etc</span>
<span class="reasontext reasontext4">PLAY</span>
</a>
</div>
<div id="six" class="home_box featured_box">
<a id="5000" class="fancybox rollover_one rollover" rel="group" href="#videocontainersix"
onclick="goFullscreen('vidsix')">
<span class="reasontext reasontext1">REASON 6</span>
<span class="reasontext reasontext2">etc</span>
<span class="reasontext reasontext3">etc<sup>TM</sup></span>
<span class="reasontext reasontext4">PLAY</span>
</a>
</div>
</div><!-- end reasons row -->
</div><!-- end reasons container -->
</div><!-- end top bg -->
</div>
<div id="footer">
<div style="float:center; position:relative; margin:20px"> OUR PARTNERSHIPS </div>
<br />
<div id="partnerships_container">
<img src="images/logos.jpeg" />
</div>
</div><!-- end footer -->
<!-- The Video Objects -->
<!-- The Video Objects -->
<div id="videocontainerone" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidone" class="player" >
<source src="videos/one.mov" type="video/mp4" >
</video>
</div>
</div>
<div id="videocontainertwo" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidtwo" class="player" >
<source src="videos/two.mov" type="video/mp4" >
</video>
</div>
</div>
<div id="videocontainerthree" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidthree" class="player" >
<source src="videos/three.mov" type="video/mp4" >
</video>
</div>
</div>
<div id="videocontainerfour" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidfour" class="player" >
<source src="videos/four.mov" type="video/mp4" >
</video>
</div>
</div>
<div id="videocontainerfive" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidfive" class="player" >
<source src="videos/five.mov" type="video/mp4" >
</video>
</div>
</div>
<div id="videocontainersix" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidsix" class="player" >
<source src="videos/six.mov" type="video/mp4" >
</video>
</div>
</div>
<div id="videocontainerall" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidall" class="player" >
<source src="videos/all.mov" type="video/mp4" >
</video>
</div>
</div>
<!-- END The Video Objects -->
<!-- END The Video Objects -->
</body>
</html>
Related
Hiya people i was hoping for some help for no reason the controls on chrome do not appear but they do on mozilla and IEcrappycrap do you have any idea about what could do it , i'm using a 360VR player (Bitmovin) dunno if it could have a link but when i take off the bitmovin player embed in a div , the controls works ...
<body onload="Onload()">
<div id="background">
<img id="bg" class="bg" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Bg_m.jpg" style="position:absolute;"/>
<img id="redirection" class="redi" onclick="Redirection()" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/btn_1.gif" style="cursor:pointer;position:absolute;"/>
</div>
<div id="container">
<a href="javascript:;" onClick="Bandeau(1);" > <img id="bandeau_top" class="bandeau" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Pub_haut_m.jpg" style="position:absolute;"/></a>
<img id="Fleche_G" class="fleche" onclick="Left()" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/fleche_gauche_m.png" style="position:absolute;"/>
<img id="Fleche_D" class="fleche" onclick="Right()" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/fleche_droite_m.png" style="position:absolute;"/>
<div class="content">
<div class="player-wrapper">
<div id="playerDiv">
//bitmovinplayerembed here
</div>
</div>
</div>
<iframe name="__bkframe" height="0" width="0" frameborder="0" style="display:none;position:absolute;clip:rect(0px 0px 0px 0px)" src="about:blank"></iframe>
<video id="video1" controls preload="none" onclick="Stop()" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/ours.mp4" style="position:absolute;"></video>
<img id="Video_played" class="Video" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/dark.gif" style="position:absolute;"/>
<div id="Choix">
<a href="javascript:;" onClick="Play(1);" > <img id="Vid_1" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Vignette1_produit1_m.jpg" style="position:absolute;"/></a>
<a href="javascript:;" onClick="Play(2);" ><img id="Vid_2" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Vignette2_produit2_m.jpg" style="position:absolute;"/></a>
<a href="javascript:;" onClick="Play(3);" ><img id="Vid_3" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Vignette3_film_m.jpg" style="position:absolute;"/></a>
<a href="javascript:;" onClick="Play(4);" ><img id="Vid_4" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Vignette4_betisier_m.jpg" style="position:absolute;"/></a>
<a href="javascript:;" onClick="Play360(360);" ><img id="Vid_5" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Vignette5_360_m.jpg" style="position:absolute;"/></a>
<img id="text_video" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/text360_m.png" style="position:absolute;"/>
</div>
<div id="Jeu_container">
<img id="Jeu_played" class="Jeu" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Jeu_m.jpg" style="visibility:hidden;position:absolute;"/>
<iframe id="iframe" src="http://www.jeubignoel.com/"></iframe>
</div>
<a href="javascript:;" onClick="Bandeau(2);" ><img id="bandeau_bot" class="bandeau" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Orange/Orange2/Pub_bas_m.jpg" style="position:absolute;"/></a>
<p id="mention2">
Big = grand
</p>
<p id="mention">
</p>
<img id="track" src="http://slpubmedias.tf1.fr/test_nocache/test_jf/BlindSpot/Desktop/empty.png" style="position:absolute;">
</div>
The Bitmovin Player explicitly hid Chrome's native video element controls using CSS. Instead of hiding just the one of the used video element, it did this for all video elements on the website. This has been fixed in version 7 of the player, so you should not experience this problem anymore with the latest stable version.
i used toggle to hide paragraph through a video but i do not run
<div class="site-slider">
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="overlay"></div>
<video id="video_background" preload="auto" autoplay="true" loop="loop" volume="0" width="100%">
<source src="video.mp4" type="video/mp4"> Video not supported
</video>
<div class="slider-caption ">
<div class="hide">
<h2>Marketing Solutions Company</h2>
<p>feeling special</p>
</div>
<a href="#" class="slider-btn" id="polina onclick=" toggleContent()>Pause</a> </a>
</div>
</li>
</ul>
</div>
<!-- /.flexslider -->
</div>
<!-- /.slider -->
</div>
<!-- /.site-slider -->
</div>
how i can show this paragraph when i paused the video because i use display:none
This Line Needs to be:
Pause
There was one closing Tag to much and the `"? was missing behind the onClick Event.
But there are several other invalid HTML Tags too.
The <source> Tag doesn't gets closed for example.
If the code still does'nt work after correcting all HTML Markup please Post your Javascript Code as well.
I am trying to recreate the video controls as such that it appears as text and only appears on hover, exactly the same as the videos hosted in this website: http://www.brownsdesign.com/work/, any idea how. I've got the text, but it is not functioning as a playpause button. Any help is appreciated. Thanks.
html:
<div class="item chopsticks hamburger shake">
<video class="noauto" loop="loop" controls="controls" poster="images/27890.jpg" height="auto" width="300">
<source src="videos/b_cs.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"></source>
<img src="images/27890.jpg" alt="" />
</video>
<div class="controller" style="display:none;">
<div class="controlContainer">
<a class="vidPlay" style="cursor: pointer;">Play</a>
<a class="vidPause" style="cursor: pointer;">Pause</a>
<a class="vidStop" style="cursor: pointer;">Stop</a>
</div> <!-- end .controlContainer -->
</div> <!-- end .controller -->
</div> <!-- end .item chopsticks hamburger shake -->
So why not use jQuery?
$('.item').hover(function() {
$('.controller').slideDown();
}, function() {
$('.controller').slideUp();
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>USLI Intranet</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="Style_sheets/front_menu_new.css" rel="stylesheet" type="text/css">
<script src="slider_omg/js/swfobject_modified.js" type="text/javascript"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Tabbed jQuery slideshow</title>
<link rel="stylesheet" href="slider_omg/css/slideshow.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="slider_omg/js/jquery.cycle.js"></script>
<script type="text/javascript" src="slider_omg/js/slideshow.js"></script>
<link href="benefitsnew/main.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {font-size: 12px}
.style5 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999999;
}
.style6 {color: #999999}
a {
font-family: Arial, Helvetica, sans-serif;
/*font-size: 12px;*/
color: #003698;
}
a:visited {
color: #003698;
}
a:hover {
color: #E06B00;
}
.active{
background-color: #004499;
}
#leftThird{
float:left;
width:570px;
}
#rightThird{
float:right;
width:131px;
position:relative;
text-align:left;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div class="left" ><img src="Pics/LOGO-AND-TAGLINE.gif" border = "0"/></div>
<div class="right">
<p> 1190 Devon Park Drive • Wayne, PA 19087<br />
888-523-5545 </p>
<form class="zoom_searchform" action="http://intranet.usli.com/Search2/search.asp" method="get">
<input type="text" maxlength="255" class="zoom_searchbox" size="18" name="zoom_query" value="Search our Site" onBlur="if (this.value == '') {this.value = 'Search Our Site';}"onFocus="this.value='';" />
<input type="submit" class="button" name="search" value="Find" />
</form>
</div>
</div>
<div id="menu">
<ul id="oldtopmenu">
<li><a href="../5CommunityGoals/5CommunityGoals.htm">Five Community<br />
Goals</a></li>
<li><a href="../UnderwritingTools/UnderwritingTools.htm">Underwriting<br />
Tools</a></li>
<li><a href="../PersonalDevelopment/pdc2.htm">Personal<br />
Development Team</a></li>
<li><a href="../Company Story/CompanyStory.htm">Company<br />
Story</a></li>
<li><a href="../LeadershipwithHeart/LeadershipwithHeart.htm">Leadership<br />
with Heart</a></li>
<li><a href="../BusinessCodeEthics/BusinessCodeEthics.htm">Business Code<br />
& Ethics</a></li>
<li><a href="../BranchOffices/Branch-Offices.html">Branch<br />
Offices</a></li>
<li ><a href="../CommunityTeams/CommunityTeams_landing_page.html">Community<br />
Teams</a></li>
<li><a href="../Forms/ServiceRequestForms.htm" style="padding:5px 16px;">Service<br />
Request Forms</a></li>
</ul>
<ul id="oldbotmenu">
<li><a class=" active " href="../index.htm">Home</a></li>
<li>Public Website</li>
<li class="double-line "><a href="../EmergencyResponse/EmergencyResponse.htm">Emergency Response /<br />
Staffing Plan</a></li>
<li class="double-line"><a href="../CareerOpportunities/CareerOpportunities.htm">Career<br />
Opportunities</a></li>
<li class="double-line"><a href="../PhoneList.htm">Community Mtg.<br />
Presentation</a></li>
<li class="double-line"><a href="../StaffLocator/StaffLocator_Pictures.htm">Phone List /<br />
People Search</a></li>
<li>Remembrance</li>
<li>Resources</li>
</ul>
</div>
<div id="content">
<div id="leftThird" >
<!--ZOOMSEARCH-->
<!--<div class="webexlink">
<p style="background-image: url(./Pics/frontpage/uslipinkbanner.jpg); width:445px; height:99px; padding-left: 75px; padding-top:10px; font-family:Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; color: #FFFFFF; margin-left:0px;">Support Breast Cancer Awareness. Learn More >></p></div>-->
<p>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="505" height="290" id="FlashID" title="USLI slideshow">
<param name="movie" value="ImageRotator.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="8.0.35.0">
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="../Scripts/expressInstall.swf">
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="ImageRotator.swf" width="505" height="290">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="8.0.35.0">
<param name="expressinstall" value="../Scripts/expressInstall.swf">
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<br>
</p>
<p><a href="http://www.usli.com/community"><img src="Pics/frontpage/communityportal.jpg" alt="" name="" width="520" height="115" usemap="#Map" border="0">
<map name="Map">
<area shape="rect" coords="266,2,519,112" href="http://www.usli.com/community" target="_blank">
<area shape="rect" coords="5,2,258,112" href="http://www.usli.com/community/docs/CourseCatalogforFamilies_2014.pdf" target="_blank">
</map>
</a> </p>
<div class="pdc">Community Updates</div>
<div id="slideshow">
<div class="slides">
<ul>
<li id="slide-one">
<h2 id="headline_new">Bring Your Benefits Home!<img src="slider_omg/images/slide_image_benefits.png" width="200" height="163" border="0" class="new_slider_image"><br>
</h2>
<p class="inside_text">Did you know you can access your benefit information and much more from home? Visit www.usli.com/community >><br>
<br>
You can also sign up for any of the classes in the "Benefit Workshop Series" to learn<br>
more about what is available to you through our benefits. <br>
<br>
<br>
</p>
</li>
<li id="slide-two">
<h2 id="headline_new">Security Awareness<img src="slider_omg/images/slide_image_facilities.png" width="200" height="162" border="0" class="new_slider_image"><br>
</h2>
<p class="inside_text"><span class="intranet_font">Remember that we can make a difference when it comes to keeping USLI safe. Follow these guidelines to ensure your safety.<br>
<br>
View the "Surviving a Shooting" video as well to learn about three things you can do to make a difference. </span><br>
</p>
</li>
<li id="slide-three">
<h2 id="headline_new">Snap to It!<img src="slider_omg/images/slide_image_graphics.png" width="193" height="162" border="0" class="new_slider_image"><br>
</h2>
<p class="body_font"> If you’ve been meaning to hit the refresh button on your intranet photo or even better, take a more professional photo to improve your LinkedIn account, you’re in luck! Join us monthly for a quick private session. Register >><br>
</p>
<p><br>
</p>
</li>
<li id="slide-four">
<h2 id="headline_new"><strong>People's College for your<img src="slider_omg/images/slide_image_pdc.png" width="200" height="164" border="0" class="new_slider_image"><br>
family! </strong></h2>
<p> <span class="body_font">Our classes are open to family members!<br>
Tell your family members to register here >><br>
<br>
May course schedule is here! >></span><br />
</p>
</li>
<li id="slide-five">
<h2 id="headline_new">It's May in Slainte!<img src="slider_omg/images/slide_image_slainte.png" width="210" height="162" border="0"class="new_slider_image"><br>
</h2>
<p><span class="body_font"><strong>Check out the May calendar!</strong><br>
Did you know you can get $150 back through the Healthy Lifestyles reimbursement? Learn more about this opportunity!</span><br>
<br>
<br>
<br>
<br />
</p>
</li>
<li id="slide-six">
<h2 class="inside_text" id="headline_new"><strong>Join the USLI Helping Hands<strong><strong><img src="slider_omg/images/slide_image_spirit.png" width="193" height="162" border="0" class="new_slider_image"></strong></strong><br>
Committee<br>
</strong></h2>
<p> <span class="body_font">Our community stands behind those in need and lends a helping hand in many ways. <br>
<strong>Find Out More >></strong></span><br>
<br>
<a href="PersonalDevelopment/CommunitySpirit/PaintingLaSalleAcademy/index.html" target="_blank"><br>
</a><br>
<br>
</p>
<br>
<br />
</li>
<!-- <li id="slide-seven">
<h2 id="headline_new">Customer Conferences: Help<br>
Needed for 2014<img src="slider_omg/images/slide_image_corporateevents.png" width="198" height="162" border="0"class="new_slider_image"><br>
</h2>
<p> <span class="body_font">If you would be interested in greeting customers the morning of the conference or being a driver (picking up/dropping off at Applebrook, the airport, train station, etc.) for 2014, please contact Caitlyn (x2432) or Laurel (x2188). Read our blog. >></span> <br />
</p>
</li>-->
</ul>
</div>
<ul class="slides-nav">
<li class="on"><a href="#slide-one">Benefits<br>
<br>
</a></li>
<li><a href="#slide-two">Facilities<br>
<br>
</a></li>
<li> <a href="#slide-three">Graphics &<br>
Social Media</a> </li>
<li><a href="#slide-four">People's<br>
College <br>
</a></li>
<li><a href="#slide-five">Slainte<br>
<br>
</a></li>
<li><a href="#slide-six">CommunitySpirit / <br>
Reception <br>
</a></li>
<!-- <li>
<a href="#slide-seven">Corporate<br>
Events</a></li>-->
</ul>
</div>
</div>
<div id = "rightThird">
<div class="japan"><a href="http://intranet.usli.com:2012/StaffLocator/"> People<br>
Locator </a> </div>
<div class="rollover"><a href="https://www.google.com/calendar/embed?src=uslievents#gmail.com&ctz=America/New_York" target="_blank">USLI Events<br>
Calendar</a> </div>
<div class="menu"> <a href="Dearcadh.htm">Today's Cafe<br>
Selection </a> </div>
<div class="id"> <a href="http://intranet.usli.com/HelpDesk">Service <br>
Request<br>
</a> </div>
<div class="meeting"> <a href="http://intranet.usli.com/Scheduler/SchedulerHome.aspx">Class<br>
Registration</a> </div>
<div class="healthwellness"></div>
<!--<div class="nothingbutnets">
</div>-->
<!-- <div class="corpevents"></div>-->
<div class="oped"> <a href="http://successfulstudents.usli.com/" target="_blank" class="oped">Successful<br>
Student Blog</a></div>
<div class="news"> <a href="http://newsletter.usli.com" target="_blank">Customer<br>
Newsletter</a> </div>
<div class="spanishword"> <a href="PDFs/Spanishwordoftheweek.pdf" target="_blank">Spanish Word <br>
of the Week</a> </div>
<div class="care2wear"> <a href="CARE2/Care2WearGearEntrance.html" target="_blank">CARE2WEAR<br>
GEAR </a> </div>
<div class="julia"> Slainte Fitness Schedule </div>
</div>
</div>
</div>
<table width="750" border="0">
<tr>
<td height="93"> </td>
</tr>
</table>
<div id="Layer7" ></div>
<div id="Layer8" ></div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
<br>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8410742-9");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
This is the html for my webpage and it works fine in chrome. However in IE it does not show anything at all. Below is the html code that IE spits out in it's developer tools.
<!-- saved from url=(0044)file://\\intranetdev1\intranet\indexNew.html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- Generated by F12 developer tools. This might not be an accurate representation of the original source file -->
<HTML><HEAD><TITLE>USLI Intranet</TITLE>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<SCRIPT type=text/javascript src="Scripts/swfobject_modified.js"></SCRIPT>
<LINK rel=stylesheet type=text/css href="Style_sheets/front_menu_new.css">
<SCRIPT type=text/javascript src="slider_omg/js/swfobject_modified.js"></SCRIPT>
<SCRIPT id=__ie_ondomload defer src="//:"></SCRIPT>
<LINK rel=stylesheet type=text/css href="slider_omg/css/slideshow.css" media=screen>
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="slider_omg/js/jquery.cycle.js"></SCRIPT>
<SCRIPT type=text/javascript src="slider_omg/js/slideshow.js"></SCRIPT>
<LINK rel=stylesheet type=text/css href="benefitsnew/main.css">
<STYLE type=text/css>.style1 {
FONT-FAMILY: Arial, Helvetica, sans-serif
}
.style2 {
FONT-SIZE: 12px
}
.style5 {
FONT-SIZE: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; COLOR: #999999
}
.style6 {
COLOR: #999999
}
A {
FONT-FAMILY: Arial, Helvetica, sans-serif; COLOR: #003698
}
A:visited {
COLOR: #003698
}
A:hover {
COLOR: #e06b00
}
.active {
BACKGROUND-COLOR: #004499
}
#leftThird {
FLOAT: left; WIDTH: 570px
}
#rightThird {
POSITION: relative; FLOAT: right; TEXT-ALIGN: left; WIDTH: 131px
}
UNKNOWN {
}
UNKNOWN {
}
UNKNOWN {
}
</STYLE>
</HEAD>
<BODY class=js></BODY></HTML>
I am not sure why it automatically closes the body tag without the rest of the content. I also do not know where the class="js" is coming from. I have made sure that div tags are all lined up and shouldn't be causing the problem. I believe all tags having closing tags. I can provide links to all source files if needed. Just wondering if anybody has come across this themselves.
Thanks!
Upon further review of what IE is doing to your document, I'm confident that this is in fact the answer.
You have the massively outdated practice of "commenting out" your stylesheet so that older browsers ignore it. But really, no browser needs that any more.
But the point is, you're starting an HTML comment, but you forgot to end it. This is effectively commenting out your entire document. Chrome is being "clever" and fixing the issue for you, but Internet Explorer is being pedantic and correct by refusing the rest of the content.
I would suggest just removing the <!-- from your <style> element. As I said, it's not needed.
For future reference, this is a simple way, to find what's going on with your html, when something like this happens.
Go to http://validator.w3.org and select validate by URI, file upload or direct input. Click check!
Now, you should find the errors and a small description explaining what's going on!
In this particular case you've got at least 22 Errors and 25 warning(s).
But the main reason why you're not able to see BODY is because you left
<!-- on line 21 just after the style declaration
and never closed it.`
how to set the position of div tag like table in proper order.
<html>
<head><title> .</title>
<link rel="stylesheet" type="text/css" href="style/main.css"/>
<script type="text/javascript" src="script/ajax.js"></script>
<script type="text/javascript" src="script/validate.js"></script>
<script type="text/javascript" src="script/date-picker.js"></script>
</head>
<body>
<div onclick="show_tb()"style="width:70%;float:left;" class="title_mrwat" >
NEW MARWAT OIL TRANSPORTER
</div>
<div style="width:30%;float:right;">
<address>
Address:P/O Box 564, Landekotal Peshawar<br />
Phone: +12 34 56 78
</address>
</div>
<div style="width:50%;float:left;">
<img src="images/pso.jpg" height="45" width="45" />
<img src="images/total.jpg" height="50" width="55" />
<img src="images/shell.jpg" height="50" width="45" />
<img src="images/caltex.jpg" height="35" width="35" />
<img src="images/attock.jpg" height="40" width="40" />
</div>
<div style="width:50%;float:right;"id="tb">
<input type="button" value="product"onmouseover="className='menuon';" onmouseout="className='menuoff';" onclick="loadXMLDoc('product/','formTag' ,'')" value="product">
<input type="button" value="owner" onclick="loadXMLDoc('owner/','formTag')" value="shipment" onmouseover="className='menuon';" onmouseout="className='menuoff';">
<input type="button" onclick="loadXMLDoc('vehicle/','formTag')" value="vehicle" onmouseover="className='menuon';" onmouseout="className='menuoff';">
<input type="button" onclick="loadXMLDoc('route/','formTag')" value="route" onmouseover="className='menuon';" onmouseout="className='menuoff';">
<input type="button" value="shipment" onclick="loadXMLDoc('ship/','formTag')" value="shipment" onmouseover="className='menuon';" onmouseout="className='menuoff';">
<input type="button" id="bt" value="report" onclick="show_form()" style="background-color:#E6E6DC;" >
</div>
<div id="responseTag" class="show_rpt" style="width:100%;">
</div>
<div id="div_added" class="div_add">
</div>
<div id="formTag">
</div>
</body>
</html>
Use the same float direction for all divs.
<div style="width:50%;float:left"> first </div>
<div style="width:50%;float:left"> second </div>
will create two divs floating. However you need to be careful with width: 50%, it may not work. And you need to break floating after each "row" with clear: left/right/both.
You can change the display type of the <div> with CSS
display:table;
By default a <div> is a block element which would be this in CSS
display:block;
You would probably need to put <div>'s for <tr>'s and <td>'s in there as well