Revolver.js Not working in Firefox or IE

**itivae** · 06-04-2013, 07:20 PM

Hello,

I am using the Revolver.js javascript library in a project. Found here In Firefox it doesn't work at all saying that

Code:

"this.slides is undefined"

In IE it will move once then it says

Code:

"Error: Object doesn't support property or method 'trigger'"

. My Javascript is not that good. Can someone offer some advice as to the root of this problem? Or perhaps a way to work around it?

Here is a link to the up and running version (it works in both Chrome and Opera) http://www.potluckyarn.com/noahstestdir/slidertour.php

Here is a link to the site that I used for an example http://revolverjs.com/examples/other...avigation.html

I am using the jQuery version.

Thanks in advance for any help that can be given.

**Beverleyh** · 06-04-2013, 08:42 PM

I'm on iPhone now so I can only go through some logic with you.

Firstly, does the linked demo page on the source website work as expected?
If yes, download the demo pack so its working 'as-is' on your computer. After downloading the official demo pack, edit the sample page to reflect the code changes provided on the linked Keyboard Navigation Example. View the source code of that example page and refer to that if needed. Once you have an example page working as you want, build your own web page/design back up gradually around it and check it in a browser with each addition.

Secondly, have you approached the actual developer to ask for assistance?
The developer replied only 2 months ago in the comments on the example page you posted, and on Twitter around 3 weeks ago, so the project is current enough to assume that it/he is still active. There is a very good chance that he will respond to you and offer more tailored advice - its his project, not DD's, and he will be much more familiar with the setup or of any issues, so it makes sense to go to the source first.

**jscheuer1** · 06-05-2013, 04:32 AM

That script is flawed. Even the demo page doesn't work in IE 9 or Firefox 21.0 - Well I'm not sure about the Fox, the demo page crashed it. But your demo doesn't work in either of them. Working from a local mock up of your page and the uncompressed version of the revolver script, I was able to trace down and correct the errors (4) for IE and the one for the Fox. There might be other errors. I only found and fixed the obvious ones for the setup you're using. Here's the updated file which I also minified after working on it (right click and 'Save As'):

jquery.revolver.min.js

Use it in place of the official version.

