Developing (v7+)

If statement for jquery header load

Permalink 1 user found helpful July 07, 2010 at 2:42 AM

I'm stuck on the good ole editor not loading due to jquery colliding with itself. I'm using jquery tools for a tab switcher, however when in editor mode the toolbar doesn't load. Looking through some of the documentation I'm having a hard time finding the statement to use on my jquery tools script to only load for unregistered users so it'll load for the public users, and when you are signed in it displays each tab as it's own editable content area?

andrew replied on Jul 7, 2010 at 12:46 pm Permalink Reply

If you're in a PHP script, you can do so this way:

$c = Page::getCurrentPage();
if ($c->isEditMode()) {
   // load your javascript libraries
}

akufc replied on Jul 7, 2010 at 2:15 pm Permalink Reply

It's for my <head> statement.

<script src="http://cdn.jquerytools.org/1.2.3/jquery.tools.min.js"></script>

I want to wrap that script in an if statement. Just want it to load when the user isn't logged in so that my interface will work for the public, and for the site editor to be able to edit the content.

Currently, commenting out the script when I need to go in and adjust items during the development.

Thanks.

LukeBMM replied on Jul 7, 2010 at 2:25 pm Permalink Best Answer Reply

You could try this:

<?php
$u = new User;
if( ! $u->superUser ) {
// if not logged in as an admin, load the library
 echo('<script src="http://cdn.jquerytools.org/1.2.3/jquery.tools.min.js"></script>');
}
?>

akufc replied on Jul 7, 2010 at 2:45 pm Permalink Reply

Perfect, thank you so much.

akufc replied on Jul 7, 2010 at 7:15 pm Permalink Reply

The script works great, I tried to modify it however to work for non superusers to be able to edit still. I've repalced the $u->superUser with $->Registered however it's not working. Reason being the two site editors will be the ones maintaining the site after I've finished developing it. I've tried various variables on the Users Documentation page, am I using the wrong case perhaps? I'm on the latest build on C5 and noticed that in the documentation superUser is listed as SuperUser.

Thanks again

MrNiceGaius replied on May 27, 2011 at 6:51 pm Permalink Reply

I'm confused. If what you are trying to do is enable / disable your javascript from loading when the site is being edited vs. when the site is NOT being edited aka viewed by your 'public users' Andrew's code is what I've used for this and it's super easy:

<?php
$c = Page::getCurrentPage();
//load javascript when IN edit mode
if ($c->isEditMode()) { ?>
   <script src="your.js"></script>
<?php } ?>
OR
<?php 
//load javascript when NOT IN edit mode
$c = Page::getCurrentPage();
if (!$c->isEditMode()) { ?>
   <script src="your.js"></script>
<?php } ?>

I just wanted to ask in case I was misunderstanding your need. After reading your posts a couple times sounds like you just want your editors to be able to edit the blocks without the javascript loading but as soon as they are done editing the javascript will load and your tab switcher then kicks in?

sorry if I'm missing something?

RafaelGP replied on May 28, 2011 at 7:13 am Permalink Reply

Spot on MrNiceGaius!

That's exactly the code I was looking for.

Many thanks!

MrNiceGaius replied on May 28, 2011 at 4:43 pm Permalink Reply

Cool! That's great, BTW I like how you came up with a different way to do this... although I'm thinking your method will be of use for serving different content for different user groups etc. Definitely useful.

cheers!

info250 replied on Jul 15, 2011 at 4:03 pm Permalink Reply

i am sorry but where do i put this code exactly. (sorry i am new)

MrNiceGaius replied on Jul 15, 2011 at 5:15 pm Permalink Reply

Hi 'info250' :) This code goes into either your elements/header.php, elements/footer.php (the header & footer of your theme e.g. site/themes/yourtheme/elements/header.php). Also you can put this code into the page type templates i.e. view.php, full.php, default.php, etc.

