Develop Reference

Google pubads appear and then disappear

I'm using Google pubads on http://development-client-server.com/ds/ which is working great, until you get to the actual story page (see http://development-client-server.com/ds/speech-more-common-autism/), when the right top sidebar ad will load and then disappear quickly.
I've narrowed it down to the stickySidebars function I'm using to stick both the social media bar on the left and the jobs listing div on the right (beneath where the Google ad is). However, the sticky function shouldn't affect the Google ad at all?
Here's the JS function I'm using, which I've already rewritten several times (and have tried to talk the clients out of using already).
<script>
// Sticky Sidebars
function stickySidebars() {
var length = $('.post-content').height() - $('article .sharing-links').height() + $('.post-content').offset().top;
var lengthSidebar = $('.sticky-container').height() - $('aside .job-listings').height() + $('.sticky-container').offset().top -30;
$(window).scroll(function () {
// Sharing Links
var scroll = $(this).scrollTop() + 90;
var height = $('article .sharing-links').height() + 'px';
if (scroll < $('.post-content').offset().top) {
$('article .sharing-links').css({
'position': 'absolute',
'top': 'auto',
'bottom': 'auto'
});
} else if (scroll > length) {
$('article .sharing-links').css({
'position': 'absolute',
'bottom': '0',
'top': 'auto'
});
} else {
$('article .sharing-links').css({
'position': 'fixed',
'top': '90px',
'height': height
});
}
// Sidebar
var heightSidebar = $('aside .job-listings').height() + 'px';
if (scroll < $('aside .job-listings').offset().top) {
$('aside .job-listings').css({
'position': 'absolute',
'top': '300px',
'bottom': 'auto'
});
} else if (scroll > lengthSidebar) {
$('aside .job-listings').css({
'position': 'absolute',
'bottom': '30px',
'top': 'auto'
});
} else {
if (scroll < $('.sticky-container').offset().top + 300) {
$('aside .job-listings').css({
'position': 'absolute',
'top': '300px',
'bottom': 'auto'
});
} else {
$('aside .job-listings').css({
'position': 'fixed',
'top': '90px',
'height': heightSidebar
});
}
}
});
}
$(window).on('load',function(){
if($(window).width() > 1100){
stickySidebars();
}
});
$(window).resize(function() {
if($(window).width() > 1100){
stickySidebars();
}
});
</script>

The issue is not caused by the sticky sidebar. It is caused by this bit of code:
$(window).on('load',function(){
// Other unrelated functions here...
/*****************************/
// Move Sidebar in Mobile
/*****************************/
if($(window).width() <= 980){
$("aside").appendTo(".mobile-sidebar");
} else {
$("aside").insertAfter(".single-article article");
}
});
Essentially the ad loads and then you move the container (the aside), which causes the ad to disappear.
There are a few different options, but essentially you either need the Google ad script to run after that piece of code or you need to refresh the ads. To refresh the ads you should be able to run this line of code straight after your if else statement:
googletag.pubads().refresh()
This refreshes all of the ads. Depending on how you have it setup you can pass in a variable to refresh() so that a specific ad is refreshed e.g.
var slot1 = googletag.pubads().display('/1234567/sports', [728, 90], 'div-1');
googletag.pubads().refresh([slot1]);
Google Reference Docs for refresh()

Jquery Window scroll .... if else

I face some issues in window scroll function in if...else
It only go in through SCROLL END 1.
Anyone can tell me where I'm doing wrong or suggest me to make it better. Thanks a lot
$(window).scroll(function () {
var scrollend = 1250;
var second_scrollend = 4500;
if ($(window).scrollTop() + $(window).height() >= scrollend) {
console.log("SCROLL END 1");
$("#sidepanel").css({ 'position': 'fixed', 'bottom': '10px', 'width': '300px' });
} else if ($(window).scrollTop() + $(window).height() >= second_scrollend) {
console.log("SCROLL END 2");
$("#sidepanel").css({ 'position': 'fixed', 'bottom': marginbottom + 'px', 'width': '300px' });
} else {
$("#sidepanel").css({ 'position': 'relative', 'bottom': '0px', 'width': 'auto' });
}
});

change your variable value
var scrollend = 4500;
var second_scrollend = 1250;
Why we change the value
Your first codition always true because if $(window).scrollTop() + $(window).height() is greater than 1250 it is always true
Other Way change the sequence of condition
if ($(window).scrollTop() + $(window).height() >= second_scrollend) {
console.log("SCROLL END 2");
$("#sidepanel").css({ 'position': 'fixed', 'bottom': marginbottom + 'px', 'width': '300px' });
}
else if ($(window).scrollTop() + $(window).height() >= scrollend) {
console.log("SCROLL END 1");
$("#sidepanel").css({ 'position': 'fixed', 'bottom': '10px', 'width': '300px' });
}
else {
$("#sidepanel").css({ 'position': 'relative', 'bottom': '0px', 'width': 'auto' });
}

