div#ID not being appended to document by jQuery - javascript

I inherited a client website, and I am not a developer or jQuery developer.
On the client website, at bottom right is supposed to be a div#scrollUp which contains an image of an up arrow and scrolls the browser up to the top of the page when clicked.
The following script is designed to handle the scrolling up behaviour:
! function(a, b, c) {
a.fn.scrollUp = function(b) {
a.data(c.body, "scrollUp") || (a.data(c.body, "scrollUp", !0), a.fn.scrollUp.init(b))
}, a.fn.scrollUp.init = function(d) {
var e = a.fn.scrollUp.settings = a.extend({}, a.fn.scrollUp.defaults, d),
f = e.scrollTitle ? e.scrollTitle : e.scrollText,
g = a("<a/>", {
id: e.scrollName,
href: "#top",
title: f
}).appendTo("body");
e.scrollImg || g.html(e.scrollText), g.css({
display: "none",
position: "fixed",
zIndex: e.zIndex
}), e.activeOverlay && a("<div/>", {
id: e.scrollName + "-active"
}).css({
position: "absolute",
top: e.scrollDistance + "px",
width: "100%",
borderTop: "1px dotted" + e.activeOverlay,
zIndex: e.zIndex
}).appendTo("body"), scrollEvent = a(b).scroll(function() {
switch (scrollDis = "top" === e.scrollFrom ? e.scrollDistance : a(c).height() - a(b).height() - e.scrollDistance, e.animation) {
case "fade":
a(a(b).scrollTop() > scrollDis ? g.fadeIn(e.animationInSpeed) : g.fadeOut(e.animationOutSpeed));
break;
case "slide":
a(a(b).scrollTop() > scrollDis ? g.slideDown(e.animationInSpeed) : g.slideUp(e.animationOutSpeed));
break;
default:
a(a(b).scrollTop() > scrollDis ? g.show(0) : g.hide(0))
}
}), g.click(function(b) {
b.preventDefault(), a("html, body").animate({
scrollTop: 0
}, e.scrollSpeed, e.easingType)
})
}, a.fn.scrollUp.defaults = {
scrollName: "scrollUp",
scrollDistance: 300,
scrollFrom: "top",
scrollSpeed: 300,
easingType: "linear",
animation: "fade",
animationInSpeed: 200,
animationOutSpeed: 200,
scrollText: "Scroll to top",
scrollTitle: !1,
scrollImg: !1,
activeOverlay: !1,
zIndex: 200
}, a.fn.scrollUp.destroy = function(d) {
a.removeData(c.body, "scrollUp"), a("#" + a.fn.scrollUp.settings.scrollName).remove(), a("#" + a.fn.scrollUp.settings.scrollName + "-active").remove(), a.fn.jquery.split(".")[1] >= 7 ? a(b).off("scroll", d) : a(b).unbind("scroll", d)
}, a.scrollUp = a.fn.scrollUp
}(jQuery, window, document);
The script above has comments:
scrollup v2.1.1
Author: Mark Goodyear - http://markgoodyear.com
Git: https://github.com/markgoodyear/scrollup
Copyright 2013 Mark Goodyear.
Licensed under the MIT license
In the header is jQuery.scrollUp();, but the problem is that there is no div#scrollUp produced, meaning the up arrow is not present on the page.
I can't see anywhere in the theme file a mention of #scrollUp, so I assume the Javascript block above, plus the header running jQuery.scrollUp(); is supposed to insert the div#scrollUp - is that correct?
Help appreciated.

Try to put the
$(function () {
$.scrollUp({
zIndex: 2147483647
});
});
on the <script> tag of your page, and let see whats happen.
Instead showing 3rd party plugin javasript code, you better show the code inside your page.

Related

Toggle between two numbers via a variable

