Jump to content

Colorbox Wont Show Up


PHoutenbos

Recommended Posts

I have a problem.
I have followed the video course and the full code adopted.
I still do not have a login box and the colorbox does not seem to work.
i also get a syntax error with noconflict

below my code:

<Link href = "<php ​​echo APP_RESOURCES;?> Css / fp_style.css" media = "screen" rel = "stylesheet" type = "text / css" />

<script type="text/javascript" src="http://code.jquery.c...n.js"> </ script>
<script type="text/javascript"> $ noConflict (). </ script>

<Script type = "text / javascript" src = "<php ​​echo APP_RESOURCES;?> Javascript / colorbox / colorbox.js"> </ script>
<Link href = "<php ​​echo APP_RESOURCES;?> Javascript / colorbox / colorbox.css" media = "screen" rel = "stylesheet" type = "text / css" />

</ Script>


Does anyone know what the problem could be?

Link to comment
Share on other sites

Why are there so many random spaces in your code? Before and after "/", and "="? After the "$" in "$noConflict()" and before the "()"? These sort of things cause problems and unexpected behavior. Make sure you're following my code regarding formatting. Also, though I'm not really sure if this would cause a problem or not (may depend on the browser), stick to all lower case for <script> and <link> opening/closing tags.

 

For the noconflict, make sure you're formatting the line based on my example. You can't have spaces after the "$" or before the "()" and expect it to work properly. If you're still having trouble, see http://api.jquery.com/jquery.noconflict/.

 

As for the Colorbox issue -- assuming here that you fix the above issues -- if it still isn't working, you'll need to see the videos near the end of the course where I update ColorBox and the TinyMCE scripts. Unfortunately, updates to those scripts since I originally recorded the series have caused problems.

Link to comment
Share on other sites

Why are there so many random spaces in your code? Before and after "/", and "="? After the "$" in "$noConflict()" and before the "()"? These sort of things cause problems and unexpected behavior. Make sure you're following my code regarding formatting. Also, though I'm not really sure if this would cause a problem or not (may depend on the browser), stick to all lower case for <script> and <link> opening/closing tags.

 

For the noconflict, make sure you're formatting the line based on my example. You can't have spaces after the "$" or before the "()" and expect it to work properly. If you're still having trouble, see http://api.jquery.com/jquery.noconflict/.

 

As for the Colorbox issue -- assuming here that you fix the above issues -- if it still isn't working, you'll need to see the videos near the end of the course where I update ColorBox and the TinyMCE scripts. Unfortunately, updates to those scripts since I originally recorded the series have caused problems.

 

The gaps are created by adding the code in the text editor in this forum so not in the script 
 
Tonight I will have a look at the new video. 
otherwise I just start the course again maybe I'm forgetting something
Link to comment
Share on other sites

Okay! login functionality is working correctly, I can log in and log out.

But then I have in browser or enter the full path as CMS / app / login.php.

This window would be opened but not with colorbox. I'm even further as video 20 because I did not get the colorbox working function. I have latest updated version controlled unfortunately this has not worked.

 

syntax error with noconflict remains active. But if I move the script files then I lost this syntax error example is

<Link href = "<php ​​echo APP_RESOURCES;?> Css / fp_style.css" media = "screen" rel = "stylesheet" type = "text / css" />

 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"> </ script>

 

<Script type = "text / javascript" src = "<php ​​echo APP_RESOURCES;?> Javascript / colorbox / colorbox.js"> </ script>

 

<script type="text/javascript"> $ noConflict (). </ script>

 

 

<Link href = "<php ​​echo APP_RESOURCES;?> Javascript / colorbox / colorbox.css" media = "screen" rel = "stylesheet" type = "text / css" />

 

<script type="text/css">

 

jQuery (document). ready (function ($) {

 

$. Colorbox ({

transition: 'fade',

initial width: '50px "

initial height: '50px "

scrolling: false,

opacity: .6,

href: '<php echo site_path;? > App / login.php "

});

 

});

 

</ Script>

 

the background of the title tag <h1> also get suddenly the css style along with the v_login.php fp_style and get a green background

Link to comment
Share on other sites

<link href="<?php echo APP_RESOURCES; ?>css/fp_style.css" media="screen" rel="stylesheet" type="text/css" />

 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script type="text/javascript">$.noConflict();</script>

 

<script type="text/javascript" src="<?php echo APP_RESOURCES; ?>javascript/colorbox/colorbox.js"></script>

<link href="<?php echo APP_RESOURCES; ?>javascript/colorbox/colorbox.css" media="screen" rel="stylesheet" type="text/css" />

 

<script type="text/css">

 

jQuery(document).ready(function($) {

 

$.colorbox({

transition: 'fade',

initialWidth: '50px',

initialHeight: '50px',

scrolling: false,

opacity: .6,

href: '<?php echo SITE_PATH; ?>app/login.php',

});

 

});

 

</script>

Link to comment
Share on other sites

No, there are no errors in the JS console.

Jquery and colorbox.js are loaded correctly. 

It even load the cbox divs when i enter ?login. 

 

<html>
 
    <head></head>
    <body class="home ">
        <div id="wrapper"></div>
        <div id="cboxOverlay" style="display: none;">
        </div>
        <div id="colorbox" class="" role="dialog" tabindex="-1" style="display: none;"></div>
    </body>
 
</html>
Link to comment
Share on other sites

Is there a place where I can see this project live, online? Or can you zip up everything so I can take a look at it? It's probably going to be easier for me to look at the entire project at once -- with a complex project like this, with many moving parts and files that work together, sometimes that's the only way to debug.

 

(I'm going to be gone a lot of this weekend, so if I don't respond, I'll do my best to get back to you on Monday.)

Link to comment
Share on other sites

OK, got your initial problem solved. In your t_login.php template (app/core/templates), you used:

 

<script type="text/css">
 
whereas it should be:
 
<script type="text/javascript">
 
This causes an issue with Javascript, since it isn't sure how to handle the type text/css, and it doesn't understand that the code within that block should be Javascript. You actually posted that code above, but unfortunately I didn't figure it out till I could see the system in action. Once you fix that, Colorbox should start to work for you.
 
 
 
However, second issue, that you'll spot as soon as you fix that... you'll run into a "undefined is not a function" javascript error, pointing to line 24 in v_login.php. jQuery depreciated the "live" function I had been using in a couple places in the course at some point after I recorded the series. Instead, later versions of jQuery use "on" (http://api.jquery.com/on/). So make sure in the spots where I use "live" (for example, in v_login.php"), you switch out "live" for "on":
 
So not this:
 
$('#fp_cancel').live('click', function(e){
 
but use this: 
 
$('#fp_cancel').on('click', function(e){
 
If you run into Javascript errors, that's something you'll want to check for. This is something I went through and fixed in a updated video at the end of the course, showing how to use the latest versions of the various scripts, but unfortunately you'll run into it if you try to use the latest version of jQuery.
 
Hope that helps get you moving again.
Link to comment
Share on other sites

  • 2 months later...

Fair enough -- that's just an old habit on my part. But the point is, in your version, you were telling the browser that the file contained CSS by setting the type to text/css.

No, I can appreciate the old habits part. 

I was honestly curious as to the necessity of it, as I was currently trying to solve a different problem within that same series (since resolved).

Thanks for the clarification, Ben.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...