Change logo image based on screen resolution of the browser - javascript

I have two images, one with the logo in black and one with the logo in white. I would like to have the white logo when the browser is less than 768px width and black logo when it's bigger. I tried something but is not changing in real time, only if I reload the page.
$(function() {
if($(window).width() < 768){
$('.logo').find("img").attr("src","/images/Trin-02.png");
}
else{
$('.logo').find("img").attr("src","/images/Trin-01.png");
}
});
Any suggestion? Thank you

https://api.jquery.com/resize/
You are correctly checking for the window's width, but you are only doing it when the page first loads in!
Instead, use the resize function to run a script every time the screen is resized
$(window).on("resize", function(){
if($(window).width() < 768){
$('.logo').find("img").attr("src","/images/Trin-02.png");
}
else{
$('.logo').find("img").attr("src","/images/Trin-01.png");
}
})
though this sounds more like a job for css media queries, though we don't about all your needs and requirements :)

You can do it just with css and media queries.
img {
width: 400px;
content:url("http://mnprogressiveproject.com/wp-content/uploads/2014/02/kitten.jpg");
}
#media screen and (max-width: 768px) {
img {
content:url("http://images6.fanpop.com/image/photos/34800000/Kittens-3-animals-34865509-1680-1050.jpg");
}
}
<img alt="">

I have a pure JavaScript solution
document.getElementsByTagName("BODY")[0].onresize = function() {
if (window.outerWidth < 768) {
document.getElementById("img").src = yourFirstImage.png;
} else {
document.getElementById("img").src = yourSecondImage.png;
}
}

If you have the vector version of logo, make an imgname.SVG then change color using css. (SVG is scalable vector graphics and lmage will be of good quality)
HTML
<div class="logo"> <img src="images/imagename.svg"> </div>
CSS
#media only screen and (max-width: 768px) {
.logo img{
background-color:#000;
height:50px;
width:100%;
}
}

Here is the most simple solution, using CSS3 media queries,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>media queries</title>
<style>
#media screen and (max-width: 780px) {
body {
background-image: url("/images/Trin-02.png");
}
}
#media screen and (min-width: 780px) {
body {
background-image: url("/images/Trin-01.png");
}
}
</style>
</head>
<body>
</body>
</html>
So, u can have image acc. to device you are using

There is no need to target the image multiple times. Save a reference once, use it multiple times.
Create a callback function for the resize event and bind it. That way you can also call the callback function to set the right image on init.
var image = $('.logo').find("img");
function setImage() {
var windowWidth = window.innerWidth,
src = (windowWidth < 768) ? '/images/Trin-02.png' : '/images/Trin-01.png';
image.attr('src', src);
}
$(window).on('resize', setImage);
setImage();
https://jsfiddle.net/0nxdpdp6/1/

Related

Javascript: Check screen width and remove HTML element

I have a page that has 2 sliders; 1 for mobile devices & tablets (smaller than 500px screen width) and one for desktops (larger than 500px screen width). I am using CSS (display: block, display:none) attributes to display them accordingly, however, the browser is downloading the images of both sliders. I need a Javascript code that can;
Identify the screen width
Remove the desktop slider div by CSS class if the screen width is smaller or equal to 500px,
Remove the mobile slider div by CSS class if the screen width is larger than 500px.
I cannot use JQuery because of some issues we have with the library and the way the website is designed (long story).
Here are the HTML elements;
<div class="show-desktop">
[rev_slider alias="slider"][/rev_slider]
</div>
<div class="show-mobile">
[rev_slider alias="slider-mobile"][/rev_slider]
</div>
Check out this snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
.show-mobile{
display: none;
}
#media only screen and (max-width: 500px) {
.show-desktop {
display: none;
}
.show-mobile{
display: block;
}
}
</style>
<script type="text/javascript">
const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
</script>
</head>
<body>
<script type="text/javascript">
if(vw > 500){
document.writeln('<div class="show-desktop">');
document.writeln('\t[rev_slider alias="slider"][/rev_slider]');
} else {
document.writeln('<div class="show-mobile">');
document.writeln('\t[rev_slider alias="slider-mobile"][/rev_slider]');
}
</script>
</div>
</body>
</html>
CSS:-
Firstly we hided class .show-mobile using display: none;.
Next we created new CSS rule, exclusively for screens whose maximum width is 500px or less using #media only screen and (max-width: 500px).
Finally, inside the rule, we hided class .show-desktop and displayed class .show-mobile.
JavaScript:-
Inside head section, we save view-port height and width in constants vw and vh, respectively.
Inside body section, we add <div> with appropriate class to the document according to the view-port's width.

