AllInWorld99 provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL,FLASH, jQuery, java, for loop, switch case, if, if else, for...of, for...in, for...each,while loop, blogger tips, blogger meta tag generator, blogger tricks, blogger pagination, client side script, html code editor, javascript editor with instant output, css editor, online html editor, materialize css tutorial, materialize css dropdown list,break, continue statement, label,array, json, get day and month dropdown list using c# code, CSS button,protect cd or pendrive from virus, cordova, android example, html and css to make android app, html code play,telerik show hide column, Transparent image convertor, copy to clipboard using javascript without using any swf file, simple animation using css, SQL etc. AllInWorld99 presents thousands of code examples (accompanied with source code) which can be copied/downloaded independantly. By using the online editor provided,readers can edit the examples and execute the code experimentally.


                          

MAHATMA GANHIJI MEMORIAL

                    
     In the following example will help you to dynamically change the button text using javascript.
     val() is used to change the button text value, in the following example we are used two buttons and change its text dynamically when pressing on the button.
     JavaScript have toLowerCase() method for converting the text to Lowercase letters.

     When we use the check box the materialize css will convert the design automatically.

     One of the website attracting way is animating title bar, it will reduce the website idl state time. It is very easy to place it.

Example image
     This screen was taken from chrome browser. Can you see the title bar of the window is rotating, this also rotating in the windows status bar.










Animate title bar in blogger
Add animation press here

     If the above button is not work or want to modified the title name follow the steps, otherwise leave all the below steps.
Step 1
     Login to your blogger by entering your username and password.


Step 2
     Select your blogger, by clicking Go to post list  button.

Go to blogger post list

Step 3
     Go to layout and press Add gadget.

Add Gadget in blogger


Step 4
     After press the Add gadget a popup window is opened, in that window scroll and select the  HTML/JavaScript.

Add HTML-JavaScript Window in Blogger



Step 5
     Another window is opened and ask Title and Content, leave the Title field and copy the below code and paste it to the Content box.



<script type='text/javascript'>
msg = document.title;
msg = msg + ".";
position = 0;

function scrolltitle() {
  document.title = msg.substring(position, msg.length) + msg.substring(0, position);
  position++;
  if(position > msg.length) position = 0
  window.setTimeout("scrolltitle()", 110);
}
scrolltitle();
</script>

Paste the html-javascript code on blogger

Note:
     If you want to change the title text with extra text, add the text after or before the msg = msg+".";
eg: msg="My extra text "+msg;

Step 6:
     Finally save it and open your blog url, your title is animating.


     jQuery have default design for tabs. We need to import the jquery plugin and jQuery UI plugin then only the tabs() method works properly with good design.
     A single content area with multiple panels, each associated with a header in a list.


     Radio Button with-gap class, this class is used to create the radio button filled with gap in selected radio buttons.

     Materialize css have default class for radio button design, and no need to apply any special class. The materialize css will take the style when you define radio button.

      In materialize css we can easy to create the drop down list, when we use dropdown list in materialize css we should need to initiate the dropdown list in document ready.

     The following example can create the textarea with icon using materialize css.

     materialize-textarea  and input-field class is used to create a textarea in materialize css.


     <textarea id="txta1" class="materialize-textarea"></textarea>

     If we want to add special icon in materialize css we need to import the following plugin.


   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

     Given a jQuery object that represents a set of DOM elements, the .slice() method constructs a new jQuery object containing a subset of the elements specified by the start and, optionally, end argument. The supplied start index identifies the position of one of the elements in the set; if end is omitted, all elements after this one will be included in the result.


     placeholder is the very important in text boxes, because we can give the label inside the textbox.placeholder in materialize css, placeholder is used to show the what you need to enter in the text box without any label box. when you start typing inside the textbox the placeholder text is hide.

     Text Boxes are designed suitable for mobile also, it appear user friendly. And we can use this materialize css text box using just call input-field class.

     Materialize css have some footer classes for creating footer contents, like sitemap notes copyright note and etc.

     In some situation we need to hold or pause some posts in blogger without remove, in that time we can follow the following steps.



     chip class is used to create tags, with or without images. Also we can place close button to remove tag.

     card-image class is used to create a card with images.

     Materialize css have some classes for creating cards, card is used to highlight some words on the website or blog.

     We can place icon inside the button by write a class.

