We Keep Coding

Hacking/Overriding 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>

jQuery way to initiate object from a plugin already initiated?

Thank you for taking the time to look at my question! :)
I am trying to use the jQuery plugin RefineSlider!
My problem is that I am not a Javascript expert. What I wanted to accomplish is to add slides dynamically through an ajax call. The ajax call will return an html structure for a slide. But it has never work, because I think it's initiated at the DOM, and you cannot modify the slides on the fly!
Thank you, and have a great week! :)

And if you add your function which implement the slider in this jquery function :
//This function will be called after an ajax
$(document).ajaxComplete(function(){
//The example to implement the slider
$('.rs-slider').refineSlide({
transition : 'fade',
transitionDuration : 7000,
autoPlay : true,
keyNav : false,
delay : 0,
controls : null
});
});
But warn this function will be called for ALL ajax call. So you must add a test which control that you don't add more slider.

CloudZoom with Fancybox

I'm a little new to javascript as I mostly just fool around with CSS styling when developing web pages.
I ran into a problem trying to integrate Fancybox with Cloudzoom. I've been trying to follow the directions as directed here: http://blog.codestars.eu/2010/cloud-zoom-in-der-fancybox/
I'm able to get the effect to work perfectly except for one small error-- for some reason (all my images are in galleries for easier use scrolling through fancybox), the zoom only ever shows the first image in the series.
If someone could help me sort through this? Preview any of the galleries here: http://bit.ly/LaPzEH
Here's the tidbit I think is just slightly off - I think it has something to do with the href line in this code being off:
$j('a[rel=gallery]').fancybox({
padding: 0,
overlayColor: '#'+$j('#skin_color').val(),
transitionIn: 'fade',
transitionOut: 'fade',
overlayOpacity: .9,
onComplete : function(arg) {
$('#fancybox-img').wrap(
$('<a>')
.attr('href', $(arg[0]).attr('href'))
.addClass('cloud-zoom')
.attr('rel', "position: 'inside'")
);
$('.cloud-zoom').CloudZoom();
}
});
Any an all help is greatly appreciated!
Edit: Got it working by changing
$(arg[0]).attr('href')
to
this.href
As an aside (because I couldn't find many cloudzoom/fancybox threads) you can also change the position from inside to right/left etc. by editing the JS code for fancybox to have the fancybox-inner display as visible rather than hidden.

If the idea is to wrap the #fancybox-img selector with an anchor with class="cloud-zoom" and with the same href attribute of the anchor that opened fancybox like
<a href="{same as anchor}" class="cloud-zoom" rel="position: 'inside'">
<img id="fancybox-img" src="{big image}" alt=" " />
</a>
... so Cloud Zoom can work on the specific image, then I would re-write the onComplete callback like :
'onComplete' : function(){
$('#fancybox-img').wrap(
$('<a />')
.attr('href', this.href) // this.href gets the "href" of the current image
.addClass('cloud-zoom')
.attr('rel', "position: 'inside'")
); // wrap
$('.cloud-zoom').CloudZoom();
} // onComplete
(not idea what the heck onComplete : function(arg) would do but in any case it would be better to use 'onComplete' : function(currentArray, currentIndex) for the sake of standard fancybox code)
SIDE NOTES:
You are loading two versions of jQuery (1.4.2 and 1.7.1) when you actually need a single instance (ideally the latest version) to avoid unexpected errors.
You are using fancybox v1.3.0 ... it wouldn't hurt to upgrade at least to v1.3.4
Set all your fancybox API options between quotes like
"padding": 0, // it's OK 0 without quotes (integer and Boolean values go without them)
"overlayColor": '#'+$j('#skin_color').val(),
"transitionIn": 'fade',
"transitionOut": 'fade',
"overlayOpacity": .9,
"onComplete": ...etc
there are known issues (mostly with IE) because that (fancybox v1.3.x)

jQuery Slider Working only twice?

I've made my own slider with jQuery using .animate functions throughout, and the slider works when I use it once, and twice, but on the 3rd try, it goes crazy! Basically it's similar to Microsoft's 'For Home' and 'For Work' slider, but a lot less complex (right now)
It is live on a website, and to show you what I mean, here's the URL:
http://glorbi.com/index3
(Click For Work, then For Home, then For work, it starts to fail)
Here's the jQuery that handles the sliding:
$("#sidebar2").click(function(){
$("#innerSec2").animate({"right" : 130}, 1000);
$("#sidebar2").animate({"height" : 1100});
$("#innerSec").animate({"left" : -840}, 1000);
$("#innerSec").animate({"left" : 840}, 200);
$("#sidebar").animate({"height" : 400});
});
$("#sidebar").click(function(){
$("#innerSec").animate({"left" : 0}, 1000);
$("#sidebar").animate({"height" : 1100});
$("#innerSec2").animate({"right" : 970}, 1000);
$("#innerSec2").animate({"left" : 710}, 200);
$("#sidebar2").animate({"height" : 400});
});
I've tried using callbacks, but they lead to a more sequential reaction, moving the slider in parts, which looks pretty horrible.
Also I am aware of the z-index issue as it slides, and I'll fix that!
Does anyone know how I could fix this? The code is pretty generic, and it's strict values for every action, I don't really see how it's failing. :S
Thanks alot! Any help is greatly appreciated! :)

After fiddling with it in firebug, I found out that the left:710px on innerSec2 is causing problem, after we click on sidebar2 div, so I tried following and it seems working except z order problem which you can fix :D
$("#sidebar2").click(function(){$("#innerSec2").animate({"left":-130},0);});

jQuery issue - #<an Object> has no method

I've tried a veriety of jQuery plugins recently and I keep getting this error …
(source: shaunbellis.co.uk)
… regardless of what plugin I try to use.
I've checked the links to the JS files which are all there and working fine. I'm using Drupal if that makes any difference.
I've run the plugins away from the main site to demonstrate that they are working and that I am doing things right with 100% success.
Any ideas?
Update:
My jQuery file called in the footer:
$(document).ready(function() {
$('#footer_holder').hide();
// Fancy Box
$("a.fancybox").fancybox({
'hideOnContentClick': true,
'titlePosition' : 'over',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false,
});
$("#homepage_slider").easySlider({
auto: true,
continuous: true,
});
});
*note - fancy box works fine (unless the easySlider code is above it). jQuery is sorted out by Drupal. I'm running version 1.4

This problem can also arise if you include jQuery more than once.

Ignore me. I'm sorry everyone. I'd mistyped the url of the script. Thanks to Simon Ainley for the prod in the right direction.
Sorry again. Thanks.

I had this problem, or one that looked superficially similar, yesterday. It turned out that I wasn't being careful when mixing jQuery and prototype. I found several solutions at http://docs.jquery.com/Using_jQuery_with_Other_Libraries. I opted for
var $j = jQuery.noConflict();
but there are other reasonable options described there.

For anyone else arriving at this question:
I was performing the most simple jQuery, trying to hide an element:
('#fileselection').hide();
and I was getting the same type of error, "Uncaught TypeError: Object #fileselection has no method 'hide'
Of course, now it is obvious, but I just left off the jQuery indicator '$'. The code should have been:
$('#fileselection').hide();
This fixes the no-brainer problem. I hope this helps someone save a few minutes debugging!

This problem may also come up if you include different versions of jQuery.

This usually has to do with a selector not being used properly. Check and make sure that you are using the jQuery selectors like intended. For example I had this problem when creating a click method:
$("[editButton]").click(function () {
this.css("color", "red");
});
Because I was not using the correct selector method $(this) for jQuery it gave me the same error.
So simply enough, check your selectors!