I'm showing this thought a different URL using Dreamhost's tool for this, which, I understand, puts the whole site in a frame.
(This is the URL I serve from http://communikate.equalitytime.co.uk/)
My issue is that the links all try and open within the frame, even when that isn't helpful. More to point, linking page to Github fails because "Load denied by X-Frame-Options" (which is udnerstandable).
My question is - how can I ensure that any external links that are opened within the frame, open outside the frame?
Dreamhost's tool for this, which, I understand, puts the whole site in a frame.
That seems somewhat bizarre, you may want to contact the host about why / how they are doing this. It seems strange that they would want to have all links in a frameset. This seems like very undesirable behavior.
how can I ensure that any external links that are opened within the frame, open outside the frame?
The best way to do this is set target="_top" in the anchor elements, so you'd have to modify the HTML. For example:
<a target="_top" href="https://github.com/joereddington/CommuniKate" class="btn btn-default btn-lg">
<i class="fa fa-github fa-fw"></i>
<span class="network-name">github</span>
</a>
Alternatively you could write some JavaScript to set this on all anchor elements instead of adding it to the elements individually.
Related
I can't seem to get Watir to locate a link on a page, which reveals another two fields. But, the link isn't a link, but a li that is a legend:
<li>
<legend role="button" tabindex="1" id="alpha-trigger" class="trigger legend shown " aria-label="alpha Search"" for="alpha">
Alpha Search
</legend>
</li>
I've tried using .exists? and looking for that dom object, but I've always come up empty. I see that it isn't a timing issue, as I'm not using headless for chrome.
Can anybody recommend how I can see this link to .click it? Cheers
The problem is that the element is in a shadow DOM, which does not yet have support in Selenium/Watir. At this point, the fastest solution seems to be executing everything by JavaScript.
For example, clicking the Marriage link:
browser.execute_script('return document
.querySelector("fs-search-form")
.shadowRoot
.querySelector("[group-id=event]")
.shadowRoot
.querySelector("#marriage-trigger")
.click();')
Note that you need to explicitly navigate to the element containing the shadow DOM and call shadowRoot to go inside.
We're having a weird problem in our AEM 6.3 application.
For some reason, the link to the contact-us page gets rendered with a space at its end, making it useless.
I'm trying to figure this out but I'm kinda new to sightly (I used to be working on CQ5).
To visualize it better, the configured link in the page properties is:
/content/app-name/hk/hk/info/contact-us
And the code in the HTML/sightly page is:
<a href="${inheritedPageProperties.linkToContactUsPage # extension='html'} ">
Contact Us
</a>
While what gets rendered in the actual page is:
<a href="/hk/hk/info/contact-us%20.html">
Contact Us
</a>
This happens only in the chinese pages of the site, I'm not sure if this is relevant or just a coincidence.
At first I thought the problem could be the blank space at the end of the href attribute, but shouldn't it result in "/hk/hk/info/contact-us.html%20" then? Also why would this problem affect only the chinese language pages and not all the other languages?
AFAICT you do have a space in the page properties link:
Please remove the space in your
<a href="${inheritedPageProperties.linkToContactUsPage # extension='html'} ">
like this
<a href="${inheritedPageProperties.linkToContactUsPage # extension='html'}">
grails v 3.3.9, fields plugin
fighting with fields plgin and theres a problem when rendering domain objects and using bootstrap
i've got a sample here from a simple standalone page to show the problem
<p>f:display category </p>
<f:display bean="maintenanceAgreement" >
</f:display>
<hr />
<p>f:field category</p>
<f:field bean="${this.pageScope.maintenanceAgreement}" property="category">
<g:render template="/_fields/map/displayWidget" ></g:render>
</f:field>
<hr />
in essenence i have added a template in "/_fields/map/displayWidget" that renders a drop right table on a button
when you render a map field directly from your Domain object the sample table opens and you get all of the table
however when you
you can see the differences between using f.display (has clipping problem), f.field ( which seems to work) and f.all that ignores my _fields/map/_displayWidget.gsp
I dont want to have not use the fields plugin but its not working with bootstrap templating
has any one come up with a fix for this problem?
the project demo page is here
github standalone page to show rendering problem
the attached shows the output as you try each and select category property
well goldarn it another 2 days down the pan - but i have it !
I thought at first it was something to do with fields plugin processing. so i hacked a clone of plugin project locally and added some bits so i could watch it/debug step through it
in doing so i noted that my dummy web domain class page i'd cut across to the plugin didnt have the clipping problem. but the styles were not the same so i copied main.css and grails.css from ordinary project back into the plugin, then re rendered in the browser - and the clipping happened again.
so its in the css!. some very careful watching of browser and looking at the browser 'inspect' indicated that the clipping seemed to be enabled very early on in the journey.
so in my dummy page i just used
I then spent a day wandering round the various bits of fields plugin as its not that well explained anywhere.
if you look at the plugins taglib display method, by default that triggers the /templates/fields/_list.gsp. naming is a little odd but its the gsp that renders the domains persistent attributes as an ordered list - the plugins default _list.gsp looks like this
<ol class="property-list ${domainClass.decapitalizedName}">
<g:each in="${domainProperties}" var="p">
<li class="fieldcontain">
<span id="${p.name}-label" class="property-label"><g:message code="${domainClass.decapitalizedName}.${p.name}.label" default="${p.defaultLabel}" /></span>
<div class="property-value" aria-labelledby="${p.name}-label">${body(p)}</div>
</li>
</g:each>
</ol>
so after much exploration coming up through templates, from the bottom I ended up right at the top with the '
so nearly there now. back into main.css that i'd copied in. if you edit that, down around line 215 you get this style. If you comment out the overflow property - its all fixed !
.property-list .fieldcontain {
list-style: none;
/*overflow: hidden; */
zoom: 1;
}
I tried auto, scroll, and visible but that seems to much about with too much of the page so best to just comment it out.
once you do that - the rest of the rendering of your forms starts to work !! blimey one line of css for all that pain. Attached is the page using
Lastly through out all this, id ended up digging through /tracing fields plugin. What a nest that is. Not really finished here, but basically
with no body just renders a label and no content. So you either need to provide provide a body tag, say to get the value field displayed.
as
if no widget template has been defined then the renderDefaultDisplay is called which again has very limited options for controlling the rendering by falling through a 'switch (prop.type)' and basically calls either g.format (bool), g.formatDate (but no LocalDateTime/LocalDate Support) or g.fieldValue, non of which are bootstrap enabled.
if you call
these two diagrams are not beautiful but just high level pseudo code walk through for what the core tags are trying to do. One day i'll try and pretty that up but it might help you if you get stuck
I'll raise a bug for the main.css clipping directly to the grails team and see what happens, but you can comment the line out yourself if you fall foul of it.
I have the following link on my website:
<a href="/pages/getting-started-step-2-of-5" title="Next Step">
<span style="text-decoration: underline;">Next Step</span>
</a>
It works fine, however, would it be possible to change it so that when the link is clicked and the new page is opened it does not automatically scroll to the top of the page? i.e. the new page is in the same position as the previous page was?
Yes, if you read about Internal links.
Yes it is possible using HTML tags.
You should be using anchors.
You can have named anchors to jump to.
<a name ="jumphere">here</a>
You can jump to named anchors by using there names after a #.
http://somedns.com/index.php#jumphere
more info
Named anchors are no longer supported in HTML5 - use id instead in HTML5 pages.
I have a "normal" link in my jqm page like this:
<a href="http://www.mysite.com/mobile/page.php?attribute=value">
And if I click it it won't properly refresh taking into account the attribute value and loading everything that's needed for it dynamically based on the attribute value. I understand that this is due to the fact that jqm tries to do an ajax call like mentioned here:
When you use pageChange an Ajax request will be made to that url and it will be
loaded only the content inside the div with data-role="page". So everything you
have out of this element will be ignored (JS and CSS).
So, I found out in the docs that I should use $.mobile.ajaxEnabled=false; or rel=external on links or target=_blank on the link.
Strange thing though for me is that only when I set the target=_blank property to my links will this truly happen. So, am wondering if someone had this kind of a problem and how did you solve it? The thing is, I would like to refrain myself form using target=_blank as it opens a new tab in my browser (as expected, but this is not nice from users' POV).
jqm version I use is 1.2
This question now at the top of google search results, so figured I'd answer:
Use the data-ajax attribute and set it to false to force reload upon clicking a link:
data-ajax="false"
use it like:
<a href="/" data-ajax="false">
<img id="mainLogo" src="logo.svg" width="215" />
</a>
And then your link will force reload the page!
Linking without Ajax
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition. Both attributes (rel="external" and data-ajax="false")
have the same effect, but a different semantic meaning: rel="external"
should be used when linking to another site or domain, while
data-ajax="false" is useful for simply opting a page within your
domain from being loaded via Ajax. Because of security restrictions,
the framework always opts links to external domains out of the Ajax
behavior.
Parts taken from https://stackoverflow.com/a/22951472
Make function for the onclick event of the link.See the below code example.Hope this helps!
<script type="text/javascript">
function loadPage(url){
document.location.href = url;
}
<script/>
<a href="#" onClick="loadPage('http://www.mysite.com/mobile/page.php?attribute=value');">