Button not working in duplicate ID for DIV - html

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<title>Javascript Create Div Element Dynamically</title>
<style type="text/css">
.ex
{
width:200px;
position: relative;
background-color :#CCC;
height:150px;
padding:10px;
margin:5px;
left-margin:0px;
float :left;
}
#newdiv
{
width:800px;
height:800px;
border:1px solid #000;
}
.myimage
{
height: 80;
width: 80;
top:100;
margin:5px;
}
.border
{
border:1px solid #000;
}
</style>
<script>
cc=1;
function changeimage()
{
if (cc==0)
{
cc=1;
document.getElementByClassName('myimage').src="images/white_contact.png";
}
else if (cc==1)
{
cc=2;
document.getElementByClassName('myimage').src="images/yellow_contact.png";
}
else if (cc==2)
{
cc=3;
document.getElementByClassName('myimage').src="images/red_contact.png";
}
else
{
cc=0;
document.getElementByClassName('myimage').src="images/green_contact.png";
}
}
</script>
<script type="text/javascript" language="javascript">
var i=0;
function createDiv()
{
if(i < 6) {
var divTag = document.createElement("div");
divTag.id = "div1";
divTag.setAttribute("align","left");
divTag.style.margin = "0px auto";
divTag.className ="ex";
divTag.innerHTML = "<img class='myimage' onclick='changeimage()' border='0' src='images/white_contact.png' width='100' height='180' />";
document.getElementById("newdiv").appendChild(divTag)
}
i++;
$( ".ex" ).draggable({containment:'parent',cursor:'pointer',opacity:0.6});
$( ".ex" ).droppable({ hoverClass:'border' });
}
</script>
</head>
<body>
<p align="left">
<b>Click this button to create div element dynamically:</b>
<input id="btn1" type="button" value="create div" onClick="createDiv();" />
<div id = "newdiv">
</div>
</body>
</html>
I have edit the ID to class, and change all to getElementByClassName, but still not working, the picture nvr change when I click on it
What is the problem............................................................................................................


