Ok, solution: I use lightbox v2 on my page and it uses scriptaculous. It looks like jquery and scriptaculous were having problems, so I used jQuery.noConflict. Keep in mind my javascript is pretty poor so if I’m doing this wrong, someone let me know! I also modified the css a little to make the toggle link fit better and make a larger clickable area (using padding). I figured a gray will be more visible on both white and dark backgrounds. The code now reads
/* Quick Manager + Show/Hide Link
* Version: 0.0.2
* Author: zgambino
* Updated to use jQuery.noConflict by John Boiles
*
* Description:
* Allows the QM+ editor bar buttons to be minimized to a much smaller area
* and allows you to access elements behind it like login boxes, navigation, etc.
*
* Installation:
* 1. Simply copy and paste the contents of this file into a new snippet.
* 2. Attach it to the OnWebPagePrerender system event.
* 3. Name the plugin :"QM Show/Hide Link"
* 4. Enter a description: "<strong>0.0.1</strong> Enables support for toggling the visibility of the QM editor buttons on the front end."
*
* Configuration:
* There's really ony one configuration option: Change startMin to false if you would not like the QM to start minimized.
*
* That's it! Enjoy.
*/
ob_start();
?>
<script type='text/javascript'>
var $j = jQuery.noConflict();
$j(document).ready(function () {
var startMin = true; // Change to false if you would not like the QM to start minimized.
$j('#qmEditor').append("<a href='#' onclick='return false;' id='qeToggler'>Toggle</a>");
$j('#qmEditor ul').css({"overflow":"hidden", "width":"600px"});
$j('#qmEditor').css({"overflow":"hidden"});
$j('#qeToggler').toggle(
function(){
$j('#qmEditor').animate({ width: "36px", overflow:"hidden"});
},
function(){
$j('#qmEditor').animate({ width: "100%", overflow:"hidden"});
}
).css({
'color':'gray',
'left':'0px',
'position':'absolute',
'text-decoration':'none',
'font-size':'8pt',
'top':'0px',
'padding':'0px 5px 28px 5px'
});
if(startMin){
$j('#qeToggler').trigger("click");
}
});
</script>
<?
$linkJS = ob_get_clean();
global $modx;
if(isset($_SESSION['mgrValidated']) && $_REQUEST['z'] != 'manprev') {
$output = &$modx->documentOutput;
// Place Qm head information in head, just before </head> tag
$output = preg_replace('~(</head>)~i', $linkJS . '\1', $output);
}
.
☆ A M B ☆