Develop Reference

Show hover card left right based on element left right?

My HTML has a div and when I hover the div a card will be displayed on the right side. When the div is in left side then this still show right side. When I reduce the browser width then this card partially show the detail.
How to automatically position using jquery.
var thisEl = $(this);
var offsets = thisEl.offset();
var thisElTopOffset = offsets.top;
var thisElLeftOffset = offsets.left;
This will show as i mentioned in the image. But i try to position the div to left when the elements are in right.
Code: I tried so far
allHoverCardTriggers.on({
click: function(event) {
event.preventDefault();
var thisEl = $(this);
cardTimer = setTimeout(function(){
var docWidth = $(document).width();
var rightSide = false;
//return user id
var userLink = thisEl.attr('href');
if($('.ViewProfilePage').length && $('img.lia-user-avatar-profile',thisEl).length){
var userLink = document.location.href;
} else if(thisEl.attr('href')=='#'){
return false;
}
var thisLen = (userLink).split('/');
thisUserID = (thisLen)[thisLen.length-1];
var thisCard = $('.profileCard[data-user='+thisUserID+']',cardWrapper);
var offsets = thisEl.offset();
var thisElTopOffset = offsets.top;
var thisElLeftOffset = offsets.left;
if(thisCard.length && $('.profileCard[data-user='+thisUserID+'] .preloader',cardWrapper).length<1)
{
$('.profileCard',cardWrapper).hide();
rightSide?thisCard.addClass('rightArrow'):thisCard.removeClass('rightArrow');
thisCard.delay(500).css({'top':thisElTopOffset,'left':thisElLeftOffset}).stop().show();
}
else
{
var ajaxReturn = '';
thisCard.remove();
//profile card wrapper markup
var rightArrowClass = rightSide?'rightArrow':'';
var profileCardHtml = '<div class="profileCard '+rightArrowClass+'" style="display:block;top:'+thisElTopOffset+'px;left:'+thisElLeftOffset+'px;" data-user="'+thisUserID+'"><div class="inner"><img src="/html/assets/feedback_loading_trans.gif" class="preloader" style="margin:80px auto;display:block;" /></div></div>';
$.when(
//get the background
$.ajax({
type: 'GET',
url: userApiUrl+thisUserID,
dataType: 'html',
success: function(data) {
$('.profileCard',cardWrapper).hide();
ajaxReturn = data;
}
})
)
.done(function(){
cardWrapper.append(profileCardHtml);
$('.profileCard[data-user='+thisUserID+']',cardWrapper).eq(0).empty().html(ajaxReturn);
if($('.profileCard[data-user='+thisUserID+'] .preloader',cardWrapper).length){
$('.profileCard[data-user='+thisUserID+'] .preloader',cardWrapper).parents('div.profileCard').remove();
}
})
.fail(function(){
// Hide if failed request
$('.profileCard',cardWrapper).hide();
});
}
}
},400);
},
mouseleave: function() {
clearTimeout(cardTimer);
if($('.profileCard[data-user='+thisUserID+']',cardWrapper).length){
$('.profileCard[data-user='+thisUserID+']',cardWrapper).delay(500).fadeOut('fast');
}
}
});
}