The HTML specification requires ID attribute to be unique in a page (http://www.w3.org/TR/html401/struct/global.html#h-7.5.2), so your HTML is actually not valid. You may want to use class attribute instead.

Related

Cannot change div height after adding Layout

I have a razor view web page that has a div that i fill data into it in some way (lazy load, or loop, doesn't matter).
If i dont use a Layout, IE:
#{
Layout = "_Layout";
}
Then the div will use my configured height, and also shows a scrollbar if needed (using overflow: auto)
However, when i add a layout, even an empty one, i cannot seem to modify the div's height, which causes it to take all the screen from the layout to the bottom, and shows no scrolling.
What disabled my ability to change the height?
(the div im loading data into is div id container)
index.cshtml:
#{
Layout = "_Layout";
}
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 5px;
text-align: center;
width: 15%;
}
.Good {
background-color: green
}
.Bad {
background-color: red
}
#container {
background: #eee;
}
</style>
<head>
<script src="/JQuery/jquery-3.3.1.min.js"></script>
</head>
<body style="overflow: hidden;">
<div>
<div>
<h3 id="Progression"></h3>
</div>
<div id="container" style="width: 100%; height: 80%; overflow: auto;">
</div>
<div id="progress" style="display: none; height: 20%">
<h4>Loading...</h4>
</div>
</div>
</body>
_Layout.cshtml:
<!DOCTYPE html>
<style>
.main-header {
background: url(/images/bg-header.png) transparent repeat-x 0 0;
}
</style>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<header class="main-header" role="banner">
<div>
<a href="/" title="Home" rel="home">
<img src="/images/COMPANY-logo.png" style="background-color:white;" alt="Home">
</a>
</div>
</header>
<div>
#RenderBody()
</div>
</body>
</html>
Empty _Layout.cshtml: (having issues with this layout as well)
<!DOCTYPE html>
<style>
.main-header {
background: url(/images/bg-header.png) transparent repeat-x 0 0;
}
</style>
<html>
<head>
</head>
<body>
<div>
#RenderBody()
</div>
</body>
</html>
Generated page (The empty layout was used):
<!DOCTYPE html>
<style>
.main-header {
background: url(/images/bg-header.png) transparent repeat-x 0 0;
}
</style>
<html>
<head>
</head>
<body>
<div>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 5px;
text-align: center;
width: 15%;
}
.Good {
background-color: green
}
.Bad {
background-color: red
}
#container {
background: #eee;
}
</style>
<head>
<script src="/JQuery/jquery-3.3.1.min.js"></script>
</head>
<body style="overflow: hidden;">
<div>
<div>
<h3 id="Progression"></h3>
</div>
<div id="container" style="width: 100%; height: 80%; overflow: auto;">
</div>
<div id="progress" style="display: none; height: 20%">
<h4>Loading...</h4>
</div>
</div>
</body>
<script>
var pageSize = 50;
var pageIndex = 0;
var totalItemsDisplayed = 0;
$(document).ready(function() {
lazyLoadCards(0);
$('#container').scroll(function() {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(this).prop('scrollHeight');
var clientHeight = $(this).prop('clientHeight');
if (scrollTop + clientHeight === scrollHeight) {
pageIndex++;
lazyLoadCards(pageIndex);
}
});
function lazyLoadCards(index) {
$.ajax({
type: 'GET',
url: '/AllCards/OnScrollEnd',
data: { "startIndex": index, "size": pageSize },
dataType: 'json',
success: function(data) {
if (data != null) {
totalItemsDisplayed += data.length;
for (var i = 0; i < data.length; i++) {
$("#container").append("<h2>" +
data[i].cardNumber +
"</h2>");
}
updateProgression();
}
},
beforeSend: function() {
$("#progress").show();
},
complete: function() {
$("#progress").hide();
},
error: function() {
alert("Error while retrieving data!");
}
});
}
function loadCards(index) {
$.ajax({
type: 'GET',
url: '/AllCards/OnScrollEnd',
data: { "startIndex": index, "size": pageSize },
dataType: 'json',
success: function(data) {
if (data != null) {
totalItemsDisplayed += data.length;
for (var i = 0; i < data.length; i++) {
$("#container").append("<h2>" +
data[i].cardNumber +
"</h2>");
}
updateProgression();
if (data.length > 0) {
loadCards(index + 1);
}
}
},
beforeSend: function() {
$("#progress").show();
},
complete: function() {
$("#progress").hide();
},
error: function() {
alert("Error while retrieving data!");
}
});
}
function updateProgression() {
$('#Progression').text("Displaying " + totalItemsDisplayed + " Cards out of " + 6930);
}
});
</script>
</div>
</body>
</html>
Visual to see current output and desired outcome:
(Note that thetext inside the gray box is just elements with some text. thats what the ajax call does)
Generated code after adding #section and #style and removing body everyone besides _Layout
<!DOCTYPE html>
<html>
<head>
<style>
.main-header {
background: url(/images/bg-header.png) transparent repeat-x 0 0;
}
</style>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 5px;
text-align: center;
width: 15%;
}
.Good {
background-color: green
}
.Bad {
background-color: red
}
#container {
background: #eee;
}
</style>
</head>
<body>
<header class="main-header" role="banner">
<div>
<a href="/" title="Home" rel="home">
<img src="/images/COMPANY-logo.png" style="background-color:white;" alt="Home">
</a>
</div>
</header>
<div>
<div>
<div>
<h3 id="Progression"></h3>
</div>
<div id="container" style="width: 100%; height: 80%; overflow: visible;">
</div>
<div id="progress" style="display: none; height: 20%">
<h4>Loading...</h4>
</div>
</div>
</div>
<script src="/JQuery/jquery-3.3.1.min.js"></script>
<script>
var pageSize = 50;
var pageIndex = 0;
var totalItemsDisplayed = 0;
$(document).ready(function() {
lazyLoadCards(0);
$('#container').scroll(function() {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(this).prop('scrollHeight');
var clientHeight = $(this).prop('clientHeight');
if (scrollTop + clientHeight === scrollHeight) {
pageIndex++;
lazyLoadCards(pageIndex);
}
});
function lazyLoadCards(index) {
$.ajax({
type: 'GET',
url: '/AllCards/OnScrollEnd',
data: { "startIndex": index, "size": pageSize },
dataType: 'json',
success: function(data) {
if (data != null) {
totalItemsDisplayed += data.length;
for (var i = 0; i < data.length; i++) {
$("#container").append("<h2>" +
data[i].cardNumber +
"</h2>");
}
updateProgression();
}
},
beforeSend: function() {
$("#progress").show();
},
complete: function() {
$("#progress").hide();
},
error: function() {
alert("Error while retrieving data!");
}
});
}
function loadCards(index) {
$.ajax({
type: 'GET',
url: '/AllCards/OnScrollEnd',
data: { "startIndex": index, "size": pageSize },
dataType: 'json',
success: function(data) {
if (data != null) {
totalItemsDisplayed += data.length;
for (var i = 0; i < data.length; i++) {
$("#container").append("<h2>" +
data[i].cardNumber +
"</h2>");
}
updateProgression();
if (data.length > 0) {
loadCards(index + 1);
}
}
},
beforeSend: function() {
$("#progress").show();
},
complete: function() {
$("#progress").hide();
},
error: function() {
alert("Error while retrieving data!");
}
});
}
function updateProgression() {
$('#Progression').text("Displaying " + totalItemsDisplayed + " Cards out of " + 6930);
}
});
</script>
</body>
</html>

