Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Revolver.js Not working in Firefox or IE

  1. #1
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default Revolver.js Not working in Firefox or IE

    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.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,938
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    11

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,935
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

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

  5. #5
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    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?

  6. #6
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    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

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,935
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 06-07-2013 at 10:54 AM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    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.
    Last edited by itivae; 06-11-2013 at 07:51 PM. Reason: Had to redefine my problem

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,935
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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'))
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    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?
    Last edited by itivae; 06-14-2013 at 08:04 PM.

Similar Threads

  1. Image revolver
    By gemzilla in forum JavaScript
    Replies: 1
    Last Post: 09-11-2012, 02:20 PM
  2. Replies: 4
    Last Post: 10-24-2009, 07:07 AM
  3. javascript code not working in ie but working in firefox
    By sukanya.paul in forum JavaScript
    Replies: 2
    Last Post: 02-20-2009, 12:44 PM
  4. Replies: 1
    Last Post: 08-21-2008, 02:32 PM
  5. Script working/not working in Firefox
    By SawnDiddle in forum JavaScript
    Replies: 2
    Last Post: 03-27-2008, 07:23 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •