SOCIALIZE IT

Wednesday 31 July 2013

(< footer> ) - Tag IE issue.

If you're using <footer> (a fancy schmancy HTML5 tag) sometimes IE does not like it. This is how I've fixed issues like this. Add this to your <head>:

<script>document.createElement('footer');</script>

It may not be what's causing your issue, but I've notice when trying to use HTML5 tags, IE pretty much ignores them or renders them strangely.

Thursday 25 July 2013

PIE.htc - First chaild JS - html5 - css3 ( Spoted in IE 7,8,9 )

<!-------------PIE.htc and   First_chaild Spoted JS for IE 7,8,9 ---------------->
 
 
.class { behavior: url(/pie/PIE.htc); }


<!--[if IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->

<!--[if IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->

<!--[if IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->


<!-----------------------------------   END  ----------------------------------->

<!------------- HTML5 and css3 Spoted JS for IE 7,8,9  ---------------->


<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


<!-----------------------------------   END  ----------------------------------->

Read More HTML ( Dynamically shortened Text with Show More link using jQuery )

<HTML>
<HEAD>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<TITLE>Dynamically shortened Text with Show More link using jQuery</TITLE>
<STYLE>
body, input{
font-family: Calibri, Arial;
margin: 0px;
padding: 0px;
}
a {
color: #0254EB
}
a:visited {
color: #0254EB
}
#header h2 {
color: white;
background-color: #00A1E6;
margin:0px;
padding: 5px;
}
.comment {
width: 400px;
background-color: #f0f0f0;
margin: 10px;
}
a.morelink {
text-decoration:none;
outline: none;
}
.morecontent span {
display: none;

}
</STYLE>
</HEAD>
<BODY>


<div class="comment more">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum laoreet, nunc eget laoreet sagittis,
quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
Duis eget nisl orci. Aliquam mattis purus non mauris
blandit id luctus felis convallis.
Integer varius egestas vestibulum.
Nullam a dolor arcu, ac tempor elit. Donec.
</div>

</BODY>
<SCRIPT>
$(document).ready(function() {
var showChar = 100;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function() {
var content = $(this).html();

if(content.length > showChar) {

var c = content.substr(0, showChar);
var h = content.substr(showChar-1, content.length - showChar);

var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';

$(this).html(html);
}

});

$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</SCRIPT>
</HTML>

Wednesday 24 July 2013

My Photos


Popup HTML

<style>
.jeup-btn, input.jeup-btn { color:red!important;}
</style>
<script type="text/javascript" src="js/jquery-1.js"></script>
<script type="text/javascript" src="js/jquery_002.js"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function() {
function launch() {
$('#je-popuplogin').lightbox_me({centered: true, onLoad: function() { $('#je-popuplogin').find('input:first').focus()}});
}
$('#jepopup').click(function(e) {
$("#je-popuplogin").lightbox_me({centered: true, onLoad: function() {
$("#je-popuplogin").find("input:first").focus();
}});
e.preventDefault();
});
});
</script>


<div class="menu">

  <a href="#" id="jepopup" class="jeup-btn">Click</a>


   <div style="left: 50%; margin-left: -210px; z-index: 1002; position: fixed; top: 50%; margin-top: -167px; display: none;" id="je-popuplogin">
      <div style="background:#fff; float:left; width:250px; height:200px; border:1px solid #666666;">
         <div>
           <a id="close-x" href="#">Close</a>
         </div>
         <div style=" padding:20px; ">
            Remember Me
         </div>          
      </div>                  
    </div>

</div>

RESPONSIVE CSS

/*********- RESPONSIVE CSS -*****************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {

}

/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {

}

/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {
/* disable webkit text size adjust (for iPhone) */

}

Specific Browser CSS

 /*--------  Chrome Safari -------------*/
@media screen and (-webkit-min-device-pixel-ratio:0)
{
.test {
padding: 5px 5px;
}
}
/*-------- Chrome Safari END -------*/


 /*--------------- Safari -------------*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Safari and Chrome */
     body { background:#00CCCC; }

    /* Safari only override */
     body { background:#00CCCC; }
    ::i-block-chrome, body { background:#FF0000; }
}
 /*-------------- Safari End -------------*/



/*-------------- Opera ----------------*/
@media not all and (-webkit-min-device-pixel-ratio:0) {
--- opera old version -----
}

@media not screen and (1) { /* OPERA 11.00 */
input[type="radio"] {
box-sizing: content-box;
height: 3px !important;
width: 3px !important;
float:left!important;
}
}

@media (min-resolution: .001dpcm) {
 Opera 12+Somthing
}
/*------------ Opera END ---------*/




/*-------------- IE 8---------------*/
@media \0screen {
 
}
/*-----------  IE 8 END ---------*/


/*--------- IE - 10 --------------*/
@media \0screen {

}
/*------  ie10 end ---------------*/


/*----------  IE 6, 7 and 8 -------*/
 @media \0screen\,screen\9 {

}
/*---------IE 6, 7 and 8 END ---------*/




=========================================
============== Other Demos ================
=========================================

=============== Safsri =====================
<style>
 .safari  .example { background:#996699; }
</style>

 <body>
<script>
   if (navigator.userAgent.indexOf('Safari') != -1 &&
       navigator.userAgent.indexOf('Chrome') == -1) {
           document.body.className += " safari";
       }
</script>
</body>
=============== Safsri End===================




<body>
<script src="http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js" type="text/javascript"></script>
</body>


<style type="text/css">

/*---IE-All---*/
.ie .example {
  background-color: yellow;
}

/*---IE-7---*/
.ie7 .example {
  background-color: orange;
}

.gecko .example {
  background-color: gray;
}

/*---Fire-Fox---*/
.win.gecko .example {
  background-color: red;
}

.linux.gecko .example {
  background-color: pink;
}
/*---Opera---*/
.opera .example {
  background-color: green;
}

.konqueror .example {
  background-color: blue;
}

/*---Safari---*/
.webkit .example {
  background-color: black;
}
.example {
  width: 100px;
  height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }
</style>

</head>

 </html>

=========================================
=========================================

<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

.ie7 .example {
  background-color: orange;
}
.ie8 .example {
  background-color: orange;
}
.ie9 .example {
  background-color: orange;
}


=========================================
========= Compatible View Issue IE 7,8,9  ========

 This is how I've fixed issues like this. Add this to your
 <head>

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /> 


========= Compatible View Issue IE 7,8,9  ========
=========================================