Dragable width which upon being dragged sets a var;
var globaltest = 400;
It can also show/hide with animate so set the width;
var QSW-SW = $(".Quick-Sidebar-Wrapper").width() == globaltest ? "0" : globaltest;
alert(QSW-SW);
The rest...
$('.Quick-Sidebar-Wrapper').animate({
width: QSW-SW + "px"
}, {
duration: 1000,
direction: 'left',
easing: 'easeOutBounce'
});
This part breaks my script;
var QSW-SW = $(".Quick-Sidebar-Wrapper").width() == globaltest ? "0" : globaltest;
alert(QSW-SW);
And no alert comes up of which I placed there as a test.
QSW-SW is not a valid variable name. Javascript thinks you are trying to subtract. Try using an underscore instead.

Make words pulsate jQuery

http://codepen.io/anon/pen/ZGBEyo
I have a difficult task as you saw in the title of the question.
I'm doing a plugin that makes the words move in the screen, increase in size with a sharpen effect, and decrease in size with a blur effect, and the most difficult — one respect other if they have the same name, you may ask: what do you mean?
They have this totally random behavior to grow and stay focus, get smaller and become blurred, however I need make two words with the same name never become clear at same time.
My plugin works like this:
<span class="word" data-float="true" data-range-x="100" data-range-y="100" data-top="500" data-left="50" data-size="25">Love</span>
If data-float is true, the word is authorised to use the plugin
data-range-x = the maximum x range that can move
data-range-y = the maximum y range that can move
data-top = the top initial position
data-left = the left initial position
data-size = the size of the word
So, is possible to make them respect each other, if they have the same name?
Working plugin it three love words:
+ function($) {
var Float = function(element) {
this.element = element;
this.wrapper;
this.settings = {
rangeX : element.data('range-x') || 100,
rangeY : element.data('range-y') || 100,
speed : element.data('speed') || 5000,
top : element.data('top') || 0,
left : element.data('left') || 0,
size : element.data('size') || 20
};
};
Float.prototype.init = function() {
this.setPosition();
this.setSize();
this.setWrapper();
this.andWalk();
};
Float.prototype.setPosition = function() {
this.element
.css('top', this.settings.top)
.css('left', this.settings.left);
};
Float.prototype.setSize = function() {
this.element.css('font-size', this.settings.size + 'px');
if (this.settings.size <= 20) this.setShadow();
};
Float.prototype.setShadow = function() {
console.log('test');
this.element.css('color', 'transparent');
};
Float.prototype.setWrapper = function() {
this.wrapper = $('<div/>').css({
'width': this.element.outerWidth(true),
'height': this.element.outerHeight(true),
'z-index': this.element.css('zIndex')
});
this.wrapper.css({
'position': this.element.css('position'),
'top': this.element.position().top,
'left': this.element.position().left,
'float': this.element.css('position') === 'absolute' ? 'none' : 'left'
});
this.element.wrap(this.wrapper).css({
'position': 'absolute',
'top': 0,
'left': 0
});
};
Float.prototype.andWalk = function() {
var self = this;
var newX = Math.floor(Math.random() * this.settings.rangeX) - this.settings.rangeX / 2;
var newY = Math.floor(Math.random() * this.settings.rangeY) - this.settings.rangeY / 2 - 0;
var newS = Math.floor(Math.random() * this.settings.speed) + this.settings.speed / 2;
var newF;
if (this.settings.size > 40) { newF = Math.floor(Math.random() * (70 - 15 + 1) + 15); }
else if (this.settings.size <= 25) { newF = Math.floor(Math.random() * (25 - 15 + 1) + 15); }
else { newF = Math.floor(Math.random() * (40 - 15 + 1) + 15); }
this.element.animate({
'fontSize': newF,
'color': newF >= 25 ? '#FFFFFF' : 'transparent',
'top': newY,
'left': newX
}, newS, function() {
self.andWalk();
});
};
$(window).on('load', function() {
$('[data-float]').each(function() {
var element = $(this).data('float') || false;
if (element) {
var float = new Float($(this));
float.init();
}
});
});
}(jQuery);
body {
background: black;
color: white;
}
.word {
position: absolute;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.9);
}
<span class="word" data-float="true" data-index="1" data-range-x="100" data-range-y="100" data-top="500" data-left="50" data-size="25">Love</span>
<span class="word" data-float="true" data-index="2" data-range-x="100" data-range-y="100" data-top="90" data-left="290" data-size="40">Love</span>
<span class="word" data-float="true" data-index="3" data-range-x="100" data-range-y="100" data-top="500" data-left="290" data-size="70">Love</span>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
You may want to leverage the animate.css library as it uses CSS3 transitions to animate elements with pulse, flip, zoom, rotate, roll, fade and other effects. Then you could use jquery or pure javascript to call these effects.
Here is a jsfiddle I made to demonstrate how you can call the effects from this library with jQuery http://jsfiddle.net/ashk3l/qxfj8L2d/
Essentially your HTML could look something like this:
<h1 class="your-element">Hello!</h1>
And your jQuery call could look something like this:
$(document).ready(function () {
$('.your-element').addClass('animated pulse');
});