Example

<a class="waves-effect waves-light btn">Drop<i class="material-icons right">invert_colors</i></a>
<a class="waves-effect waves-light btn">E-Mail<i class="material-icons right">email</i></a>

     The following button is created using materialize css.

Example

  <a class="waves-effect waves-light btn">Link Button 2</a>
  <button class="waves-effect waves-light btn">Button 2</button>

     Materialize css can easy to display notification message in the left side of the drop down list item, also it is very simple to do using materialize css.

     Birdish Petroleum is an addictive physics-based destruction game by Pitergames. Help 4 different birds to destroy battleships and oil platforms. Use your mouse to manipulate items, activate features and shoot missiles. Much fun with Birdish Petroleum!
     Materialize css have stylish dropdown list, this drop down list style is huge difference from other drop down list.

     Use your mouse to draw a path to navigate the blue ball directly to the red flag. But you have to hurry up, because the line will come to nothing. Try to catch the golden stars along the way to increase your score in Disappearing Path puzzle game. Much fun.
Controls: Mouse
Play Sugar Panic, a free online puzzle game.
Tags: ball games, candy games, kiz10 games, monster games, panic games, physics based games, roll games, sugar games, sweet games
     These class are used with collection class, also it is used to create list items with notification informations like new messages.

syntax

  <div class="collection">
    <a href="#" class="collection-item">First Item<span class="new badge">30</span></a>
  </div>

     Javascript have Date() method for getting current time and date.

syntax

     var Today=new Date();

     collection class in materialize css it is used to create a list view.


    <div class="collection">
        <a href="#" class="collection-item">First Item</a>
        <a href="#" class="collection-item">Second Item</a>
        <a href="#" class="collection-item">Third Item</a>
        <a href="#" class="collection-item">Fourth Item</a>
    </div>
     This class is used to change the font style, also change its size depending on the device screen size.


    <div class="flow-text">
        ......
        ......
    </div>

     In materialize css <Blockquote> tag is used to write the important notes, it will mark the line.


     <blockquote>Some text</blockquote>
     responsive-table class is used to create the table with responsive design, so the table data will not go out of the screen.
     clipboard.js allow you to directly copy the text to clipboard from data-clipboard-text. If you want to copy the text by clicking a span and copy some entered text to clipboard we can use the following example.

      We have a plugin for copy the text from specified html element (div,span,...) to clip board without pressing ctrl+c (copy shortcut key).

     In the below example you can copy the inside the div text to clipboard by clicking the copy button without using any other file, only we are using only one clipboard.js file.

     Materialize css centered class is used to create a table with center aligned text. We no need to write any extra styles.
     Materialize css have highlight class for table, it will highlight the table rows and user can easy to understand the every rows.
     Materialize css provide standard bordered table, just assign the striped class to table tag it will automatically assign the td and tr style.

     In many situation we need to check the same variable with many values in if statement, it is increase your code size and make confusions.
     We can use array like below and check it, this method is reduce your code size and avoid confusions.

     The following HTML program is very simple and basic program to just display some text. The following editor can write your html program and see your output instantly.

Simple Addition Program Using jQuery
     In the following example is the very simplest addition program using jQuery, jQuery is the framework of javascript, jQuery is the plugin created using pure javascript code. The jQuery can easy to do to program.

     First we need to create three text boxes one for first number second one for second number and thired for show the sum of two numbers.

Sum of two number jQuery
Simple Addition Program Using jQuery
     In the following example is the very simplest addition program using jQuery, jQuery is the framework of javascript, jQuery is the plugin created using pure javascript code. The jQuery can easy to do to program.

     First we need to create three text boxes one for first number second one for second number and thired for show the sum of two numbers.
Sum of two number Using Javascript

Total Pageviews