Here is a jQuery solution. Prior to displaying the popup, the script checks if the offset position of the trigger div plus the popup width falls beyond the screen width and adjusts the popup position accordingly.
hover = function(e) {
//var position = e.position();
var popup = $('.popup');
popup.attr('style', '');
if (e.offsetLeft + popup.outerWidth() > $( window ).width()) {
// adjust for screen width
popup.css({
right: $( window ).width() - e.offsetLeft - e.offsetWidth + 'px',
top: e.offsetTop - popup.outerHeight()
});
}
else {
// position normally
popup.css({
left: e.offsetLeft,
top: e.offsetTop - popup.outerHeight()
});
}
popup.show();
}
hide = function() {
$('.popup').hide();
}
.left-hover {
position:absolute;
left:20px;
top:80px;
border:1px solid black;
}
.right-hover {
position:absolute;
right:20px;
top:80px;
border:1px solid black;
}
.popup {
position:absolute;
display:none;
border:1px solid red;
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-hover" onmouseover="hover(this)" onmouseout="hide()">Hover me</div>
<div class="right-hover" onmouseover="hover(this)" onmouseout="hide()">Hover me</div>
<div class="popup">My popup</div>

Making a panorama move from side to side with jquery

For a photographic website and want to display panoramic photos moving side to side within a viewport. At the moment it goes left to right when the page loads but stops when it runs out of image. Instead of stopping I want it to reverse direction and go right to left, and then left to right, right to left infintum.
It is probable something very simple but I'm a complete newbie to jquery (sorry).
This is the code which I've adapted from Arnault PACHOT:
Any help would be greatly appreciated. Thanks in advance.
/* =========================================================
// jquery.panorama.js
// Author: OpenStudio (Arnault PACHOT)
// Mail: apachot#openstudio.fr
// Web: http://www.openstudio.fr
// Copyright (c) 2008 Arnault Pachot
// licence : GPL
========================================================= */
(function($) {
$.fn.panorama = function(options) {
this.each(function(){
var settings = {
viewport_width: 669,
speed: 20000,
direction: 'left',
control_display: 'auto',
start_position: 0,
auto_start: true,
mode_360: false
};
if(options) $.extend(settings, options);
var elemWidth = parseInt($(this).attr('width'));
var elemHeight = parseInt($(this).attr('height'));
var currentElement = this;
var panoramaViewport, panoramaContainer;
var bMouseMove = false;
var mouseMoveStart = 0;
var mouseMoveMarginStart = 0;
$(this).attr('unselectable','on')
.css('position', 'relative')
.css('-moz-user-select','none')
.css('-webkit-user-select','none')
.css('margin', '0')
.css('padding', '0')
.css('border', 'none')
.wrap("<div class='panorama-container'></div>");
if (settings.mode_360)
$(this).clone().insertAfter(this);
panoramaContainer = $(this).parent();
panoramaContainer.css('height', elemHeight+'px').css('overflow', 'hidden').wrap("<div class='panorama-viewport'></div>").parent().css('width',settings.viewport_width+'px')
.append("<div class='panorama-control'><a href='#' class='panorama-control-left'><<</a> <a href='#' class='panorama-control-pause'>x</a> <a href='#' class='panorama-control-right'>>></a> </div>");
panoramaViewport = panoramaContainer.parent();
panoramaViewport.mousedown(function(e){
if (!bMouseMove) {
bMouseMove = true;
mouseMoveStart = e.clientX;
}
return false;
}).mouseup(function(){
bMouseMove = false;
mouseMoveStart = 0;
return false;
}).mousemove(function(e){
if (bMouseMove){
var delta = parseInt((mouseMoveStart - e.clientX)/30);
if ((delta>10) || (delta<10)) {
var newMarginLeft = parseInt(panoramaContainer.css('marginLeft')) + (delta);
if (settings.mode_360) {
if (newMarginLeft > 0) {newMarginLeft = -elemWidth;}
if (newMarginLeft < -elemWidth) {newMarginLeft = 0;}
} else {
if (newMarginLeft > 0) {newMarginLeft = 0;}
if (newMarginLeft < -elemWidth) {newMarginLeft = -elemWidth;}
}
panoramaContainer.css('marginLeft', newMarginLeft+'px');
}
}
}).bind('contextmenu',function(){return false;});
panoramaViewport.css('height', elemHeight+'px').css('overflow', 'hidden').find('a.panorama-control-left').bind('click', function() {
$(panoramaContainer).stop();
settings.direction = 'right';
panorama_animate(panoramaContainer, elemWidth, settings);
return false;
});
panoramaViewport.bind('click', function() {
$(panoramaContainer).stop();
});
panoramaViewport.find('a.panorama-control-right').bind('click', function() {
$(panoramaContainer).stop();
settings.direction = 'left';
panorama_animate(panoramaContainer, elemWidth, settings);
return false;
});
panoramaViewport.find('a.panorama-control-pause').bind('click', function() {
$(panoramaContainer).stop();
return false;
});
if (settings.control_display == 'yes') {
panoramaViewport.find('.panorama-control').show();
} else if (settings.control_display == 'auto') {
panoramaViewport.bind('mouseover', function(){
$(this).find('.panorama-control').show();
return false;
}).bind('mouseout', function(){
$(this).find('.panorama-control').hide();
return false;
});
}
$(this).parent().css('margin-left', '-'+settings.start_position+'px');
if (settings.auto_start)
panorama_animate(panoramaContainer, elemWidth, settings);
});
function panorama_animate(element, elemWidth, settings) {
currentPosition = 0-parseInt($(element).css('margin-left'));
if (settings.direction == 'right') {
$(element).animate({marginLeft: 0}, ((settings.speed / elemWidth) * (currentPosition)) , 'linear', function (){
if (settings.mode_360) {
$(element).css('marginLeft', '-'+(parseInt(parseInt(elemWidth))+'px'));
panorama_animate(element, elemWidth, settings);
}
});
} else {
var rightlimit;
if (settings.mode_360)
rightlimit = elemWidth;
else
rightlimit = elemWidth-settings.viewport_width;
$(element).animate({marginLeft: -rightlimit}, ((settings.speed / rightlimit) * (rightlimit - currentPosition)), 'linear', function (){
if (settings.mode_360) {
$(element).css('margin-left', 0);
panorama_animate(element, elemWidth, settings);
}
});
}
}
};
$(document).ready(function(){
$("img.panorama").panorama();
});
in})(jQuery);

https://jsfiddle.net/pm6swLxa/
You code use css animations
HTML
<div id="img_container" class="pano slide"></div>
CSS
#img_container {
width:400px;
height: 200px;
overflow: hidden;
background: url('http://www.the-farm.net/piccies/pano2.jpg');
background-size: auto 100%;
background-position: right;
animation: back-and-forth 5s infinite;
}
#keyframes back-and-forth {
0% {
background-position: right;
}
50% {
background-position: left;
}
100% {
background-position: right;
}
}