You should be using sections. Sections allow you to add styles, scripts, etc. on the layout. You can't have the head and body tags anywhere except the layout page.
Empty _Layout.cshtml:
<!DOCTYPE html>
<head>
<style>
.main-header {
background: url(/images/bg-header.png) transparent repeat-x 0 0;
}
</style>
#RenderSection("Styles", required: false)
</head>
<body>
<div>
#RenderBody()
</div>
#RenderSection("Scripts", required: false)
</body>
</html>
Index.cshtml:
#{
Layout = "_Layout";
}
#section Styles {
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 5px;
text-align: center;
width: 15%;
}
.Good {
background-color: green
}
.Bad {
background-color: red
}
#container {
background: #eee;
}
</style>
}
<div>
<div>
<h3 id="Progression"></h3>
</div>
<div id="container" style="width: 100%; height: 80%; overflow: auto;">
</div>
<div id="progress" style="display: none; height: 20%">
<h4>Loading...</h4>
</div>
</div>
#section Scripts {
<script src="/JQuery/jquery-3.3.1.min.js"></script>
}
UPDATE
You need to make the following change:
<div id="container" style="width: 100%;height: 155px;overflow: scroll;display: block;">
You can't use a percentage for height unless you add position:absolute;. If you only want the vertical scroll bar, you'll need to use overflow-y:scroll; instead.

Set Polymer paper-badge label with JavaScript

How can I set the label of a paper-badge with JavaScript?
I have tried this but is does not work:
Polymer.dom(document.getElementById("id_of_tag")).label = "5";
A more complete code snippet is here:
<script type="text/javascript">
var socket = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/ws");
stompClient = Stomp.over(socket); stompClient.debug = null;
stompClient.connect({}, function(frame) {
stompClient.subscribe("/user/queue",
function(m, h) {
response = JSON.parse(m.body);
badge = Polymer.dom(document.getElementById("notificationsLabel"));
badge.label = "5";
} ,{ "id" : "${currentUserId}" }
);
}, function(e) {
console.log("openWebSocket error", e);
});
</script>
<!-- a lot more stuff -->
<paper-badge id="notificationsLabel" for="notifications" label="0"></paper-badge>

If you are trying to set it inside a Polymer element prefer
this.$.id.label
or if it's inside a dom-repeat or dom-if
this.$$('#id').label
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-badge/paper-badge.html">
<dom-module id="accessing-element">
<template>
<style>
.myDiv {
width: 250px;
height: 40px;
border: 1px solid black;
margin-bottom: 30px;
}
</style>
<div id="insideBadge" class="myDiv">badge inside element</div>
<paper-badge for="insideBadge" id="insideOwnDom" label="1"></paper-badge>
<div on-tap="_changeLabel">Click me to change all labels</div>
</template>
</dom-module>
<script>
Polymer({
is: 'accessing-element',
_changeLabel: function() {
this.$.insideOwnDom.label = 2;
var docLevel = document.getElementById('inSameDoc');
docLevel.label = 3;
var anotherElement = document.querySelector('another-element');
var ele = Polymer.dom(anotherElement.root);
var badge = ele.getEffectiveChildNodes()[3];
badge.label = 4;
// or
// anotherElement.label= 4;
}
})
</script>
<dom-module id="another-element">
<template>
<style>
.myDiv {
width: 250px;
height: 40px;
border: 1px solid black;
margin-bottom: 30px;
}
</style>
<div id="anotherELementsBadge" class="myDiv">badge inside another element</div>
<paper-badge id="anotherElementsDom" for="anotherELementsBadge" label="{{label}}"></paper-badge>
</template>
</dom-module>
<script>
Polymer({
is: 'another-element',
properties: {
label: {
type: Number,
value: 1
}
}
})
</script>
<html>
<head>
<meta charset="UTF-8">
<title>Change labels</title>
</head>
<body>
<style>
.myDiv {
width: 250px;
height: 40px;
border: 1px solid black;
margin-bottom: 30px;
}
</style>
<div style="height:100px;"></div>
<div id="docBadge" class="myDiv">badge at same doc level</div>
<paper-badge for="docBadge" id="inSameDoc" label="1"></paper-badge>
<another-element></another-element>
<accessing-element></accessing-element>
</body>
</html>

Hover header+Sub-header that adapts when scrolling

I'm new and learning to code a website!
I'm trying to do this hover header that when the user scroll down, it will remain on the screen and when the user reaches Sub-Header 1, it will hover it too and changes if the user reaches Sub-Header 2(Sub-Header 1 will then disappear)
This is what I'm working on http://goo.gl/KqAM2R
Thanks in advance!
http://i.imgur.com/flT3oJ1.jpg

You need to use JavaScript to achieve this effect. SSCCE:
NewFile.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="NewFile.js"></script>
<link rel="stylesheet" type="text/css" href="NewFile.css"></head>
<body>
<header class="fixed-top">Europe</header>
<div class="much-text">doge</div>
<header class="whatever1 doge">Heatwave</header>
<div class="much-text">doge</div>
<header class="whatever2 doge">2k15</header>
<div class="much-text">doge</div>
</body>
</html>
NewFile.js:
function isElementInViewport (el, topOrBottom) {
//special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
if(topOrBottom == "top"){
return rect.top >= 0;
}else{
return rect.bottom <= $(window).height();
}
}
function onVisibilityChange () {
var headers = document.getElementsByClassName("doge");
var headerAbove = null;
for(i = 0; i<headers.length; i++){
$( headers[i]).css("position","");
$( headers[i]).css("top","");
if(!isElementInViewport(headers[i], "top")){
headerAbove = headers[i];
}
}
if(headerAbove != null){
$( headerAbove).css("position","fixed");
$( headerAbove).css("top","30px");
}
}
$(window).on('DOMContentLoaded load resize scroll', onVisibilityChange);
And NewFile.css
#CHARSET "UTF-8";
.fixed-top{
width:100%;
position:fixed;
top:0px;
background-color: red;
}
.whatever1{
width:100%;
background-color: green;
}
.whatever2{
width:100%;
background-color: blue;
}
.much-text{
height: 2000px;
}
.doge {
}
Thanks to authors of answers in How to tell if a DOM element is visible in the current viewport? for an inspiration. Also, I am aware that this code doesn't meet all good practices writing in js & css but OP clearly can find the idea from this one. Notice that you may need to sort headers (from the top header to the bottom header) in your own way before iterating on them in function onVisibilityChange

Try this...
HTML
<div id="page" class="page">
<div class="container">
<div class="contentheadercontainer">
<div class="fsh"><div class="firstheader">Sub header 1</div></div>
<div class="fsh"><div class="secondheader" id='secondheader'><p style='margin-left: 15px;'>Sub header 2</p></div></div>
</div>
</div>
</div>
</div>
CSS
body{
padding: 0px; margin: 0px;
}
.container{
height: 1000px;
}
.fsh{
position: absolute; width: 100%;
}
.firstheader{
height: 30px;width: 100%; position:fixed; background: #B14345; padding: 15px; color: #fff;
}
.secondheader{
border-top: 1px solid #bbb; padding: 5px 0px 5px 0px; margin-top: 300px; width: 100%; background: #B14345;color: #fff;
}
Javascript
document.addEventListener("scroll", function(){
scrollDetect();
});
function scrollDetect(){
var html = document.documentElement;
var top = (window.pageYOffset || html.scrollTop) - (html.clientTop || 0);
if(top > 235){
document.getElementById('secondheader').style.position = 'fixed';
document.getElementById('secondheader').style.marginTop = '60px';
document.getElementById('secondheader').style.width='100%';
}else{
document.getElementById('secondheader').style.position = 'inherit';
document.getElementById('secondheader').style.marginTop = '300px';
}
}
Check out this JSFiddle

samsung smart tv sdk 4.1 application not working on sdk 5.1

I have made an application on Samsung Smart TV SDK 4.1, but that application is not working on Samsung Smart TV SDK 5.1.
Can any one help me with remote working in sdk 5.1
I have tried some demo apps from samsungdforum but its not helping me.
Code:
The code is:
Main.js
var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
var current_selected_index=0;
var menu_count=5;
var Main =
{
};
Main.onLoad = function()
{
// Enable key event processing
this.enableKeys();
widgetAPI.sendReadyEvent();
};
Main.onUnload = function()
{
};
Main.enableKeys = function()
{
document.getElementById("menu").focus();
$('.menu').eq(current_selected_index).addClass('selected');
$('.menu a').eq(current_selected_index).focus();
};
Main.keyDown = function()
{
var keyCode = event.keyCode;
alert("Key pressed: " + keyCode);
switch(keyCode)
{
case tvKey.KEY_UP:
alert("UP");
$('.menu').eq(current_selected_index).removeClass("selected");
if(current_selected_index==0){
current_selected_index=3;
}
else{
current_selected_index--;
}
$('.menu').eq(current_selected_index).addClass("selected");
break;
case tvKey.KEY_DOWN:
alert("DOWN");
$('.menu').eq(current_selected_index).removeClass("selected");
if(current_selected_index==3){
current_selected_index=0;
}
else{
current_selected_index--;
}
$('.menu').eq(current_selected_index).addClass("selected");
break;
case tvKey.KEY_LEFT:
alert("LEFT");
$('.menu').eq(current_selected_index).removeClass("selected");
if(current_selected_index==0){
current_selected_index=4;
}
else{
current_selected_index--;
}
$('.menu').eq(current_selected_index).addClass("selected");
$('.menu a').eq(current_selected_index).focus();
break;
case tvKey.KEY_RIGHT:
alert("RIGHT");
$('.menu').eq(current_selected_index).removeClass("selected");
if(current_selected_index==4){
current_selected_index=0;
}
else{
current_selected_index++;
}
$('.menu').eq(current_selected_index).addClass("selected");
$('.menu a').eq(current_selected_index).focus();
break;
case tvKey.KEY_ENTER:
var $j;
$('#display').html($('.menu a').eq(current_selected_index).html());
$j=$('.menu a').eq(current_selected_index).html();
window.location=$j+".html";
alert($(this).html());
break;
case tvKey.KEY_PANEL_ENTER:
$('#display').html($('.menu a').eq(current_selected_index).html());
alert($(this).html());
break;
default:
alert("Unhandled key");
break;
}
};
Main.mouseclick=function()
{
$('#display').html($('.menu a').eq(current_selected_index).html());
window.location="hyderabad.html";
};
**Main.css**
*
{
padding: 0;
margin: 0;
border: 0;
}
body
{
width: 960px;
height: 540px;
}
#container
{
width:800px;
height:400px;
position:absolute;
left:50%;
margin-left:-250px;
top:50%;
margin-top:-150px;
border:1pxsolid#fff;
border-radius:5px;
}
.retunbtn
{
position:absolute;
left:80%;
margin-left:-150px;
top:80%;
margin-top:-180px;
border:1pxsolid#fff;
border-radius:5px;
}
.menu
{
float:left;
width:100px;
height:100px;
margin-top:20px;
margin-left:20px;
text-align:center;
line-height:6em;
background-image: -webkit-linear-gradient(bottom,rgb(135,135,135) 7%, rgb(184,184,184) 54%);
border-radius:5px;
}
.menu a{
color:#8B0000;
text-decoration:none;
text-transform:uppercase;
}
#display{
clear:both;
width:400px;
height:100px;
margin-left:50px;
position:absolute;
bottom:50px;
border:1pxsolid#fff;
border-radius:5px;
text-align:center;
color:blue;
font-weight:bold;
line-weight:3em;
}
.selected
{
background-image:-webkit-linear-gradient(bottom,rgb(135,135,135)7%,rgb(184,184,184)54%);
color:black;
}
#content{
color:#800000;
font:bold;
align-text:center;
position:absolute;
left:50%;
margin-left:-250px;
top:30%;
margin-top:-150px;
}
.menu1 {
float:left;
width:20%;
height:100%;
}
.mainContent {
float:left;
width:80%;
height:100%;
}
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}
**index.html**
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>tourism</title>
<script type="text/javascript" src="app/javascript/jquery-1.9.1.js"></script>
<!-- TODO : Common API -->
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>
<!-- TODO : Javascript code -->
<script language="javascript" type="text/javascript" src="app/javascript/Main.js"></script>
<!-- TODO : Style sheets code -->
<link rel="stylesheet" href="app/stylesheets/Main.css" type="text/css">
<!-- TODO: Plugins -->
</head>
<body onload="Main.onLoad();" onunload="Main.onUnload();">
<!-- Dummy anchor as focus for key events -->
<div id="content">
<h1>INDIA TOURISM APPLICATION</h1>
</div>
<div id="container">
<div class="menu">
<a href="javascript.void(0);" onkeydown="Main.keyDown();" >HYDERABAD</a>
</div>
<div class="menu">
Delhi
</div>
<div class="menu">
Jaipur
</div>
<div class="menu">
Jaipurs
</div>
<div class="menu">
Jaipur1
</div>
</div>
enter code here
<img src="images/wallpaper.jpg" style="width:960px;height:540px" >
<!-- TODO: your code here -->
</body>
</html>

