|
JavaScript - Easy Slider Numeric Navigation Not Working Ie6
Hello experts,
I have inserted the easy slider code into my web page to make a sliding gallery. I attempted to modify the code so that numeric navigation AND arrow navigation (next, previous) could toggle slides BUT I can't see the number navigation in IE6. Every other browser I have tested (mac Safari, Firefox, and Google Chrome as well as IE7,8) work perfectly. Since I modified the original, I assume the error is in my javascript code OR in my CSS. Please help. I wouldn't ask if I wasn't at the end of my rope! Here is the Javascript: Code: /*
* Easy Slider 1.7 - jQuery plugin
* written by Alen Grakalic
* http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
*
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
*
*/
(function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: true,
controlsBefo '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 900,
auto: false,
pause: 3000,
continuous: false,
numeric: false,
numericId: 'controls'
};
var options = $.extend(defaults, options);
this.each(function() {
var obj = $(this);
var s = $("li", obj).length;
var w = $("li", obj).width();
var h = $("li", obj).height();
var clickable = true;
obj.width(w);
obj.height(h);
obj.css("overflow","hidden");
var ts = s-1;
var t = 0;
$("ul", obj).css('width',s*w);
if(options.continuous){
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
$("ul", obj).css('width',(s+1)*w);
};
if(!options.vertical) $("li", obj).css('float','left');
if(options.controlsShow){
var html = options.controlsBefore;
if(options.numeric){
html += '<ol id="'+ options.numericId +'"></ol>'
if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
};
html += options.controlsAfter;
$(obj).after(html);
};
for(var i=0;i<s;i++){
$(document.createElement("li"))
.attr('id',options.numericId + (i+1))
.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
.appendTo($("#"+ options.numericId))
.click(function(){
animate($("a",$(this)).attr('rel'),true);
});
$("a","#"+options.nextId).click(function(){
animate("next",true);
});
$("a","#"+options.prevId).click(function(){
animate("prev",true);
});
$("a","#"+options.firstId).click(function(){
animate("first",true);
});
$("a","#"+options.lastId).click(function(){
animate("last",true);
});
};
function setCurrent(i){
i = parseInt(i)+1;
$("li", "#" + options.numericId).removeClass("current");
$("li#" + options.numericId + i).addClass("current");
};
function adjust(){
if(t>ts) t=0;
if(t<0) t=ts;
if(!options.vertical) {
$("ul",obj).css("margin-left",(t*w*-1));
} else {
$("ul",obj).css("margin-left",(t*h*-1));
}
clickable = true;
if(options.numeric) setCurrent(t);
};
function animate(dir,clicked){
if (clickable){
clickable = false;
var ot = t;
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
t = parseInt(dir);
break;
};
var diff = Math.abs(ot-t);
var speed = diff*options.speed;
if(!options.vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p },
{ queue:false, duration:speed, complete:adjust }
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
{ queue:false, duration:speed, complete:adjust }
);
};
if(!options.continuous && options.controlsFade){
if(t==ts){
$("a","#"+options.nextId).hide();
$("a","#"+options.lastId).hide();
} else {
$("a","#"+options.nextId).show();
$("a","#"+options.lastId).show();
};
if(t==0){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
} else {
$("a","#"+options.prevId).show();
$("a","#"+options.firstId).show();
};
};
if(clicked) clearTimeout(timeout);
if(options.auto && dir=="next" && !clicked){;
timeout = setTimeout(function(){
animate("next",false);
},diff*options.speed+options.pause);
};
};
};
// init
var timeout;
if(options.auto){;
timeout = setTimeout(function(){
animate("next",false);
},options.pause);
};
if(options.numeric) setCurrent(0);
if(!options.continuous && options.controlsFade){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
};
});
};
})(jQuery);
and here is my CSS: Code: #photos{
background-color: #453F33;
width: 875px;
height: 400px;
margin-top: -5px;
position: relative;
}
#slider{
padding-top:50px;
margin-left: 180px;
}
/* image replacement */
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
#content{
position:relative;
}
/* Easy Slider */
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
width:500px;
height:312px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
position:absolute;
top:170px;
left: 40px;
}
#nextBtn, #slider1next{
left:780px;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:60px;
height:77px;
background:url(../images/btn_prev.jpg) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(../images/btn_next.jpg) no-repeat 0 0;
}
/* numeric controls */
ol#controls{
margin:1em 0;
padding:0;
height:28px;
margin-left: 650px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
display: inline;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
background:#A6000E;
color: #FFF;
padding:0 10px;
text-decoration:none;
margin-top: -360px;
}
ol#controls li.current a{
background:#A1DFC6;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{
outline:none;
}
#slider li span {
display: block;
width: inherit;
height:30px;
margin-top: -317px;
color: #000;
padding-top: 10px;
padding-left: 5px;
overflow:hidden;
overflow-y: hidden;
overflow-x: hidden;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
background-color: #B1AA9A;
}
And you can view my site in the wild at www.ibikeseoul.com Similar TutorialsHi all, I am trying to add this slider: http://cssglobe.com/lab/easyslider1.5/04.html to my website but due to my inexperience can't seem to get it to work.. please help... Here is my 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> <title>Welcome to Somerset Wedding Wishes</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src="easyslider1.5/js/jquery.js"></script> <script type="text/javascript" src="easyslider1.5/js/easySlider.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: true }); }); </script> <style type="text/css"> <!-- body { background-color: #000000; background-image: url(bg1.jpg); background-repeat: repeat-x; } #slider{} #slider ul, #slider li{ margin:0; padding:0; list-style:none; } #slider li{ width:696px; height:241px; overflow:hidden; } #prevBtn, #nextBtn{ display:block; width:30px; height:77px; position:absolute; left:-30px; top:71px; } #nextBtn{ left:696px; } #prevBtn a, #nextBtn a{ display:block; width:30px; height:77px; background:url(images/btn_prev.gif) no-repeat 0 0; } #nextBtn a{ background:url(images/btn_next.gif) no-repeat 0 0; } --> </style> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- ImageReady Slices (Untitled-1) --> <table width="922" height="864" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01"> <tr> <td> <img src="images/home_01.png" width="922" height="230" alt=""></td> </tr> <tr> <td><div id="slider"><ul> <li><img src="easyslider1.5/images/01.jpg" alt="pic1"></li> <li><img src="easyslider1.5/images/02.jpg" alt="pic2"></li> <li><img src="easyslider1.5/images/03.jpg" alt="pic3"></li> ... </ul> </div> <div align="center"></div></td> </tr> <tr> <td> <img src="images/home_03.png" width="922" height="239" alt=""></td> </tr> <tr> <td> <img src="images/home_04.png" width="922" height="170" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> }); </body> </html> Hey there! I'm having a bit of a problem with this site I'm workin' on... I am trying to incorporate a website slider (http://tympanus.net/codrops/2010/06/...g-with-jquery/), so when you click the links in my naviagtion, it slides right (horizontally) to a new page, however, with the slider/scroller script in there, the navigation stops working! Here is the link to this page and my code: http://goatsy.me/motoring/ Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Website Horizontal Scrolling with jQuery" />
<meta name="keywords" content="jquery, horizontal, scrolling, scroll, smooth"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>High Style Motoring - Scooters, Pit Bikes, Atv's, Mopeds, Parts and more!</title>
<link rel="stylesheet" href="example/css/website.css" type="text/css" media="screen"/>
<!--[if lte IE 6]>
<style type="text/css">
/* Internet Explorer 6 PNG transparency fix */
#rotatescroll .overlay { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="example/images/bg-rotatescroll.png", sizingmethod='scale'); }
#rotatescroll .thumb { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="example/images/bg-thumb.png", sizingmethod='scale'); }
</style>
<![endif]-->
<script type="text/javascript" src="example/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="example/js/jquery.tinycircleslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true });
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Awesome Bubble Navigation with jQuery" />
<meta name="keywords" content="jquery, circular menu, navigation, round, bubble"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
*{
margin:0;
padding:0;
}
body{
font-family: "Trebuchet MS", sans-serif;
background:#fff url(images/bg_scoot1.png) no-repeat top left;
padding:20px;
}
.title{
width:548px;
height:169px;
position:absolute;
top:300px;
left:300px;
background:transparent url(title.png) no-repeat top left;
}
a.back{
background:transparent url(back.png) no-repeat top left;
position:fixed;
width:150px;
height:27px;
outline:none;
bottom:0px;
left:0px;
}
#content{
margin:0 auto;
}
</style>
</head>
<body>
<div id="wrap">
<div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><a href="#"><img src="example/images/scoot_gray.png" /></a></li>
<li><a href="#"><img src="example/images/scoot_red.png" /></a></li>
<li><a href="#"><img src="example/images/scoot_green.png" /></a></li>
<li><a href="#"><img src="example/images/scoot_atv.png" /></a></li>
<li><a href="#"><img src="example/images/scoot_pit.png" /></a></li>
</ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>
<div id="content">
<a class="back" href="#"></a>
<div class="title"></div>
<div class="navigation" id="nav">
<div class="item user">
<img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Home</h2>
<ul class="nav">
<li><a href="#section1">About Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="item home">
<img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Bikes</h2>
<ul>
<li><a href="#scooter">Scooter</a></li>
<li><a href="#moped">Moped</a></li>
<li><a href="#atv">ATV / Pit</a></li>
</ul>
</div>
<div class="item shop">
<img src="images/bg_shop.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Shop</h2>
<ul>
<li><a href="#">Catalog</a></li>
<li><a href="#">Offers</a></li>
<li><a href="#">Order Now</a></li>
</ul>
</div>
<div class="item camera">
<img src="images/bg_camera.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Photos</h2>
<ul>
<li><a href="#">Bikes</a></li>
<li><a href="#">Helmets</a></li>
<li><a href="#">Acc.</a></li>
</ul>
</div>
<div class="item fav">
<img src="images/bg_fav.png" alt="" width="199" height="199" class="circle"/>
<a href="#" class="icon"></a>
<h2>Extra</h2>
<ul>
<li><a href="#">Dream Bike</a></li>
<li><a href="#">FAQ / Info</a></li>
<li><a href="#">Comments</a></li>
</ul>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#nav > div').hover(
function () {
var $this = $(this);
$this.find('img').stop().animate({
'width' :'199px',
'height' :'199px',
'top' :'-25px',
'left' :'-25px',
'opacity' :'1.0'
},500,'easeOutBack',function(){
$(this).parent().find('ul').fadeIn(700);
});
$this.find('a:first,h2').addClass('active');
},
function () {
var $this = $(this);
$this.find('ul').fadeOut(500);
$this.find('img').stop().animate({
'width' :'52px',
'height' :'52px',
'top' :'0px',
'left' :'0px',
'opacity' :'0.1'
},5000,'easeOutBack');
$this.find('a:first,h2').removeClass('active');
}
);
});
</script>
<div class="section black" id="section1">
<h2>ABOUT US</h2>
<p>
HIGH STYLE MOTORING A constant commitment to quality, service, and customer satisfaction.
We are a family owned and operated dealership doing business at our present location since 1987. It is important to note that we are a fully licensed and bonded California new motorcycle dealership (Dealer # 11080) and operating a full service brick and mortar establishment dedicated to serving the needs of the most discriminating customer.
This is important as it sets us far apart from most of the "on-line" businesses that really don't have the proper knowledge or understanding of the products they sell. Here at HIGH STYLE MOTORING we are dedicated to not just the sale, but have a full service repair facility as well as one of the most extensive parts inventories available.
Over the last 23 years we have helped literally thousands of customers find the Scooter, Pit Bike, ATV or vehicle that best fit their style and budget. We will be more than happy to help you as well!
YIPPEE! Huge selection in stock and ready to take home. NATIONWIDE delivery is also available on each unit that we sell and you can rest assured knowing that your new vehicle will be delivered promptly right to your door ANYWHERE in the USA!
It's for these reasons that we sell absolutely more Scooters, Pit Bikes, ATV's and other vehicles than ANYONE in the entire area!
Check us out - we're here all day long saving you big $$$on the product that fits your style.
Retro's, Cruisers, Freeway Scoots, ATV's and the complete line-up of SSR Pit Bikes are all in stock and ready for delivery - RIGHT NOW!
We can also hand deliver your products anywhere in the Orange County or Los Angeles areas. Please give us a call at (562) 945-8361.
We also accept most major credit cards.
Stop by and say 'Hi' and let us help you to start saving money TODAY!
</p>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
/*
if you want to use one of the easing effects:
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500,'easeInOutExpo');
*/
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
</script>
</body>
</html>
And whenever I take out this part of the code, the navigation starts working again, but the slider totally doesn't work... it turns into a simple/regular page anchor again! D: (The slider doesn't seem to be working either way): Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> So, any ideas or info would be suuuuper appreciated b/c I've been trying to figure this out and I reallllllly want it to work! I can't seem to figure out what the problem is hurr! :\ HI friends., i am having a problem with using image slider script and pretty photo in one page. i have hosting website at two diffrent places. it is working fine here...http://codersonline.co.cc/sgreens-de...hp?option=unit but giving problem at http://www.savitrygreens.com/DeMo/index.php?option=unit really frustrated... don't know how to use noconflict method please help.. Any idea why this doesn't work? I'm trying to hide the li with ID of facebook1 if the innerHTML is one of two things. But if both return false and there is more code in there (e.g. a full url), I want to show the li with ID of facebook1 and also add the text 'Facebook Profile' to the span with ID of fbook-add. Code: <ul>
<li id="facebook1"><a href="http://facebook.com"><span id="fbook-add"></span></a></li>
</ul>
<script type="text/javascript">
if(document.getElementById('facebook1').innerHTML.toLowerCase()=='<a href="http://"><span id="fbook-add"></span></a>')
{
document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase()=='<a href=""><span id="fbook-add"></span></a>')
{
document.getElementById('facebook1').style.display='none';
} else
{
document.getElementById('fbook-add').innerHTML=='Facebook Profile';
}
</script>
I am using a JQuery Slider function in one of my forms that has the folowing code: Code: <script>
$(function() {
$( "#slider" ).slider({
value:100,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value + "% Clear" );
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) + "% Clear" );
});
</script>
And the form looks like: Code: <form method=POST etc...>
<div id="slider"></div>
<span><input type="text" id="amount" name="Percentage" style="border:0; color:#f6931f; font-weight:bold;" /></span>
</form>
Now, in the php, I have an error system set up, so that if one of the items in the form are left blank etc., an error will generate without posting the form. However, I am using <?php echo ?> in the form to repopulate the fields that were entered, so user does not have to fill them again. However, the slider always resets back to 100%... How can I fix this so that if the form does not POST, the slider will keep the value that the user set it at. Is this possible, I am having trouble figuring it out. Thanks! I'm trying to create a navigation bar with four elements. If the element is currently selected it will have a "red" background image, if it is one of the other 3, it will have a "black" background image. my four tabs are 'timetable, homework, notifications and sport' I tried making 8 functions like the 2 below Code: function setTimeRed()
{
document.getElementById("time").style.ClassName = 'timetable_r';
}
function setTimeBlack()
{
document.getElementById("time").style.ClassName = 'time_r';
}
And then four blocks like this: Code: function changeTimeButton()
{
var timePath = new String();
timePath = document.getElementById("timetable").style.backgroundImage;
if(timePath == "url(assets/img/tabs/time_black.png)" || timePath == "")
{
setTimeRed();
setHomeBlack();
setNotiBlack();
setSportBlack();
}
else {
}
}
finally, my html has this: Code: <div id="tabbar">
<ul id="tabs">
<a href"#" onclick="changeTimeButton()">
<li id="timetable" class="time_b">
<p>Timetable</p>
</li>
</a>
<a href"#" onclick="changeHomeButton()">
<li id="homework" class="home_b">
<p>Homework</p>
</li>
</a>
<a href"#" onclick="changeNotiButton()">
<li id="notifications" class="noti_b">
<p>Notifications</p>
</li>
</a>
<a href"#" onclick="changeSportButton()">
<li id="sport" class="sport_b">
<p>Sport</p>
</li>
</a>
</ul>
</div>
It works once then does nothing. Why, and how would I go about fixing this?? Please help! Short version at bottom Need to add an array before an array to init thousands of arrays. Mostly worked out, just need to add an array before an array. ........Please check it out. Really want to finish this tonight or tomorrow. Alright, so two days later I finally have this portion working but its only because of the awesome people of this forum and unforunately these people thought I had some half decent grasp of javascript (which I don't) and so their answers were meant to solve my problem but each time I was left with no idea how to repeat what they did. So, I've learned a lot of extra stuff that I really could have done without in the effort to try and understand what they did. This is all well and good because I'm much farther than I am had I gone it alone (so thank you!) but please, anyone that posts an answer, could you try and explain a bit of how I might use your solution again. For example, today I was confused for about an hour because I didn't understand how [CODE]var newArray=[], a, i=0;CODE] worked but only after staring at it long enough and not finding anything on google related to "values inputed after array initialization" did I finally realized that these were not params of a new array but just new variables. Code:
var alphabetArray =['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','0','1','2','3','4','5','6','7','8','9','all1'];
var a;
var i=0;
while(a=alphabetArray[i++]){
eval('var _img_'+a+' = []');
eval('var _h_'+a+' = []');
eval('var _r_'+a+' = []');
eval('var _m_'+a+' = []');
eval('var _yt_'+a+' = []');
}
alert(_h_all1)
and its working perfectly but I somehow I need to add Code: var pageNum = ['','p2_','p3_','p4_','p5_','p6_','p7_','p8_','p9_','p10_'] need to add pageNum to every alphabetArray so... _img_a = [],_img_p2_a = [], img_p3_a = [].... _img_p10_a = [] repeated for every variable in alphabetArray. _yt_p10_all1=[] Super short version Code: var alphabetArray =[letters/numbers];
var a;
var i=0;
while(a=alphabetArray[i++]){
eval('var _img_'+a+' = []');
}
// works now I need to add 10 page prefixes before each var in alphabetArray
Code: var pageNum = ['','p2_','p3_','p4_','p5_','p6_','p7_','p8_','p9_','p10_'] need to add pageNum to every alphabetArray so... _img_a = [],_img_p2_a = [], img_p3_a = [].... _img_p10_a = [] repeated for every variable in alphabetArray. _yt_p10_all1=[] Please explain how this might be possible in a way that your dog might understand. Dear Experts I want textbox1 to accept only numeric data as 55,65,698.00 Is there any easy way to validate textbox1 with javascript? Please help Shouldn't this work? It's letting the form submit to the next page when I add in this if statement: Code: var first = document.forms["contact1"].elements["name"].value;
else if (!preg_match("/^[a-z]$/i", first)) {
alert("Please enter only letters for your first name");
return false;
}
Absolutely nothing happens when I click on the button, and I know NOTHING about Java. Need serious help! The user is supposed to arbitrarily type a number (1-5) and see if it's the same one that JavaScript generates. The function "secretNum" is supposed to be a global variable, but I don't have a clue as to what that means. Anyways, an alert should pop up saying either congrats or try again. Code: <html>
<head>
<title>Guessing Game</title>
<script type="text/javascript">
function setUp ()
{
secretNum = 1+Math.floor(5*Math.random());
alert = (secretNum);
}
function checkGuess ()
{
userGuess = document.IfForm.guessBox.value;
userGuess = parseFloat(userGuess);
// get value from text box
if (secretNum == userGuess)
{alert ("Correct!");}
else
{alert ("Sorry, Try Again");}
}
</script>
</head>
<body style="text-align:center" onLoad="setUp();">
<h2>Guess the Number From 1 to 5</h2>
<form name="IfForm">
Enter Your Guess:
<input type="text" size="5" name="guessBox" value="" />
<br />
<input type="button" value="Check Guess" onClick="checkGuess" />
</form>
</body>
</html>
Dear Experts I have following codes Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Numeric Textbox Sample</title>
<style type="text/css">
#box1 {width:200px;height:170px;border:1px solid green;background:#e3eeff;padding-top:20px;}
.button {width:100px;margin-top:0px;}
body {
margin:0;
margin-top:100px;
}
</style>
<script language="javascript">
function NumericDotOnly()
{
var key = window.event.keyCode;
if (((key >47) && (key <58)) || (key==46))
window.event.returnValue = true;
else
window.event.returnValue = false;
}
function formatCurrency(num) {
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num))
num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3))+','+
num.substring(num.length-(4*i+3));
return (((sign)?'':'-') + num + '.' + cents);
}
</script>
</head>
<body onload="form2.text1.focus()" >
<center>
<p>I need following format<br>
99,999,999.99<br>
</p>
<div id="box1">
<form name=form2>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td>Amount</td>
<td><input type=text name=text1 size=15 value="" onkeypress="NumericDotOnly
()";onblur="formatCurrency(this.value)"> </td></tr>
<tr><td>Tax</td> <td><input type=text name=text2 size=15 value=""
onkeypress="NumericDotOnly()";onblur="formatCurrency(this.value)"></td></tr>
<tr><td>Result</td><td><input type=text name=text3 size=15 value="" disabled></td></tr>
</table>
<hr>
<input class="button" type=button name=command1 value="Plus"
onclick="form2.text3.value=parseFloat(form2.text1.value)+parseFloat(form2.text2.value)"><br>
<input class="button" type=button name=command8 value="Focus"
onclick="form2.text1.select()";"form2.text1.focus()"><br>
<input class="button" type=reset name=command9 value="Reset">
</form>
</div>
</center>
</body>
</html>
Please help me to apply following format 99,999,999.99 Thanks in advance Utilising "Search" what resides at: http://www.codingforums.com/showthread.php?t=6441 appears to be closest to my problem but does not solve it. I want to use HTML Input text boxes for processing within nested functions and with the results output back to the HTML table. The code contains the HTML and Javascript. As the code stands data is reported back to the HTML table because the wanted functions have been commented out. Within the code is a note regarding the above. If I try to engage the functions add() or take() I have "NaN" returned. I have attempted to use x=Number(yy), x=parseInt(yy), but to no avail. [code]<html > <head> </head> <body> <form id="myself"> <table border="1" bgcolor="lightblue"> <tr height="25px"> <td id="ad" width="25px"></td> <td id="sb" width="25px"></td> </tr> <tr height="25px"> <td><input id="lt" type="text" value="" onChange="calc();" style="width:20px"></td> <td><input id="rt" type="text" value="" onChange="calc();" style="width:20px"></td> </tr> </table> </form> <script language="javascript"> var mm; var nn; var tot; var subt; function calc(){ var n1=document.getElementById("lt").value; var n2=document.getElementById("rt").value; var nn; var mm; nn=Number(n1); mm=Number(n2); tot=mm+nn; // comment these lines out and ad.innerHTML=tot; // activate the functions subt=Math.abs(nn-mm); // sb.innerHTML=subt; // mm and nn need to passed to the functions //add(); //take(); } function add(){ tot=mm+nn; ad.innerHTML=tot; } function take(){ subt=Math.abs(nn-mm); sb.innerHTML=subt; } </script> </body> </html> [icode] I would like to fill a text field using both text and variables.. i.e. it would say x+2, so i would write.. (if 2 were a given variable) form.form1.value = "x+" 2 ??? (I know that isn't correct, I'm just wondering how I would go about this..) First off, I would like to thank everyone who has offered their help so far in my little self-appointed project dealing with astral body locations. I finally have the script working the way it was intended to and am looking at cleaning it up at this point. One of the things I would like to do in cleaning it up is change the way values are inputed when converting from Polar Coordinates to Cartesian Coordinates. The script is currently set up such that Right Accension is input in three fields identified as Hours, Minutes and Seconds. By the same token, the Declination Angle is input through three fields identified as Degrees, Minutes and Seconds. What I would like to do at this point is convert each set of three input fields to a single input field and allow the user to input the values as; Right Accension = 13:23:15.2 Declination Angle = 22:17:33 I understand that these would be inputed as String values and am familiar enough with the Split feature to extract the individual pieces of string (in this instance they would be 13, 23, 15.2 and 22, 17 and 33). What I am not familiar with, however, is converting those string values into numbers. I have done a bit of research into it and haven't really found anything that makes sense to me just yet, so if anyone can offer a bit of guidance, I am all ears. Not looking for anyone to specifically write the code for me, but if one of you fine folks could point me in the right direction as far as tutorials go, I would be thankful. GW Hi guys, This has been asked before, and i've seen many of the previous posts. And tried for hours. But finally i've broken and have to ask for help. What am I doing wrong here? Can someone please explain? Code: var u=document.forms["lead"]["name"].value;
var v=document.forms["lead"]["city"].value;
var x=document.forms["lead"]["country"].value;
var y=document.forms["lead"]["mobile"].value;
var z=document.forms["lead"]["email"].value;
if (u==null || u=="")
{
alert("Please enter your first name.");
return false;
}
if (v==null || v=="")
{
alert("Please enter your city.");
return false;
}
if (isNaN(lead.y.value))
{
alert("bloody work!");
return false;
}
if (x=="Argentina" && y.length < 11)
{
alert("Please enter a valid Argentinian phone number.");
return false;
}
Thanks in advance. Hi.. I am facing identifier starts immediately after numeric literal error in firefox onclick="document.location.href='<%= themeDisplay.getPathMain() %>/portal/ext/asite/assignOrg'"/> can any 1 solve this?? Hi, I want to have a textbox in which only numeric values will be allowed whose maximum limit is 240( 230.99 should be allowed). I am unable to do that. I am able to format the value entered by placing . in proper places and also I have limited upto two decimal places. But the problem is the cursor is not moving left when I have entered a value and I am unable to limit the value upto 240. It is taking any huge number also. Please help. My code is as below :- <html> <head> <script> function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; } function format(input){ var num = input.value.replace(/\,/g,''); if(!isNaN(num)){ if(num.indexOf('.') > -1){ num = num.split('.'); if(num[1].length > 2){ num[1] = num[1].substring(0,num[1].length-1); } input.value = num[0]+'.'+num[1]; } else { input.value = num.toString().split('').reverse().join('').replace(/(?=\d*\.?)(\d{3})/g,'$1,').split('').reverse().join('').replace(/^[\,]/,'') }; } else { input.value = ""; } } </script> </head> <body> <label for="time">Files staged in the last -</label> <input name="time" id="time" type = "text" value="24" onkeypress="return isNumberKey(event)" onkeyup="format(this);"/> <span>hours</span> </body> </html> I am finishing up my Form page, and totally forgot to have a numeric only field. So I added it and I can't get it to work. I also am having issues throwing an error when you don't select at least one topping. And are these lines correct? Code: document.cookie = "toppings=" + encodeURIComponent(document.getElementsByName("toppings[]").value);
Code: document.cookie = "extra=" + encodeURIComponent(extra); Here is a link to the page hosted on my dropbox http://dl.dropbox.com/u/49211616/dw/...orderPage.html Javascript: Code: function validateOrder ()
{
var crustSelection = document.orderForm.crust.value;
var crustPrice; //Adds $1 for Deep DishParmesagn, and Sourdough
var count = 0; //Amount of Toppings Selected
var choice = ""; //Toppings Selected list
var x = ""; //Don't need for the Cookie
var extra = 0; //extra charge for toppings over 3
try{
var error = ""; // Initialize Var to store the error messages.
if(document.getElementById("delivery").checked != true &&
document.getElementById("takeout").checked != true)
{
error=error+"Order Type is required.\n"
}
if(document.getElementById("fname").value == "")
{
error = error + "First Name is required.\n";
}
if(document.getElementById("lname").value == "")
{
error = error + "Last Name is required.\n";
}
if(document.getElementById("address").value == "")
{
error = error + "Street address is required.\n";
}
if (isNaN(document.getElementById("quantity")))
{
error = error + "Enter Pizza Quantity in Numbers Only.\n";
}
if(document.getElementById("crust").value == "")
{
error = error + "Crust Type is required.\n";
}
if(document.getElementsByName("toppings").value == 0)
{
error = error + "Select at Least One Topping.\n";
}
if(error == "")
{
// save all the information in the cookie
document.cookie = "firstName=" + encodeURIComponent(document.getElementById("fname").value);
document.cookie = "lastName=" + encodeURIComponent(document.getElementById("lname").value);
document.cookie = "address=" + encodeURIComponent(document.getElementById("address").value);
document.cookie = "order=" + encodeURIComponent((document.getElementById("delivery").checked) ? "delivery" : "takeout");
document.cookie = "quantity=" + encodeURIComponent(document.getElementById("quantity").value);
document.cookie = "quantity=" + encodeURIComponent(document.getElementById("quantity").value);
document.cookie = "crust=" + encodeURIComponent(document.getElementById("crust").value);
document.cookie = "toppings=" + encodeURIComponent(document.getElementsByName("toppings[]").value);
alert("Order successfully Placed!");
}
else
{
alert(error);
}
}
catch(ex)
{
alert("An error occurred!.\n" + "Error Name : " + ex.name + "\nError Message : " + ex.message);
}
for (var i=1; i<11; i++)
{
x = document.orderForm['toppings' + i].value;
if (document.orderForm['toppings' + i].checked)
{
choice = choice + " " + x ;
count ++;
}
}
if (choice.length <= 0)
{
choice = choice + "NONE";
}
if (count > 3)
{
extra = (count - 3) * 1
}
document.cookie = "extra=" + encodeURIComponent(extra);
}
</script>
HTML: Code: <form name = "orderForm" onsubmit="validateOrder()">
<table width="600" border="0">
<tr>
<th scope="col" width="400" align="left"><b>First Name</b><br /><input type="text" id="fname" name="fname" size=30>
<br />
<br />
<b>Last Name</b><br />
<input type="text" id="lname" name="lname" size=30>
<br />
<br />
<b>Street Address</b><br />
<input type="text" id="address" name="address" size=30>
<br />
<br />
<input name="orderType" value="delivery" id="delivery" type="radio">Delivery</font>
<input name="orderType" value="takeOut" id="takeout" type="radio">Take Out</font></th>
<th scope="col" width="200" align="Left">
How Many Pizzas? <input type="text" id="quantity" name="quantity" size=5>
<br />
<br />
<select name="crust" id="crust">
<option selected value="false">Select Crust Type</option>
<option value="regular">Regular Crust</option>
<option value="thin">Thin Crust</option>
<option value="deep">Deep Dish</option>
<option value="Parmesagn">Parmesagn Cheese</option>
<option value="sourdough">Sourdough</option>
</select>
<br />
<br />
Select at Least One Topping:
<br />
<br />
<input name = "toppings1" type = "checkbox" value = "extraCheese"> Extra Cheese<br>
<input name = "toppings2" type = "checkbox" value = "sausage"> Sausage<br>
<input name = "toppings3" type = "checkbox" value = "pepperoni"> Pepperoni<br>
<input name = "toppings4" type = "checkbox" value = "bacon"> Bacon<br>
<input name = "toppings5" type = "checkbox" value = "canadianBacon"> Canadian Bacon<br>
<input name = "toppings6" type = "checkbox" value = "mushroom"> Mushroom<br>
<input name = "toppings7" type = "checkbox" value = "pineapple"> Pineapple<br>
<input name = "toppings8" type = "checkbox" value = "onion"> Onion<br>
<input name = "toppings9" type = "checkbox" value = "olive"> Olive<br>
<input name = "toppings10" type = "checkbox" value = "greenPepper"> Green Pepper<br></th>
</tr>
</table>
<input name="submit" type="submit" value="submit" /><input name="" type="reset" />
</form>
|
|||||||