Web browser won't scroll to top when link clicked in smaller window or mobile version.

For my website at work I am trying to get the webbrowser to scroll to the tope of the page when in a small screen mode. According to some answers it should already being doing this anyway. I have enclosed a copy of the website here:
http://www.synergy-clinics.com/
I believe the code to control navigation is here:
var $currentclass = 'currentpanel';
var $currentlinkclass = 'currentlink';
var $class = 'panel';
var $dotclass = '.panel';
//var $body = 'body';
var $body = '#content'
var $downkey = '38';
var $upkey = '40';
//$(function () {
// $($body).mousewheel(function (event, delta) {
// var $current = $('div.currentpanel');
// $next = (delta > 0)? $current.prev($dotclass) :$next = $current.next($dotclass);
// if ($next.length) { ChangeCSSClass($current, $next); }
// event.preventDefault();
// });
//});
$(function () {
$($body).keydown(function (event, delta) {
var $current = $('div.currentpanel');
if (event.keyCode == $downkey)
{
$next = $current.prev($dotclass);
if ($next.length) { ChangeCSSClass($current, $next); }
event.preventDefault();
}
else if (event.keyCode == $upkey)
{
$next = $current.next($dotclass);
if ($next.length) { ChangeCSSClass($current, $next); }
event.preventDefault();
}
});
});
function MenuItemClick(SectionName)
{
var $current = $('div.currentpanel');
var $next = $('#' + SectionName);
if ($next != null) { ChangeCSSClass($current, $next); }
//event.preventDefault();
}
function ChangeCSSClass(Current, New)
{
$($body).scrollTo(New, 100, { offset: -115 });
$('#' + Current[0].id + 'Link').removeClass($currentlinkclass);
$('#' + New[0].id + 'Link').addClass($currentlinkclass);
Current.removeClass($currentclass);
Current.addClass($class);
New.addClass($currentclass);
}
I have Identified the scrollto line so it must be around here somewhere, any help would be much appreciated.

