sharepoint breadcrum trail editing on the fly - javascript

I have been searching for hours now and have found some code that claims to be able to do what i want however...it doesn't.
I am currently trying to remove Pages and .aspx off the end of my page name in the breadcrumb trail in sharepoint. Currently it look like....
mysite > myarea > pages >mypage.aspx
I have tried changing the SiteMapProvider and this takes away the pages link as well as the current page. It then looked like..
mysite > myarea.
I would like to have
mysite > myarea >mypage
I have tried using this snippet of code...I do not claim to own or to have developed this code.
var breadCrumbs = document.getElementById('ctl00_PlaceHolderTitleBreadcrumb_ContentMap')
if (breadCrumbs != null) {
if (breadCrumbs.childNodes.length >= 3) {
if (breadCrumbs.childNodes[2].innerHTML.indexOf('Pages') > 0) {
breadCrumbs.childNodes[1].innerHTML = "";
breadCrumbs.childNodes[2].innerHTML = "";
}
}
}
I put some document.writes in to see where the code was getting to and the breadCrums variable seems to be null therefore the code never gets to the juicy part :P
Any ideas hints tips would be hugely appreciated
Truez

I have run your code on a SharePoint site and was able to get the breadCrumbs element just fine. Have you verified that that is the correct ID of your breadcrumbs object. The ID you use is the default, but you should check. Just view source on the page and do a quick Ctrl-F and search for "Breadcrumb".
Too see if it is just a matter of placement, do this: On a target SharePoint page using IE, open the Web Developer tool (Tools > Developer Tools). Switch to the Script tab and press the Multi Line Mode button at the bottom of the script pane. Paste this code:
var breadCrumbs = document.getElementById('ctl00_PlaceHolderTitleBreadcrumb_ContentMap')
if (breadCrumbs != null) {
if (breadCrumbs.childNodes.length >= 3) {
if (breadCrumbs.childNodes[2].innerHTML.indexOf('Pages') > 0) {
breadCrumbs.childNodes[1].innerHTML = "";
breadCrumbs.childNodes[2].innerHTML = "";
} else {
alert('Pages node NOT found!');
}
} else {
alert('breadCrumbs only has ' + breadCrumbs.childNodes.length + ' children!');
}
} else {
alert('breadCrumbs NOT found!');
}
Then press the Run Script button. This code is just yours with some alerts added to help you see if/where it fails. If you get no alerts and the breadcrumbs element changes as you expect then yes it is placement. Otherwise, it depends on which alert you get. Let me know the results and I can help you correct the issue.

Related

How to detect search provider which has already been added?

I'm trying to build a feature like whenever a user comes to my site, I have added an option to add default search provider in their browser. I have written a code like this for Firefox -
<script>
$(document).ready(function () {
var isFirefox = typeof InstallTrigger !== 'undefined';
if (isFirefox === false) {
$("#set-susper-default").remove();
$(".input-group-btn").addClass("align-search-btn");
$("#navbar-search").addClass("align-navsearch-btn");
}
if (window.external && window.external.IsSearchProviderInstalled) {
var isInstalled = window.external.IsSearchProviderInstalled("http://susper.com");
if (!isInstalled) {
$("#set-susper-default").show();
}
}
$("#install-susper").on("click", function () {
window.external.AddSearchProvider("http://susper.com/susper.xml");
});
$("#cancel-installation").on("click", function () {
$("#set-susper-default").remove();
});
});
</script>
User clicks on the install button and script runs and the site is added in search provider list. If a user refreshes or again comes to my site, this feature again come. How should I detect it is already added so that whenever a user comes to my site next time it does not appear.
It would be great help if someone can help me out. Thanks :)
Unfortunately you can’t use IsSearchProviderInstalled and AddSearchProvider. They are considered no-ops in Chrome, and should do nothing as HTML Standard describes, more info here: https://www.chromestatus.com/feature/5672001305837568. For now AddSearchProvider works in Firefox, but IsSearchProviderInstalled will return always 0. You can try it by going to https://google.com and adding this code: external.IsSearchProviderInstalled("https://www.google.com"); in the console.
Instead you should try adding search plugin autodiscovery into your webpage. To do so just add the <link> element to the <head>:
<link rel="search"
type="application/opensearchdescription+xml"
title="searchTitle"
href="pluginURL">
More info about it here: https://developer.mozilla.org/en-US/Add-ons/Creating_OpenSearch_plugins_for_Firefox#Autodiscovery_of_search_plugins

