Post HTML5, Javascript & CSS3 queries here

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.

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).

^^ 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.

Stucked for a while

R

How to use Media Queries in JavaScript.Let me know.

^^ 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.

Re: Post HTML5, Javascript & CSS3 queries here

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "*www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="*www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enter Data Dynamically</title>


<script src="*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..

^^ 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?

Re: Post HTML5, Javascript & 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 :- *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.

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.

^^ 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?

nbaztec said:
$("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" "*www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="*www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enter Data Dynamically</title>


<script src="*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>

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.

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

IP Adress of the user
Location (At least city, state)
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

get the ip address from request headers.

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

IP Adress of the user

Location (At least city, state)

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.

^^all modern browsers ask to share geo location.

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

Faun said:
^^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

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

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?

^^ I don't think geolocation can do that. It just returns latitude and longitude of current position.

But there has to be a way to use the returned value in the maps javascript API. Let me try.

Why does this code not work properly?
I am learining javascript on codecademy and just learn about functions. I built the rock, paper and scissors game and tried to include the features given in the suggestion in the final lesson. But it does not work. When I enter the input of rock, paper or scissors, nothing happens. How to fix it? Is the 'return' preventing the game to run properly in the compare function?

var game = function () {
var userChoice = function (user) {
user = prompt("Do you choose rock, paper or scissors?");
if ((user != "rock") && (user != "paper") && (user != "scissors")) {
alert("The input is wrong.");
userChoice();
} else {
return user;
}
};
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
var compare = function (choice1, choice2) {
if (choice1 === choice2) {
return "The result is a tie!";
}
if (choice1 === "rock") {
if (choice2 === "scissors") {
return "rock wins";
} else {
return "paper wins";
}
}
if (choice1 === "paper") {
if (choice2 === "rock") {
return "paper wins";
} else {
return "scissors wins";
}
}
if (choice1 === "scissors") {
if (choice2 === "rock") {
return "rock wins";
} else {
return "scissors wins";
}
}
};
compare(userChoice(), computerChoice);
};
game();

This is the first time I am learning coding after learning HTML and CSS and I need some help.

Please use jsfiddle to post your codes. This way it is easy for a guy to debug and so you will see the changes also.

furious_gamer said:
Please use jsfiddle to post your codes. This way it is easy for a guy to debug and so you will see the changes also.

Here it is Edit this Fiddle - jsFiddle

Are you sure you are printing something? You are just simply returning value, so your code just works fine. Put alert o you know that it is working.

For all JS coders, use console.log() or alert() to debug.

Code : Edit this Fiddle - jsFiddle

OK I am trying.

You check the fiddle from my post. It is just working fine.

furious_gamer said:
Are you sure you are printing something? You are just simply returning value, so your code just works fine. Put alert o you know that it is working.

For all JS coders, use console.log() or alert() to debug.

Code : Edit this Fiddle - jsFiddle

Thanks! It worked :razz:

See this fixed code.
Edit this Fiddle - jsFiddle
Also, how do I stop the dialogs if the user presses cancel button when selecting rock, paper and scissors?

The problem is you are code is linear. Just make it little blocks(means, write functions separately instead of writing nested functions), so while user clicking Cancel, nothing will happen.

Thanks, for your advice. I am beginning to learn coding right now. I will try new ways to do the same thing to understand it better.

When you write functions in js, write them in separate blocks. This way you can take full control of it's behavior.

Like :

Code:

function game() {...}
function compare(){...}
function getInput(){...}

Call them in whatever order you want.

How do you put code in separate boxes on the forum :?:

Use

Code:

[/"CODE] TAGS. (Remove the double quotes after /)

I think all of you deserve a good laugh :lol:

Introduction to Objects II Forum | Codecademy

I'm working on a project where accessing the inbuilt webcam is required!!
Can anybody provide me source code for accessing it??

I assume you want it in jquery. Because you didn't mention which language are you coding.

jQuery webcam plugin • Code is poetry

G

Hello,
an anyone tell me which font is used in Google's Homepage (Google.com) in the header part ?? I need to know this as I'm trying to design a similar looking header.

By header I mean the black bar at the top that has '+You, Gmail etc etc'

I tried 'Inspect Element' in my browser but that did not help me.

Kindly help.

^^they are simple arial 13px size and 27px line height

G

Re: Post HTML5, Javascript & CSS3 queries here

^^ Thanks a lot

BTW, how did you figure that out ?

Got another trouble ??

how do I create the buttons that are used in Google's Homepage ?? They are way too different form the standard buttons.

PS: I'm done with all my issues, I created the button and things became simple with CSS3. Thanks anyway.

S

Think there is a google bootstrap .. not sure..

Re: Post HTML5, Javascript & CSS3 queries here

gigyaster said:
^^ Thanks a lot
BTW, how did you figure that out ?

Got another trouble ??

how do I create the buttons that are used in Google's Homepage ?? They are way too different form the standard buttons.

PS: I'm done with all my issues, I created the button and things became simple with CSS3. Thanks anyway.

For simple button, you can use the form element of html and set input type to "button" along with other attributes like value, onclick etc. Styling can be done using css3.

Then access the DOM using javascript and assign any function to that button.

eg.

PHP:

//html code...it has missing head, body and other important elements

<form>
<input type = "button" value = "click me"  onlick = "testFunc()">
</form>

<script type ="text/javascript">
      testFunc() {
     alert (" hey now brown cow!!!!");
}
</script>

H

Re: Post HTML5, Javascript & CSS3 queries here

gigyaster said:
^^ Thanks a lot
BTW, how did you figure that out ?

Got another trouble ??

how do I create the buttons that are used in Google's Homepage ?? They are way too different form the standard buttons.

PS: I'm done with all my issues, I created the button and things became simple with CSS3. Thanks anyway.

Pro tip: When in doubt about how a web page does things, press F12. Unless the webdev has gone to extreme lengths to obfuscate the HTML, CSS or JS any half decent programmer should be able to figure it out.

For example, everything you want to know should be there under the div "gbz" which is under "gbzw" under "gb" under "mngb" in the main body.

H

^Get your sarcasm meter checked.

Did you even bother reading the spoiler?

If not, here is what it says:

dead5 said:
It is a high level scripting language primarily used in web browsers as an easy way for anyone, even those not familiar with the conventions of programming to work with, that also has used in various places like game development with Unity3D. It is a language that emphasises the freedom of the user to work however he or she wants without forcing them to follow any conventions. The only disadvantage JS has for the tasks it is designed is the lack of scoping and uses much of the same structures from imperative languages like C, For example while, for and if. The language is dynamically typed and almost entirely object based(in my experience). One of the best parts is that functions are first class citizens in the language. Inspite of all that it also allows you to program like it is an object oriented language. So depending on the style and preferences of the user it can be used like an imperative language, a functional language or an object oriented language, if not purely as one. However due to this it is also possible to write some truly indecipherable code, even ones that surpass Java in terms of being extreme unreadability.

BTW, I'd personally recommend the MDN documentation for starting with JavaScript. Khan Academy's lectures are supposed to be good but I've never really bothered checking them out.

Buddy, no matter how much programming knowledge you have,

JAVA SCRIPT is Java for Web Browser

statement is not acceptable at all. So two brothers, stop backing up each others for nonsense posts and try to do something constructive. It is not a thread to glorify yourselves about your learning. I have also checked the SPOILER posted by Dead5 which is simply his opinion about Javascript, not to do anything about the original description of it.

JavaScript copies many names and naming conventions from Java, but the two languages are otherwise unrelated and have very different semantics. The key design principles within JavaScript are taken from the Self and Scheme programming languages

Try to focus on things people are asking here, not to glorify your personal findings.

^^ second that.

Re: Post HTML5, Javascript & CSS3 queries here

im no programmer. But this seriously caught my eye. Javascript is java for browsers. :lol:

Extreme Gamer said:
He has programming experience with more languages than you will probably ever learn. He knows Python, Java, JavaScript, Ruby, C, C++, Lua, TorqueScript, some Scala and a little bit of C#, and he's started learning Boo and Groovy. He gave up on OCAML because he would not need to program with it. After Groovy and Boo he will learn Haskell.

FWIW he finds Java despicable, so he is more than qualified to talk about what he's talking about.

im begining do doubt if he is a script kiddie.

^^

another ban ?

Hii
I have just completed 12th sci.
Now I have vacation.
I want to learn programming in this vacation.
Which shold I learn HTML or C or C++ or JAVA ????
I want to learn this at home(without any classes)
can i learn it without classes??
& also plz suggest me some website or books or ebooks for learning that....

^ You might wanna try out www.udacity.com and coursera.com they have pretty good collection of courses and materials.

ok thank you for your help...

Re: Post HTML5, Javascript & CSS3 queries here

NoasArcAngel said:
im no programmer. But this seriously caught my eye. Javascript is java for browsers.

im begining do doubt if he is a script kiddie.

Did you or didn't you read the spoilers?

His last post in this thread was deleted although it was not at all offensive. He comprehensively explained how he was not BSing. Picture for your convenience.

*i.imgur.com/lBA8dHL.png

Need help in Jquery Jqgrid and datepicker plugins. If anyone have a god hand in this area, plz do reply so that I can ask my doubt. Thanks

What's your doubt?

Working on a Event based calendar. Havent used Jqgrid yet but the grid containers available by WDCalender plugin needs some help. I want to disable the old dates so that no one can create a new event on previous dates. Even if I disable the old dates in calendar widget, the grid cells still are available to add event on previous dates.

Can you do one thing... Add your code in a jsfiddle and paste the link here

Piyush said:
Working on a Event based calendar. Havent used Jqgrid yet but the grid containers available by WDCalender plugin needs some help. I want to disable the old dates so that no one can create a new event on previous dates. Even if I disable the old dates in calendar widget, the grid cells still are available to add event on previous dates.

I am currently using jqgrid in my project and i must say, its very good and highly customizable. you can set whether any column will be editable or not, or enable editing anytime you want.

abhidev said:
Can you do one thing... Add your code in a jsfiddle and paste the link here

Since it is an office task, I am not allowed to post any code snippet anywhere

anikkket said:
I am currently using jqgrid in my project and i must say, its very good and highly customizable. you can set whether any column will be editable or not, or enable editing anytime you want.

Actually I want to dynamically change the cells depending upon system date. Suppose , if I open the app today, I want the cells of previous dates to be fade out automatically so that the user of the app cant add an event on previous date.

An example code would suffice on jsfiddle.com

Re: Post HTML5, Javascript & CSS3 queries here

abhidev said:
An example code would suffice on jsfiddle.com

ok will PM you the file once I reach home as I cant do it from here

Ok here is an example code

Code:

jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter},
      ...
   ]
