I'm using class=colorbox-load in a few links at http://bsi.echoleaf.com. They work in the 3 links at the top right (login/register/contact us), but if you go into an interior page & scroll down to the comment area they don't work. They do work fine in Firefox & Chrome, but the behavior is odd in IE7/8/9 - the colorbox displays then shrinks to what looks like just the 4 corners.

As these are login/register links, they do redirect so perhaps IE has a problem with that?

Comments

Bricks and Clicks Marketing’s picture

It seems that using 'class="colorbox-inline" also does not work in IE, resulting in a blank window with the correct background color, but the content is not in the page source at all either.

Bricks and Clicks Marketing’s picture

To clarify, I'm having two separate problems with IE 7/8/9:

1) colorbox-inline not working - see Login/Register links at top right of all pages at http://bsi.echoleaf.com

2) colorbox-load not working in *some* links:
- working: Contact Us links at top right of all pages at http://bsi.echoleaf.com
- not-working: Comment area Login/Register links on all interior pages, like http://bsi.echoleaf.com/news/test-blog-entry

The examples at http://colorpowered.com/colorbox/ seem to work fine on IE, so I'm surmising an issue with either the Colorbox module or a conflict with another module.

frjo’s picture

Category: bug » support

You should *not* use colorbox-inline, that is for opening "inline" content in an Colorbox.

Colorbox load has this help text on the Colorbox configuration page:

This enables custom links that can open forms and paths in a Colorbox. Add the class "colorbox-load" to the link and build the url like this for forms "/colorbox/form/[form_id]?width=500&height=500" and like this for paths "[path]?width=500&height=500&iframe=true". If you do not want the box to persist set iframe to false.

Instead of crating custom page templates for user/login, user/register etc. my recommendation is to just ask Colorbox to load the forms directly.

<a class="colorbox-load" href="/colorbox/form/user_register?destination=user&width=500&height=300">Create new account</a>

<a class="colorbox-load" href="/colorbox/form/user_login?destination=user&width=500&height=300">Login</a>

<a class="colorbox-load" href="/colorbox/form/contact_mail_page?destination=user&width=500&height=300">Contact</a>
Bricks and Clicks Marketing’s picture

OK, I will try that and report back.

Bricks and Clicks Marketing’s picture

Thank you so much for enlightening me - they work fine across all browsers! And I'm quite happy since I learned something new too :) Three cheers for you!

frjo’s picture

Component: User interface » Documentation
Assigned: Unassigned » frjo
Status: Active » Fixed

Glad you got it working.

Bricks and Clicks Marketing’s picture

Component: Documentation » User interface
Assigned: frjo » Unassigned
Category: support » bug
Status: Fixed » Active

Ah - almost forgot the last part. I'm using PHP to create the link and adding '?width=400&height=250' to the end of url results in a link like this:
/colorbox/form/user_login%253Fwidth%3D400%2526amp%3Bheight%3D250?destination=node%2F24

Here's the php that is being used to generate the link:

$options = array(
				'attributes' => array('class' => 'colorbox-load'),
				'query' => drupal_get_destination(),
				);
  			print l('Login', 'colorbox/form/user_login',  $options);

Any suggestions for adding the sizing parameters? I'm going to keep searching for a solution to the character issue too.

frjo’s picture

Assigned: Unassigned » frjo
Category: bug » support

@arphaus, the width and height are part of the query.

Something like this should work (not tested):

$query = array(
 'width' => '400',
 'height' => '250',
);
$query += drupal_get_destination();

$options = array(
  'attributes' => array('class' => 'colorbox-load'),
  'query' => $query,
);

print l('Login', 'colorbox/form/user_login',  $options);
Bricks and Clicks Marketing’s picture

Thanks - someone cleared it up for me in the forums. You're right that it is part of the query - this worked:

$options = array(
   'attributes' => array(
   'class' => 'colorbox-load'
),
'query' => array(
   'destination' => drupal_get_destination(),
   'width' =>500,
   'height' => 600,
),
);
print l('Register', 'colorbox/form/user_register', $options);

Thanks again - I appreciate your help :)

frjo’s picture

Status: Active » Fixed
Bricks and Clicks Marketing’s picture

I have another question on this method - where are the error messages? If I enter a username & incorrect password, I get a white screen with an unstyled form. Once I get the password right, I a get a normal error page showing the errors and the destination does not work as well:

* Sorry, unrecognized username or password. Have you forgotten your password?
* Sorry, unrecognized username or password. Have you forgotten your password?
* The page you requested does not exist. For your convenience, a search was performed using the query destination node 73.

Making the form open directly is no good if the error messages don't show to help users. I just checked and if I try to register and the passwords don't match, all I get is the white page with the unstyled form. Unless you have a solution, I'm back to the drawing board.

Bricks and Clicks Marketing’s picture

Status: Fixed » Active
Bricks and Clicks Marketing’s picture

This is from an older post I found online but it touches on the issue:

Your first impulse might be to just send the output of drupal_get_form() to the modal. While this would display the form in the modal, it would not handle all of the submission and validation properly.

from http://zroger.com/node/31

Bricks and Clicks Marketing’s picture

So - any idea why there would be problems on IE with the modal window shrinking down to just the 4 corners? If I hadn't had a problem with IE than I would not have been here at all.

hutch’s picture

Just a thought, do you have the most recent colorbox (the js that is) in your libraries directory. There was a problem a while back with older versions of colorbox.js from http://colorpowered.com/colorbox/

If you are getting an unstyled page then this is probably because colorbox is not loaded, check your source html.
Check the list in colorbox configuration for when it does *not* load

Bricks and Clicks Marketing’s picture

Here is what works & does not in IE, which can be seen at http://bit.ly/hJnvPv

At top right of page:
Works: <a href="user/login?width=400&height=240&destination=interview_advice.htm&iframe=false" class="colorbox-load">Login</a>
Does *not* work: <a href="user/register?width=700&height=400&destination=interview_advice.htm" class="colorbox-load">Register</a>
IE won't display the content of the colorbox without an ifram=false or iframe=true. This would be fine except iframe=false does NOT work.

In comment areas:
Works: <a class="colorbox-load" href="/colorbox/form/user_login?destination=node%2F61%23comment-form">Login</a>
Works: <a class="colorbox-load" href="/colorbox/form/user_register?destination=node%2F61%23comment-form">register</a>
These are great - except calling the forms directly = no error messages.

I hope someone has some concrete suggestions - I had so imagined that IE problems had mostly gone to rest with IE6...

Bricks and Clicks Marketing’s picture

Status: Active » Closed (fixed)

I appreciate the help. Switched to automodal instead.