Use jQuery to Hide Concrete5 Toolbar

Permalink 3 users found helpful
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});
   });


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.

vGibson
View Replies:
PatrickHeck replied on at Permalink Reply
PatrickHeck
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 at Permalink Reply
vGibson
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 at Permalink Reply
PatrickHeck
ok - didn't think about that. but it makes sense...
vGibson replied on at Permalink Reply
vGibson
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 at Permalink Reply
notzen
uh?

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

so how it looks like the whole code block?
vGibson replied on at Permalink Reply
vGibson
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});
   });


Don't forget to click the "View entire code block" link to show all 18 lines of code...
vGibson replied on at Permalink Reply
vGibson
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});
   });


Don't forget to click the "View entire code block" link to show all 18 lines of code...
tomicio replied on at Permalink Reply
tomicio
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);


I hope this can help some of you :)
vGibson replied on at Permalink Reply
vGibson
Yeah it got broken with the 5.5 update. Thanks for picking it up and posting a new version.
mikefatty replied on at Permalink Reply
mikefatty
Very nice stuff... thx for sharing!