Thursday, February 14, 2013

Dynamic Input type File Browse button Method

/****** Browse Button Method ******/

<style type="text/css">
.upload_block {
position:relative;
width:250px;
height:36px;
float:left;
}
.trueupload {
position:absolute;
top:20px;
right:0;

/* start of transparency styles */
opacity:0;
-moz-opacity:0;
filter:alpha(opacity:0);
/* end of transparency styles */

z-index:2; /* bring the real upload interactivity up front */
width:100px;
}
.dummyupload {
background: url(images/browse_btn.jpg) no-repeat 100% 50%;
height:36px;

}
.dummyupload input {
width:150px;
height:30px;
}
</style>

 <body>

<form>
<div class="upload_block">
<label for="upload">Upload Image: </label>
<div class="dummyupload">
<input type="text" name="dummyupload" /> <!-- browse button is here as background -->
</div>
<input type="file" name="upload" class="trueupload" onchange="this.form. dummyupload.value = this.value;" />
</div>
</form>
</body>

 /*----------------------------------------------------*/



<style type="text/css">
.upload_photo { position:relative; width:460px; height:34px; float:left }
.trueup { height: 34px; left: 0; opacity: 0; position: absolute; top: 0px; width: 460px; z-index: 9 }
.dummyup { background:#faf8f6; width:460px }
.dummyup .filebtn { background: url("../images/browse_btn.png") no-repeat scroll right top rgba(0, 0, 0, 0); border: medium none; height: 34px; position: absolute; right: -26px; top: -2px; width: 168px; }
.dummyup input[type='text'] { border: 1px solid #E3DCDC; color: #444444; font-size: 13px; height: 26px;    padding: 0 10px;    width:290px !important;  }
</style>
<body> 
<form>
<div class="upload_photo">
           <div class="dummyup">
            <input type="text" name="dummyup" value="" />
            <input type="submit" class="filebtn" value=""   />
            <!-- browse button is here as background -->
           </div>
           <input type="file" name="upload" class="trueup" onchange="dummyup.value = this.value;" />
          </div>
</form>
</body>
For more details click here
Posted by at 1 comment:

Dynamic Input type File Drag and Drop Method

/****** Drag and Drop Method For Input type="file" *******/
<style type="text/css">
.upload_box {
width:350px;
height: 50px;
color: #000;
font-size: 19px;
text-align: center;
padding: 20px 10px 0px;
margin:20px 0px;
overflow: hidden;
position: relative;
background: url("/images/arrow_upload.png") repeat-x scroll left top transparent;
background:#eeeeee;
border:1px solid #bbbbbb;
}
.uploadfile {
cursor: pointer;
display: block;
font-size: 200px;
height: 140px;
left: -250px;
opacity: 0;
position: absolute;
top: -10px;
width: 600px;
z-index: 97;
}
h3 {
font:bold 18px/24px Verdana, Arial, Helvetica, sans-serif;
margin:0px 0px 0px;
padding:0px 0px;
}
</style>
<body>

 <div class="upload_box">
<input type="file" multiple="multiple" class="uploadfile" name="uploadfile" id="uploadfile">
<h3>Drag &amp; Drop Files Here To upload</h3>
</div>

</body>




Posted by at No comments:

Tuesday, February 5, 2013

How to use Font Face


How to use Font Face :

The Web Font Loader is a JavaScript library that gives you more control over font loading than the Google Web Fonts API provides. The Web Font Loader also lets you use multiple web-font providers. It was co-developed by Google and Type kit.

Simple Method :  (From our system local font)

@font-face {
  font-family: 'Awesome Font';
  src: url('awesome-font.ttf');
}

@font-face {
  font-family: 'Awesome Font';
  src: url('awesome-font.eot');  /* IE9 Compat Modes */
  src: url('awesome-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('awesome-font.woff') format('woff'), /* Modern Browsers */
         url('awesome-font.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('awesome-font.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Web Method :  (From  internet  web  font)

Full information you will get from here:
http://www.adobe.com/devnet/html5/articles/web-typography-and-css-font-face.html


<script type="text/javascript" src="http://use.typekit.com/typekitid.js" ></script>
<script type="text/javascript">
try{Typekit.load();}catch(e){
}
</script>

<style type="text/css">
  .wf-loading h1 {
   visibility: hidden;
  }
.wf-active {
   /* styles to use when web fonts are active */
  }
  .wf-inactive {
   /* styles to use when web fonts are inactive */
  }
</style>


Web Method :  (From  Google  web  font)

Full information you will get from here:
https://developers.google.com/webfonts/docs/webfont_loader
http://www.adobe.com/devnet/edge-web-fonts/articles/use-at-font-face-with-with-font-services.html

<html>
  <head>
    <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Tangerine', 'Cantarell' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>

(OR )

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
  custom: {
    families: ['yourfontname'],
    urls: ['http://paulirish.com/ yourfontname.css']
  }
});
</script>
    <style type="text/css">
      .wf-loading p {
        font-family: serif
      }
      .wf-inactive p {
        font-family: serif
      }
      .wf-active p {
        font-family: 'Tangerine', serif
      }
      .wf-loading h1 {
        font-family: serif;
        font-weight: 400;
        font-size: 16px
      }
      .wf-inactive h1 {
        font-family: serif;
        font-weight: 400;
        font-size: 16px
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-weight: 400;
        font-size: 16px
      }
    </style>
  </head>

  <body>
    <h1>This is using Cantarell</h1>
    <p>This is using Tangerine!</p>
  </body>

</html>
Posted by at No comments:
Subscribe to: Posts (Atom)