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
I am doing a proof-of-concept to see if ZingCharts is a viable solution in our web application. I am trying to create a simple stacked bar chart. Everything works fine in my example until I add a title to my style tag, title="mystyle". I am using the title in the style tag as this models the situation in our full-blown application where we include a number of css files all titled with our custom page style.
Here is my example code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello ZingChart World</title>
<style title="mystyle">
.h1 {
margin: 0 0 1px 0;
padding: 5px 7px 7px 7px;
font-size: 11px;
font-weight: bold;
background-color: #ceceb5;
border-color:#ffffff #ffffff #998B74 #ffffff;
border-width:0px 0px 2px 0px;
border-style:solid solid ridge solid;
}
table.fullTable {
width: 100%;
}
td.jsChartSection {
text-align: center;
border: 1px solid #888888;
background-color: #EFEFEF;
padding: 10px 20px 10px;
}
</style>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script>
var chartData={
"type": "bar",
"stacked":true,
"stack-type":"normal",
"backgroundColor":"#FFF0FF",
"hoverMode":"node",
"tooltip": {
"htmlMode":false
},
"legend":{
"align":"center",
"vertical-align":"bottom"
},
"plotarea": {
"width": '100%',
"height": '100%',
"margin": '20 20 50 70'
},
"scale-x":{
"values":["2009","2010","2011","2012","2013", "2014"],
"items-overlap":true,
"item":{
"font-angle":-45,
"auto-align":true
}
},
"scale-y":{
"label":{
"text":"# of Widgets"
},
"values": [-100,0,100,200,300,400,500,600,700,800,900,1000,1100]
},
"series": [
{ "values": [909, 579, 311, 275, 683, 921 ], "stack":1, "text":"Widget Increase", "background-color":"#404090" },
{ "values": [-95, -59, -32, -20, -65, -98 ], "stack":1, "text":"Widget Decrease", "background-color":"#008C50" }
]
};
window.onload=function(){
zingchart.render({
id:'chartDiv',
height:"320",
width:"100%",
data:chartData
});
};
</script>
</head>
<body>
<div class="h1">Chart Management with Zingcharts</div>
<div class="h1">Another div element</div>
<div class="h1">And another div element</div>
<div class="h1">And yet another div element</div>
<div class="databox">
<table cellspacing="5" class="fullTable">
<tr>
<td class="jsChartSection">
<div>
<div id='chartDiv'></div>
</div>
</td>
</tr>
</table>
<!-- databox -->
</div>
<!-- Content -->
</body>
</html>
When I do this in this example it causes an issue with the following img element that is generated by ZingChart...
<img id="chartDiv-img" class="zc-img" usemap="#chartDiv-map" style="position: absolute; border-width: 0px; width: 1825px; height: 320px; left: 0px; top: 0px; z-index: 0; opacity: 0; clip: rect(1px, 1824px, 319px, 1px);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
This element is placed in the top left-hand corner of my page, and the tooltips now behave strangely.
How can I get ZingChart to work correctly while still using my custom page style?
Thanks!
Place this in your <head> element:
<style title="zingchart"></style>
This will force ZingChart to inject its own styles into that element, preventing conflicts.
I'm on the ZingChart team, please let me know if you need anything else :)
Edit:
Apparently browsers implement the concept of "preferred" stylesheets, the idea being that if on one page you have:
<link rel="stylesheet" title="A">
<link rel="stylesheet" title="B">
...only the style from one CSS element will be used, the other will be ignored. The same happens with inline tags.
The problem is that ZingChart creates its own CSS rules dynamically, and injects a tag with title="zingchart". So, when in the HTML page there is another <style> or <link> with a different "title", one of them (most likely the ZingChart style) will be ignored.
We have removed the code which sets the "title" from our code, which will be available in our next public release. Meanwhile, you will need to remove the "title" attribute from your <style> element.
I want to make a responsive site that has an image with links you can click.
This site has invisible divs that sync up with the picture even as the image scales and resizes with the browser.
I want to first try to do the same thing with an image, and then I want to try it with a video.
Are they using any scss or javasript to make that happen, or are they just using css and html?
You can do it using just CSS and HTML, I've made a quick JSFiddle with a full size image background and a little nav.
As with the links you make the text on the image, then create a div ontop of them, don't set a background and just use a border until you get them in the correct place.
https://jsfiddle.net/2mow8qhv/2/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="bgHeader"></header>
<nav id="topNav">
Description | Gallery | Map |
Comments
</nav>
<div id="pageWrapper">
<div id="description">
<body>
</html>
/* Set all padding and margins to 0 by default, and colour to a grey unless overwritten*/
*{
padding: 0px;
margin: 0;
color: #333;
}
/* HEADER AND NAVIGATION*/
/* Sets a background image to fill 100% of the screen and fixes it in place*/
header#bgHeader{
background-image:url("http://seattlebubble.com/blog/wp-content/uploads/2014/11/Weyerhaeuser-Mansion_Tacoma.jpg");
background-size: cover;
background-position: center center;
background-attachment: fixed;
position:absolute;
width:100%;
height:100%;
}
/* Sets the navigation menu to the bottom of the page, and layered above the image*/
nav#topNav{
height: 60px;
width: 100%;
position: absolute;
bottom: 0px;
font-size: 1.5em;
line-height: 55px;
z-index: 2;
background: #000;
opacity: 0.7;
text-align: center;
}#topNav a{
text-decoration: none;
color: #FFF;
}#topNav a:hover{
color: #CCC;
}
At the moment the used code centers a div with a width of 980px in a background div which contains an image with a link. This works fine on PC, Apple and Android. When the resolution is more than 980px, you see the background image equally on both sides. On Android phone or tablet you see 100% of the maincontainer div. But on iPhone and iPad, the maincontainer div aligns to the left and you see about 200px of the background div on the right side. I tried a lot of things, but I can't get it to act on iPhone and iPad like it does on Android devices: the maincontainer div 100% of the viewport.
My code is this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
html {
height:100%;
width:100%;
overflow-x: hidden;
overflow-y: scroll;
background-color: #FFF;
}
body {
width:100%;
height:100%;
font-family:Arial,Verdana,Helvetica;
font-size:12px;
font-weight:normal;
color:#020051;
line-height:14px;
text-align:center;
background-size: 100%;
background-attachment:fixed;
background-position: center top;
margin-left: auto;
margin-right: auto;
}
#background_with_link{
position:absolute;
top:0px;
width:2400px;
left:50%;
display: block;
margin-left:-1200px;
text-align:center;
}
#main_container{
position:absolute;
top:0px;
width:980px;
left:50%;
margin-top:103px;
margin-left:-490px;
margin-bottom:50px;
margin-right:auto;
}
</style>
</head>
<body>
<div id="background_with_link">
<img src="/UserFiles/Banners/image.jpg" alt="" title="" border="0" />
<!-- Main Container start -->
<div id="main_container">
</div>
<!-- Main Container end-->
</div>
</body>
</html>
I hope there is a solution for this. Thanks!
Erwin
I'm trying to use the font 'Cabin Sketch'
I incluced the font like it says on the google web font page:
html:
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css' >
css:
body {
font-family: 'Cabin Sketch';
font-style: normal;
font-weight: 400;
color: #dbdbdb;
font-size: 14px;
}
Letters from a-z are working but any other charakters like .!# are not working.
In the google web font preview all characters are working.
Other fonts are working perfectly.
I'm using firefox 11.0 and Ubuntu 11.04.
I also created a issue on google font directory:
http://code.google.com/p/googlefontdirectory/issues/detail?id=124
Thank you in advance.
That seems right, Which browser are you using it with? It should work for all alphabets that it uses. I tested it and it works just fine. Make sure your browser supports #font-face
jsfiddle
http://jsfiddle.net/
html page
<head>
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css'/>
</head>
<body>
<div id="font">
<p>Hey yo</p>
<p>1234</p>
<p>! # .</p>
</div>
<div id="normal">
<p>Hey yo</p>
<p>1234</p>
<p>! # .</p>
</div>
</body>
css
body {
padding: 100px;
}
div {
margin: 10px;
}
#font {
font-family: 'Cabin Sketch';
font-style: normal;
font-weight: 400;
color: #333;
font-size: 14px;
}
Preview in Chrome
So it is correct, as you see above, it supports non alphabetical characters. Run the fiddle to see yourself. Hope that helps!