...
});

Here the editable property is set true. But what I want is to add a condition which checks the date of that particular cell and disable it if it is an old date. Is this can be done ?

Also look at the following code.

Code:

function currencyFmatter (cellvalue, options, rowObject)
{
   // do something here
   return new_format_value
}
</script>

I havent used this one yet but from the tutorials I learned that we can create our own customised formatter. If it is possible, can I use this to solve my problem? if yes, how?

Got a problem.
I am creating a form in which when a user submits the form, a unique ID will be generated. That ID should b displayed as a message box/ alert box to the user (I'm referring to a small message window just like a modal window).
IS there a method/plugin to do that?
PS: Using Jsp and Jquery along with Oracle .
I only need a way to display that small window, thats what I'm asking about. Generating that unique ID will be done by Oracle, so no issues there.

just insert that Uinique ID inside a <div> that is vertically/horizontally center aligned using jquery. you can then show/hide the div as per your needs.

$('#modal').show(); OR $('#modal').hide();

Ok a little change Abhidev... I wont be using Modal window since the new window which is opened is not what I was looking for. I'm looking for a small message/ alert box which will only show that unique ID and the only button on that small window is to close it. It shouldn't even have a title bar or something like that. You must have come across several alert/message box which are seen when a web site requires you to log-in. That particular window has only username and password field apart from Cancel and Submit button. I'm looking for something like that.

Piyush said:
Ok a little change Abhidev... I wont be using Modal window since the new window which is opened is not what I was looking for. I'm looking for a small message/ alert box which will only show that unique ID and the only button on that small window is to close it. It shouldn't even have a title bar or something like that. You must have come across several alert/message box which are seen when a web site requires you to log-in. That particular window has only username and password field apart from Cancel and Submit button. I'm looking for something like that.

Try using the confirm method.

PHP:

confirm("Unique ID");

When you press ok, the box disappears.

Are you connecting/integrating oracle forms with JavaScript/JQuery ?

here's the example

Re: Post HTML5, Javascript & CSS3 queries here

vickybat said:
Try using the confirm method.

PHP:

confirm("Unique ID");

When you press ok, the box disappears.

Are you connecting/integrating oracle forms with JavaScript/JQuery ?

Ok will try that. And yea I'm gonna import that unique ID via Oracle DB with Jquery and JSP.
I was also thinking of using Alert method. Will it fulfill my requirement? That is, will I be able to import the unique ID into that alert box somehow?

abhidev said:
here's the example

Yea abhidev something like this. So will I be able to import a unique ID from db and show it in this window?

yes...since you are using JSP..add it as a jsp variable in your template and you shall be able to use it either using a div or a simple alert box.

Re: Post HTML5, Javascript & CSS3 queries here

Alright thats what I wanted to know whether it was possible or not
Thanks

--------------------------------------------------------
Done that.
Another query:
There is a table which holds records of some sort. I want to make the rows change color from white (default) to some other color only when I hover my mouse on it. Now the problem is, I cant use nth-child property from CSS because IE 8 and below dont support it (Ya I know you want to ask why are you even considering IE, but nvm this thought). So... what can I do?

Are you targeting even and odd rows or just any row in hover?

abhidev said:
Are you targeting even and odd rows or just any row in hover?

Only while hovering

Its as simple as
tr:hover{
background: #eee;
}

abhidev said:
Its as simple as
tr:hover{
background: #eee;
}

Will it work with IE8 too? And possibly IE 7 too?
I cant try it on my side coz we have IE 9 but some people may be using IE7 still

You probably have to use some work around for IE

It worked

For IE7 IE8?

Tried for IE8 for now. We wont let people use IE7

Hehe

Ok another one
I am creating a drop down with some choices.. for eg. consider them as A, B, C and Other
And in front of drop down, there will be a text box, empty by default.
And what I need is when I select either of A/B/C, the same value should be copied into the text box BUT when I select Other, the text box should be empty so that user can enter data on his own.

I can do 1 task at one time but I'm not able to integrate both requirements. That is, Either I can copy the value OR I can make the box editable for all choices.

Can you add your code on jsfiddle.com?

abhidev said:
Can you add your code on jsfiddle.com?

Reached home just now... will resume the work on monday now

Hehe.. it's pretty simple though

Piyush said:
Ok another one
I am creating a drop down with some choices.. for eg. consider them as A, B, C and Other
And in front of drop down, there will be a text box, empty by default.
And what I need is when I select either of A/B/C, the same value should be copied into the text box BUT when I select Other, the text box should be empty so that user can enter data on his own.

I can do 1 task at one time but I'm not able to integrate both requirements. That is, Either I can copy the value OR I can make the box editable for all choices.

Here you go:

html

PHP:

<select id = 'test' size = "1">
    <option value = "A"  selected="selected">A</option>
    <option value = "B">B</option>
    <option value = "C">C</option>
    <option value = "other">OTHER</option>
</select>
<input type ="text" id = 'Name' value = "Select an option hoss!"/>

javascript

PHP:

document.getElementById("test").onchange = populateText;

       function populateText() {
         var obj_sel = document.getElementById("test").value;
            
          if(obj_sel == "other")
            {
                 document.getElementById("Name").value = "";
            }
            else{
          document.getElementById("Name").value = obj_sel;
            }
    }

Check the implementation in JSFiddle

Edit fiddle - JSFiddle

@ abhidev

I did not know about JSFiddle. Its awesome.

Thanks for sharing man!

So you want to disable the textbox for choices other than 'Other' ?

Yes jsfiidle is pretty quick way to run sample code

vickybat said:

Here you go:

html

PHP:

<select id = 'test' size = "1">
    <option value = "A"  selected="selected">A</option>
    <option value = "B">B</option>
    <option value = "C">C</option>
    <option value = "other">OTHER</option>
</select>
<input type ="text" id = 'Name' value = "Select an option hoss!"/>

javascript

PHP:

document.getElementById("test").onchange = populateText;

       function populateText() {
         var obj_sel = document.getElementById("test").value;
            
          if(obj_sel == "other")
            {
                 document.getElementById("Name").value = "";
            }
            else{
          document.getElementById("Name").value = obj_sel;
            }
    }

Check the implementation in JSFiddle

Edit fiddle - JSFiddle

@ abhidev

I did not know about JSFiddle. Its awesome.

Thanks for sharing man!

abhidev said:
So you want to disable the textbox for choices other than 'Other' ?

Yes jsfiidle is pretty quick way to run sample code

Yup and thanks it worked. Things going good so far.
Will come with some more doubts.

Back with another query.

The form I'm working in should also contain a button to upload files to our system (i.e. the server). And the files been uploaded should be visible somewhere on a page (or small window) where I can view them any time. How to do this?

I researched a bit and found fileupload property in html. But how to view the uploaded files? Need help.

Yes use the file upload property and to view files open the link in a new tab

Re: Post HTML5, Javascript & CSS3 queries here

abhidev said:
Yes use the file upload property and to view files open the link in a new tab

Ok I can upload files with that property. The files will be saved to a server and the listing can be shown on a separate page. But will it work that way that if I click on the file name, it will be opened just like that? I have no idea regarding that.

How about this??
*www.tutorialspoint.com/jsp/jsp_file_uploading.htm

yes this is correct...once you handle the file upload and display the uploaded files list, these files can then be served and will be available to view.

The form is working kinda ok. When I click on submit button to upload the file, the next page opens up showing this error/statement

uploaded filename: nullscript.txt

Whats happening?

First check if the file has been uploaded to ur server

Re: Post HTML5, Javascript & CSS3 queries here

abhidev said:
First check if the file has been uploaded to ur server

nope...
the directory is empty
Also, in that code there was a statement for maxfilesize... just in case.
And those files were being moved to c:temp folder . Not there either.

Looks like I gotta check the code more deeply now...esp. around that getinitparameter area

Also.. in my previous post, its actually uploaded filename: null
that script.txt was the file name that was being uploaded

You'll have to debug n check if the file is being uploaded properly

upload

Check this and tell me whats wrong Abhidev

Yeaa...will check once I reach office

Re: Post HTML5, Javascript & CSS3 queries here

abhidev said:
Yeaa...will check once I reach office

One thing noticed that the XML file had wrong version of apache listed in the code so I fixed that.

Now when I click on upload button, I'm still getting that null error.
So I ran the fileupload.jsp page on browser and came to know that i'm getting nullpointerexception error (I know its very vague...)

Update:
Its working now

Now I have to work on downloading the uploaded file.

Re: Post HTML5, Javascript & CSS3 queries here

Piyush said:
One thing noticed that the XML file had wrong version of apache listed in the code so I fixed that.

Now when I click on upload button, I'm still getting that null error.
So I ran the fileupload.jsp page on browser and came to know that i'm getting nullpointerexception error (I know its very vague...)

Piyush, what you've posted here is a JSP (Java Server Pages) request handler. The XML is nothing but a deployment descriptor. These are standard J2EE components.
You are actually asking Java in an html thread.

Do you have J2EE knowledge? I figure that's why you are having problems in deciphering the issues.

Anyways, i'll help you. I tested the code in my machine, and it works just fine. That is, i'm able to upload files into the required directory, of my choice.
I assume you are using the apache tomcat webserver/J2EE container

Here's what you should do:

1.All those files you sent, should reside inside the server directory. You apache directory should contain sub directories like bin, webapps,etc.

2.Copy the files inside the webapps folder, and create another folder inside it, which will be the main application folder.Inside that, create another directory called "WEB-INF".

3.Now copy the "upload.jsp" and "file_upload.html" inside the main application folder (not WEB-INF) and copy the xml file (name that web.xml and not webapp.xml) inside the WEB-INF folder.

4.Now comes the important part. Your JSP file has "apache common" import statements, but the application is not able to find those libraries. The DiskFileItemFactory is a class that extends Object
and implements ServletFileUpload. Standard java terms. So you want to include those libraries inside the server's "lib" directory.

5.Download the Jar files here and here and extract them into the "lib" folder in server.

6.Open the web.xml and give proper path in the <context-param></context-param> i.e where exactly you want to save the uploaded file.

7. Restart the webserver and it should work now.

P.S - Remember, don't access the file_upload.html by just clicking on it. It will be static. After starting the webserver, access the html, through server URL eg. localhost:8080/xyz/abc/file_upload.html(directory path of file location). It will work.

I did it the exact same way you suggested just above. I knew it was kinda weird asking servlets and JSPs on a scripting and web designing thread

But I though since I asked somewhat related queries on this thread, why not continuing it. Actually I was doubtful about the possibilitiy of replies in the java dedicated thread coz of inactivity there.

Actually what happened was when I loaded the Commons-IO and commons-FileUpload jar files, I also copied them in the Java Jre lib folder, thinking that it will be available for all the projects. And that was the big mistake because its been observe that if there are duplicate of jar files with same api (that is newer and older version), there is ought to be some class collisions and that why I was stuck. I learned this from a guy who said this:

You've duplicated older versioned appserver-specific libraries into webapp's /WEB-INF/lib, like servlet-api.jar, jsp-api.jar and so on.

I also forgot to give detailed error. The error I was getting was Org.Apache.Jasper.JasperException. So my bad again.
And regarding my J2EE knowledge, I used to code on java during 2nd/3rd yr of my college. After that I just stopped coding at all (coz of various reasons) and was checking new stuff like Python/Ruby/Joomla.... So it was hard on me to get right back on track just like that

^^ Glad that you've solved the issue mate.

If you are developing end to end, you should know server side languages too. Read up on servlets, jsp's , sessions etc and these will seem easier than they look.

vickybat said:
^^ Glad that you've solved the issue mate.

If you are developing end to end, you should know server side languages too. Read up on servlets, jsp's , sessions etc and these will seem easier than they look.

Yup you are right. I should have at least 1 server side language on my tips.
One thing I want to ask you from your prog experience. When should I use servlets and JSPs. When I used to learn java coding, I used to come across this staement many times that "JSP is far better than Servlets these days". Why is this so??

Piyush said:
Yup you are right. I should have at least 1 server side language on my tips.
One thing I want to ask you from your prog experience. When should I use servlets and JSPs. When I used to learn java coding, I used to come across this staement many times that "JSP is far better than Servlets these days". Why is this so??

Well buddy you'll know that in detail when you start using servlets and jsp hands-on. Just know that in a servlet, you put html elements inside a java class, which can get very clumsy.
Jsp is just the opposite, i.e you use script tags <% %>, for embedding java.

Besides, a JSP page compiles into a servlet only, which is generated by the web container internally. In a MVC (Model, View & Controller )design pattern, the model is the business logic java class (POJO), View is the JSP and Controller is the servlet. The servlet handles requests from the client (web browser) and transfers them to the model for processing, gets the results and dispatches them to the JSP for output.

JSP can also handle requests, like what you've done. It behaves like a servlet that way.

JSP can be written without java too. You can use an EL(Expression language) script ( eg. ${xyz["abc"]} ) instead of those script java tags. This scriptless coding is ideal for web developers who don't know java. Its also used by java developers too, as its relatively very easy.

Nowadays, people use frameworks like Struts, hibernate(Data Layer), Spring(integration layer for wiring objects) instead of writing servlets themselves. That is more serious J2EE development and you don't need to learn these right away.

Understanding servlets and Jsp's will make your work a lot easier to understand and debug too.
I recommend you to start reading on these.

Re: Post HTML5, Javascript & CSS3 queries here

Alright, inputs taken. And if I'm stuck on some java problem, I'll post the issue over there from now on.
Thanks

Another doubt:
Can there be only 1 web.xml file in WEB-INF folder?
I was going to make a separate jsp form for downloading the previously uploaded files. So how should I proceed in xml file issue?

Re: Post HTML5, Javascript & CSS3 queries here

Piyush said:
Alright, inputs taken. And if I'm stuck on some java problem, I'll post the issue over there from now on.
Thanks

Another doubt:
Can there be only 1 web.xml file in WEB-INF folder?
I was going to make a separate jsp form for downloading the previously uploaded files. So how should I proceed in xml file issue?

There exists only one web.xml (will refer it as DD - Deployment Descriptor) per web application.
You configure the DD according to the requirements of your webapp.

Instead of <context-param> , use <init-param> per servlet. Context parameters exist per web app and are shared by all servlets and jsp's. Init parameters exist per individual servlet.
So all you have to do is create two servlets and servlet mappings in your xml for each JSP (uploading and downloading.) The param-value i assume will be the upload and download paths in the system.

Refer this example -

PHP:

<servlet>
    <servlet-name>upload</servlet-name>
    <jsp-file>/upload.jsp</jsp-file>
    <init-param>
        <param-name>name</param-name>
        <param-value>"The file path here"</param-value>
    </init-param>
</servlet>
<servlet-mapping>
    <servlet-name>upload</servlet-name>
    <url-pattern>/Whatever name you assigned in the html form "action attribute"</url-pattern>
</servlet-mapping>

    <servlet-name>download</servlet-name>
    <jsp-file>/download.jsp</jsp-file>
    <init-param>
        <param-name>name</param-name>
        <param-value>"The download path goes here"</param-value>
    </init-param>
</servlet>
<servlet-mapping>
    <servlet-name>download</servlet-name>
    <url-pattern>/Whatever name you assigned in the html form "action attribute"</url-pattern>
</servlet-mapping>

Then in each JSP, get the attribute the following way:

In upload.jsp

PHP:

<%= pageContext.getServletConfig.getInitParameter("upload")%>

In download.jsp

PHP:

<%= pageContext.getServletConfig.getInitParameter("download")%>

hey....
so, i was browsing a website/a online quiz which is over now. what we had to do was to to submit a key in the field and i used t check it via this code <form action="check.php" method="post">.

<b>KEY:  </b><input type="text" name="key" value="" />
	<input type="submit" value="Submit" />

my question was that can i see what is in this check.php so that i can see the answer.
p.s. i am not trying to cheat, just curious, the quiz is way over.

There is a competition of web designing in our college next week.
& languages allowed are - ASP, ASP.NET , PHP , python , RUBY , silverlight , HTML5 & cold fusion.
I know only xhtml & css.
So question is which one should i start learning now?
& also where can i learn that? any resources....
should i go for HTML5 or any other?

You can use just html5 and css3 if it's just a static webpage/website or use it along with the languages you mentioned to bring some dynamic nature to it

Ok thanks!

abhidev said:
You can use just html5 and css3 if it's just a static webpage/website or use it along with the languages you mentioned to bring some dynamic nature to it

kunalht said:
There is a competition of web designing in our college next week.
& languages allowed are - ASP, ASP.NET , PHP , python , RUBY , silverlight , HTML5 & cold fusion.
I know only xhtml & css.
So question is which one should i start learning now?
& also where can i learn that? any resources....
should i go for HTML5 or any other?

You should learn HTML5. Its beautiful and has some robust features, immensely useful in web designing.
But now, i suggest you to learn PHP, for developing quick dynamic pages. Its easier to grasp than ASP.NET and others.
You can read and build hands on at the same time. PHP is a server side language. For using ASP.NET, you have to learn C#.

Okay thanks!.
& can you tell me where to learn it other than books....

vickybat said:
You should learn HTML5. Its beautiful and has some robust features, immensely useful in web designing.
But now, i suggest you to learn PHP, for developing quick dynamic pages. Its easier to grasp than ASP.NET and others.
You can read and build hands on at the same time. PHP is a server side language. For using ASP.NET, you have to learn C#.

Check nettuts.com

Yeah! its a good site.
Thanks!

abhidev said:
Check nettuts.com

I'm learning HTML 5 and CSS..
I want to use a good editor for this.

In notepad, first i have write code and then save html file. Its kinda dumb and slow.
It should be like C/C++ editors giving instant results.

I use sublimetext

Try an editor like Notepad ++. Anyway you have to save the html file before testing.
Or open the html file you created in your browser (Chrome is best) and press F12.
It will open developer tools in the bottom window, which will enable you to change code and see results reflect instantly.

Net beans IDE is also good for PHP & HTML 5

I was checking Digit.in source code, its has about 3000 lines of code :shock:

Some sites even have 15000 lines of code :shock:

These are written by programmer?? or automatically generated by computer?

tech0freak0 said:
I was checking Digit.in source code, its has about 3000 lines of code
Some sites even have 15000 lines of code

These are written by programmer?? or automatically generated by computer?

You mean the HTML of digit.in right? If yes, no it's never written by the programmer

It's actually the code provided by the framework

But mind it, though framework provides a basic layout, you need to customize it accordingly. So as you are thinking, it's not that tough or something rocket science. It's done by developers everyday

But if the site is using CMS, then generally it's not needed to write a single line. All the HTML are generated.

M

I need to start on Web Development. any suggestions on which websites or tutorials or books to follow ??

mastercool8695 said:
I need to start on Web Development. any suggestions on which websites or tutorials or books to follow ??

codecademy.com
for video tutorials - thenewboston.com
and lynda.com

mastercool8695 said:
I need to start on Web Development. any suggestions on which websites or tutorials or books to follow ??

w3schools

krishnandu.sarkar said:
You mean the HTML of digit.in right? If yes, no it's never written by the programmer It's actually the code provided by the framework

But mind it, though framework provides a basic layout, you need to customize it accordingly. So as you are thinking, it's not that tough or something rocket science. It's done by developers everyday

But if the site is using CMS, then generally it's not needed to write a single line. All the HTML are generated.

Whats Framework and CMS???....
I new to Web Developing

tech0freak0 said:
Whats Framework and CMS???....
I new to Web Developing

Please refer Software framework - Wikipedia, the free encyclopedia and Content management system - Wikipedia, the free encyclopedia

For E.g. Bootstrap is a Framework and Joomla, Drupal, Wordpress etc. are CMS.

M

Re: Post HTML5, Javascript & CSS3 queries here

kunalht said:
codecademy.com
for video tutorials - thenewboston.com
and lynda.com

tried code academy. its really great.

- - - Updated - - -

krishnandu.sarkar said:
w3schools

will try w3schools after i finish off on codeacademy,
did HTML basics on codeacademy.
around the middle of CSS Basics.
been to w3Schools before but didn't start the course.

I really feel that what i'm learning there isn't complete,
Things like how to add a box for user input and all are not described in HTML part (what i had learnt before the CSS thing started., (I dont know if HTML does create the box or other

)
and Buttons , etc.
will they cover the entire HTML after this ?

^^ Newboston videos for html are really great. Your fundamentals will be cleared.

G

Hello Everyone ,
I'm new to the forum but not new to digit (Reading since 2009 ever since I was a little kid!)
So anyways , you want your help regarding a project that I have been working on with my friend.

It's called ProgrammingWhiz AND It is a site that will teach programming in HTML5 , CSS3 , Javascript , Python ,PHP and MySQL and probably C++ in the future.

Currently I have finished working on the front-end and we are now at content-adding phase . We have started HTML5 Tutorials and I have currently finishing the final tutorials.

So , enough of the intro
Here is my problem:
Firstly ,
We are using HTML5 , CSS3 , jQuery , Bootstrap , Javascript and PHP for the core and using plugins like holder.js and highlight.js for adding to the experience.
The thing is though , that I have encountered a problem in the CSS and Bootstrap part that I am unable to recover.
The thing is that my site is spawning out of 100% width and it now has a horizontal scrollbar at the bottom . I think our fixed header is the reason behind but I can't fix it . I tried setting width to 100% but it still doesn't work
Here is one of the source:

Code:

<!Doctype html>
<html>
    <head>
        <link rel="shortcut icon" href="*www.programmingwhiz.bl.ee/html5/site.png">
        <title>Lesson 1 HTML5 Programming Whiz</title>
        <meta name="description" content="Learn Programming from the best across the Internet through ProgrammingWhiz">
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="author" content="Akshat Tripathi , Pradipta Bora"/>
        <meta property="og:title" content="ProgrammingWhiz">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta property="og:type" content="article">
        <meta property="og:description" content="Learn Programming from the best across the Internet through ProgrammingWhiz">
        <link rel="apple-touch-icon" href="icon.png">
        <link href="../css/bootstrap.css" rel="stylesheet">
        <link href="../css/modern-business.css" rel="stylesheet">
        <link href="../css/font-awesome.css" rel="stylesheet">
        <link href="../css/global_styles.css" rel="stylesheet">
        <link rel="shortcut icon" href="../site.png">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
            @media(max-width: 600px){
                body{
                    position: relative;
                    left:4.2%;
                }
        
                @font-face {
                    font-family: Segoe UI;
                    src :url('segoe.ttf');
                }   
            }

            p {
                font-family: "Segoe UI","proxima-nova","proxima-nova-1","proxima-nova-2","Proxima Nova",Helvetica,Arial,sans-serif;
                font-size: 17px;
                line-height: 1.5;
                padding: 8px 5px 14px 5px;
            }

            h2 {
                font-family: "Segoe UI","proxima-nova","proxima-nova-1","proxima-nova-2","Proxima Nova",Helvetica,Arial,sans-serif;
                font-size: 30px;
                line-height: 1.1;
                padding: 8px 5px 14px 5px;
            }

            h3 {
                font-family: "Segoe UI","proxima-nova","proxima-nova-1","proxima-nova-2","Proxima Nova",Helvetica,Arial,sans-serif;
                font-size: 25px;
                line-height: 1.1;
                padding: 9px 5px 14px 5px;
            }

            h4 {
                font-family: "Segoe UI","proxima-nova","proxima-nova-1","proxima-nova-2","Proxima Nova",Helvetica,Arial,sans-serif;
                font-size: 21px;    
                line-height: 1.1;
                padding: 9px 5px 14px 5px;
            }

        </style>
        <link rel="stylesheet" href="styles/github.css">
        <script src="javascript/highlight.pack.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    </head>
    <body>
    <style type="text/css">
	html,
body {
	margin:0;
	padding:0;
	height:100%;
}
#wrapper {
	min-height:100%;
	position:relative;
}
#content {
	padding:10px;
	padding-bottom:80px;   /* Height of the footer element */
}
#footer {
	width:100%;
	height:80px;
	position:absolute;
	bottom:0;
	left:0;
	
}
</style>        <div id="wrapper">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="width:100%;">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- You'll want to use a responsive image option so this logo looks good on devices - I recommend using something like retina.js (do a quick Google search for it and you'll find it) -->
            <a class="navbar-brand" href="../index.php">Programming Whiz</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="../basics.php">Learn Coding</a></li>
                <li><a href="../apps.php">Our Apps and Tools</a></li>
                <li><a href="../contact.php">About Us</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Articles <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="../un.php">Python</a></li>
                        <li><a href="../un.php">C++</a></li>
                        <li><a href="../un.php">HTML 5</a></li>
                        <li><a href="../un.php">Programming Structure</a></li>
                        <li><a href="../un.php">Miscellany</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact Us <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Facebook</a></li>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="../mail_us.php">Mail Us</a></li>
                    </ul>
                </li>

            </ul>
        </div>
    <!-- /.navbar-collapse -->
    </div>
