Hacking/Overriding Javascript - javascript

I'm only familiar with HTML and CSS, which I use on a daily basis. !Important CSS overrides are something I have to do TONS of in order to customize websites for clients that use a 3rd party CRM system, but now I've been asked to see if I can override what a Javascript image slider does; namely if I can force it to let the images rotate out instead of showing a single image that only randomly changes out to other ones when the page refreshes. I'm not familiar enough with Javascript to know how to do this; I've used this same sort of image slider many many times over, so I know what settings need to be changed, but I don't know how to force an override like I do with CSS, or if it's even possible to tack on another on the same page that will do it.
Here's the javascript code snippet that the webpage has on it already.
<script type="text/javascript">
$(document).ready(function () {
var randSlick = Math.floor( Math.random() * $('#carousel > div').length );
$('#carousel').slick({
infinite: true,
autoplay: false,
autoplaySpeed: 10000,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true
}).slickGoTo(randSlick);
});
</script>
I need to change the "autoplay" to true, so it will play automatically instead of do nothing, and I'd like to change the "autoplaySpeed" to something more reasonable, like 3000.
I don't have access to this part of the code (Hence why I'm always having to do CSS !Important overrides; I can't just edit the existing code directly, I have to add my own in a sneaky hackery sort or way) so I'm hoping that there's an easy way to do this. My apologies if this is long winded or confusing in any way; I've taught myself HTML and CSS easily enough but Javascript is proving to be another animal entirely and I'm just flailing around at this point.

To get the obvious out of the way:
You will not be able to modify the JavaScript code with HTML/CSS, you can only do so via JavaScript.
What you see in the script is JQuery, a JavaScript extension library: see: JQuery API.
I recommend that you make your own script to reset the values of the $("#carousel") via the unslick function, which is clearly documented here: see: SlickJS.
$("#carousel").slick('unslick');
Immediately after which you can bind $("#carousel") with your own parameters like so:
<script type="text/javascript">
$(document).ready(function () {
var randSlick = Math.floor( Math.random() * $('#carousel > div').length );
$('#carousel').slick({
infinite: true,
autoplay: true,
autoplaySpeed: 3000,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true
}).slickGoTo(randSlick);
});
</script>
Make 100% sure that your JavaScript file gets called after the SlickJS import.
Any questions? Ask in the comments below :-)

In your page, you can deconstruct the existing slick object and recreate it with your own settings.
<script type="text/javascript">
$(document).ready(function () {
$('#carousel').slick('unslick'); // Destroy existing slick object
// Start a new one with the options you want
$('#carousel').slick({
autoplay: true,
autoplaySpeed: 3000
});
});
</script>

Related

Making 2 SwiperJS scripts work together - 2nd one not working when other init script is added to same page

