How to play iFrame embedded YouTube video on click of a button.

In a recent my project I had to show and autoplay an embedded YouTube video on click of a button.

So if you just need to play the video on click and don’t need to know when it’s ended or do other things with it, that the YouTube API allows you to do, this is the solution you are looking for:

First we need a iframe Embed Code and simple link.

<a id="playVideo" href="#">Play Youtube Video</a>

< iframe id="youtubeVideo" width="560" height="315" src="https://www.youtube.com/embed/4ALbrJVt1u4" frameborder="0" allowfullscreen > < /iframe >

Then after we need to write simple jQuery function,

which on click just extends the YouTube video source with the autoplay parameter thus plays the video.

I also prevent the link from behaving like it normally would. Simple as that.

Following script should do the trick.

	jQuery(document).ready(function() {
		jQuery('#playVideo').on('click', function(ev) {
			jQuery("#youtubeVideo")[0].src += "&autoplay=1";
			ev.preventDefault();
		});
	});

I hope this will work for you and Maybe this is useful for you in the future. 😉

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

How to hide message after few seconds in jquery.

 

Many of you want to hide element after page loading in website.

Many of you might be wondering that Is it possible to automatically hide an element in a web page 5 seconds after the form loads using jQuery?

and the answer is : Yes, its possible to hide element after few seconds.

For hiding any message, div, element, container then following script will be helping you.

$(".successMessage").delay(5000).fadeOut('slow');
OR 
$(".successMessage").delay(5000).hide(1000);

Note :
Here 5000 stands for 5000 milliseconds that means your message, div or element will hide after 5 seconds.
Here 1000 stands for 1000 milliseconds ( 1 seconds ) that means your message, div or element will take 1 second for hide

I hope it will work for you also as it worked for me:)

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

How to remove typo3 HTML comments.

 
Typo3 atumoatic generate some ugly comments. Like :

<!--TYPO3SEARCH_begin-->
...your HTML ..
<!--TYPO3SEARCH_end-->

To remove above ugly typo3 comments.

For that you have to put following TypoScript in your page template file

page.config.disablePrefixComment = 1

After adding of above script. please clear all cache of your typo3.

and say Good bye to ugly typo3 comments.

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

Simple content slider

 
Now i am going to show you simple content slider. you just have to put small javascript code for slide your content.

It will never conflict with other javascript.

It will work only on previous and next arrow functionality.

CSS section :

<style type="text/css">
  li { display:none;}
  li.current{
    color:#ff0000;
    display:block;
  }
</style>

Javascript section :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script> 
$(document).ready(function(){

  $("#next").click(function(){
		
    total = $("#mobileMenu ul").children("li").length;
    cur = $("#mobileMenu ul li.current").index();
		
    $("#mobileMenu ul li").attr('class','normal');
		
    if(cur==(total-1)){
        $("#mobileMenu ul li").eq(0).attr('class','current');
    }else{
        $("#mobileMenu ul li").eq(cur+1).attr('class','current');
    }
  });


  $("#prev").click(function(){
		
    total = $("#mobileMenu ul").children("li").length;
    cur = $("#mobileMenu ul li.current").index();
		
    $("#mobileMenu ul li").attr('class','normal');
		
    $("#mobileMenu ul li").eq(cur-1).attr('class','current');
		
  });

});
</script>

HTML section :

<div id="mobileMenu">
  <ul>
    <li class="normal">
      <a href="/agentur/flugplan.html">First Slide</a>
    </li>
	
    <li class="current">
      <a href="/agentur/unsere-agentur.html">Second Slide</a>
    </li>
	
    <li class="normal">
      <a href="/agentur/unsere-leistungen.html">Third Slide</a>
    </li>
		
  </ul>
  
  <div class="arrow">
    <img id="prev" src="left_arrow.png" alt="Prev" />
    <img id="next" src="right_arrow.png" alt="Next" />
  </div>
</div>

You can set your design as you want.

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

How to redirect old url to new url using htaccess, php and meta

 

Hariom Reclaim Rubber
Hariom Rubber is a leading manufacturer, supplier and exporter of rubber products in India and abroad. With a dedicated team both in office and at production, Hariom Rubber is committed to grow along with its customers.

 
If you move your site without loosing your search engine ranking and incoming links then following script will be helping you

Your OLD URL is : http://www.hariomrubber.com/request-a-quote.html
and you want to redirect it on new url like
New Rewrite URL: http://www.hariomrubber.com/contact-us.html

then you have to use below script in your .htaccess file
Below script is a rewrite URL htaccess

RewriteCond %{REQUEST_URI} ^/request-a-quote.html$
RewriteRule .* /contact-us.html [L,R=301]

if you open old url then it will be redirect to new url.

Or, if you simply want to redirect all URLs from the old domain to a specific page on the new domain
then add this to the root .htaccess file on the old domain:

RedirectMatch 301 / http://www.hariomrubber.com/about-us.html

Redirect from one file type to another

If you want to change the extension of your web pages, Like .php to .html and file names remaining the same then add below script to your .htaccess:

RedirectMatch 301 /(.*)\.php http://hariomrubber.com/$1.html

Removing file extension via .htaccess

If you have the following URLs for your website:
http://www.hariomrubber.com/about-us.html

However, you would like to hide file extensions from the end users, and allow them to access to the files using the following URLs:
http://www.hariomrubber.com/about-us

then you have to use following in your .htaccess file

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html
# Replace html with your file extension, eg: html, php, asp

Alternate redirect methods via meta tag

Redirect via tag in the document. below meta tag add after your head tag in your html

<head><meta http-equiv="refresh" content="3; url=http://hariomrubber.com/">

Alternate redirect methods via PHP

To redirect via PHP, add following code in your file:

     header ('HTTP/1.1 301 Moved Permanently');
     header( "http://hariomrubber.com/" );

