Sharepoint navigation menu collapse - sharepoint

Does anyone know when in sharepoint you´ve created a navigation structure in site settings navigation / that i can only add a page under a heading and have to hide the page which is the heading?
How I can make the menu collapse when clicking on the top menu rather then immediate display?
I want to display the second level when clicking on any of the first and then when clicking on the second for the first to dissapear and the 2nd and 3rd to be displayed and the breadcrum to easily go back home.
How can this be done in the portal not with publishing sites? Any advice would be greatly appreciated.

Jquery is the way:
<script type="text/javascript" src=http://yourMoss/sites/Shared%20Documents/jquery-x.x.x.js></script>
<script type="text/javascript">
$(function(){
//initialize menus
var menuRows = $("[id$='QuickLaunchMenu'] > tbody > tr");
var menuHd = menuRows.filter("[id!='']:has(+tr[id=''])");
//set img path for when submenu is hidden
var closedImg = "/_layouts/images/plus.gif";
//set img path for when submenu is visible
var openedImg = "/_layouts/images/minus.gif";
var cssInit = {
"background-image": "url('"+closedImg+"')",
"background-repeat": "no-repeat",
"background-position": "100% 50%"
}
var cssClosed = {"background-image": "url('"+closedImg+"')"}
var cssOpen = {"background-image": "url('"+openedImg+"')"}
//hide submenus
menuRows.filter("[id='']").hide();
//apply initial inline style to menu headers
menuHd.find("td:last").css(cssInit);
menuHd.click(function () {
var styleElm = $(this).find("td:last")
var nextTR = $(this).next("tr[id='']");
if (nextTR.is(':visible')) {
nextTR.hide();
styleElm.css(cssClosed);
} else {
nextTR.show();
styleElm.css(cssOpen);
}
});
});
</script>

Related

How to place svg icon in toolbar

I need to replace all of my png icons with with svg - it is my employee request. I am using FFImageLoading. Some of the icons displayed in Pages are displaying properly but the problem is that I can't display svg icon in toolbar (toolbar item and hamburger icon).
I am using Xamarin.Forms 4.3.0.908675 and Xamarin.FFImageLoading - all in version 2.4.11.982.
My logo.svg is placed in MyProject.EmbeddedFiles.Images.
Here are the code samples I tried:
ToolbarItems.Add(new ToolbarItem
{
IconImageSource = "logo.svg",
Order = ToolbarItemOrder.Primary
});
ToolbarItems.Add(new ToolbarItem
{
IconImageSource = "MyProject.EmbeddedFiles.Images.logo.svg",
Order = ToolbarItemOrder.Primary
});
ToolbarItems.Add(new ToolbarItem
{
IconImageSource = ImageSource.FromResource("MyProject.EmbeddedFiles.Images.test.svg", typeof(App).GetTypeInfo().Assembly),
Order = ToolbarItemOrder.Primary
});
ToolbarItems.Add(new ToolbarItem
{
IconImageSource = new SvgImageSource(ImageSource.FromResource("MyProject.EmbeddedFiles.Images.test.svg", typeof(App).GetTypeInfo().Assembly), 10,10,true),
Order = ToolbarItemOrder.Primary
});
Neither solution works. My solution based on https://github.com/luberda-molinet/FFImageLoading/issues/1105
What am I missing? Is this even possible?

UWP/WinJS: show a html page in a pop-up window

I am working on a JavaScript based UWP app. Now I need to dynamically show a html page(with a url) in a pop-up window.
I did some search, there is a ContentDialog I can probably use:
var object = new WinJS.UI.ContentDialog(element, options);
but I cannot find any JavaScript sample code for it. I couldn't figure out what should I pass as "element" and how I put the html in ContentDialog.
Thanks in advance for any help.
The WinJS playground shows you how to use the ContentDialog: http://winjs.azurewebsites.net/#contentdialog
The element you pass is the Html element you want to initiate as the dialog.
<div id="myDialog">I am the going to be the dialog content.</div>
 
var element = document.getElementById('myDialog');
var options = {
title: 'Main instruction',
primaryCommandText: 'Ok',
secondaryCommandText: 'Cancel'
};
var dialog = new WinJS.UI.ContentDialog(element, options);
If you want to set the dialog content dynamically you can do so with
var webview = document.createElement('x-ms-webview');
webview.src = 'http://stackoverflow.com';
dialog.element.querySelector('.win-contentdialog-content').appendChild(webview);
dialog.show();

Open new window from quick launch in Sharepoint Online