Having trouble making 2 swiperJS Sliders work together.
The conflict seems to be in the for each, or the JS column in codepen / the external script file that initializes the slider.
Anyone have any ideas on how i can get them both to work together? For example, if you take the script from the 2nd one, and put it into the script column in slider one you'll see it breaks it. Or, if you do the opposite, it breaks it too.
It doesn't look like it's a matter of them both being called .swiper-container because the 2nd one ID's the swiper with #swiper1
SLIDER 1: Codepen
SLIDER 2: Codepen
The JS that makes this one work is:
(function () {
'use strict';
const mySwiper = new Swiper('#swiper1', {
loop: true,
autoplay: 4000,
slidesPerView: '1',
centeredSlides: true,
a11y: true,
keyboardControl: true,
grabCursor: true,
// pagination
pagination: '.swiper-pagination',
paginationClickable: true,
// navigation arrows
nextButton: '#js-prev1',
prevButton: '#js-next1' });
})();
any help would be appreciated!
If you look at both Codepen's it'd be most helpful i'm thinking.
slider 1 works great and i dont want to mess with that one as it's telling it to show a certain amount of slides per view.
Here is complete working example https://jsfiddle.net/710x569p/ As i told you in another answer don't use same selector and exclude #swiper1 from .swiper-container
var mySwiper = new Swiper('.swiper-container:not(#swiper1)'

SlickJs controls do not work after being re-loaded via AJAX

I have a slickJS carousel that I am using with ~ 12 menu items. On a message from a websocket connection, the page is re-loaded with up-to-date information via AJAX, the HTML including the slickJS carousel. The carousel re-initializes fine cosmetically, however the controls (arrows, click-n-grab) do not work. I can pick a new 'menu item' from the current view but nothing else is functional. I have also tried manually re-initializing slick using
$('.my-menu-list').slick('unslick').slick('reinit');
but that yields the same result. For reference, my init command for slick is
$(document).ready(function(){
$('.my-menu-list').slick({
arrows: true,
infinite: true,
lazyLoad: 'progressive',
speed: 600,
slidesToShow: 4,
slidesToScroll: 4,
initialSlide: $('.my-menu-list.active').data('slick-index')
});
});
and it is loaded from an external file.

How to stop cubeslider slideshow on mouseleave?

I am using a Cube Slider 3d plugin for a slideshow and I have it starting on 'mouseenter' using jQuery, which works fine. I want it to stop on 'mouseleave' and cannot get it to work. Been unable to find anything to guide me in the right direction. Please see the code below. It is the code I use to start. As you can see, there is an autoplay option, which I set to 'true'. Logic would tell me to set the value to false on mouseleave, but that does not work and seems a bit redundant to use cubeslider() again. I have also tried jQuery method stop() and thought about trying to use setInterval() and clearInterval() with it somehow. With using a jQuery plugin it doesn't seem like much additional jQuery/JavaScript would be needed. I could be wrong as I've been neglecting jQuery/JavaScript for another focus and probably need a refresher on many JavaScript concepts. Any help is appreciated. Thanks
$('#cubeSlide').mouseenter(function() {
$('#cubeSlide').cubeslider({
cubesNum: {rows:1, cols:1},
orientation: 'h',
autoplay: true,
autoplayInterval: 500,
perspective: 1200,
mode3d: 'auto',
arrows: false,
navigation: false,
addShadow: false,
});
});

Slick Carousel Uncaught TypeError: $(...).slick is not a function

Somehow I'm unable to use slick carousel (http://kenwheeler.github.io/slick/) correctly.
I'm getting the following error:
Uncaught TypeError: $(...).slick is not a function
I'm running the following code in my javascript file:
function initSlider(){
$('.references').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
autoplay: true,
prevArrow: '<div class="slick-prev"><i class="fa fa-chevron-left"></i></div>',
nextArrow: '<div class="slick-next"><i class="fa fa-chevron-right"></i></div>'
});
}
I've included the latest jQuery version (2.1.4) with bower. I've also tried including the jQuery CDN in the head of my layout template file, but that didn't resolve anything either.
The only thing strange that could mean something is that when I don't use a function to call the slider, it does work but it gives me the error:
Uncaught TypeError: Cannot read property 'add' of null
I found out that that means that the code has been loaded before the DOM was loaded, which is correct (I think).
Edit: I've created a JSFiddle from my code: https://jsfiddle.net/brz30e77/
EDIT2: The error persisted every now and then when adding new function to my JS file. I ultimately stripped my concatenated JS file and found out that there were two versions of jQuery being loaded, of which one was very, very old.
I found the solution myself later, so I placed it as an answer:
The error persisted every now and then when adding new function to my JS file. I ultimately stripped down my concatenated JS file and found out that there were two versions of jQuery being loaded, of which one was very, very old.
Recently had the same problem: TypeError: $(...).slick is not a function
Found an interesting solution.
Hope, it might be useful to somebody.
In my particular situation there are: jQuery + WHMCS + slick.
It works normal standalone, without WHMCS. But after the integration to WHMCS an error appears.
The solution was to use jQuery in noConflict mode.
Ex:
Your code:
$(document).ready(function() {
$('a').click( function(event) {
$(this).hide();
event.preventDefault();
});
});
Code in noConflict mode:
var $jq = jQuery.noConflict();
$jq(document).ready(function() {
$jq('a').click( function(event) {
$jq(this).hide();
event.preventDefault();
});
});
The solution was found here:
http://zenverse.net/jquery-how-to-fix-the-is-not-a-function-error-using-noconflict/
You failed to load the slick.js file. Add this script file https://kenwheeler.github.io/slick/slick/slick.js.
I updated your JSFiddle by adding an external file on left sidebar External Resources. Then it doesn't report the error: $(...).slick is not a function.
It's hard to tell without looking at the full code but this type of error
Uncaught TypeError: $(...).slick is not a function
Usually means that you either forgot to include slick.js in the page or you included it before jquery.
Make sure jquery is the first js file and you included the slick.js library after it.
Thought this would be helpful for others with the same issue, as I've seen a few on here - I ran into this, but found I loaded slick.js AFTER my main.js (which was calling the slick() function). swapped the two and it works great
Try:
function initSlider(){
$('.references').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
autoplay: true,
prevArrow: '<div class="slick-prev"><i class="fa fa-chevron-left"></i></div>',
nextArrow: '<div class="slick-next"><i class="fa fa-chevron-right"></i></div>'
});
}
$(document).on('ready', function () {
initSlider();
});
Also just to be sure, make sure that you include the JS file for the slider after you include jQuery and before you include the code above to initialise.
Old question, but I have only one recent jQuery file (v3.2.1) included (slick is also included, of course), and I still got this problem. I fixed it like this:
function initSlider(selector, options) {
if ($.fn.slick) {
$(selector).slick(options);
} else {
setTimeout(function() {
initSlider(selector, options);
}, 500);
}
}
//example: initSlider('.references', {...slick's options...});
This function tries to apply slick 2 times a second and stops after get it working. I didn't analyze it deep, but I think slick's initialization is being deferred.
I had the same problem. When i was trying and testing on a browser on my PC machine i didn't have the "not a function" error, but when i tried on a virtual machine the error was popping. I'd solved it by adding the slick files on my web server and adding the urls of the css and js files from my web server to my html. Before that i was pulling the css and js from CDN.
I'm not 100% sure, but I believe the error was caused by some client-side JavaScript that was turning exports into an object.
Some code in the Slick plugin (see below) calls the require function if exports is not undefined.
Here's the portion of code I had to change in slick.js. You can see I am just commenting out the if statements, and, instead, I'm just calling factory(jQuery).
;(function(factory) {
console.log('slick in factory', define, 'exports', exports, 'factory', factory);
'use strict';
// if (typeof define === 'function' && define.amd) {
// define(['jquery'], factory);
// } else if (typeof exports !== 'undefined') {
// module.exports = factory(require('jquery'));
// } else {
// factory(jQuery);
// }
factory(jQuery);
}
I found that I initialised my slider using inline script in the body, which meant it was being called before slick.js had been loaded. I fixed using inline JS in the footer to initialise the slider after including the slick.js file.
<script type="text/javascript" src="/slick/slick.min.js"></script>
<script>
$('.autoplay').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 4000,
});
</script>
In my instance the solution was moving the jQuery include just before the </head> tag. With the Slick include at the bottom before the </body> and just before my script include that initiates the slider.
I've had the same problem before recognized that I've put the code after closing the body tag.
After moving it into tag, it's OK now
<body>
$(document).ready(function(){
$('.multiple-items').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</body>
I solve this by simply add 'https:' to slick cdn link gotfrom slick
you didnt include the reference of slick
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
Please check the cnd or slick.min.js is properly linked. if slick.min.js is not properly linked then it shows this type of error.
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js
Include the script tag before the slick function is used in your HTML template
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
If you want to control the slider of Slick.js you can use
For Next
$('slick_selector').slick("slickNext");
For Prev
$('slick_selector').slick("slickPrev");
For version > 1.5
Make sure that you link slick.min.js file before the jQuery slick function and JQuery slick function appears after slick.min.js file.
For me, the problem resolves after I changed:
<script type='text/javascript' src='../../path-to-slick/slick.min.js'></script>
to
<script src='../../path-to-slick/slick.min.js'></script>
My work is based on Jquery 2.2.4, and I'm running my development on the latest Xampp and Chrome.
In Laravel i solve with:
app.sccs
// slick
#import "~slick-carousel/slick/slick";
#import "~slick-carousel/slick/slick-theme";
bootstrap.js
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('slick')
require('slick-carousel')
}
package.json
"jquery": "^3.2",
"slick": "^1.12.2",
"slick-carousel": "^1.6.0"
example.js
$('.testimonial-active').slick({
dots: false,
arrows: true,
prevArrow: '<span class="prev"><i class="mdi mdi-arrow-left"></i></span>',
nextArrow: '<span class="next"><i class="mdi mdi-arrow-right"></i></span>',
infinite: true,
autoplay: true,
autoplaySpeed: 5000,
speed: 800,
slidesToShow: 1,
});

SlidesJS hide pagination

I am using Slidesjs to use a simple scroller on my site. However, I cannot hide the pagination that shows the 1 and 2 bullet points.
The link for the project is www.barterscloset.com
I have tried trying to hide it in css and in a Jquery.hide function.
Thanks in advance!
There's an option built in, add these lines to where you fire the plugin:
pagination: false,
generatePagination: false
so your whole call would look like this (if you had no other otpions set, that is)
$(function(){
$("#slides").slides({
pagination: false,
generatePagination: false
});
});

Categories