Pause on hover News Slider/Ticker - javascript

I know nothing of jquery/js but i applied a News Slider/Ticker script that I found online to my website home page. The script itself works fine. The html and css parts were easy enough but I can't find the proper way to make it PAUSE ON HOVER. The .js file that came with it is lengthy and has much that I suspect isn't even being used, but as I said, I don't know js. Sorry for the long js file but I don't know what parts are even involved. Can somebody help this complete novice?
(function ($) {
$.simpleTicker = function (elem, options) {
var defaults = {
speed: 1000,
delay: 4000,
easing: 'swing',
effectType: 'slide'
};
var param = {
'ul': '',
'li': '',
'initList': '',
'ulWidth': '',
'liHeight': '',
'tickerHook': 'tickerHook',
'effect': {}
};
var plugin = this;
plugin.settings = {};
var $element = $(elem),
element = elem;
plugin.init = function () {
plugin.settings = $.extend({}, defaults, options);
param.ul = element.children('ul');
param.li = element.find('li');
param.initList = element.find('li:first');
param.ulWidth = param.ul.width();
param.liHeight = param.li.height();
element.css({
height: (param.liHeight)
});
param.li.css({
top: '0',
left: '0',
position: 'absolute'
});
//dispatch
switch (plugin.settings.effectType) {
case 'fade':
plugin.effect.fade();
break;
case 'roll':
plugin.effect.roll();
break;
case 'slide':
plugin.effect.slide();
break;
}
plugin.effect.exec();
};
plugin.effect = {};
plugin.effect.exec = function () {
param.initList.css(param.effect.init.css)
.animate(param.effect.init.animate, plugin.settings.speed, plugin.settings.easing)
.addClass(param.tickerHook);
if (element.find(param.li).length > 1) {
setInterval(function () {
element.find('.' + param.tickerHook)
.animate(param.effect.start.animate, plugin.settings.speed, plugin.settings.easing)
.next()
.css(param.effect.next.css)
.animate(param.effect.next.animate, plugin.settings.speed, plugin.settings.easing)
.addClass(param.tickerHook)
.end()
.appendTo(param.ul)
.css(param.effect.end.css)
.removeClass(param.tickerHook);
}, plugin.settings.delay);
}
};
plugin.effect.fade = function () {
param.effect = {
'init': {
'css': {
display: 'block',
opacity: '0'
},
'animate': {
opacity: '1',
zIndex: '98'
}
},
'start': {
'animate': {
opacity: '0'
}
},
'next': {
'css': {
display: 'block',
opacity: '0',
zIndex: '99'
},
'animate': {
opacity: '1'
}
},
'end': {
'css': {
display: 'none',
zIndex: '98'
}
}
};
};
plugin.effect.roll = function () {
param.effect = {
'init': {
'css': {
top: '3em',
display: 'block',
opacity: '0'
},
'animate': {
top: '0',
opacity: '1',
zIndex: '98'
}
},
'start': {
'animate': {
top: '-3em',
opacity: '0'
}
},
'next': {
'css': {
top: '3em',
display: 'block',
opacity: '0',
zIndex: '99'
},
'animate': {
top: '0',
opacity: '1'
}
},
'end': {
'css': {
zIndex: '98'
}
}
};
};
plugin.effect.slide = function () {
param.effect = {
'init': {
'css': {
left: (200),
display: 'block',
opacity: '0'
},
'animate': {
left: '0',
opacity: '1',
zIndex: '98'
}
},
'start': {
'animate': {
left: (-(200)),
opacity: '0'
}
},
'next': {
'css': {
left: (param.ulWidth),
display: 'block',
opacity: '0',
zIndex: '99'
},
'animate': {
left: '0',
opacity: '1'
}
},
'end': {
'css': {
zIndex: '98'
}
}
};
};
plugin.init();
};
$.fn.simpleTicker = function (options) {
return this.each(function () {
if (undefined == $(this).data('simpleTicker')) {
var plugin = new $.simpleTiecker(this, options);
$(this).data('simpleTicker', plugin);
}
});
};
})(jQuery);

In my opinion, that library is old and very very complicated to work with. I would personally recommend you move to something along the lines of Slick Slider.
Slick: https://kenwheeler.github.io/slick/
You can use the CDN version <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
I was able to recreate your use case in about 5min (with hover pause) with Click. Because it's an actual slider, it's better to wrap things in <div> containers, so I've done so in the fiddle I've shown you. You can tweak the CSS opacity animations to taste, but it's basically what you're doing now.
The Fiddle: Slick Slider

