Wednesday 14 September 2016

Combining fonts to make the content presentable.

Posted by at 3 comments:

Wednesday 3 August 2016

horizontal and vertical center align using CSS

We can horizontal and vertical center align the container in document using below Snippet

body{
align-items: center;
display:flex;
}
Posted by at No comments:

Thursday 28 July 2016

Custom Scrollbar Using Javascript and CSS

Today we will create custom stylized scrollbars for our website. We will use pure javascript to build own scrollbar. So this will really cross browser solution. We can use keys Up/Down keyboard keys to scroll content, mouse roller, drag and drop of scroller, etc

Download File 

HTML & CSS

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
   #slider{
      height: 500px;
      width: 600px;
      overflow: hidden;
      margin-top: 60px;
   }
   #slider1 {
      height: 100px;
      width: 600px;
      overflow: hidden;
      margin-top: 60px;
   }
   #innerDiv{
      transition: top 0.5s;
      -webkit-transition: top 0.1s;
      border: none;
      
   }
   .slidebt{
      background: #083EAA;
      color: #fff;
   }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="slider.js" type="text/javascript"></script>
<script>
 $(document).ready(function(e) {
    $("#slider").autoSlide();
    $("#slider1").autoSlide();
});
</script>
</head>

<body>
<div id="slider">
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
</div>
<div id="slider1">
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
  <p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p><p>But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to
  keep your project DRY by combining some oft-used functionality into one nice, neat package? The
  solution might be to roll your own plugin to meet exactly your needs.</p>
</div>
</body>
</html>



Javascript: slider.js

// JavaScript Document
(function ( $ ) {
    $.fn.autoSlide = function() {
            var parent = $(this);
            var id = $(this).attr("id");
            var content = $(this).html();
            var curPos = 0;
            var downTimeStart = null;
            var eventStart = null;
            $(this).empty();
            $(this).css("position","relative");
            var slideInDiv = $('<div/>',{html:content,id:"innerDiv",style:'position:relative;top:0px;width:'+($(parent).width()-34)+'px'});
            var limitScrool = parseInt($(parent).height()) - parseInt($(slideInDiv).height());
           
            var btUp = $('<button/>', {html: '&utrif;',id: id+'_btn_up',class:'slidebt',style:'position:absolute;right:0;top:1px;width:30px; height:'+(($(parent).height()/2)-2)+'px',
                click: function () {
                 upEvent();
                 },
                 mousedown: function(){
                     downTimeStart = setTimeout(function(){
                         eventStart = setInterval(function(){
                              upEvent();
                         },70)
                     },500);
                 },
                 mouseup : function(){
                    clearInterval(eventStart);
                    clearTimeout(downTimeStart);
                 }
            });
            var btDown = $('<button/>', {html: '&dtrif;',id: id+'_btn_down',class:'slidebt',style:'position:absolute;right:0;bottom:1px;width:30px;height:'+(($(parent).height()/2)-2)+'px',
                click: function () {
                   downEvent();
                 },
                 mousedown: function(){
                     downTimeStart = setTimeout(function(){
                         eventStart = setInterval(function(){
                              downEvent();
                         },100)
                     },500);
                 },
                 mouseup : function(){
                    clearInterval(eventStart);
                    clearTimeout(downTimeStart);
                 }
            });
            $(this).append(slideInDiv);
            $(this).append(btUp);
            $(this).append(btDown);
            var downEvent = function(){
                console.log(curPos);
                if(curPos < parseInt($(slideInDiv).height())-parseInt($(parent).height())){
                      curPos = curPos+50;
                      $(slideInDiv).css("top",-curPos+'px');
                      $(btUp).prop("disabled",false);
                }else{
                    $(btDown).prop("disabled",true);
                    clearInterval(eventStart);
                    clearTimeout(downTimeStart);
                }
            }
            var upEvent = function(){
                console.log(curPos);
                if(curPos > 1){
                      curPos = curPos-50;
                      $(slideInDiv).css("top",-curPos+'px');
                      $(btDown).prop("disabled",false);
                }else{
                    $(btUp).prop("disabled",true);
                    clearInterval(eventStart);
                    clearTimeout(downTimeStart);
                }
            }
            var onsliderLoad = function(){
                if(parseInt($(slideInDiv).css("top")) < 1){
                    $(btUp).prop("disabled",true);
                }
                if(parseInt($(slideInDiv).height()) <= parseInt($(parent).height())){
                    $(btDown).prop("disabled",true);
                }
                console.log($(slideInDiv).height());
            }
            onsliderLoad();
    };

}( jQuery ));

 


Posted by at 1 comment:
Labels: , , , , , , ,

Wednesday 27 July 2016

CSS3 user-select properties

