So I'm trying to make a custom BBCode for my forum that will properly color coding by it's language. It works great but it's appearing completely inline and doesn't line break at all like it should.
Here is the coding:
<head>
<link rel="stylesheet" type="text/css" href="http://z3.ifrm.com/63/1/0/p509771/prism.css" />
<body>
<script type="text/javascript">
function addLang(nClass, nName) {
$('blockquote dt:contains(' + nClass + ')').parents('blockquote').find('code').addClass('language-' + nClass);
$('blockquote dt:contains(' + nClass + ')').text('Code: ' + nName);
}
addLang('css', 'CSS');
addLang('javascript', 'JavaScript');
addLang('php', 'PHP');
addLang('sql', 'SQL');
addLang('c++', 'C++');
addLang('c#', 'C#');
addLang('python', 'Python');
addLang('java', 'Java');
</script>
<script type="text/javascript" src="http://z3.ifrm.com/63/1/0/p509772/prism.js"></script>
Here is how it appears: http://i.imgur.com/I67HO7I.png
Here is an example of how I want it to appear: http://i.imgur.com/7kjlrxD.png
Related
I was trying to work with Toast UI calendar available here:
https://github.com/nhn/tui.calendar
I tried to use it via CDN which requires us to insert the following:
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.css" />
<!-- If you use the default popups, use this. -->
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" />
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css" />
<script src="https://uicdn.toast.com/tui.code-snippet/latest/tui-code-snippet.js"></script>
<script src="https://uicdn.toast.com/tui.dom/v3.0.0/tui-dom.js"></script>
<script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>
When I tried to create a calendar in my html file, I noticed that it lacked a few functions such as date-picker, render-range, or even the event scheduler pop-up. I also noticed that they talk of tui-code-snippet as a dependency for this calendar:
https://github.com/nhn/tui.calendar#-dependency
However, I'm not sure what to include from the tui-code-snippet exactly, as there are a bunch of functions in there and they state that we should only import the functions we need from it:
https://github.com/nhn/tui.code-snippet#-usage
Any help in this would be greatly appreciated.
EDIT: I added the following tui-code-snippet file as well, and this only helped me to get the calendar to show/render, but all the functionalities are still missing:
<script src="https://uicdn.toast.com/tui.code-snippet/latest/tui-code-snippet.js"></script>
The code lacks a few js links such as :
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.13/chance.min.js"></script>
Once these links are attached, we simply need to create a tui.calendar instance and then post the custom options as required. An example of such can be:
<script type="text/javascript">
var cal, resizeThrottled;
var useCreationPopup = true;
var useDetailPopup = true;
var datePicker, selectedCalendar;
cal = new tui.Calendar('#calendar', {
defaultView: 'week',
useCreationPopup: useCreationPopup,
useDetailPopup: useDetailPopup,
calendars: CalendarList,
template: {
milestone: function(model) {
return '<span class="calendar-font-icon ic-milestone-b"></span> <span style="background-color: ' + model.bgColor + '">' + model.title + '</span>';
},
allday: function(schedule) {
return getTimeTemplate(schedule, true);
},
time: function(schedule) {
return getTimeTemplate(schedule, false);
}
}
});
</script>
and it should load the calendar just fine, and allow adding events to the scheduler.
I hope this helps anyone else stuck in a similar problem.
I'm brand new to javascript and jquery. I'd like to load a random image when I load the page. I found some code that looked really easy, but I can't seem to make it work and I don't know what I'm doing wrong. Everything looks good to me....
My HTML is below:
<html xmlns="http://www.23.org/19999/xhtml">
<head>
<title>A Site Just For Me!</title>
<script type="text/javascript" src="jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Economica:400,700|Francois+One' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="myjs.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="me_css.css">
</head>
<body >
<div class="jumbotron">
<div class="container">
<div class="greeting"></div>
<div id="happypic"></div>
<div id="banner"></div>
<div id="banner2"></div>
</div>
</div>
</body>
</html>
Here's my javascript file:
// A $( document ).ready() block.
$( document ).ready(function() {
});
//This is where i set up my greeting.
var nowDate=new Date();
var nowHour=nowDate.getHours();
var greeting;
if (nowHour<11)
{
//good morning
greeting="Good morning";
}
else if (nowHour<16)
{
//good afternoon
greeting="Good afternoon";
}
else
{
//good evening
greeting="Good evening";
}
//document.write("<center><h1>"+greeting+", Loser!");//
// This is where i put my random picture chooser
// pictures
//random image experiment
var hawaiiPix=new Array("hawaii1.jpg", "hawaii2.jpg", "hawaii3.jpg", "hawaii4.jpg", "hawaii5.jpg");
$('<img src="img/'+hawaiiPix[Math.floor(Math.random()*hawaiiPix.length)]+'">"').appendTo('#happypic');
var images = ["hawaii1.jpg", "hawaii2.jpg", "hawaii3.jpg", "hawaii4.jpg", "hawaii5.jpg"];
$('<img src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner');
$('<h1>Hello</h1>').appendTo('#banner2');
Any insight would be much appreciated...
The problem is that your jQuery code is outside the ready function, so it is running before the DOM has been loaded, so it cannot add the image because those elements don't exists in the HTML page yet.
One way is to put the loading of your myjs.js file before </body> so when it executes the items are loaded (you'll need to remove the jQuery.ready code) or you can put it inside the ready block like this:
$( document ).ready(function() {
//This is where i set up my greeting.
var nowDate=new Date();
var nowHour=nowDate.getHours();
var greeting;
if (nowHour<11)
{
//good morning
greeting="Good morning";
}
else if (nowHour<16)
{
//good afternoon
greeting="Good afternoon";
}
else
{
//good evening
greeting="Good evening";
}
//document.write("<center><h1>"+greeting+", Loser!");//
// This is where i put my random picture chooser
// pictures
//random image experiment
var hawaiiPix=new Array("hawaii1.jpg", "hawaii2.jpg", "hawaii3.jpg", "hawaii4.jpg", "hawaii5.jpg");
$('<img src="img/'+hawaiiPix[Math.floor(Math.random()*hawaiiPix.length)]+'">"').appendTo('#happypic');
var images = ["hawaii1.jpg", "hawaii2.jpg", "hawaii3.jpg", "hawaii4.jpg", "hawaii5.jpg"];
$('<img src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner');
$('<h1>Hello</h1>').appendTo('#banner2');
});
The best way is to move the loading of jQuery and your JS file at the bottom of the html code.
I have fiddled for ages with escaping special characters and not, and doing this and that. I've exhausted the best part of a couple of hours and I need a fresh pair of eyes! What am I doing wrong?
Updated.
echo <<<EOT
<script type="text/javascript">
$( document ).ready( function () {
var w = window.open("{$address} result", "#", "width=800,height=600");
var d = w.document.open();
d.write("<!DOCTYPE html>
<html>
<head>
<title>{$address} result</title>
<link rel="stylesheet" href="css/base.css" type="text/css" />
</head>
<body>
<code>
Request method: {$request_method}
{$address}?{$qry_cfg}&{$man_qry}
$result
</code>
</body>
</html>");
d.close();
});
</script>
EOT;
I'm getting an Uncaught SyntaxError: Unexpected token ILLEGAL on line 15 which is where the d.write begins. This answer may help me but I'm having no luck thus far.
OUPUT:
<script type="text/javascript">
$( document ).ready( function () {
var w = window.open("https://api.classmarker.com/v1/groups/recent_results.json result", "#", "width=800,height=600");
var d = w.document.open();
d.write("<!DOCTYPE html>
<html>
<head>
<title>https://api.classmarker.com/v1/groups/recent_results.json result</title>
<link rel="stylesheet" href="css/base.css" type="text/css" />
</head>
<body>
<code>
Request method: 0
https://api.classmarker.com/v1/groups/recent_results.json?api_key=d4tsE7SvEgzAKlJPFrlvAz3oe9uFQnxy&signature=4495a14efc483aa5ee2f6d4cd480f968×tamp=1335783600&finishedAfterTimestamp=1335783600&=
{"status":"error","request_path":"v1\/groups\/recent_results","server_timestamp":1415026084,"finished_after_timestamp_used":1413809284,"error":{"error_code":"timeStampOutOfRange","error_message":"Access denied. Timestamp issue. Recalculate the digital signature with each call. (There is a 5-minute window of time variance allowed.) Use seconds since the UNIX Epoch, not milliseconds. Make sure your server calling our service is in sync with an atomic clock."}}
</code>
</body>
</html>");
d.close();
});
</script>
Syntax errors, due to incorrect escaping. From your generated JS:
d.write("
^---start of string
<!DOCTYPE html>
<html>
<head>
<title>https://api.classmarker.com/v1/groups/recent_results.json result</title>
<link rel="style[...snip...]
^---end of string
A trivial look at your browser's debug console would have told you this. Running around for 2+ hours, as you say you did, means you didn't look at the ONE thing that would immediately have told you about the problem.
Since you need your backslashes to get from PHP -> JS, you need to DOUBLE escape at the PHP level:
d.write(\"
<!DOCTYPE html>
<html>
<head>
<title>{$address} result</title>
<link rel=\\"sty
^^---note the doubled backslash.
Not sure if it is the problem, but you escape your newline character
\\n
Problem solved by using the following (verbose I know) code:
echo "\n<script type='text/javascript'>
$(document).ready( function () {
var w = window.open('{$address} result', '#', 'width=800,height=600');
var d = w.document.open();
d.write('<html>\
<head>\
<title>{$address} result</title>\
<link rel=\"stylesheet\" href=\"css/base.css\" type=\"text/css\" />\
</head>\
<body class=\"result\">\
<code>Request method: {$request_method}\\n{$address}\\n?{$qry_cfg}&{$man_qry}\\n", htmlentities($result), "</code>\
</body>\
</html>');
d.close();
});
</script>\n";
Not escaping the newlines may have been the crux of the problem. Funny because I knew this about JS and managed to overlook it here as it was working before in a different format.
I am trying to use jQuery.Lighbox library but it fails to find the lightBox method.
What I did:
include jquery.lightbox.js (immediatly after jquery itself):
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/jquery.lightbox.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.5.3.js"></script>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery.lightbox.js"></script>
...
<head>
and within the body I am am wiring up the lightbox code to html elements:
<body>
<script type="text/javascript">
$(function () {
try
{
$('#gallery a').lightBox(); // Select all links with lightbox class
}
catch (err) {
var txt = "";
txt = "There was an error on this page.\n\n";
txt += "Error description: " + err.message + "\n\n";
txt += "Click OK to continue.\n\n";
alert(txt);
}
});
</script>
and quite expectantly the js code throws an error:
There was an error on this page.Error description: Object [object
Object] has no method 'lightBox'Click OK to continue.
I am new to jQuery, so if you can give me a hint what did I do wrong and how to fix it.
Thank you.
edit:
resolved : it turned out jquery.js has been include twice, and it was hiding jquery.lightbox function.
Object [object Object] has no method 'lightBox'
this mean lightBox method is not found which means lightbox js is not loaded properly..check it out...view the source..and make sure your path is correct
I'm trying to add the video tag and apply MediaElement.js to it.
If I do this, it works correctly (reduced the Video tag for brevity, but doesn't throw any error):
<link rel='stylesheet' href='/_layouts/MediaElementWebPart/mediaelementplayer.min.css' />
<script type="text/javascript" src='/_layouts/MediaElementWebPart/jquery.js'></script>
<script type="text/javascript" src='/_layouts/MediaElementWebPart/mediaelement-and-player.min.js'></script>
<video width='640' height='320' id='MEWP'>
</video>
<script>$('MEWP').mediaelementplayer()</script>
But, if I add the tag through code, .mediaelementplayer() throws SCRIPT438: Object doesn't support property or method 'mediaelementplayer'
<link rel='stylesheet' href='/_layouts/MediaElementWebPart/mediaelementplayer.min.css' />
<script type="text/javascript" src='/_layouts/MediaElementWebPart/jquery.js'></script>
<script type="text/javascript" src='/_layouts/MediaElementWebPart/mediaelement-and-player.min.js'></script>
<div id="videosContainer">
</div>
<script type="text/javascript">
$(function () {
var random = Math.floor((Math.random() * 100000) + 1);
var id = "MEWP-" + random.toString();
var video = "<video width=\'640\' height=\'320\' id=\'" + id + "\' ></video>";
$(video).appendTo('#videosContainer');
$('#' + id).mediaelementplayer();
});
</script>
The video tag's element seems to be found though, per the debugger
[+] $('#' + id)[0] {...} [Object, HTMLVideoElement]
What am I missing here? Any general advice for troubleshoot these kind of things, appreciated.