How to apply custom validation in powermail extension of typo3.

How to apply custom validation in powermail extension of typo3.

Many time we need to integrate custom javascript validation.

Here i have develop some javascript code for apply custom validation in powermail form [ its same as i did in js_contact_form extension. it will available here]

First we need to add some configuration in form element.

here we need to add extra attribute with red color text in following path.

typo3conf/ext/powermail/Private/Templates/Form/Form.html

<f:form
	action="{action}"
	name="field"
	enctype="multipart/form-data"
	additionalAttributes="{vh:Validation.EnableParsleyAndAjax(form:form)}"
	class="form-light mt-20 powermail_form_{form.uid} {form.css} {vh:Misc.MorestepClass(activate:settings.main.moresteps, class:'powermail_morestep')}"
	id="powermail-form-{form.uid}" 
	onsubmit="return powerMailFormValidate(this.id);" >

Following script you need to include in your project

// BEGIN 

< script type="text/javascript" >

function powerMailFormValidate(id) {

    var cValids = 0;

    jQuery("#"+id+" .form-control").removeClass("error");
    
    jQuery("#"+id+" .form-control").each(function(){
        if(jQuery(this).val()==''){
            var validate = jQuery(this).attr("data-parsley-required");
            if(validate=="true"){
                jQuery(jQuery(this)).addClass("error");    
                var placeholder = jQuery(this).attr('placeholderold');
                //var messge = placeholder+" : "+jQuery(this).attr('data-parsley-required-message');
                //jQuery(this).attr("placeholder",messge.replace('*', ''));
                var messge = placeholder+jQuery(this).attr('data-parsley-required-message');
                jQuery(this).attr("placeholder",messge.replace('*Dieses Feld ', ''));
                cValids = 1;
            }
        }else{
            var dataType = jQuery(this).attr("data-parsley-type");

            if(dataType=="email"){

                if(jQuery(this).length > 0){
                    var email = jQuery(this).val();
                    if(email!=""){
                        if(!checkValidEmail(email)) {
                            jQuery(this).val("");
                            jQuery(jQuery(this)).addClass("error");    
                            var messge = jQuery(this).attr('data-parsley-error-message');
                            jQuery(this).attr("placeholder",messge);
                            cValids = 1;
                        }
                    }
                }    
            }
        }
    });

    if(cValids == 1) { 
        jQuery(".parsley-errors-list, .parsley-required").css("display","none"); 
        return false;
    }
}

function checkValidEmail(val) {
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if (!filter.test(val)) {
        return false;
    }
    return true;
}

function trim(field){
    return jQuery.trim(field.val());
}

jQuery(document).ready(function() {

    jQuery(".form-control").each(function(){
        jQuery(this).attr("placeholderold",jQuery(this).attr('placeholder'));
    });
    
    jQuery(".form-control").blur(function(){

        var validate = jQuery(this).attr("data-parsley-required");

        if(trim(jQuery(this))==""){
            if(validate=="true"){
                jQuery(this).val("");
                jQuery(jQuery(this)).addClass("error");    
                var placeholder = jQuery(this).attr('placeholderold');
                var messge = placeholder+jQuery(this).attr('data-parsley-required-message');
                
                jQuery(this).attr("placeholder",messge.replace('*Dieses Feld ', ''));
            }
        }else{

            jQuery(this).removeClass("error");

            var dataType = jQuery(this).attr("data-parsley-type");

            if(dataType=="email"){

                if(jQuery(this).length > 0){
                    var email = jQuery(this).val();
                    if(email!=""){
                        if(!checkValidEmail(email)) {
                            jQuery(this).val("");
                            jQuery(jQuery(this)).addClass("error");    
                            var messge = jQuery(this).attr('data-parsley-error-message');
                            jQuery(this).attr("placeholder",messge);
                            cValids = 1;
                        }
                    }
                }    
            }
        }
    })
    
    jQuery(".form-control").keyup(function(){
        
        if(trim(jQuery(this))!=""){
            jQuery(this).removeClass("error");
        }else{
            var validate = jQuery(this).attr("data-parsley-required");
            if(validate=="true"){
                jQuery(this).addClass("error");
            }
        }
    })
});
< /script >


// END

I hope this will work for you and make your day.

Note: Must need to enable in JavaScript Browser Validation

plugin.tx_powermail.settings.validation.client = 1

Above validation message will display as placeholder.

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

jQuery scroll to element

It’s very easy to scroll to particular element though jQuery

When we load the page that time window automatic scroll to element

Following script will do the trick.

    jQuery(window).scrollTop(jQuery('.YOUR_CLASS_NAME').offset().top);

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

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

Prevent form submit from enter key pressed in jQuery.

How we disable form submit when enter key is pressed??

You have a form where in an input text box. If you enter a string and press enter then time your form will be submitting.

If you only want to disable the Enter key to submit the form, then you need to let its keypress event handler return false when the keycode matches 13.

Preventing form submission when Enter key is pressed will solved by following trick.

<form onkeypress="return event.keyCode != 13;">

I hope it will work for you. 🙂

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

How to remove alpha characters from string using jQuery

 
jQuery for remove alpha characters from string.

If your string is :

var myString = ‘<jainish> 143.8 Text’;

and you want numeric value, dot and dash in your string then you have to use following jQuery

var myString = myString.replace(/[^\d.-]/g, '');
alert(myString)

And output will be :

143.8

If you want only numeric value then Following should do the trick.

var myString = myString.replace(/[^\d]/g, '');
alert(myString)

And output will be :

1438

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

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 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