<!-- /.container -->
</nav>            <div id="content">
                <div class="row">
                    <div class="row">
                        <div class="sidebarx hidden-sm hidden-xs" style="position:absolute;right:0.22%;top:16%;width:14%;border-width:0px;z-index:342;">
                            <ul class="nav nav-stacked nav-pills">
                                <li><a href="../index.php"><span class="glyphicon glyphicon-home"></span>  Home</a></li>
                                <li><a href="../basics.php"><span class="glyphicon glyphicon-star"></span>  Begin Coding</a></li>
                                <li><a href="../html5.php"><span class="glyphicon glyphicon-star"></span>  Learn HTML5 &amp; CSS3</a></li>
                                <li><a href="../un.php"><span class="glyphicon glyphicon-star"></span>  Learn Javascript</a></li>
                                <li><a href="../un.php"><span class="glyphicon glyphicon-star"></span>  Learn Python</a></li>            
                                <li><a href="../contact.php"><span class="glyphicon glyphicon-home"></span>  About Us</a></li>
                                <li><a href="../un.php"><span class="glyphicon glyphicon-home"></span>  Useful Sites</a></li>
                                <li><a href="../apps.php"><span class="glyphicon glyphicon-home"></span>  Our Apps</a></li>
            
                            </ul>
                        </div>
                        <div class="main " style="background-color:#eee;position:relative;;top:-45px;">
                            <div style="height:25%;padding-bottom:5%;padding-left:7%;padding-right:15%;padding-top:10%;color:#1C1C1C;"><h2 class="text-left"><br><img src="../logofull.png" class="hidden-xs hidden-sm" /><h2 class=".visible-xs .visible-sm hidden-md hidden-lg"><br>ProgrammingWhiz </h2><br><h4 style="color:#1C1C1C" >    Learn HTML5 &amp; CSS3 </h4></h1></div></div><br>
                            <div style="position:relative;left:-4%;"class="col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 col-md-9 col-md-offset-1">
                                <a class="btn btn-primary" href="../index.php" style="position:relative;left:0.3%;top:4%;">&lt;&lt; Go Back Home</a> <a class="btn btn-primary hidden-xs hidden-sm" href="lesson2.php" style="position:relative;left:75%;top:-10%;"> Lesson 2 &gt;&gt;  </a>
                                <br><br>
                                <br><h2 style="padding-bottom:0px;">HTML5: Your First Program </h2>
                                <p>This is a simple HTML5 program :</p><br><br>
        <pre><code>
        &lt;!Doctype html&gt;        
        &lt;html&gt;
            &lt;head&gt;
                &lt;title&gt;Hello World&lt;/title&gt;
            &lt;/head&gt;
            &lt;body&gt;
                Wello World!
            &lt;/body&gt;
        &lt;/html&gt;</code></pre> <br>
                                <p class="text-justify">The Syntax would be explained on the next lesson; for now, we will teach you how to create an HTMl document and how to download a code editor.</p>
                                <br><br><h3>Code Editor: What It Is and Which One </h3>
                                <p class="text-justify">Before we dive into the world of HTML &amp; CSS and start designing websites, we need 

                                to choose which code editor we will be using to write our code. A code editor is a tool 

