I would like to embed HTML in a SharePoint 2013 that creates two hyper-links using JavaScript.
As an example I'd like the follow page with two links:
Click Here for Pages. Click Here for Documents
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
Click Here for pages.Click Here for Documents.
</body>
</html>
The reason I want javascript is I will ultimately extend this to dynamically generate the URLs with different links.
I have zero experience in JavaScript but learn best from example. I have done a lot of investigation but cannot find a simple example like this.
Thanks in advance.
The easiest way to do it would be to assign each link an ID so that you can assign them to variables in the JavaScript, and then modify the href property of each link. From there you can either hard code them or load via AJAX. Here is how to hard code them.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*These variables allow you to reference and manipulate the specfic DOM elements
(ie. the a tags we gave ID's of link1 and link2)*/
var link1 = document.getElementById('link1'),
link2 = document.getElementById('link2');
link1.href = 'http://example.com/Pages';
link2.href = 'http://example.com/Documents';
</script>
</head>
<body>
<a id="link1" href="">Click Here</a> for pages.<a id="link2" href="">Click Here</a> for Documents.
</body>
EDIT: I threw the script into a script tag inside of the HTML. Not sure if that's what you were asking but this is how to integrate them together. Here is a live example:
https://jsfiddle.net/h1b4a3gb/
Just to complete the answer my original question to run this within a SharePoint Content Editor Web part I used the following code.
<a id="link1">Click Here</a> for pages.<a id="link2">Click Here</a> for Documents.
<script type="text/javascript">
var link1 = document.getElementById("link1"),
link2 = document.getElementById("link2");
link1.href = "http://example.com/Pages";
link2.href = "http://example.com/Documents";
</script>
The key difference here is the script must appear after the link definitions otherwise it will not work as the DOM object doesn't exist.
Related
I'm really new in Wordpress, Javascript and HTML so I know this question is really basic, but I wasn't able to find it solved anywhere.
I want to create some variables in javascript and then display them in my page which is created in Wordpress.
Reading other posts I've found I need to insert a javascript code that at the end stores my variable this way (dummy version):
<script type="javascript">
document.getElementById('test').innerHTML = 'hello';
</script>
And then on the text block I want to display my variable to be displayed I should add this code:
<body>
<p id="test"></p>
</body>
However I've tried adding the javascript in the header (Tatsu header) and also tried adding it in the text block (HTML version) in different combinations and it never worked. Tried adding the script block before and after the body block, and also tried having it inside, before and after the display line.
If I try the following it works:
<body>
<p>hello</p>
</body>
So I guess my problem is that I'm not setting the variable properly.
Can anyone help? Apologies if this is already solved somewhere, spent some hours and wasn't able to find it.
Thank you in advance.
Your problem is the type of which you're using here:
<script type="javascript">
I noticed this whilst constructing an example of this problem.
javascript is not a correct mime type.
It should be text/javascript as per https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
Please note this is not a complete list. Such as application/javascript also being valid. Please also see https://www.iana.org/assignments/media-types/media-types.xhtml
Working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<p id="test">
This shouldn't show up
</p>
<script type="text/javascript">
console.log("####### JAVASCRIPT IS RUNNING ######")
document.getElementById('test').innerHTML = 'hello';
</script>
</body>
</html>
I am a complete beginner to javascript. I am also new to this website. I am asking for help to complete an assignment. I have been trying for more than 4 hours by looking at lecture material and online for a solution. It is causing me a lot of unnecessary stress. Before javascript we only used CSS and Html. I was given 6 javascript tasks to manipulate the html file (taskc.html) already given to me.
The tasks are as follows
Make a statement to change contents of h1 from "Welcome" to "Text"
2nd statement should make an new alert window when the page loads that delivers a message explaining what the page is about
3rd statement should change the title to "text"
4th statement should log the contents (innerHTML) of the first paragraph element in the console.
5th statement should hide the contents of the second paragraph when the page loads
6th statement should change the contents of the header to have a new colour of your choice
Here is that html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task C - The Document Object Mode</title>
</head>
<body>
<h1 id="header">Welcome</h1>
<p id="first">This site uses JavaScript</p>
<p id="second">Javascript is very useful</p>
</body>
</html>
Because the actual coding im meant to add is meant to be in the .js file I was given. so I figured I had to link the js file in the html file so I added
<script type="text/javascript" src="taskc.js"></script>
With that out of the way I went to the lecture notes and I thought I would simply need to modify some of the code given to me there like
document.getElementById('demo').innerHTML = 'Hello World!';
When I put this code in brackets I got the error (document is not defined)
I modified it to match the requirements for task 1
here it is
document.getElementById('header').innerHTML = 'text';
I was confused because I didn't know what this error meant and of course Errors and how to fix them are never explained so I had to lookup how to resolve the error.
I found that to fix it I have to declare it as a variable so I ended up doing this.
var document = 'taskc.html';
When I did this for document, alert and console all the errors went away, but when I did a live preview only statement 1 was working
If anyone could help me fix this I would really appreciate because I don't understand enough javascript to be able to complete this in a reasonable amount of time.
So first: Please use Javascript functions to keep your code tidy and clean.
Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task C - The Document Object Mode</title>
</head>
<body>
<h1 id="header">Welcome</h1>
<p id="first">This site uses JavaScript</p>
<p id="second">Javascript is very useful</p>
<script type="text/javascript" src="taskc.js">test();</script>
</body>
</html>
function test(){
alert("This is a test!");
}
Always implement scripts that are document referenced at the bottom of your html.
If you use JQuery you can use following code to check document is loaded:
$(document).ready(function(){
//foo bar
});
I am doing my damnedest to embed a Google trends chart into a section of my site.
In theory, it seems easy:
1.) copy script from Google:
2.) Clear a space in your webpage:
3.) Add the code:
<div class="full-row4" style="height: 300px;">
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1386_RC02/embed_loader.js"></script>
<script type="text/javascript">
trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"/m/078rys","geo":"","time":"today 12-m"}],"category":0,"property":""},
{"exploreQuery":"q=%2Fm%2F078rys&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}
);
</script>
</div>
Seems easy right? wrong!
Every time I do this, I get this result:
Upon further inspection, I found that when those scripts were loaded in, it wipes my entire body of the webpage. (Note: the chart gets loaded in thru an AJAX call containing the entire active page minus the navbars)
I've tried an array of different logic to try and get this to work, but everything I try deletes all HTML in the body tag of the webpage. (script tags are still there)
I found people with a similar issue, but it seems Google has changed how you embed these widgets into a site. Rendering any previous stackoverflow documentation useless. (at least from what I found)
you can use renderExploreWidgetTo() function instead, it takes DOM element as first parameter:
var divElem = document.getElementById('wrapper');
trends.embed.renderExploreWidgetTo(divElem,"TIMESERIES", {"comparisonItem":[{"keyword":"dbs bank","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dbs%20bank&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"});
Google trends embed script create an iframe at the hosting website.
Here is a simple example.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>hello</h1>
<div>
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1386_RC02/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"dogs","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dogs&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}); </script>
</div>
<h1>world</h1>
</body>
</html>
As you can see, the body is not affected.
The problem is probably not with the trends scripts, but a more general issue.
Try creating an iframe at your page, does it display correctly?
I am trying to figure out how to retrieve the full (that means all data) HTML page source from an <iframe> whose src is from the same originating domain as the page that it is embedded on. I want the exact source code at any given time, which could be dynamic due to Javascript or php generating the <iframe> html output. This means AJAX calls like $.get() will not work for me as the page could have been modified via Javascript or generated uniquely based on the request time or mt_rand() in php. I have not been able to retrieve the exact <!DOCTYPE> declaration from my <iframe>.
I have been experimenting around and searching through Stack Overflow and have not found a solution that retrieves all of the page source including the <!DOCTYPE> declaration.
One of the answers in How do I get the entire page's HTML with jQuery? suggests that in order to retrieve the <!DOCTYPE> information, you need to construct this declaration manually, by retrieving the <iframe>'s document.doctype property and then adding all of the attributes to the <!DOCTYPE> declaration yourself. Is this really the only way to retrieve this information from the <iframe>'s HTML page source?
Here are some notable Stack Overflow posts that I have looked through and that this is not a duplicate of:
Javascript: Get current page CURRENT source
Get selected element's outer HTML
https://stackoverflow.com/questions/4612143/how-to-get-page-source-using-jquery
How do I get the entire page's HTML with jQuery?
Jquery: get all html source of a page but excluding some #ids
jQuery: Get HTML including the selector?
Here is some of my local test code that illustrates my best attempt so far, which only retrieves the data within and including the <iframe>'s <html> tag:
main.html
<html>
<head>
<title>Testing with iframe</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function test() {
var doc = document.getElementById('iframe-source').contentWindow.document;
var html = $('html', doc).clone().wrap('<p>').parent().html();
$('#output').val(html);
}
</script>
</head>
<body>
<textarea id="output"></textarea>
<iframe id="iframe-source" src="iframe.html" onload="javascript:test()"></iframe>
</body>
</html>
iframe.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html class="html-tag-class">
<head class="head-tag-class">
<title>iframe Testing</title>
</head>
<body class="body-tag-class">
<h2>Testing header tag</h2>
<p>This is <strong>very</strong> exciting</p>
</body>
</html>
And here is a screenshot of these files run together in Google Chrome version 27.0.1453.110 m:
Summary
As you can see, Google Chrome's Inspect element shows that within the <iframe> the <!DOCTYPE> declaration is present, so how can I retrieve this data with the page source? This question also applies to any other declarations or other tags that are not contained within the <html> tags.
Any help or advice on retrieving this full page source code via Javascript would be greatly appreciated.
Here is a way to build it from the doctype, seems to work for html 4 and 5, I didn't test for stuff like svg.
<html>
<head>
<title>Testing with iframe</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function test() {
var d = document.getElementById('iframe-source').contentWindow.document;
var t = d.docType;
$('#output').val(
"<!DOCTYPE "+t.name+
(t.publicId? (" PUBLIC "+JSON.stringify(t.publicId)+" ") : "")+
(t.systemId? JSON.stringify(t.systemId) :"")+
">\n" + d.documentElement.outerHTML );
}
</script>
</head>
<body>
<textarea id="output"></textarea>
<iframe id="iframe-source" src="iframe.html" onload="test()"></iframe>
</body>
</html>
this also uses HTML.outerHTML to make sure you get any attribs on the documentElement.
How can I do a script to catch strings as input and open them on a Firefox document? Each link would go to a different window or tab. Any ideas would be much appreciated.
I just want to be able to take some links and open them. For example I have 50 Links. And copying and parsing those 50 Links take a really long time and also a lot of work. If I can just write a script to read those links and let the computer do the work, it will be very helpful for me. I just don't know how to write that or where because it does not sound too hard (just gotta know how to). Thanks for any suggestions.
if i got you right, i guess you could do something like this. This will open the four urls listed but it will probably be blocked by the popup blocker.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin tÃtulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script>
<!--
var dir = new Array();
dir[0] = "http://www.creativecorner.cl/";
dir[1] = "http://www.sourcing.cl/";
dir[2] = "http://www.feeds.cl/";
dir[3] = "http://www.neonomade.com/";
for(i = 0 ; i < dir.length ; i++){
window.open(dir[i],'autowindow' + i,'width=1024,height=768');
}
-->
</script>
</body>
</html>
Write this to a file names "links.html" on your hard disk:
<html>
<head><title>Your links</title></head>
<body>
Your links:<br />
XXX<br />
</body>
</html>
Replace the two "XXX" with one link and emit one "link" (a) line per link. You should be able to do that in most text editors with a little search'n'replace. After you're done, save the file and open it in your browser.
Another option is to look at the bookmark file of your browser and to duplicate the format. You can usually ignore things like "last visited", etc. Just add the links.
If you want to do this in JavaScript, you will need to use a form with a textarea. Create a small HTML document with a form, the JavaScript, the textarea and a div for the result.
Add a button which calls a JavaScript function which takes the text from the textarea, split it into lines and create the HTML above (only the link-lines) as a String. Now assign this string to the attribute innerHTML of the div to make the links clickable.