I was looking for that a few hours , and finally i did.
can you try that :
http://jsfiddle.net/b4M66/
jQuery:
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});​
CSS:
#toTop { position: fixed; bottom: 50px; right: 30px; width: 84px; background-color: #CCC; cursor: pointer; display: none; }​
HTML:
<div id="toTop">Back to Top</div>​

The KeyCode functions arent supported on touch screen devices. You have your code based on that. Just try to move that to the touchstart or click function of an element.

Smooth scroll to specific div on click

What I'm trying to do is make it so that if you click on a button, it scrolls down (smoothly) to a specific div on the page.
What I need is if you click on the button, it smooth scrolls to the div 'second'.
.first {
width: 100%;
height: 1000px;
background: #ccc;
}
.second {
width: 100%;
height: 1000px;
background: #999;
}
<div class="first"><button type="button">Click Me!</button></div>
<div class="second">Hi</div>

do:
$("button").click(function() {
$('html,body').animate({
scrollTop: $(".second").offset().top},
'slow');
});
Updated Jsfiddle

There are many examples of smooth scrolling using JS libraries like jQuery, Mootools, Prototype, etc.
The following example is on pure JavaScript. If you have no jQuery/Mootools/Prototype on page or you don't want to overload page with heavy JS libraries the example will be of help.
http://jsfiddle.net/rjSfP/
HTML Part:
<div class="first"><button type="button" onclick="smoothScroll(document.getElementById('second'))">Click Me!</button></div>
<div class="second" id="second">Hi</div>
CSS Part:
.first {
width: 100%;
height: 1000px;
background: #ccc;
}
.second {
width: 100%;
height: 1000px;
background: #999;
}
JS Part:
window.smoothScroll = function(target) {
var scrollContainer = target;
do { //find scroll container
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
} while (scrollContainer.scrollTop == 0);
var targetY = 0;
do { //find the top of target relatively to the container
if (target == scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);
scroll = function(c, a, b, i) {
i++; if (i > 30) return;
c.scrollTop = a + (b - a) / 30 * i;
setTimeout(function(){ scroll(c, a, b, i); }, 20);
}
// start scrolling
scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}

What if u use scrollIntoView function?
var elmntToView = document.getElementById("sectionId");
elmntToView.scrollIntoView();
Has {behavior: "smooth"} too.... ;) https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

