Where CSS gets screen values? - javascript

I'm informing about browser fingerprinting.
With javascript I can change and set screen resolution.
for example:
window.screen.__defineGetter__('width',function () {return 480;});
window.screen.__defineGetter__('height',function () {return 320;});
But if I use #media CSS3, I get the correct screen resolution (1600x900) of my pc:
#media screen and (min-device-height: 900px) {
body {
background-color: lightgreen;
}
}
change color with 900 and less and not with 480 or less
I tried this code and not works:
<!DOCTYPE html>
<html>
<head>
<script>
window.screen.__defineGetter__('width',function () {return 480;});</script>
<style>
body {
background-color: lightblue;
}
#media screen and (min-device-height: 901px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
</body>
</html>
My question is: What I have to change to get that CSS read 480 instead 900?

Related

How to get changes without refreshing browser?

When I resize browser and refresh page if div width greater than browser width the div is displayed none. How to make it without refreshing page. For example when I resize browser and if div width grater than browser width it will automatically without refreshing page displayed none.
var body = document.querySelector('body');
var div = document.querySelector('div');
if (div.scrollWidth > body.clientWidth) {
div.style.display = 'none';
}
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
div {
width: 350px;
height: 60px;
background-color: lightgray;
}
<body>
<div> </div>
<script src="main.js"></script>
</body>
Thanks.
This is not the right way to do it but you can listen to resize event to recheck your conditions.
let body = document.querySelector('body');
var div = document.querySelector('div');
if (div.scrollWidth > body.clientWidth) {
div.style.display = 'none';
}
window.addEventListener("resize", function() {
if (div.scrollWidth > body.clientWidth) {
div.style.display = 'none';
}else div.style.display = '';
});
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
div {
width: 350px;
height: 60px;
background-color: lightgray;
}
<body>
<div> </div>
<script src="main.js"></script>
</body>
For this kind a responsive conditions best way to go is with css media queries. You can find more information here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Why don't you use CSS media rules ?
Media rules can apply different style on different sizes of screen.
For example:
#media screen and (max-width: 600px) {
div.example {
display: none;
}
}
docs for more informations about #media rules: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You can use media query for such requirement. Include below code in css.
#media only screen and (max-width: 600px) {
body {
display: none;
}
}

Positioning a JQuery/HTML script on blog on Squarespace

I am trying to position the JQuery animation nicely (lower, centered) on this page:
http://www.edoardocroce.com/
I am using snippets of code that I found here and there. You can find the code that I am using here below.
Anybody can tell me if this is possible without much work?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js">
</script>
<script type="text/javascript">
var myName = "Edo's Blog";
var letterColors=[black,black,black];
if(10 < 9) {
bubbleShape = "circle";
}
else {
bubbleShape = "square";
}
drawName(myName, letterColors);
bounceBubbles();
</script>
</body>
</html>
Just add styling to #myCanvas, or add a element above it with the styling, like:
<div id="header"><canvas id="myCanvas"></canvas></div>
and on your css:
#header { text-align: center; width: 100% }
#myCanvas { margin-top: 100px }
This will center the canvas and lower the header by 100px.
add css to center and lower your canvas... for example:
#myCanvas {
margin: 0 auto; /*to center*/
margin-top: 80px; /*to lower*/
}
In case you don't know, css goes in the head, like this
<head>
<style>
#myCanvas {
margin: 0 auto; /*to center*/
margin-top: 80px; /*to lower*/
}
</style>
.....
</head>
Or you can link to an external css sheet, the 'proper' way to do things.

JQuery Add/Removing Classes on Window Width

