[Pro] Smooth Scroll conflicts with colorbox

Hi all,

I have two features I want to implement on a website, and they both work OK when only one is applied to the site, but when both are applied one fails.

I wanted nice smooth scrolling to various anchors I have on the page, and found a post by Walter explaining how it works with Protaculous, and it worked like a dream.

I also wanted to implement an image zoom and slideshow featured, and I have used Colorbox successfully in the past. However, when both are used together the smooth scrolling fails.

I think I need to join the two lots of code together, but I am struggling (surprise, surprise). Any pointers?

The Smooth scrolling code:

var anchors = $$('a');
anchors.each(function(elm){
    var ref = elm.href.split(/#/)[1];
    var t = (!!$(ref)) ? $(ref) : anchors.find(function(em){ return em.name == ref; });
    if(t){
        elm.observe('click',function(evt){
            evt.stop();
            Effect.ScrollTo(t);
        });
    }
});

And the colorbox code goes in before :

<link rel="stylesheet" href="colorbox/colorbox.css" type="text/css" media="screen" />
<script src="colorbox/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="colorbox/jquery.colorbox.js" type="text/javascript"></script>

<script>
		$(document).ready(function(){
			//Examples of how to assign the ColorBox event to elements
			$("a[rel='example1']").colorbox();
			$("a[rel='example2']").colorbox({transition:"fade"});
			$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
			$("a[rel='example4']").colorbox({slideshow:true});
			$(".example5").colorbox();
			$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
			$(".example7").colorbox({width:"80%", height:"80%", iframe:true});
			$(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
			$(".example9").colorbox({
				onOpen:function(){ alert('onOpen: colorbox is about to open'); },
				onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
				onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
				onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
				onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
			});
			
			//Example of preserving a JavaScript event for inline calls.
			$("#click").click(function(){ 
				$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this 
window again and this message will still be here.");
				return false;
			});
		});
	</script>

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There are always going to be issues when you use 2 different JS libraries on a page ie javascript conflicts.

Smoothscroll is script/protaculous based while Colorbox uses Jquery.

I am not familiar with Colorbox but I am sure that there will be something similar that is script/protaculous based.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ok David. Thanks for replying. I will look further into it.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

ScriptyLightbox is an alternative http://www.actionsforge.com/actions/view/153-scriptylightbox or ScriptyLightbox2 http://www.actionsforge.com/actions/view/215-scriptylightbox2

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Coincidentally I’m also working on a similar possible website - single page with smooth scrolling to anchor points - cms and unfortunately also a managed gallery. As per PulsePro but its jquery:-(

Any thoughts on an alternative gallery that a client can update ?

s


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What about an alternative smooth scroll - jQuery based.

Off hand I don’t know of one but it shouldn’t be that hard to find.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I use Local Scroll (jQuery). Look on the jQuery site, it’s easy to find.
Works quite nicely.

Todd


DeltaDave mailto:email@hidden
July 11, 2011 6:09 PM

What about an alternative smooth scroll - jQuery based.

Off hand I don’t know of one but it shouldn’t be that hard to find.

seoras mailto:email@hidden
July 11, 2011 3:56 PM

Coincidentally I’m also working on a similar possible website - single
page with smooth scrolling to anchor points - cms and unfortunately
also a managed gallery. As per PulsePro but its jquery:-(

Any thoughts on an alternative gallery that a client can update ?

s


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here is one

Paste this in before of your page


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
	<script> 
	$(function() {
	
		function filterPath(string) {
			return string
			.replace(/^//,'')
			.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
			.replace(//$/,'');
		}
	
		var locationPath = filterPath(location.pathname);
		var scrollElem = scrollableElement('html', 'body');
	
		// Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
		$('a[href*=#]').each(function() {
	
			// Ensure it's a same-page link
			var thisPath = filterPath(this.pathname) || locationPath;
			if (  locationPath == thisPath
				&& (location.hostname == this.hostname || !this.hostname)
				&& this.hash.replace(/#/,'') ) {
	
					// Ensure target exists
					var $target = $(this.hash), target = this.hash;
					if (target) {
	
						// Find location of target
						var targetOffset = $target.offset().top;
						$(this).click(function(event) {
	
							// Prevent jump-down
							event.preventDefault();
	
							// Animate to target
							$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
	
								// Set hash in URL after animation successful
								location.hash = target;
	
							});
						});
					}
			}
	
		});
	
		// Use the first element that is "scrollable"  (cross-browser fix?)
		function scrollableElement(els) {
			for (var i = 0, argLength = arguments.length; i <argLength; i++) {
				var el = arguments[i],
				$scrollElement = $(el);
				if ($scrollElement.scrollTop()> 0) {
					return el;
				} else {
					$scrollElement.scrollTop(1);
					var isScrollable = $scrollElement.scrollTop()> 0;
					$scrollElement.scrollTop(0);
					if (isScrollable) {
						return el;
					}
				}
			}
			return [];
		}
	
	});
	</script>

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Todd and Dave,

Something to look into and test out.

s


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That works fine, though still further testing to do. There seems to be plenty variations on this around - to the point of confusion.

Something I would be keen to know is if I can link to a div rather than anchor text. Or; how do I make a div an anchor ?

thanks,

s


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I have found a nicer image display feature, based on scriptaculous, and both the smooth scroll and the gallery now work seemlessly together… on a Mac.

However, the gallery feature appears to fail in PC IE 8 and 9, and I now remember why I went with Colorbox - it was the only one I could get to work in later IE versions!

Oh well. More thinking needed.

On 8 Jul 2011, 7:46 pm, DeltaDave wrote:

There are always going to be issues when you use 2 different JS libraries on a page ie javascript conflicts.

Smoothscroll is script/protaculous based while Colorbox uses Jquery.

I am not familiar with Colorbox but I am sure that there will be something similar that is script/protaculous based.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

As long as the DIV is a layer in Freeway, it will have an ID, which
you can use as the link target. So look in the Title field of the
Inspector while that DIV is selected on the layout. Whatever you see
there, prepend an octothorp to it (#) and put that in the URL field of
the hyperlink dialog. So item23 becomes #item23 as the URL.

Walter

On Jul 12, 2011, at 7:59 AM, seoras wrote:

That works fine, though still further testing to do. There seems to
be plenty variations on this around - to the point of confusion.

Something I would be keen to know is if I can link to a div rather
than anchor text. Or; how do I make a div an anchor ?

thanks,

s


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

prepend an octothorp to it (#)

Bingo !! thanks.

‘octothorpe’ something else I’ve learnt today.

s


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options