Developing (v7+)

Use jQuery to Hide Concrete5 Toolbar

Permalink 3 users found helpful September 29, 2011 at 9:31 AM

So the reason I did this was because I have some elements at the top of a website I'm working on that are absolutely placed and when logged in as admin I could not see them because of the C5 toolbar superseding them due to its z-index.

So, I devised, with the help of a little jQuery, a way to hide the toolbar and then slide it in/out of the page. Simply place the following into the <head></head> tags of your themes header and you should be good to go.

<?php
$cp = new Permissions($c);
if ($cp->canWrite() || $cp->canAddSubContent() || $cp->canAdminPage()) { ?>
<script>
$(document).ready(function() {
    $("#ccm-page-controls").css("top", "-50px");
<?php if (!$c->isEditMode()) { ?>
    $("body").attr("style", "margin-top: 0px !important");
<?php } ?>
    $(document).mouseover(function() {
        $("#ccm-page-controls").stop().animate({top:0},{easing:'easeInQuad', duration: 250});
   });
    $(document).mouseout(function() {
        $("#ccm-page-controls").stop().animate({top:-50},{easing:'easeOutQuad', duration: 150});
   });

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

 
<?php
$cp = new Permissions($c);
if ($cp->canWrite() || $cp->canAddSubContent() || $cp->canAdminPage()) { ?>
<script>
$(document).ready(function() {
    $("#ccm-page-controls").css("top", "-50px");
 
<?php if (!$c->isEditMode()) { ?>
    $("body").attr("style", "margin-top: 0px !important");
<?php } ?>
 
    $(document).mouseover(function() {
        $("#ccm-page-controls").stop().animate({top:0},{easing:'easeInQuad', duration: 250});
   });
 
    $(document).mouseout(function() {
        $("#ccm-page-controls").stop().animate({top:-50},{easing:'easeOutQuad', duration: 150});
   });
});
</script>
<?php } ?>

The script basically negatively positions the whole toolbar element off the page by applying a position {top: -50px} then uses the .animate() function in jQuery.ui to animate the bar in to 0px and back out to the -50px positions. There is also a inline css style applied to the body to eliminate the margin-top css that is applied by the ccm css.

Hope this helps someone as it did me.

PatrickHeck replied on Sep 29, 2011 at 9:57 am Permalink Reply

This really looks like a good method to prevent the edit bar from hiding content. Thanks for sharing that. But one question out of curiosity: Why don't you use

$c->isEditMode()

instead of

$cp->canWrite() || $cp->canAddSubContent() || $cp->canAdminPage()

vGibson replied on Sep 29, 2011 at 10:03 am Permalink Reply

Because that would only hide the bar once you have clicked edit page. I wanted it to be hidden even when no in page edit mode. :)

But, if you only wanted it hidden only during edit mode you could certainly remove the

$cp = new Permissions($c);

and replace

$cp->canWrite() || $cp->canAddSubContent() || $cp->canAdminPage()

with

$c->isEditMode()

PatrickHeck replied on Sep 29, 2011 at 11:57 am Permalink Reply

ok - didn't think about that. but it makes sense...

vGibson replied on Sep 29, 2011 at 11:59 am Permalink Reply

Just edited the original posted code... Found an issue when actually in edit mode where the bar would overlay elements that you might want to be able to edit in the header because of the removal of the body margin-top...

Changed

$("body").attr("style", "margin-top: 0px !important");

to add

<?php if (!$c->isEditMode()) { ?>
    $("body").attr("style", "margin-top: 0px !important");
<?php } ?>

notzen replied on Sep 29, 2011 at 12:06 pm Permalink Reply

uh?

I miss some piece in the last post... (my bad english)

so how it looks like the whole code block?

vGibson replied on Sep 29, 2011 at 1:23 pm Permalink Reply

Sorry about the confusion... I replaced the code from the initial post but here it is again in full...

<?php
$cp = new Permissions($c);
if ($cp->canWrite() || $cp->canAddSubContent() || $cp->canAdminPage()) { ?>
<script>
$(document).ready(function() {
    $("#ccm-page-controls").css("top", "-50px");
<?php if (!$c->isEditMode()) { ?>
    $("body").attr("style", "margin-top: 0px !important");
<?php } ?>
    $(document).mouseenter(function() {
        $("#ccm-page-controls").stop().animate({top:0},{easing:'easeInQuad', duration: 250});
   });
    $(document).mouseleave(function() {
        $("#ccm-page-controls").stop().animate({top:-50},{easing:'easeOutQuad', duration: 150});
   });

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

<?php
$cp = new Permissions($c);
if ($cp->canWrite() || $cp->canAddSubContent() || $cp->canAdminPage()) { ?>
<script>
$(document).ready(function() {
    $("#ccm-page-controls").css("top", "-50px");
 
<?php if (!$c->isEditMode()) { ?>
    $("body").attr("style", "margin-top: 0px !important");
<?php } ?>
 
    $(document).mouseenter(function() {
        $("#ccm-page-controls").stop().animate({top:0},{easing:'easeInQuad', duration: 250});
   });
 
    $(document).mouseleave(function() {
        $("#ccm-page-controls").stop().animate({top:-50},{easing:'easeOutQuad', duration: 150});
   });
});
</script>
<?php } ?>

Don't forget to click the "View entire code block" link to show all 18 lines of code...

vGibson replied on Sep 29, 2011 at 6:53 pm Permalink Reply

Another update.....

Found another small issue with the trigger event for mouseenter/mouseleave being that if you have jQuery tooltips (and I'm sure other elements could cause this behavior) but if you mouse over those tooltips it will cause the bar to hide and not come back until you go out of the browser and back in.. Changed to mouseover/mouseout and seems to have resolved it.

<?php
$cp = new Permissions($c);
if ($cp->canWrite() || $cp->canAddSubContent() || $cp->canAdminPage()) { ?>
<script>
$(document).ready(function() {
    $("#ccm-page-controls").css("top", "-50px");
<?php if (!$c->isEditMode()) { ?>
    $("body").attr("style", "margin-top: 0px !important");
<?php } ?>
    $(document).mouseover(function() {
        $("#ccm-page-controls").stop().animate({top:0},{easing:'easeInQuad', duration: 250});
   });
    $(document).mouseout(function() {
        $("#ccm-page-controls").stop().animate({top:-50},{easing:'easeOutQuad', duration: 150});
   });

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

<?php
$cp = new Permissions($c);
if ($cp->canWrite() || $cp->canAddSubContent() || $cp->canAdminPage()) { ?>
<script>
$(document).ready(function() {
    $("#ccm-page-controls").css("top", "-50px");
 
<?php if (!$c->isEditMode()) { ?>
    $("body").attr("style", "margin-top: 0px !important");
<?php } ?>
 
    $(document).mouseover(function() {
        $("#ccm-page-controls").stop().animate({top:0},{easing:'easeInQuad', duration: 250});
   });
 
    $(document).mouseout(function() {
        $("#ccm-page-controls").stop().animate({top:-50},{easing:'easeOutQuad', duration: 150});
   });
});
</script>
<?php } ?>

Don't forget to click the "View entire code block" link to show all 18 lines of code...

tomicio replied on Jan 24, 2012 at 3:09 pm Permalink Reply

Hello! Thanks for this code snippet!

I tried unsuccessfully on Concrete 5.5 but I made a remix of it to get a show/hide button that was required in my case.

To work correctly this code has to be put after the

<?php   Loader::element('footer_required'); ?>

<?php
$cp = new Permissions($c);
if ($cp->canWrite() || $cp->canAddSubContent() || $cp->canAdminPage()) { ?>
<script>
var isBarVisible = false;
$(document).ready(function() {
    $("#ccm-page-controls-wrapper").stop(true, true).hide();
   $("body").append("<div style='padding:5px;text-align:center;background:#f0f0f0;border:#909090 solid 1px; position:fixed;top:60px;left:30px;'><a style='padding:0;margin:0;line-height:100%;' href='javascript:;' id='c5showhidebarr'><img style='margin:auto' src=" + $("#ccm-logo").attr("src") + "><br><span id='c5showhidebarrtxt'>Show edit bar</span></a>");
   $("#c5showhidebarr").click(function() {
      if(isBarVisible){
         $("#ccm-page-controls-wrapper").stop(true, true).hide(200);
         $("#c5showhidebarrtxt").text("Show edit bar");
      }
      else{
         $("#ccm-page-controls-wrapper").stop(true, true).show(200);

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

 
<?php
$cp = new Permissions($c);
if ($cp->canWrite() || $cp->canAddSubContent() || $cp->canAdminPage()) { ?>
<script>
var isBarVisible = false;
$(document).ready(function() {
    $("#ccm-page-controls-wrapper").stop(true, true).hide();
   $("body").append("<div style='padding:5px;text-align:center;background:#f0f0f0;border:#909090 solid 1px; position:fixed;top:60px;left:30px;'><a style='padding:0;margin:0;line-height:100%;' href='javascript:;' id='c5showhidebarr'><img style='margin:auto' src=" + $("#ccm-logo").attr("src") + "><br><span id='c5showhidebarrtxt'>Show edit bar</span></a>");
 
   $("#c5showhidebarr").click(function() {
      if(isBarVisible){
         $("#ccm-page-controls-wrapper").stop(true, true).hide(200);
         $("#c5showhidebarrtxt").text("Show edit bar");
      }
      else{
         $("#ccm-page-controls-wrapper").stop(true, true).show(200);
         $("#c5showhidebarrtxt").text("Hide edit bar");
      }
      isBarVisible = !isBarVisible;
   });
});
</script>
<?php } ?>

I hope this can help some of you :)

vGibson replied on Jan 24, 2012 at 9:46 pm Permalink Reply

Yeah it got broken with the 5.5 update. Thanks for picking it up and posting a new version.

mikefatty replied on Jan 25, 2012 at 1:01 am Permalink Reply

Very nice stuff... thx for sharing!

Forums

Developing (v7+)

Use jQuery to Hide Concrete5 Toolbar

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?