height set to "auto" not working with JS animate

I've tried to set the height to "auto" in the code below in order for the DIV to adapt its size based on the content. Unfortunately that doesn't work. (no issue if I set the height in px). Any idea why and how to fix this? Many thanks
Fiddle HERE.
JS
$("a").click(function () {
var page = $(this).data("page");
if ($('div:animated').id != page) {
var active = $(".fold.active");
// if there is visible fold element on page (user already clicked at least once on link)
if (active.length) {
active.animate({
width: "0"
}, 200)
.animate({
height: "0"
}, 200, function () {
// this happens after above animations are complete
$(this).removeClass("active");
})
// clicking for the first time
}
if (active.attr("id") != page) {
$("#" + page)
.addClass("active")
.animate({
height: "auto"
}, 1000, 'linear')
.animate({
width: "200px"
}, 400, 'linear')
}
}
});
you need to calculate the height for the jQuery animate() to take place
demo - http://jsfiddle.net/7hcsv5dn/
var el = $("#" + page)
autoHeight = el.height(),
$("#" + page)
.addClass("active")
.animate({
height: autoHeight
}, 1000, function () {
el.height('auto');
})
.animate({
width: "200px"
}, 400, 'linear')

Dialog notification like in the facebook

I am trying to do a notification like the facebook:
when a friend posted something on your timeline,
a dialog is displayed in the left bottom of the page. it fades in, stay 4 seconds and then fades out.
if there are more then one dialog, the second will displayed above the previous one, the third above the second, etc..
In addition, I didn't succeed to do a dialog that seems like the dialog of facebook.
this is my jsfiddle: http://jsfiddle.net/alonshmiel/C7yNs/
html:
<div class="dialog"></div>
javascript:
function dialog(mytext) {
$(".dialog").text(mytext);
jQuery(".dialog").dialog({
autoOpen: true,
modal: false,
position: ['left', 'bottom'],
show: "fade",
hide: "fade",
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery('.dialog').dialog('close');
})
}
});
$("#message").fadeTo('slow', 50, function() {
$("#message").dialog('close');
});
}
$(document).ready(function() {
dialog('window1');
setTimeout(function(){dialog('window2')},3000);
});
and this is an example for a notification. it is displayed in the left bottom of the page:
any help appreciated!
Finaly i am ready :)
http://jsfiddle.net/dimitardanailov/hb7gf/3/
You need :
Create variable and asign dialog every time
In close function you must to delete this dialog. Because .dialog('close') only hide this dialog
Calculate and set top position
jQuery
var bottom = 545, top = 0, height = 150;
function dialog(mytext) {
var myDialog = $('<div/>');
myDialog.addClass('js-notice');
myDialog.text(mytext);
top = $('.js-notice').length * height;
myDialog.dialog({
autoOpen: false,
modal: false,
show: "fade",
hide: "fade",
open: function(){
var tempTop = bottom - top;
if (tempTop < 0) {
tempTop = 0;
}
$(this).parent().css({'top' : tempTop + 'px', 'border' : '1px solid red'});
setTimeout(function()
{
myDialog.dialog('close');
}, 4000);
},
close : function() {
top -= height;
if (top < 0) {
top = 0;
}
$(this).remove();
$('.js-notice').each(function(i) {
var tempTop = bottom - (i * height);
console.log($('.js-notice').length, tempTop);
if (tempTop < 0) {
tempTop = 0;
}
$(this).parent().css({'top' : tempTop + 'px', 'border' : '1px solid green'});
});
}
});
myDialog.dialog("option", "position", {at: "left bottom"});
myDialog.dialog('open');
}
$(document).ready(function() {
dialog('window1');
setTimeout(function(){dialog('window2')},3000);
setTimeout(function(){dialog('window3')},6000);
});

