Colorbox

JavaScript
1

Hello,

I am trying to implement colorbox onto my site:

http://www.orangestonephotography.com/test/js/point-of-sale.php

and I am having difficulty with it, when you go to “compare features” tab and click the first feature you get an error:

Error: uncaught exception: Syntax error, unrecognized expression: #

what does this mean? how can I successfully implement the code?

Here is the source:

http://silver163.pastebin.com/m7214ec87

Please help!

2 
$(".inline2").colorbox({width:"50%",  inline:true, href:"#"});

My guess is that with the “href” parameter you’re supposed to indicate an element on the page that you want to put in the box (like you did with ‘.inline’). “#” doesn’t point to anything on the page, so therefore it causes an error.

By the way, when I click the tabs, the footer jumps up into view during the transition. It’s quite annoying, so you need to fix that!

3

well # can’t be the problem because it works on their demo site:

http://colorpowered.com/colorbox/

also about the jumping footer, i tried but that is how the slider works and i am not sure how to fix it.

4

ok i fixed my colorbox issue but the jumping footer i am just not sure of.

5

The href attribute in the HTML can be “#”, yes, but not in the javascript parameter.

<a href="#" class="example8 cboxElement" style="">Inline HTML</a>

$(".example8").colorbox({width:"50&#37;",  inline:true, href:"#inline_example1"});

From the colorbox website demo. As you can see, the href parameter is not “#”.

As for your jumping footer, it’s related to the height of your content. To avoid the jumping, you have to ensure the height does not become 0 during the transition. This will probably mean setting the height of the wrapper to the height of the new content.

6

i tried editing the wrapper doesn’t help :confused:

7

Instead of sliding Content up and down, slide #photos, #technical_details and #details up and down. You could also set some opacity transitions at the same time, to give the effect of one dissolving into the other.

By the way, your use of the H1 element is wrong. You should not be using more than one H1 element on your page. The way you’re using them, they should be H2 or H3s.

Also, you might want to consider merging your JS and CSS files into one to avoid making so many HTTP requests. There is an automatic method for this described at http://rakaz.nl

8

thanks i tried the slider but im using jquery easing plugin and im not sure what to do about that.