The code allows your theme to dynamically switch code during page editing (when you click the 'edit page button'). It is useful for changing the layout, enabling / disabling javascripts for easier/smoother page editing (in addition to resolving conflicts between the c5 js libraries and any custom libraries you've used for the site, although isEditMode only switches out code when the page is put into editing mode so if you need to address js conflicts there is a solution further down on the post for that)... or switching in/out css files during editing, to name a few.

This code also can be used within blocks view.php templates as well... although I believe that is done through the blocks controller so there is a slightly different approach (I'm pretty new too :)

Cheers,

samuelbarney replied on Apr 9, 2012 at 3:21 am Permalink Reply

OMG YES MRNICEGAIUS your awesome lost this script a few weeks back saved me a lot of time.

RafaelGP replied on May 20, 2011 at 9:03 am Permalink Reply

Did anyone find a solution for this?

if(! $u->superUser){ } works great but I would like to extend this to any users editing the site, not only the superUser.

Thank you!

RafaelGP replied on May 27, 2011 at 5:06 pm Permalink Reply

I've found a way to achieve this. I hope it help others.
Here is the code:

$u = User::getByUserID($userID);
$uname=$u->getUserName();
if (strlen($uname)!=0) {
    echo('<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script><script type="text/javascript">var $j = jQuery.noConflict();</script>');
}

Maybe it isn't the most elegant solution but it is alright considering my level of PHP programming. Of course any advice to improve it is very welcome.

Cheers

RafaelGP replied on Jun 14, 2011 at 4:37 am Permalink Reply

Ok, back to square one.
My code actually doesn't work as whatever the user is logged in or not, userID's length is always 0 :-(

Although my initial reaction, MrNiceGaius' code doesn't do the trick for me as the problem is when an user is logged in, not when it's editing the page.

So this is a quick summary of the problem.

-> jquerytool conflicting with jquery. Because of this, conrete5 top bar is missing.

Solution:
Open /elements/header_required.php
Replace this line:

if ($u->isRegistered()) {
$this->addHeaderItem($html->css('ccm.base.css'), 'CORE');
$this->addHeaderItem($html->javascript('jquery.js'), 'CORE');
$this->addHeaderItem($html->javascript('ccm.base.js'), 'CORE');
} else {
   echo '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>';
}

for this one:

if ($u->isRegistered()) {
$this->addHeaderItem($html->css('ccm.base.css'), 'CORE');
$this->addHeaderItem($html->javascript('jquery.js'), 'CORE');
$this->addHeaderItem($html->javascript('ccm.base.js'), 'CORE');
} else {
   echo '<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script>
      <script type="text/javascript">var $j = jQuery.noConflict();</script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>';
}

Notice there is a jQuery.noConflict, so you will need to replace jquery-tools '$' symbol by 'j'
Example:

<script>
$j(function() {
    $j(".scrollable").scrollable({ circular: true });
});
</script>

Hope this helps future generations of jquery & jquery-tools users :-)

Cheers

TheRealSean replied on Jun 14, 2011 at 4:48 am Permalink Reply

You can load a version of JqueryTools without jQuery, this can save the checking within the header_required

though this relies on your own hosted version of js and not using the cdn

RafaelGP replied on Jun 14, 2011 at 5:23 am Permalink Reply

Well spotted!

There is actually a cdn available with a version of jquerry-tools without jquery!

Here is the new code for that:

if ($u->isRegistered()) {
$this->addHeaderItem($html->css('ccm.base.css'), 'CORE');
$this->addHeaderItem($html->javascript('jquery.js'), 'CORE');
$this->addHeaderItem($html->javascript('ccm.base.js'), 'CORE');
} else {
   echo '
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>
      <script type="text/javascript">var $j = jQuery.noConflict();</script>';
}

Cheers

boomgraphics replied on Jun 14, 2011 at 6:53 pm Permalink Reply

I am curious why you have these in your code:

if ($u->isRegistered()) {
$this->addHeaderItem($html->css('ccm.base.css'), 'CORE');
$this->addHeaderItem($html->javascript('jquery.js'), 'CORE');
$this->addHeaderItem($html->javascript('ccm.base.js'), 'CORE');

All this stuff is loaded automatically in header_required without that code.

So all you need to avoid major issues is to disable your stuff when in edit mode. You could also disable it when user is logged in, but if your js is properly written and loaded you shouldn't have any conflicts.

The following is something like what you should have in your header.
I disable custom js when in edit mode, I enable css when user can edit things, and I enable another bit of css when the page id is ==1 so that I can style the first link, and still use the nav-path-selected on the other links for usability.

It sets the global variable at the start of the page.

Then I have some header logic, such as making the nav area editable, unless there is a block named Header_Nav and then it uses that block. Same logic in the logo area. I also wrote a javascript function that styles the first word of any sentence, so I could use the SITE variable and still have two separate colors and styles in the logo. Then if they create a global image block with the name Logo the template will use that image instead. Note, this code is only a simple example, but you can maybe get some ideas.
Hope it helps!

PS, So far I have zero conflict issues with my code.(don't know about IE yet, as I use a mac...).

<?php defined('C5_EXECUTE') or die("Access Denied.");
global $c; ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="<?php echo $this->getThemePath() ?>/blueprint/screen.css" type="text/css" media="screen, projection" />
        <link rel="stylesheet" href="<?php echo $this->getThemePath() ?>/blueprint/print.css" type="text/css" media="print" />
        <!--[if lt IE 8]><link rel="stylesheet" href="<?php echo $this->getThemePath() ?>/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
        <link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getThemePath() ?>/main.css" />
        <link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css') ?>" />
        <?php
        Loader::element('header_required');
        $cp = new Permissions($c);
        if ($cp->canAdmin() && $cp->canAddSubContent()) {
            print "<link rel=\"stylesheet\" href=\"" . $this->getThemePath() . "/interface-theme/interface.css\" type=\"text/css\" media=\"screen, projection\" />";

Viewing 15 lines of 71 lines. View entire code block.

 
<?php defined('C5_EXECUTE') or die("Access Denied.");
global $c; ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="<?php echo $this->getThemePath() ?>/blueprint/screen.css" type="text/css" media="screen, projection" />
        <link rel="stylesheet" href="<?php echo $this->getThemePath() ?>/blueprint/print.css" type="text/css" media="print" />
        <!--[if lt IE 8]><link rel="stylesheet" href="<?php echo $this->getThemePath() ?>/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
        <link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getThemePath() ?>/main.css" />
        <link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css') ?>" />
        <?php
        Loader::element('header_required');
        $cp = new Permissions($c);
        if ($cp->canAdmin() && $cp->canAddSubContent()) {
            print "<link rel=\"stylesheet\" href=\"" . $this->getThemePath() . "/interface-theme/interface.css\" type=\"text/css\" media=\"screen, projection\" />";
        }
        if (!$c->isEditMode()) {
            print "<script type=\"text/javascript\" src=\"" . $this->getThemePath() . "/js/jquery.tools.min.js\"></script>
                   <script type=\"text/javascript\" src=\"" . $this->getThemePath() . "/js/jquery.boom.js\"></script>
                   <script type=\"text/javascript\" src=\"" . $this->getThemePath() . "/js/cufon-yui.js\"></script>
                   <script type=\"text/javascript\" src=\"" . $this->getThemePath() . "/js/Nunito_400.font.js\"></script>
                   <script type=\"text/javascript\">Cufon.replace('#pw h1, #pw h2, #pw h3, #pw h4, #pw h5, #pw h6, #pw .sign-in, #pw th, #pw a, #pw .cufon', {hover: 'true', fontFamily: 'Nunito'});</script>";
        }
        if ($c->getCollectionID() == 1) {
            echo '<style type="text/css">
                #header ul.nav li:first-child a {
                background-color: #e5e8d9;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                }
                </style>';
        }
        ?>
    </head>
    <?php
    $cp = new Permissions($c);
    if ($cp->canAdmin() && $cp->canAddSubContent()) {
        echo '<body style="background-position: 0 50px;" class="' . $c->getCollectionHandle() . '">';
    } else {
        echo '<body class="' . $c->getCollectionHandle() . '">';
    }
    ?>
    <div id="pw">
        <div id="header" class="container">
            <div class="s11">
                <a href="<?php echo DIR_REL ?>/">
                    <?php
                    $block = Block::getByName('Logo');
                    if ($block && $block->bID) {
                        $block->display();
                    } else {
                        ?>
                        <span class="headerImage"><?php echo SITE; ?></span>
                        <?php
                    }
                    ?>
                </a>
            </div>
            <div class="s13 last">
                <?php
                $block = Block::getByName('Header_Nav');
                if ($block && $block->bID)
                    $block->display();
                else {
                    $a = new Area('Header_Nav');
                    $a->display($c);
                }
                ?>
            </div>
        </div>

:-)

MrNiceGaius replied on Jun 14, 2011 at 7:54 pm Permalink Reply

For the sake of clarity,

From Boomgraphics code:

$cp = new Permissions($c);
if ($cp->canAdmin() && $cp->canAddSubContent()) {
//javascripts to run when user is logged in to edit the site
}

Load scripts when logged in to edit the site rather than load scripts if you're in edit mode on a particular page.

Is this not what you are trying to do?

boomgraphics replied on Jun 15, 2011 at 2:20 am Permalink Reply

Yes, my intention was to only include the additional CSS if the edit bar was across the page.
I am going to start a new thread about the header.php.

MrNiceGaius replied on Jun 15, 2011 at 5:06 am Permalink Reply

Oops sorry, I meant to direct my question towards RafaelGP, I was still trying to help ... the header.php file you posted is cool I just was trying to make sure it was clear which particular snippet was doing the magic :)

boomgraphics replied on Jun 15, 2011 at 6:25 am Permalink Reply

Ah, it's cool. I figured I had accidentally hijacked the thread. To do what you were asking about, I have changed my code to this so it's less specific than the old version:

global $cp;
        if (is_object($cp) && ($cp->canWrite() || $cp->canAddSubContent() || $cp->canAdminPage())) {
            echo ('<link rel="stylesheet" href="' . $this->getThemePath() . '/interface-theme/interface.css" type="text/css" media="screen, projection" />');
        }

That will echo the stylesheet (or whatever) whenever you have the edit bar across the top of the page. I use this to override the edit bar css and style it to match my theme, or you could use it to replace the default concrete5 logo with your own logo using CSS.
That is also the reason I had placed it beneath the header_include bit, since the header_include adds all the base css files I want to override. Hope that helps!

MrNiceGaius replied on Jun 15, 2011 at 6:58 am Permalink Reply

Perfect. That should be the best answer of this entire thread :)

Nice tip for customizing the edit toolbar too. Thanks!

RafaelGP replied on Jul 8, 2011 at 12:25 pm Permalink Reply

Thank you very much to you two for the help, and sorry for the late reply.
I've been really busy, but now I finally have some time to write a post properly. It's going to be a long one, but I hope it will clear any doubts.

I think there is a confusion understanding that the problem happens when an user is Logged in, not when it's in Edit mode. I'll try to explain it better this time.

The problem:
jQuery and jQuery Tools conflicting, and as a result, the edit bar is not displayed when an user is Logged in.

Please notice the problem is nothing to do with being in Edit mode. It is actually before that, as the user cannot enter in Edit mode, because the top bar is not there! :-)
I thought MrNiceGaius code was the perfect solution, but it didn't work as the problem happens before enter Edit mode. It happens in Logged in mode. I hope everything is clear now.

In a summary, this is exactly what I'm looking for:

1 - When the web page is in normal mode (no one is logged in): jQuery and jQuery Tools load in a way that they don't conflict. To achieve this, they need to be loaded in the following order:

jQuery
jQuery Tools
jQuery.noconflict

2 - When either, a super user or a no super user, are Logged in: Concrete 5 works. I only ask for that :-) Everything in header_required, including jQuery, loads and the bar at the top is displayed. I don't really bother if jQuery Tools is loaded or not. I don't care. C5 is the priority :-)

