PDA

View Full Version : 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 (http://revolverjs.com/) In Firefox it doesn't work at all saying that
"this.slides is undefined"
In IE it will move once then it says
"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/keyboard-navigation.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'):

5077

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):


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

with:


<!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


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

Here is the html

<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


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

and this HTML

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

And am letting this code do the work


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?


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

Or for a more immediate return to the beginning:


$(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 (http://potluckyarn.com/tour/slidertour.php)

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.

/*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:


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

to:


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

similarly for:


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

change it to:


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 (http://potluckyarn.com/tour/slidertour.php)

I have used both
if(!$("#test1").hasClass('hidden')) and
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
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
style="left: -720px; top: 0px; -webkit-transition: left 0.5s ease-in-out; display: none;" and Image 2 gets the inline styles
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.


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?

jscheuer1
06-15-2013, 04:59 AM
I was wrong about the class. It's used, but not for hiding and revealing the images, rather I believe it's only used for the initial setup of the slider feature, which one is initially seen, and the rest hidden.

Anyways, this appears to do what you want it to do:


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


And in a sort of belated answer to your other question, how to restart the slider without refreshing the page, after backing up what you have, replace your script with this one:


<script type="text/javascript">
var revolver = $('#my_slider').revolver({autoPlay:false, rotationSpeed:40000, transition: {type: 'slide', speed:500}}).data('revolver');
$(document).keydown(function(e)
{
/*right*/
if (e.keyCode === 39)
{
revolver.next();
}

/*left*/
else if (e.keyCode === 37)
{
revolver.previous({direction:'right'});
}

/*up*/
else if (e.keyCode === 38)
{

if($("#test1").css('display') !== 'none') {
$('#my_slider').append('<a class="slidercover" style="position:absolute;top:0;left:0;" href="#"><img id="after1" src="images/riverwalk.jpg"/></a>');
}
else if($("#test2").css('display') !== 'none'){
$('#my_slider').append('<a class="slidercover" style="position:absolute;top:0;left:0;display:block;width:100%;height:100%;background-color:#f3edf5;" href="#"><img id="after2" src="images/cropped-potluck-yarn-logo1.png"/></a>');
}
}

/*down*/
else if (e.keyCode === 40)
{
e.preventDefault();
revolver.first({speed: 0});
$('.slidercover').remove();
}
});
</script>


And this part of the new code:


else if (e.keyCode === 38)
{

if($("#test1").css('display') !== 'none') {
$('#my_slider').append('<a class="slidercover" style="position:absolute;top:0;left:0;" href="#"><img id="after1" src="images/riverwalk.jpg"/></a>');
}
else if($("#test2").css('display') !== 'none'){
$('#my_slider').append('<a class="slidercover" style="position:absolute;top:0;left:0;display:block;width:100%;height:100%;background-color:#f3edf5;" href="#"><img id="after2" src="images/cropped-potluck-yarn-logo1.png"/></a>');
}
}


can be written using the revolver object:


else if (e.keyCode === 38)
{
if(revolver.currentSlide === 0) {
revolver.container.append('<a class="slidercover" style="position:absolute;top:0;left:0;" href="#"><img id="after1" src="images/riverwalk.jpg"/></a>');
}
else if(revolver.currentSlide === 1){
revolver.container.append('<a class="slidercover" style="position:absolute;top:0;left:0;display:block;width:100%;height:100%;background-color:#f3edf5;" href="#"><img id="after2" src="images/cropped-potluck-yarn-logo1.png"/></a>');
}
}

jscheuer1
06-16-2013, 02:54 PM
Here's an even more robust way to do it (markup and on page script have changed):


<!DOCTYPE html>
<html>
<head>
<title>slider tour</title>
<script src="/tour/lightbox/js/jquery-1.7.2.min.js"></script>
<script src="/tour/lightbox/js/lightbox.js"></script>

<link rel="stylesheet" type="text/css" href="slidertour.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="/tour/lightbox/css/lightbox.css" rel="stylesheet" />
</head>
<body>
<div class="fullwrapper">
<div class="tourheaderimg">
<img src="images/cropped-potluck-yarn-logo1.png" alt="Potluck Logo">
</div>
<br clear="both" />
<div class="tourwrapper">

<div class="sliderwrappertour">
<div id="my_slider">

<a href="images/potluckbg.jpg" rel="lightbox" title="my caption"><img class="slide" src="http://revolverjs.com/assets/img/1.png" alt="" /></a>
<img class="slide hidden" src="http://revolverjs.com/assets/img/2.png" alt="" />
<img class="slide hidden" src="http://revolverjs.com/assets/img/3.png" alt="" />
<img class="slide hidden" src="http://revolverjs.com/assets/img/4.png" alt="" />
<img class="slide hidden" src="http://revolverjs.com/assets/img/5.png" alt="" />
<img class="slide hidden" src="http://revolverjs.com/assets/img/6.png" alt="" />
<a href="#"><img class="slide hidden menu" src="images/riverwalk.jpg" alt="" /></a>
<a style="width:720px;height:300px;display:block;background:#f3edf5;" href="#"><img class="slide hidden menu" src="images/cropped-potluck-yarn-logo1.png" alt="" /></a>
</div>

</div><!-- end sliderwrappertour -->
<div class="tournavtips">
<h3 class="tourheader3">Instructions</h3>
<p class="tourtxt">Take a visual tour of the lands in The Broken Circle</p>
<ul class="tourtxtlist"><li>The <b>left arrow</b> moves your screen to the left.</li>
<li>The <b>right arrow</b> moves your screen to the right.</li>
<li>The <b>up arrow</b> toggles the menu of the different tours that are available.</li>
<li>The <b>down arrow</b> restarts the tour.</li>
</ul>
</div><div class="tourmenu"><a href="http://potluckyarn.com"><img src="images/return.png" alt="Return to the homepage"></a></div></div><!-- end wrapper-->
</div><!--endfullwrapper-->

<script type="text/javascript" src="http://www.potluckyarn.com/tour/js/jquery-1.10.1.min.js" ></script>
<script type="text/javascript" src="http://www.potluckyarn.com/tour/js/jquery.revolver.min.js" ></script>



<script type="text/javascript">
var revolver = $('#my_slider').revolver({autoPlay:false, rotationSpeed:40000, transition: {type: 'slide', speed:500}}).data('revolver');
revolver.menulimit = revolver.numSlides - revolver.slides.filter('.menu').length;
$(document).keydown(function(e)
{
/*right*/
if (e.keyCode === 39 && !revolver.override)
{
revolver.nextSlide < revolver.menulimit? revolver.next() : revolver.first();
}

/*left*/
else if (e.keyCode === 37 && !revolver.override)
{
revolver.currentSlide > 0? revolver.previous({direction:'right'}) : revolver.goTo(revolver.menulimit - 1, {direction:'right'});
}

/*up*/
else if (e.keyCode === 38 && !revolver.override)
{
if(revolver.currentSlide + revolver.menulimit < revolver.numSlides) {
revolver.goTo(revolver.currentSlide + revolver.menulimit, {direction:'up'});
revolver.override = true;
}
}

/*down*/
else if (e.keyCode === 40)
{
revolver.first({direction: 'down'});
revolver.override = false;
}
e.preventDefault();
});
</script>

</body>
</html>

itivae
06-18-2013, 04:00 PM
Wow. I tried the above code (the one above your last post). It works very well. I will try implementing your last post. Thank you very much for your help.