first of all in main.enableKeys function you have to enable the keycodes.
var pluginAPI = new Common.API.Plugin();
> pluginAPI.registKey(tvKey.KEY_RETURN);
> pluginAPI.registKey(tvKey.KEY_EXIT);
than try to run application through remote.

The code is:
**Main.js**
var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
var current_selected_index=0;
var menu_count=5;
var Main =
{
};
Main.onLoad = function()
{
// Enable key event processing
this.enableKeys();
widgetAPI.sendReadyEvent();
};
Main.onUnload = function()
{
};
Main.enableKeys = function()
{
document.getElementById("menu").focus();
$('.menu').eq(current_selected_index).addClass('selected');
$('.menu a').eq(current_selected_index).focus();
};
Main.keyDown = function()
{
var keyCode = event.keyCode;
alert("Key pressed: " + keyCode);
switch(keyCode)
{
case tvKey.KEY_UP:
alert("UP");
$('.menu').eq(current_selected_index).removeClass("selected");
if(current_selected_index==0){
current_selected_index=3;
}
else{
current_selected_index--;
}
$('.menu').eq(current_selected_index).addClass("selected");
break;
case tvKey.KEY_DOWN:
alert("DOWN");
$('.menu').eq(current_selected_index).removeClass("selected");
if(current_selected_index==3){
current_selected_index=0;
}
else{
current_selected_index--;
}
$('.menu').eq(current_selected_index).addClass("selected");
break;
case tvKey.KEY_LEFT:
alert("LEFT");
$('.menu').eq(current_selected_index).removeClass("selected");
if(current_selected_index==0){
current_selected_index=4;
}
else{
current_selected_index--;
}
$('.menu').eq(current_selected_index).addClass("selected");
$('.menu a').eq(current_selected_index).focus();
break;
case tvKey.KEY_RIGHT:
alert("RIGHT");
$('.menu').eq(current_selected_index).removeClass("selected");
if(current_selected_index==4){
current_selected_index=0;
}
else{
current_selected_index++;
}
$('.menu').eq(current_selected_index).addClass("selected");
$('.menu a').eq(current_selected_index).focus();
break;
case tvKey.KEY_ENTER:
var $j;
$('#display').html($('.menu a').eq(current_selected_index).html());
$j=$('.menu a').eq(current_selected_index).html();
window.location=$j+".html";
alert($(this).html());
break;
case tvKey.KEY_PANEL_ENTER:
$('#display').html($('.menu a').eq(current_selected_index).html());
alert($(this).html());
break;
default:
alert("Unhandled key");
break;
}
};
Main.mouseclick=function()
{
$('#display').html($('.menu a').eq(current_selected_index).html());
window.location="hyderabad.html";
};
**Main.css**
*
{
padding: 0;
margin: 0;
border: 0;
}
body
{
width: 960px;
height: 540px;
}
#container
{
width:800px;
height:400px;
position:absolute;
left:50%;
margin-left:-250px;
top:50%;
margin-top:-150px;
border:1pxsolid#fff;
border-radius:5px;
}
.retunbtn
{
position:absolute;
left:80%;
margin-left:-150px;
top:80%;
margin-top:-180px;
border:1pxsolid#fff;
border-radius:5px;
}
.menu
{
float:left;
width:100px;
height:100px;
margin-top:20px;
margin-left:20px;
text-align:center;
line-height:6em;
background-image: -webkit-linear-gradient(bottom,rgb(135,135,135) 7%, rgb(184,184,184) 54%);
border-radius:5px;
}
.menu a{
color:#8B0000;
text-decoration:none;
text-transform:uppercase;
}
#display{
clear:both;
width:400px;
height:100px;
margin-left:50px;
position:absolute;
bottom:50px;
border:1pxsolid#fff;
border-radius:5px;
text-align:center;
color:blue;
font-weight:bold;
line-weight:3em;
}
.selected
{
background-image:-webkit-linear-gradient(bottom,rgb(135,135,135)7%,rgb(184,184,184)54%);
color:black;
}
#content{
color:#800000;
font:bold;
align-text:center;
position:absolute;
left:50%;
margin-left:-250px;
top:30%;
margin-top:-150px;
}
.menu1 {
float:left;
width:20%;
height:100%;
}
.mainContent {
float:left;
width:80%;
height:100%;
}
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}
**index.html**
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>tourism</title>
<script type="text/javascript" src="app/javascript/jquery-1.9.1.js"></script>
<!-- TODO : Common API -->
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>
<!-- TODO : Javascript code -->
<script language="javascript" type="text/javascript" src="app/javascript/Main.js"></script>
<!-- TODO : Style sheets code -->
<link rel="stylesheet" href="app/stylesheets/Main.css" type="text/css">
<!-- TODO: Plugins -->
</head>
<body onload="Main.onLoad();" onunload="Main.onUnload();">
<!-- Dummy anchor as focus for key events -->
<div id="content">
<h1>INDIA TOURISM APPLICATION</h1>
</div>
<div id="container">
<div class="menu">
<a href="javascript.void(0);" onkeydown="Main.keyDown();" >HYDERABAD</a>
</div>
<div class="menu">
Delhi
</div>
<div class="menu">
Jaipur
</div>
<div class="menu">
Jaipurs
</div>
<div class="menu">
Jaipur1
</div>
</div>
enter code here
<img src="images/wallpaper.jpg" style="width:960px;height:540px" >
<!-- TODO: your code here -->
</body>
</html>