(much like a text-editor like Notepad) which helps you write code in the most helpful 

way possible. How is it helpful? It highlights the important part of your code (its 

syntax), gives you good shortcuts for better using the code editor, it makes navigation 

easier as well and much more.</p>

<p>There are lots of code editors out there. (A side-note: you really don't <i>need</i> 

these code-editors, you can just use the familiar Notepad or any other text editor; 

however, it is always advicable that you use such code-editors to make your life a lot 

easier). For example, there's a very popular code editor in the programming world called 

Emacs. However, emacs is too complicated to use if you are a beginner, therefore, we 

recommend that you choose a simpler code-editor like Sublime Text or Geddit. In our website, 

we will always display the screenshots of codes (if at all) using Sublime Text 3. It is easy-

to-use, easy-to-learn, free (although, it often pops-up asking you to buy, but you can 

live your life that way, it's not <i>that</i> often), is not all that coomplicated and 

has syntax-highlighting (for now, if you're a complete beginner, it means separating 

code from normal text).</p>

<p>You can get Sublime Text 3 from its official website: <a 

href="*www.sublimetext.com/3">Download Sublime Text 3.</a> Installation for Windows is 

pretty straightforward so we won't spend much time describing how to install the 

software in Windows. However, if you're on a Linux computer, you need to install using 

the following command in your terminal (or you can use the GUI):</p><br>
<pre><code>tar xvjf [the folder name with extension (.tar.bz2)]</code></pre><br>
<p class="text-justify">After the extraction has been done, you can access the software using the file 

sublime_text. However if you're used to using terminal and you want to access Sublime 

from various directories, then you need to create a link to that file so that you can 

access it from wherever you like. To accomplish this, use the following code in your 

terminal:</p><br><br>
<pre><code>sudo ln -s sublime_text /usr/bin/sublime</code></pre><br>
                <p class="text-justify">Now you can access the code-editor using your terminal. (This code should work for all or most Linux distributions.)</p>

<p class="text-justify">There are different ways of accessing your HTML files. The simplest one is saving your code with the extension '.html' and then double-clicking on the file which should open it in the default web browser. However, most programmers prefer using the terminal to open your code, edit it, view it etc. You can edit your code using Sublime, the way you do this in terminal is: </p>
        <br><pre><code>sublime code.html &amp;</code></pre><br>
        <p>Note that the '&amp;' starts the program in the background. And to then open the file in your web browser, type your web browser's name and then the name of the file with its extension. Now since you have installed Sublime Text 3 , let's create your first web site.</p>

        <br><br>
        <h3>Your First Hello Website</h3>
        <p class="text-justify">
        Now, open Sublime Text from Windows or Linux using the above steps. The commands metioned above are for Linux users only, therfore, there's an assumption that you already know how to use
         basic commands in the termrinal if you're using a linux computer. If you don't understand, it's actually not a problem, you need to know them now.<br>
        <p class="text-justify">Now copy and paste the above given code onto Sublime Text <i>Or whichever editor you are using</i>. After that save the file by Clicking File (On The Menu bar) &gt; Save<br>
        You will now see a dialog box. To save the file, go to your desired folder (directory, in Linux-speak) and type in the file name with extension '.html' (like if you want the name of your site to be "Hello" type "Hello.html") and hit Enter-- make sure that
         the 'Save As Type' option is set to 'All files' rather than '.txt'.<br> Now To Open the file using your favourite browser, and congrats! You've just written your first web page! Before we dive into what all the cryptic looking texts mean, let's have a better understanding of 
         the Internet, web browser and how all of these things work. <br></p>

        <br><a class="btn btn-primary" href="../un.php">Lesson 2 - Understanding The Internet Better</a>
                                </div>
                            </div>
                        </div>
                        <script src="javascript/jquery-1.10.2.js"></script>
    <script src="javascript/bootstrap.js"></script>
    <script src="javascript/modern-business.js"></script>
    <script src="holder.js"></script>

<script type="text/javascript">try{ clicky.init(100737264); }catch(e){}</script>
<noscript><p></p></noscript>                        <div class="hidden-xs hidden-sm" id="footer">
    <footer >

        <div class="row" style="position:relative;left:5%;">
            <hr>
                <p>Created By -- Akshat and Pradipta. <br />
                    The Bootstrap UI Framework used for the site is developed by <a class="standard-href" href="*www.twitter.com">Twitter Inc,</a> . The Tutorials included and linked are the properties of the respective site owner. <br />
                        Copyright &copy; 2014 . All rights reserved.</p>
                
                <img src="sitelogo.jpg" / style="position:relative;bottom:10px;top:10px;">
        </div>
    </footer>
    </div>
<div class=".visible-xs .visible-sm hidden-md hidden-lg" id="footer">
    <footer >

        <div class="row" style="position:relative;left:10%;">
            <hr>
                <p>Created By -- Akshat and Pradipta. <br />
                    
                        Copyright &copy; 2014 . All rights reserved.</p>
                
                
        </div>
    </footer>
    </div>                    </div>
                </div>
            

</body>
        </html>
[code]

Here is the link:
*www.programmingwhiz.bl.ee/html5/lesson1.php

Also , We are using Hostinger as the hosting.

Thanks in advance

G

Try tutorialspoint and W3schools

What source would you recommend to learn find out more about JS libraries that create dynamic animations in webpages nowadays, e.g. when you reach a certain part of a webpage, text fades in, then product image slides from the edge, and stuff like that.

you might want to look at sites like smashingmagazine, sitepoint, netttuts

I am looking for a good dev tool for Chrome. Inbuilt one is good, but I believe there are better alternatives available.

Re: Post HTML5, Javascript & CSS3 queries here

Any good book for learning javascript

- - - Updated - - -

Any good book for learning javascript

Chetan1991 said:
What source would you recommend to learn find out more about JS libraries that create dynamic animations in webpages nowadays, e.g. when you reach a certain part of a webpage, text fades in, then product image slides from the edge, and stuff like that.

jquery is good for animation, you can find examples and functions here
jQuery Effect Methods

RCuber said:
I am looking for a good dev tool for Chrome. Inbuilt one is good, but I believe there are better alternatives available.

you might find this useful Web Developer

Chetan1991 said:
What source would you recommend to learn find out more about JS libraries that create dynamic animations in webpages nowadays, e.g. when you reach a certain part of a webpage, text fades in, then product image slides from the edge, and stuff like that.

you should use CSS3 to do the animation as its much smoother than js animations.

take a look at this Animate.css

M

i want help from you guys to develop a program.
hello, i need a c++ programmer for a project.Please inbox me with details.we will pay for the project.The person must also have knowledge about C#.Please contact me with details.And i will further intimate the details of the project.contact me at aryan.chetry@gmail.com

geekpradd said:

Hello Everyone ,
I'm new to the forum but not new to digit (Reading since 2009 ever since I was a little kid!)
So anyways , you want your help regarding a project that I have been working on with my friend.

It's called ProgrammingWhiz AND It is a site that will teach programming in HTML5 , CSS3 , Javascript , Python ,PHP and MySQL and probably C++ in the future.

Currently I have finished working on the front-end and we are now at content-adding phase . We have started HTML5 Tutorials and I have currently finishing the final tutorials.

So , enough of the intro
Here is my problem:
Firstly ,
We are using HTML5 , CSS3 , jQuery , Bootstrap , Javascript and PHP for the core and using plugins like holder.js and highlight.js for adding to the experience.
The thing is though , that I have encountered a problem in the CSS and Bootstrap part that I am unable to recover.
The thing is that my site is spawning out of 100% width and it now has a horizontal scrollbar at the bottom . I think our fixed header is the reason behind but I can't fix it . I tried setting width to 100% but it still doesn't work
Here is one of the source:

Code:

<!Doctype html>
<html>
    <head>
        <link rel="shortcut icon" href="*www.programmingwhiz.bl.ee/html5/site.png">
        <title>Lesson 1 HTML5 Programming Whiz</title>
        <meta name="description" content="Learn Programming from the best across the Internet through ProgrammingWhiz">
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="author" content="Akshat Tripathi , Pradipta Bora"/>
        <meta property="og:title" content="ProgrammingWhiz">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta property="og:type" content="article">
        <meta property="og:description" content="Learn Programming from the best across the Internet through ProgrammingWhiz">
        <link rel="apple-touch-icon" href="*www.digit.in/forum/icon.png">
        <link href="*www.digit.in/forum/../css/bootstrap.css" rel="stylesheet">
        <link href="*www.digit.in/forum/../css/modern-business.css" rel="stylesheet">
        <link href="*www.digit.in/forum/../css/font-awesome.css" rel="stylesheet">
        <link href="*www.digit.in/forum/../css/global_styles.css" rel="stylesheet">
        <link rel="shortcut icon" href="*www.digit.in/forum/../site.png">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
            @media(max-width: 600px){
                body{
                    position: relative;
                    left:4.2%;
                }
        
                @font-face {
                    font-family: Segoe UI;
                    src :url('segoe.ttf');
                }   
            }

            p {
                font-family: "Segoe UI","proxima-nova","proxima-nova-1","proxima-nova-2","Proxima Nova",Helvetica,Arial,sans-serif;
                font-size: 17px;
                line-height: 1.5;
                padding: 8px 5px 14px 5px;
            }

            h2 {
                font-family: "Segoe UI","proxima-nova","proxima-nova-1","proxima-nova-2","Proxima Nova",Helvetica,Arial,sans-serif;
                font-size: 30px;
                line-height: 1.1;
                padding: 8px 5px 14px 5px;
            }

            h3 {
                font-family: "Segoe UI","proxima-nova","proxima-nova-1","proxima-nova-2","Proxima Nova",Helvetica,Arial,sans-serif;
                font-size: 25px;
                line-height: 1.1;
                padding: 9px 5px 14px 5px;
            }

            h4 {
                font-family: "Segoe UI","proxima-nova","proxima-nova-1","proxima-nova-2","Proxima Nova",Helvetica,Arial,sans-serif;
                font-size: 21px;    
                line-height: 1.1;
                padding: 9px 5px 14px 5px;
            }

        </style>
        <link rel="stylesheet" href="*www.digit.in/forum/styles/github.css">
        <script src="javascript/highlight.pack.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    </head>
    <body>
    <style type="text/css">
	html,
body {
	margin:0;
	padding:0;
	height:100%;
}
#wrapper {
	min-height:100%;
	position:relative;
}
#content {
	padding:10px;
	padding-bottom:80px;   /* Height of the footer element */
}
#footer {
	width:100%;
	height:80px;
	position:absolute;
	bottom:0;
	left:0;
	
}
</style>        <div id="wrapper">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="width:100%;">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- You'll want to use a responsive image option so this logo looks good on devices - I recommend using something like retina.js (do a quick Google search for it and you'll find it) -->
            <a class="navbar-brand" href="../index.php">Programming Whiz</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="../basics.php">Learn Coding</a></li>
                <li><a href="../apps.php">Our Apps and Tools</a></li>
                <li><a href="../contact.php">About Us</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Articles <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="../un.php">Python</a></li>
                        <li><a href="../un.php">C++</a></li>
                        <li><a href="../un.php">HTML 5</a></li>
                        <li><a href="../un.php">Programming Structure</a></li>
                        <li><a href="../un.php">Miscellany</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact Us <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Facebook</a></li>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="../mail_us.php">Mail Us</a></li>
                    </ul>
                </li>

            </ul>
        </div>
    <!-- /.navbar-collapse -->
    </div>
