Develop Reference

Append an Element to another Element Jquery

I am trying to append the imgclone to the another div called fa-shopping-bag however the append doesn't work and what happens is it overlaps the screens
$('.add').on('click', function () {
$('html,body').animate({scrollTop: 0}, 1000);
var cart = $('.fa-shopping-bag');
var imgtodrag = $('#product-images > div > ul.slides > li.flex-active-slide > img:nth-child(1)');
if (imgtodrag) {
var imgclone = imgtodrag.clone()
.offset({
top: imgtodrag.offset().top + 250,
left: imgtodrag.offset().left
})
.css({
'opacity': '0.5',
'position': 'absolute',
'height': '150px',
'width': '150px',
'z-index': '100'
})
.appendTo($('.fa-shopping-bag'))
.animate({
'top': 0,
'right': 0,
'width': 50,
'height': 50
}, 3000, 'easeInOutExpo');
imgclone.animate({
'width': 0,
'height': 0
}, function () {
$(this).detach()
});
}
});

How to set position with css method in jquery?

My default values for .csw-step4-price-summary div is
.csw-step4-price-summary {
width: 270px;
position: absolute;
display: inline-block;
bottom: 661px;
right: 40px;
}
When I want to do the following, it does change position to fixed, but it does not react to bottom and right values.
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 220) {
$(".csw-step4-price-summary").css({
'position': 'fixed',
'bottom': '661',
'right': '140'
});
} else {
$(".csw-step4-price-summary").css({ 'position': 'absolute'});
}
});
Any suggestions why this might be happening? Thanks in advance.

Try using 'px' in the unit in the css function
$(".csw-step4-price-summary").css({
'position': 'fixed',
'bottom': '661px',
'right': '140px'
});

it's
'bottom': '661px',
'right': '140px'

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()

Adding More Javascript = Stops From Working

jQuery(function($) {
function fixDiv() {
var $cache = $('header');
if ($(window).scrollTop() > 10)
$cache.css({'position': 'fixed', 'top': '0', 'background': 'rgba(0,0,0,0.8)', 'padding': '0'});
//$('#top-menu a').css({'padding': '17px 20px'});
else
$cache.css({'position': 'absolute', 'top': '0', 'background': 'rgba(0,0,0,0)', 'padding': '20px 0'});
//$('#top-menu a').css({'padding': '30px 20px'});
}
$(window).scroll(fixDiv);
fixDiv();
});
This is currently what I have, and i see var $cache = header so I wanted to add another line so when it changes the background it also changes the font size of the header.. so I now have
jQuery(function($) {
function fixDiv() {
var $cache = $('header');
if ($(window).scrollTop() > 10)
$cache.css({'position': 'fixed', 'top': '0', 'background': 'rgba(0,0,0,0.8)', 'padding': '0'});
$('h1').css({'font-size': '26px'});
else
$cache.css({'position': 'absolute', 'top': '0', 'background': 'rgba(0,0,0,0)', 'padding': '20px 0'});
$('h1').css({'font-size': '36px'});
}
$(window).scroll(fixDiv);
fixDiv();
});
What did I do wrong?

Multiple statements require braces:
if ($(window).scrollTop() > 10)
{
$cache.css({'position': 'fixed', 'top': '0', 'background': 'rgba(0,0,0,0.8)', 'padding': '0'});
$('h1').css({'font-size': '26px'});
}
else
{
$cache.css({'position': 'absolute', 'top': '0', 'background': 'rgba(0,0,0,0)', 'padding': '20px 0'});
$('h1').css({'font-size': '36px'});
}
Indenting your code properly makes it more obvious why it wasn't working:
if ($(window).scrollTop() > 10)
$cache.css({'position': 'fixed', 'top': '0', 'background': 'rgba(0,0,0,0.8)', 'padding': '0'});
$('h1').css({'font-size': '26px'});
else
$cache.css({'position': 'absolute', 'top': '0', 'background': 'rgba(0,0,0,0)', 'padding': '20px 0'});
$('h1').css({'font-size': '36px'});
(not only wrong but invalid - the else is orphaned).

Script only to run if window is bigger than div

I have the following script that is working great, but I want to wrap it in an if statement that only runs this script when the window height is larger than the #tip element. What do I add?
$(document).scroll(function () {
if($(window).scrollTop() >= 40){
$('#tip').css({'position' : 'fixed', 'top' : '20px', 'left' : '50%', 'margin-left' : '250px' });
}
if($(window).scrollTop() <= 40){
$('#tip').css({'position' : 'absolute', 'top' : '15px', 'left' : '', 'margin-left' : ''});
}
console.log($(window).scrollTop());
});

simply
$(document).scroll(function () {
if ($(window).height() > $('#tip').height()) {
... your code here
}
});