<script type="text/javascript">
//add an entry to the _spBodyOnLoadFunctionNames array
//so that our function will run on the pageLoad event
_spBodyOnLoadFunctionNames.push("rewriteLinks");
function rewriteLinks() {
//create an array to store all the anchor elements in the page
var anchors = document.getElementsByTagName("a");
//loop through the array
for (var x=0; x<anchors.length; x++) {
//does this anchor element contain #openinnewwindow?
if (anchors[x].outerHTML.indexOf('#openinnewwindow')>0) {
//store the HTML for this anchor element
oldText = anchors[x].outerHTML;
//rewrite the URL to remove our test text and add a target instead
newText = oldText.replace(/#openinnewwindow/,'" target="_blank');
//write the HTML back to the browser
anchors[x].outerHTML = newText;
}
}
}
</script>
I have this code I put in the seattle.master file before Then in quick launch when I edit links I put #openinnewwindow after the website address. On "try link" this opens the website right. My problem is when I save it. And click the link it does not open in a new window. Any ideas why this might be happening?
I realized for this code to work that I needed Publishing enabled.

Customize the quick launch items for certain pages in sharepoint

I have requirement where client wants to customize the items in quick launch for only certain
pages.So, I want to change the items in the quick launch with some other items for a few pages.(Not about cahnging the style of quick launch. Its about the replacingthe content in quick launch)
I hope using CEWP, I can achive this.But I am not much aware how to do it.
You can have two approachs here:
1) creating a webpart to replace the quicklaunch: This way you can read the Navigation from SPWeb, and build it your own.
2) Using jQuery to change the html loading the page. In this approach, I would apply a 'display:none' to quicklaunch, make the changes in html, and then 'display:block' back. The con in this solution is that you must rely on the names/titles/urls of the items, so if an admin changes, it could break it.
I had followed following steps to achive the goal
1.. Added a CEWP in the page
Created a text file with Following script and added it to shared dcouments
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function startClock(){
var div= document.getElementById('s4-leftpanel-content');
var spans= div.getElementsByTagName('span');
for (index = spans.length - 1; index >= 0; index--) {
spans[index].parentNode.removeChild(spans[index]);
}
var urls= div.getElementsByTagName('a');
for (index = urls.length - 1; index >= 0; index--) {
urls[index].parentNode.removeChild(urls[index]);
}
var pTag = document.createElement('p');
pTag.innerHTML = "HR Report";
div.appendChild(pTag);
var aTag = document.createElement('ul');
div.appendChild(aTag);
var newLi = document.createElement('li');
aTag.appendChild(newLi);
var a= document.createElement('a');
a.setAttribute('href',"url");
a.innerHTML = "report2";
newLi.appendChild(a);
//do onload work
}
if(window.addEventListener){
window.addEventListener('load',startClock,false); //W3C
}
else{
window.attachEvent('onload',startClock); //IE
}
</script>
enter code here
Paste the url text file in shared documents in CEWP as content link(Edit web part >>content link>>paste url)
Now, existing items in the Quick Launch is removed and new items are added

Allow only Copy/Paste Context Menu in System.Windows.Forms.WebBrowser Control

The WebBrowser control has a property called "IsWebBrowserContextMenuEnabled" that disables all ability to right-click on a web page and see a context menu. This is very close to what I want (I don't want anyone to be able to right-click and print, hit back, hit properties, view source, etc).
The only problem is this also disables the context menu that appears in TextBoxes for copy/paste, etc.
To make this clearer, this is what I don't want:
This is what I do want:
I would like to disable the main context menu, but allow the one that appears in TextBoxes. Anyone know how I would do that? The WebBrowser.Document.ContextMenuShowing event looks promising, but doesn't seem to properly identify the element the user is right-clicking on, either through the HtmlElementEventArgs parameter's "FromElement" and "ToElement" properties, nor is the sender anything but the HtmlDocument element.
Thanks in advance!
have you considered writing your own context menu in javascript? Just listen to the user right clicking on the body, then show your menu with copy and paste commands (hint: element.style.display = "block|none"). To copy, execute the following code:
CopiedTxt = document.selection.createRange();
CopiedTxt.execCommand("Copy");
And to paste:
CopiedTxt = document.selection.createRange();
CopiedTxt.execCommand("Paste");
Source:
http://www.geekpedia.com/tutorial126_Clipboard-cut-copy-and-paste-with-JavaScript.html
NOTE: This only works in IE (which is fine for your application).
I know its not bulletproof by any means, but here is a code sample that should get you started:
<html>
<head>
<script type = "text/javascript">
var lastForm = null;
window.onload = function(){
var menu = document.getElementById("ContextMenu");
var cpy = document.getElementById("CopyBtn");
var pst = document.getElementById("PasteBtn");
document.body.onmouseup = function(){
if (event.button == 2)
{
menu.style.left = event.clientX + "px";
menu.style.top = event.clientY + "px";
menu.style.display = "block";
return true;
}
menu.style.display = "none";
};
cpy.onclick = function(){
copy = document.selection.createRange();
copy.execCommand("Copy");
return false;
};
pst.onclick = function(){
if (lastForm)
{
copy = lastForm.createTextRange();
copy.execCommand("Paste");
}
return false;
};
};
</script>
</head>
<body oncontextmenu = "return false;">
<div id = "ContextMenu" style = "display : none; background: #fff; border: 1px solid #aaa; position: absolute;
width : 75px;">
Copy
Paste
</div>
sadgjghdskjghksghkds
<input type = "text" onfocus = "lastForm = this;" />
</body>
</html>
//Start:
function cutomizedcontextmenu(e)
{
var target = window.event ? window.event.srcElement : e ? e.target : null;
if( navigator.userAgent.toLowerCase().indexOf("msie") != -1 )
{
if (target.type != "text" && target.type != "textarea" && target.type != "password")
{
alert(message);
return false;
}
return true;
}
else if( navigator.product == "Gecko" )
{
alert(message);
return false;
}
}
document.oncontextmenu = cutomizedcontextmenu;
//End:
I hope this will help you Anderson Imes
A quick look at the MSDN documentation shows that none of the mouse events (click, button down/up etc) are supported to be used in your program. I'm afraid its either or: Either disable conetxt menus, or allow them.
If you disable them, the user can still copy & paste using keyboard shortcuts (Ctrl-C, Ctrl-V). Maybe that gives you the functionality you need.
We ended up using a combination of both of the above comments. Closer to the second, which is why I gave him credit.
There is a way to replace the context menu on both the client-side web code as well as through winforms, which is the approach we took. I really didn't want to rewrite the context menu, but this seems to have given us the right mix of control.

Resources