Related

ExtJS Classic: When animating x/y/width/height of a window, the title is not ending at the final position specified

Using ExtJS Classic 7.3.0
Trying to animate the window while it is showing, but the title of the window is not ending up at the specifications in 'TO' config. Fiddle is here: Sencha Fiddle
If you try to drag the window by clicking on the "blue title", you will see the entire title how it should be, but thats it.
Anyone know if I need to specify something else here?
I tinkered with it a bit and found that it worked if you set the width property on the window:
width: Ext.getBody().getViewSize().width / 2,
Full code:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Window', {
id: 'win',
title: "Window",
width: Ext.getBody().getViewSize().width / 2,
html: "<h1>Hello</h1> ",
listeners: {
show: function (win) {
var el = win.getEl();
var size = Ext.getBody().getViewSize();
el.animate({
from: {
opacity: 0,
width: 0,
height: 0,
x: size.width/2,
y: size.height/2
},
to: {
opacity: 100,
width: size.width/2,
height: size.height/2,
x: size.width/4,
y: size.height/4
},
});
},
beforeclose: function (win) {
if (!win.shouldClose) {
win.getEl().fadeOut({
duration: 2000,
callback: function () {
win.shouldClose = true;
win.close();
}
});
}
return win.shouldClose ? true : false;
}
}
}).show();
}
});
width: '50%'
also seems to work.

Fitting 4 triangles within a background image

