Learn VBA & Macros in 1 Week!

JavaScript - How To Keep Scrollbar Position While Timer Is Updating Updatepanel? To Check Code.

Full Excel VBA Course - Beginner to Expert

How To Keep Scrollbar Position While Timer Is Updating Updatepanel? To Check Code.	View Content

Hello,
I need help.
I'm testing aps.net controls. I have add Repeater with some content. Repeater is inside of Panel which has Vertical ScrollBars. Timer1 is updating Repeater. As I need scrollbar on PageLoad on the bottom of Panel control, I have add javascript.
But, now problem is each time when try to move scrollbar up, Timer push it down. But, I would like somehow to keep in position if move it. I have try it with javascript code OnMouseOver with _StopTimer, but it effect only when mouse is over asp.net cotrol, not it's scrollbar.

Any idea? Note: I have been Googling, Yahooing many ours, and try different codes, but none was working. So, really need some new approach.
Note: MaintainScrollPositionOnPostback="true" is already added on page.

Thank you in advance for help.

Code:

<asp:ScriptManager ID="ScriptManager1" runat="server"/> 
    <script type="text/javascript"> 
        if (Sys != null) { 
            var instance = Sys.WebForms.PageRequestManager.getInstance(); 
 
            if (instance != null) { 
                instance.add_endRequest(function (sender, args) { 
                    SetScroll() 
                }); 
            } 
        } 
 
         function pageLoad() {
            window.onload = SetScroll;
        }
 
        function SetScroll() { 
            var objDiv = document.getElementById("<%=Panel1.ClientID%>"); 
            objDiv.scrollTop = objDiv.scrollHeight; 
        } 
 
     
 
</script> 
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
    <ContentTemplate> 
    <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label> 
          <asp:Timer ID="Timer1" runat="server" Interval="1000"> 
          </asp:Timer> 
           </ContentTemplate> 
    </asp:UpdatePanel> 
 
<asp:Panel ID="Panel1" runat="server" ScrollBars="Auto" Height="193px"  
        Width="467px" BorderColor="#66CCFF" BorderStyle="Solid" BorderWidth="1px"> 
    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> 
    <ContentTemplate> 
<asp:Repeater ID="Repeater1" runat="server"> 
    <ItemTemplate> 
    <div style="font-family: calibri; color: #000099;"> 
             TEST 
                </BR> 
             TEST 
                </BR> 
             TEST 
                </BR> 
             TEST 
                </BR> 
             TEST 
                </BR> 
             TEST 
                </BR> 
             TEST 
                </BR> 
             TEST 
                </BR> 
             TEST 
                </BR> 
               </asp:Repeater>  
</ContentTemplate> 
    <Triggers> 
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /> 
</Triggers> 
    </asp:UpdatePanel> 
      </asp:Panel>

Full Excel VBA Course - Beginner to Expert

Updating Slideshow Timer From Click Event

Similar Tutorials

View Content

Hi all ... Any help's appreciated ...

