Could not initiate tui-image-editor on Localhost - javascript

I am trying to initialize, tui-image-editor on my local host. I have downloaded this famous image editor from https://github.com/nhn/tui.image-editor
Here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TUI Image Editor</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
<link rel="stylesheet" href="http://localhost/imageEditor/dist/tui-image-editor.css">
<script src="http://localhost/imageEditor/dist/tui-image-editor.js"></script>
<script>
var ImageEditor = require('tui-image-editor');
var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
includeUI: {
loadImage: {
path: 'jp.jpg',
name: 'SampleImage'
},
theme: blackTheme, // or whiteTheme
initMenu: 'filter',
menuBarPosition: 'bottom'
},
cssMaxWidth: 700,
cssMaxHeight: 500,
selectionStyle: {
cornerSize: 20,
rotatingPointOffset: 70
}
});
</script>
</head>
<body>
<div id="tui-image-editor" style="height: 200px">
<canvas></canvas>
</div>
</body>
</html>
In result, I am getting blank page, No error no warning
I am not getting way out of this situation, could you please identify where I am doing bad ?

Related

$(document).ready(function()) is not working in jsp

$(document).ready(function()) is not working in my jsp.I have tried in many forms.
My code is:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="scripts/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Upload Success</title>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquerymin.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
alert("Hiiii");
});
</script>
</head>
<body>
</body>
</html>
Try This... I have Tested, working fine....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Upload Success</title>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
alert("Hiiiiii.........");
});
</script>
</head>
<body>
</body>
</html>
$(Document).ready is works when loaded JQuery library.
For example:
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
alert("Hello World!!!");
});
</script>

Changing JWPlayer video onClick

This is what I have so far below. If I hard code the file: media/video2.mp4 in the function it works but when I make it a variable its not passing it through correctly because I keep get this error:
Error loading player: No playable sources found
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My JWPlayer</title>
<script type="text/javascript" src="jwplayer/jwplayer.js" ></script>
<script type="text/javascript">
function changeVideo(filename) {
jwplayer("video").setup({
file: " + filename + ",
height: 360,
width: 640,
});
jwplayer('video').load();
}
</script>
</head>
<body>
<div id="video">Loading the player ...</div>
<script type="text/javascript">
jwplayer("video").setup({
file: "media/video1.mp4",
height: 360,
width: 640
});
</script>
<p>Play Video 2</p>
</body>
</html>
It is because you are placing variable filename in the script as a string literal.
just change this line
file: " + filename + ",
to
file: filename,
and it will work fine!

Jquery-ui resizable plugin doesn't work

what on earth am i doing wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Draggable crop</title>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript" src="/scripts/jquery.ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.image_outline').resizable();
});
</script>
<style type="text/css">
.image_outline {
border: dashed 1px #000;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div class="image_outline"></div>
</body>
</html>
Here's the code on jsfiddle: http://jsfiddle.net/dAHt8/
Why is the resizeable plugin not making the div resizeable?
Works fine once you add the right CSS link:
jsFiddle example.
For that jsFiddle I linked to the hosted jQuery UI CSS at: http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css

innerHTML not recive his cookie title

I got two files, one file called "TitleLinkCookie.html",when I click on some link are creates a cookie named "NewTitle" . with value innerHTML in our case, "Hello world php 1"/2/3.and is working well. The second file called "showCodePhp.html", it is needed to receive the cookie title and display it in h3 tag id="TitleField", innerHTML, from some reason it is not working as I want. Thanks for any help.
TitleLinkCookie.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<META NAME="Description" CONTENT="Guide,Tutorial">
<meta name="keywords" content="HTML,CSS,JavaScript, jQuery,Html5,Framework,php,photoshop,design" />
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Link guide</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<STYLE type="text/css">
a { color:red; margin:5px; cursor:pointer; }
a:hover { background:yellow; }?
</STYLE>
<script type="text/javascript">
$(document).ready(function() {
$('a').each(function() {
$(this).click(function() {
var varibaleTitle=$(this).html();
setCookie(varibaleTitle);
});
});
function setCookie(varibaleTitle){
var expireDate = new Date();
expireDate.setMonth(expireDate.getMonth()+1);
var NewTitle = varibaleTitle;
document.cookie = "NewTitle=" + NewTitle + ";path=/;expires=" + expireDate.toGMTString();
alert(varibaleTitle)};//end function setCookie
});// document ready
</script>
</head>
<body >
<p><a id="link1" href="showCodePhp.html" >Hello world php 1</a></p>
<p><a id="link2" href="showCodePhp.html" >Hello world php 2</a></p>
<p><a id="link3" href="showCodePhp.html" >Hello world php 3</a></p>
</body >
</html>
showCodePhp.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello World</title>
<!--<script src="http://www.centerwow.com/gotemp/gotemptics.js" type="text/javascript"></script>-->
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<script type="text/javascript">
$(document).ready(function() {
function reedCookie() {
var str =document.cookie.split("=")[1];
var str2 = document.getElementById("TitleField").innerHTML;
if (document.cookie != "") {
str2 = "Your Title is : " + str;
}//end reedCookie
});// document ready
</script>
</head>
<body style="background: white; font-family: Helvetica">
<p>Back to Home</p>
<p><h3 id="TitleField"></h3>Title : </p>
<pre class="brush: php;">
<?
// Hello world in PHP
print("Hello World");
?>
</pre>
<body>
</html>
You stated that you need to change the innerHTML of the HTML element "TitleField" but actually you didn't set it!.
I modified you script to set it below :
<script type="text/javascript">
$(document).ready(function() {
function reedCookie() {
var str =document.cookie.split("=")[1];
var str2 = document.getElementById("TitleField").innerHTML;
if (document.cookie != "") {
$("#TitleField").html("Title :"+ str );
}//end reedCookie
});// document ready
</script>

Shadowbox (js) as a popup

I'm playing with shadowbox and I want to launch it when user's landing on the index page of my web site.
I can use the shadowbox like that:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>title</title>
<!-- Set paramètres pour le shadowbox (CSS, JS? . . .) -->
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
</head>
<body>
My Image
</body>
</html>
I tried to make a onload function but it doesn't work (I can't set the link to the picture on it?):
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {onPageLoad()});
window.onload = function(){
Shadowbox.init();
};
</script>
</head>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Clemz</title>
<!-- Set paramètres pour le shadowbox (CSS, JS? . . .) -->
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
// skip the automatic setup
skipSetup: true
});
window.onload = function() {
// open ASA the window loads
Shadowbox.open({
content: '<img src="image.png" alt="alt" />',
player: "html",
title: "Welcome dude",
height: 502,
width: 350
});
};
</script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Works proprely ;-)

Categories