I'm trying to fit 4 triangles in a master template using jquery, html5 and canvas,
I can't seem to make them fit...
Here is what I got so far...
https://jsfiddle.net/ax67r91y/
The code I think is wrong:
ctx.drawImage(part.img, // random image
0, 0, part.w, part.h, // source
part.x,part.y,part.trisize.w,part.trisize.h); // destination
All images should be cut down into 2 forms: a " v " and a " ^ ",
I can move images, but shrinking them to the correct size seems unattainable...
I think I'm close, but it's been hours I'm on this, help is welcome!!!
Expected result:
Is this what you are looking for?
function createSVG(name, attributes) {
var svg_node = document.createElementNS("http://www.w3.org/2000/svg", name);
Object.keys(attributes).forEach(function(key) {
if (key == 'textContent') {
svg_node.textContent = attributes[key];
return;
}
svg_node.setAttribute(key, attributes[key]);
});
return svg_node;
}
Element.prototype.appendSVG = function(name, attributes) {
this.appendChild(createSVG(name, attributes));
}
function Polygons() {
this.canvas = createSVG('svg', {
'version': '1.1',
'shape-rendering': 'geometricPrecision',
'viewBox': '0 0 1589 745',
'class': 'svg-content',
});
this.defs = createSVG('defs', {});
this.canvas.appendChild(this.defs);
this.registerPatterns();
this.drawInnerLayer();
this.drawOuterLayer();
}
Polygons.prototype.registerPatterns = function() {
var patternBottom = createSVG('pattern', {
'height': "100%",
'width': "100%",
'patternContentUnits': "objectBoundingBox",
'viewBox': "0 0 1 1",
'preserveAspectRatio': "xMidYMid slice",
});
var imgBottom = createSVG('image', {
'height': "1",
'width': "1",
'preserveAspectRatio': "xMidYMid slice",
});
var imgLeft = imgBottom.cloneNode(true)
imgLeft.setAttributeNS('http://www.w3.org/1999/xlink','href', "http://waw.wizard.build/wp-content/themes/twentyseventeen/TMP/1.png");
var imgMiddle = imgBottom.cloneNode(true);
imgMiddle.setAttributeNS('http://www.w3.org/1999/xlink','href', "http://waw.wizard.build/wp-content/themes/twentyseventeen/TMP/2.png");
var imgRight = imgBottom.cloneNode(true);
imgRight.setAttributeNS('http://www.w3.org/1999/xlink','href', "http://waw.wizard.build/wp-content/themes/twentyseventeen/TMP/3.png");
imgBottom.setAttributeNS('http://www.w3.org/1999/xlink','href', "http://waw.wizard.build/wp-content/themes/twentyseventeen/TMP/4.png");
var patternLeft = patternBottom.cloneNode(true);
patternLeft.setAttribute('id', "img-left");
patternLeft.appendChild(imgLeft);
var patternRight = patternBottom.cloneNode(true);
patternRight.setAttribute('id', "img-right");
patternRight.appendChild(imgRight);
var patternMiddle = patternBottom.cloneNode(true);
patternMiddle.setAttribute('id', "img-middle");
patternMiddle.appendChild(imgMiddle);
patternBottom.setAttribute('id', "img-bottom");
patternBottom.appendChild(imgBottom);
this.defs.appendChild(patternLeft);
this.defs.appendChild(patternRight);
this.defs.appendChild(patternMiddle);
this.defs.appendChild(patternBottom);
var patternOverlayer = createSVG('pattern', {
'height': "100%",
'width': "100%",
'patternContentUnits': "objectBoundingBox",
'id': "img-overlayer",
});
var imgOverlayer = createSVG('image', {
'height': "1",
'width': "1",
'preserveAspectRatio': "none",
});
imgOverlayer.setAttributeNS('http://www.w3.org/1999/xlink','href', "http://waw.wizard.build/wp-content/themes/twentyseventeen/assets/images/frame-all.png");
patternOverlayer.appendChild(imgOverlayer);
this.defs.appendChild(patternOverlayer);
}
Polygons.prototype.drawOuterLayer = function() {
this.canvas.appendSVG('rect', {
'x': '0',
'y': '0',
'width': '100%',
'height': '100%',
'fill': 'url(#img-overlayer)',
'class': 'img-overlayer',
});
}
Polygons.prototype.drawInnerLayer = function() {
this.canvas.appendSVG('polygon', {
'points': '500,55 800,50 643,370',
'class': 'inner-polygon polygon-left',
'fill': 'url(#img-left)',
});
this.canvas.appendSVG('polygon', {
'points': '800,70 665,395 935,395',
'class': 'inner-polygon polygon-middle',
'fill': 'url(#img-middle)',
});
this.canvas.appendSVG('polygon', {
'points': '820,50 1115,45 950,375',
'class': 'inner-polygon polygon-right',
'fill': 'url(#img-right)',
});
this.canvas.appendSVG('polygon', {
'points': '660,415 940,415 805,720',
'class': 'inner-polygon polygon-down',
'fill': 'url(#img-bottom)',
});
}
var polygons = new Polygons();
document.getElementById('svg-container').appendChild(polygons.canvas);
#svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
}
.svg-content {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
<div id="svg-container"></div>

Remove / add class when based on toggle

I have a column that slides to the left on a click function. I then add the class of w to the container to change its width once the column slides out. What I am trying to do is add the class of e when it slides back in and then remove the class of w by wrapping it in the toggle functions, but the container still contains the class of w and won't add the class of e. Thoughts?
FIDDLE:
http://jsfiddle.net/QDUQk/1926/
.container {
border: 1px solid #000;
width: 200px;
}
.container.e {
width: 80%;
}
.container.w {
width: 100%;
}
<div class="togl">Menu</div>
<div class="col">
SLIDE ME SLIDE ME PLX PLX
</div>
<div class="container">
</div>
$('.togl').click(function() {
if ($('.container').is(':visible')) {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$('.container').addClass('w');
$('.container').removeClass('e');
});
} else {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$(".container").removeClass('w');
$(".container").addClass('e')
});
}
});
The visibility of .container does not change from true. Check for "w" className at .is()
$('.togl').click(function() {
if (!$('.container').is('.w')) {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$('.container').addClass('w');
$('.container').removeClass('e');
});
} else {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$(".container").removeClass('w');
$(".container").addClass('e')
});
}
});
jsfiddle http://jsfiddle.net/QDUQk/1927/
Your container visibility does not change on click. Try following,
$('.togl').click(function() {
if ($('.container').hasClass('e')) {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$('.container').addClass('w');
$('.container').removeClass('e');
});
} else {
$('.col').toggle('slide', {
direction: 'left'
}, 1000, function() {
$(".container").removeClass('w');
$(".container").addClass('e')
});
}});

Web animation reverts back after ends

I have a question regarding the browser compatability of Web Animations. I am aware that it is not working on some browsers.
However, is it possible to still use the transformation that is normally applied by the animation. My animation runs (through neon-animation from Polymer), but the result doesn't stay. It reverts back when the animation is finished.
(Small note, the $$("paper-item") is from polymer and is equivalent to querySelector("paper-item"))
I fixed this on Chrome with the following code:
_onNeonAnimationFinish: function() {
if (this.opened) {
this.$$("paper-item").style.margin = '16px auto';
this.$$("paper-item").style.width = '84vw';
this.$$("paper-item").style.height = '144px';
} else {
this.$$("paper-item").style.margin = "0px auto";
this.$$("paper-item").style.width = '72vw';
this.$$("paper-item").style.height = '72px';
}
}
As said, this is working on Chrome. Firefox and Safari are having trouble with it though. How can this be fixed?
My complete code is as following:
<!-- Custom element -->
<dom-module id="agenda-item">
<template>
<style>
paper-item {
background-color: #ffffff;
width: 72vw;
margin: 0 auto;
height: 72px;
}
</style>
<paper-item>
- content -
</paper-item>
</template>
<script>
Polymer({
is: 'agenda-item',
behaviors: [
Polymer.NeonAnimationRunnerBehavior
],
properties: {
opened: {
type: Boolean,
value: false,
reflectToAttribute: true
},
animationConfig: {
value: function() {
return {
'expand': [{
name: 'expand-list-item-animation',
node: this.$$("paper-item"),
timing: {
duration: 1000
}
}],
'collapse': [{
name: 'collapse-list-item-animation',
node: this.$$("paper-item"),
timing: {
duration: 1000
}
}]
};
}
}
},
listeners: {
'tap': 'onClick',
'neon-animation-finish': '_onNeonAnimationFinish'
},
onClick: function(event) {
if (this.opened) {
this.collapse();
} else {
this.expand();
}
},
expand: function() {
this.cancelAnimation();
this.playAnimation('expand');
this.opened = true;
},
collapse: function() {
this.cancelAnimation();
this.opened = false;
this.playAnimation('collapse');
},
_onNeonAnimationFinish: function() {
if (this.opened) {
this.$$("paper-item").style.margin = '16px auto';
this.$$("paper-item").style.width = '84vw';
this.$$("paper-item").style.height = '144px';
} else {
this.$$("paper-item").style.margin = '0px auto';
this.$$("paper-item").style.width = '72vw';
this.$$("paper-item").style.height = '72px';
}
}
});
</script>
</dom-module>
<!-- Custom animation -->
<!-- Both custom animations have the same idea and similar code -->
<script>
Polymer({
is: 'expand-list-item-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
}
this._effect = new KeyframeEffect(node, [{
offset: 0.0,
'margin': '0 auto',
'width': '72vw',
'height': '72px'
}, {
offset: 0.6,
'margin': '16px auto',
'width': '84vw',
'height': '72px'
}, {
offset: 1.0,
'margin': '16px auto',
'width': '84vw',
'height': '144px'
}], this.timingFromConfig(config));
return this._effect;
}
});
</script>
EDIT:
I found the problem, but not how to solve it. It would be great to get some help.
The neon-animation-finish is not called at the moment the animation finishes. It is called just before that (not on chrome btw). Then, when the function is called to adjust the styling, it is overwritten by the animation.
You need to define a listener to the animation-finish and define what you want to see when the animation has finished like this:
listeners: {
// this event is fired when the animation finishes
'neon-animation-finish': '_onNeonAnimationFinish'
},
Have a look at the Polymer documentation at: https://github.com/PolymerElements/neon-animation/blob/master/README.md

Affecting only one element with jQuery toggle

So I have got this code
$('.item').click(function () {
if ($(".secondary", this).is(":hidden")) {
$(".primary", this).toggle('slide', {
direction: 'right'
}, 500, function () {
$('.secondary', this).toggle('slide', {
direction: 'left'
}, 500);
});
}
});
Current behavior is that when I click .item, .primary slides to the right, but .secondary doesn't slide in at all.
Fiddle: http://jsfiddle.net/zm3zp6ax/
$('.item').click(function () {
var $this = $(this);
if ($(".secondary", this).is(":hidden")) {
$(".primary", $this).toggle('slide', {
direction: 'right'
}, 500, function () {
$('.secondary', $this).toggle('slide', {
direction: 'left'
}, 500);
});
}
});
DEMO

Categories