How can I show content on a page based on query string?

I'm working with a team that is using a vendor's web based application. When people log out, they are redirected to the login page, where we would like to add a message. We don't have access to change the code (it's cloud hosted) but we can pass a query string parameter in the URL.
We can do something like:
http://our.site.com?logout=true
From there, I'd like to display a message in an h2 or something.
We can customize the HTML, CSS and JS of the page, but we don't have access to the source of the application (otherwise I would do this in PHP).
I presume I can use JS to change some CSS, but in all my trials I cannot get the CSS to actually change.
Check this answer: Get url parameter jquery Or How to Get Query String Values In js
var logout = getUrlParameter('logout');
if(typeof logout !== "undefined")
{
// show some div with display: none
// or put some content to the existing div
}
From your question above, I am just understanding that you need a piece of code to show some message on your login page on the basis of the query string received.Following is the piece of code you can add in the footer of your login page html(as you have the access to html).
<script type="text/javascript">
function getParamValue(querystring) {
var qstring = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < qstring.length; i++) {
var urlparam = qstring[i].split('=');
if (urlparam[0] == querystring) {
return urlparam[1];
}
}
}
if(getParamValue('logout')=='true'){
var messageDiv = document.createElement("div"); // Creating a div to display your message
var message = document.createTextNode("You have successfully logged out."); // Preparing the message to show
messageDiv.appendChild(message); // Appended the message in newly created div
var addIn = document.getElementById("login"); //just presuming there is a div having id="login" in which you want to prepend the message
addIn.insertBefore(messageDiv, addIn.childNodes[0]); //just appended the message on top of login div
//setting style in your message div
messageDiv.style.backgroundColor ="#FF0000";
messageDiv.style.width ="100%";
}
</script>
Then change the link of login page like this:
http://our.site.com/login.php?logout=true
Note :Read the code comments carefully to edit the code as per your html structure.
Try !important to change CSS? Just a temporary solution until you can edit the actual code.

Dynamically loading sound link with Javascript

I am trying to get some dynamically loaded links to display via a javascript file and a JSON array(where links are contained).
Link1 is to another webpage, open in new tab is the hope.
Link2 is to a site hosting an mp3 of a sound. Hopefully get the sound to just play in this window, otherwise in a new tab.
My problem is I'm not too familiar with js syntax to know where I'm wrong.
The error is nothing happens: in the status bar at the bottom I see: "#http://etc.com" because of the # hash sign it doesn't show but I need the hash sign for the navigation/local links.
here is the link to what's on the server so you can see the big picture:
wordExplorer
Here is the code:
function SetAnchorProperties(aElemObj, classStr, hrefStr) {
var aStr = arguments[3];
if (aElemObj) {
if ((classStr) && (hrefStr)) {
aElemObj.setAttribute('class', classStr);
if (hrefStr.search("http")) {
(aElemObj.setAttribute('href', hrefStr));
} else {
(aElemObj.setAttribute('href', '#' + hrefStr));
}
console.log(classStr, hrefStr);
console.log(hrefStr.search("http"));
}
if (aStr) {
aElemObj.textContent = aStr;
}
}
}
Thanks so much!!
Cam

ZeroClipboard user script adding in mouse over, working in firefox, but not chrome