How to create a slide in tab

I'm having problem figuring out how to code the support tab (on the right) of this page - http://test88.fccbet.com/. It currently slides out on click.
This is where I got the the current tab slide out effect: http://www.building58.com/examples/tabSlideOut.html
What I want is that both the main tab and side tab will appear when the page loads (refer to IMAGE1). But when the side tab image is clicked, the main image will hide itself leaving only the tab image (refer to IMAGE2).
(IMAGE1)This is how it currently looks like when the page loads:
echosantos dot com/tabslideout/tab-current-outcome.jpg
(IMAGE2)This is how I want it to look like when the page loads (basically I don't want to click the side tab first to see the rest of the tab) :
echosantos dot com/tabslideout/tab-desired-outcome.jpg
This is my first Stackoverflow question, I hope I gave you enough details for your answer. Thanks in advance for the help!
Cheers!
html:
<div id="bannerLeft">
<div class="slide-out-div no-phone no-phone-landscape" style="background-image:url(images/support-tab.png); "><br />
Fccbet
<a class="handle" href="#"></a><div id="close-bottom"><img src="#routes.Assets.at("images/close-chat.jpg")"/>
</div>
css:
.slide-out-div {
width: 125px;
height:392px;
background: url(../images/support-tab.png); }
#range-logo {
background-image:url(../images/support-tab.png);
display:block;
text-indent:-9999px;
width: 125px;
height:396px;}
javascript:
<script>
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will be your tab
pathToTabImage: '#routes.Assets.at("images/support-tab-side.png")', //path to the image for the tab (optionaly can be set using css)
imageHeight: '284px', //height of tab image
imageWidth: '43px', //width of tab image
tabLocation: 'right', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top
fixedPosition: true //options: true makes it stick(fixed position) on scroll
});
});
</script>
<script>
$(document).ready(function(){
$("#close-bottom").click(function(){
$("#bannerLeft").remove();
});
});
</script>

