Rating Star [Per Pixel / Per Point]

Rating Per Pixel [click on star at any point]


<span class="rating">
    <i></i>
</span>

Continue reading “Rating Star [Per Pixel / Per Point]”

Advertisements

Vertical Align Div

12193586_1197172616965002_975453672150836497_n

Vertically Align without using display:table or table-cell

HTML

<div class="container">
    <div class="box">
          <img src="https://scontent-bru2-1.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/12108122_1197131420302455_1168152831213321670_n.jpg?oh=35afd9e93ad3cabea345a4ae52cc044e&oe=56C8CB8B" />
        <br>
        Some Text
    </div>
</div>

  Continue reading “Vertical Align Div”

Country List with Flag or Phone Code

12191723_1197048006977463_2320538824572009542_n

1. Include the required intlTelInput.css in the head section of your page.


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/css/intlTelInput.css">

Continue reading “Country List with Flag or Phone Code”

Smoothly Scroll To An Element

First Method Using ID’s

<a href="#div1">Go To Div 1</a>


<div id="div1"></div>

$('a[href^="#"]').on('click', function(event) {
    var target = $( $(this).attr('href') );
    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 1000);
    }
});

 

Second Method Using Classes

<a href="#" onClick="goToScroll('specificEle')">Go To Div that have class name specficEle</a>


<div class="specificEle"></div>

function goToScroll(e){
    $('html, body').animate({
        scrollTop: $("."+e).offset().top
    }, 1000);
}  

 

See It In Action

 

Copyright Year With JS

HTML

copyright 2010-<span id="cur-year"></span>

JS

var now = new Date();
var thecopyrightYear = now.getYear();
if (thecopyrightYear < 1900) {thecopyrightYear = thecopyrightYear + 1900; }
$("#cur-year").html(thecopyrightYear);

Click Here To See Working Example

Show Message If Javascript Disabled

12049221_1197052410310356_4993280671324528540_n

HTML

<noscript>
    <div id="jqcheck"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB60lEQVQ4T2NkwAHePzrxf3ebL1jWp/0oA5egGiM2pVgFQQq31uj/N/ANZvj+8T3D7aNHGDwbTxNvwKtbO/9f3dLHYJ+axfDn5w+GI/NnMRhFtTEISJtjGIIh8Pv39/87ak0ZzCLiGMRUNMCufnLxDMOlrZsY3JtOMrCwsKPowTDg3tGZ/59f2sVgFRvPkO+bAzZgwsZJDEcXzWNQtIlikDGIwG3Az+9v/+9qsGOwTc1h4JeQhhswcfMUhrcP7zEcXzyXwb3xMAMbuwDcEBTTzi7P/s/M8IFB3zccbDPMBSADQODs2sUMzFwyDIah/ZgGfHt/7/+BvmAGm+RsBl4RMawGfHr5jOHowlkMjiUbGDj55MCGwE060Of1X0RZi0Hb2Q4e3eguAElc2X2A4e2DmwwOhVsRBnx6cfH/yXm5DFZxyQxcAoJ4Dfj24T3DsUVzGcwSJjLwSxkygk3ZVmv4X805gkHZRBNXwkQRv3/+NsP1nUsYvFvOMzI+PLXo/73DSxgsouIYOHj5UBRi8wJIwY8vnxlOLV/CIGcewsC4vkDhv01yLoOIoiqG7bgMACn88Owxw8HpvQyMGwqV/vs19TMwQnxDEthYW8DAeGCC3/9XN46TpBGmWEzDkoHx06dP/z9//kyWAby8vAwAcza2SBMOSCMAAAAASUVORK5CYII=" alt="Javascript is disabled" width="16" height="16"> Javascript is disabled. Please enable it for better working experience.</div>
</noscript>

CSS

#jqcheck {
  background: #fff9d7;
  text-align: center;
  color: #333;
  padding: 10px 0px;
  font-size: 13px;
  font-weight: bold;
  width: 100%;
  font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
}

#jqcheck img {
  margin: 0px 5px -3px;
}

Custom File Browse

12049329_1197054443643486_8193997852542435752_n

HTML:

<div class="addFileStyle">
    <input type="file" />
</div>

 

Step 1: Add this Jquery function

function xfilebrowse(tgt){  
    $(tgt+' input[type=file]').each(function() {
        $(this).wrap('<div class="upldwrap" />');
        $(this).parent().append('<input type="text" /> <input type="button" value="Browse" class="grey_btn" />');
        $(this).css('opacity', 0);
        $(this).on('change', function() {
            var txt = $(this).val();
            txt = txt.replace(/\\/g, '/').replace(/.*\//, '');
            $(this).siblings('input[type=text]').val(txt);
        })
    });
}

 

Step 2: Add this default css  Continue reading “Custom File Browse”