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


 


 
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


 


 
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

Black & White google Map

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