Will be add more blog about htaccess file.

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

How to add “google-site-verification” code in your site

 

Hariom Reclaim Rubber
Hariom Rubber is a leading manufacturer, supplier and exporter of rubber products in India and abroad. With a dedicated team both in office and at production, Hariom Rubber is committed to grow along with its customers.

 
How to Verify Your Site with Google Webmaster Tools

To verify your site and get your meta tag content:

 =>  Go to the Google Webmaster Tools page: Webmaster Tools
 =>  To add a site, click on Add a site.
 =>  Enter the URL for your site.
 =>  Select the Alternate methods tab and then choose the Add meta tag method (first one in the list).
 =>  Copy the value that it gives you for the content parameter of the google-site-verification meta tag. Example: <meta name="google-site-verification" content="yuOLc7bLXFLCZTERTmcXnEPCe9f6pIE9kFYQNpH8gJI">
 =>  Copy the following verification code below and paste it into the Keywords area under the SEO tab.
	<meta name="google-site-verification" content="yuOLc7bLXFLCZTERTmcXnEPCe9f6pIE9kFYQNpH8gJI">
 =>  Open the Webmaster Tools home page again. Make sure that you don't have any requests to verify your site again. If you do, verify it again. 

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

How to display black & white google map

 
For display google map black and white then you have to set below script in your google map code.

  var mapOptions = new Object();
  mapOptions.styles = [{featureType:'all',stylers:[{saturation:-100},{gamma:0.50}]}];

Below is a eaxmple for display black & white google map

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">

function createMap(lat, lng, zoomVal)
{
      var mapOptions ={
          center: new google.maps.LatLng(lat, lng),    
          zoom: zoomVal,   
          scrollwheel: false,  
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          styles : [{featureType:'all',stylers:[{saturation:-100},{gamma:0.0}]}]
      };
      map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
      markerData = {0:{lat:21.5200,lng:70.4700,url:'http://hariomrubber.com/',icon:"http://labs.google.com/ridefinder/images/mm_20_red.png",title:"Hariom Rubber",data:{drive:false, zip:"362002",region:"Gujarat", city:"Junagadh", address:" Murlidhar So-1"}},1:{lat:23.0300,lng:72.5800,icon:"http://labs.google.com/ridefinder/images/mm_20_purple.png",title:"TYPO Help",data:{drive:false, zip:"380058",region:"Gujarat", city:"Ahmedabad", address:"Bodakdev"}}};
 
      for(markerId in markerData)
      {
          markers[markerId] = createMarker(markerData[markerId]);
      }
}

function createMarker(data)
{
      var myLatLng = new google.maps.LatLng(data.lat, data.lng);

      var marker = new google.maps.Marker({
          position: myLatLng,
          icon: data.icon,
          map: map,
          title: data.title
      });
      google.maps.event.addListener(marker, 'click', function() {
          window.location.href = data.url;
      });
    return marker;
}

var map;
var markers = {};

function initialize() {
  createMap(21.0000,78.0000,5);
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

<div id="googleMap" style="width:1000px; height:800px;"></div>

It will look like below image

Black & White google Map

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

How to change browser caching on your site

 
How to set leverage browser caching cpanel

In your .htaccess file you can paste the following directives at the top of the file:

## CACHING - EXPIRES - BEGIN##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"

## CACHING - EXPIRES - END##

By using this code, our main static files like images, CSS, JS, PDF’s etc. will be cached in order to produce faster loading times in the future.

You can see in the above code that there are time periods like “1 year” or “1 month”. These are associated with file types, as an example the above code states that a css file should be cached for a month. If you want to change that and say you want them only cached for a year you would simply replace “1 month” with “1 year”. The values above are pretty optimized for most webpages and blogs.

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif|html|htm|xml|txt|xsl)$">
Header set Cache-Control "max-age=29030400"
</FilesMatch>

you have set all files (PDF, image, webpage, etc) to expire in peoples’ browsers after 1 year.

It is easy to leverage browser caching in TYPO3 and other CMS with this tutorial.

That’s it for leveraging browser caching with your .htaccess file!

I hope it will help you lot.. Best Luck 🙂

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

How to translate your page with google translate.

For translate your page. you have to use below code for translate your page with google translate.

<script src="ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'auto',layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
I love my self

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

How to add option to drop down list using jQuery

For add option using jQuery you can use below HTML and jQuery code.

<html>
   <head>
      <title>How to add option to drop down list</title>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
      <style type="text/css">
         div.demo
         {
         float:left;
         padding:25px;
         }
         #text {
         width:auto;
         margin-top: 20px;
         }
      </style>
      <script type="text/javascript">
         jQuery(document).ready(function($){
         $('.addoption').click(function(){
         	$("#text").css("display","block");
         });
         $('.Button1').click(function(){
         	var as = $("#addtext").val();
         	if(as != ""){
         	$('.DropDown').append($('<option></option>').val(as).html(as).attr('selected', 'selected'));
         	$("#addtext").val("");
         	}else{
         		alert("Write Text In Textbox");
         	}
         });
         });
      </script>
   </head>
   <body>
      <div class="dd">
         <select class="DropDown">
            <option>--Select--</option>
            <option value="Value 1">Value 1</option>
            <option value="Value 2">Value 2</option>
         </select>
         <button class="addoption">Click to add option</button>
      </div>
      <div id="text" style="display: none">
         <table cellpadding="0" cellspacing="0">
            <tr>
               <td>
                  <label> ADD TEXT</label>
               </td>
            </tr>
            <tr>
               <td>
                  <input type="test" id="addtext" value=""/>
               </td>
            </tr>
            <tr>
               <td>
                  <input type="button" value="Add"  class="Button1"/>
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya