We Keep Coding

Pause on hover News Slider/Ticker

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

Disable check for key sorting in JS objects

I have an application created with create-react-app. By default it seems to check that object keys are sorted alphabetically. This is not too bad when I'm typing the code myself, but it's crazy when I copy'n'paste from other sources. Here's an example:
const styles = theme => ({
appBar: {
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
})
},
appBarShift: {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
content: {
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: theme.spacing.unit * 3
},
drawerPaper: {
position: 'relative',
whiteSpace: 'nowrap',
width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
drawerPaperClose: {
overflowX: 'hidden',
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
}),
width: theme.spacing.unit * 7,
[theme.breakpoints.up('sm')]: {
width: theme.spacing.unit * 9
}
},
hide: {
display: 'none'
},
menuButton: {
marginLeft: 12,
marginRight: 36
},
root: {
flexGrow: 1,
height: 430,
zIndex: 1,
overflow: 'hidden',
position: 'relative',
display: 'flex'
},
toolbar: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: '0 8px',
...theme.mixins.toolbar
}
});
I sorted the first level keys but it seems to check the nested ones too! Now I'm getting
C:/Source/portal/src/components/MenuAppBar.js
(19,5): The key 'transition' is not sorted alphabetically
I can't seem to find a way to enable the JS linting. There were hints about disabling tslint but I'm not using Typescript in this case.
I am using VS Code and have tried Sort JS object keys as well as Sort JSON objects. Unfortunately neither of them sort nested keys.

/* eslint sort-keys: 0 */
Add this on the top of the styles file

Jquery animating image, position, width and height

I have one situation with animating "img", when i put my var complete inside click function it wont animate but when i make it outside function it's working.Does it have something with global and local scope? thank you
var complete = true;
$("img").click(function() {
if (complete) {
$(this).animate({
left: "50%",
top: "400px",
width: "300px",
height: "300px"
}, 700);
} else {
$(this).animate({
left: "8px",
top: "10px",
width: "150px",
height: "150px"
}, 700);
}
complete = !complete;
});

If you put
var complete = true;
inside the callback for the click handler, it will be defined as true every time the function is invoked, which essentially redefines the function as
$("img").click(function() {
if (true) {
$(this).animate({
left: "50%",
top: "400px",
width: "300px",
height: "300px"
}, 700);
} else {
$(this).animate({
left: "8px",
top: "10px",
width: "150px",
height: "150px"
}, 700);
}
});
And by simplifying further:
$("img").click(function() {
$(this).animate({
left: "50%",
top: "400px",
width: "300px",
height: "300px"
}, 700);
});
By defining complete outside of the function, the variable's value persists beyond a single call of the function, allowing the global state to be toggled by each call.

Animating like balloon bursting using javascript / jquery

I would like make a image burst to pieces, this animation should continue infinetly. Pls advice on how to proceed with this? Is it possible to use the jquery animate function to achieve this.

Try this,
http://jsfiddle.net/Dripple/AGGrv/.
This makes a fine animation of bursting a balloon.
$("#bubble1").click(function() {
$("#bubble1").stop(true, false);
$(this).hide("explode", {
pieces: 50
}, 250);
});
function animate1() {
$("#bubble1").animate({
"-moz-border-radius": "110px/100px",
"-webkit-border-radius": "110px 100px",
"border-radius": "110px/100px",
height: '100px',
width: '110px',
top: '240px'
}, 1500, animate2());
}
function animate2() {
$("#bubble1").animate({
"-moz-border-radius": "100px/110px",
"-webkit-border-radius": "100px 110px",
"border-radius": "100px/110px",
height: '110px',
width: '100px',
top: '235px'
}, 1500, function() {
$('#bubble1').trigger('mouseover');
});
}
$("#bubble1").mouseover(function() {
animate1();
});
$("#bubble1").mouseout(function() {
$("#bubble1").stop(true, false);
});

Function to access own object properties in function

From getValuePerTick() how do I access maxValue and numberOfTicks? Trying my hand at my first JavaScript program and having some trouble. Thanks!
var TChart = Object.extend(
{
init: function(canvasName)
{
// ...
this.config = {
gutter: {
top: 25,
right: 100,
bottom: 50,
left: 0
},
scale: {
maxValue: 3.3,
numberOfTicks: 10,
getValuePerTick: function() {
return (maxValue / numberOfTicks);
}
}
};
// ...
}
});

Since maxValue and numberOfTicks are properties of the object, you need to use member notation to access it
this.config = {
gutter: {
top: 25,
right: 100,
bottom: 50,
left: 0
},
scale: {
maxValue: 3.3,
numberOfTicks: 10,
getValuePerTick: function() {
return (this.maxValue / this.numberOfTicks);
}
}
};

Simply with this. prefix
return (this.maxValue / this.numberOfTicks);