totally remove particular div in mobile view

this is my html
<div id="lan">
NlEn
</div>
this is my css try
#media all and (max-width: 980px) {
#lan{
display:none;
}
}
if i try this above css then div is not visible in mobile view, that is ok but when i see in inspect element that particular div is available there, i dont want to show this in inspect element also. i want to delete it totally.
this is my javascript try
var mq = window.matchMedia('all and (max-width: 700px)');
if(mq.matches) {
$(function(){
$('#lan').remove();
});
}
The above code show me an error like this
JQMIGRATE: Migrate is installed, version 1.4.1
(index):420Uncaught TypeError: $ is not a function
at (index):420
(anonymous) # (index):420
What should i do?
Use the following code.
$(document).ready(function(){
var width = screen.width,
height = screen.height;
if (screen.width <= 320 || screen.height <= 176) {
$('#lan').remove();
}
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="lan">
NlEn
</div>
</body>
</html>
If you cannot remove the div, I suggest getting its parent element.

How to start page at center of center or at specific height after load

I want to start page at the center horizontally and vertically when it had loaded (not at top), anyone any suggestions? Or at a specific height if that is possible. Thank you!
You can Do it like this:
$(document).ready(function() {
$(window).scrollTop($(window).height()/2);
$(window).scrollLeft($(window).width()/2);
});
You can change the position to what suit your needs.
Also you can use $(window).scrollTo($(window).width()/2, $(window).height()/2);
not sure what you are asking but have you tried relative coordinates ?
like >>
/*i put this all css selector for canceling all margins, paddings so i can remove default browser prefereces for the same*/
/*border box is just that any size od div is not changed after addinational padding*/
*{margin:0;padding:0;box-sizing:border-box;}
body{
position:absolute;
width:100%;height:100%;
background-color:red;
padding-top:10%;
padding-left:10%;
padding-right:10%;
padding-bottom:10%;
}
centerd{
/*relative dimensions wont work if not display:block;*/
display:block;
width:100%;height:100%;
background-color:blue;
}
<!doctype html>
<html>
<meta charset = "UTF-8" />
<title>Center Content</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<body>
<centerd>
<!--html5 element, you can create your own -->
</centerd>
</body>
</html>
for more information visit : it is cool way to know enough about html, css, javascript etc.
Although not sure if this is what you are looking for:
To center a container (a DIV element say) horizontally, give it a fixed width and auto left and right margins in CSS:
div#container
{ width: 1024px; /* a fixed width container */
border: thin solid green; /* debug, to see */
margin-left: auto;
margin-right: auto;
}
then an anonymous JavaScript function to center a container vertically after load using its margin-top property:
function ()
{ var e = document.getElementById("container");
var eHeight = e.offsetHeight;
var clientHeight = document.documentElement.clientHeight;
var marginTop = 0;
if(clientHeight > eHeight)
{ marginTop = (clientHeight - eHeight) >> 1; // integer divide by 2
}
e.style.marginTop = marginTop + "px";
}
added to the page using jQuery's ready() function for the window, and HTML
<div id="container">
hello this is page content
</div>
centers a container element in the viewport where possible
Old question but I just use:
function Scrolldown() {
window.scroll(250, 400);
}
window.onload = Scrolldown;

Showing Image in full screen - using JavaScript/HTML5

I have an image on a web page. When I click on it, it should display full screen.
I have the following code:
<!doctype html>
<html>
<head>
<script>
function makeFullScreen() {
var divObj = document.getElementById("theImage");
//Use the specification method before using prefixed versions
if (divObj.requestFullscreen) {
divObj.requestFullscreen();
}
else if (divObj.msRequestFullscreen) {
divObj.msRequestFullscreen();
}
else if (divObj.mozRequestFullScreen) {
divObj.mozRequestFullScreen();
}
else if (divObj.webkitRequestFullscreen) {
divObj.webkitRequestFullscreen();
} else {
console.log("Fullscreen API is not supported");
}
}
</script>
</head>
<body>
Click Image to display Full Screen...</br>
<img id="theImage" style="width:400px; height:auto;" src="pic1.jpg" onClick="makeFullScreen()"></img>
</body>
</html>
Problem I am facing - In full screen mode:
The image displays in small size (i.e same as the size on browser page), not its original size - on all browsers.
In IE - The image is not centered, it shows up on left side of the full screen (why not centered?). In Chrome - it is centered - as desired.
So, found the solution after some trial...
The solution is in the style section:
- width, height, margin are set to 'auto',
- but also marked as '!important' - this allows you to override the inline styling of the image on the webpage - when in fullscreen mode.
<!doctype html>
<html>
<head>
<style>
.fullscreen:-webkit-full-screen {
width: auto !important;
height: auto !important;
margin:auto !important;
}
.fullscreen:-moz-full-screen {
width: auto !important;
height: auto !important;
margin:auto !important;
}
.fullscreen:-ms-fullscreen {
width: auto !important;
height: auto !important;
margin:auto !important;
}
</style>
<script>
function makeFullScreen() {
var divObj = document.getElementById("theImage");
//Use the specification method before using prefixed versions
if (divObj.requestFullscreen) {
divObj.requestFullscreen();
}
else if (divObj.msRequestFullscreen) {
divObj.msRequestFullscreen();
}
else if (divObj.mozRequestFullScreen) {
divObj.mozRequestFullScreen();
}
else if (divObj.webkitRequestFullscreen) {
divObj.webkitRequestFullscreen();
} else {
console.log("Fullscreen API is not supported");
}
}
</script>
</head>
<body>
Hello Image...</br>
<img id="theImage" style="width:400px; height:auto;" class="fullscreen" src="pic1.jpg" onClick="makeFullScreen()"></img>
</body>
</html>

Print image from Javascript

i have some images .... the size of each image is different
For example:
img1 = 200 x 1900
img2 = 1800 x 400
img3 = 600 x 800
// HTML
<html>
<body>
<img src='img1.jpg'>
<img src='img2.jpg'>
<img src='img3.jpg'>
</body>
</html>
// javascript
var mywindow = window.open('', 'my div');
mywindow.document.write('<html><head><title>my div</title>');
mywindow.document.write('</head><body >');
data = "<img src='img1.jpg'><img src='img2.jpg'><img src='img3.jpg'>";
mywindow.document.write(data); // data = all image
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
Now the output is all images printed but the sizes is corrupted
how can i print each image in page A4 and print it fitted in page (A4)
You can define CSS rules for printing and base the dimensions on 21cm x 29.7cm.
For example :
<style type="text/css">
#media print {
img {
max-width: 18cm;
max-height: 8cm;
}
}
</style>
Note that if your page is simple enough, you don't have to build a new layout in a new window as you can simply define different rules for #media print and #media screen.
You can't. Websites are created for screens, not printers.
However you could force the web browser to display the page with the same pixel dimensions as A4. However, there may be a few quirks when things are rendered.
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 842px;
width: 595px;
/* to centre page on screen*/
margin-left: auto;
margin-right: auto;
}
</style>
<head>
<body>
</body>
</html>
The best solution for printing, is to use PDFs, that's what they are for. Create a PDF that has the same data. You have full control over the print format in that case.

Categories

Resources