Get coordinates of current div using javascript


<script type=”text/javascript”>
function onposition(event) {
pos_x = event.offsetX ? (event.offsetX) :event.pageX-me(‘#pointer_div’).val().offsetLeft
pos_y = event.offsetY ? (event.offsetY) :event.pageY-me(‘#pointer_div’).val().offsetTop;
}
//–>
</script>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
var me = jQuery || $.noConflict();
me(document).ready(function() {
me(‘#pointer_div’).on(‘click’, ”, function(e) {
onposition(e);
});
});

</script><div style=”width:250px;height:250px;background:green;” id=”pointer_div”></div>

Dynamic height and width on resizing in jquery


//jQuery solution
var me = jQuery || $.noConflict();
me(document).ready(function() {
me(‘#heightSpan’).html(me(window).height());
me(‘#widthSpan’).html(me(window).width());

me(window).on(‘resize’, function(){
me(‘#heightSpan’).html(me(window).height());
me(‘#widthSpan’).html(me(window).width());
});
});

width: px

height: px
[/sourcecode]

Perform two actions when clicking the button using jquery triggering



<script src="jquery.js"></script>
<script>
$(document).ready(function(){

 $(".d").click(function(){
 $("input").trigger("click");
 });
});
function sd() {
alert('balas')
}
</script>
</head>
<body>
<div class='link'>Click to see my name...</div>
<input type="submit" name="FirstName" onclick='sd()' value="My name" />

To see demo goto w3schools and copy/paste the above code

Infinite scroll jquery in wordpress


</pre>
<!-- infinite scroll ends here-->
 <?php if ( $wp_query->max_num_pages > 1 ) :
 if ( $imbalance2_theme_options['navigation'] == 0 ) : // Default ?>

<div>
 <?php next_posts_link( __( 'Load more posts', 'imbalance2' ) ); ?>
 </div>

<script type="text/javascript">
 j('.fetch a').live('click', function(e) {
 e.preventDefault();
 j(this).addClass('loading').text('Loading...');
 j.ajax({
 type: "GET",
 url: j(this).attr('href') + '#category_lists',
 dataType: "html",
 success: function(out) {
 result = j(out).find('#category_lists .category_list_post');
 nextlink = j(out).find('.fetch a').attr('href');
 j('#category_lists').append(result).masonry('appended', result);
 j('.fetch a').removeClass('loading').text('Loading the next set of posts...');
 if (nextlink != undefined) {
 j('.fetch a').attr('href', nextlink);
 } else {
 j('.fetch').remove();
 }
 }
 });
 });
 </script>

<?php elseif ( $imbalance2_theme_options['navigation'] == 1 ) : // Infinite scroll ?>

<div>
 <?php next_posts_link( __( 'Load more posts', 'imbalance2' ) ); ?>
 </div>

<script type="text/javascript">
 // Infinite Scroll
 var href = 'first';
 j(document).ready(function() {
 j('#category_lists').infinitescroll( {
 navSelector : '.infinitescroll',
 nextSelector : '.infinitescroll a',
 itemSelector : '#category_lists .category_list_post',
 loadingImg : '<?php echo get_bloginfo('stylesheet_directory') ?>/images/ajax-loader.gif',

donetext : "<em>Nice! You've hit the end.</em>",
 debug : false
 }, function(arrayOfNewElems) {
 j('#category_lists').masonry('appended', j(arrayOfNewElems));
 if (href != j('.infinitescroll a').attr('href'))
 {
 href = j('.infinitescroll a').attr('href');
 }
 });
 });
 </script>

<?php endif; ?>

<?php endif; ?>
 <!-- infinite scroll ends here-->
<pre>