You need to add this line $('.slide-out-div > .handle').click(); to achieve the target that you want. As you defined the click event on your handler tab so need to enforce a click on page load. Just add the following line in your JQuery code and place it after $('.slide-out-div').tabSlideOut({...});
Working JSFiddle Demo
$(function () {
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will become your tab
pathToTabImage: 'http://wpaoli.building58.com/wp-content/uploads/2009/09/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
imageHeight: '122px', //height of tab image //Optionally can be set using css
imageWidth: '40px', //width of tab image //Optionally can be set using css
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top/ use if tabLocation is left or right
leftPos: '20px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
$('.slide-out-div > .handle').click(); // Add this line and that's it
});
JSFiddle Snippet
Click on the below Run code snippet button to test it here.
(function($) {
$.fn.tabSlideOut = function(callerSettings) {
var settings = $.extend({
tabHandle: '.handle',
speed: 300,
action: 'click',
tabLocation: 'left',
topPos: '50px',
leftPos: '20px',
fixedPosition: false,
positioning: 'absolute',
pathToTabImage: null,
imageHeight: null,
imageWidth: null,
onLoadSlideOut: false
}, callerSettings || {});
settings.tabHandle = $(settings.tabHandle);
var obj = this;
if (settings.fixedPosition === true) {
settings.positioning = 'fixed';
} else {
settings.positioning = 'absolute';
}
//ie6 doesn't do well with the fixed option
if (document.all && !window.opera && !window.XMLHttpRequest) {
settings.positioning = 'absolute';
}
//set initial tabHandle css
if (settings.pathToTabImage != null) {
settings.tabHandle.css({
'background': 'url(' + settings.pathToTabImage + ') no-repeat',
'width': settings.imageWidth,
'height': settings.imageHeight
});
}
settings.tabHandle.css({
'display': 'block',
'textIndent': '-99999px',
'outline': 'none',
'position': 'absolute'
});
obj.css({
'line-height': '1',
'position': settings.positioning
});
var properties = {
containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
};
//set calculated css
if (settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
obj.css({
'left': settings.leftPos
});
settings.tabHandle.css({
'right': 0
});
}
if (settings.tabLocation === 'top') {
obj.css({
'top': '-' + properties.containerHeight
});
settings.tabHandle.css({
'bottom': '-' + properties.tabHeight
});
}
if (settings.tabLocation === 'bottom') {
obj.css({
'bottom': '-' + properties.containerHeight,
'position': 'fixed'
});
settings.tabHandle.css({
'top': '-' + properties.tabHeight
});
}
if (settings.tabLocation === 'left' || settings.tabLocation === 'right') {
obj.css({
'height': properties.containerHeight,
'top': settings.topPos
});
settings.tabHandle.css({
'top': 0
});
}
if (settings.tabLocation === 'left') {
obj.css({
'left': '-' + properties.containerWidth
});
settings.tabHandle.css({
'right': '-' + properties.tabWidth
});
}
if (settings.tabLocation === 'right') {
obj.css({
'right': '-' + properties.containerWidth
});
settings.tabHandle.css({
'left': '-' + properties.tabWidth
});
$('html').css('overflow-x', 'hidden');
}
//functions for animation events
settings.tabHandle.click(function(event) {
event.preventDefault();
});
var slideIn = function() {
if (settings.tabLocation === 'top') {
obj.animate({
top: '-' + properties.containerHeight
}, settings.speed, settings.onSlideIn).removeClass('open');
} else if (settings.tabLocation === 'left') {
obj.animate({
left: '-' + properties.containerWidth
}, settings.speed, settings.onSlideIn).removeClass('open');
} else if (settings.tabLocation === 'right') {
obj.animate({
right: '-' + properties.containerWidth
}, settings.speed, settings.onSlideIn).removeClass('open');
} else if (settings.tabLocation === 'bottom') {
obj.animate({
bottom: '-' + properties.containerHeight
}, settings.speed, settings.onSlideIn).removeClass('open');
}
};
var slideOut = function() {
if (settings.tabLocation == 'top') {
obj.animate({
top: '-3px'
}, settings.speed, settings.onSlideOut).addClass('open');
} else if (settings.tabLocation == 'left') {
obj.animate({
left: '-3px'
}, settings.speed, settings.onSlideOut).addClass('open');
} else if (settings.tabLocation == 'right') {
obj.animate({
right: '-3px'
}, settings.speed, settings.onSlideOut).addClass('open');
} else if (settings.tabLocation == 'bottom') {
obj.animate({
bottom: '-3px'
}, settings.speed, settings.onSlideOut).addClass('open');
}
settings.onSlideOut
};
var clickScreenToClose = function() {
obj.click(function(event) {
event.stopPropagation();
});
$(document).click(function() {
slideIn();
});
};
var clickAction = function() {
settings.tabHandle.click(function(event) {
if (obj.hasClass('open')) {
slideIn();
} else {
slideOut();
}
});
clickScreenToClose();
};
var hoverAction = function() {
obj.hover(
function() {
slideOut();
},
function() {
slideIn();
});
settings.tabHandle.click(function(event) {
if (obj.hasClass('open')) {
slideIn();
}
});
clickScreenToClose();
};
var slideOutOnLoad = function() {
slideIn();
setTimeout(slideOut, 500);
};
//choose which type of action to bind
if (settings.action === 'click') {
clickAction();
}
if (settings.action === 'hover') {
hoverAction();
}
if (settings.onLoadSlideOut) {
slideOutOnLoad();
};
};
})(jQuery);
$(function() {
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will become your tab
pathToTabImage: 'http://wpaoli.building58.com/wp-content/uploads/2009/09/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
imageHeight: '122px', //height of tab image //Optionally can be set using css
imageWidth: '40px', //width of tab image //Optionally can be set using css
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '50px', //position from the top/ use if tabLocation is left or right
leftPos: '20px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
$('.slide-out-div > .handle').click();
});
.slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: 1px solid #29216d;
}
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<div class="slide-out-div"> <a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h3>Contact me</h3>
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>

Fluid Width Slider

I am making a website here: argit.bounde.co.uk
I have followed a tutorial on making a slider and it works on the principle of having a ul of a big width and then the li's floated. This is then all concealed by a div which has overflow: hidden. Then have jquery which animates the margin-left = imgWidth
The rest of my site is fluid width and so obviously I need the slider to follow along other wise it looks a bit silly. At the moment I have given the li's a set width with jquery and then have img's as 100%. This solution is okay, but falls apart when the device doesn't support jQuery so I would prefer a more robust method. I cant set the ul to 100% as then the images no longer are in a line and they simple stack underneath each other
Can anyone think of a way I could achieve this?
Full slider jQuery here:
var current = 1;
function slider () {
var sliderUl = $('div#slider ul'),
imgs = sliderUl.find('img'),
imgWidth = imgs.width(),
imgLength = imgs.length,
totalImgsWidth = imgLength * imgWidth;
var direction = $(this).data('dir'),
loc = imgWidth;
if( direction == 'next') {
++current;
} else {
--current;
}
if( current === 0) {
current = imgLength;
loc = totalImgsWidth - imgWidth;
direction = 'next';
} else if ( current - 1 === imgLength ) {
current = 1;
loc = 0;
}
transition(sliderUl, loc, direction);
};
function transition( container, loc, direction ) {
var ease;
var unit;
if (direction && loc !== 0) {
unit = (direction === 'next') ? '-=' : '+=';
}
container.animate({
'margin-left': unit ? (unit + loc) : loc
})
};