How to make popover appear where my mouse enters the hover target?

This is an example code to show the popover window display below my button:
$.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
placement: 'bottom', content: ''
Now I want the popover window appear on the place where my cursor moves on(not only top/bottom/left/right, but a specific location which depends on where user put their cursor on).
How to get it?
In bootstrap-tooltip.js, replace (at about line 72)
, enter: function (e) {
with
, enter: function (e) {
var mousePos = { x: -1, y: -1 };
mousePos.x = e.pageX;
mousePos.y = e.pageY;
window.mousePos = mousePos;
and replace (at about line 144)
case 'right':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
break
with
case 'right':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
break
case 'mouse':
tp = {top: window.mousePos.y, left: window.mousePos.x}
break
Then call your popover like this:
$('.pop').popover({'placement': 'mouse'});
This is a quick-n-dirty way to go about it (hacking core files), but it works. Perhaps someone else has a nicer method. Note that the popover pointer will need some work as it doesn't appear.
This example was tested in Bootstrap 2.0.3, but the code appears similar in 2.2.2.
For bootstrap 3.x.x
Add attribute atMouse:false to the inline class Tooltip.DEFAULTS{}.
Tooltip.DEFAULTS = {
animation: true,
placement: 'top',
selector: false,
template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
trigger: 'hover focus',
title: '',
delay: 0,
html: false,
container: false,
atMouse: false,
viewport: {
selector: 'body',
padding: 0
}
}
Go to the line 1368 inside of method "Tooltip.prototype.enter" and change the following code:
if (obj instanceof $.Event) {
self.inState[obj.type == 'focusin' ? 'focus' : 'hover'] = true
}
to:
if (obj instanceof $.Event) {
self.inState[obj.type == 'focusin' ? 'focus' : 'hover'] = true
self.options.mousePos = {posX: obj['pageX'], posY: obj['pageY']}
}
Inside of the method "Tooltip.prototype.show" add following code:
if(this.options.atMouse) {
pos['posY'] = this.options.mousePos['posY'];
pos['posX'] = this.options.mousePos['posX'];
}
before this line of code:
var calculatedOffset = this.getCalculatedOffset(placement, pos,
actualWidth, actualHeight)
Prepend to the body of Tooltip.prototype.getCalculatedOffset method following code:
if(this.options.atMouse) {
return placement == 'bottom' ? {top: pos.top + pos.height, left: pos.posX - (actualWidth / 2)} :
placement == 'top' ? {top: pos.top - actualHeight, left: pos.posX - (actualWidth / 2)} :
placement == 'left' ? {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.posX - actualWidth} :
{top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.posX}
}
Call tooltip/popover something like this:
$("[data-toggle='popover']").popover({
html: true,
container: 'body',
atMouse: true,
trigger: 'hover',
animation: false,
placement: "top auto"
});
Work for me.

Categories