I currently have an html page where I use javascript to add a link to a different port on the same host, as in the code below.
If I'm on a machine with address 192.168.1.10:8090 the link provided is 192.168.1.10:5000
I'm trying to the same function to a wordpress site, but can't work out how to add javascript and add a link to the page (or reference an existing link).
I've not used wordpress before, so grateful for any help with this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
</head>
<body>
<div id="ext_link" style="text-align:center">
<script>
window.onload = function(){
var x = location.hostname;
var init = "http://";
var link_stem = x.concat(':5000');
var link_address = init.concat(link_stem);
console.log(link_address);
var a = document.createElement('a');
var linkText = document.createTextNode("Link to Port 5000");
a.appendChild(linkText);
a.title = "LinkToPort5000";
a.href = link_address;
document.getElementById("ext_link").appendChild(a);
};
</script>
</div>
</body>
</html>
Related
I would like to use the API to display a wikipedia page as-is on my website.
I found this API which could help but the documentation is limited and I can't figure much on how to use it.
In the user guide they reference a toy wiki browser called miniwiki, I used that as a base for the following code :
<!DOCTYPE html>
<!-- testing purpose file, used for trying to print a correctly formatted wikipedia page -->
<html>
<head> <!-- Tout ce qui est pas dans le contenu -->
<title> game setup </title> <!-- Titre de l'onglet -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<link rel="stylesheet" href="//en.wikipedia.org/w/load.php?modules=mediawiki.legacy.commonPrint,shared|mediawiki.skinning.elements|mediawiki.skinning.content|mediawiki.skinning.interface|skins.vector.styles|site|mediawiki.skinning.content.parsoid|ext.cite.style&only=styles&skin=vector"/>
</head>
<body style="background-color:white;">
<h1 id="wiki-title">MiniWiki</h1>
<div id="content"></div>
<script>
var contentElem = document.getElementById('content');
var stylesheetElem = document.getElementById('style');
var titleElem = document.getElementById('wiki-title');
var url = 'https://en.wikipedia.org:443/api/rest_v1/page/html/Ancient_Egypt';
$.ajax(url).then(function (data) {
var $content = $(contentElem).empty();
// $(stylesheetElem).remove();
var doc = (new DOMParser()).parseFromString(data, 'text/html');
// stylesheetElem = doc.querySelector('head link[rel="stylesheet"]');
$('head').append(stylesheetElem);
$(titleElem).text(doc.title.replace(/^User:Cscott\//, '').replace(/_/g, ' '));
Array.from(doc.body.attributes).forEach(function (attr) {
$content.attr(attr.name, attr.value);
});
$content.append(Array.from(doc.body.children));
});
</script>
</body>
</html>
As you can see if you try it, it returns some 404 errors, the page display some elements correctly, and some not at all. The same issues are present on the Miniwiki, so I wonder how to correct them.
So am I correct to assume you want to display the page exactly as Wikipedia is showing it ? Currently you request that single page, same as https://en.wikipedia.org/wiki/Ancient_Egypt?action=render. Perhaps use an iFrame with the url I mentioned? Would that solve the problem ?
So as an addition to my comment, you could just grab the stylesheet from the url with Ajax. It's already in your code.
For me this works like a charm :
<!DOCTYPE html>
<!-- testing purpose file, used for trying to print a correctly formatted wikipedia page -->
<html>
<head> <!-- Tout ce qui est pas dans le contenu -->
<meta charset="utf-8"/>
<title> game setup </title> <!-- Titre de l'onglet -->
<base href="//en.wikipedia.org" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
</head>
<body style="background-color:white;">
<h1 id="wiki-title">MiniWiki</h1>
<div id="content"></div>
<script>
var contentElem = document.getElementById('content');
var titleElem = document.getElementById('wiki-title');
var url = 'https://en.wikipedia.org:443/api/rest_v1/page/html/Ancient_Egypt';
$.ajax(url).then(function (data) {
var $content = $(contentElem).empty();
// $(stylesheetElem).remove();
var doc = (new DOMParser()).parseFromString(data, 'text/html');
var stylesheetElem = doc.querySelector('head link[rel="stylesheet"]');
$('head').append(stylesheetElem);
$(titleElem).text(doc.title.replace(/^User:Cscott\//, '').replace(/_/g, ' '));
Array.from(doc.body.attributes).forEach(function (attr) {
$content.attr(attr.name, attr.value);
});
$content.append(Array.from(doc.body.children));
});
</script>
</body>
</html>
I have a JavaScript code for random text/url using an external JavaScript, but lets say I have about 100 urls to put in for random text/urls, What would be the best option? JavaScript or something else? I would love to be able to use an external .txt file but I'm a newbie when it comes to PHP. Any ideas or code that may help me on this strange question?
heres the JavaScript code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML .01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
(function(){
var myLinks = [
{href: 'http://www.whatever.com/somepage.htm', text: 'Some Page'},
{href: 'http://www.whatever.com/anotherpage.htm', text: 'Another Page'},
{href: 'http://www.whatever.com/yetanotherpage.htm', text: 'Yet Another Page'}
];
onload = function(){
var link = myLinks[Math.floor(Math.random() * myLinks.length)],
pageLink = document.getElementById('myLink');
pageLink.href = link.href;
pageLink.firstChild.nodeValue = link.text;
pageLink.target = '_blank';
};
})();
</script>
</head>
<body>
<div>
<a id="myLink" href="somedefault.htm">Some Default Text</a>
</div>
</body>
</html>
I haven't learned PHP， If I understand what you say,use PHP random with a text/url assigned to the href attribute of tag a。
FYI, I am not at all a programmer so anything will have to spelled out clearly.
I am using this .js script inside sharepoint. It works fine!
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>ColorBox demo</title>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
</head>
<body>
<h1>Hello, there!</h1>
<h2>This is some content</h2>
<p>The popup will open in five seconds</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
function openColorBox(){
$.colorbox({iframe:true, width:"40%", height:"30%", href: "http://172.16.96.254/pf17.html"});
}
setTimeout(openColorBox, 5000);
setTimeout(parent.$.colorbox.close, 15000);
</script>
</body>
</html>
I have created several Pages on a local internal site. pf1.html - pf21.html
I would like to randomize these when the popup runs.
I have seen this function..posted in this forum.
(Math.random()*11)
How can I add this to the above script and randomize the pages.
This is the full random clip
$(document).ready(function() {
$("a.colorbox").click(function() {
$(this).attr("href","print"+Math.floor(Math.random()*11)+".html");
});
I know the *11 sets the number of pages..
Try something like:
function openColorBox(){
var urlBase = "http://172.16.96.254/pf";
var urlPage = Math.floor(Math.random() * 21);
var urlExt = ".html";
var randomizedURL = urlBase + urlPage + urlExt;
$.colorbox({iframe:true, width:"40%", height:"30%", href: randomizedURL});
}
setTimeout(openColorBox, 5000);
setTimeout(parent.$.colorbox.close, 15000);
I got this code from the GitHub:
<script src="path/to/jSignature.min.js"></script>
<script>
$(document).ready(function() {
$("#signature").jSignature()
})
</script>
<div id="signature"></div>
But it doesn't pull anything up on the actual webpage. I would think there is more code required but I don't know where to start.
Here is a minimal working example
<!DOCTYPE html>
<html lang="en">
<head>
<lang>
<title>Minimal working jSignature Example</title>
<meta charset="UTF-8">
<!-- Files from the origin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://willowsystems.github.io/jSignature/js/libs/jSignature.min.js"></script>
<head>
<script>
$(document).ready(function() {
// Initialize jSignature
$("#signature").jSignature();
})
// ripped from the description at their the Github page
function getBase64Sig(){
// get the element where the signature have been put
var $sigdiv = $("#signature");
// get a base64 URL for a SVG picture
var data = $sigdiv.jSignature("getData", "svgbase64");
// build the image...
var i = new Image();
i.src = "data:" + data[0] + "," + data[1];
// and put it somewhere where the sun shines brightly upon it.
$(i).appendTo($("#output"));
}
</script>
<body>
Put your signature here:
<div id="signature"></div>
<button onclick="getBase64Sig()">Get Base64</button>
<div id="output"></div>
</body>
</html>
I hope you can go on from here.
It is really as simple as they describe it to be, only their description of the actual example is a bit lacking for beginners.
Do I need to place the files in a local-server or any server to get the results?
index.html:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta char-set = "UTF-8">
<title>AngularJS | Passing Data between Different Scopes</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src = "controller.js"></script>
</head>
<body ng-app = "mainApp">
<div ng-controller = "app">
<li ng-repeat = "i in myRange">
{{i}} <br/>
</li>
</div>
</body>
</html>
controller.js:
var app = angular.module('mainApp', []);
app.controller('app', function($scope) {
var range = 10;
var myRange = [];
for (i = 0; i<range; i++)
{
myRange.push(i);
}
$scope.myRange = myRange;
});
When i'm running using localhost it gets the result i wanted. But when I run it without using any server or local-server it shows only the html page, not returning data from controller.js file. As i know this must work without using of any local-server. what's the wrong here?
Edit:
When i run the html file without using local-server the output is as follows.
As #csharpfolk suggested, the problem is with loading angular.js library use 'https://' instead of '//'. If you use '//' browser will try to load using 'file://' protocol.