I played around with nico's answer a little and it felt jumpy. Did a bit of investigation and found window.requestAnimationFrame which is a function that is called on each repaint cycle. This allows for a more clean-looking animation. Still trying to hone in on good default values for step size but for my example things look pretty good using this implementation.
var smoothScroll = function(elementId) {
var MIN_PIXELS_PER_STEP = 16;
var MAX_SCROLL_STEPS = 30;
var target = document.getElementById(elementId);
var scrollContainer = target;
do {
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
} while (scrollContainer.scrollTop == 0);
var targetY = 0;
do {
if (target == scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);
var pixelsPerStep = Math.max(MIN_PIXELS_PER_STEP,
(targetY - scrollContainer.scrollTop) / MAX_SCROLL_STEPS);
var stepFunc = function() {
scrollContainer.scrollTop =
Math.min(targetY, pixelsPerStep + scrollContainer.scrollTop);
if (scrollContainer.scrollTop >= targetY) {
return;
}
window.requestAnimationFrame(stepFunc);
};
window.requestAnimationFrame(stepFunc);
}

The solution that worked for me:
var element = document.getElementById("box");
element.scrollIntoView({behavior: "smooth"});
You can explore more options here

You can use basic css to achieve smooth scroll
html {
scroll-behavior: smooth;
}

I took the Ned Rockson's version and adjusted it to allow upwards scrolls as well.
var smoothScroll = function(elementId) {
var MIN_PIXELS_PER_STEP = 16;
var MAX_SCROLL_STEPS = 30;
var target = document.getElementById(elementId);
var scrollContainer = target;
do {
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
} while (scrollContainer.scrollTop === 0);
var targetY = 0;
do {
if (target === scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);
var pixelsPerStep = Math.max(MIN_PIXELS_PER_STEP,
Math.abs(targetY - scrollContainer.scrollTop) / MAX_SCROLL_STEPS);
var isUp = targetY < scrollContainer.scrollTop;
var stepFunc = function() {
if (isUp) {
scrollContainer.scrollTop = Math.max(targetY, scrollContainer.scrollTop - pixelsPerStep);
if (scrollContainer.scrollTop <= targetY) {
return;
}
} else {
scrollContainer.scrollTop = Math.min(targetY, scrollContainer.scrollTop + pixelsPerStep);
if (scrollContainer.scrollTop >= targetY) {
return;
}
}
window.requestAnimationFrame(stepFunc);
};
window.requestAnimationFrame(stepFunc);
};

Ned Rockson basically answers this question. However there is a fatal flaw within his solution. When the targeted element is closer to the bottom of the page than the viewport-height, the function doesn't reach its exit statement and traps the user on the bottom of the page. This is simply solved by limiting the iteration count.
var smoothScroll = function(elementId) {
var MIN_PIXELS_PER_STEP = 16;
var MAX_SCROLL_STEPS = 30;
var target = document.getElementById(elementId);
var scrollContainer = target;
do {
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
} while (scrollContainer.scrollTop == 0);
var targetY = 0;
do {
if (target == scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);
var pixelsPerStep = Math.max(MIN_PIXELS_PER_STEP,
(targetY - scrollContainer.scrollTop) / MAX_SCROLL_STEPS);
var iterations = 0;
var stepFunc = function() {
if(iterations > MAX_SCROLL_STEPS){
return;
}
scrollContainer.scrollTop =
Math.min(targetY, pixelsPerStep + scrollContainer.scrollTop);
if (scrollContainer.scrollTop >= targetY) {
return;
}
window.requestAnimationFrame(stepFunc);
};
window.requestAnimationFrame(stepFunc);
}

Need Help Getting Floating Social Bar Working

My client is using the "Digg-Digg" plugin on their blog, and has asked me to implement the same thing on the rest of the site. I have copied the html code, the css file & the JS file, updated the links and variables, yet it still won't appear on the page. Can anyone help me out??? Thank you in advance.
Here is the html code:
<a id="dd_end"></a>
<div class='dd_outer'>
<div class='dd_inner'>
<div id='dd_ajax_float' style="position: absolute; top: 308px; left: -95px; display: block;">
<div class='dd_button_v'>
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.scottera.com/" data-count="vertical" data-text="Arch Kit" data-via="archkit" ></a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></div><div style='clear:left'></div><div class='dd_button_v'><script src="//connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.scottera.com" send="false" show_faces="false" layout="box_count" width="50" ></fb:like></div><div style='clear:left'></div><div class='dd_button_v'><script type='text/javascript' src='https://apis.google.com/js/plusone.js'></script><g:plusone size='tall' href='http://www.scottera.com/'></g:plusone></div><div style='clear:left'></div></div></div></div><script type="text/javascript">var dd_offset_from_content = 40;var dd_top_offset_from_content = 0;var dd_override_start_anchor_id = "";var dd_override_top_offset = "";</script><script type="text/javascript" src="include/digg-digg/js/diggdigg-floating-bar.js?ver=5.3.6"></script>
And here is the CSS for the main sections:
.dd_outer {
width:100%;
height:0;
position:absolute;
top:0;
left:0;
z-index:9999
}
.dd_inner {
margin:0 auto;
position:relative
}
EDIT: Adding JS code:
var dd_top = 0;
var dd_left = 0;
jQuery(document).ready(function(){
var $floating_bar = jQuery('#dd_ajax_float');
var dd_anchorId = 'dd_start';
if ( typeof dd_override_start_anchor_id !== 'undefined' && dd_override_start_anchor_id.length > 0 ) {
dd_anchorId = dd_override_start_anchor_id;
}
var $dd_start = jQuery( '#' + dd_anchorId );
var $dd_end = jQuery('#dd_end');
var $dd_outer = jQuery('.dd_outer');
// first, move the floating bar out of the content to avoid position: relative issues
$dd_outer.appendTo('#wrapper');
if ( typeof dd_override_top_offset !== 'undefined' && dd_override_top_offset.length > 0 ) {
dd_top_offset_from_content = parseInt( dd_override_top_offset );
}
dd_top = parseInt($dd_start.offset().top) + dd_top_offset_from_content;
if($dd_end.length){
dd_end = parseInt($dd_end.offset().top);
}
dd_left = -(dd_offset_from_content + 55);
dd_adjust_inner_width();
dd_position_floating_bar(dd_top, dd_left);
$floating_bar.fadeIn('slow');
if($floating_bar.length > 0){
var pullX = $floating_bar.css('margin-left');
jQuery(window).scroll(function () {
var scroll_from_top = jQuery(window).scrollTop() + 30;
var is_fixed = $dd_outer.css('position') == 'fixed';
if($dd_end.length){
var dd_ajax_float_bottom = dd_end - ($floating_bar.height() + 30);
}
if($floating_bar.length > 0)
{
if(scroll_from_top > dd_ajax_float_bottom && $dd_end.length){
dd_position_floating_bar(dd_ajax_float_bottom, dd_left);
$dd_outer.css('position', 'absolute');
}
else if ( scroll_from_top > dd_top && !is_fixed )
{
dd_position_floating_bar(30, dd_left);
$dd_outer.css('position', 'fixed');
}
else if ( scroll_from_top < dd_top && is_fixed )
{
dd_position_floating_bar(dd_top, dd_left);
$dd_outer.css('position', 'absolute');
}
}
});
}
// Load Linked In Sharers (Resolves issue with position on page)
if(jQuery('.dd-linkedin-share').length){
jQuery('.dd-linkedin-share div').each(function(index) {
var $linkedinSharer = jQuery(this);
var linkedinShareURL = $linkedinSharer.attr('data-url');
var linkedinShareCounter = $linkedinSharer.attr('data-counter');
var linkedinShareCode = jQuery('<script>').attr('type', 'unparsed-IN/Share').attr('data-url', linkedinShareURL).attr('data-counter', linkedinShareCounter);
$linkedinSharer.html(linkedinShareCode);
IN.Event.on(IN, "systemReady", function() {
$linkedinSharer.children('script').first().attr('type', 'IN/Share');
IN.parse();
});
});
}
});
jQuery(window).resize(function() {
dd_adjust_inner_width();
});
var dd_is_hidden = false;
var dd_resize_timer;
function dd_adjust_inner_width() {
var $dd_inner = jQuery('.dd_inner');
var $dd_floating_bar = jQuery('#dd_ajax_float')
var width = parseInt(jQuery(window).width() - (jQuery('#dd_start').offset().left * 2));
$dd_inner.width(width);
var dd_should_be_hidden = (((jQuery(window).width() - width)/2) < -dd_left);
var dd_is_hidden = $dd_floating_bar.is(':hidden');
if(dd_should_be_hidden && !dd_is_hidden)
{
clearTimeout(dd_resize_timer);
dd_resize_timer = setTimeout(function(){ jQuery('#dd_ajax_float').fadeOut(); }, -dd_left);
}
else if(!dd_should_be_hidden && dd_is_hidden)
{
clearTimeout(dd_resize_timer);
dd_resize_timer = setTimeout(function(){ jQuery('#dd_ajax_float').fadeIn(); }, -dd_left);
}
}
function dd_position_floating_bar(top, left, position) {
var $floating_bar = jQuery('#dd_ajax_float');
if(top == undefined) top = 0 + dd_top_offset_from_content;;
if(left == undefined) left = 0;
if(position == undefined) position = 'absolute';
$floating_bar.css({
position: position,
top: top + 'px',
left: left + 'px'
});
}

You can use the floating social bar plugin
http://wordpress.org/plugins/floating-social-bar/ (it is my plugin)
There is an option to manually add the floating bar on all WordPress pages if you want. Just look at the code on the FAQ page.