HTML To Fit an image only in specific resolution - html

I want to display an image (It can be of any size) only in a table of 1280 x 800 Resolution it will not display on other screens.
Now I'm using an <img> element inside the body, and if the image is small, it doesn't fill the screen and if the image is big, it display it out off the screen.
So the html is this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mapa</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="/libs/qimessaging/1.0/qimessaging.js"></script>
<script type="text/javascript" src="js/senaletica.js"></script>
</head>
<body>
<img id="mapa" alt="mapa" src="">
</body>
</html>
And the javascript:
$('document').ready(function(){
var session = new QiSession();
session.service("ALMemory").done(function (ALMemory) {
ALMemory.subscriber("PepperQiMessaging/totablet").done(function(subscriber) {
subscriber.signal.connect(toTabletHandler);
});
});
function toTabletHandler(value) {
var imgMap = $('#mapa');
imgMap.attr('src', 'data:image/png;base64,' + value);
imgMap.width($('window').width());
imgMap.height($('window').height());
}
});
I don't use any CSS at the moment.

window is an actual javascript entity and should not be quoted, which then makes it a string. Removing the quotes from 'window' will solve your problem.
See Below Snippet :
$(document).ready(function(){
function toTabletHandler(value) {
var imgMap = $('#mapa');
imgMap.attr('src', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSd8cAJmOsrWimMAMpTAFOPURbw4q7uDKKxau1nimZ4V-usMb0w');
imgMap.width($(window).width());
imgMap.height($(window).height());
}
toTabletHandler(5);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<img id="mapa" alt="mapa" src="">
</body>

Related

How to make HTML canvas for emscripten without borders

I have a simple C++ SDL2 program and I'm using emscripten to run it in the browser. Emscripten generates two files (javascript and webassembly) and it renders everything into HTML canvas. I found this simple HTML canvas on the internet and it works just fine but for some reason, it has white borders on the left and on the top. How can I remove these borders?
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<script type='text/javascript'>
var Module = {
canvas: (function() { return document.getElementById('canvas'); })()
};
</script>
<script src="index.js"></script>
</body>
</html>
screenshot here
This is the browser-default margin on the body-element.
You can remove it by adding some CSS to the head-element.
Example:
<style>
body {
margin: 0;
}
</style>

How to correctly use <svg> tags with jquery in intellij?

So here I have CDN of both JQuery & jsbarcode -> jsbarcode info https://lindell.me/JsBarcode/
The output should show a barcode the the const "number" var.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
</head>
<body >
</div>
<script>
const number = '12345678';
$(document).ready(function(){
JsBarcode("#barcode", number, {
text: number.match(/.{1,4}/g).join(" "),
width: 2,
height: 50,
fontSize: 15,
});
});
</script>
<svg id="barcode"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
</body>
</html>
You need to add the script tags for your libraries before the code that uses them. They can go within the <head> tag. Your code snippet becomes the following:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
</head>
<body>
<script>
const number = '12345678';
$(document).ready(function(){
JsBarcode("#barcode", number, {
text: number.match(/.{1,4}/g).join(" "),
width: 2,
height: 50,
fontSize: 15,
});
});
</script>
<svg id="barcode"></svg>
</body>
</html>
(In the code snippet I provided I also cleaned up some errors in the HTML, like the </div> for a nonexistent div tag.)

set random background color

cant believe im asking this question but,
why this work?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf=8">
<style type="text/css">
#posts {
width: 90%;
height: 700px;
margin: auto
}
</style>
</head>
<body onload="return ran_col()">
<div id="posts">
</div>
<script type="text/javascript">
function ran_col() { //function name
var color = '#'; // hexadecimal starting symbol
var letters = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0']; //Set your colors here
color += letters[Math.floor(Math.random() * letters.length)];
document.getElementById('posts').style.background = color; // Setting the random color on your div element.
}
</script>
</body>
</html>
and this doesn't?
its pretty much the same code,
if anyone can edit the code that would be brilliant?
<!DOCTYPE html>
<html>
<head>
<title>Splash!</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta http-equiv="refresh" content="6.5;url=home.html" />
<link rel="stylesheet" href="../css/stylessplash.css" type="text/css">
</head>
<body id="posts">
<script type="text/javascript">
function ran_col() { //function name
var color = '#'; // hexadecimal starting symbol
var letters = ['000000','FF0000'; //Set your colors here
color += letters[Math.floor(Math.random() * letters.length)];
document.getElementById('posts').style.background = color; // Setting the random color on your div element.
}
</script>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<div id="wrapper">
<p>
<span>u</span>
<span>u</span>
<span>H</span>
<span>!</span>
</p>
</div>
</body>
</html>
need to add more text but no more is needed.
need to add more text but no more is needed.
need to add more text but no more is needed.
need to add more text but no more is needed.
need to add more text but no more is needed.
need to add more text but no more is needed.
On your second code block you are simply creating a function
<script type="text/javascript">
function ran_col() { //function name
var color = '#'; // hexadecimal starting symbol
var letters = ['000000','FF0000'; //Set your colors here
color += letters[Math.floor(Math.random() * letters.length)];
document.getElementById('posts').style.background = color; // Setting the random color on your div element.
}
</script>
It doesn't run because you are not invoking the function in form load or whenever you want. Which is shown in your 1st code block
<body onload="return ran_col()">
You can use that code to set the background to a specific element (not to the whole body like you did). To set the background of the whole page, instead of
document.getElementById('posts').style.background = color;
you will need
document.body.style.backgroundColor = color;
Hope this helped!

About DIVs (Hiding and Showing not Java)

<div id="abc" style="display: none;"><h1>abc</h1></div>
Hello! I hide the div but I want to see when I type it #abc I can't see this text.
In case people want to do it without having to resort to JavaScript, the CSS solution is to use the :target pseudo class, as mentioned in the comments.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
#abc {display:none}
#abc:target {display:block}
</style>
</head>
<body>
<div id="abc"><h1>abc</h1></div>
</body>
</html>
Please find below sample as per your requirement.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
if(window.location.href.indexOf("#abc")!=-1)
{
//alert("Page is loaded");
document.getElementById("abc").style.display="block";
}
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<div id="abc" style="display: none;"><h1>abc</h1></div>
</body>
</html>
This is how you can do it using jquery:
var url = "https://abcdefgh.carrd.co/#abc";
var hash = url.substring(url.indexOf("#"));
// You can use
// var hash = window.location.hash;
// but i need to write the url to show you that is working.
if ($( hash ).length) { //check if div exists
$( hash ).show();
}
#abc, #cde
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc">ABC</div>
<div id="cde">CDE</div>
That should do it:
if(window.location.href.indexOf("#abc")!=-1) {
document.getElementById("abc").style.display="block";
}}

Remove parallax.js image when screen get's smaller

I'm using parallax.js to add parallax effect on my website. I would like to remove the data-image-src property when the screen size is smaller that 767pixels.
I know I should use #media screen and (max-width: 767px) {...} on my css file for that but I just can't figure out how to set the image property to none.
Here is an example:
<html>
<head>
<title>Panagiotis Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/circle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="js/parallax.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body ng-app="">
<div ng-include src="'partials/header.html'"></div>
<div class="parallax-window" data-parallax="scroll" data-image-src="sky.jpg">
<div class="parallax-content">
<h3 id="summary">Summary</h3>
<hr>
<div ng-include="'partials/summary.html'"></div>
</div>
</div>
<!-- Some other parallax elements here -->
</body>
</html>
Inside my index.js I added as linusg suggested the following jQuery code but it doesn't seem to work.
$(document).ready(function() {
$(window).resize(function () {
// Check window size
if($(window).width() < 767) {
// Unset data-image-src property
$(".parallax-window").attr("data-image-src", "");
} else {
// Set data-image-src property
//$(".parallax-window").attr("data-image-src", "sea.jpg");
}
});
$(document).on('click', 'a:not([target="_blank"])', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 700);
});
});
Although the data-image-src value changes the image seems still to be there.
Any ideas?
You can use jQuery's $(window).width() for this:
$(window).resize(function () {
// Check window size
if($(window).width() < 767) {
// Unset data-image-src property
$(".parallax-window").attr("data-image-src", "");
} else {
// Set data-image-src property
$(".parallax-window").attr("data-image-src", "sea.jpg");
}
});
Make sure to wrap your code into a $(document).ready(...); like below, see this documentation.
Full code:
<html>
<head>
<!-- Other metadata and resources -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="parallax-window" data-parallax="scroll" data-image-src="sea.jpg">
<div class="parallax-content">
<h3 id="goals">Ambitions and Goals</h3>
<hr>
<div ng-include="'partials/goals.html'"></div>
</div>
</div>
<script>
$(document).ready(function() {
$(window).resize(function () {
// Check window size
if($(window).width() < 767) {
// Unset data-image-src property
$(".parallax-window").attr("data-image-src", "");
} else {
// Set data-image-src property
$(".parallax-window").attr("data-image-src", "sea.jpg");
}
});
});
</script>
</body>
</html>
Hope this helps!