I'm developing a web application using websocket by taking reference from https://code.kx.com/v2/wp/websockets/.
The application resides at path:
Directory structure:
/Users/repos/chatu/
-->html
--> main.html
--> main.js
-->q
--> main.q
q)\pwd
"/Users/repos/chatu" //- and main.html(index) is at path /Users/repos/chatu/html/main.html
When the pwd is "/Users/repos/chatu" then the webpage is opening properly on browser using url - http://localhost:5001/main.html
But when the pwd is changed to any other directory such as
q)\pwd
"/Users/repos"
Then hitting same url as above throws below error :
html/main.html: not found
What I can understand from the error is that web server is expecting the html/main.html at the current working directory and it is not able to find that.
How/Where can I set absolute path for index.html that from any current working directory the web browser can find the main.html page?(Cannot find/understand any answer which solves same problem).
Code snippet -
main.js
function connect(){
if ("WebSocket" in window) {
ws = new WebSocket("ws://localhost:5001/");
output.value="connecting...";
/* ws.onopen=function(e){output.innerHTML="connected"}; */
ws.onclose=function(e){output.innerHTML="disconnected"};
ws.onerror=function(e){output.value=e.data};
/*
when a message is received,
prepend the message to the display area
along with the input command
*/
} else alert("WebSockets not supported on your browser.");
}
main.html
<!doctype html>
<html>
<head>
<title>Chatu</title>
<style>
/* define some CSS styling on page elements */
div#wrap{
width:100%;
overflow:auto;
}
textarea#txtInput {width: 97.5%; height: 60px; float:left; padding: 10px; margin-top: 10px;}
div#txtOutput{
width: 97.5%; height: 300px; font-family: "Courier New"; padding: 10px;
border: 1px solid gray; margin-top: 2px; overflow:auto;
}
</style>
</head>
<body>
<div id="wrap">
<fieldset id='heads' style="border:1; border-radius:10px">
<legend align="center" style="color:blue">Chatu</legend>
<div id="txtOutput"></div>
<textarea id="txtInput" autofocus></textarea>
</fieldset>
</div>
</body>
<script type="text/javascript" src="main.js"></script>
</html>
main.q
.z.ws:{neg[.z.w].j.j #[.da.mf;x;{`$ "'",x}];};
I believe the way you can set an absolute path for index html as you have described in your kdb web application is assigning this path using .h.HOME.
The variable .h.HOME is a string which contains the location of the webserver root.
If you would like a more detailed explanation on .h.HOME refer to https://code.kx.com/v2/ref/doth/#hhome-webserver-root
.h.HOME is the variable you are interested in
https://code.kx.com/v2/ref/doth/#hhome-webserver-root
Related
I am generating QR code using google chart api, How can I insert image inside Image.
What I get QR code as for now,
enter image description here
What I want QR code,
enter image description here
can someone help for me to solve this problem.
Warning: This API is deprecated. Please use the actively maintained Google Charts API instead. See our deprecation policy for details
You pass your QR payload to the API endpoint and get an image in return:
https://quickchart.io/qr?text=Hello world
or
Another alternative is Image-Charts
(highly reliable, deployed in data-centers around the world, sub-second response time)
https://documentation.image-charts.com/qr-codes/
Unfortunately, with my understanding, Chart API doesn't have such a function.
But you can use Image-Overlay by using CSS.
Like this:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
.qrcode
{
position: relative;
top: 0;
left: 0;
width: 200px;
height: 200px;
}
.shell
{
position: absolute;
top: 80px;
left: 80px;
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<div style="position: relative; left: 0; top: 0;">
<img class="qrcode" src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=Hello%20world&choe=UTF-8" alt="QR code" />
<img class="shell" src="YOUR IMAGE'S URL" />
</div>
</body>
</html>
You can see my sample page here.
Though, note that Chart's QRcode API has already been deprecated.
HTML CODE:
(Image is present in the right directory)
<html lang="en-US">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<h1>Sample Header</h1>
</header>
<main>
<article>
<h2>Sample Header 2</h2>
<p>Sample Paragraph 1</p>
<p>Sample Paragraph 2</p>
</article>
</main>
</body>
CSS CODE:
html{
font-family: 'Open Sans', sans-serif;
background-image: url('images/pattern.png');
background-color: burlywood;
}
body {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background-color: white;
position: relative;
}
header {
height: 150px;
}
h1 {
font-size: 50px;
line-height: 140px;
margin: 0 0 0 32.5px;
}
main {
background: #ccc;
}
article {
padding: 20px;
}
h2 {
margin-top: 0;
}
p {
line-height: 2;
}
background-image does not work in the above form,but when the same css-code is included in style tag,background-image works perfectly fine,why not in external stylesheet?
I think this is a path issue for the background-image: url(...). I can't reproduce at the moment because of lacking information but please be aware of your folder structure. When you use <style> for CSS the starting point for the relative path is your root folder (or where the HTML is located).
In case of the style.css the starting point is the folder styles. So mind that in that case the path might have to change. You can use the Firefox developer tools or Chrome developer tools to modify your path on the fly. This way you can easily find out yourself where the issue with the path originates or if the background-image rule was applied properly on your element.
Updated: added links to developer tools (Mozilla, Google)
Is there an easy way to disable the styling provided by the Intel XDK? Specifically from af.ui.css.
The styling causes problems, especially when you are using external libraries. It would be nice to do something like jQuery Mobile's data-role='none'
e.g. I am trying to use a CSS style for star rating where the user can rate by touching or clicking on stars. This works fine on a normal HTML JavaScript page but somehow the af.ui.css gives one of the elements a width of 60%. These are the lines from af.ui.css which do that:
#afui input[type="radio"] + label,
#afui input[type="checkbox"] + label {
display: inline-block;
width: 60%;
float: right;
position: relative;
text-align: left;
padding: 10px 0 0 0;
}
This is the HTML it is acting on:
<label for="Ans_1" class="star rb0l" onclick=""></label>
If I comment the width statement in af.ui.css, it messes up other checkboxes. I tried to force a width in the label by using at style="width:.." but that doesn't work either.
Any suggestions?
Without more code structure it is hard to know exactly what could be going wrong.
In general if you use style="width:..." it should override afui.ui.css unless the css is being loaded after your inline styles and clobbers them. You can try to force your css style by using CSS '!important'
.star {
width: 20px !important;
}
either in an external CSS file or in style tags in your html file that load after the afui.ui.css file. You could even try style="width: 20px !important;". Some more info on this: http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
In general I would use images or css for a star rating not checkbox or radio buttons. Here is a good example: http://css-tricks.com/star-ratings/
Let me know if that works for you or if you could include a screenshot or more html structure I can try to help.
You should be able to create your own id and then as long as you apply your styles after afui.ui.css is loaded it should keep the app framework styles but only override your star checkbox.
html file:
<head>
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
</head>
<body>
<label id="idname"></label>
</body>
<style>
#afui input[type="checkbox"] + label + #idname {
width: 20px;
}
</style>
OR...
html file:
<head>
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
<link rel="stylesheet" type="text/css" href="star.css">
</head>
<body>
<label id="idname"></label>
</body>
star css file:
#afui input[type="checkbox"] + label + #idname {
width: 20px;
}
I'm not sure if my question makes sense, but,
I'm using jQuery to toggle an image from its off-state to its on-state upon click.
That was hard enough to get to work (I'm rather novice).
The problem is that the on-state is an image with a fair amount of body copy. It obviously does not look as good as it would if it were live type.
I was wondering, if it's even possible, that the on-state be a div with live text that is hidden until the image is clicked.
I have no idea how to go about solving this problem as my knowledge of jQuery is rather limited.
The page is currently being hosted here
Script:
<script type="text/javascript">
$(function(){
$("#click li").click(function (e) {
$("#click li.selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});
});
</script>
You could include both a div -- initially hidden, with size matching the image -- and the image in each li.
CSS:
.imagetext {
display: none;
height: 50px; /* or whatever */
width: 50px;
}
#click li img {
display: block;
height: 50px; /* or whatever */
width: 50px;
}
#click li.selected img {
display: none;
}
#click .imagetext {
display: block;
}
HTML along the lines of:
<div id="#click">
<ul>
<li>
<img src="..." />
<div class="imagetext">Four score and seven...</div>
</li>
<!-- ... -->
</ul>
</div>
I was recently reading on Unobtrusive javascript and decided to give it a shot. Whether or not I decide to use this style is to be determined at a later time. This is just for my own curiosity and not for any time restricted project.
Now, I was looking at example code and a lot of the examples seem to be using, what took me forever to discover, jQuery. They use a function like $('class-name').whatever(...);
Well I rather like the look of $('class').function, so I tried to emulate it without using jQuery(as I don't know jQuery and don't care about it atm). I'm unable, however, to make this example work.
Here is my jsFiddle: http://jsfiddle.net/dethnull/K3eAc/3/
<!DOCTYPE html>
<html>
<head>
<title>Unobtrusive Javascript test</title>
<script>
function $(id) {
return document.getElementById(id);
}
$('tester').onclick(function () {
alert('Hello world');
});
</script>
<style>
.styled {
width: 200px;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
a {
cursor: pointer;
color: blue;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class='styled'>
<ul>
<li><a id='tester'>CLICK ME</a></li>
</ul>
</div>
</body>
</html>
I was expecting an alert box to pop up when you click on the link, but doesn't seem to happen. When checking the console in chrome it gives this message "Uncaught TypeError: Cannot call method 'onClick' of null"
I'm not a javascript expert, so more than likely I'm doing something wrong. Any help is appreciated.
Try this code,
Script
function $(id) {
return document.getElementById(id);
}
$('tester').addEventListener('click', function () {
alert('Hello world');
});
When you console this $('tester') selector, it simply returns <a id='tester'>CLICK ME</a> which is a html element not an object so you cannot use onclick directly. Instead you have to use addEventListener or attachEvent to bind a click event
Demo JS http://jsfiddle.net/K3eAc/4/
You don't need addEventListener or attachEvent: live demo.
The code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Unobtrusive Javascript test</title>
<style>
.styled {
width: 200px;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
</style>
</head>
<body>
<div class="styled">
<ul>
<li>CLICK ME</li>
</ul>
</div>
<script>
var tester = document.getElementById('tester');
tester.onclick = function() {
alert('Hello world');
}
</script>
</body>
</html>
.
I'm better in practice than in theory, but it would seem to me that with converting the targeted element into a variable, it becomes an object. Tested in IE8/9, Chrome25 and FF30.
Try this
function $(id) {
return document.getElementById(id);
}
var a = $('tester');
a.onclick = (function () {
alert('Hello world');
});
Reference : https://developer.mozilla.org/en-US/docs/DOM/element.onclick