Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts

2/11/2016

How to Add jQuery "Back To The Top and Go to the Bottom" Arrows

DEMO  

Not only It looks beautiful, but is very useful for bloggers, blogs and websites. And all the other platforms that have a long leash.
It's easier to click down and without hassle and scrolling you are on the bottom of the page. Or reverse. You do not need to know HTML at all and is easy to install and works on all blogs and browsers. Even on Wordpress and tumblr-in. 

Now I will give you a demo codes and how to install it. It's over for a minute.


1) Find ]]><b:skin> tag 
2) Above it immediately, add the following code:

/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(
http://4.bp.blogspot.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAACeQ/aEcKRyEhxsE/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(
http://3.bp.blogspot.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Now look for the </body> tag (usually at the bottom of the page, use CTRL + F)
Add the following code above it:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>
- If you alredy have jQuery installed,remove the red line of code.
- In case you want to remove the "Go to top" button, remove the 1st bolded code and to remove the "Go to bottom" button, remove the 2nd one.

That's it. It's easy and works everywhere. Thank you and Happy Blogging

11/17/2015

Jquery and Css Vertical Drop Down Menu

Great Widget because it does not takes a lot space even makes you more valuable space and still is the main thing, the navigation menu just as this is the on the side bur and if you have a little more knowledge of jquery or css area, then you can also do custom variants. I looks nice and is very functional. You have a a demo, it is easy to install and easy to uninstall. Just remove the widget.
Jquery and Css Vertical Drop Down Menu

First and most important for the widget, to work is to add this code into the blogger immediately after <head> tag
<script src="http://code.jquery.com/jquery-latest.min.js">

Place the following code into the HTML / JavaScript box in the sidebar and that's all.




Replace all with this COLOR with your titles or tags

Replace  hashtag #' with your link

Replace this - width,  width: 300px;   as needed

You can make some more custom variation because it's very easy to handle

That's all, click save and your done, happy bloging


10/08/2015

How to Add jQuery i CSS3 Magnifying Glass

Idea came by surfing web and saw on some site how they made this awesome effect. There is similar effect on my blog, maybe better, but this one isn't bad at all on contrary, you will see and you will lke it 100%. Take a look at the site I mentioned above, you may find some solution how to implement this hack. You have to know CSS, HTML i jQuery for this. Here is one way  - Zoom Effect 1  ,read it, it's cool. The only diference is in codes and style. This one is a little harder for beginners.
 Magnifying Glass


 HTML
 <img class="magniflier" src="http://4.bp.blogspot.com/-Qz-_RUSyXZo/UsdMfAz96jI/AAAAAAAARI8/qVzSQxXDsIg/s1600/iphone-5-thumb%5B1%5D.jpg" width="460"/>

Replace "image.jpg" with your image URL

CSS
.glass {
  width: 170px;
  height: 170px;
  position: absolute;
  border-radius: 50%;
  cursor: crosshair;
  /* Multiple box shadows to achieve the glass effect */
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25),
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    display: none;
}

CSS gives you style and make Magnify


jQuery
$(function() {
  var native_width = 0;

  var native_height = 0;
  var mouse = {x: 0, y: 0};
  var magnify;
  var cur_img;
  var ui = {
    magniflier: $('.magniflier')
  };
  // Connecting to the magnifying glass
  if (ui.magniflier.length) {
    var div = document.createElement('div');
    div.setAttribute('class', 'glass');
    ui.glass = $(div);
    $('body').append(div);
  }
  // All the magnifying will happen on "mousemove"
  var mouseMove = function(e) {
    var $el = $(this);
    // Container offset relative to document
    var magnify_offset = cur_img.offset();
    // Mouse position relative to container
    // pageX/pageY - container's offsetLeft/offetTop
    mouse.x = e.pageX - magnify_offset.left;
    mouse.y = e.pageY - magnify_offset.top;
 
    // The Magnifying glass should only show up when the mouse is inside
    // It is important to note that attaching mouseout and then hiding
    // the glass wont work cuz mouse will never be out due to the glass
    // being inside the parent and having a higher z-index (positioned above)
    if (
      mouse.x < cur_img.width() &&
      mouse.y < cur_img.height() &&
      mouse.x > 0 &&
      mouse.y > 0
      ) {
      magnify(e);
    }
    else {
      ui.glass.fadeOut(100);
    }
    return;
  };
  var magnify = function(e) {
    // The background position of div.glass will be
    // changed according to the position
    // of the mouse over the img.magniflier
    //
    // So we will get the ratio of the pixel
    // under the mouse with respect
    // to the image and use that to position the
    // large image inside the magnifying glass
    var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1;
    var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1;
    var bg_pos = rx + "px " + ry + "px";
 
    // Calculate pos for magnifying glass
    //
    // Easy Logic: Deduct half of width/height
    // from mouse pos.
    // var glass_left = mouse.x - ui.glass.width() / 2;
    // var glass_top  = mouse.y - ui.glass.height() / 2;
    var glass_left = e.pageX - ui.glass.width() / 2;
    var glass_top  = e.pageY - ui.glass.height() / 2;
    //console.log(glass_left, glass_top, bg_pos)
    // Now, if you hover on the image, you should
    // see the magnifying glass in action
    ui.glass.css({
      left: glass_left,
      top: glass_top,
      backgroundPosition: bg_pos
    });
    return;
  };
  $('.magniflier').on('mousemove', function() {
    ui.glass.fadeIn(100);
 
    cur_img = $(this);
    var large_img_loaded = cur_img.data('large-img-loaded');
    var src = cur_img.data('large') || cur_img.attr('src');
    // Set large-img-loaded to true
    // cur_img.data('large-img-loaded', true)
    if (src) {
      ui.glass.css({
        'background-image': 'url(' + src + ')',
        'background-repeat': 'no-repeat'
      });
    }
    // When the user hovers on the image, the script will first calculate
    // the native dimensions if they don't exist. Only after the native dimensions
    // are available, the script will show the zoomed version.
    //if(!native_width && !native_height) {
      if (!cur_img.data('native_width')) {
        // This will create a new image object with the same image as that in .small
        // We cannot directly get the dimensions from .small because of the
        // width specified to 200px in the html. To get the actual dimensions we have
        // created this image object.
        var image_object = new Image();
        image_object.onload = function() {
          // This code is wrapped in the .load function which is important.
          // width and height of the object would return 0 if accessed before
          // the image gets loaded.
          native_width = image_object.width;
          native_height = image_object.height;
          cur_img.data('native_width', native_width);
          cur_img.data('native_height', native_height);
          //console.log(native_width, native_height);
          mouseMove.apply(this, arguments);
          ui.glass.on('mousemove', mouseMove);
        };


        image_object.src = src;
       

        return;
      } else {
        native_width = cur_img.data('native_width');
        native_height = cur_img.data('native_height');
      }
    //}
    //console.log(native_width, native_height);
    mouseMove.apply(this, arguments);
    ui.glass.on('mousemove', mouseMove);
  });
  ui.glass.on('mouseout', function() {
    ui.glass.off('mousemove', mouseMove);
  });
});

Final Words. 
If you want to get back your pictures to normal, without magnifying, simply switch   <img class="magniflier"  to normal code which was before you added this one.

That's it, if you can handle, please, lieve a comment, that would be so valuable, if not, we will try to find some solution, jQuery and CSS are hard to manage but nothing is impossible. Happy Blogging dear friends !