Saturday, July 28, 2012

Removing inline CSS styles using Jquery?

You can remove that inline style with this:

$(document).ready(function(){
  $('.myheader').each(function(idx,el){
    el.style.marginTop='';
  });
});

Thursday, July 5, 2012

IE9 - IE10pp4 CSS Hack


#element {
    color:orange;
}
#element {
    *color: white;    /* IE6 + 7, doesn't work in IE8/9 as IE7 */
}
#element {
    _color: red;     /* IE6 */
}
#element {
    color: green\0/IE8+9; /* IE8 + 9 + IE10pp4  */
}
:root #element { color:pink \0/IE9; }  /* IE9 + IE10pp4 */

Clearfix - Force Element To Self-Clear its Children

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
 
 
Source from: http://css-tricks.com/snippets/css/clear-fix/ 

Wednesday, July 4, 2012

Stick div at top after scrolling


<style>
#sticky {
  background-color: #fff;
  -moz-border-radius: 0.5ex;
  -webkit-border-radius: 0.5ex;
  border-radius: 0.5ex;
  color: #000;
  font-size: 2em;
  padding: 0.5ex;
  width: 600px;
  }
#sticky.stick {
  -moz-border-radius: 0 0 0.5em 0.5em;
  -webkit-border-radius: 0 0 0.5em 0.5em;
  border-radius: 0 0 0.5em 0.5em;
  position: fixed;
  top: 0;
  z-index: 10000;
  }
</style>
</div>

<!-- If you have jQuery directly, then skip next line -->
<script src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
// If you have jQuery directly, then skip next line
google.load("jquery", "1");

function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top)
    $('#sticky').addClass('stick')
  else
    $('#sticky').removeClass('stick');
  }
// If you have jQuery directly, use the following line, instead
// $(function() {
// If you have jQuery via Google AJAX Libraries
google.setOnLoadCallback(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
  });
</script>


Source From: http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html

Saturday, June 30, 2012

jQuery.noConflict()

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict():

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>

Tuesday, June 19, 2012

How to remove named anchor when we click on blog post Continue Reading...


On the loop.php change the code as per provided blow...
From
-------------------------------------------------------------------------------------------------------------------------------
<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
</div>

To
------------------------------------------------------------------------------------------------------------------------------- <div class="entry-content">
<?php the_excerpt( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
</div>

Rotate text through CSS


.text{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
/*filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);*/ /* Option for 90deg, -90deg */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); /* It for any deg */
display:block;
position:relative;
margin-left:100px;
margin-left:50px\9;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:20px;
}