Showing posts with label javascript. Show all posts

How to add JavaScript into HTML page

, ,
Just open a HTML file with any html editor software or notepad. You can use Notepad ++ for batter result. JavaScripts in HTML must be inserted between <script> and </script> tags.

JavaScripts can be put in the <body> and in the <head> section of an HTML page. To insert a JavaScript into an HTML page, use the <script> tag.
The <script> and </script> tells where the JavaScript starts and ends.
The lines between the <script> and </script> contain the JavaScript from the below  box:




<html><head><title>My Page</title>
<script language="javascript" type="text/javascript">
function myFunction() {
          alert('Hello world');
}
</script>
</head>
<body>
<a href="javascript:myFunction();">Click here</a>
</body>
</html>


Since the head loads before the body, placing code in the head ensures that it is available when needed. For example, the following code will work once the page has completely loaded, but if a user manages to click the link before the function has loaded they will get an error. This can easily become an issue if the page is large or slow to load.

<html><head><title>My Page</title>

</head>
<body>
<a href="javascript:myFunction();">Click here</a>
<script language="javascript" type="text/javascript">
function myFunction() {
                alert('Hello world');
}
</script>
</body>
</html>

Note: JavaScript can cause problems when used in tables. It may help to use JavaScript to create the entire table, or at least whole rows.
 Read more

Multi tabs navigation widget generator free

, , , , , , , ,
Wishing good health for all of my friends. Web design is a sector of unlimited opportunity. Large sector but no matching and lots of element helping for build this. Malty table navigation widget is also a very impotent and nice structure for web page. It can show more than one pages into a single page. Sometime it use into page as sub page and a sub-menu bar stay with this. Lets try to do this.


You can use three way to use this widget.

  • With Java-Script;
  • With CSS themes script;
  • With html code.

Add widget with Java-script, CSS & Html

First of all Login your Blogger account.
Go to template option and backup your template.
Click to Template > Edit HTML > Wait for Process.
Now go to find option by pressing Ctrl + F.

Search the flowing code: </head>
Into the head tag or the immediately before this tag paste the html code from the box below.



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#tabs").tabs();
});
</script>


Add CSS code theme for difrent style



<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/black-tie/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/blitzer/jquery-ui.css" type="text/css" />


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/dark-hive/jquery-ui.css" type="text/css" />


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/dot-luv/jquery-ui.css" type="text/css" />


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/eggplant/jquery-ui.css" type="text/css" />


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/excite-bike/jquery-ui.css" type="text/css" />


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/flick/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/hot-sneaks/jquery-ui.css" type="text/css" />


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/le-frog/jquery-ui.css" type="text/css" />


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/mint-choc/jquery-ui.css" type="text/css" />


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/pepper-grinder/jquery-ui.css" type="text/css" />


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/redmond/jquery-ui.css" type="text/css" />


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css" type="text/css" />


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/south-street/jquery-ui.css" type="text/css" />


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/start/jquery-ui.css" type="text/css" />


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/sunny/jquery-ui.css" type="text/css" />


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/swanky-purse/jquery-ui.css" type="text/css" />


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/trontastic/jquery-ui.css" type="text/css" />


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-darkness/jquery-ui.css" type="text/css" />


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css" type="text/css" />


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" type="text/css" />


Add Html code for multi tab

Login your blogger account and go to Dashboard.
Go to Layout option and click to Add a Gadget button.

Now a pop-up window will show with some menu. Scroll down and find HTML/JavaScript option click to right side blue plus mark button.


Now copy the following JavaScript code from the below code box and past to the pop-up window ans click to Save button.

<!-- Tabbed Navigation Widget For Blogger By Come for Know -->


<div id="tabs">
<ul><li><a href="#tabs-1">Tab1</a></li><li><a href="#tabs-2">Tab2</a></li><li><a href="#tabs-3">Tab3</a></li></ul>

<div id="tabs-1">  Tab 1 content goes here  </div>
<div id="tabs-2">  Tab 2 content goes here  </div>
<div id="tabs-3">  Tab 3 content goes here  </div>

<a href="http://gorogriho.blogspot.com/" target="_blank" title="Come for Know"><img src="https://bitly.com/24workpng" alt="Come for Know" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
<a href="http://gorogriho.blogspot.com/" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<a href="http://gorogriho.blogspot.com/" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
</div>
<!-- Tabbed Navigation Widget For Blogger By Come for Know -->


Customize Table bar yourself

Replace the following word to tabs title
tabs-1          to                 your first tab Title
tabs-2          to                 your second tab Title
tabs-3          to                 your third tab Title

Place tabs contain element


Tab 1 content goes here       Replace with first tab contain elements
Tab 2 content goes here       Replace with second tab contain elements
Tab 3 content goes here       Replace with third tab contain elements

 Auto Html code generate for multi tabs

Now easily replace the tab title and insert the tab elements into the box.
If any problem face, comments us for solution and help us.


 Read more
Subscribe to: Posts (Atom)