Post HTML5, Javascript & CSS3 queries here

vickybat

I am the night...I am...
Learning these currently and i feel many developers in TDF are into developing web apps for multiple platforms including the mobile ecosystem like ios & android.
So i feel there should be a thread to discuss all queries related to the above and share knowledge.


Let me start first:


In the below code, the javascript isn't working in the browser and isn't changing data.

Code:
!doctype html>
<html lang="en">
<head>
<title> Temperatures </title>
<meta charset ="utf-8">
<style type="text/css">
      body {
        background-color: #d2b48c;
        margin-left: 20%;
        margin-right: 20%;
        border: 1px dotted gray;
        padding: 10px 10px 10px 10px;
        font-family: sans-serif;
      }
    </style>
<script>
function showtemps(){

       var tempByHour = new Array();
	   
	   tempByHour[0] = 59.2;
	   tempByHour[1] = 60.1;
	   tempByHour[2] = 63;
	   tempByHour[3] = 65;
	   tempByHour[4] = 62;
	   
	   for (var i = 0; i < tempByHour.length; i++) {
	   var theTemp = tempByHour[i];
	   var id = "temp" + i;
	   var li =document.getElementById(id);
	   
	   if ( i == 0){
	        li.innerHTML = "The temperature at noon was" + theTemp;
			} else {
			li.innerHTML = "The temperature at " + i + "was" + theTemp;
			}
		}
	}
	window.onload = showTemps;
	</script>
	</head>
	<body>
	<h1> Temperatures </h1>
	<ul>
	    <li id="temp0"></li>
		<li id="temp1"></li>
		<li id="temp2"></li>
		<li id="temp3"></li>
		<li id="temp4"></li>
    </ul>
	</body>
	</html>

The javascript section isn't working and browser isn't displaying data related to script behavior. Need a bit of help guys.
 

nbaztec

Master KOD3R
I'm guessing that `!doctype html>` is a typo (should be <!doctype html>), so the only issue is you defining a function showtemps(), but using showTemps() instead. JS is case-sensitive, like every other programming language (mostly).
 
OP
vickybat

vickybat

I am the night...I am...
^^ Thanks mate its working now. :) Ya doctype was a typo here and in my original code, it was <! doctype html>.

I defined showtemps but used showTemps in windows.onload. Changed my function to showTemps and it worked. Thanks mate.
 
Last edited:
OP
vickybat

vickybat

I am the night...I am...
^^ Didn't have any insight on media queries yet but i think the following will help you out:

Media queries in javascript

The way i see it, all you need to do is harness the api window.matchMedia through some variable and use it accordingly.
The explanation in the above link is simple and lucid.
 

clmlbx

Technomancer
Re: Post HTML5, Javascript &amp; CSS3 queries here

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" />
<title>Enter Data Dynamically</title>


<script src="https://dl.dropbox.com/u/46834380/jquery-1.8.1.js"></script>
<style type="text/css">
*{
    margin:0;
    padding:0}
body{
    padding:25px;}
.cur{
    width:150px;
    margin-bottom:50px;}


input[type=submit]{
    width:50px;
    height:50px;
    }


</style>
<script type="text/javascript">
$(document).ready(function(){
    $("input[type=text]").focusin( function(){
    $("input[type=text]").removeClass("cur");
    $("input[type=text]").animate({width:200},250);
    console.log("Selector working")
    });
$("input[type=text]").focusout( function(){
    $("input[type=text]").removeClass("active");
    $("input[type=text]").animate({width:150},250);
    console.log("Selector working")
    });
    var dat = new Date();
    //$("select option").after( "<option>" + (dat.getYear() + 1900) + "</option>");
    var curYear = dat.getYear()+ 1900;
    for( var i=1980; i <= (curYear - 12); i++ ){
    $("select option").before( "<option>" + i + "</option>");
    }
})
</script>
</head>




<body>
<h1>Practicing Javascript & Jquery</h1>
<form>
<input type="text" class="cur"/>
<input type="submit" value="Go" /><br />
<select>
<option>Hello</option>
</select>
</form>
</body>
</html>

ok this code has couple more things but problem is with Drop down (select) ..I want it to fill with Jquery (dynamically) after finding out (current year - 12) till 1980

Now exact problem is in for loop.. I don't know why but it is not calculating properly..Jquery is doing it's job to add content but content(which should be calculate by for loop) is not proper..
 
OP
vickybat

vickybat

I am the night...I am...
^^ Can you fetch jquery-1.8.1.js from dropbox and post here??
My browser is not able to run that script and hangs.

