I have various empty space boxes on a page I am building and they work until on mobile view, only when the page is refreshed in mobile view though, not if one just resizes the window to tiny.
On desktop the html appears like this:
<div data-original-height="560" class="vc_empty_space" style="height: 560px;" 560px"="">
<span class="vc_empty_space_inner"></span></div>
Refreshed on mobile view:
<div data-original-height="560" class="vc_empty_space" style=""height:" 560px"="">
<span class="vc_empty_space_inner"></span></div>
Its the same on all my pages.
I used this as a quick fix if anyone has the same issue:
jQuery('.vc_empty_space').each(function() {
var heightspace = jQuery(this).attr('data-original-height');
jQuery(this).css('height', heightspace);
});
Related
I use the "SB Admin 2" Theme for a project.
The integratet Metis Menu works very well on desktop, also on tablet.
But when I visit the page with my phone, the menu doesn't hide completely.
Only when I scroll the page.
You can visit https://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/index.html to test ist.
If you shrink the browser as far as its like a mobile screen, the menu does not hide.
I tried to do it on the bottom of my index.html file with $('#side-menu').metisMenu('collapse'); but it does not work. This is also defined in the sb-admin-2.js file. But it doenst work either.
Can you help me to get the menu hide completly, even on mobile devices?
Try downgrading the JQuery version to 2.1.3:
https://code.jquery.com/jquery-2.1.3.min.js
There are issues with metismenu with newer Jquery versions:
https://github.com/onokumus/metismenu/issues/128
You can do this with hiding it with css only
.navbar-top-links {
display: none
}
Or if you don't want to hide it always only on button click. Create a new button with these attributes before your current unordered list (ul)
<button type="button" class="collapse-2" data-toggle="collapse" href="#collapse2" aria-expanded="true">
And replace this code
<ul class="nav navbar-top-links navbar-right">
With this code
<ul class="nav navbar-top-links navbar-right navbar-expand-sm navbar-collapse panel-collapse collapse" id="collapse2">
I managed to get it working like this only you have to style the button and place it in the correct position.
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
Using the following code snippet, the splitter is displayed fine on the first tab that appears after transition to the current page, however the splitter doesn't show up properly in the subsequent tabs.
<div dojoType="dijit.layout.TabContainer" class="fitToHeight fitToWidth" tabStrip="true">
<div dojoType="dijit.layout.ContentPane" class="fitToHeight fitToWidth" title="Tab_1">
<a4j:include
viewId="/view/syllabus/syllabusManagement.xhtml"
id="container_syllabus">
</a4j:include>
</div>
<div dojoType="dijit.layout.ContentPane" class="fitToHeight fitToWidth" title="Tab_2">
<a4j:include
viewId="/view/student/studentManagement.xhtml"
id="container_student">
</a4j:include>
</div>
Here's is the snippet of employeeManagement.xhtml/syllabusManagement.xhtml
<div dojoType="dijit.layout.BorderContainer" design="sidebar"
liveSplitters="true" class="fitToHeight fitToWidth">
<div class="leftPanel" dojoType="dijit.layout.ContentPane"
minSize="5%" splitter="true" region="leading">
Source Code Goes Here
</div>
<div class="targetPanel" dojoType="dijit.layout.ContentPane"
minSize="400" region="center">
Target Code Goes Here
</div>
</div>
When the page loads, defaults to syllabusManagement.xhtml, the splitter functions as needed, but when i switch the tab to employeeManagement.xhtml, the splitters goes for a toss, gives real unpredictable behaviour.
My observation is that the splitter is rendered well when the tab is loaded on transition.
How do one fix this splitter rendering issue ?
Thanks.
i suggest using dojox.layout.ContentPane and setting the href attribute instead of loading all tabs at first.
your layout is needs to be 100% 100% for the tabcontainer and bordercontainer to calculate sizing properly.
See what happens here, if a width/height is not set here
Background
I have a basic HTML page with an iframe that points to a page with a SilverLight object on it. When the Silverlight object extends past the predefined height, the vertical scroll bar is displayed but in an inactive state. Below is my HTML and screen shots of the iframe.
Question
Is it possible to have a vertical scroll bar in an iframe when the target page contains a Silverlight object?
Code
<html>
<body>
<form>
<div>
<IFRAME height="300" width="1000" name="MyFrame" scrolling="yes"
src="http://mycompany.com/mysilverlightpage.aspx">
</IFRAME>
</div>
</form>
</body>
</html>
Screen Shots
This issue had nothing to do with Silverlight but with the SharePoint masterpage hosting the web part that hosted the Silverlight object. To allow the vertical scroll in this case the following changes need to be made to the masterpage. I created a custom masterpage based off for my business needs so I didn't have to worry about these mods wrecking the rest of my environment.
Remove scroll="no" from the body tag
Remove the two divs surrounding the "PlaceHolderMain" ContentPlaceHolder
<div ID="s4-workspace" class="s4-nosetwidth">
<div ID="s4-bodyContainer">
<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"/>
</div>
</div>
I have a homepage on an Intranet. It has at 15+ webparts (news, weather, etc.) I want to allow the users to customize the page by moving the webparts around or deleting them. At present I don't let them see the ribbon at the top so they don't have access to the "Edit page" button. I have pulled it out from the Ribbon
<a unselectable="on" href="javascript:;" onclick="return false;" class="ms-cui-ctl-large" aria-describedby="Ribbon.WebPartPage.Edit.Edit.Menu.Actions.Edit_ToolTip" mscui:controltype="Button" role="button" style="height: auto;" id="Ribbon.WebPartPage.Edit.Edit-SelectedItem">
<span unselectable="on" class="ms-cui-ctl-largeIconContainer">
<span unselectable="on" class=" ms-cui-img-32by32 ms-cui-img-cont-float">
<img unselectable="on" alt="" src="/_layouts/1033/images/formatmap32x32.png" style="top: -160px; left: -96px;">
</span>
</span>
<span unselectable="on" class="ms-cui-ctl-largelabel" style="height: auto;">Edit<span unselectable="on">
</span>Page</span>
</a>
Unfortunately it is not working. Any thoughts?
I will be doing the same with the "Stop Editing" button as well.
According to this post: http://artykul8.com/2011/03/useful-sharepoint-shortcuts/
the trick is to use the MSOLayout_ToggleLayoutMode(); javascript function.
According to a comment in that same page, in SP2010, that javascript function is only available when you already have a web part in the page. The behavior I observed differs from this one, given that, to me, this function only worked when the page was in edit mode already (and it worked even when the page had no web part added).
I was able to find the javascript file where that function is defined, which is the ie55up.js. You can load it in your masterpage by doing:
<SharePoint:ScriptLink language="javascript" name="ie55up.js" OnDemand="false" runat="server" />
For information about how to build a web control that uses that javascript function, see here: http://www.codeproject.com/KB/sharepoint/SwitchWPMode.aspx
Hope this helps
I finally found the answer to this question. It was very simple after the JS call was determined. I believe this should be for a webpart only page.
To put the page in edit mode for Personalization via a Javascript call:
ChangeLayoutMode(true); // how simple is that??
To stop the editing of the page via a Javascript call:
MSOLayout_ToggleLayoutMode(); // same as given in the other post
The "Stop" edit mode I believe is the same for all pages no matter if it's a personalized page, all webparts page, etc.