The challenge is that I have three - three page sliders ... each one is actually being called on a list item external to the easySlider function ...(#sliderNav ul li a#s1, #s2, #s3)

When I navigate from one slide show to the next ... I need to send a callback to rewind each slideshow to the first page and reflect the current change to the numeric 'a' attr ...

I don't quite know how to properly structure a callback function to update the current list item index from within the click event ...

Any suggestions would KINDLY be appreciated cause I think I'm a bit over my JavaScript - JQuery skills threshold with this ...

Thanks in advance and if you are way too busy to assist I completely understand ...

Here's the code I have for my slideshow controller ..
Code:

$(function()
{	//	Slider Init Functions .... 
	$("#slideShow").easySlider({
			controlsShow:true,
			speed:100,
			numeric:true,
			numericId:'controls',
			className:"sone",
			firstId:'p1'
	});	
	$('.stwo, .sthree').hide();
	$('.sone').show();
	$('#slideShowTwo').easySlider({	
		controlsShow:true,
		speed:100,
		numeric:true,
		numericId:'controlsTwo',
		className:'stwo',
		firstId:'p4'
	});	
	$('#slideShowThree').easySlider({
		controlsShow:true,
		speed:100,
		numeric:true,
		numericId:'controlsThree',
		className:'sthree',
		firstId:'p7'				
	});			
	//	Slider Nav Calls ...					 
	$('#s1').click(function()	{
		$('.sone').show();
		$('.stwo, .sthree').hide();
	});
	$('#s2').click(function()	{
		$('.stwo').show();
		$('.sone, .sthree').hide();
	});
	$('#s3').click(function()	{		
		$('.sthree').show();
		$('.sone, .stwo').hide();
	});  
});

And the code for the easySlider ....

Code:

(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: 			800,
			auto:			false,
			pause:			2000,
			continuous:		false, 
			numeric: 		false,
			numericId: 		'controls',
			className:''			
		}; 
		
		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 +'" class="' + options.className + '"></ol>';
				} else {
					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);										
			};
			
			if(options.numeric){									
				for(var i=0;i<s;i++){						
					$(document.createElement("li"))
						.attr('id',options.numericId + (i+1))
						.attr('class',options.className)
						.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
						.appendTo($("#" + options.numericId))
						.click(function(){							
							animate($("a",$(this)).attr('rel'),true);
						}); 												
				};							
			} else {
				$("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;	
					t = parseInt(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 = 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);

The HTML

Code:

<div id="sliderNav">
		<ul>
				<li><a href="#p1" id="s1">One</a></li>
				<li><a href="#p4" id="s2">Two</a></li>
				<li><a href="#p7" id="s3">Three</a></li>
		</ul>
</div>
<div id="slideShow" class="sone">
		<ul>                
				<li id="p1"><!--<li>Slide One</li>-->
				<div class="h2">This is The Main Page</div>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
			
				<li id="p2">
				<div class="h2">This is Page Two</div>
				Here's the second portion of the content.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
				
			 <li id="p3">
				<div class="h2">This is Page Three</div>
				Here's the third  portion of the content.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
		</ul>
</div><!-- </div id="slideShow">-->

<div id="slideShowTwo" class="stwo">
		<ul>       								 
				<li id="p4"><!--<li>Slide Two</li>-->
				
				<div class="h2">This is Slideshow 2 Page One</div>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
			
				<li id="p5">
				<div class="h2">This is Slideshow 2 Page Two</div>
				Here's the second portion of the content.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
	 
			  <li id="p6">
				<div class="h2">This is Slideshow 2 Page Three</div>
				Here's the third  portion of the content.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.</li>
				</ul>

</div><!-- </div id="slideShowTwo">-->
<div id="slideShowThree" class="sthree">
		<ul>            
				<li id="p7"><!--<li>Slide Three</li>-->
				<div class="h2">This is Slideshow 3 Page One</div>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
			
				<li id="p8">
				<div class="h2">This is Slideshow 3 Page Two</div>
				Here's the second portion of the content.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
	 
			 <li id="p9">
				<div class="h2">This is Slideshow 3 Page Three</div>
				Here's the third  portion of the content.
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
				purus lectus. Maecenas tempor ornare sollicitudin.
				</li>
		</ul>
</div><!-- </div id="slideShowThree">-->
</body>

How To Position The Scrollbar?

Similar Tutorials

View Content

So, here is my question:

Is there some possibility to put the horizontal scroll bar of the web browser into the center if the "width" of web page are bigger then the "width" of the web browser screen?

So I don't need to scroll to right if I open the page, but the horizontal scroll bar will be positioned in the center.

That code should do the same think like I when I take the scroll bar and put it in the center position, but this should be happen when I load the page automatically.

Or how can I do that?

thanks to all . . .

How Do I Position A Countdown Timer On Screen?

Similar Tutorials

View Content

I'm trying to place a countdown timer i have in a specific spot on a website I'm building......any thoughts on how i would do this?

Deciphering Javascript Timer Code

Similar Tutorials

View Content

Hey guys, below is a JavaScript countdown timer by Neil Broderick of Bespoke Software Solutions that I'm having a little trouble figuring out. I understand most of the code, but there are a few portions of the code that I'm deeply confused about. My questions are highlighted in red beside the code. Please have a look.

Code:

<html>
<head>
<style type="text/css">
#txt {
  border:none;
  font-family:verdana;
  font-size:16pt;
  font-weight:bold;
  border-right-color:#FFFFFF
}

</style>

	<script language="javascript">

var mins  //What's the point of declaring mins as a variable when we can declare it in the cd() function????? 
var secs;

function cd() {
 	mins = 1 * m("10");  //What does m("10") do? and why is it multiplied by 1? I can remove the 1 and the code works fine!  
 	secs = 0 + s(":01"); // 
 	
        redo();  //What does the redo() function do? 
}

function m(obj) {  // I understand how this function works, but what does m(obj) do? I'm assuming that it replaces the value given to the m() in the previous function with obj. Is that correct?! 
 	for(var i = 0; i < obj.length; i++) {
  		if(obj.substring(i, i + 1) == ":")  //Correct me if I'm wrong. The substring method gets rid of the strings before index i and after i+1. If the time is 09:10. It becomes 09. In this case, we do not break. If, however, the string is :10 for some reason(No minutes specified?). We get ":", so break. Right? 
  		break;
 	}
 	return(obj.substring(0, i));
}

function s(obj) {
 	for(var i = 0; i < obj.length; i++) {
  		if(obj.substring(i, i + 1) == ":")
  		break;
 	}
 	return(obj.substring(i + 1, obj.length));
}

function dis(mins,secs) { //dictates how the timer will be displayed. 
 	var disp;
 	if(mins <= 9) {
  		disp = " 0";
 	} else {
  		disp = " ";
 	}
 	disp += mins + ":"; 
 	if(secs <= 9) { 
  		disp += "0" + secs;
 	} else {
  		disp += secs;
 	}
 	return(disp); //Returns the value of the display!
}

function redo() {
 	secs--;
 	if(secs == -1) {
  		secs = 59;
  		mins--;
 	}
 	document.cd.disp.value = dis(mins,secs); //This displays the timer by specifying the form. You can setup additional displays here.
 	if((mins == 0) && (secs == 0)) {
  		window.alert("Time is up. Press OK to continue."); // change timeout message as required
  		// window.location = "yourpage.htm" // redirects to specified page once timer ends and ok button is pressed
 	} else {
 		cd = setTimeout("redo()",1000); //runs the function every 1000 miliseconds, or every second. 
 	}
}

function init() { 
  cd();
}
window.onload = init;
</script>
</head>
<body>

<form name="cd">
<input id="txt" readonly="true" type="text" value="11:00" border="0" name="disp">
</form>
</body>
</html>

I know this may be a little troublesome for many of you experienced coders. I just began learning javascript(It's actually my first "programming" language), so I really appreciate the help! Thanks!

Would Somebody Check My Code Pls

Similar Tutorials

View Content

Hi I am completely new to javascript, in fact just started loooking at it on w3 this week, anyhow thought I would do my first script. The script creates three random numbers between 1 and 10 but makes sure that they are completely different.

It works, which is great as I have set out to achieve what was desired, however could somebody have a look and tell me if I have gone about it the right way.

Code:

<script type="text/javascript">

var one = (Math.floor(Math.random()*10+1));
document.write("1. " + one + "<br />");

do 
 {
var two = (Math.floor(Math.random()*10+1));
 }
while (two == one)
 
document.write("2. " + two + "<br />");

do 
 {
var three = (Math.floor(Math.random()*10+1));
 }
while (three == two || three == one)

document.write("3. " + three + "<br />" + "<br />");

</script>

Thanks in advance.
Joel

Please Check This Code !!!!!

Similar Tutorials

View Content

I am trying to add values from 6 text boxes and display its sum automatically in 7th text box. This is not working. Please help.

function calculate_a() {
var a = document.getElementById('Para_A_A1_score').value ;
var b = document.getElementById('Para_A_A2_score').value ;
var c = document.getElementById('Para_A_A3_score').value ;
var d = document.getElementById('Para_A_A4_score').value ;
var e = document.getElementById('Para_A_A5_score').value ;
var f = document.getElementById('Para_A_A6_score').value ;
var g = (a+b+c+d+e+f) ;
document.audit_billing_IE.product_name4.value = g ;
}

Quote:
Below is the html form code that should automatically display the total value without clicking on any submit or send button

<tr>
<td> Parameter A </td>
<td colspan='3'> <input type="text" name="product_name4" id="product_name4" onchange="calculate_a(this);" /> </td>
</tr>

Code To Check Browser

Similar Tutorials

View Content

I'll be the first to admit, I am not skilled with javascript, but I can do a little work here and there. I remember learning there is a way to detect a user's/viewer's browser. Is there a possible javascript that allows me to detect a viewer's browser, the based on the browser, selects css/html to use so that the website is viewed correctly?

Mobile App Developers: Check Out My Code?

Similar Tutorials

View Content

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>

Could Someone Please Check This Javascript Code As Keep Getting Error?

Similar Tutorials

View Content

Hi all,
I am new to CodingForums.com as well as new to javascript. I am currently trying to create a small calculator for a friend which is to do with calculating a dose. The calculator itself works but I am now fine tweaking the text that appears with the calculated values.

This is my code:
Code:

<script type="text/javascript">
    function calculate() {
        var IBW = 1;
        var IBW2 = 1;
        var dose2 = 1;
        var CrCl = 1;
        var hgtft = document.getElementById("height_feet").value - 0;
        var hgtinches = document.getElementById("height_inches").value - 0;
        var weight = document.getElementById("weight").value - 0;
        var sex = document.getElementById("sex").value;
        var age = document.getElementById("age").value - 0;
        var creatinine = document.getElementById("creatinine").value - 0;

        if (age < 16) {
            alert("This tool is only for use in adult patients i.e. 16 years or older");
            return; //process no further
        }
        if (sex == "M") {
            if (hgtft < 5) {
                IBW = 50;
               
                IBW2 = 50;
            }
            else {
                IBW = 50 + (2.3 * ((hgtft - 5) * 12 + hgtinches));
               
                IBW2 = 50 + (2.3 * ((hgtft - 5) * 12 + hgtinches));
            }
            if (IBW > weight) {
                IBW = weight
            }
            CrCl = ((140 - age) * IBW * 1.23) / creatinine;
        }
        else {
            if (hgtft < 5) {
                IBW = 45;
                IBW2 = 45;
            }
            else {
                IBW = 45 + (2.3 * ((hgtft - 5) * 12 + hgtinches));
               
                IBW2 = 45 + (2.3 * ((hgtft - 5) * 12 + hgtinches));
            }
            if (IBW > weight) {
                IBW = weight
            }
            CrCl = ((140 - age) * IBW * 1.04) / creatinine;
        }



        var dose = Math.round((5 * IBW) / 40.0) * 40.0
        var IBW = Math.round(IBW, 1)
        var IBW2 = Math.round(IBW2,1)
        var CrCl = Math.round(CrCl, 0)

        if (CrCl < 40) {
            dose2 = "As GFR < 40mL/min Extended Interval Gentamicin is not indicated. Contact microbiology for an alternative agent";
            }
            else {
            dose2 = dose "mg - Note: This dose has been calculated using a weight of " IBW "kg and rounded to the nearest 40mg to aid administration";
        }

        document.getElementById('IBW2').innerHTML = IBW2 + "kg";
        document.getElementById('CrCl').innerHTML = CrCl + "mL/min";
        document.getElementById('dose2').innerHTML = dose2;
    }
</script>

    <br />
    <br />
    <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<table>
<tr>
	<td>Height</td><td class="style17"><input id='height_feet' value=""/> feet</td><td><input id='height_inches' value=""/> inches</td>
</tr>
<tr>
<td>Weight</td><td class="style17"><input id='weight' value=""/> kg</td>
</tr>
<tr>
<td>Age</td><td class="style17"><input id='age'value=""/> years</td>
</tr>
<tr>
<td>Creatinine</td><td class="style17"><input id='creatinine'/> mmol/L</td>
</tr>
 
<tr>
<td>Sex</td><td class="style1"><select id='sex'> <option value="M">Male</option><option value="F">Female</option></select></td>
</tr>
</table><br />
<input type="button" onclick="calculate()" value="Calculate!"/><input id="Reset" 
        type="reset" value="Reset" />
<br />
<br />
<br />
<br />

<table>
<tr><td class="style16">Ideal Body Weight:&nbsp; </td><td id='IBW2' /></td></tr>
<tr><td class="style16">Calculated GFR: </td><td id='CrCl' /></td></tr>
<tr><td class="style16">Calculated Gentamicin Dose: </td><td id='dose2' /></td></tr>
    </table>

What I am trying to do is have the dose displayed as:

xxdose mg - Note: This dose has been calculated using a weight of IBWkg and rounded to the nearest 40mg to aid administration

but if the CrCl is less than 40 then the dose message should be: As GFR < 40mL/min Extended Interval Gentamicin is not indicated. Contact microbiology for an alternative agent

can anyone help me with this please?

Check Cookie Code Doesn't Work

Similar Tutorials

View Content

Hello, i wrote this code to open a page if doesn't exist a cookie but it doesn't open the page do you know where I wrong?
Thank you !

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> HTML </title> 
</head> 
<body>
<script type="text/javascript">

function CookieLeggi(CookieNome)
	{
	if (CookieNome.length==0) return null;
	var PosizioneIniziale = document.cookie.indexOf(CookieNome+"=");
		if (PosizioneIniziale == -1) return null;
		PosizioneIniziale += CookieNome.length+1;  
	var PosizioneFinale = document.cookie.indexOf(";",PosizioneIniziale);
		if (PosizioneFinale == -1) PosizioneFinale = document.cookie.length; 
	return unescape(document.cookie.substring(PosizioneIniziale,PosizioneFinale));
	}

function CookieScrivi(name,value,expiresUdM,expires,path,domain,secure)
	{
	if (!name || !value) { return false }  
	if ((expiresUdM && expires) && (expiresUdM!='GMT')) {
		var ExpiresMillisec = ExpiresDate = Oggi = new Date();
		switch (expiresUdM) {    // calcola i JS-millisecondi del momento di scadenza
			case "anni":    ExpiresMillisec=Oggi.getTime()+expires*365*24*60*60*1000; break;
			case "mesi":    ExpiresMillisec=Oggi.getTime()+expires*31*24*60*60*1000; break;
			case "giorni":  ExpiresMillisec=Oggi.getTime()+expires*24*60*60*1000; break;
			case "ore":     ExpiresMillisec=Oggi.getTime()+expires*60*60*1000; break;
			case "minuti":  ExpiresMillisec=Oggi.getTime()+expires*60*1000; break;
			case "secondi": ExpiresMillisec=Oggi.getTime()+expires*1000; break;
			default:        ExpiresMillisec=Oggi.getTime()+expires; 
			}
		ExpiresDate.setTime(ExpiresMillisec);   
		expires = ExpiresDate.toGMTString(); }  
	secure = (secure=="1" || secure==1 || secure=="secure") ? 1 : "";
	document.cookie = name + "=" +escape(value) +
	        ( (expiresUdM && expires) ? "; expires=" + expires : "") +
	        ( (path) ? "; path=" + path : "") + 
	        ( (domain) ? "; domain=" + domain : "") +
	        ( (secure) ? "; secure" : "");

	if (CookieLeggi(name)==null && secure!=1) { return false; } else { return true; }
	}
</script>

<script type="text/javascript">
if (CookieLeggi(liveads) == "null")
{
window.open("http://www.google.com", "Google");
CookieScrivi(liveads, adsm, ore, 12, /, .localhost, 1);
}
else
{
break;
}
</script>
</body>
</html>

Super Easy Code Check Involving Changing Bg.color With Variable

Similar Tutorials

View Content

I am very new to coding, trying to teach myself some javascript. I know this is a very simple code, I just can't seem to nail down what is going wrong. Feeling really stupid right now.

Heres the code:

Code:

<html>
<head>
<script language="JavaScript">
var choice=confirm("Press ok for black. Press cancel for red.");
if (choice==true){
	document.bgColor="yellow";
	document.fgColor="black";
	}
else {
	document.bgColor="red";
	document.fgColor="white";
	}
</script>
<body>
<p>words</p>
</body>
</html>

If someone could take a second to set me straight, I would really appreciate it.

btw: hope I posted all this according to the "rules". I tried

Javascript Issue With Google Chrome (position:fixed Horizontal Position:absolute Vert

Similar Tutorials

View Content

I'm new to javascript and am not sure why this works in firefox and not chrome.
I am trying to create a script that keeps an object fixed horizontally while bing positioned absolute vertically.

if I replace the toPP variable in document.getElementById('fire').style.top = toPP; with say '50px' it will move the element down 50 pxs, but how I have it currently it doesn't do anything in chrome

Code:

<script type="text/javascript" >
	
	
window.onscroll = function() 
{
	if( window.XMLHttpRequest ) { 
		
			
			var x = 0 -document.documentElement.scrollTop;
			var toP = String(x);
			var toPP = toP + "px";
			
			document.getElementById('fire').style.position = 'fixed'; 
			document.getElementById('fire').style.top = toPP;
				
	}
}
	</script>

Change Position: Fixed To Position:absolute

Similar Tutorials

View Content

I need to convert a position:fixed element to position:absolute when the user resize their browser window below 1000px.

Right now it does nothing. The element always keeps the fixed positioning even after resizing the window.

Here's what I have right now:

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<base href="http://www.area51entertainment.co/" />
<title>Emoto <?php echo "$section"; ?></title>
<meta charset="UTF-8" /> 
<meta name="verify-v1" content="" />
<meta name="keywords" content=""  />
<meta name="description" content="" />
<meta name="author" content="Andrew McCarrick" />
<meta name="robots" content="index, follow" />
<style type="text/css">
body,html {
background: #FFFFFF; /* Old browsers */
color: #000000; 
font-family: Verdana; 
margin-right:auto;
margin-left:auto;
max-width:1000px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
</style>
<link rel="stylesheet" href="emoto/style.css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="http://www.area51entertainment.co/TouchIcon.png" />
<link rel="apple-touch-icon-precomposed" href="http://www.area51entertainment.co/TouchIcon.png" /> 
<link rel="image_src" href="./logo.png" /> 
<script language="javascript" src="emoto/float.js"></script>

</head>
<body>
<div class="wrapper">
<div id="header_float">
<div class="header_wrapper">
<div class="logo">
Picture
</div>
<div class="links">
Home | Settings | Notifications | Requests | Messages | Search Bar
</div>
<div class="links_right">
Profile Link/Sign-Out 
</div>
</div>
</div>
<div class="content_wrapper">
Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 T
est2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2
</div>
</div>
</body>
</html>

style.css
Code:

a:link {color: #FFFFFF; text-decoration: none;}
a:visited {color: #FFFFFF; text-decoration: none;}
a:active {color: #FFFFFF; text-decoration: none;}
a:hover {color: #3399FF; text-decoration: none;}

.wrapper{
min-height: 2000px;
min-width: 1000px;
}

#header_float{
width: 100%;
min-width: 1000px;
height: 35px;
left:0;
right:0;
top:0;
position: fixed;
background: #49963A;
z-index: 1000;
}

.header_wrapper{
width: 1000px;
height: 35px;
margin-right:auto;
margin-left:auto;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
color: #FFFFFF;
}

.logo{
float: left;
width: 150px;
height: 25px;
font-size: 26px;
position: relative;
top: -1px;
left: 8px;
}

.links{
float: left;
width: 670px;
height: 25px;
position: relative;
top: 7px;
}

.links_right{
float: right;
width: 180px;
height: 25px;
position: relative;
top: 7px;
}

.content_wrapper{
position: relative;
top: 35px;
width: 995px;
min-height: 450px;
}

img{
border: 0px;
}

float.js
Code:

if (screen.availWidth<=999)
document.getElementById('header_float').style.position = 'absolute';
else
document.getElementById('header_float').style.position = 'fixed';

How To Check Check If Facebook Like Button Liked On My Webpage

Similar Tutorials

View Content

On this webpage
http://www.corkdiscos.com/testimonials.html

i have a like button.
when a user clicks like a comment box appears.
when i unlike the button the comment box disappears

this is ok but when a user has already liked the facebook page and comes to my webpage
the comment box does not show.

so im looking for a piece of javascript to check if a user has like the button on my page and if so to show the comment box.

please check my source code of the website http://www.corkdiscos.com/testimonials.html to see what i have so far.

any help would be greatly appreciated

Check If Check Box Is Checked On Name Array

Similar Tutorials

View Content

Hi guys.

I'm working a bunch of pre existing code on a CMS. Just after a quick fix. Doing a show/hide thing on a particular div somewhere on the page depending if a checkbox is ticked or not.

Currently there is 3 checkboxes that are dynamically added through the CMS.

Here's simplified version of the form:

Code:

<form id="simplesearch" name="simplesearch">
<input type="checkbox"   onclick='showhidefield(this.value)' name="meta_data_array_search_criteria[custom_profile_type][]" value="5"  class="input-checkboxes" />
<input type="checkbox"   onclick='showhidefield(this.value)' name="meta_data_array_search_criteria[custom_profile_type][]" value="4"  class="input-checkboxes" />
</form>

And here's the javascript I was playing with.
Code:

function showhidefield(id)
{
   if(document.simplesearch.meta_data_array_search_criteria[custom_profile_type][''].checked) {
      document.getElementById("profile_fields_wrapper_" + id).style.visibility = "visible";
   }
   else
   {
      document.getElementById("profile_fields_wrapper_" + id).style.visibility = "hidden";
   }
}

Problem I'm having is how do i do a check to see if those checkboxes are checked in the javascript with those name arrays? How do i separate them? 'm guessing I have to loop through them or something?Hopefully that make senses - it's late here and I'm losing the plot Any pointers would be gratefully welcomed

Timer??

Similar Tutorials

View Content

Hi I am working on a chat application and am a bit stuck...In the database I have a field status which is set 1 for online and 0 for offline (PHP/MySQL)(at time of logging in/out), this shows the users status on a webpage. What I need is to know if there is a way I can set a timer so that if the user has been inactive for X amount of time, the database is auto updated and user is offline (1 set to 0).
Thanks for any help I recieve

Help With Timer

Similar Tutorials

View Content

I'm trying to build a time but it isn't displaying on screen

Code:

<html>
<head>
<script type="text/javascript">
function StartCounting(){
		setInterval("DoCounting()", 1000)

	}
	function DoCounting(){
	var obj =getElementbyId('countingtext');
	obj.innerHTML = '' + Counter;
	Counter++;
	if( Counter > 10)
	{
		Counter = 0;
		document.writeln("Timer Reset");
		}
	}
</script>
</head>

<body onload= "StartCounting()">
Here it is:<span id="countingtext"></span>

</body>
</html>

Timer

Similar Tutorials

View Content

How could I lock an "Enter" link on an intro page with a 30 second timer that is displayed on the bottom of the page and disables the "Enter" link so that visitors have to wait 30 seconds to read the rules/announcements before entering?

Timer Help

Similar Tutorials

View Content

Alright, im trying for my project to make 1 div scroll through a list of pictures. I have it so that it starts when I click the button. Now what im trying to do is after I start the timer I have the button changing values to 'Pause' instead of 'Start' but I can't figure out how to code to make the timer pause when i click the button again.

Code:

HTML:
<input id="timer"
         style="position: absolute; font-size: 50px;
                  background-color: red;	
	          top:750px;left: 800px;
		  height: 75px; width: 120px;"
	 type="button" value="Start" 
onclick="myTimer = setInterval('picture()', 2000);
           document.getElementById('timer').value = 'Pause';">

Code:

Javascript:
function picture()
{
   soccerImg.src = soccerPic[state];
   state++;
if(state == 35)
 {
  state = 0;
 }
}

Countdown Timer

Similar Tutorials

View Content

Please understand that i have looked through the different timers on the JavaScript section but did not find any that can do what i am looking for and i don't know programming to edit any of them.

I would like to have a countdown timer on my website that will count down from 12:00:01 am server time and end at midnight again of the same day (the clock should count down a full 24 hours) then it will automatically reset itself and count down again each and every day starting from 1 second after midnight. The count down should display hours : minutes : seconds just like a digital watch. I would also like to it to go with the server time and not client computer time so it will only count down according to the server time.

One more thing .... each day a new trivia question will be posted and ppl have 1 day to answer the trivia question for a chance to win something (that is why the script is counting down). Will the script be able to automatically load a new trivia each day at midnight as the timer resets or do i have to load the trivia manually? If im getting way out of my head here then lets forget this last part.

If it can be done i will certainly appreciate the advice.