Oh, and BTW, for IE the page also needs a standards invoking DOCTYPE. Replace this (at the very beginning of the page's source code):

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

with:

HTML Code:

<!DOCTYPE html>

The browser cache may need to be cleared and/or the page refreshed to see changes.

**itivae** · 06-06-2013, 01:27 PM

Thanks jscheuer1. So far that works perfectly. Thanks for all the help.

**itivae** · 06-06-2013, 03:57 PM

Hello again

I have run into another problem while writing this.
I am refreshing a div using the following function

Code:

    $(function() {
      $("#refresh").click(function(evt) {
         $(".tourwrapper").load("slidertour.php")
				 evt.preventDefault();
				 return false;
      })
    })

Here is the html

Code:

<li><a id="refresh" href="#">Back</a></li>

This seems to work well in all browsers other than IE (surprise).

I get a "SCRIPT257: Could not complete the operation due to error 80020101.
jquery-1.10.1.min.js, line 4 character 4961"

Any ideas?

**itivae** · 06-06-2013, 04:48 PM

I have a workaround for this. I have removed this code

Code:

  $(function() {
      $("#refresh").click(function(evt) {
         $(".tourwrapper").load("slidertour.php")
				 evt.preventDefault();
				 return false;
      })
    })

and this HTML

Code:

<li><a id="refresh" href="#">Back</a></li>

And am letting this code do the work

Code:

    else if (e.keyCode === 40)
    {
		e.preventDefault();
$(document).keyup(function(e) {
  if (e.keyCode == 40) {
        setTimeout(function() {
            window.location.href = document.URL;
        }, 0);
  }
});

Not really what I wanted but it is workable. Let me know if you have any thoughts on how to make the click event work.

Thanks

**jscheuer1** · 06-07-2013, 10:06 AM

I'm not sure what you're trying to achieve. Your demo (from your first post) is now a 404 Not Found.

If all you want is to start over from the beginning, why not just navigate to that image?

Code:

 $(function() {
      $("#refresh").click(function(evt) {
         revolver.first();
         evt.preventDefault();
      });
    });

Or for a more immediate return to the beginning:

Code:

 $(function() {
      $("#refresh").click(function(evt) {
         revolver.first({speed: 10});
         evt.preventDefault();
      });
    });

Oh, and any AJAX should be tested live. Local AJAX will trigger security violations sometimes in some browsers.

If you want more help, please put up 2 demos. One with the code you like that doesn't work in IE, and another with this workaround.

**itivae** · 06-11-2013, 03:09 PM

Hello, Sorry for the lateness of my reply. I have sorted out my IE error. I am currently trying to work something else into this slider.

here is a link to my live version Link

I am trying to use jQuery to check the id of an element (it is an image [actually multiple images])

Here is my current code.

Code:

 /*up*/
    else if (e.keyCode === 38)
    {
		
	if($("#test1").length > 0) {
	document.getElementById("my_slider").innerHTML='<a href="#"><img id="after1" src="images/riverwalk.jpg"/></a>';
	}
        else if($("#test2").length > 0){
	document.getElementById("my_slider").innerHTML='<a href="#"><img id="after2" src="images/riverwalk2.jpg"/></a>';
	}
}

This code keeps loading the first image even when on the image with id="test2" Any ideas on a better way to implement this? I want to be able to check which image the user is on and make the arrows go to different addresses based on that data.

**edit As I look at this a bit more I believe I understand my problem....I am just unsure of a solution. It is my understanding that since the id="test1" always resolves to true (as it always exists) it always executes. Is there a way to base the up arrow event on whichever image is currently "active?" I tried looking for this but have only found references to onClick events.**

Thanks for any help.

**jscheuer1** · 06-12-2013, 03:37 AM

The images which are not currently seen have a class of hidden. So change:

Code:

if($("#test1").length > 0)

to:

Code:

if(!$("#test1").hasClass('hidden'))

similarly for:

Code:

else if($("#test2").length > 0)

change it to:

Code:

else if(!$("#test2").hasClass('hidden'))

**itivae** · 06-14-2013, 07:23 PM

Hi jscheuer1,

Again thank you for taking the time to help.

I have changed the code as you suggested but it is not changing the output.

Current example is here Link

I have used both

Code:

if(!$("#test1").hasClass('hidden'))

and

Code:

if(!$("#test1").hasClass('slide hidden'))

for both the ids but it doesnt seem to change anything. The first image is always displayed when the up button is pressed.

I have also tried

Code:

if($("#test1").not('hidden'))

as well I think I used that right but am not 100% sure).

Hopefully I have not typoed something...I have gone over it several times and have found no errors.

**edit** I have figured out what the problem is. I still do not have a solution. Basically the style for the elements is being written inline. When switching from Image 1 to Image 2 Image 1 gets the inline style

Code:

style="left: -720px; top: 0px; -webkit-transition: left 0.5s ease-in-out; display: none;"

and Image 2 gets the inline styles

Code:

style="left: 0px; top: 0px; -webkit-transition: left 0.5s ease-in-out; display: inline-block;"

Yet they keep their original classes. Is there a way to test whether an element with a given Id has a specific css attached? I have tried this but it did not work.

Code:

if(!$("#test1").hasClass('hidden')) {
	document.getElementById("my_slider").innerHTML='<a href="#"><img id="after1" src="images/riverwalk.jpg"/></a>';
	}
        else if($("#test2").css('display')=='inline-block'){
	document.getElementById("my_slider").innerHTML='<a href="#"><img id="after2" src="images/cropped-potluck-yarn-logo1.png"/></a>';
	}

Any other ideas?