/HTM_CSS_JS_Example

Short Example of HTML, JavaScript and CSS

Primary LanguageHTML

Disbale Auto Complete, Cut, Copy, Paste

File Name :- Auto_Complete_Off.html

$(document).ready(function(){
	$('.fname').bind("cut copy paste",function(e) {
    	e.preventDefault();
 });
$( document ).on( 'focus', ':input', function(){
    $( this ).attr( 'autocomplete', 'off' );
  });
});

Demo Link :-

http://faizakram.com/github/HTM_CSS_JS_Example/Auto_Complete_Off.html

File Name :- SelectTest After Disable and Selected.html

``` function changeFunc() { var optionvalue = document.getElementById("selectBox").value; alert(optionvalue); $("#selectBox option:contains('"+optionvalue+"')").attr("selected","selected"); $("#selectBox option:contains('"+optionvalue+"')").attr("disabled","disabled"); } ```

Demo Link :-

http://faizakram.com/github/HTM_CSS_JS_Example/Auto_Complete_Off.html

File Name:- MultiSelect After Disable And Selected.html

``` function changeFunc() { var optionvalue = document.getElementById("selectBox"); for (var i = 0; i < optionvalue.options.length; i++) { if(optionvalue.options[i].selected ==true){ //alert(optionvalue.options[i].value); $("#selectBox option:contains('"+optionvalue.options[i].value+"')").attr("selected","selected"); $("#selectBox option:contains('"+optionvalue.options[i].value+"')").attr("disabled","disabled"); } } } ```

Demo Link :-

http://faizakram.com/github/HTM_CSS_JS_Example/MultiSelect_After_Disable_And_Selected.html

File Name:- Form_Rest_Using_Jquery.html

=============================================== ``` $(document).ready(function(){ $("#myform").submit(function(e) { alert("Going To reset"); $("#myform").trigger('reset'); //document.getElementById("myform").reset(); }); }); ```

Demo Link

http://faizakram.com/github/HTM_CSS_JS_Example/Form_Rest_Using_Jquery.html

File Name:- getFileSizeUisngJavaScript.html

