hidden a div in preview mode | Community
Skip to main content
S
samuel786431
Level 4
October 16, 2015
Solved

hidden a div in preview mode

  • October 16, 2015
  • 4 replies
  • 1406 views

Hi,

i need to hidden a div when the user clicks on the lens (preview mode).

I can't use the WCMMode.EDIT variable why the page isn't refreshed.

It seems also that doesn't exist a particular class to add to the div.

How can i do?

Thanks

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by edubey

As @lokesh suggested add below code in your init.jsp

CQ.WCM.launchSidekick("<%= currentPage.getPath() %>", { propsDialog: "<%= dlgPath == null ? "" : dlgPath %>", locked: <%= currentPage.isLocked() %>, adminUrl: "/siteadmin", previewReload: "true" });

In Sightly:

<div data-sly-test="${wcmmode.edit}">Show this only in edit mode to the author</div>

In  JSTL- JSP

<% request.setAttribute("currentMode", WCMMode.fromRequest(request)); request.setAttribute("editMode", WCMMode.EDIT); %> <c:if test="${currentMode ne editMode}"> <c:set var ="style" value = "style=\"display:none\"" /> </c:if> <div ${style}> Here is you DIV </div>

4 replies

Lokesh_Shivalingaiah
Lokesh_Shivalingaiah
Level 10
October 16, 2015

Refer [1] to reload the page when you switch the modes. After this change, as the page reloads, you can try adding your logic on preview mode.

[1] https://helpx.adobe.com/experience-manager/kb/ReloadOnWCMModeSwitch.html

edubey
edubeyAccepted solution
Level 10
October 16, 2015

As @lokesh suggested add below code in your init.jsp

CQ.WCM.launchSidekick("<%= currentPage.getPath() %>", { propsDialog: "<%= dlgPath == null ? "" : dlgPath %>", locked: <%= currentPage.isLocked() %>, adminUrl: "/siteadmin", previewReload: "true" });

In Sightly:

<div data-sly-test="${wcmmode.edit}">Show this only in edit mode to the author</div>

In  JSTL- JSP

<% request.setAttribute("currentMode", WCMMode.fromRequest(request)); request.setAttribute("editMode", WCMMode.EDIT); %> <c:if test="${currentMode ne editMode}"> <c:set var ="style" value = "style=\"display:none\"" /> </c:if> <div ${style}> Here is you DIV </div>
S
samuel786431Author
Level 4
October 16, 2015

Thanks, i have seen this document but i can't modify the libs.

I'm trying to solve this problem with js and the click function.

 

$(document).on ("click", ".cq-sidekick-preview", function (e) { e.stopImmediatePropagation(); alert("click1"); }); $(document).on ("click", ".x-tool-toggle", function (e) { e.stopImmediatePropagation(); alert("click2"); });

The first function works correctly and show the alert when the user click on the lens.

The second function doesn't work why the event is blocked from another function of cq5.

I'm trying to add a container to the  x-tool-toggle and add a function on it.

 

$(document).ready(function() {         alert("id"+$( ".x-tool-toggle" ).attr('id')); $( ".x-tool-toggle" ).wrap( "<div class='clickContainer'></div>" ); });

 

The id isn't defined so i'm trying the use the function load of jquery but:

 

$(document).load(function() { alert("function called"); });

I can't see the alert, why?

S
samuel786431Author
Level 4
October 16, 2015

The document load doesn't work but works the window load.

The alert of the window load has an id undefined. How can i wait the loading of the popup?

Terms & ConditionsAccessibility statement

Loading footer...