basically guys i will like to layout a website with dojo where by i will have a header, content area ( this is divided in two with some accordions in the left pane and the right for the main content) then a footer.
since i need the site to always have this layout i decided to put it in the master layout. however when i view the site, i see the default index page alright but its not in the pane as i was hoping and none of the dijit widgets gets rendered.
not sure if pasting large code in a post is allowed if not i am sorry but below is the code for the master layout. i have not done much to the default zend tool structure. i have only created a couple of modules:
<?php
Zend_Dojo::enableView($this);
$this->dojo()->setCdnBase(Zend_Dojo::CDN_BASE_GOOGLE)
->addStyleSheetModule('dijit.themes.tundra')
->setDjConfigOption('parseOnload', TRUE)
->setDjConfigOption('locale', 'en-GB')
->setDjConfigOption('isDebug', TRUE);
echo $this->dojo();
?>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.AccordionContainer");
</script>
</head>
<body>
<div dojoType="dijit.layout.BorderContainer" gutters="true" id="borderContainer">
<div id="header" dojoType="dijit.layout.ContentPane" region="top" splitter="false">
<div id="logo">
<img src="/images/logo.gif" />
</div>
<div id="menu">
HOME
SERVICES
CONTACT
</div>
</div><!-- end header -->
<div dojoType="dijit.layout.BorderContainer" liveSplitters="false" design="sidebar"
region="center" id="content">
<div dojoType="dijit.layout.AccordionContainer" minSize="20" style="width: 300px;"
id="leftAccordion" region="leading" splitter="true">
<div dojoType="dijit.layout.AccordionPane" title="One fancy Pane">
</div>
<div dojoType="dijit.layout.AccordionPane" title="Another one">
</div>
<div dojoType="dijit.layout.AccordionPane" title="Even more fancy" selected="true">
</div>
<div dojoType="dijit.layout.AccordionPane" title="Last, but not least">
</div> <!-- end AccordionContainer -->
</div>
<div dojoType="dijit.layout.TabContainer" region="center" tabStrip="true">
<div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
<?php echo $this->layout()->content ?>
</div>
<div dojoType="dijit.layout.ContentPane" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true">
Lorem ipsum and all around - last...
</div>
</div>
</div>
<div id="footer">
<p>Created with Zend Framework. Licensed under Creative Commons.</p>
</div><!-- end footer -->
</div>
You have a typo when setting your dojo config options. Instead of
->setDjConfigOption('parseOnload', TRUE)
it needs to be
->setDjConfigOption('parseOnLoad', TRUE)
Watch the uppercase 'L'. If you fix this then at least the dojo parser will do it's job.
Didn't check if your layout is OK, see the comment of Ken.
Related
So i was making a project tribute page and as i started to write the css i was first checking it with firefox device toolbar, but when i opened the same code on chrome the image that i had given a img-fluid class was taking up its original full width (1065px)
The div #content is inside a div with .container-fluid
this is how it looks on chrome
this is how it looks on firefox
<div id="content" class="container">
<div id="Home" class="container mx-auto">
<div id="title">
<p>a tribute to</p>
<h1>Joan Didion</h1>
<p id="date">1934 - 2021</p>
</div>
<div id="head-img">
<figure>
<img src="images/didion-edit.webp" alt="image of joan didion" class="img-fluid">
<figcaption>Joan Didion by Mary Lloyd Estrin.</figcaption>
</figure>
</div>
<div id="description">
<figure>
<blockquote><p>I write entirely to find out what I’m thinking, what I’m looking at, what I see and what it means. What I want and what I fear.</p></blockquote>
<figcaption>Why I Write</figcaption>
</figure>
</div>
</div>
edit: okay so i started to add elements to a new file to see when the error would start to occur and it happened when I pasted the section that follows #Home which is #Bio.
I will edit the code so you can see the following section because i still dont know why it's causing the issue
/*I'll take away the css because none of it proved to be an issue*/
<div class="container-fluid">
<!-- there's a nav div here but it doesnt cause issues-->
<div class="container-fluid" id="content">
<div id="Home" class="container mx-auto">
<div id="title">
<p>a tribute to</p>
<h1>Joan Didion</h1>
<p id="date">1934 - 2021</p>
</div>
<div id="head-img">
<figure>
<img src="images/didion-edit.png" alt="image of joan didion" class="img-fluid">
<figcaption>Joan Didion by Mary Lloyd Estrin.</figcaption>
</figure>
</div>
<div id="description">
<figure>
<blockquote><p>I write entirely to find out what I’m thinking, what I’m looking at, what I see and what it means. What I want and what I fear.</p></blockquote>
<figcaption>Why I Write</figcaption>
</figure>
</div>
</div>
<!--the #Bio has three .achivement elements but even if its just one and the figure element the issue occurs-->
<div id="Bio" class="container">
<div id="summary">
<h1>Her life</h1>
<div class="achivement">
<ul>
<li>The iconic writer got her start when she won Vogue's "Prix de Paris" contest and got a job opportunity in the magazine's
New York office as price for one month. Once there, she got a permanent position after writing a seminal article on self-respect on the fly after the reporter that was supposed to make the assignment failed to deliver a complete article. She worked at the famed magazine for years after that.</li>
</ul>
<blockquote cite="https://www.nytimes.com/1976/12/05/archives/why-i-write-why-i-write.html">
<p>
" Had I been blessed with even limited access to my own mind there would have been no reason to write. I write entirely to find out what I'm thinking, what I'm looking at, whot I see and what it means."
</p><cite>-- Joan Didion on her "Why I Write" article for the New York Times</cite>
</blockquote>
</div>
<figure>
<img src="images/tradlands-flickr.jpg" alt="joan didion in later years">
<figcaption>Didion by Irving Penn.</figcaption>
</figure>
</div>
</div>
</div>
</div>
Try adding the rule in your css file:
<style>
figure .img-fluid {
width: 100%;
}
</style>
I'm pretty sure it will work for you.
So after taking off and adding elements one-by-one I realized that an image on the section that followed the #Home div didn't have .img-fluid
I don't know why that wasn't an issue on firefox but I've tested the code on both browsers and it's working properly.
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.
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:)