<!-- /.container -->
</nav>            <div id="content">
                <div class="row">
                    <div class="row">
                        <div class="sidebarx hidden-sm hidden-xs" style="position:absolute;right:0.22%;top:16%;width:14%;border-width:0px;z-index:342;">
                            <ul class="nav nav-stacked nav-pills">
                                <li><a href="../index.php"><span class="glyphicon glyphicon-home"></span>  Home</a></li>
                                <li><a href="../basics.php"><span class="glyphicon glyphicon-star"></span>  Begin Coding</a></li>
                                <li><a href="../html5.php"><span class="glyphicon glyphicon-star"></span>  Learn HTML5 & CSS3</a></li>
                                <li><a href="../un.php"><span class="glyphicon glyphicon-star"></span>  Learn Javascript</a></li>
                                <li><a href="../un.php"><span class="glyphicon glyphicon-star"></span>  Learn Python</a></li>            
                                <li><a href="../contact.php"><span class="glyphicon glyphicon-home"></span>  About Us</a></li>
                                <li><a href="../un.php"><span class="glyphicon glyphicon-home"></span>  Useful Sites</a></li>
                                <li><a href="../apps.php"><span class="glyphicon glyphicon-home"></span>  Our Apps</a></li>
            
                            </ul>
                        </div>
                        <div class="main " style="background-color:#eee;position:relative;;top:-45px;">
                            <div style="height:25%;padding-bottom:5%;padding-left:7%;padding-right:15%;padding-top:10%;color:#1C1C1C;"><h2 class="text-left"><br><img src="../logofull.png" class="hidden-xs hidden-sm" /><h2 class=".visible-xs .visible-sm hidden-md hidden-lg"><br>ProgrammingWhiz </h2><br><h4 style="color:#1C1C1C" >    Learn HTML5 & CSS3 </h4></h1></div></div><br>
                            <div style="position:relative;left:-4%;"class="col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 col-md-9 col-md-offset-1">
                                <a class="btn btn-primary" href="../index.php" style="position:relative;left:0.3%;top:4%;"><< Go Back Home</a> <a class="btn btn-primary hidden-xs hidden-sm" href="lesson2.php" style="position:relative;left:75%;top:-10%;"> Lesson 2 >>  </a>
                                <br><br>
                                <br><h2 style="padding-bottom:0px;">HTML5: Your First Program </h2>
                                <p>This is a simple HTML5 program :</p><br><br>
        <pre><code>
        <!Doctype html>        
        <html>
            <head>
                <title>Hello World</title>
            </head>
            <body>
                Wello World!
            </body>
        </html></code></pre> <br>
                                <p class="text-justify">The Syntax would be explained on the next lesson; for now, we will teach you how to create an HTMl document and how to download a code editor.</p>
                                <br><br><h3>Code Editor: What It Is and Which One </h3>
                                <p class="text-justify">Before we dive into the world of HTML & CSS and start designing websites, we need 

                                to choose which code editor we will be using to write our code. A code editor is a tool 