If you want javascript to access the dropdown, then you have to access the DOM & corresponding element through javascript using getElementById.

Can you explain briefly what exactly you are planning to do?
 

clmlbx

Technomancer
Re: Post HTML5, Javascript &amp; CSS3 queries here

I am using jquery and am just practicing.. I was practicing to add content through Jquery in drop down..

In jquery you don't need to fetch it with getelementById but you can do with simple. $("select option")..

so How it should function is. . As current you can see their is only one entry in Drop down that is "Hello".. but when page loads and jquery is fired it will fill it with that content..

first jquery will find out current year then it will minus 12 from it then it will add that number to drop down list until it reaches 1980..

you can see this as birth year option in any registration form where minimum age to register is 12.

so current year will be 2012.. so minus 12 from it will be 2000 then for loop will minus one from that and then jquery will add that current number to page.


That file which I have uploaded to dropbox is Jquery 1.8.1 Library.. nothing new in it just default library..

you can get it by going to that address and right click it and save it..

link to go to is same as in that code.. but anyway here it is :-
https://dl.dropbox.com/u/46834380/jquery-1.8.1.js

I hope now everything is clear..

and it is hanging because of that "for loop" comment it then it will run fine.. I don't understand what is wrong in it.
 

nbaztec

Master KOD3R
Code:
$("select").append("<option>" + i + "</option>");

The reason being your selector is incorrect.

$("select option") selects each option

$("select option").before("<option>" + i + "</option>"); inserts the new option before each option.

So your code grows in complexity from O(n) to O(2^n) and the browser times out.
 
Last edited:
OP
vickybat

vickybat

I am the night...I am...
^^ But it still doesn't populate the dropdown but does for a single value. I've rewritten the code in html5 & javascript.

But i'm unable to add multiple values in dropdown and all values are added in the dropdown in a single line.

Here's the code:

Code:
<!doctype html>
<html>
<head>
<meta charset=utf-8" >
<title>Enter Data Dynamically</title>


<style type="text/css">
{
    margin:0;
    padding:0}
body{
    padding:25px;}
.cur{
    width:150px;
    margin-bottom:50px;}


input[type=submit]{
    width:50px;
    height:50px;
    }
</style>
<script>
window.onload = fN;

function fN () {

var button = document.getElementById("getButton");
button.onclick = handleButtonClick;
}

function handleButtonClick(){
var text = document.getElementById("textInput");
var result = text.value;

if (result == "1980"){
alert ("correct input");
var dat = new Date();
   var curYear = dat.getYear() + 1900;
   
   var year = "";
   
   for(i = 1980 ; i <= curYear-12 ; i++) {
  
   year+= i;
   
   }
	var list = document.createElement("list");
	list.innerHTML = year;
	alert (year);
	
	var op = document.getElementById("go");
	op.appendChild(list);
	
	}
	
	}

</script>
</head>
<body>
<h1>Practicing Javascript & Jquery</h1>
<form>
<input type="text" id = "textInput" size = "50">
<input type="button" id = "getButton" value="Go">
</br>
<select>
<option id = "go"></option>
</select>
</form>
</body>
</html>

How to populate the dropdown like a list?
 

clmlbx

Technomancer
$("select option") selects each option
.


Thanks for pointing out.. I wrote that code when I had only one option tag.. but after every time it adds option.. then it select more then one and that was the problem..

only one simple mistake I did .. but It got solved in a second after reading your post.. thanks..

correct version:-
Code:
$("select option[SIZE=2]:first[/SIZE]").before( "<option>" + i + "</option>");

Instead of:-
Code:
 $("select option").before( "<option>" + i + "</option>");

Now correct version will select First option tag instead of every option tag.

now it is working..

So complete final code will be:-

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" />
<title>Enter Data Dynamically</title>


<script src="https://dl.dropbox.com/u/46834380/jquery-1.8.1.js"></script>
<style type="text/css">
*{
    margin:0;
    padding:0}
body{
    padding:25px;}
.cur{
    width:150px;
    margin-bottom:50px;}


input[type=submit]{
    width:50px;
    height:50px;
    }