Trying to write a small script which adds/removes classes based off of window with,
any help would be appreciated.
<script type="text/javascript">
$(document).ready( function() {
if ($(window).width() < 500) {
$('.single-post-rating').removeClass('col-xs-3');
$('.single-post-rating').addClass('col-xs-12');
$('.guide-excerpt').removeClass('col-xs-9');
$('.guide-excerpt').addClass('col-xs-12');
}
else {
$('.single-post-rating').addClass('col-xs-3');
$('.single-post-rating').removeClass('col-xs-12');
$('.guide-excerpt').addClass('col-xs-9');
$('.guide-excerpt').removeClass('col-xs-12');
}
});
</script>
I think you're after the viewport width.
You can access that with
var viewPortWidth = document.documentElement.clientWidth;
As an aside, you can accomplish a lot of good responsive layouts through CSS media queries alone.
If you want to continue on this path, this is one of the best solution to manage the width of the window:
add a control css class, with min-with property and assign that class to your container
css:
.mediaquerycontrol {
min-width: 0px;
}
#media (min-width: 992px) {
.mediaquerycontrol {
min-width: 992px;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.mediaquerycontrol {
min-width: 768px;
}
}
#media (min-width: 1200px) {
.mediaquerycontrol {
min-width: 1200px;
}
}
html:
<body>
<div class="container mediaquerycontrol">
...
javascript:
<script type="text/javascript">
$(document).ready( function() {
var pageWidth = parseInt($(".mediaquerycontrol").css("min-width").replace(/[^-\d\.]/g, ''))
if (pageWidth < 500) {
$('.single-post-rating').removeClass('col-xs-3').addClass('col-xs-12');
$('.guide-excerpt').removeClass('col-xs-9').addClass('col-xs-12');
}
else {
$('.single-post-rating').addClass('col-xs-3').removeClass('col-xs-12');
$('.guide-excerpt').addClass('col-xs-9').removeClass('col-xs-12');
}
});
</script>
but my advice is to use the features of bootstrap, and if you need smaller columns then you can increase the number of columns by default (eg from 12 to 24 if you're using the 2.3.2 version)
http://getbootstrap.com/2.3.2/customize.html

How to change the logo depending on page with javascript?

I am trying to set my logo to display a bigger logo for desktops and a smaller image for smaller devices like smartphones...
This is what i've tried until now, but it doesn't works.
Can somebody help me? What's wrong with my code?
<html>
<head>
<script type="text/javascript">
function load(){
document.getElementById('logo').src = displaylogo();
}
function displaylogo(){
if ($(window).width() < 1024) {// code for small viewports
return "http://i.imgur.com/ozYV740.png"; // small logo
}
else {// code for large viewports
return "http://i.imgur.com/RMV6Af0.png"; //big logo
}
}
</script>
</head>
<body onload="load()">
<img src="http://i.imgur.com/RMV6Af0.png" id="logo" name="logo" title="The original logo is the big logo"/>
</body>
</html>
You should be using CSS media queries to handle how your web page displays on different devices. These queries allow you to apply different styles depending on the width of the user's screen.
For example, to resize your logo for phones, try:
/* Desktops (>480px) */
#logo {
width: 200px;
height: 200px;
}
/* iPhone landscape (480px) */
#media screen and (max-width: 480px) {
#logo {
width: 100px;
height: 100px;
}
}
Tutorial: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
Try using media queries
<head>
<style>
.logo {
width: //logo-width
height : //logo-height
background-image : url('http://i.imgur.com/RMV6Af0.png');
}
#media only screen
and (max-device-width : 1024px) {
.logo {
width: //logo-width
height : //logo-height
background-image : url('http://i.imgur.com/ozYV740.png');
}
}
</style>
</head>
<body>
<div class="logo">
</div>
</body>
Because of you do not use jquery Try this in your case :
To work in JS:
if (window.innerWidth < 1024) {// code for small viewports
//^^^^^^^^^^^
If you want to use jquery:
function displaylogo() {
if ($(window).width() < 1024) {
$("#logo").attr("src","http://i.imgur.com/ozYV740.png"); // small logo
}
else {
$("#logo").attr("src","http://i.imgur.com/RMV6Af0.png"); //big logo
}
}
$(window).resize(function () {
displaylogo();
});
$(document).ready(function () {
displaylogo();
});
I suggest to use CSS instead:
<span id="logo"></span>
CSS:
#logo {
display: inline-block;
width: 50px;
height: 50px;
background: url(http://i.imgur.com/ozYV740.png) no-repeat; /* small */
}
#media screen and (min-width: 1024px) {
#logo {
width: 100px;
height: 100px;
background: url(http://i.imgur.com/RMV6Af0.png) no-repeat; /* big */
}
}

Print ONLY the contents of a hidden object tag

Consider the following code example:
<!DOCTYPE html>
<html>
<head>
<title>HTML5-Template</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
.print_this{
display: none;
}
#media print {
.print_this {
display: block;
width: 1024px;
height: 768px;
}
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
setTimeout(function () {
var el = document.getElementById("report");
el.focus();
el.print();
}, 1500);
});
</script>
</head>
<body>
<div id="Container">
<object class="print_this" id="report" name="report" type="application/pdf" data="Certificate.pdf"></object>
</div>
</body>
</html>
I want to hide the object from the user in the window, but print ONLY the contents of the tag when the print dialog is displayed...is this possible?
NOTE: Code was from elsewhere on the internet, however I have a feeling this is very much, non standards based?
You're on the right track. Now you need to define, within the print media block, a screen-only class (.screen_only { display: none; }) to hide the stuff you don't want to show to the printer:
.print_this{
display: none;
}
#media print {
.print_this {
display: block;
width: 1024px;
height: 768px;
}
.screen_only {
display: none;
}
}​
See http://fiddle.jshell.net/jhfrench/UdQSX/2/show/ for a working example. When the page loads in a browser you will see "This doesn't show when printed". Now print the page and you will see "This only shows for the printer".

Categories