(much like a text-editor like Notepad) which helps you write code in the most helpful 

way possible. How is it helpful? It highlights the important part of your code (its 

syntax), gives you good shortcuts for better using the code editor, it makes navigation 

easier as well and much more.</p>

<p>There are lots of code editors out there. (A side-note: you really don't <i>need</i> 

these code-editors, you can just use the familiar Notepad or any other text editor; 

however, it is always advicable that you use such code-editors to make your life a lot 

easier). For example, there's a very popular code editor in the programming world called 

Emacs. However, emacs is too complicated to use if you are a beginner, therefore, we 

recommend that you choose a simpler code-editor like Sublime Text or Geddit. In our website, 

we will always display the screenshots of codes (if at all) using Sublime Text 3. It is easy-

to-use, easy-to-learn, free (although, it often pops-up asking you to buy, but you can 

live your life that way, it's not <i>that</i> often), is not all that coomplicated and 

has syntax-highlighting (for now, if you're a complete beginner, it means separating 

code from normal text).</p>

<p>You can get Sublime Text 3 from its official website: <a rel="nofollow" 

href="*www.sublimetext.com/3">Download Sublime Text 3.</a> Installation for Windows is 

pretty straightforward so we won't spend much time describing how to install the 

software in Windows. However, if you're on a Linux computer, you need to install using 

the following command in your terminal (or you can use the GUI):</p><br>
<pre><code>tar xvjf [the folder name with extension (.tar.bz2)]</code></pre><br>
<p class="text-justify">After the extraction has been done, you can access the software using the file 

sublime_text. However if you're used to using terminal and you want to access Sublime 

from various directories, then you need to create a link to that file so that you can 

access it from wherever you like. To accomplish this, use the following code in your 

terminal:</p><br><br>
<pre><code>sudo ln -s sublime_text /usr/bin/sublime</code></pre><br>
                <p class="text-justify">Now you can access the code-editor using your terminal. (This code should work for all or most Linux distributions.)</p>

<p class="text-justify">There are different ways of accessing your HTML files. The simplest one is saving your code with the extension '.html' and then double-clicking on the file which should open it in the default web browser. However, most programmers prefer using the terminal to open your code, edit it, view it etc. You can edit your code using Sublime, the way you do this in terminal is: </p>
        <br><pre><code>sublime code.html &</code></pre><br>
        <p>Note that the '&' starts the program in the background. And to then open the file in your web browser, type your web browser's name and then the name of the file with its extension. Now since you have installed Sublime Text 3 , let's create your first web site.</p>

        <br><br>
        <h3>Your First Hello Website</h3>
        <p class="text-justify">
        Now, open Sublime Text from Windows or Linux using the above steps. The commands metioned above are for Linux users only, therfore, there's an assumption that you already know how to use
         basic commands in the termrinal if you're using a linux computer. If you don't understand, it's actually not a problem, you need to know them now.<br>
        <p class="text-justify">Now copy and paste the above given code onto Sublime Text <i>Or whichever editor you are using</i>. After that save the file by Clicking File (On The Menu bar) > Save<br>
        You will now see a dialog box. To save the file, go to your desired folder (directory, in Linux-speak) and type in the file name with extension '.html' (like if you want the name of your site to be "Hello" type "Hello.html") and hit Enter-- make sure that
         the 'Save As Type' option is set to 'All files' rather than '.txt'.<br> Now To Open the file using your favourite browser, and congrats! You've just written your first web page! Before we dive into what all the cryptic looking texts mean, let's have a better understanding of 
         the Internet, web browser and how all of these things work. <br></p>

        <br><a class="btn btn-primary" href="../un.php">Lesson 2 - Understanding The Internet Better</a>
                                </div>
                            </div>
                        </div>
                        <script src="javascript/jquery-1.10.2.js"></script>
    <script src="javascript/bootstrap.js"></script>
    <script src="javascript/modern-business.js"></script>
    <script src="holder.js"></script>

<script type="text/javascript">try{ clicky.init(100737264); }catch(e){}</script>
<noscript><p></p></noscript>                        <div class="hidden-xs hidden-sm" id="footer">
    <footer >

        <div class="row" style="position:relative;left:5%;">
            <hr>
                <p>Created By -- Akshat and Pradipta. <br />
                    The Bootstrap UI Framework used for the site is developed by <a rel="nofollow" class="standard-href" href="*www.twitter.com">Twitter Inc,</a> . The Tutorials included and linked are the properties of the respective site owner. <br />
                        Copyright © 2014 . All rights reserved.</p>
                
                <img src="sitelogo.jpg" / style="position:relative;bottom:10px;top:10px;">
        </div>
    </footer>
    </div>
<div class=".visible-xs .visible-sm hidden-md hidden-lg" id="footer">
    <footer >

        <div class="row" style="position:relative;left:10%;">
            <hr>
                <p>Created By -- Akshat and Pradipta. <br />
                    
                        Copyright © 2014 . All rights reserved.</p>
                
                
        </div>
    </footer>
    </div>                    </div>
                </div>
            

</body>
        </html>
[code]

Here is the link:
*www.programmingwhiz.bl.ee/html5/lesson1.php

Also , We are using Hostinger as the hosting.

Thanks in advance[/QUOTE]
[/SPOILER]
so is this over ?

Re: Post HTML5, Javascript & CSS3 queries here

abhigeek said:
Any good book for learning javascript

- - - Updated - - -

Any good book for learning javascript

Jon Duckett... forgot title of book. Really great info and well formatted book. I didn't complete whole book, I switched to MDN's documentation, which is good enough (If you know any other language) - *developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction

Re: Post HTML5, Javascript & CSS3 queries here

ankush28 said:
Jon Duckett... forgot title of book. Really great info and well formatted book. I didn't complete whole book, I switched to MDN's documentation, which is good enough (If you know any other language) - *developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction

Dude, I was asking for book in Oct 2014. My post is way too old.
Now, I already know javascript and many other language.
Anyways thanks for help.

Re: Post HTML5, Javascript & CSS3 queries here

abhigeek said:
Dude, I was asking for book in Oct 2014. My post is way too old.
Now, I already know javascript and many other language.
Anyways thanks for help.

Haha this part of forum is really slow then

Hi,

I have found this code from google, and it is working fine but the pop up window is transparent and I want to make it opaque. (I know that the pop up window is transparent because if I zoom in the browser I can see the pop up window overlapping with the background content and the background content is visible)

Here is the code:

Code:

<HTML>
	<HEAD>
		<TITLE>Popup div with disabled background</TITLE>
		<style>
			.ontop {
				z-index: 9999;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
				position: absolute;				
				background-color: #cccccc;
				color: #aaaaaa;
				opacity: .8;
				filter: alpha(opacity = 80);
			}
			#popup {
				width: 300px;
				height: 200px;
				position: absolute;
				color: #000000;
				background-color: #ffffff;
				/* To align popup window at the center of screen*/
				top: 50%;
				left: 50%;
				margin-top: -100px;
				margin-left: -150px;
			}
		</style>
		<script type="text/javascript">
			function pop(div) {
				document.getElementById(div).style.display = 'block';
			}
			function hide(div) {
				document.getElementById(div).style.display = 'none';
			}
			//To detect escape button
			document.onkeydown = function(evt) {
				evt = evt || window.event;
				if (evt.keyCode == 27) {
					hide('popDiv');
				}
			};
		</script>
	</HEAD>
	<BODY>
		<div id="popDiv" class="ontop">
			<table border="1" id="popup">
				<tr>
					<td>
						This is can be used as a popup window
						<br></br>
						Click Close OR escape button to close it
						<a href="#" onClick="hide('popDiv')">Close</a>
					</td>
				</tr>
			</table>
		</div>
		<CENTER>
			<h3>
				Simple popup div with disabled background
			</h3>
			<br/>
			<a href="#" onClick="pop('popDiv')">Click here to open a popup div</a>
		</CENTER>
	</BODY>
