Press F5 in this example: DojoToolkit.
First the content is shown, and after that the layout gets into it's final state. In my application I want the opposite, so that the layout gets rendered, and after that the content is displayed. I don't want that 'jumping' phenomenon when loading. Is it possible to fix this somehow?
No, I don't think that there is such an option. Anyway, you could use a container div (with all the dojo layout elements in it) with initial state visbility:hidden, and after the page is loaded and parsed change it's visibility to "visible".
<div id="container" style="visibility:hidden">
<!-- dijit widgets inside the "container"-->
</div>
<script type="text/javascript">
dojo.ready(function(){
dojo.style("container:, "visibility", "visible");
});
</script>
Related
I am building an XPages application based on a custom theme I bought.
I want to use include pages to display custom 'widgets' in the header
Unfortunatelly, the included pages are rendered in a tag, which is incompatible with the css stylesheet from the theme.
Here's the code including the pages (the idea is to make this configurable in the future)
<xp:panel styleClass="navbar-account">
<ul class="account-area">
<xp:include pageName="/nav_VisitIn.xsp"></xp:include>
<xp:include pageName="/nav_MyVisit.xsp"></xp:include>
<xp:include pageName="/nav_Profile.xsp"></xp:include>
</ul>
</xp:panel>
The rendered html looks something like this
The css for the list item tags (and all elements below) are similar to
.navbar-account .account-area > li {...}
I want to avoid having to modify all related styles from the theme.
Is there a way to make sure the include page is rendered without the div tag or can I remove the generated div tag (but not its content) from the DOM?
Try adding disableOutputTag="true" in your <xp:include> tags.
If you visit www.arbetsformedlingen.se from a mobile, you will find a menu.
If you open that menu, you can only access items within that menu since tapping outside of the menu will close the menu.
If you for some reason are using a keyboard, you cannot tab out of
that menu.
However, visitors who uses the screen reader VoiceOver in IOS can simply move out of that menu by using the swipe left/right gestures to access the previous/next object in the DOM.
Question: Is there some way to prevent those users to access objects outside of the menu when the menu is visible?
An unsuitable solution due to the CMS would be to place the main content and the menu on the same node level, like in the simplified code below:
<body>
<div class=”maincontent” aria-hidden=”false”>
// Main content.
</div>
<div class=”mobilemenu” aria-hidden=”true” style="display:none">
// Menu.
</div>
</body>
When the menu is opened, the aria-hidden and display:none are toggled in order to just show the page contents or the menu.
Another unsuitable solution would be to toggle aria-hidden to every other object when the menu is opened, but that is impossible due to performance issues.
So, any piece of advice, thoughts etc are very welcome!!!
Using HTML5, you can set the "tab-index" to positive numbers on the elements within the menu. This will set focus to those elements. `
<div class="menu-container">
<div class="menu">
<div tabindex="1">Menu Item 1</div>
<div tabindex="2">Menu Item 2</div>
<div tabindex="2">Menu Item 3</div>
</div>
</div>
This may not be the best solution depending on what your trying to accomplish and what your code structure looks like.
You'll want to be sure to use the "tab-index" attribute correctly as to not break accessibility.
Good description and example
WebAIM-tabindex-accessibility
I can't find any way to get rid of the call to action button on my landing page layout in Weebly. Is it possible to get rid of this button?
You need to perform two steps.
Remove the button from the desktop layout.
Open the layout file in HTML edit mode.
Remove the following line:
<div class="button-wrap">{action:button global="false"}</div>
Remove the button from the mobile layout.
Add the following script to the Header Code of the page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script language='javascript'>
$(document).ready(function(){
$('.landing-container').remove();
});
</script>
You can see it in action on this site for gluten free products.
having some problems with developing custom components in JSF. I am building a component which wraps some javascript generated charts (javascript appends SVG elements to specified div). They have some animations by the time they render. When some part of chart is changed, there is made modification for only part of the chart by calling some .js scripts (whole chart is not rendered again). So, the rendered component looks some like this:
<div> <--- master container
<span id="clientId" />
<script> .js script for chart generation </script>
<div id="chart">
<svg>...</svg> <--- generated by script
</div>
</div>
When is ajax render invoked with ID of this component, there is only span updated (so chart won't rerender). I catch the call, generate some modification script and return them to the client. Everything is ok.
The problem: when is updated some other component or container which holds this component with chart, the div "chart" is rerendered. Is there any server side way, how to exclude component to be updated?
Thanks
<p:overlayPanel showEvent="contextmenu" ..>
I like to show the overlay on right click. The browser also shows its context menu.
Is there a way to prevent browser showing its context menu?
Thanks.
You can write a javaScript function to disable browser contextMenu. Something like this
<script type="text/javascript">
document.oncontextmenu=function(){return false};
</script>
For your information, This technique will fail if the user disables JavaScript.