Trouble with Div Hide/Show on mouse click

I tried your script but it isn't working right. I have edited my code below to show exactly what I am working with. Thank you so much for being helpful.
Quazi
Hi,
I am very new to JQuery.
I am trying to get a div to fade in after a click event and then hide after click anywhere. I have three divs set up to do this with css set as display:none. The problem is that the script does not work in IE8 and only works in ff/safari if I double click or triple click the menubar links below.
I am using the following code to show/hide these divs on mouse click:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
body,
html {
margin:0;
padding:0;
color:black;
background:black;
color:black;
}
#logo {
margin-top:1%;
width:12%;
margin-left:5%;
padding:1%;
border:2px solid #FF8c00;
}
#showsbanner {
margin-top:1%;
width:60%;
position:absolute;
right:2px;
}
#wrap {
width:90%;
margin:0 auto;
background:black;
color:black;
}
#header {
padding:5px 10px;
background:black;
color:#ef9c00;
}
h1 {
color:#35002c;
font-family:"verdana";
font-size:25px;
}
h2 {
color:#044476;
font-family:"verdana";
font-size:18px;
}
h3 {
color:#044476;
font-family:"verdana";
font-size:15px;
}
#nav {
padding:5px 10px;
width:89%;
margin-left:5%;
background:#ff8c00;
border:2px solid darkblue;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
color:white;
}
#menubar {
float:left;
width:40%;
padding:1%;
background:#ff8c00;
margin-bottom:1%;
border:2px solid darkblue;
}
#bcity {
float:right;
width:50%;
padding:1%;
background:#ff8c00;
margin-bottom:1%;
border:2px solid darkblue;
}
#aicbk {
display:none;
float:right;
width:50%;
padding:1%;
background:#ff8c00;
margin-bottom:1%;
border:2px solid darkblue;
}
#pdil{
display:none;
float:right;
width:50%;
padding:1%;
background:#ff8c00;
margin-bottom:1%;
border:2px solid darkblue;
}
#footer {
clear:both;
padding:1px, 1px;
background:#ff8c00;
width:100%;
border:2px solid darkblue;
}
#footer p {
color:white;
font-size:12px
}
* html #footer {
height:1px;
}
//The last four lines are an IE bug fix
</style>
<script type="text/javascript" src="homepage_files/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var gLastH = null;
var gLastId = null;
$('.toggleh').hide();
$('.toggle').click(function(e) {
$('.toggleh:visible').fadeOut('slow');
gLastId = $(this).attr('id');
console.log('#' + gLastId + 'h');
gLastH = $('#' + gLastId + 'h');
$(gLastH).fadeIn('slow');
e.stopPropagation();
});
$('*').click(function(e) {
if ($(this).attr('id') != gLastId) {
$(gLastH).fadeOut('slow');
}
e.stopPropagation();
});
});
</script>
stuff...
text here
text here2
text here3
stuff......
<div class="toggleh" id="toggle2h">
<div id="aicbk">
stuff....
</div>
</div>
<div class="toggleh" id="toggle3h">
<div id="pdil">
stuff..
</div>
</div>
<div id="footer">
stuff..
</div>

