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>
Related
I want to autoplay the video when it comes in the viewport and should stop playing the video when it goes out of the viewport with ionic 3, can anyone please suggest how to do that?
Yes you can do it.
$(window).scroll(function(){
var trackerOffset = $('.tracker').offset().top; // offset in document
var trackerPosition = trackerOffset - $(window).scrollTop(); // offset in viewport
$('.debug-status').html('video status: ' + checkTrackerPos(trackerPosition));
}).trigger('scroll');
function checkTrackerPos(trackerPosition){
var triggerTop = $('.trigger-top').position();
var triggerBottom = $('.trigger-bottom').position();
if (trackerPosition >= triggerTop.top && trackerPosition <= triggerBottom.top ) {
return 'playing!';
}
return 'paused';
}
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body {
text-align:center;
font-family:Arial,sans-serif;
}
.debug {
font-size:20px;
position:fixed;
left:50%;
top:50%;
width:30vw;
margin-left:-15vw;
margin-top:-35px;
padding:15px;
background:rgba(0,0,0,0.05);
}
.viewport {
position:relative;
width:100vw;
height:200vh;
border:2px dashed red;
display:flex;
justify-content:center;
flex-direction:column
}
/* Position these two as you please */
.trigger-top,
.trigger-bottom {
width:100%;
text-indent:-50%;
position:fixed;
top:25%;
border-top:1px dotted #000;
}
.trigger-bottom {
top:auto;
bottom:25%;
}
.video-wrapper {
position:relative;
color:blue;
border:1px solid blue;
width:400px;
height:300px;
margin:0 auto;
}
.video-wrapper .tracker {
position:absolute;
top:50%;
left:50%;
width:1px;
height:1px;
padding:1px; /* these 3 attributes are here just for the show */
border:1px solid red;
color:red;
line-height:1px;
text-indent:5px; /* again, just for the show */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="viewport">
<div class="debug">
<div class="debug-trigger"></div>
<div class="debug-pos"></div>
<div class="debug-status"></div>
</div>
<div class="trigger-top">top trigger</div>
<div class="trigger-bottom">bottom trigger</div>
<div class="video-wrapper">
video
<div class="tracker">tracker</div>
</div>
</div>
Refer this answer: https://stackoverflow.com/a/50479802/10971575
Could just call a JS -function when you scroll.
<div onscroll="myFunction()">
And the JS-function would roughly look like this:
if (end of viewport > document.body.scrollTop > start of viewpoint || end of viewport > document.documentElement.scrollTop > start of viewpoint) {
vid.play();
}else{vid.pause();}
this is my code , i put the link below :
LINK
this output for this source below :
i have link but it's not function when on click , i put that in div notification you can check full of source below , maybe the problem is in the css configure , but i cant figure out of my problem , can you fix it ?
<html>
<head>
<title>Create a Facebook like Notifications Window using jQuery and CSS</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
ul {
display:block;
/*background:#45619D;*/
list-style:none;
margin:0;
margin-left:500px;
padding:12px 10px;
height:21px;
width : 45px;
}
ul li {
float:left;
font:13px helvetica;
font-weight:bold;
margin:3px 0;
}
#noti_Container {
position:relative;
}
/* A CIRCLE LIKE BUTTON IN THE TOP MENU. */
#noti_Button { /*pengaturan lingkaran*/
width:22px;
height:22px;
line-height:22px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
background:red;
margin:-3px 10px 0 10px;
cursor:pointer;
}
#noti_buttons{
cursor:pointer;
}
/* THE POPULAR RED NOTIFICATIONS COUNTER. */
#noti_Counter { /*pengaturan hitung jumlah notif yang ada*/
display:block;
position:absolute;
background:#E1141E;
color:#FFF;
font-size:12px;
font-weight:normal;
padding:1px 3px;
margin:-8px 0 0 25px;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
z-index:1;
}
/* THE NOTIFICAIONS WINDOW. THIS REMAINS HIDDEN WHEN THE PAGE LOADS. */
#notifications { /*pengaturan kotak notification*/
display:none;
width:400px;
position:absolute;
top:42px;
left:-350px;
background:#FFF;
border:solid 1px rgba(100, 100, 100, .20);
-webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .20);
z-index: 1;
}
/* AN ARROW LIKE STRUCTURE JUST OVER THE NOTIFICATIONS WINDOW */
#notifications:before { /*pengaturan warna arrow*/
content: '';
display:block;
width:0;
height:0;
color:transparent;
border:10px solid #CCC;
border-color:transparent transparent #e8e8e8;
margin-top:-20px;
margin-left:355px;
}
h3 {
display:block;
color:#333;
background:#FFF;
font-weight:bold;
font-size:13px;
padding:8px;
margin:0;
border-bottom:solid 1px rgba(100, 100, 100, .30);
}
.seeAll {
background:#F6F7F8;
padding:8px;
font-size:12px;
font-weight:bold;
border-top:solid 1px rgba(100, 100, 100, .30);
text-align:center;
}
.seeAll a {
color:#3b5998;
}
.seeAll a:hover {
background:#F6F7F8;
color:#3b5998;
text-decoration:underline;
}
</style>
</head>
<body style="margin:0;padding:0;">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="noti_Container">
<div id="noti_Counter"></div> <!--SHOW NOTIFICATIONS COUNT.-->
<!--A CIRCLE LIKE BUTTON TO DISPLAY NOTIFICATION DROPDOWN.-->
<!--<div id="noti_Button"></div>-->
<img id="noti_Buttons" src="bell.png"></img>
<!--THE NOTIFICAIONS DROPDOWN BOX.-->
<div id="notifications">
LINK
<h3>Notifications</h3>
<?php
$user_name = "root";
$password = "";
$database = "wordpress";
$host_name = "localhost";
$koneksi = mysqli_connect($host_name, $user_name, $password , $database);
$result = mysqli_query($koneksi,"SELECT wp_comments.comment_content,wp_posts.post_name FROM wp_comments INNER JOIN
wp_posts ON wp_comments.comment_post_id = wp_posts.id AND wp_comments.user_id = 3 AND wp_comments.comment_approved = 1");
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){ ?>
<div style="padding:20px 0px 20px 0px;border-bottom:solid 1px #e8e8e8">
<div style="padding-left:10px;">
<?php
echo "your comment has been approved </br>".$row['comment_content'];?><a style="position:absolute;z-index:1" href="www.google.com" target="_top">see more link</a></br>
</div>
</div>
<?php } ?>
<div class="seeAll">See All</div>
</div>
</li>
</ul>
</body>
<script>
$(document).ready(function () {
// ANIMATEDLY DISPLAY THE NOTIFICATION COUNTER.
$('#noti_Counter')
.css({ opacity: 0 })
.text('7') // ADD DYNAMIC VALUE (YOU CAN EXTRACT DATA FROM DATABASE OR XML).
.css({ top: '-10px' })
.animate({ top: '-2px', opacity: 1 }, 500);
$('#noti_Buttons').click(function () {
// TOGGLE (SHOW OR HIDE) NOTIFICATION WINDOW.
$('#notifications').fadeToggle('fast', 'linear', function () {
if ($('#notifications').is(':hidden')) {
}
// CHANGE BACKGROUND COLOR OF THE BUTTON.
else $('#noti_Buttons').css('filter', 'opacity(70%)');
});
$('#noti_Counter').fadeOut('slow'); // HIDE THE COUNTER.
return false;
});
// HIDE NOTIFICATIONS WHEN CLICKED ANYWHERE ON THE PAGE.
$(document).click(function () {
$('#notifications').hide();
// CHECK IF NOTIFICATION COUNTER IS HIDDEN.
if ($('#noti_Counter').is(':hidden')) {
// CHANGE BACKGROUND COLOR OF THE BUTTON.
$('#noti_Buttons').css('filter', 'opacity(100%)');
}
});
$('#notifications').click(function () {
return false; // DO NOTHING WHEN CONTAINER IS CLICKED.
});
$("img").hover(function(){
$(this).css("filter", "opacity(30%)");
}, function(){
$(this).css("filter", "opacity(100%)");
});
});
</script>
</html>
Try to add HTTPS or HTTP in the href attribute.
LINK
Try this in the div, "notifications".
Thank you
I have a form on my mobile websitethat opens up after you click "schedule meeting".
The code for the form is simple:(listed below). Everything works as expected, but when when I'm on mobile safari and use the autofill contact function it moves the clickable area for my nextButton completely above and separate from it's background. Any clues here?
function meetingSchedulerStepNameVerify()
{
if(document.getElementById('meetingSchedulerInputFirstName').value != '' && document.getElementById('meetingSchedulerInputLastName').value != '')
{
document.getElementById('meetingSchedulerStepNameNextButton').style.backgroundColor = '#5efb7c';
return true;
}
}
function meetingSchedulerStepNameNextButtonPressed()
{
if(document.getElementById('meetingSchedulerInputFirstName').value != '' && document.getElementById('meetingSchedulerInputLastName').value != '')if (document.getElementById('meetingSchedulerStepNameNextButton').style.backgroundColor == 'rgb(94, 251, 124)')
{
alert('yes');
document.getElementById('meetingSchedulerStepName').style.display = 'none';
document.getElementById('meetingSchedulerStepAddress').style.display = 'block';
document.getElementById('meetingSchedulerStepAddressPromptName').innerHTML = document.getElementById('meetingSchedulerInputFirstName').value;
}
else
{
alert(document.getElementById('meetingSchedulerStepNameNextButton').style.backgroundColor);
}
}
#meetingSchedulerStepAddress
{
display:none;
width:100%;
text-align:center;
}
#meetingSchedulerStepAddressPrompt
{
width:100%;
font-size:4.5em;
font-family:Roboto;
padding-top:.5em;
padding-bottom:.5em;
background-color:#ffbd4b;
border-radius:2vw;
-webkit-border-radius:2vw;
-moz-border-radius:2vw;
}
#meetingSchedulerStepAddressInputWrapper
{
margin-top:5em;
}
.meetingSchedulerStepAddressLine
{
display:flex;
width:100%;
}
#meetingSchedulerStepAddressInputLine1
{
width:100%;
}
#meetingSchedulerStepAddressInputCity
{
width:100%;
}
#meetingSchedulerStepAddressInputState
{
width:50%;
}
#meetingSchedulerStepAddressInputZipcode
{
width:50%;
}
.meetingSchedulerStepAddressInput
{
font-size:4em;
font-family:Roboto;
text-align:center;
border:0;
-webkit-appearance: none;
}
#meetingSchedulerStepAddressTransitionWrapper
{
margin:0 auto;
margin-top:10em;
width:50em;
height:10em;
}
#meetingSchedulerStepAddressBackButton
{
height:10em;
width:15em;
background-color:red;
float:left;
background-image:url(../../../images/home/mobile/meetingSchedulerBackButton.png);
background-position:center;
background-size:6em 6em;
background-repeat:no-repeat;
border-radius:3vw;
-webkit-border-radius:3vw;
-moz-border-radius:3vw;
}
#meetingSchedulerStepAddressNextButton
{
width:30em;
height:10em;
background-color:lightgray;
float:right;
border-radius:3vw;
-webkit-border-radius:3vw;
-moz-border-radius:3vw;
}
#meetingSchedulerStepAddressNextButtonText
{
font-family:Roboto;
font-size:6em;
padding-top:.1em;
}
<div id="meetingSchedulerStepAddressInputWrapper">
<div class="meetingSchedulerStepAddressLine">
<input id="meetingSchedulerStepAddressInputLine1" class="meetingSchedulerStepAddressInput" name="address-line1" placeholder="555 Street Name"/>
</div>
<div class="meetingSchedulerStepAddressLine">
<input id="meetingSchedulerStepAddressInputCity" class="meetingSchedulerStepAddressInput" name="address-level2" placeholder="City"/>
</div>
<div class="meetingSchedulerStepAddressLine">
<input id="meetingSchedulerStepAddressInputState" class="meetingSchedulerStepAddressInput" name="address-level1" value="NJ" placeholder="ST"/>
<input id="meetingSchedulerStepAddressInputZipcode" class="meetingSchedulerStepAddressInput" name="postal-code" type="number" value="08008" placeholder="Zipcode"/>
</div>
</div>
<div id="meetingSchedulerStepAddressTransitionWrapper">
<div id="meetingSchedulerStepAddressBackButton"></div>
<div id="meetingSchedulerStepAddressNextButton"><div id="meetingSchedulerStepAddressNextButtonText">next</div></div>
</div>
I'm not sure what causes this bug, but I alleviated the symptoms by calling document.getElementById('meetingSchedulerStepNameNextButton').scrollIntoView(); and that solved the problem.
This was due to the webkit modal caret bug https://bugs.webkit.org/show_bug.cgi?id=176896 and was finally resolved in iOS 11.3 beta 2
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>
Does anyone have MapBox experience?
I'm trying to implement a personal map with specific markers, complete with pan and zoom features. I was trying to implement the code from the website that does just this that comes directly from the MapBox website. However, when I implemented in to my own page I got the following:
As you can see there is a weird paneling effect happening as well as white blocks around the markers. The map is pretty ineffective this way so I was hoping someone out there knew the solution.
Here's the code I used:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Pan and vertical zoom</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; height:500px}
</style>
</head>
<body>
<style>
.ui-control {
font:bold 12px/28px Helvetica, sans-serif;
text-align:center;
position:absolute;
top:10px;
left:10px;
z-index:1000;
}
.ui-pan {
position:absolute;
top:0;
left:0;
z-index:1000;
}
.ui-pan .panner {
background:#fff;
color:#404040;
font-size:9px;
position:absolute;
top:0;
left:0;
width:28px;
height:28px;
border:1px solid rgba(0,0,0,0.4);
border-radius:3px;
}
.ui-pan .panner:hover { background-color:#f8f8f8; color:#404040; }
.ui-pan .panner.up { left:28px; }
.ui-pan .panner.right { left:58px; top:28px; }
.ui-pan .panner.down { left:28px; top:58px; }
.ui-pan .panner.left { top:28px; }
.ui-zoombar {
background:#FFF;
position:relative;
top:93px;
left:28px;
width:28px;
height:200px;
border:1px solid rgba(0,0,0,0.4);
border-radius:3px;
cursor:pointer;
}
.ui-zoombar:hover { background-color:#f8f8f8; }
.ui-zoombar .handle {
position:absolute;
cursor:pointer;
width:26px;
height:28px;
background:#404040;
color:#fff;
border-radius:2px;
}
.ui-zoombar .handle:hover { background:#303030; }
</style>
<div class='ui-control'>
<div id='pan' class='ui-pan'>
<a href='#' id='up' class='panner up'>▲</a>
<a href='#' id='right' class='panner right'>▶</a>
<a href='#' id='down' class='panner down'>▼</a>
<a href='#' id='left' class='panner left'>◀</a>
</div>
<div id='zoom-bar' class='ui-zoombar dragdealer'>
<div id='handle' class='handle'>0</div>
</div>
</div>
<div id='map'> </div>
<!-- If you plan to use this example, download dragdealer from
https://code.google.com/p/dragdealer/ instead of hotlinking it like this -->
<script src='https://dragdealer.googlecode.com/svn/tags/0.9.5/dragdealer.js'></script>
<script>
var zooms = 19;
var handle = document.getElementById('handle');
var map = L.mapbox.map('map', 'tlchang.ikgi2358', {
zoomControl: false
})
.setView([42.0, -3.5], 2);
// Configure Dragdealer to update the map zoom
var zoom_bar = new Dragdealer('zoom-bar', {
steps: zooms,
snap: true,
horizontal: false,
vertical: true,
callback: function(x, y) {
var z = y * (zooms - 1);
map.setZoom(z);
handle.innerHTML = z;
}
});
// Round the zoom value the number looks presentable.
map.on('zoomend', function() {
var z = Math.round(map.getZoom());
zoom_bar.setValue(0, z / 19);
handle.innerHTML = z;
});
document.getElementById('left').onclick = function(e) { e.preventDefault(); map.panBy([-100, 0]); };
document.getElementById('right').onclick = function(e) { e.preventDefault(); map.panBy([100, 0]); };
document.getElementById('down').onclick = function(e) { e.preventDefault(); map.panBy([0, 100]); };
document.getElementById('up').onclick = function(e) { e.preventDefault(); map.panBy([0, -100]); };
</script>
</body>
</html>
Any ideas?!
This example works fine on its own.
However, when I implemented in to my own page I got the following:
This is probably the issue. If you can provide a link to your own page, then that would help - you probably have some over-eager CSS rules that are causing this problem.