Controls the actual Selection operation. This doesn't have any effect on content loaded as chrome, except in textboxes. A similar property user-focus was proposed in early drafts of a predecessor of css3-ui but was rejected by the working group.

user-select: none;

The text of the element and sub-elements will not be able to be selected. Selection can contain these elements. Starting with Firefox 21 none behaves like -moz-none, so selection can be re-enabled on sub-elements using -moz-user-select:text.

user-select: auto;

The text will be selected according to the browser's default properties.

user-select: text;

The text can be selected by the user.

user-select: all;


In an HTML editor, if a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.

user-select: contain;element (IE-specific alias)

Enables selection to start within the element; however, the selection will be contained by the bounds of that element. Supported only in Internet Explorer.
 
Posted by at No comments:
Labels: , ,

Percentage Calculators Using Javascript

3-way Percent Calculators

Find the sentence that represents your problem.
Enter the values and click Calculate.


<html>
<body bgcolor="#FFFFFF" leftmargin=0 topmargin=0 >
<table width="780" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;&nbsp;</td>
<td valign="top">
<script language="JavaScript">
function calc1(form) {
a = form.a.value/100;
b = a*form.b.value;
form.total1.value = b;
}
function calc2(form) {
a = form.c.value;
b = form.d.value;
c = a/b;
d = c*100;
form.total2.value = d;
}
function calc3(form) {
a = form.e.value;
b = form.f.value/100;
c = a/b;
;
form.total3.value = c;
}
</script>
<table width="468" border="0" cellspacing="2" cellpadding="2">
<tr> 
<td>
<form name="form1">
<div align="left"> 
<table border=1 cellpadding=0 cellspacing=0 width="468">
<tr> 
<td align=center> 
<div align="left"><b>What is</b> 
<input type="text" name="a" size=5>
<b>% of</b> 
<input type="text" name="b" size=8>
<b>?</b></div>
</td>
<td align=center> 
<input type="button" value="Calculate" onClick="calc1(this.form)" name="button">
</td>
<td align=center>Answer: 
<input type="text" name="total1" size=8 maxlength=40>
</td>
</tr>
<tr bgcolor="#eeeecc"> 
<td align=center colspan=3>&nbsp;</td>
</tr>
<tr> 
<td align=center> 
<div align="left"> 
<input type="text" name="c" size=9>
<b>&nbsp;is what percent of</b> 
<input type="text" name="d" size=9>
<b>?</b></div>
</td>
<td align=center> 
<input type="button" value="Calculate" 
       onClick="calc2(this.form)" name="button2">
</td>
<td align=center>Answer: 
<input type="text" name="total2" size=5>% 
</td>
</tr>
<tr bgcolor="#eeeecc"> 
<td align=center colspan="3">&nbsp;</td>
</tr>
<tr> 
<td align=center> 
<div align="left"> 
<input type="text" name="e" size=10>
<b>&nbsp;is 
<input type="text" name="f" size=8>
% of</b> <b>what?</b></div>
</td>
<td align=center> 
<input type="button" value="Calculate" 
       onClick="calc3(this.form)" name="button3">
</td>
<td align=center>Answer: 
<input type="text" name="total3" size=10>
</td>
</tr>
</table>
</div>
</form>
</td>
</tr>
</table>
</body>
</html>
Percentage Calculators
  
3-way Percent Calculators

Find the sentence that represents your problem.
Enter the values and click Calculate.
What is % of ?
 Answer:
 
 is what percent of ?
 Answer: %
 
 is % of what?
 Answer:

 

Posted by at No comments:
Labels: , , , , , , , , , , , , ,

Friday 22 July 2016

Responsive email design

A media query follows a pretty simple structure. For the purposes of email, the media query’s styles are nested within the emails <style> tag:

<style type="text/css">
    .standardCSS{
        color:#505050;
        font-size:15px;
    }

    @media only screen and (max-width:480px){
        .mediaQueryCSS{
            color:#CCCCCC;
            font-size:20px;
        }
    }
</style>

Basically a stylesheet within a stylesheet, media queries are built from a few parts:
@media only screen and (max-width:480px){
} 


The above solution works for mobile design still if it's not working you need to write the media query as inline style see the below example 
<table  border="0" cellpadding="0" cellspacing="0" 
style="@media only screen and (max-width:480px){Your Css} ">

Posted by at No comments:
Labels: , , ,

Saturday 29 August 2015

Web Designer & Developer: Bootstrap accordion scroll to top of active panel ...

Web Designer & Developer: Bootstrap accordion scroll to top of active panel ...: scroll Top when Collapse (accordion) opened ... Click icon in jQuery UI accordion heading to open Bootstrap modal, but prevent accordion co...
Posted by at No comments:
Subscribe to: Posts (Atom)