Does SiteCake disable JS when logged in? Need to be able to edit "Pop-up" content

integration
#1

All,

I’m still having trouble getting SiteCake to edit site content that is not available until click, like a “Pop-Up / Modal Window”

SCENARIO:

<div class="sc-content">
    <button id="trigger-modal-window">Click me to open Modal</button>
</div>

<div id="modal-window" class="sc-content">
    <!-- Images and Text Go Here -->
</div>

When logged into SiteCake, I can edit the text on the <button> but clicking on it, does not load the modal window. I have also tried removing “sc-content” from the <button> to trigger the window but it almost seems as if SiteCake disables JS from running.

Any help would be appreciated! Client LOVES SiteCake and would love to continue to use it. Thanks for all the hardwork gents. Truly an awesome platform! Cheers!

#2

Hi,

I have a hint for you, if JS is disabled in the editor only then set your popup to display: block so that it appears in the editor and use javascript to hide it, so that it won’t appear outside the editor.

#3

Thank you Max! So does SiteCake disable JS? I wasn’t quite sure, it just seems like it. Also, there are multiple pop-ups in one page. So I’d have to do more than just display: block; I’d have to position: relative; them so they can stack on top of each other when logged in via SiteCake.

Here is the site for reference: http://verticalfixproductions.com/the-experience.html

There are 4 pop-ups, each with a different content set (image and text). Do you think SiteCake is meant for “flat” websites like blogs or simple pages or does it extend to modals / carousels / accordions as seen in the more popular frameworks like jQueryUI / Bootstrap / Foundation?

Thank you!

#4

From my point of view it is most suitable for static websites without that much interactivity.

Concerning your popups just put them in the html one after the other at the bottom of your page and give them an absolute positioning with JS after that, this is the only way to achieve it

#5

Thanks!

Could I do something like this? [ http://sitecake.com/docs/include-javascript-with-sitecake-template.php ]

LOGIC: IF logged into SiteCake (verified by URL string), run JS (which would be .addClass to show all modals stacked on top of each other).

<script type="text/javascript">
    $(function() {
        if (window.sitecakeGlobals && sitecakeGlobals.editMode !== true ) {
            $.getScript('js/yourscript.js');
            // Run JS to add classes to all modals so that they are visible to the client for editing
        }
    });
</script>
#6

I solved a similar issue (needed to edit content which was only visible after clicking “see more” button) by appending a query string to the URL while editing. While this query string is in use, the target content is assigned the class it needs to be visible on page load.

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

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
	    name = name.replace(/[\[\]]/g, "\\$&");
	    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

// query string: ?show=all
var queryString = getParameterByName('show'); // "show all"

if ( queryString.length ) {
	$('.all-videos .row').addClass('open');
}

});
#7

that should have been

 if ( queryString === 'all' ) {