Being in Logged in mode, this doesn't work, I don't know why:

HeaderRequired (which includes jQuery)
jQuery Tools
jQuery.noconflict

So I stop trying adding things into the template, and I decided attack the header_required.php file in order to do NOT load jQuery Tools when an user is logged in.

This:

<?php
$u = new User;
if( ! $u->superUser ) {
// if not logged in as an admin, load the library
 echo('<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script>');
}
?>

does the trick, but ONLY when the user is a Super user.

Boomgraphics code, thank you very very much for trying to help, but is not what I'm looking for:

- Firstly, when I tried, it only loaded the scripts when the user was a super user.
- Secondly, what it does, is loading scripts in Logged in mode, and what I need is NOT load jQuery Tools.

Boomgraphics, you mentioned that 'All this stuff is loaded automatically in header_required without that code.' Sorry but it doesn't. If I remove this:

if ($u->isRegistered()) {
$this->addHeaderItem($html->css('ccm.base.css'), 'CORE');
$this->addHeaderItem($html->javascript('jquery.js'), 'CORE');
$this->addHeaderItem($html->javascript('ccm.base.js'), 'CORE');

it doesn't load jQuery. Remember that my code is in header_required.php, not in a template.

So I came up with this code:

if ($u->isRegistered()) {
$this->addHeaderItem($html->css('ccm.base.css'), 'CORE');
$this->addHeaderItem($html->javascript('jquery.js'), 'CORE');
$this->addHeaderItem($html->javascript('ccm.base.js'), 'CORE');
} else {
   echo '<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script>
      <script type="text/javascript">var $j = jQuery.noConflict();</script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>';
}

It might not look pretty, but it does what I need (see the points 1 and 2 above mentioned).
I'm actually surprised there aren't more users facing this problem (jQuery + jQuery Tools + non super user logged in).

Anyway, if anyone thinks that my piece of code sucks or that what I want to achieve can be done in a more efficient and professional way, please please let me know. I'm open to any suggestion as long as it works.

Sorry for the long post and once again sorry if I didn't explain my problem better at the first instance.

My best regards

Rafael

boomgraphics replied on Jul 8, 2011 at 2:30 pm Permalink Reply

Actually your issue with jquery conflicting isn't hard to fix. I heartily recommend using the tools version that does not have jquery in it. :-)

Second, I don't recommend modifying the header_required.php, since everything can be done in the theme itself.

I wrote a javascript that make blocks into tabs using jquery.tools.min.js, along with my own javascript. This is great, but not so cool when you have to edit the page. So my php, in my header.php which is in my theme, removes the javascript when I am in edit mode. Problem solved.

$themePath = $this->getThemePath();
if (!$c->isEditMode()) {
echo '<script type="text/javascript" src="' . $themePath . '/js/js.php"></script>';
}

That logic is the only thing you need. Everything else you are having issues with is because you are trying to load two versions of jquery. Get the version of jquery tools that doesn't have jquery in it, then load jquery.tools beneath header_required in your theme. I am using jquery tools along with a few other scripts with zero issues, without modifying header_required.php.

boomgraphics replied on Jul 8, 2011 at 2:35 pm Permalink Reply

Also, yes I thought you were talking about the theme header not the header_required.php file when I said everything was included automatically. :-)

Forums

Developing (v7+)

If statement for jquery header load

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?