I would like to change the source of the image element with the id of "front". I have a basic script at the top, but it doesn't work. I was just attempting to come up with something but I'm very bad at JavaScript.
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="home.js"></script>
<script type="text/javascript">
var reswidth=screen.width;
if (reswidth<400){
var x = document.getElementsById("front");
x.src="../images/colbysmall.png"
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="header">
<div class="navigation">
<ul>
<li><a id="home" href="">Home</a></li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
<li></li>
</ul>
</div>
<div class="yellow"></div>
<div class="x"></div>
</div>
</head>
<body>
<div class="website">
<div class="logo"></div>
<img src="../images/ColbyFaceblack.jpg" id="front" width="100%" >
<div class="content">
<div class="menu"></div>
<div class="office"></div>
</div>
<div class="body2">
<img src="../images/simple_dashed_full.png" width="100%">
<div class="weboutline">
<img src="../images/web_outline.png" width="100%">
</div>
<div class="body2img2">
<img src="../images/portfolio.png" width="100%">
</div>
<div class="body2img3">
<img src="../images/blog.png" width="100%">
</div>
</div>
<div class="body3">
<img src="../images/body.png" width="100%">
<img class="touch" src="../images/get_in_touch_beige.png" width="50%">
</div>
<footer>
<img src="../images/footer.png" width="100%">
<div class="copyright"> copyright COLBY MOFFETT 2015 </div>
<div class="facebook"></div>
<div class="instagram"></div>
<div class="twitter"></div>
</footer>
</body>
</div>
</html>
This is right, but has to be executed on change of screen size:
$(function () {
$(window).resize(function () {
var reswidth=screen.width;
if (reswidth<400){
var x = document.getElementsById("front");
x.src="../images/colbysmall.png"
}
});
});
Also make sure you execute it inside the $(function () { }); to execute on the DOM loaded contents. So, to make sure it also executes when it gets loaded, you need to store it in a named function and execute it every time when the window is resized.
Your final code will be:
$(function () {
var reszWindow = function () {
var reswidth=screen.width;
if (reswidth<400){
var x = document.getElementsById("front");
x.src="../images/colbysmall.png"
}
};
reszWindow();
$(window).resize(reszWindow);
});
Since you are already using jQuery, the following could be one of the solutions:
$( window ).resize(function() {
if($( window ).width() < 400) {
$("img#front").attr("src","../images/colbysmall.png");
} else {
$("img#front").attr("src","../images/ColbyFaceblack.jpg");
}
});
(PS. Untested code) :)
changing image according to screen resolution:
$(window).resize(function() {
var scrWidth = $(window).width();
if(scrWidth < 500){
$('#myImage').attr('src', 'http://wallpaper-download.net/wallpapers/logo-wallpapers-google-chrome-background-wallpaper-33143.jpg');
}
if(scrWidth > 500){
$('#myImage').attr('src', 'http://www.bhmpics.com/download/google_colorful_background-1920x1080.jpg');
}
});
(random images from google)
Fiddle here: http://jsfiddle.net/59ehtLde/
Javascript aside, you can do this with just HTML5. Browser support isn't great, but isn't bad, either.
<picture>
<source media="(min-width: 400px)" srcset="../images/colbysmall.png">
<img src="../images/ColbyFaceblack.jpg">
</picture>
<p>With placeholders:</p>
<picture>
<source media="(min-width: 400px)" srcset="http://placehold.it/400?text=colbyfaceblack">
<img src="http://placehold.it/200?text=colbysmall">
</picture>
Related
I have a toggle that is responsible for changing the color palette of the website as well as some key images. The code works well however I notice that if I visit the site from a computer that I have not used before the key images take a long time to change when the toggle is clicked on.
The main issue is the "sun"/"moon" and "click here" image. I wonder if there is a way to run javascript faster? maybe by changing the positioning of the script or some other trick that I am not aware of. I'll post the website below and all the code, if anyone can point me to some documentation I can read on this or another helpful resource I would very much appreciate it. Love you guys.
Website:
mattmoracoding.com
let darkMode = localStorage.getItem('darkMode');
const darkModeToggle = document.querySelector('#dark-mode-toggle');
const enableDarkMode = () => {
document.body.classList.add('darkmode');
localStorage.setItem('darkMode', 'enabled');
darkModeToggle.src = "Images/sun.png"
click.src = "Images/click-here-dark.png"
clock1.src = "Images/clock-dark.png"
clock2.src = "Images/clock-dark.png"
clock3.src = "Images/clock-dark.png"
currency1.src = "Images/currency-dark.png"
currency2.src = "Images/currency-dark.png"
currency3.src = "Images/currency-dark.png"
scrollUp.src = "Images/scroll-dark.png"
}
const disableDarkMode = () => {
document.body.classList.remove('darkmode');
localStorage.setItem('darkMode', null);
darkModeToggle.src = "Images/moon.png"
click.src = "Images/click-here-light.png"
clock1.src = "Images/clock-light-small.png"
clock2.src = "Images/clock-light-medium.png"
clock3.src = "Images/clock-light-large.png"
currency1.src = "Images/currency-light-small.png"
currency2.src = "Images/currency-light-medium.png"
currency3.src = "Images/currency-light-large.png"
scrollUp.src = "Images/scroll-light.png"
}
if (darkMode === 'enabled') {
enableDarkMode();
}
darkModeToggle.addEventListener('click', () => {
darkMode = localStorage.getItem('darkMode');
if (darkMode !== 'enabled') {
enableDarkMode();
} else {
disableDarkMode();
}
});
// ---------------------- Scroll Up ----------------------//
const scrollBtn = document.getElementById("scrollUp");
scrollBtn.addEventListener("click", () => {
document.documentElement.scrollTop= 0;
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Matt Mora Coding</title>
<link rel="stylesheet" href="CSS/index.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght#300&family=Playfair+Display:wght#500&family=Roboto+Slab:wght#500&display=swap" rel="stylesheet">
<script src="Scripts/index.js" async></script>
</head>
<!--------------------------------------Wrapper------------------------------------>
<section class="wrapper">
<!-----------------------------------Navigation---------------------------------->
<div class="logo">
MM
</div>
<div class="nav">
Home About Contact
</div>
<div class="click-here">
<img src="Images/click-here-light.png" Id="click" alt="click here">
</div>
<!--------------------------------Dark/Light Mode-------------------------------->
<img src="Images/moon.png" id="dark-mode-toggle" class="dark-mode-toggle">
<!-------------------------------------Hero-------------------------------------->
<div class="hero-title">
<h1>Hey, I'm Matt Mora</h1>
</div>
<div class="hero-body">
<p>I'm a front end developer.</p>
</div>
<div class="hero-social">
TW GH LI
</div>
<div class="hero-image-small">
<img src="Images/me-small.png" alt="Handsome Guy" />
</div>
<div class="hero-image-medium">
<img src="Images/me-medium.png" alt="Handsome Guy" />
</div>
<div class="hero-image-large">
<img src="Images/me-large.png" alt="Handsome Guy" />
</div>
<!--------------------------------Section CTA----------------------------------->
<div class="cta-banner"></div>
<div class="cta-text-small">
<p>Checkout my work!</p>
</div>
<div class="cta-text">
<p>Checkout some of the things I'm working on!</p>
</div>
<!---------------------------------Project1------------------------------------->
<div class="project1-small">
<img src="Images/clock-light-small.png" id="clock1" alt="Clock"/>
</div>
<div class="project1-medium">
<img src="Images/clock-light-medium.png" id="clock2" alt="Clock"/>
</div>
<div class="project1-large">
<img src="Images/clock-light-large.png" id="clock3" alt="Clock"/>
</div>
<div class="project1-title">
<h1>Clock</h1>
</div>
<div class="project1-body">
<p>I built this clock as a warm up project to gain experience using HTML and
more advance css.</p>
<p>This project taught me how to write more advance CSS and to structure
HTML in a simple way.</p>
</div>
<div class="languages1">
<img src="Images/html.png" alt="HTML"/>
<img src="Images/css.png" alt="CSS"/>
</div>
<!---------------------------------Project2------------------------------------->
<div class="project2-small" >
<img src="Images/currency-light-small.png" alt="Currency Converter" id="currency1"/>
</div>
<div class="project2-medium" >
<img src="Images/currency-light-medium.png" alt="Currency Converter" id="currency2"/>
</div>
<div class="project2-large" >
<img src="Images/currency-light-large.png" alt="Currency Converter" id="currency3"/>
</div>
<div class="project2-title">
<h1>Currency Converter</h1>
</div>
<div class="project2-body">
<p>The goal of this project was to expand my understanding of javascript.</p>
<p>By building this project I learned much more javascript than I had before and allowed me
to work on something that I was excited about.</p>
</div>
<div class="languages2">
<img src="Images/html.png" alt="HTML"/>
<img src="Images/css.png" alt="CSS"/>
<img src="Images/java.png" alt="Javascript"/>
</div>
<!---------------------------------Project3------------------------------------->
<div class="project3-small">
<img src="Images/weather-small.png" alt="Weather App"/>
</div>
<div class="project3-medium">
<img src="Images/weather-medium.png" alt="Weather App"/>
</div>
<div class="project3-large">
<img src="Images/weather-large.png" alt="Weather App"/>
</div>
<div class="project3-title">
<h1>Weather App</h1>
</div>
<div class="project3-body">
<p>The goal of this project was to familiarize myself with working with an API.</p>
<p>I learnt how to use my understanding of HTML, CSS and Javascript to build new
project and most importantly I added the ability to work with APIs </p>
</div>
<div class="languages3">
<img src="Images/html.png" alt="HTML"/>
<img src="Images/css.png" alt="CSS"/>
<img src="Images/java.png" alt="Javascript"/>
<a> <img src="Images/api.png" alt="API"/></a>
</div>
<!----------------------------------Footer------------------------------------>
<div class="footer-banner"></div>
<div class="footer-center">
<p>Made by Matt Mora</p>
</div>
<img src="Images/scroll-light.png" id="scrollUp"/>
</section>
</html>
I used your comments to find a resource to preload images only using HTML and CSS. Looks like images are loading faster now without flickering. I will also optimize the images to make them load faster themselves using the sources given but this will take me some time. Let me know what you think of this solution and if there is anything I could do to improve on it.
#preload { display: none; }
<div id="preload">
<img src="Images/click-here-light.png" width="1" height="1" alt="Image 01" />
<img src="Images/click-here-dark.png" width="1" height="1" alt="Image 02" />
<img src="Images/moon.png" width="1" height="1" alt="Image 03" />
<img src="Images/sun.png" width="1" height="1" alt="Image 04" />
</div>
`
I tried to make a dropdown menu with a JavaScript because the html gets generated. So I got help from some users but it's not working properly yet.
This is my menu now:https://jsfiddle.net/rxLg0bo4/5/
As you can see in the jsFiddle the menu doesn't disappear when I leave the area.
And it should also change, when I go from menu1 to menu2.
As you can see, I don't really have a smart structure for building a dropdown menu, but it should work as well. I'm working with ASP.NET so this code gets generated.
<div id="wrapper_menu">
<div id="menuicon">
<div class="menubar" id="menubar-top"></div>
<div class="menubar" id="menubar-mid"></div>
<div class="menubar" id="menubar-bottom"></div>
</div>
<nav id="menu">
<div id="pnlMenu"> <a class="menu_link" href="Index.aspx?category=1">menu1</a><a class="menu_link" href="Index.aspx?category=2">menu2</a><a class="menu_link active_menu_link" href="Index.aspx?category=4">menu3</a><a class="menu_link" href="Index.aspx?category=5">menu4</a><a class="menu_link" href="Index.aspx?category=6">menu5</a><a class="menu_link last_menu_link" href="Index.aspx?category=8">menu6</a>
</div>
<div id="pnlSubmenu" style="display:none">
<div class="submenu_panel" style="height:100px"> <a class="submenu_link" href="Pages/Chart.aspx?id=7">submenu1</a><a class="submenu_link" href="Pages/Chart.aspx?id=8">submenu2</a>
</div>
<div class="submenu_panel" style="height:100px"> <a class="submenu_link" href="Pages/Chart.aspx?id=4">Link1</a>
<a class="submenu_link" href="Pages/Chart.aspx?id=11">Link2</a>
</div>
</div>
</nav>
</div>
This is my JavaScript that I have now:
$("#pnlMenu .menu_link").mouseover(function () {
$(".submenu_panel").css("height", "100px");
$("#pnlSubmenu").slideToggle('fast');
});
That's my aspx code, as you can see I already added the jquery to it:
<head runat="server">
<title> 2.0 Preview</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8">
<link rel="stylesheet" href="Styles/font-awesome-4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="Styles/StyleSheet.css" />
<link rel="shortcut icon" href="Images/favicon.png" type="image/x-icon" />
<!-- Scripts -->
<script src="/Scripts/auto-rotate.js"></script>
<script src="/Scripts/jquery.min.js"></script>
<script src="/Scripts/key-nav.js"></script>
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<header>
<nav>
<asp:HyperLink ID="lnkLogin" NavigateUrl="~/Pages/Account/Login.aspx" runat="server">Login</asp:HyperLink>
<asp:LinkButton ID="lnkLogout" runat="server" OnClick="lnkLogout_Click">Logout</asp:LinkButton>
</nav>
<nav>
<asp:Label ID="litStatus" runat="server" Text=""></asp:Label>
</nav>
</header>
<div id="wrapper_secondary">
<div id="wrapper_logo">
<a href="/Index.aspx">
<div id="logo"></div>
</a>
</div>
<div id="wrapper_headermenu">
Management
<asp:HyperLink ID="lnkRegister" NavigateUrl="~/Pages/Account/Register.aspx" CssClass="header_hyperlink" runat="server">Register</asp:HyperLink>
Kontakt
<a href="#">
<label>
Fullscreen
<asp:CheckBox id="fullscreen_chbx" OnCheckedChanged="fullscreen_chbx_Click" runat="server" AutoPostBack="true"/></label>
</a>
</div>
</div>
<div id="wrapper_menu">
<div id="menuicon">
<div class="menubar" id="menubar-top"></div>
<div class="menubar" id="menubar-mid"></div>
<div class="menubar" id="menubar-bottom"></div>
</div>
<nav id="menu">
<script type="text/javascript">
$('.menu_link').hover(function () {
$("#pnlSubmenu").slideDown('slow');
});
$('#pnlSubmenu').on("mouseenter", function () {
$(this).show();
});
$('#pnlSubmenu').mouseleave(function () {
$(this).hide();
});
$('.menu_link').mouseleave(function () {
$("#pnlSubmenu").hide();
});
</script>
<asp:Panel ID="pnlMenu" runat="server"></asp:Panel>
<asp:Panel ID="pnlSubmenu" runat="server">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</asp:Panel>
</nav>
</div>
When using descendant selector, you can not use id selector for the first element.
css like below will not work.
#pnlMenu .menu_link:hover #pnlSubmenu .submenu_link {
height:50px;
display:block;
}
first, I have to mention that you can use the bootstrap dropdown it will make your life easier, second I came up with a couple of changes you can make, it's not perfect, but it will get you there:
HTML
<div id="wrapper_menu">
<div id="menuicon">
<div class="menubar" id="menubar-top"></div>
<div class="menubar" id="menubar-mid"></div>
<div class="menubar" id="menubar-bottom"></div>
</div>
<nav id="menu">
<div id="pnlMenu"> <a class="link1 menu_link" href="Index.aspx?category=1">menu1</a><a class="menu_link" href="Index.aspx?category=2">menu2</a><a class="link3 menu_link active_menu_link" href="Index.aspx?category=4">menu3</a><a class="menu_link" href="Index.aspx?category=5">menu4</a><a class="menu_link" href="Index.aspx?category=6">menu5</a><a class="menu_link last_menu_link" href="Index.aspx?category=8">menu6</a>
</div>
<div id="pnlSubmenu" style="display:none">
<div id="link1" class="submenu_panel" style="height:0px"> <a class="submenu_link" href="Pages/Chart.aspx?id=7">submenu1</a><a class="submenu_link" href="Pages/Chart.aspx?id=8">submenu2</a>
</div>
<div id="link3" class="submenu_panel" style="height:0px"> <a class="submenu_link" href="Pages/Chart.aspx?id=4">Link1</a>
<a class="submenu_link" href="Pages/Chart.aspx?id=11">Link2</a>
</div>
</div>
</nav>
</div>
you can see here that I added class link1 and link3 to two menu links, you should fill the rest, and added the same values as id for the dropdown part, then on the mouse over event I will read this value and call the appropriate id to show.
and as for why the menu wasn't disappearing, you need a mouseout event as follows:
$("#pnlMenu").mouseover(function (event) {
var x = $(event.target).attr('class').split(' ')[0];
console.log(x)
$("#"+x).css("height", "100px");
$("#pnlSubmenu").slideToggle('fast');
});
$("#pnlMenu").mouseout(function (event) {
var x = $(event.target).attr('class').split(' ')[0];
console.log(x)
$("#"+x).css("height", "0px");
$("#pnlSubmenu").slideToggle('fast');
});
like I said, this is a draft to get you going, this is not a perfect solution.
I hope this helps
Simple Jquery can do the trick
function showE() {
$("#h1").removeClass("hide");
}
function don() {
if ($('#h1').is(':hover')) {
$("#h1").removeClass("hide");
} else {
$("#h1").addClass("hide");
}
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="h" href="#" onmouseover="showE()" onmouseout="don()">show</a>
<div id="c" onmouseover="showE();" onmouseout="javascript:$('#h1').addClass('hide');">
<div id="h1" style="float: inherit; overflow: hidden; position: absolute;height:15px;
background-color: Gray; border-radius: 0 5px 5px 5px;" class="hide">
Enter your email if you have posted this ad
</div>
</div>
Check this new one link https://jsfiddle.net/rxLg0bo4/9/
$('.menu_link').hover(function () {
$("#pnlSubmenu").slideDown('slow');
});
$('#pnlSubmenu').on("mouseenter", function () {
$(this).show();
});
$('#pnlSubmenu').mouseleave(function () {
$(this).hide();
});
$('.menu_link').mouseleave(function () {
$("#pnlSubmenu").hide();
});
<html>
<head>
<script>
function show_function() {
var example_image=document.getElementById("example_image");
example_image.src="example_one.png";
}
function hide_function() {
var example_image=document.getElementById("example_image");
example_image.src="example.png";
}
</script>
</head>
<body>
<div class="one" onmouseover="show_function()" onmouseout="hide_function()">
<img id="example_image" src="example.png">
</div>
<div class="two" onmouseover="show_function()" onmouseout="hide_function()">
<img id="example_image" src="example.png">
</div>
</body>
</html>
When I hover the mouse over first div,the image changes. But when I hover the mouse over second div then also the image from the first div changes.
Does anyone know how to do it only in javascript?
Like Danko said, ID must be unique. Next step will be to insert variables into your function:
<html>
<head>
<script>
function show_function(id, hide)
{
var example_image=document.getElementById(id);
if(hide){
example_image.src="example.png";
} else{
example_image.src="example_one.png";
}
}
</script>
</head>
<body>
<div class="one"
onmouseover="show_function('example_image1')"
onmouseout="show_function('example_image1', true)" />
<img id="example_image1" src="example.png">
</div>
<div class="one"
onmouseover="show_function('example_image2')"
onmouseout="show_function('example_image2', true)" />
<img id="example_image2" src="example.png">
</div>
</body>
</html>
Or you can go like this too:
<img src="example.png"
onmouseover="this.src='example_one.png';"
onmouseout="this.src='example.png';" />
Hope it helps!
You can do it like this:
show_function = function (container) {
container.childNodes[1].src = "example_one.png";
}
hide_function = function (container) {
container.childNodes[1].src = "example.png";
}
then in HTML, pass this to function:
<div class="one" onmouseover="show_function(this)" onmouseout="hide_function(this)">
<img id="example_image" src="example.png">
</div>
<div class="two" onmouseover="show_function(this)" onmouseout="hide_function(this)">
<img id="example_image" src="example.png">
</div>
I think you want the first child node [0] of the div. and pass the hovered object into the callback.
function show(e){
document.getElementById('label').innerHTML = e.children[0].id;
e.style.border = "solid 2px red";
}
function hide(e){
e.style.border = "0";
}
<div class="one" onmouseover="show(this)" onmouseout="hide(this)">
<img id="example_image" src="example.png" class="one" >
</div>
<div class="two" onmouseover="show(this)" onmouseout="hide(this)">
<img id="example_image" src="example.png" class="two">
</div>
<p id='label' ></p>
<title></title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script type="text/javascript">
function showImage(image) {
document.getElementById("image").style.visibilty = "visible";
document.getElementById("image").src = images / GreenLight.jpg;
}
function startTimer() {
var con = confirm("Press a button");
if (con == true) {
x = setTimeout(function () { showImage('image') }, 1);
}
else {
x = "You pressed Cancel!";
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1> Page 1</h1>
</div>
<div id="menu">
<ul>
<li> Home </li>
<li class="here">Page 1</li>
<li>Page 2</li>
</ul>
</div>
<div id="content">
<form id="formpage1" method="post" action="default.htm"></form>
<button onclick="startTimer()">Click Here</button>
<div>
<img id="image" src=images/GreenLight.jpg style="visibility:hidden" />
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
I am trying to get an image to display 5 seconds after the "ok" button is clicked on the alert box. I am so confused as to what i am doing wrong.
You have to form a legal javascript string in this line to get the .src property assigned as you wanted. So change this:
document.getElementById("image").src = images / GreenLight.jpg;
to this:
document.getElementById("image").src = "images/GreenLight.jpg";
FYI, the error console would probably have been your friend here as this probably would have been a javascript error and would have given you the error and line number.
Your HTML should also use quotes:
<img id="image" src="images/GreenLight.jpg" style="visibility:hidden" />
And, if you want a 5 second delay, then you need to set the time to 5000 milliseconds:
setTimeout(function () { showImage('image') }, 5000);
Changed showImage functions as
function showImage(image) {
document.getElementById(image).style.visibilty = "visible";
document.getElementById(image).src = "images/GreenLight.jpg";
}
Your HTMLtag of img should be use quotes:
<img id="image" src="images/GreenLight.jpg" style="visibility:hidden" />
The below tabs works fine with external js file.How to add the links so that when the user click the link www.ll.com/#comments ,he will see the comments..tab
http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js
<ul id="countrytabs" class="shadetabs">
<li>Tutorial</li>
<li>Comments</li>
</ul>
<div class="contentbox">
<div id="movies" class="tabcontent">
Download movies here
</div>
<div id="comments" class="tabcontent">
</div>
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
Try this, after countries.init():
var tagIndex = window.location.toString().indexOf('#');
if (tagIndex >= 0)
countries.expandit(window.location.toString().substring(tagIndex).toLowerCase());
EDIT: You had a few problems in the example code you provided (You did not wait for the document onload event. You did not follow the naming-conventions of the A links as on the ddtabcontent documentation site, ...)
I have created this example to test its functionality:
<html>
<head>
<script type="text/javascript" src="tabcontent.js"></script>
<script type="text/javascript">
function onload()
{
var countries = new ddtabcontent("countrytabs");
countries.setpersist(true);
countries.setselectedClassTarget("link");
countries.init();
var url = window.location.toString();
var tagIndex = url.indexOf('#');
if (tagIndex >= 0)
countries.expandit(url.substring(tagIndex).toLowerCase());
}
</script>
<style type="text/css">
div.tabcontent
{
display: none;
}
</style>
</head>
<body onload="onload()">
<ul id="countrytabs" class="shadetabs">
<li>Movies</li>
<li>Comments</li>
</ul>
<div class="contentbox">
<div id="movies" class="tabcontent">
Download movies here
</div>
<div id="comments" class="tabcontent">
Put comments here
</div>
</div>
</body>
</html>