Here's a working sample, tested under Chrome 8.0.552.0 dev:
<html>
<head>
<title>S.O. 3920865</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var gLastH = null;
var gLastId = null;
$('.toggleh').hide();
$('.toggle').click(function(e) {
$('.toggleh:visible').fadeOut('slow');
gLastId = $(this).attr('id');
console.log('#' + gLastId + 'h');
gLastH = $('#' + gLastId + 'h');
$(gLastH).fadeIn('slow');
e.stopPropagation();
});
$('*').click(function(e) {
if ($(this).attr('id') != gLastId) {
$(gLastH).fadeOut('slow');
}
e.stopPropagation();
});
});
</script>
</head>
<body>
<div id="menubar">
<div class="toggle" id="toggle1">
text here
</div>
<div class="toggleh" id="toggle1h">
some description in here I suppose
</div>
<div class="toggle" id="toggle2">
text here2
</div>
<div class="toggleh" id="toggle2h">
some description in here I suppose 2
</div>
<div class="toggle" id="toggle3">
text here3
</div>
<div class="toggleh" id="toggle3h">
some description in here I suppose 3
</div>
</div>
</body>
</html>
Perhaps you need to check jQuery UI accordion which can be what you really want.
EDIT: following 1st comment.

Use this simple code to hide/show menu (or any div)
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
Click here to toggle visibility of element #foo
<div id="foo" style="display:block">This is foo</div>