</HTML>

bijay_ps said:
Hi,

I have found this code from google, and it is working fine but the pop up window is transparent and I want to make it opaque. (I know that the pop up window is transparent because if I zoom in the browser I can see the pop up window overlapping with the background content and the background content is visible)

Here is the code:

<HTML>
<HEAD>
<TITLE>Popup div with disabled background</TITLE>
<style>
.ontop {
z-index: 9999;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
position: absolute;
background-color: #cccccc;
color: #aaaaaa;
opacity: .8;
filter: alpha(opacity = 80);
}
#popup {
width: 300px;
height: 200px;
position: absolute;
color: #000000;
background-color: #ffffff;
/* To align popup window at the center of screen*/
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
}
</style>
<script type="text/javascript">
function pop(div) {
document.getElementById(div).style.display = 'block';
}
function hide(div) {
document.getElementById(div).style.display = 'none';
}
//To detect escape button
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
hide('popDiv');
}
};
</script>
</HEAD>
<BODY>
<div id="popDiv" class="ontop">
<table border="1" id="popup">
<tr>
<td>
This is can be used as a popup window
<br></br>
Click Close OR escape button to close it
<a href="#" onClick="hide('popDiv')">Close</a>
</td>
</tr>
</table>
</div>
<CENTER>
<h3>
Simple popup div with disabled background
</h3>
<br/>
<a href="#" onClick="pop('popDiv')">Click here to open a popup div</a>
</CENTER>
</BODY>
</HTML>

Code:

<!DOCTYPE html>
<html>
<head>
    <title>Popup div with disabled background</title>
    <style>
.ontop {
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    position: absolute;
    background-color: #cccccc;
    color: #aaaaaa;
    opacity: .8;
    filter: alpha(opacity = 80);
    }
    #popup {
    z-index: 99991;
    width: 300px;
    height: 200px;
    position: absolute;
    color: #000000;
    background-color: #ffffff;
    /* To align popup window at the center of screen*/
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -150px;
    }
    </style>
    <script type="text/javascript">
function pop(div) {
    document.getElementById(div).style.display = 'block';
    }
    function hide(div) {
    document.getElementById(div).style.display = 'none';
    }
    //To detect escape button
    document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 27) {
    hide('popDiv');
    }
    };
    </script>
</head>

<body>
    <div class="ontop" id="popDiv"></div>

    <table border="1" id="popup">
        <tr>
            <td>
                This is can be used as a popup window<br>
                <br>
                Click Close OR escape button to close it <a href="#" onclick=
                "hide('popDiv')">Close</a>
            </td>
        </tr>
    </table>

    <h3>Simple popup div with disabled background</h3><br>
    <a href="#" onclick="pop('popDiv')">Click here to open a popup div</a><br>
</body>
</html>

You can check that same way it is done in digit forum when you click on insert image.

bijay_ps said:

Hi,

I have found this code from google, and it is working fine but the pop up window is transparent and I want to make it opaque. (I know that the pop up window is transparent because if I zoom in the browser I can see the pop up window overlapping with the background content and the background content is visible)

Here is the code:

Code:

<HTML>
	<HEAD>
		<TITLE>Popup div with disabled background</TITLE>
		<style>
			.ontop {
				z-index: 9999;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
				position: absolute;				
				background-color: #cccccc;
				color: #aaaaaa;
				opacity: .8;
				filter: alpha(opacity = 80);
			}
			#popup {
				width: 300px;
				height: 200px;
				position: absolute;
				color: #000000;
				background-color: #ffffff;
				/* To align popup window at the center of screen*/
				top: 50%;
				left: 50%;
				margin-top: -100px;
				margin-left: -150px;
			}
		</style>
		<script type="text/javascript">
			function pop(div) {
				document.getElementById(div).style.display = 'block';
			}
			function hide(div) {
				document.getElementById(div).style.display = 'none';
			}
			//To detect escape button
			document.onkeydown = function(evt) {
				evt = evt || window.event;
				if (evt.keyCode == 27) {
					hide('popDiv');
				}
			};
		</script>
	</HEAD>
	<BODY>
		<div id="popDiv" class="ontop">
			<table border="1" id="popup">
				<tr>
					<td>
						This is can be used as a popup window
						<br></br>
						Click Close OR escape button to close it
						<a href="#" onClick="hide('popDiv')">Close</a>
					</td>
				</tr>
			</table>
		</div>
		<CENTER>
			<h3>
				Simple popup div with disabled background
			</h3>
			<br/>
			<a href="#" onClick="pop('popDiv')">Click here to open a popup div</a>
		</CENTER>
	</BODY>