I've linked to a fiddle of a plugin I programmed that does this. The requirements are that the parent container has position: relative, and to a lesser extent overflow: hidden and that it is called after images are loaded. Feel free to take the code and learn from it.
http://jsfiddle.net/dhQk/35K8X/7/show/
JS
$.fn.fitToParent = function (type, align) {
type = typeof type === 'undefined' ? 'fit' : type;
align = typeof align === 'undefined' ? 'center' : align;
return this.each(function () {
var $this = $(this);
var $parent = $(this).parent();
if ($this.is('img')) {
$this.css({
'position': 'absolute',
'width': '100%',
'height': 'auto'
}).css({ //Allow Height to adjust
'left': '',
'margin-left': '',
'top': align == 'center' ? '50%' : (align == 'left' ? '0px' : ''),
'bottom': '',
'margin-top': align == 'center' ? (-$this.height() / 2) + 'px' : ''
});
//Size by height depending on sizing type
if (($this.height() > $parent.height() && type === 'fit') || ($this.height() < $parent.height() && type === 'fill')) {
$this.css({
'width': 'auto',
'height': '100%'
}).css({ //Allow Width to adjust
'top': '',
'margin-top': '',
'left': align == 'center' ? '50%' : (align == 'left' ? '0px' : ''),
'right': align == 'right' ? '0px' : '',
'margin-left': align == 'center' ? (-$this.width() / 2) + 'px' : ''
});
}
if (type === 'none') {
$this.css({
'width': '',
'height': ''
}).css({ //Allow Width to adjust
'top': '50%',
'bottom': '',
'margin-top': (-$this.height() / 2) + 'px',
'left': align == 'center' ? '50%' : (align == 'left' ? '0px' : ''),
'right': align == 'right' ? '0px' : '',
'margin-left': align == 'center' ? (-$this.width() / 2) + 'px' : ''
});
}
}
});
};
To explain the logic, all it does is sets the width to 100% and checks if it's height is greater, if it isn't then width 100% is fine. If not it switches it to height 100%. On images if one size attribute is set then the other one resizes accordingly. After the size logic is complete. it just centers the image using position absolute and margining.

You can detect does device support jQuery:
$('html').addClass('jQuery');
And then use specific css styles for this class:
.jQuery li {
/* some style */
}
If class 'jQuery' setted then device support jQuery.

The simplest method would be to not float the your panels (li's) and set them to be 100% width of the wrapping div. Then when the user navigates, position the next panel out of view to the right at 100% margin, then animate it to 0 margin while you animate the previous panel to -100% margin. Do the opposite when the user selects the previous panel. I don't think this method works well in older IE, but I could be mistaken.
Alternatively, you can bind to the window resize event (it would be best to throttle the event) and resize the panels and any saved widths/heights

making a div stick to the top of the screen but if scrolled back up, return to it's original position?

This will make a div that is position: absolute ( top: 46px ) on a page become fixed to the top of the page ( top: 0px ) when scrolled to a certain point ( the distance from the div to the top of the page )
$(window).scroll(function (e) {
$el = $('#sticky');
if ($(this).scrollTop() > 46 && $el.css('position') != 'fixed') {
$('#sticky').css({
'position': 'fixed',
'top': '0px'
});
}
});
BUT it doesn't reset the position of the div when you're back at the top of the page, and I want it to. Any suggestions? Also I want to make sure this is the best way to do this — if there's a css only, non-javascript solution I'm all ears.

I would recommend either keeping the sticky content fixed or absolute, but not switching between the two.
Fixed: http://jsfiddle.net/CpM8H/2/
$(window).scroll(function (e) {
$scrollTopDiff = 46 - $(this).scrollTop();
$('#sticky').css({
'top': ( $scrollTopDiff > 0 ? $scrollTopDiff : 0 ) + 'px'
});
});
Absolute: http://jsfiddle.net/CpM8H/3/
$(window).scroll(function (e) {
$scrollTop = $(this).scrollTop();
$('#sticky').css({
'top': ( $scrollTop > 46 ? $scrollTop : 46 ) + 'px'
});
});
If you really need to switch between fixed and absolute, here is my first though on how to do that, but the sticky content may jump around a bit:
$(window).scroll(function (e) {
$el = $('#sticky');
if ($(this).scrollTop() > 46 ) {
$el.css({
'position': 'fixed',
'top': '0px'
});
} else {
$el.css({
'position': 'absolute',
'top': '46px'
});
}
});