I am using zeroclipboard to add a "copy" link to each row in a fairly large list, within a user script. To accomplish that, I using a method similar to the one listed on this page, where the ZeroClipboard.Client() element for each row is created when the user mouses over the row. This is working great in FireFox, but not in Chrome.
Also as a note: I copied the contents of the ZeroClipboard.js file into the user script itself instead of including it in an external file.
Here is the markup that creates the copy button for each element
<span style="color:blue; text-decoration:underline; cursor:pointer" id="copy_'+id+'" class="CopyLink" link="'+url+'" onmouseover="clipboard.add(this)">Copy</span>
Here is the code segment that adds the clipboard's client object:
function main(){
window.clipboard = {
load: function (){
if(!clipboard.initialized){
ZeroClipboard.setMoviePath("http://www.swfcabin.com/swf-files/1343927328.swf");
clipboard.initialized=true;
console.log("Clipboard intialized");
}
},
add: function(element){
clipboard.load();
var clip = new ZeroClipboard.Client();
console.log('Clipboard client loaded: ' + element.id);
clip.glue(element, element.parentNode);
console.log('Clipboard glued: ' + element.id);
clip.setText(element.getAttribute('link'));
console.log('Clipboard text set: ' + element.getAttribute('link'));
clip.addEventListener('complete',function(client,text) {
console.log('Clipboard copied: ' + text);//doesn't fire in chrome
});
clip.addEventListener('load',function(client) {
console.log('Clipboard loaded: ' + element.getAttribute('link'));
});
}
}
//other code in user script including injecting above markup
//as well as contents of ZeroClipboard.js
window.ZeroClipboard = { ... }
}
var script = document.createElement("script");
script.appendChild(document.createTextNode('('+main+')()'));
(document.head || document.body || document.documentElement).appendChild(script);
In this block, every console.log fires in FireFox when I mouse over and click the copy span, but in chrome, all except the 'complete' listener fire. I was able to verify that ZeroClipboard is working in my Chrome by using the example on this page. I am also able to verify that the flash object is being added to the page in the correct location, but it is simply not responding to a click.
Since the zeroclipboard code is no longer being maintained according to the site, I'm hoping someone out there can help me out. I'm thinking there is possibly some issue with dynamically adding the embedded flash objects in chrome on mouseover, or perhaps some difference between user scripts in chrome vs firefox with greasemonkey? Any help would be greatly appreciated, thanks
I'm not sure the reason behind it but I have been running into this on Chrome as well. I had two zeroclipboard implementations, one that was visible on page load, and one that was only visible when the user opened a dialog. The one that was visible on page load worked as expected, but the other one didn't. In order to "solve" the issue, I had to render the zeroclipboard link, set its absolute position to be off the screen (-500 px), then add some javascript to move the link into place when the dialog opens. This is an ugly solution but I think is the only way to get it to work in Chrome. Your case is particularly hairy since you have lots of dynamic zeroclipboards on your page whereas I only had one, but it seems to me that there's no reason this won't work for you.
<!-- <script type="text/javascript" src="http://davidwalsh.name/demo/ZeroClipboard.js"></script> -->
function copyText(fieldName,buttonName){
var fieldNameTemp =fieldName;
var buttonNameTemp =buttonName;
var val = "";
try{
val = navigator.userAgent.toLowerCase();
}catch(e){}
var swfurl = "js/ZeroClipboard.swf";
setTimeout(function () {
ZeroClipboard.setMoviePath(swfurl);
var clip = new ZeroClipboard.Client();
clip.addEventListener('mousedown', function () {
clip.setText(document.getElementById(fieldNameTemp).value);
});
clip.addEventListener('complete', function (client, text) {
try{
if(val.indexOf("opera") > -1 || val.indexOf("msie") > -1 || val.indexOf("safari") > -1 || val.indexOf("chrome") > -1){
alert('Your text has been copied');
}
}catch(e){
alert('Please alert not use on fireFox');
}
});
clip.glue(buttonNameTemp);
}, 2000);
}

Prevent selecting & copying

I want to inactive selecting & copying text in html page.
when I used Javascript & inactive right click user can use Ctrl+V!!
You can't. Don't even try. Don't annoy your users.
If you put it publicly on the web, it can be copied. Technically, it already is copied as soon as the user sees it. As colithium pointed out, all the techniques can be circumvented. Heck, you can look at the source code. You can curl the raw data from the command line, no JS/IMG/layer hack can prevent that.
There is no full proof solution. You can play javascript games (easy to turn off). You can place invisible layers about the text so it can't be selected easily (easy to view source). You can use images instead of text (just bad).
While I agree in principle with the other posters that trying to do this may annoy the user, sometimes a manager or customer demands that this be done, and so an answer needs to be supplied.
Check out this page on www.dynamicdrive.com that will supply you with a few JavaScripts towards this end. Specifically see "Disable Text Select Script" and "No right click script".
Disable Text Select Script:
/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"
No right click script:
//Disable right mouse click Script
//By Maximus (maximus#nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com
var message = "Function Disabled!";
///////////////////////////////////
function clickIE4() {
if (event.button == 2) {
alert(message);
return false;
}
}
function clickNS4(e) {
if (document.layers || document.getElementById && !document.all) {
if (e.which == 2 || e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = clickNS4;
} else if (document.all && !document.getElementById) {
document.onmousedown = clickIE4;
}
document.oncontextmenu = new Function("alert(message);return false")

Categories

Resources