jQuery plugin not working in Firefox?!

[pookeyblow]

Hi!

I'm using a jQuery plugin called DragScroll so I can drag and scroll just like in google maps.

This works fine in Safari and Opera, but it's not working in Firefox....

You can find the site I'm working on here: bit.ly/297LCa

If you check both Firefox and Safari you will see the problem: I can't drag in Firefox.......

There is also another very similar plugin called ScrollDrag, but I have the same problem with this plugin too! Not working in Firefox..

Does anyone know why this is happening? Maybe I've done something wrong in my html document?

Could really need some help here!

cheers,

pooeky

[pookeyblow]

Think I found out what the problem is!

This is how my js code looked:

<script type="text/javascript">
$(window).load(function(){
$('body').dragscroll();
});

When I now tried

<script type="text/javascript">
$(window).load(function(){
$('#work').dragscroll();
});

</script>

Looks like you can't use body in firefox? So how can I get the whole page to scroll and not just the div where my image is?

[jscheuer1]

I'd try:

<script type="text/javascript">
$(function(){
	$(document.body).dragscroll();
});
</script>

But, it may not be that you cannot use the body element, rather that the body element is not considered suitable in Firefox.

[jscheuer1]

That won't work, but this will:

 <script type="text/javascript">
jQuery(function($){
	$(document.documentElement).imagefit().dragscroll();
});
 </script>

[pookeyblow]

wow that was amazing!!

but now it's not working in safari!

almost there! maybe you know why it's not working in safari too? looks like the image disappears sometimes..!

[jscheuer1]

I don't believe imagefit ever worked in Safari, and that Safari requires document.body. So you could do:

 <script type="text/javascript">
jQuery(function($){
	if(/(Google)|(Apple)/.test(navigator.vendor)){
		$(document.body).dragscroll();
	}else{
		$(document.documentElement).imagefit().dragscroll();
	}
});
 </script>

Google Chrome would have the same problem as Safari. I'm not sure what the problem with imagefit is in those browsers. When I have some time, I will look into it.

[pookeyblow]

Thanks!

I just tried out different things and got it to work by doing this:

		 <script type="text/javascript">
$(window).load(function(){
	if(/(Google)|(Apple)/.test(navigator.vendor)){
		$(document.body).imagefit().dragscroll();
	}else{
		$(document.documentElement).imagefit().dragscroll();
	}
});
 </script>

Strange eh?!

Is it ok to do it like this?

Link to the site: http://bit.ly/297LCa

[jscheuer1]

For what you are doing, this should work out:

 <script type="text/javascript">
jQuery(function($){
	if(/(Google)|(Apple)/.test(navigator.vendor)){
		$(document.body).dragscroll();
		$('#work img').css('width', '100%');
	}else{
		$(document.documentElement).imagefit().dragscroll();
	}
});
 </script>

You may even want to:

 <script type="text/javascript">
jQuery(function($){
	if(/(Google)|(Apple)/.test(navigator.vendor)){
		$(document.body).dragscroll();
		$('#work img').css('width', '100%');
	}else{
		$(document.documentElement).dragscroll();
		$('#work').imagefit();
	}
});
 </script>

[pookeyblow]

Thanks! First one works!! but couldn't get imagefit to work in the second one when using Firefox or Opera..

Thanks again for all the help!! It's highly appreciated!

[jscheuer1]

I see what you mean, at least when the page isn't cached in Opera and Firefox. But I think using:

$(document.documentElement).imagefit().dragscroll();

will cause problems with your two other images in some IE browsers. To prevent that, you may add this style to your style section:

    	#infobox img, #topcontrol img {
    	 width: 48px!important;
    	}