|
JavaScript - Anyone Know Of Any Mobile Sliders?
Similiar to that of CBS.com or AOL.com when you visit them on the iphone. Something that responds to the swipe gesture within the iphone.
I've been searching google, but mobile web resourses are far and few. Also tried to check out their source and it only shows it as one long line of text, not ideal for trying to read code. Similar TutorialsOk so the following code is basically the style of form I would like to have on my website. I was wondering however how you make the options on a sliding scale. So all the visitor has to do is slide the button along a scale to get their answer. I would basically like something found on stylepilot.com on their dna generator or like something on wonga.com (stupid adverts!!!!). Any help or pointing in the right direction would be great. <?php print_r($_POST); ?> <html xmlns="http://www.w3.org/1999/xhtml"> <head></head> <body> <script type="text/javascript"> function setOptions(chosen){ var selbox = document.formName.table; selbox.options.length = 0; if (chosen == " ") { selbox.options[selbox.options.length] = new Option('No database selected',' '); } if (chosen == "1") { selbox.options[selbox.options.length] = new Option('first choice - option one','oneone'); selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo'); } if (chosen == "2") { selbox.options[selbox.options.length] = new Option('second choice - option one','twoone'); selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo'); selbox.options[selbox.options.length] = new Option('second choice - option three','twothree'); selbox.options[selbox.options.length] = new Option('second choice - option four','twofour'); } if (chosen == "3") { selbox.options[selbox.options.length] = new Option('third choice - option one','threeone'); selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo'); } } </script> <form name="formName" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <select name="optone" size="1" onchange="setOptions(document.formName.optone.options[document.formName.optone.selectedIndex].value);"> <option value=" " selected="selected"></option> <option value="1">First Choice</option> <option value="2">Second Choice</option> <option value="3">Third Choice</option> </select> <select name="table" size="1"> <option value=" " selected="selected">No database selected</option> </select> <input type="submit" /> </form> </body> </html> Good morning all. I am looking to have multiple image sliders (javascript / jquery) on one page. I have built the framework and have gotten one slider to work. However, when adding in another slider, I have only confused the situation. Below is the html and css. Let me know where I've gone wrong here. Will I need another set of css classes for each slider? How do I call a second slider? Thanks! The html/javascript Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link media="screen" type="text/css" link rel="stylesheet" href="style.css" />
<link media="screen" type="text/css" link rel="stylesheet" href="stylework.css" />
<link media="screen" link rel="stylesheet" type="text/css" href="wt-scroller.css" />
<link media="screen" link rel="stylesheet" type="text/css" href="wt-lightbox.css" />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-lightbox.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-scroller.min.js"></script>
<title>idigify</title>
</head>
<body>
<div class="main">
<div class="container">
<div class="header">
<ul class="nav">
<ul>
<div class="allbuttons">
<div class="navabout"><li>about</li></div>
<div class="navwork"><li>work</li></div>
<div class="navcontact"><li>contact</li></div>
</div><!--end of all buttons-->
</ul><!--end of nav list-->
</ul><!--end of nav-->
</div>
<!--end of header-->
<div class="headeraboutme">the work</div>
<div class="sitemainfeature">
<div class="aboutme_text">
<h2>Just for Fun</h2>
<div class="workslider_justforfun">
<div class="workslider_justforfun_container">
<div class="wt-scroller">
<div class="prev-btn"></div>
<div class="slides">
<ul>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
</ul>
</div><!--end of slider-->
<div class="next-btn"></div>
<div class="lower-panel">
<div class="scroll-bar">
<div class="thumb">
</div><!--end of thumb-->
</div><!--end of scroll-bar-->
</div><!--end of lower panel-->
</div><!--end of wt scroller just for fun-->
</div><!--end of just for fun container-->
</div><!--end of workslider-->
<h2>Ads/Advertising</h2>
<div class="workslider_justforfun">
<div class="workslider_justforfun_container">
<div class="wt-scroller2">
<div class="prev-btn"></div>
<div class="slides">
<ul>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
</ul>
</div><!--end of slider-->
<div class="next-btn"></div>
<div class="lower-panel">
<div class="scroll-bar">
<div class="thumb">
</div><!--end of thumb-->
</div><!--end of scroll-bar-->
</div><!--end of lower panel-->
</div><!--end of wt scroller just for fun-->
</div><!--end of just for fun container-->
</div><!--end of workslider-->
<h2>Logos</h2>
<div class="workslider_justforfun">
<div class="workslider_justforfun_container">
<div class="wt-scroller">
<div class="prev-btn"></div>
<div class="slides">
<ul>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
</ul>
</div><!--end of slider-->
<div class="next-btn"></div>
<div class="lower-panel">
<div class="scroll-bar">
<div class="thumb">
</div><!--end of thumb-->
</div><!--end of scroll-bar-->
</div><!--end of lower panel-->
</div><!--end of wt scroller just for fun-->
</div><!--end of just for fun container-->
</div><!--end of workslider-->
<h2>Billboards</h2>
<div class="workslider_billboard">
</div><!--end of workslider-->
<h2>Business Cards</h2>
<div class="workslider_businesscard">
</div><!--end of workslider-->
<h2>Resumes</h2>
<div class="workslider_resume">
</div><!--end of workslider-->
<h2>Sales Pieces</h2>
<div class="workslider_salespiece">
</div><!--end of workslider-->
</div><!--end of about me text-->
</div><!--end of site main feature-->
<div class="worksplash"></div><!--end of background splash-->
</div><!--end of container-->
</div><!--end of main-->
<div class="footercontainer">
<ul class="nav">
<ul>
<div class="navabout"><li>about</li></div>
<div class="navwork"><li>work</li></div>
<div class="navcontact"><li>contact</li></div>
</ul><!--end of nav list-->
</ul><!--end of nav-->
</div>
<!--end of footer container-->
<script type="text/javascript">
$(document).ready(
function() {
//initialize scroller
$(".container").wtScroller({
num_display:3,
slide_width:240,
slide_height:180,
slide_margin:1,
button_width:25,
ctrl_height:15,
margin:1,
auto_scroll:false,
delay:4000,
scroll_speed:1000,
easing:"",
auto_scale:true,
move_one:false,
ctrl_type:"scrollbar",
display_buttons:true,
display_caption:true,
mouseover_caption:false,
caption_align:"bottom",
caption_position:"inside",
cont_nav:true,
shuffle:false
});
//initialize lightbox for scroller
$("a[rel='scroller']").wtLightBox({
rotate:true,
delay:4000,
transition_speed:600,
display_number:true,
display_dbuttons:true,
display_timer:true,
display_caption:true,
caption_align:"bottom",
cont_nav:true,
auto_fit:true,
easing:""
});
}
);
</script>
</body>
</html>
the css Code: .wt-scroller{
position:relative;
display:block;
font-family:Arial,Helvetica,sans-serif;
background-color:#CCCCCC;
width:720px;
height:180px;
}
.wt-scroller .slides{
position:relative;
width:700px;
height:200px;
float:left;
overflow:hidden;
z-index:1;
}
.wt-scroller .slides ul{
list-style:none;
position:relative;
width:999999px;
margin:0px;
padding:0px;
z-index:0;
overflow:hidden;
}
.wt-scroller .slides ul li{
position:relative;
display:block;
float:left;
overflow:hidden;
width:240px;
height:200px;
margin-left:5px;
}
.wt-scroller .slides ul li img{
position:absolute;
top:0;
left:0;
z-index:0;
border:0;
}
.wt-scroller .slides ul li p{
position:absolute;
top:0;
left:0;
z-index:1;
color:#FFF;
font-size:12px;
width:200px;
padding:5px;
margin:0;
visibility:hidden;
}
.wt-scroller .outside{
background-color:#222;
}
.wt-scroller .inside{
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
background-color:rgba(0,0,0,0.75);
}
.wt-scroller .prev-btn{
float:left;
position:relative;
width:20px;
height:170px;
cursor:pointer;
}
.wt-scroller .next-btn{
float:right;
position:relative;
width:20px;
height:170px;
cursor:pointer;
}
.wt-scroller .prev-btn{
background:url(assets/prev.png) center no-repeat;
}
.wt-scroller .next-btn{
background:url(assets/next.png) center no-repeat;
}
.wt-scroller .lower-panel{
display:block;
position:relative;
clear:both;
text-align:center;
font-size:0;
}
.wt-scroller .scroll-bar{
position:relative;
background-color:#999;
background:-moz-linear-gradient(top, #999 0%, #666 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#666));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666', GradientType=0);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
width:100%;
height:5px;
cursor:pointer;
overflow:hidden;
}
.wt-scroller .thumb{
position:absolute;
top:0;
left:0;
width:100px;
height:5px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background-color:#FFF;
background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC', GradientType=0);
}
.wt-scroller .index,
.wt-scroller .index-hl{
position:relative;
display:inline-block;
width:7px;
height:7px;
margin:0 4px;
background-image:url(assets/circle.png);
background-repeat:no-repeat;
}
.wt-scroller .index{
background-position:0 0;
cursor:pointer;
}
.wt-scroller .index-hl{
background-position:-7px 0;
cursor:default;
}
/*start of scroller2 */
.wt-scroller2{
position:relative;
display:block;
font-family:Arial,Helvetica,sans-serif;
background-color:#CCCCCC;
width:720px;
height:180px;
}
.wt-scroller2 .slides{
position:relative;
width:700px;
height:200px;
float:left;
overflow:hidden;
z-index:1;
}
.wt-scroller2 .slides ul{
list-style:none;
position:relative;
width:999999px;
margin:0px;
padding:0px;
z-index:0;
overflow:hidden;
}
.wt-scroller2 .slides ul li{
position:relative;
display:block;
float:left;
overflow:hidden;
width:240px;
height:200px;
margin-left:5px;
}
.wt-scroller2 .slides ul li img{
position:absolute;
top:0;
left:0;
z-index:0;
border:0;
}
.wt-scroller2 .slides ul li p{
position:absolute;
top:0;
left:0;
z-index:1;
color:#FFF;
font-size:12px;
width:200px;
padding:5px;
margin:0;
visibility:hidden;
}
.wt-scroller2 .outside{
background-color:#222;
}
.wt-scroller2 .inside{
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
background-color:rgba(0,0,0,0.75);
}
.wt-scroller2 .prev-btn{
float:left;
position:relative;
width:20px;
height:170px;
cursor:pointer;
}
.wt-scroller2 .next-btn{
float:right;
position:relative;
width:20px;
height:170px;
cursor:pointer;
}
.wt-scroller2 .prev-btn{
background:url(assets/prev.png) center no-repeat;
}
.wt-scroller .next-btn{
background:url(assets/next.png) center no-repeat;
}
.wt-scroller2 .lower-panel{
display:block;
position:relative;
clear:both;
text-align:center;
font-size:0;
}
.wt-scroller2 .scroll-bar{
position:relative;
background-color:#999;
background:-moz-linear-gradient(top, #999 0%, #666 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#666));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666', GradientType=0);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
width:100%;
height:5px;
cursor:pointer;
overflow:hidden;
}
.wt-scroller2 .thumb{
position:absolute;
top:0;
left:0;
width:100px;
height:5px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background-color:#FFF;
background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC', GradientType=0);
}
.wt-scroller2 .index,
.wt-scroller2 .index-hl{
position:relative;
display:inline-block;
width:7px;
height:7px;
margin:0 4px;
background-image:url(assets/circle.png);
background-repeat:no-repeat;
}
.wt-scroller2 .index{
background-position:0 0;
cursor:pointer;
}
.wt-scroller2 .index-hl{
background-position:-7px 0;
cursor:default;
}
/*end of scroller2 */
Hi there, Having a problem on a clients website incorporating two js sliders in the same page. The scripts before editing were the TinySlider and TinyFader from http://forum.leigeber.com/ The parsers in Internet Explorer, Firefox and Chrome cannot seem to differentiate between the two scripts, although I tried altering various defined names for script control it didn't make much difference. The problems are the controls of the first slider operate the second and only the second slider works. Also, I'm getting validation errors (document type does not allow element "li" here; missing one of "ul", "ol" start-tag) where the showroom (second) script content lies. Not sure if this is related or not but either way if I try to fix it the only working slider is broken. Here is the testing url. http://www . bellsdomestics.co.uk/testing/index . html Can anyone point me in the right direction? Thanks. Hi All, I am new to html and javascript. I am doing a webpage where i need to get the value from a slider and send it across the from client to server side. I need to inform the server side about the value (done) and also update the sliders's value after a submission button. Anyone have any idea how to do the latter part. Here is my code. Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="js/range.js"></script>
<script type="text/javascript" src="js/timer.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<p>Current Value:</p>
<div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1"/>
</div>
<form name="hMess" action="" onsubmit="return convertURL(this);"> <input name="w" type="number" id="h-value" onchange="s.setValue(parseInt(this.value))"> <input name="1" id="1" type="submit" value="Update"></form>
<script type="text/javascript">
var s1 = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));
s1.onchange = function ()
{
document.getElementById("h-value1").value = s1.getValue();
};
var a=document.getElementById("h-value1").value
s1.setValue(a);
var locate = window.location
document.hmess.burns.value = locate
var text = document.hmess.burns.value
function delineate(str)
{
theleft = str.indexOf("=") + 1;
theright = str.indexOf("&");
return(str.substring(theleft, theright));
}
</script>
body>
</html>
Thanks in advance. Hi there. I've been working on how to use the AnythingSlider (Github) And I have a problem, when I want to use 2 or more sliders on the same page. I want to change the green navigationpanels, and they should be different on each slider: When I have one slider I use this: Code: <script type="text/javascript">
var slider1 = ['april', 'maj', 'juni', 'Quote #2', 'Image #2'];
function formatText(index, panel) {
return slider1[index - 1] || index;
}
</script>
But when I have more sliders, I can't use this: Code: <script>
$(function(){
var slider1 = ['april', 'maj', 'juni', 'Quote #2', 'Image #2'],
slider2 = ['jul', 'aug', 'sept', 'Quote #3', 'Image #3'];
$('#slider1').anythingSlider({
navigationFormatter : function(index, panel){
return slider1[index - 1] || index;
}
});
$('#slider2').anythingSlider({
navigationFormatter : function(index, panel){
return slider2[index - 1] || index;
}
});
});
</script>
It somehow conflicts with the slider.js I think. I'll post the HTML and the slider.js in the next two replies. Will you check it out and help me find the fault? Thanks Hey, I'm working on a mobile website and need some help with my mobile browser detection script. I have it working for iPhone, iPod Touch, and Windows Mobile Devices. I need help getting it to detect for Blackberry Browser (Blackberry Devices), Blazer Browser (Palm Devices), Opera Mini Browser, Opera Mobile Browser, and other mobile browsers if possible. Does anyone know how to modify (and test if you have a phone to test with, as I don't have all of these devices) this javascript?: Code: if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{location.replace("mobile.html");}
if((navigator.appVersion.indexOf("Windows CE")>0))
{location.replace("mobile.html");}
Thanks for your help! -Chris I want to disable modal box when the page it is attached to is being viewed on a mobile device. I have tried what I know and have crashed and burned. Help will be greatly appreciated. This is the code that I have use... Code: <script src="/o/4055/images/jquery.avgrund.js" type="text/javascript"></script> <script type="text/javascript">
$(document).ready(function() {
$(".hidden").avgrund({
width: 500, // max is 640px
height: 340, // max is 350px
showClose: true, // switch to 'true' for enabling close button
showCloseText: 'close', // type your text for close button
closeByEscape: false, // enables closing popup by 'Esc'..
closeByDocument: true, // ..and by clicking document itself
enableStackAnimation: false, // another animation type
onBlurContainer: 'div#container', // enables blur filter for specified block
template: '<div style="margin: 0 auto; padding:0; width:500px; height:350px;">' +
'<a href="https://afl.salsalabs.com/o/4055/p/salsa/donation/common/public/?donate_page_KEY=7606" style="border:none;" target="_blank"><img src="http://i1298.photobucket.com/albums/ag60/ProdSolutions/Lightbox_1_zpscead0a26.jpg" width="500px" height="350px" /></a>' +
'</div>',
onUnload: function() {
var date = new Date();
date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000));
$.cookie("ARA_October_2014","true",{path:"/",expires:date});
}
});
$(".hidden").trigger('click');
});
$("#submitContribution").attr('value', 'Donate Now');
$("label[for=cc_number]").after($('div#useCC fieldset#credit_card_information div.formRow div.helpText'));
$("#credit_card_information > div:nth-child(6) > label:nth-child(1) > a:nth-child(1)").before($('#CVV2'));
$('#personal_information > legend:nth-child(1)').each(function() {
var text = $(this).text();
$(this).text(text.replace('Your Information', 'Your Billing Information'));
});
$('div.formRow:nth-child(19) > label:nth-child(1)').each(function() {
var text = $(this).text();
$(this).text(text.replace('Phone', 'Your Phone'));
});
$('#credit_card_information legend').each(function() {
var text = $(this).text();
$(this).text(text.replace('Credit Card Information', 'Payment Information'));
});
$('#credit_card_information > div:nth-child(3) > label:nth-child(1)').each(function() {
var text = $(this).text();
$(this).text(text.replace('Card Number', 'Credit Card Number'));
});
$('#submit > p:nth-child(2)').each(function() {
var text = $(this).text();
$(this).text(text.replace('Please click the submit button only once.', 'Please click this button only once.'));
});
$('.readMore').click(function(){
$('.readMore').hide('slow');
$('.text2').show('slow');
});
</script>
I am in a Mobile App Dev class. Our current project is to create a webapp that allows a user to search for zip,city,etc and get back weather and news. I am having some issues in that my code is not working. Anyone have a moment to check it out? Quote: <!-- --> <!DOCTYPE html> <html lang="en-us"> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script type="text/javascript"> function geo() { navigator.geolocation.getCurrentPosition(function(position) { do_something(position.coords.latitude, position.coords.longitude);}); } function top_stories(o) { var items = o.query.results.item; var output = ''; var no_items=items.length; for(var i=0;i<no_items;i++) { var title = items[i].title; var link = items[i].link; var desc = items[i].description; output += "<h3><a href='" + link + "'>"+title+"</a></h3>";// + desc + "<hr/>"; } // Place news stories in div tag document.getElementById('results').innerHTML = output; } function cb_weather(yql) { var temp = yql.query.results.channel.item.description; var region = yql.query.results.channel.location.city +", "+ yql.query.results.channel.location.region; document.write("<H3>"+ region +"</H3>" +temp); } function save(zipcode) { localStorage.zipcode = zipcode.value; alert("Zip code is " + localStorage.zipcode); } </script> <title>Mobile Local</title> </head> <body> <div data-role="page" id="menu"> <div data-role="header" data-theme="b"> <h1>Mobile Local</h1> <a data-role="button" class="ui-btn-left" onclick="geo();">Locate Me!</a> </div> <div data-role="fieldcontain" data-inline="true"> <label for="name">Enter your location:</label> <input type="text" name="zipcode" id="zipcode" value="" /> <a data-role="button" onclick="save(zipcode); return false;" value="Save Data" />Search</a> </div> <div data-role="content" id='weather'> <script id="weather" src='http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20location%3D02446&format=json&callback=cb_weathe r'></script> </div> <div data-role="content" id='results' onload="geo()"> <script src='http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%20%3D%20"http%3A%2F%2Fnews.google.com%2Fnews%3Fgeo%3D024 46%26output%3Drss"&format=json&diagnostics=true&callback=top_stories'></script> </div> </div> </body> </html> I'm trying to create a mobile app for an internet station, and right now I'm just trying to get how to get it to play. I've got it to connect to an MP3 file and it works just like I want it to. However, upon setting it to connect to the stream, it returns with "java.io.IOException: failed to connect to http://71.127.84.92:8004 : response does not start with HTTP it starts with: ICY" Here is the code: Code: public void commandAction(Command command, Displayable displayable) {
if (command == stopButton){
if (isPlaying == true) {
try {
Remedy.stop();
Remedy.close();
}
catch (MediaException pe) {System.out.println(pe); }
finally {
isPlaying = false;
mMainForm.removeCommand(stopButton);
mMainForm.addCommand(playButton);
}
}
}
else if (command == playButton) {
try {
Remedy = Manager.createPlayer("http://71.127.84.92:8004"); //This is the URL causing the error
Remedy.start();
System.out.println("Done");
}
catch (MediaException pe) {
System.out.println(pe);
}
catch (java.io.IOException ioe) {
System.out.println(ioe);
}
finally {
isPlaying = true;
mMainForm.removeCommand(playButton);
mMainForm.addCommand(stopButton);
}
}
else {
System.out.println("Exiting...");
notifyDestroyed();
}
}
Can anyone help me get it to play the shoutcast stream? Any help would be greatly appreciated, I am a Java noob. Im working on a mobile site for a friend and im curious, can i trigger javascript events on screen flick (By flick i mean the way to scroll through homepage screens). Id love to run a few things like that but i dont know if thats possible. If it is is there a tutorial about i could look at?
Is there a way that we can Disable Panning in Fennec, or Mobile Chrome (on android devices). The Panning, and inertial scrolling effects that are part of the browser are interfering with being able to get the mouse position. I would like to use DHTML paint on my Google Android MID.... i really have no idea where to start.. I am making a site HERE and I was using this: Code: <script>
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile/i.test(navigator.userAgent)) {
if (document.URL != "http://www.precisionpaintandcollision.net") {
window.location = "http://m.precisionpaintandcollision.net";
}
}
</script>
to auto-redirect mobile users to the mobile site and I want to keep that but I want them to be able to view the desktop site without that code affecting them. I know some apps have "force/request desktop site" but i'd like them to be able to just view the desktop site without auto redirecting to mobile site. Is this possible? Thanks -John http://mybestmaterial.blueeyedpandahosting.com/cep/1/ Works exactly as expected (and all the code is built into the source code view of the page.) What happens is 2 timers are set up. 1 is running when user clicks the Start/Stop link. The second is started when the user clicks the Laughter Start/Stop link. So the sequence should be User -- Start click then after that -- laughter-start-stop click... You will see both timers start running. The laughter click will be clicked multiple times as the app is designed to time how much laughter a comedian or speaker is getting relative to the amount of time on stage. So click the laughter start stop multiple times before clicking the START-STOP the last time. Then a PAR score is generated - which is a simple percent of the time laughter happened, vs the time on stage. The link above works like a charm. THE PROBLEM is -- on my SPRINT TREO 700p --- when I click the laughter start/stop click it stops all the timers. I think for some reason the TREO won't allow the second NEW DATE() to be declared or something... because when I comment those two lines out --- line 166 and 167 in Dreamweaver version of the file -- (if you copy full source into dreamweaver...) Then the clicking doesnt' stop the main timer -- but it also doesn't work!! ANY THOUGHTS on how to decloare the SCOPE fo the NEW DATE() so it only effects that one function? OR any other suggestions? Code pasted below Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Comedy Analyzer - Simple</title>
</head>
<script type="text/javascript">
var flagclock = 0;
var flagstop = 0;
var stoptime = 0;
var currenttime;
var splitdate = '';
var output;
var clock;
function startstop()
{
//var startstop = document.getElementById('startstopbutton');
var startdate = new Date();
var starttime = startdate.getTime();
if(flagclock==0)
{
flagclock = 1;
counter(starttime);
}
else
{
if(laughter_flagclock==1) {
laughter_startstop();
}
flagclock = 0;
flagstop = 1;
splitdate = '';
//total laughter === running_total_laughter_time;
//total time == running_total_time;
var par_score = (Math.round(running_total_laughter_time/running_total_time*100))/100;
var par_score_percent = par_score*100;
//var par_score = running_total_laughter_time/running_total_time;
laughter_output.value = "PAR SCORE = " + par_score_percent;
}
}
var running_total_time;
function counter(starttime)
{
output = document.getElementById('output');
clock = document.getElementById('clock');
laughter_output = document.getElementById('laughter_output');
currenttime = new Date();
var timediff = currenttime.getTime() - starttime;
if(flagstop == 1)
{
timediff = timediff + stoptime
}
if(flagclock == 1)
{
clock.value = formattime(timediff,'');
running_total_time = timediff;
refresh = setTimeout('counter(' + starttime + ');',10);
}
else
{
//start and stop the running counter while adding the values to the next deal.
window.clearTimeout(refresh);
stoptime = timediff;
}
}
function formattime(rawtime,roundtype)
{
if(roundtype == 'round')
{
var ds = Math.round(rawtime/100) + '';
}
else
{
var ds = Math.floor(rawtime/100) + '';
}
var sec = Math.floor(rawtime/1000);
var min = Math.floor(rawtime/60000);
ds = ds.charAt(ds.length - 1);
if(min >= 60)
{
startstop();
}
sec = sec - 60 * min + '';
if(sec.charAt(sec.length - 2) != '')
{
sec = sec.charAt(sec.length - 2) + sec.charAt(sec.length - 1);
}
else
{
sec = 0 + sec.charAt(sec.length - 1);
}
min = min + '';
if(min.charAt(min.length - 2) != '')
{
min = min.charAt(min.length - 2)+min.charAt(min.length - 1);
}
else
{
min = 0 + min.charAt(min.length - 1);
}
return min + ':' + sec + ':' + ds;
}
function resetclock()
{
if(flagclock == 1)
{
//alert("if side of reset clock");
var resetdate = new Date();
var resettime = resetdate.getTime();
counter(resettime);
}
else
{
//alert("ELSE side of reset clock");
clock.value = "00:00:0";
}
flagstop = 0;
stoptime = 0;
splitdate = '';
laughter_resetclock();
window.clearTimeout(refresh);
output.value = '';
}
</script>
<script type="text/javascript">
var laughter_flagclock = 0;
var laughter_flagstop = 0;
var laughter_stoptime = 0;
var laughter_currenttime;
var laughter_splitdate = '';
var laughter_output;
var laughter_clock;
var count = 0;
function laughter_startstop()
{
var laughter_startdate = new Date();
var laughter_starttime = laughter_startdate.getTime();
if(laughter_flagclock==0)
{
laughter_flagclock = 1;
laughter_counter(laughter_starttime);
laughter_number_text = document.getElementById('laughter_number');
count++;
laughter_number_text.value = count;
}
else
{
laughter_flagclock = 0;
laughter_flagstop = 1;
laughter_splitdate = '';
}
}
var running_total_laughter_time;
function laughter_counter(laughter_starttime)
{
laughter_clock = document.getElementById('laughter_clock');
laughter_currenttime = new Date();
var laughter_timediff = laughter_currenttime.getTime() - laughter_starttime;
if(laughter_flagstop == 1)
{
laughter_timediff = laughter_timediff + laughter_stoptime
}
if(laughter_flagclock == 1)
{
laughter_clock.value = laughter_formattime(laughter_timediff,'');
running_total_laughter_time = laughter_timediff;
//laughter_output.value += "-- laughter -- "+running_total_laughter_time;
laughter_refresh = setTimeout('laughter_counter(' + laughter_starttime + ');',10);
}
else
{
window.clearTimeout(laughter_refresh);
laughter_stoptime = laughter_timediff;
}
}
function laughter_formattime(laughter_rawtime,laughter_roundtype)
{
if(laughter_roundtype == 'round')
{
var laughter_ds = Math.round(laughter_rawtime/100) + '';
}
else
{
var laughter_ds = Math.floor(laughter_rawtime/100) + '';
}
var laughter_sec = Math.floor(laughter_rawtime/1000);
var laughter_min = Math.floor(laughter_rawtime/60000);
laughter_ds = laughter_ds.charAt(laughter_ds.length - 1);
if(laughter_min >= 60)
{
laughter_startstop();
}
laughter_sec = laughter_sec - 60 * laughter_min + '';
if(laughter_sec.charAt(laughter_sec.length - 2) != '')
{
laughter_sec = laughter_sec.charAt(laughter_sec.length - 2) + laughter_sec.charAt(laughter_sec.length - 1);
}
else
{
laughter_sec = 0 + laughter_sec.charAt(laughter_sec.length - 1);
}
laughter_min = laughter_min + '';
if(laughter_min.charAt(laughter_min.length - 2) != '')
{
laughter_min = laughter_min.charAt(laughter_min.length - 2)+laughter_min.charAt(laughter_min.length - 1);
}
else
{
laughter_min = 0 + laughter_min.charAt(laughter_min.length - 1);
}
return laughter_min + ':' + laughter_sec + ':' + laughter_ds;
}
function laughter_resetclock()
{
//alert("laughter_resetclock called");
if(laughter_flagclock == 1)
{
var laughter_resetdate = new Date();
var laughter_resettime = laughter_resetdate.getTime();
laughter_counter(laughter_resettime);
}
else
{
laughter_clock.value = "00:00:0";
}
laughter_flagstop = 0;
laughter_stoptime = 0;
laughter_splitdate = '';
count = 0;
laughter_number_text.value = count;
window.clearTimeout(refresh);
laughter_output.value = '';
//window.clearTimeout(refresh);
output.value = '';
}
</script>
<body>
Running Time :: <input id="clock" type="text" value="00:00:0" style="text-align: center;" size="14"readonly><br />
Laughter Time :: <input id="laughter_clock" type="text" value="00:00:0" style="text-align: center;"size="14" readonly><br />
Laugh Count :: <input id="laughter_number" type="text" value="0" style="text-align: center;" size="4" readonly><br />
<div id="start_button"><a href="javascript:startstop();">Timing Start/Stop</a></div>
<div id="laughter_start_button"><a href="javascript:laughter_startstop();">Laughter Start/Stop</a></div>
<textarea id="laughter_output" style="height: 90%;" cols="40" rows="1"></textarea><br />
<a href="javascript:resetclock();">Full-Reset</a><br /><br />
</body>
</html>
Hi, everyone! I am a freshman in the JavaScript area. One thing i am wondering recently is that whether JavaScript can get a data from the sensors as accelerometer, gyroscope or orientation sensors of a mobile device? From as a iPhone, iPad or some other Android system mobile phones, may i just use JavaScript to get the data from their sensors? Looking forward the replies from anybody. Thanks a lot! Best regards, Borui Hey there. I've recently written a small javascript library that creates a unified interface for localStorage and sessionStorage. The code is here http://github.com/AndrewLowther/StorageItem I'm looking for people to give me feedback and to help me work on it should you so wish. Feedback is most welcome! Hello, Is there a way with JavaScript to easily detect which mobile browser is being used? I would not normally ask this, but because we do not have the time or budget to implement any back end detection scripting it is our only option right now! I don't think we will need to detect which version of the browser, or which revision of the phone is used - just need to target each family to deliver the proper video type. I manage a private website that has a normal desktop version and also an iPhone version. Both versions use jQuery. I'm wondering if I could get some help with the iPhone version. Right now, I have one of the navigation items set up so that when it's tapped on, a submenu with more navigation items appear. This is much like the "more" menu at the iPhone version of http://www.google.com/. The problem I'm having is that once that submenu is shown, the only way to make it disappear again is to tap on one of its items. I'd like to be able to tap anywhere outside of the submenu to make it disappear. This is how the iPhone version of http://www.google.com/ behaves, so I know it's possible. The only way I can think of accomplishing this is to add a click event to the body that calls a function that removes the submenu. However, I can't get it to work. At the bottom of this post you will find code that illustrates this problem. I would really appreciate any help. Thanks! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Safari Mobile Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<style type="text/css">
body {
border: 1px solid red;
}
</style>
</head>
<body>
<h1>Safari Mobile Test</h1>
<p><a href="#">This link doesn't go anywhere. If you click it, you will get an alert indicating that the link was clicked and a separate alert indicating that the body was clicked.</a></p>
<p>In a normal web browser, clicking anywhere within the body of this page (which is surrounded by a red border) will trigger an alert indicating that the body was clicked. However, the only way to see the alert using Safari Mobile is to click on the above link.</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').click(function() {
alert('The body was clicked!');
});
$('a').click(function() {
alert('The link was clicked!');
});
});
</script>
</body>
</html>
Hi all, Background: I'm currently working on a landing page which will display the same on both desktop & mobile devices, which is what we "want" for now. However, we've created an alternate registration page for mobile devices. This page can be accessed by clicking on a specific button, which has a class on it that will determine if the user is on a mobile device or not. If they are not, the normal action will occur, such as a registration popup, built specifically for desktop users. The problem is: I'm firstly having to use .remove to take away the class of pbx_ajax which operates the popup, so mobile users aren't affected by the popup and will continue onto the page we specially built for them. However, it seems my script is removing the class straight away, which prevents the popup from working for desktop users. Secondly, the script doesn't actually seem to work, it simply doesn't fire, which begs the question if i've cocked up my class bind. Code is attached below, please if anyone has any advice, do let me know as i'm at my wits end. Oh and i'm sure you'll notice, i'm polling for when the jQuery has loaded, as the library is located at the bottom of our site (its a rather large site). The javascript/jquery Code: //$(document).ready(function() {
//Global function that will detect what device the page is being viewed on
function globalDetectDevice() {
var deviceIphone = "iphone";
var deviceIpod = "ipod";
//Initialize our user agent string to lower case.
var uagent = navigator.userAgent.toLowerCase();
//**************************
// Detects if the current device is an iPhone or iPod Touch.
function DetectDevice()
{
if (DetectIphone()) {
window.location = "/landing/register/mobile" ;
}
else if (DetectIpod()) {
window.location = "/landing/register/mobile" ;
}
else {
return false;
}
}
}
//Binding the above function to a class, that we can then attach to any clickable element
//As jQuery is at the bottom of page, we poll the function until jQuery has loaded, once loaded, we clear the polling using clearTimout
var bindTimer = setInterval(function() {
if ("undefined" != typeof jQuery && globalDetectDevice) {
$('.detectDevice').removeClass('pbx_ajax').bind('click', DetectDevice);
clearTimeout(bindTimer);
}
}, 50);
//}
the html button Code: <a class="detectDevice pbx_ajax" title="Join Free" href="?cat=popup&action=open&settings=pbx_popup_register">~graphic("btn-get-started-prints-LP")</a>
thanks for any help Hello all, I've got a problem with a JS dropdown menu that I'm using. It's an unordered HTML list that is driven by a JS file. The menu is at Watt You Need Electrical - Offering Electrical Services For Geelong, Bellarine Peninsula & The Surf Coast Initially when I got the menu template all the top level items and all the list items were coded as links. What I've done is make the Electrical heading just text and the two dropdown list items below it are still links. The menu works both on a desktop with a pointer and also on a mobile device by touch. The problem is that on a mobile device when I touch the Electrical heading the dropdown doesn't appear. The Solar heading and the dropdown below it work fine because the Solar heading is still a link. Obviously I've created the problem by changing the Electrical heading to text from a link but I'd like to be able to have it that way. I've tested using some online mobile device emulators and it works OK there but when I physically test on an Iphone 5 the bug is there. I haven't been able to get my hands on any other phones or devices to test yet so don't know if it's a problem just with Iphones or Ipads. I've had a look through the Dropdown.src.js file but it's way beyond me, I've listed both the HTML and JS file below. Code: <!DOCTYPE html>
<html>
<head>
<title>Watt You Need Electrical - Offering Electrical Services For Geelong, Bellarine
Peninsula & The Surf Coast</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="Watt You Need Electrical is your one stop shop for all types of electrical services. Whether you need some domestic, commercial, or even industrial electrical work done we can
help. We also can advise on and install solar power systems and split air conditioners." />
<meta name="keywords" content="electrical services" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="css/styles.css" media="Screen" />
<link rel="stylesheet" type="text/css" href="css/mobile.css" media="handheld" />
<link media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" rel="stylesheet" />
<script>
// initialise the drop-down menus
runOnLoad(Dropdown.initialise);
</script>
</head>
<body>
<div id="wrapper">
<a href="tel://+61425859742"><div id="mobile_header"></div></a>
<a href="tel://+61425859742"><div id="phoneBlock"></div></a>
<div id="header"></div>
<div id="nav">
<ul class="dropdown">
<li>
<a href="index.html">Home</a>
</li>
<li>Electrical
<ul>
<li>
<a href="domestic_electrician.html">Domestic</a>
</li>
<li>
<a href="electrical_contractors.html">Commercial/Industrial</a>
</li>
</ul>
</li> <li>
<a href="air_conditioner_installation.html">Air Conditioners</a>
</li> <li>
<a href="solar_power_systems.html">Solar</a>
<ul>
<li><a href="solar_system_maintenance.html">Maintenance</a>
</li>
<li><a href="solar_energy_facts.html">About Solar</a>
</li>
</ul>
</li> <li>
<a href="b_type_gas_service.html">Type B Gas</a>
</li> <li>
<a href="formgenerator/forms/contact.html">Contact Us</a>
</li>
</ul>
</div>
<div id="content-2">
<div class="clear"> </div>
<div id="top_border"></div>
<div id="content-2-1">
<span class="blackheading">Watt You Need Electrical -
Offering Electrical Services For Geelong, Bellarine Peninsula & The Surf Coast</span>
<p>Watt You Need Electrical Services can help you with all your electrical needs. We're not one of the big franchise electrical contractors so we can
take that extra bit of time and effort to make sure you get the best service and advice.
<br /><br />
If it's just an extra power point you need all the way to a complete house rewire, thinking about making the switch to solar power, or if you want a
split airconditioner to keep your house or business cool and comfortable, our focus is on exceeding our customer's expectations and providing the best
quality job at a competitive price.
<br /><br />
Our service doesn't just stop at <a href="domestic_electrician.html">domestic electrical</a> and <a href="solar_power_systems.html">solar power</a>,
we can also attend to your <a href="electrical_contractors.html">commercial and industrial electrical</a> needs and we specialise in <a href="b_type_gas_service.html">B
Class gas appliance</a> repair and maintenance. Our range of services and quality workmanship are what sets us apart from other electrical contractors.
<br /><br />
<a href="formgenerator/forms/contact.html">Contact us</a> today and let Watt You Need Electrical take care of your domestic, solar, air conditioning and commercial and industrial electrical services.
</p>
</div>
<div id="bottom_border"></div>
</div>
<div id="footer">
<table class="tableFooter">
<tr><td>Watt You Need Electrical Pty. Ltd. © 2014</td></tr>
</table>
</div>
</div>
</body>
</html>
Code: /*
Dropdown.js
Creates touch-friendly drop-down menus
Created by Stephen Morley - http://code.stephenmorley.org/ - and released under
the terms of the CC0 1.0 Universal legal code:
http://creativecommons.org/publicdomain/zero/1.0/legalcode
*/
// create the Dropdown object
var Dropdown = (function(){
// the delay, in milliseconds
var DELAY = 250;
// the list of menus
var menus = [];
// Initialises the drop-down menus.
function initialise(){
// listen for touch events on the document if appropriate
if ('createTouch' in document){
document.body.addEventListener('touchstart', handleTouchStart, false);
}
// loop over the menus, converting them
var menus = document.querySelectorAll('ul.dropdown');
for (var i = 0; i < menus.length; i ++) applyTo(menus[i]);
}
/* Handles a touch start event. The parameter is:
*
* e - the event
*/
function handleTouchStart(e){
// determine whether any menu is open
var isOpen = false;
for (var i = 0; i < menus.length; i ++){
if (menus[i].isOpen) isOpen = true;
}
// return immediately if all menus are closed
if (!isOpen) return;
// move up the document tree until we reach the root node
var node = e.target;
while (node != null){
// return immediately if we are inside a drop-down menu
if (/\bdropdown\b/.test(node.className)) return;
// move onto the parent node
node = node.parentNode;
}
// close all menus
close();
}
/* Closes all menus except the specified menu. The parameter is:
*
* menu - a menu not to close; this parameter is optional
*/
function close(menu){
// loop over the menus, closing them
for (var i = 0; i < menus.length; i ++){
if (menus[i] != menu) menus[i].close();
}
}
/* Creates a drop-down menu. The parameter is:
*
* node - either the DOM node of the menu or the ID of the node
*/
function applyTo(node){
// fetch the DOM node if a string was supplied
if (typeof node == 'string') node = document.getElementById(node);
// create and store the new menu
menus.push(new Menu(node));
}
/* Creates a drop-down menu. The parameter is:
*
* node - the DOM node of the menu
*/
function Menu(node){
// store the node
this.node = node;
// update the class name
node.className += ' dropdownJavaScript';
// listen for mouse events
if ('addEventListener' in node){
node.addEventListener(
'mouseover', this.bind(this.handleMouseOver), false);
node.addEventListener('mouseout', this.bind(this.handleMouseOut), false);
node.addEventListener('click', this.bind(this.handleClick), false);
}else{
node.attachEvent('onmouseover', this.bind(this.handleMouseOver));
node.attachEvent('onmouseout', this.bind(this.handleMouseOut));
node.attachEvent('onclick', this.bind(this.handleClick));
}
// listen for touch events if appropriate
if ('createTouch' in document){
node.addEventListener('touchstart', this.bind(this.handleClick), false);
}
}
// whether the menu is open
Menu.prototype.isOpen = false;
// the timeout
Menu.prototype.timeout = null;
/* Binds the specified function to the current object. The parameter is:
*
* f - the function
*/
Menu.prototype.bind = function(f){
// return the bound function
var thisObject = this;
return function(){ f.apply(thisObject, arguments); }
}
/* Handles a mouse over event. The parameters a
*
* e - the event
* immediate - true to open the menu without a delay
*/
Menu.prototype.handleMouseOver = function(e, immediate){
// clear the timeout
this.clearTimeout();
// find the parent list item
var item = ('target' in e ? e.target : e.srcElement);
while (item.nodeName != 'LI' && item != this.node) item = item.parentNode;
// if the target is within a list item, set the timeout
if (item.nodeName == 'LI'){
this.toOpen = item;
this.timeout =
window.setTimeout(this.bind(this.open), (immediate ? 0 : DELAY));
}
}
// Handles a mouse out event.
Menu.prototype.handleMouseOut = function(){
// clear the timeout
this.clearTimeout();
// set the timeout
this.timeout = window.setTimeout(this.bind(this.close), DELAY);
}
/* Handles a click event. The parameter is:
*
* e - the event
*/
Menu.prototype.handleClick = function(e){
// close any other menus
close(this);
// find the parent list item
var item = ('target' in e ? e.target : e.srcElement);
while (item.nodeName != 'LI' && item != this.node) item = item.parentNode;
// check that the target is within a list item
if (item.nodeName == 'LI'){
// check whether the item has a closed submenu
var submenu = this.getChildrenByTagName(item, 'UL');
if (submenu.length > 0 && !/\bdropdownOpen\b/.test(item.className)){
// open the submenu
this.handleMouseOver(e, true);
// prevent the default action
if ('preventDefault' in e){
e.preventDefault();
}else{
e.returnValue = false;
}
}
}
}
// Clears the timeout.
Menu.prototype.clearTimeout = function(){
// clear the timeout
if (this.timeout){
window.clearTimeout(this.timeout);
this.timeout = null;
}
}
// Opens the last item hovered over.
Menu.prototype.open = function(){
// store that the menu is open
this.isOpen = true;
// loop over the list items with the same parent
var items = this.getChildrenByTagName(this.toOpen.parentNode, 'LI');
for (var i = 0; i < items.length; i ++){
// check whether there is a submenu
var submenu = this.getChildrenByTagName(items[i], 'UL');
if (submenu.length > 0){
// check whether the submenu should be opened or closed
if (items[i] != this.toOpen){
// close the submenu
items[i].className =
items[i].className.replace(/\bdropdownOpen\b/g, '');
this.close(items[i]);
}else if (!/\bdropdownOpen\b/.test(items[i].className)){
// open the submenu
items[i].className += ' dropdownOpen';
// determine the location of the edges of the submenu
var left = 0;
var node = submenu[0];
while (node){
left += node.offsetLeft;
node = node.offsetParent;
}
right = left + submenu[0].offsetWidth;
// move the submenu to the right of the item if appropriate
if (left < 0) items[i].className += ' dropdownLeftToRight';
// move the submenu to the left of the item if appropriate
if (right > document.body.clientWidth){
items[i].className += ' dropdownRightToLeft';
}
}
}
}
}
/* Closes the menus within the specified node. The parameter is:
*
* node - the node; if omitted, all menus are closed
*/
Menu.prototype.close = function(node){
// if no node was specified, close all menus
if (!node){
this.isOpen = false;
node = this.node;
}
// loop over the items, closing their submenus
var items = node.getElementsByTagName('li');
for (var i = 0; i < items.length; i ++){
items[i].className = items[i].className.replace(/\bdropdownOpen\b/g, '');
}
}
/* Returns an array containing the children of the specified node with the
* specified tag name. The parameters a
*
* node - the node
* tagName - the tag name
*/
Menu.prototype.getChildrenByTagName = function(node, tagName){
// initialise the list of children
var result = [];
// loop over the children, adding those with the right tag name to the list
for (var i = 0; i < node.childNodes.length; i ++){
if (node.childNodes[i].nodeName == tagName){
result.push(node.childNodes[i]);
}
}
// return the children
return result;
}
// return the public API
return {
initialise : initialise,
applyTo : applyTo
};
})();
Any help is appreciated. |
|||||||