Below please find my article (individual blog) template for Modx. Everything works fine except for the fact that my [[*pagetitle]] value is not visible. I can select it with the mouse, but it is invisible. I am using the default sample.ArticleRowTpl. Also, find below my container template as well. Does anyone know why it wont display the [[*pagetitle]] href?
Individual article blog template:
[[$blogHeader]]
[[$blogMenu]]
Blog
[[*pagetitle]]
<p class="post-info">
<span class="left">Posted on [[*publishedon:strtotime:date=`%b %d, %Y`]] by [[*publishedby:userinfo=`username`]]</span>
</p>
<br>
<div class="entry">
[[*content]]
</div>
<!--<hr />-->
<p>
[[*articlestags:notempty=`
<br>
<span class="tags left"> <b style="color: #000000">Tags: </b>[[+article_tags]]</span>
<br>
`]]
</p>
<div class="post-comments" id="comments">
<br>
[[+comments]]
<h3>Add a Comment</h3>
[[+comments_form]]
<br>
</div>
</div>
<div class="col-md-4 verticalLine">
<div class="sidemenu">
<h3>Latest Posts</h3>
<ul>
[[+latest_posts]]
</ul>
</div>
[[+comments_enabled:is=`1`:then=`
<div class="sidemenu">
<h3>Latest Comments</h3>
<ul>
[[+latest_comments]]
</ul>
</div>
`]]
</div>
</div>
<!-- end: .containter -->
[[$blogFooter]]
Blog container template
[[$blogHeader]]
[[$blogMenu]]
Blog
[[*content]]
<div class="col-md-4 verticalLine">
<div class="sidemenu">
<h3>Latest Posts</h3>
<ul>
[[+latest_posts]]
</ul>
</div>
[[+comments_enabled:is=`1`:then=`
<div class="sidemenu">
<h3>Latest Comments</h3>
<ul>
[[+latest_comments]]
</ul>
</div>
`]]
</div>
</div>
<!-- end: .containter -->
[[$blogFooter]]
I figured it out. Somehow I had a class in my .css file (which I wasnt actually using) that was causing this anomaly. It took me a while to troubleshoot, but I finally figured out which one it was and removed it. It works fine now:)
Related
When I use an anchor tag without an href="" all is good and the button style is there, the second a add an href it completely removes the anchor tag and leave only the text inside the parent div
without href:
<div class="container">
<a class="button"> my button</a>
</div>
result in browser devtools
<div class="container">
<a class="button"> my button</a>
</div>
with href
<div class="container">
my button
</div>
result in browser
<div class="container">
my button
</div>
Looks like this could be the work of the link checker. Try adding x-cq-linkchecker="skip":
<div class="container">
<a x-cq-linkchecker="skip" href="/content/mypage.html" class="button"> my button</a>
</div>
I guess it might be also related to xssconfig
as you add 'href' attribute to div in your example
<div href="/content/mypage.html" class="container">
<a class="button"> my button</a>
</div>
In general it is not allowed, therefore AEM can remove it
/libs/cq/xssprotection/config.xml
I have a component and want to give authors the option in the dialog to add a link path. If this link path is filled in, then I want the component wrapper to be an <a> tag. If it's not filled in, I want it to remain a <div>
<div class="section" data-sly-test="${!properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
Is there a cleaner way to do this than creating two separate build outs of the whole component with a data-sly-test switch? I've struggled on a lot of examples like this where the wrapping tag/div is changed by the dialog. Looking for something similar to how data-sly-element behaves on the <h2> within my code here.
There are multiple ways to achieve what you are trying to do.
Using data-sly-element and data-sly-attribute
data-sly-attribute doesn't add the attribute to the tag if the value of the attribute is empty/null. Hence, it can be used as shown below to replace the anchor tag with a div if the path is unavailable.
<a class="section" data-sly-attribute.href="${properties.path}" data-sly-element="${properties.path ? 'a' : 'div'}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
Using data-sly-unwrap
Unwrap only removes the containing tag and doesn't remove all the inner tags. Hence, this can be used as shown below.
<div class="section" data-sly-unwrap="${properties.path}">
<a href="${properties.path}" class="section" data-sly-unwrap="${!properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
</div>
Using data-sly-template and data-sly-call
This is similar to what you have initially written, but instead of duplicating the entire inner HTML, it can be moved to a template and called twice.
<div class="section" data-sly-test="${!properties.path}">
<sly data-sly-call="${tpl}"></sly>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
<sly data-sly-call="${tpl}"></sly>
</a>
<!--/* The template */-->
<template data-sly-template.tpl="">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</template>
For more information on HTL Block statements, refer this official doc.
I have written selenium code for smoke test on my MSCRM aplication. I am unable to click Ribbon Button . Action can be performed by simple click or double click.The Below two Code i have written for Button
WebElement Email = driver.findElement(By.xpath("//span[text()='Email Handling']"));
Actions action2 = new Actions(driver);
action2.moveToElement(Email).doubleClick().perform();
OR
// driver.findElement(By.xpath(".//*[#id='incident|NoRelationship|Form|fmc.incident.form.Button.EmailHandling-Medium']/span[2]")).click();
Below is HTML structure of page
<html webdriver="true">
<head>
<body scroll="no">
<noscript> <div style="padding:10px;background-color:#C9C7BA;"> <span class="warningHeader">Important:</span> <hr size="1" color="#000000"> <span class="warningDescription"> Microsoft Dynamics CRM makes <i>extensive</i> use of your Web browser's client-side abilities. You either have one of these features turned off or your security settings are set so high that they prevent these features from being used. To enable these features, change your browser settings to allow the Microsoft Dynamics CRM site to run JavaScript. Learn more. </span> </div> </noscript>
<!--[if MSCRMClient]> <script type="text/javascript"> var MS_CRM_CLIENT_OUTLOOK_INSTALLED=true; </script> <![endif]-->
<span id="crmEventManager"/>
<div id="crmHistoryManager" style="display:none;" count="1"/>
<div id="crmRecentlyViewed"/>
<div id="crmLookupMru"/>
<div id="crmTopBar" class="ms-crm-TopBarContainer ms-crm-TopBarContainerForm" style="visibility: visible; background-position: 719px 0px;">
<div id="crmRibbonManager" currentribbonelement="ribbonContainer0" style="">
<div id="ribbonContainer0" class="loaded" style="display: inline;">
<div id="Mscrm.Ribbon" class="ms-cui-ribbon" unselectable="on" aria-describedby="ribboninstructions" role="toolbar">
<span id="ribboninstruction" class="ms-cui-hidden" unselectable="on">undefined</span>
<div class="ms-cui-ribbonTopBars" unselectable="on">
<div class="ms-cui-tabContainer " unselectable="on">
<ul id="EntityTemplateTab.incident.NoRelationship.Form.Mscrm.Form.incident.MainTab" class="ms-cui-tabBody" unselectable="on" role="tabpanel" aria-labelledby="EntityTemplateTab.incident.NoRelationship.Form.Mscrm.Form.incident.MainTab-title">
<li id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Save" class="ms-cui-group" unselectable="on">
<li id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions" class="ms-cui-group" unselectable="on">
<span class="ms-cui-groupContainer" unselectable="on">
<span class="ms-cui-groupBody" unselectable="on">
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge" class="ms-cui-layout" unselectable="on">
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge-0" class="ms-cui-section" unselectable="on">
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge-0-0" class="ms-cui-row" unselectable="on">
<a id="incident|NoRelationship|Form|fmc.incident.form.Button.EmailHandling-Medium" class="ms-cui-ctl-medium " unselectable="on" href="javascript:;" onclick="return false;" aria-describedby="incident|NoRelationship|Form|fmc.incident.form.Button.EmailHandling_ToolTip" mscui:controltype="Button" role="button">
<span class="ms-cui-ctl-iconContainer" unselectable="on">
<span class="ms-cui-ctl-mediumlabel" unselectable="on">Email Handling</span>
</a>
</span>
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge-0-1" class="ms-cui-row" unselectable="on">
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge-0-2" class="ms-cui-row" unselectable="on">
</span>
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge-1" class="ms-cui-section" unselectable="on">
<span id="incident|NoRelationship|Form|Mscrm.Form.incident.MainTab.Actions-LargeMediumLarge-2" class="ms-cui-section" unselectable="on">
</span>
Can any one look into this Issue. I checked there is no frame on HTML page
I didn't got any exception but there is no action performing after click action on button
after wait of 1 min new window is opening in eclipse IDE and getting Class File Editor......Source not found Issue
I have just roughly looked at the html element via FireBug I found the top container
become like that
<div id="crmHistoryManager" style="display:none;" count="1"/> eventhough the div element ends on the same line but the fireFox has different interpretation
if we run your code, I get exception which state current element is not visible, hence you can't interact with so the FireFox has converted the given div into a top container for all other divs below.
I have a problem with creating a menu with typoscript.
This is how the menu should look in html
<div class="dropdown-menu hidden-xs" role="menu">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<header>
Item lvl2
</header>
<ul>
<li>
Item lvl3
</li>
</ul>
</div>
</div>
</div>
</div>
And I have never worked with Typoscript.
Can you please tell me how to do it?
I have created phonegap app for iPhone and iPod touch, though i use to test it on iPod touch.
Problem: The images show up randomly, else it would show a question mark within the placeholder. I have tried running this app at several places like iPhone, iPod, desktop browser (with click event, not touch). Out of which on iPod and Desktop browser it seems to run fine, whereas on iPhone or iPhone Simulator I get random images to be broken.
Its an gallery for images, thus images are most important.
Any suggestions or pointers appreciated.
Below is a sample page code:
<div id="galleryRava" >
<div id="galleryRavaScroll">
<!--gallery scroll frame-->
<!-- /header -->
<div>
<div id="galleryRavalist">
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="capsicum_rava_masala"><img src="images/sankalp/rava/capsicum_rava_masala.JPG">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Capsicum Rava Masala</span>
</a>
</div>
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="coconut_rava"><img src="images/sankalp/rava/coconut_rava.jpg">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Coconut Rava</span>
</a>
</div>
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="crispy_rava"><img src="images/sankalp/rava/crispy_rava.JPG">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Crispy rava</span>
</a>
</div>
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="kanchipuram_achari_rava"><img src="images/sankalp/rava/kanchipuram_achari_rava.jpg">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Kanchipuram achari rava</span>
</a>
</div>
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="onion_rava"><img src="images/sankalp/rava/onion_rava.jpg">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Onion Rava</span>
</a>
</div>
<div class="gallery-item">
<a href="#detailPage" >
<div class="galleryimage" id="udupi_rava"><img src="images/sankalp/rava/udupi_rava.JPG">
</div>
<div class="itemJoinBar"></div>
<span class="gallerytitle">Udipi rava</span>
</a>
</div>
</div>
<div class="clear"> <br><br><br></div>
</div>
<!-- /content -->
</div><!--gallery scroll ends here-->
</div>
It's not immediately clear where you're loading the images from. Are these images stored somewhere, online? Or are you trying to access images that are already stored on the device?
And is it correct to say that sometimes the images show up, and sometimes they do not? Have you had an instance where you've had all the images appear? Or is there always at least one image missing?