``` =============================================== function fileUpload() { var inpFiles = document.getElementById('fileUpload'); for (var i = 0; i < inpFiles.files.length; ++i) { var size = inpFiles.files.item(i).size; alert("File Size : " + size); } }

===============================================

<h3>Before Choose File</h3>
<img src="http://faizakram.com/github/HTM_CSS_JS_Example/filesize.PNG" alt="Web Project, Java Web Project, Java Developer, Delhi Web Developer, Delhi Java Developer, Delhi, Bihar, Patna, Gaya, USA, Java, Spring, Hibernate, School Project, Company CEO, Spring MVC, Spring Security, Maven, Ajax, JavaScript, project, work, faiz, branding, design, school, akram, blood, healthcare, new, soon, developement, search, webdesign, coming, delhi, drugs, engine, instant, portal, escriptions, technologies, doctor, fill, found"/>
<h3>After Choose File</h3>
<img src="http://faizakram.com/github/HTM_CSS_JS_Example/filesize2.PNG" alt="Web Project, Java Web Project, Java Developer, Delhi Web Developer, Delhi Java Developer, Delhi, Bihar, Patna, Gaya, USA, Java, Spring, Hibernate, School Project, Company CEO, Spring MVC, Spring Security, Maven, Ajax, JavaScript, project, work, faiz, branding, design, school, akram, blood, healthcare, new, soon, developement, search, webdesign, coming, delhi, drugs, engine, instant, portal, escriptions, technologies, doctor, fill, found"/>
<h3>Demo Link</h3>
http://faizakram.com/github/HTM_CSS_JS_Example/getFileSizeUisngJavaScript.html

<h2>Button Add Class Or Remove</h2>
==================================


	$(document).ready(function() {
		$('.btn').click(function() {
			 if($(this).val() == "Follow"){
   			 this.value = 'UnFollow';
   			 $(this).removeClass("btn-success");
    		 $(this).addClass("btn-danger");
   			}
   			else{
   				this.value = 'Follow';
   				$(this).removeClass("btn-danger");
    		   $(this).addClass("btn-success");
   			}
			});
	});

=========================================================================
<h3>Before Click </h3>
<img src="http://faizakram.com/github/HTM_CSS_JS_Example/buttonHome.PNG" alt="Web Project, Java Web Project, Java Developer, Delhi Web Developer, Delhi Java Developer, Delhi, Bihar, Patna, Gaya, USA, Java, Spring, Hibernate, School Project, Company CEO, Spring MVC, Spring Security, Maven, Ajax, JavaScript, project, work, faiz, branding, design, school, akram, blood, healthcare, new, soon, developement, search, webdesign, coming, delhi, drugs, engine, instant, portal, escriptions, technologies, doctor, fill, found"/>
<h3>After Click </h3>
<img src="http://faizakram.com/github/HTM_CSS_JS_Example/buttonHome2.PNG" alt="Web Project, Java Web Project, Java Developer, Delhi Web Developer, Delhi Java Developer, Delhi, Bihar, Patna, Gaya, USA, Java, Spring, Hibernate, School Project, Company CEO, Spring MVC, Spring Security, Maven, Ajax, JavaScript, project, work, faiz, branding, design, school, akram, blood, healthcare, new, soon, developement, search, webdesign, coming, delhi, drugs, engine, instant, portal, escriptions, technologies, doctor, fill, found"/>
<h3>Demo Link</h3>
http://faizakram.com/github/HTM_CSS_JS_Example/AddOrRemoveClass.html

===============================================================================================================


<h2>Click Event On Google Map Marker</h2>
==========================================

function initMap() {
    var myLatlng = {lat: -25.363, lng: 131.044};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: myLatlng
    });

    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Click to zoom'
    });

    map.addListener('center_changed', function() {
      // 3 seconds after the center of the map has changed, pan back to the
      // marker.
      window.setTimeout(function() {
        map.panTo(marker.getPosition());
      }, 3000);
    });
                            //Redirection Method Open..
    marker.addListener('click', function() {
      alert("Let Go To Link");
      document.location.href="http://faizakram.com";
    });
    //Redirection Method Close..
  }

================================================================================================
<h3>Before Click </h3>
<img src="http://faizakram.com/github/HTM_CSS_JS_Example/map1.PNG" alt="Web Project, Java Web Project, Java Developer, Delhi Web Developer, Delhi Java Developer, Delhi, Bihar, Patna, Gaya, USA, Java, Spring, Hibernate, School Project, Company CEO, Spring MVC, Spring Security, Maven, Ajax, JavaScript, project, work, faiz, branding, design, school, akram, blood, healthcare, new, soon, developement, search, webdesign, coming, delhi, drugs, engine, instant, portal, escriptions, technologies, doctor, fill, found"/>
<h3>After Click </h3>
<img src="http://faizakram.com/github/HTM_CSS_JS_Example/map2.PNG" alt="Web Project, Java Web Project, Java Developer, Delhi Web Developer, Delhi Java Developer, Delhi, Bihar, Patna, Gaya, USA, Java, Spring, Hibernate, School Project, Company CEO, Spring MVC, Spring Security, Maven, Ajax, JavaScript, project, work, faiz, branding, design, school, akram, blood, healthcare, new, soon, developement, search, webdesign, coming, delhi, drugs, engine, instant, portal, escriptions, technologies, doctor, fill, found"/>
<h3>After Click redirect</h3>
<img src="http://faizakram.com/github/HTM_CSS_JS_Example/map3.PNG" alt="Web Project, Java Web Project, Java Developer, Delhi Web Developer, Delhi Java Developer, Delhi, Bihar, Patna, Gaya, USA, Java, Spring, Hibernate, School Project, Company CEO, Spring MVC, Spring Security, Maven, Ajax, JavaScript, project, work, faiz, branding, design, school, akram, blood, healthcare, new, soon, developement, search, webdesign, coming, delhi, drugs, engine, instant, portal, escriptions, technologies, doctor, fill, found"/>

<h3>Demo Link</h3>
http://faizakram.com/github/HTM_CSS_JS_Example/OnMapMarkerClickEvent.html