</HTML>

Better use jQuery Colorbox plugin, saves a lot of time and completely worth using it

I have created one HTML table with fixed header and scrollable body. But when I resize the browser window or zoom in or zoom out the browser the table alignment changes. I want to view the complete table aligned with data even if browser window is resized or zoomed in or zoomed out.

And I need it to work in IE 11 and IE 8

I have tried many solutions from google, but I couldn't make it work.

Kindly help, I need the solution for this issue badly.

Here is the code:

Code:

<html>
<head>
 <style>
   div td{
	text-align: center;
	}
 </style>
	<script language="Javascript">
	window.onload = init;
	window.onresize = init;
	
	function init() {
	var eTable = document.getElementById("headers");
	 if (eTable != null){

	eTable.style.width = document.getElementById('data').offsetWidth;
	document.getElementById('th1').style.width = document.getElementById('td1').offsetWidth;
	document.getElementById('th2').style.width = document.getElementById('td2').offsetWidth;
	document.getElementById('th3').style.width = document.getElementById('td3').offsetWidth;
	document.getElementById('th4').style.width = document.getElementById('td4').offsetWidth;
	document.getElementById('th5').style.width = document.getElementById('td5').offsetWidth;
	
	document.getElementById('th7').style.width = document.getElementById('td7').offsetWidth;
	document.getElementById('th8').style.width = document.getElementById('td8').offsetWidth;
	document.getElementById('th6').style.width = document.getElementById('td6').offsetWidth;
	document.getElementById('th9').style.width = document.getElementById('td9').offsetWidth;
	}
  }
</script>

</head>
	<body>	



	<table id="headers" width="100%"  >
			<thead><tr bgcolor="blue">
				<th align="center" id="th1">
				DPCI<br>
			</th>						 
			<th align="center" id="th2">
				Description<br>
			</th>
			<th align="center" id="th3">
				Estimated Delivery Date<br>
			</th>
			<th align="center" id="th4">
				Promotional Week Begin Date or Event Set Date<br>
			</th>			
			<th align="center" id="th5">
				Promotional Type<br>
			</th>			
			<th align="center" id="th6">
				Regular Price<br>
			</th>			
			<th align="center" id="th7">
				Reduced Price<br>
			</th>			
			<th align="center" id="th8">
				Sales Forecast Qty (Cases)<br>
			</th>
			<th align="center" id="th9">
				HQ Push Qty (Cases)<br>
			</th>
			</tr></thead>
	</table>
			<div style="height: 275px; overflow-y: auto;">

			<table id="data" width="100%">
			      
			
					<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	
					<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	

				</table>
			</div>
	</body>
</html>

//Mod Edit - Wrapped the code within CODE tags

bijay_ps said:

I have created one HTML table with fixed header and scrollable body. But when I resize the browser window or zoom in or zoom out the browser the table alignment changes. I want to view the complete table aligned with data even if browser window is resized or zoomed in or zoomed out.

And I need it to work in IE 11 and IE 8

I have tried many solutions from google, but I couldn't make it work.

Kindly help, I need the solution for this issue badly.

Here is the code:

Code:

<html>
<head>
 <style>
   div td{
	text-align: center;
	}
 </style>
	<script language="Javascript">
	window.onload = init;
	window.onresize = init;
	
	function init() {
	var eTable = document.getElementById("headers");
	 if (eTable != null){

	eTable.style.width = document.getElementById('data').offsetWidth;
	document.getElementById('th1').style.width = document.getElementById('td1').offsetWidth;
	document.getElementById('th2').style.width = document.getElementById('td2').offsetWidth;
	document.getElementById('th3').style.width = document.getElementById('td3').offsetWidth;
	document.getElementById('th4').style.width = document.getElementById('td4').offsetWidth;
	document.getElementById('th5').style.width = document.getElementById('td5').offsetWidth;
	
	document.getElementById('th7').style.width = document.getElementById('td7').offsetWidth;
	document.getElementById('th8').style.width = document.getElementById('td8').offsetWidth;
	document.getElementById('th6').style.width = document.getElementById('td6').offsetWidth;
	document.getElementById('th9').style.width = document.getElementById('td9').offsetWidth;
	}
  }
</script>

</head>
	<body>	



	<table id="headers" width="100%"  >
			<thead><tr bgcolor="blue">
				<th align="center" id="th1">
				DPCI<br>
			</th>						 
			<th align="center" id="th2">
				Description<br>
			</th>
			<th align="center" id="th3">
				Estimated Delivery Date<br>
			</th>
			<th align="center" id="th4">
				Promotional Week Begin Date or Event Set Date<br>
			</th>			
			<th align="center" id="th5">
				Promotional Type<br>
			</th>			
			<th align="center" id="th6">
				Regular Price<br>
			</th>			
			<th align="center" id="th7">
				Reduced Price<br>
			</th>			
			<th align="center" id="th8">
				Sales Forecast Qty (Cases)<br>
			</th>
			<th align="center" id="th9">
				HQ Push Qty (Cases)<br>
			</th>
			</tr></thead>
	</table>
			<div style="height: 275px; overflow-y: auto;">

			<table id="data" width="100%">
			      
			
					<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	
					<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	<tr bgcolor="#EEEEEE">
						<td id="td1" width="9%">column 1
							
    					</td>
    					<td id="td2" width="28%">
			    			COlumn 2
    					</td>
    					<td id="td3" width="9%">
			    			Column 3
    					</td>
    					<td id="td4" width="9%">
			    			Column 4
    					</td>
       					<td id="td5" width="13%">
						Column 5
    					</td>
					<td id="td6" width="8%">
						Column 6
    					</td>
					<td id="td7" width="8%">
						Column 7
    					</td>
					<td id="td8" width="8%">
						Column 8
    					</td>
					<td id="td9" width="8%">
						Column 9
    					</td>
		     			</tr>	

				</table>
			</div>
	</body>
</html>

//Mod Edit - Wrapped the code within CODE tags

I remember I did not get a proper solution for this (about 2 years ago). The closes I got was similar to what you have achieved, with out the ability for the table to adjust width dynamically. Did a quick search with no luck. Do let know when you find a solution.

window.onresize = init;

I think this is the code responsible for your mis alignment ?? and i tried this code snipet and it didn't change when i resized

S

Hi
I have created some drop-down menus in navbar using bootstrap. And i m facing a problem, which is whenever my home page is loaded it opens all the drop down menu. I want them all to be in closed state until user clicks on them.
Here is my code : Edit fiddle - JSFiddl

shar_yogi said:
Hi
I have created some drop-down menus in navbar using bootstrap. And i m facing a problem, which is whenever my home page is loaded it opens all the drop down menu. I want them all to be in closed state until user clicks on them.
Here is my code : Edit fiddle - JSFiddl

In all your menu items, remove that "open" class. i.e. Replace <li class="dropdown open"> with <li class="dropdown">

S

Thanks [MENTION=129731]Shah[/MENTION] it worked.

This thread seems dead for the most part but i have a query concerning a web page that i am trying to create,hence posting it here:

I'd like to develop a web-page using php and html having 2 columns side by side,the column on the left being narrower than the one on the right.The left column will contain some links,and on clicking them,the respective content will be displayed on the 2nd column to the right(it will not redirect to some other page,but will display it on the same page only on the 2nd column).

For instance what i am trying to do here is keep two links,one to view the contents of a mysql table and the other to insert new values to the table.On clicking the links,their corresponding options will be displayed on the right column,not on an entirely new page-is there any way to implement that?

I dont have much experience with web-development(basically a noob),so if someone could help me with this one then i will be extremely grateful.

@quicky008 This might do the trick for you: Pass value to iframe from a window

tbh i dont know much about iframes-could you please post the link to a tutorial which might offer some explanation on how it should be used?

quicky008 said:
This thread seems dead for the most part but i have a query concerning a web page that i am trying to create,hence posting it here:

I'd like to develop a web-page using php and html having 2 columns side by side,the column on the left being narrower than the one on the right.The left column will contain some links,and on clicking them,the respective content will be displayed on the 2nd column to the right(it will not redirect to some other page,but will display it on the same page only on the 2nd column).

For instance what i am trying to do here is keep two links,one to view the contents of a mysql table and the other to insert new values to the table.On clicking the links,their corresponding options will be displayed on the right column,not on an entirely new page-is there any way to implement that?

I dont have much experience with web-development(basically a noob),so if someone could help me with this one then i will be extremely grateful.

what kind of front-end are you using? any js librries? then it can be easy, but as you said you are just starting into web development so I assume answer will be no.

you can use javascript to do either hide and show the content if it is not much (save all pages content on same page) else you can do ajax call and replace right column html

Don't use iframes

One can use iFrames iff the iframe contents are not needed to be accessed from it. Say for example, on the payment page of a website, customer has to enter some details like OTP only after that the payment module has to appear. Some payment vendors might provide their own JS library, which contains code to load these modules, to the website owner. Once customer enters the correct OTP, one can make a call to these payment related scripts in the iframe where customer can enter the card details and proceed to bank page to authorize the payment. Here website owner don't have to save customer's card details at all but only few transaction related details which you will get from the payment partner.

One can access iframe contents, but its get complex, and that should be avoided when easy alternatives are available like posted above. Use ajax calls to get the data from your API and populate in a div.

Somehow I missed this thread entirely until now.