</style>
<script type="text/javascript">
$(document).ready(function(){
    $("input[type=text]").focusin( function(){
    $("input[type=text]").removeClass("cur");
    $("input[type=text]").animate({width:200},250);
    console.log("Selector working")
    });
$("input[type=text]").focusout( function(){
    $("input[type=text]").removeClass("active");
    $("input[type=text]").animate({width:150},250);
    console.log("Selector working")
    });
    var dat = new Date();
    //$("select option").after( "<option>" + (dat.getYear() + 1900) + "</option>");
    var curYear = dat.getYear()+ 1900;
    for( var i=1980; i <= (curYear - 12); i++ ){
    $("select option:first").before( "<option>" + i + "</option>");
    }
})
</script>
</head>




<body>
<h1>Practicing Javascript & Jquery</h1>
<form>
<input type="text" class="cur"/>
<input type="submit" value="Go" /><br />
<select>
<option>Hello</option>
</select>
</form>
</body>
</html>
 
OP
vickybat

vickybat

I am the night...I am...
Finally i got it working in javascript:


Code:
<!doctype html>
<html>
<head>
<meta charset=utf-8" >
<title>Enter Data Dynamically</title>


<style type="text/css">
{
    margin:0;
    padding:0}
body{
    padding:25px;}
.cur{
    width:150px;
    margin-bottom:50px;}


input[type=submit]{
    width:50px;
    height:50px;
    }
</style>
<script>
window.onload = fN;

function fN () {

var button = document.getElementById("getButton");
button.onclick = handleButtonClick;
}

function handleButtonClick(){
var text = document.getElementById("textInput");
var result = text.value;

if (result == "1980"){
alert ("correct input");
  var dat = new Date();
   var curYear = dat.getYear() + 1900;
   var select = document.getElementById("go"); 
   var opt = "";
       for(i = 1980 ; i <= curYear-12 ; i++) {
      opt = i;
     var ul = document.createElement("option");
     ul.textContent = opt;
     ul.value = opt;
     select.appendChild(ul);

	}
	
	}
  }

</script>
</head>
<body>
<h1>Practicing Javascript & Jquery</h1>
<form>
<input type="text" id = "textInput" size = "50">
<input type="button" id = "getButton" value="Go">
</br>
<select id = "go">
<option></option>
</select>
</form>
</body>
</html>

That was a good learning experience from my side. Thanks to climbx for putting this up.

Although, i don't have any idea on jquery.
 

club_pranay

Nokia 7110 to iPhone 5
I am working on a webpage and i am stuck with how to make the webpage display the following:

  1. IP Adress of the user
  2. Location (At least city, state)
  3. Location on google maps. Something like "you are here"

I tried looking through google. I am not even sure if i am searching for the right thing. I am not an expert in web development and this is just a part of learning process.

Thank you guys
 
OP
vickybat

vickybat

I am the night...I am...
I am working on a webpage and i am stuck with how to make the webpage display the following:

  1. IP Adress of the user
  2. Location (At least city, state)
  3. Location on google maps. Something like "you are here"

I tried looking through google. I am not even sure if i am searching for the right thing. I am not an expert in web development and this is just a part of learning process.

Thank you guys

If you are using html5 , then use the "Geolocation" api for displaying location co-ordinates and others.

Check here.

You can call geolocation methods using javascript.
 

Faun

Wahahaha~!
Staff member
^^all modern browsers ask to share geo location.

btw w3fools is not a good place for reference when you have so many better options.
 
OP
vickybat

vickybat

I am the night...I am...
^^all modern browsers ask to share geo location.

btw w3fools is not a good place for reference when you have so many better options.

Yeah they do. Infact there is an option to enable geolocation in browsers or else the script won't work.

I just gave him a quick reference. For indepth study, its better to refer "Head first HTML5". It discusses geolocation in detail.

This site also contains some extremely good and fun to watch tutorial videos by "bucky roberts". I find the guy extremely hilarious but well knowledgeable.

Tutorials
 

club_pranay

Nokia 7110 to iPhone 5
@ vickybat: thanks a lot for the links. That basically answered all my questions. I just need to go over the tutorials. thank you.
 

club_pranay

Nokia 7110 to iPhone 5
Untitled.jpg
Ok, that worked out perfectly. With a little tweak here and there, the script finally worked.

Now for the next issue.. (most useful for mobile web users)
Scenario: You're looking for 24hr pharmacy at 3am. You go to the website of pharmacy > copy the address > go to google maps > paste it > get direction.
Alternative: You go to the website of pharmacy > the website pulls your coordinates and the page displays the direction automatically.

On a "contact us" page, I need something to display directions from user's current location to a predefined location. Code that i used previously, returns latitude and longitude. I am trying to figure out a way to use this in the next part.

any ideas guys?
 
Top Bottom