Change image based on screen size (Bootstrap template) - javascript

I am creating a site using this bootstrap template: http://getbootstrap.com/examples/cover/
I have filled the 'carousel' with images but when I view on mobile the images become squashed and poor quality. I have tried to change the image using javascript based on the screen size but it has had no effect.
Is there another way I can change the image seen on mobile?
Here is the HTML:
<div class="carousel-inner" role="listbox">
<div class="item active">
<img id="banner" class="first-slide" src="graphics/banner1.gif" alt="First slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
Here is the JS:
<script type="text/javascript">
if ((screen.width<=800) && (screen.height<=600)) {
// Make sure banner is ready in the DOM
document.getElementById('banner').src="graphics/banner2.gif"; }
</script>
Thanks!

You should use CSS instead of making JS work more than it should:
CSS:
#media screen and (max-width: 800px) , screen and (max-height: 600px){
.myclass{
width:500px;
height:300px;
background-image: #ffffff url("banner1.gif") no-repeat left top;
}
}
And then the HTML:
<div class="carousel-inner" role="listbox">
<div class="item active">
<div id="banner" class="first-slide myclass" />
<div class="container">
<div class="carousel-caption" />
</div>
</div>
</div>

Related

How to make the active slide grow in height from bottom to top?

How to make the active slide grow in height not downwards but upwards? I use owl-carousel
Site http://cb95142.tmweb.ru/
Code jsfiddle.net/90f2cLkm/
My result
enter image description here
Right
enter image description here
.gallery-slider .owl-item.center img {
height: 700px !important;
}
<section class="gallery">
<div class="wrapper">
<div class="content">
<div class="gallery-block">
<div class="plug"></div>
<div class="title-block">
<div class="forehead">Frispes gallery</div>
<h3>Immersive beautiful<br>co-working space gallery</h3>
</div>
</div>
</div>
</div>
<div class="gallery-slider owl-carousel">
<div class="gal-slide">
<img src="img/gal-1.jpg" alt="1">
</div>
<div class="gal-slide">
<img src="img/gal-2.jpg" alt="2">
</div>
<div class="gal-slide">
<img src="img/gal-3.jpg" alt="3">
</div>
<div class="gal-slide">
<img src="img/gal-4.jpg" alt="4">
</div>
<div class="gal-slide">
<img src="img/gal-5.jpg" alt="4">
</div>
<div class="gal-slide">
<img src="img/gal-6.jpg" alt="4">
</div>
</div>
</section>
If you add this it will do it.
padding-top: 100%;
position: relative;
So your CSS will become:
.gallery-slider .owl-item.center img {
height: 700px !important;
padding-top: 100%;
position: relative;
}
This works because the width of the slides is equal to their height (when not the current one) and padding is always in terms of the x not the y axis. So this code moves the image up by 700px and then down by the normal height due to the padding.
However, a couple of points. The image gets distorted and this is massively noticable on narrow viewports - people look 'stretched'. Also the site is non responsive - perhaps that doesn't matter in your use case but if it does try to work in relative rather than absolute units like px.

How to make a responsive isotope gallery plugin in different screen size?

I want to make the following isotope gallery responsive for all different screen size. there is always a gap whenever I want to see it in the smaller size window (320px,576px,768px). How can I solve it?
My website link:Website
Thank You.
$('.i_gallery').isotope({
itemSelector: '.g_item',
percentPosition: true,
masonry: {
columnWidth: '.g_item'
}
});
//filtering Click function
$('.portfolio-menu ul li').click(function() {
$('.portfolio-menu ul li').removeClass('active');
$(this).addClass('active');
let filterItems = $(this).attr('data-filter');
$('.i_gallery').isotope({
filter: filterItems
})
return false;
});
<div class="wrapper">
<div class="portfolio-menu">
<ul>
<li class="active">All</li>
<li data-filter=".web">Web Design</li>
<li data-filter=".logo">Logo Design</li>
<li data-filter=".wordpress">WordPress</li>
<li data-filter=".ecommerce">E-Commerce</li>
</ul>
</div>
<div class="i_gallery">
<div class="g_item web">
<img src="image/10.png" alt="" class="img-fluid">
</div>
<div class="g_item web">
<img src="image/11.png" alt="">
</div>
<div class="g_item wordpress">
<img src="image/12.png" alt="">
</div>
<div class="g_item wordpress">
<img src="image/13.png" alt="">
</div>
<div class="g_item logo">
<img src="image/14.png" alt="">
</div>
<div class="g_item logo">
<img src="image/15.png" alt="">
</div>
<div class="g_item ecommerce">
<img src="image/16.png" alt="">
</div>
<div class="g_item ecommerce">
<img src="image/17.png" alt="">
</div>
</div>
</div>
I have attached the external Js file and HTML file of the isotope gallery.
The isotope gallery seems to be occupying 94% all the time. You can try giving 3% margin to the parent container. So the gallery
i_gallery {
width: 100%;
/* margin: 0 auto; */
margin: 3%;
}
will come at center.

Display Image In middle over text

I am using bootstrap 4 and trying to make a component. The component has two tiles. Each tile consists of an icon image on left and on the right, there is a hyperlink. The desktop should show the tiles horizontally and vertically centered. As soon as the desktop changes to mobile, the image icon should stack over the link and vertically centered.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Service Header Example</title>
<style type="text/css">
.service-header-tile{
max-width: 397px;
height:60px;
}
.leftContent{
float: left;
width: 20%;
clear:both;
}
.rightContent{
float: left;width: 61%;height: auto;
}
#media only screen and (max-width: 767px){
.leftContent{
width:100%;
height:auto;
float:none;
clear: both;
text-align: center;
}
.rightContent{
clear:both;
width:auto;
height:auto;
}
}
</style>
</head>
<body>
<div class="container" style="background-color:#41173F">
<div class="row">
<div class="col-4 col-md-4">
<div class="service-header-tile containeer">
<div class="leftContent">
<picture>
<source media="(max-width:767px)" srcset="https://i.postimg.cc/52LJtH2P/virtual-appoinment-m-icon-2x.png" />
<img src="https://i.postimg.cc/rmJFwDQ6/book-appointment.png" srcset="https://i.postimg.cc/RV0qqLkg/book-appointment-2x.png 2x" class="stretch object-fit "/>
</picture>
</div>
<div class="rightContent">
Play Virtual Applications
</div>
</div>
</div>
<div class="col-4 col-md-4">
<div class="service-header-tile container">
<div class="leftContent">
<picture>
<source media="(max-width:767px)" srcset="https://i.postimg.cc/52LJtH2P/virtual-appoinment-m-icon-2x.png" />
<img src="https://i.postimg.cc/rmJFwDQ6/book-appointment.png" srcset="https://i.postimg.cc/RV0qqLkg/book-appointment-2x.png 2x" class="stretch object-fit "/>
</picture>
</div>
<div class="rightContent">
Play Virtual Applications
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Though I am finding the following issues
I am not sure, how to vertically center the image on the text in mobile mode?
service-header-tile, is not acting as a parent of leFtContent and rightContent. When inspect the element, this div does not seem to have any width or height. What am I doing wrong?
Suggestions to improve the code
Thanks,
Bee
I am not sure, how to vertically center the image on the text in
mobile mode?
you probably want center the image horizontally over the text. Use .text-center class on the parent element of the image or use flexbox utility classes provided by bootstrap such as .justify-content-center
service-header-tile, is not acting as a parent of leFtContent and
rightContent. When inspect the element, this div does not seem to have
any width or height. What am I doing wrong?
It is a parent element and it has fixed height of 60px that you have defined in the internal css. You need to remove that otherwise child elements will overflow the .service-header-tile element.
Suggestions to improve the code
remove internal css, use external css file if you want to override the styles provided by bootstrap.
remove all the css you have written because its not needed for what you are trying to achieve. Bootstrap has all the classes you need to achieve the desired layout.
use flexbox utility classes provided by bootstrap to align items properly. You can find these classes here
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="background: #41173F;">
<div class="row">
<div class="col-4 col-md-4">
<div class="service-header-tile text-center d-flex flex-column flex-md-row align-items-center">
<div class="leftContent mr-md-3">
<picture>
<source media="(max-width:767px)" srcset="https://i.postimg.cc/52LJtH2P/virtual-appoinment-m-icon-2x.png" />
<img src="https://i.postimg.cc/rmJFwDQ6/book-appointment.png" srcset="https://i.postimg.cc/RV0qqLkg/book-appointment-2x.png 2x" class="stretch object-fit " />
</picture>
</div>
<div class="rightContent pb-2">
Play Virtual Applications
</div>
</div>
</div>
<div class="col-4 col-md-4">
<div class="service-header-tile text-center d-flex flex-column flex-md-row align-items-center">
<div class="leftContent mr-md-3">
<picture>
<source media="(max-width:767px)" srcset="https://i.postimg.cc/52LJtH2P/virtual-appoinment-m-icon-2x.png" />
<img src="https://i.postimg.cc/rmJFwDQ6/book-appointment.png" srcset="https://i.postimg.cc/RV0qqLkg/book-appointment-2x.png 2x" class="stretch object-fit " />
</picture>
</div>
<div class="rightContent pb-2">
Play Virtual Applications
</div>
</div>
</div>
</div>
</div>
I suggest you use flex, which was introduced in CSS 3.
I have made a quick fiddle here: https://jsfiddle.net/hkx2od3z/
You can put in a media query to change flex-direction between column and row.
You can play around with other properties here: https://yoksel.github.io/flex-cheatsheet/
You can try bootstrap 4 "d-flex", "align-items-center" and "justify-content-center" classes.
Bootstrap 4 d-flex

DIV Background Refuses to Change Color or Image

I wish to change the background of this section of the page:
And I want to change it to a background image of space, I tried using CSS but it refuses to work. I have looked up many times but the only thing it likes to do is outline the div section rather then actually change the image inside, why?
Code HTML:
<div class="section section-pad-sm section-bg section-pro into-section" id="intro">
<div class="container">
<div class="row align-items-center">
<div class="col-md-5 section-four-image">
<div class="video-graph res-m-btm animated" data-animate="fadeInUp" data-delay=".1">
<div class="header-image section-third-image header-image-alt">
<img src="images/header-image-blue-old.png" alt="header">
</div>
</div>
</div>
<!-- .col -->
<div class="col-md-6 order-md-first order-last">
<div class="text-block">
<h6 class="heading-xs animated" data-animate="fadeInUp" data-delay=".0">What is Hashimo Shares? </h6>
<h2 class="animated" data-animate="fadeInUp" data-delay=".1">Hashimo Shares is a beautifully crafted
<br> Shared Masternode Service for Everyone! </h2>
And so fourth.
CSS:
#intro {
background-color: blue;
background: grey;
color: blue;
}
I also tried:
#intro {
background-image: url('../images/header-shade.jpg');
background-repeat: repeat-y; /* for vertical repeat */
background-repeat: repeat-x; /* for horizontal repeat */
}
Neither worked, it stayed white. But trying to outline it using CSS made it work just fine, why?
I also tried changing it with JS.
You are not able to edit an image with code.
Solution 1: Images, i.e. that one, cannot be changed using a code. To change the image background color, you would just fill it in using a photo editor, then change the image when it is triggered.
Solution 2: If you deleted the background, possibly using this tutorial, and put that in a div, and filled the background of the div your color, then it probably would work.
the tutorial might be difficult, so if that doesn't work, you can look it up.
Edit: That was not what this person was looking for, I will put the solution.
To change the background color, in CSS, add body {backgrounds color: color;}
In HTML, add in the <html> or <body> tag bgcolor="hexadecimal" where hexadecimal is the color you want in hexadecimal form.
Note: I would not recommend the second one.
Now of course if you wanted the background to change once an event happened, I would use jQuery .css(); function
$("#div").mouseenter(function() {
$("body").css("background-color", "blue");
});
$("#div").mouseleave(function() {
$("body").css("background-color", "white");
});
#div {
background-color: green;
margin-left: 100px;
margin-top: 100px;
height: 100px;
width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div"> Hello </div>
The events can be changed, and what happens can be changed. This was just an example.
To work with your code:
var background = 0;
$("#button").click(function() {
if (background == 0) {
$("#intro").css("background-color", "blue");
background = 1
} else {
$("#intro").css("background-color", "white");
background = 0
}
});
#button {
width: 50px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button"></button>
<!-- Start Section -->
<div class="section section-pad-sm section-bg section-pro into-section" id="intro">
<div class="container">
<div class="row align-items-center">
<div class="col-md-5 section-four-image">
<div class="video-graph res-m-btm animated" data-animate="fadeInUp" data-delay=".1">
<div class="header-image section-third-image header-image-alt">
<img src="images/header-image-blue-old.png" alt="header">
</div>
</div>
</div>
<!-- .col -->
<div class="col-md-6 order-md-first order-last">
<div class="text-block">
<h6 class="heading-xs animated" data-animate="fadeInUp" data-delay=".0">What is Hashimo Shares? </h6>
<h2 class="animated" data-animate="fadeInUp" data-delay=".1">Hashimo Shares is a beautifully crafted
<br> Shared Masternode Service for Everyone! </h2>
<p class="lead animated" data-animate="fadeInUp" data-delay=".2">Test </p>
<p class="animated" data-animate="fadeInUp" data-delay=".3">Test</p>
<p class="animated" data-animate="fadeInUp" data-delay=".4">Test</p>
</div>
</div>
<!-- .col -->
</div>
<!-- .row -->
</div>
<!-- .conatiner -->
</div>
As you can see, I made it so that when you click the button, it makes the intro div's background go blue, and when clicked again it makes it white again.
Now, if you wish for it to be blue on startup, you could do this:
$("#intro").css("background-color", "blue");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Start Section -->
<div class="section section-pad-sm section-bg section-pro into-section" id="intro">
<div class="container">
<div class="row align-items-center">
<div class="col-md-5 section-four-image">
<div class="video-graph res-m-btm animated" data-animate="fadeInUp" data-delay=".1">
<div class="header-image section-third-image header-image-alt">
<img src="images/header-image-blue-old.png" alt="header">
</div>
</div>
</div>
<!-- .col -->
<div class="col-md-6 order-md-first order-last">
<div class="text-block">
<h6 class="heading-xs animated" data-animate="fadeInUp" data-delay=".0">What is Hashimo Shares? </h6>
<h2 class="animated" data-animate="fadeInUp" data-delay=".1">Hashimo Shares is a beautifully crafted
<br> Shared Masternode Service for Everyone! </h2>
<p class="lead animated" data-animate="fadeInUp" data-delay=".2">Test </p>
<p class="animated" data-animate="fadeInUp" data-delay=".3">Test</p>
<p class="animated" data-animate="fadeInUp" data-delay=".4">Test</p>
</div>
</div>
<!-- .col -->
</div>
<!-- .row -->
</div>
<!-- .conatiner -->
</div>
I would not recommend that, but if it won't work with css, I guess you'll have to do with that.
Update: use !important at the end of the css block, because in your file 'style0ad1.css', it declared the class section-pro a color and made it prominent over any other declarations.
So to make it your space background: background: url("https://i.pinimg.com/originals/af/0f/c4/af0fc46fa7f05330435e9e71779af666.jpg") !important
Try it out!

Bootstrap carousel width and height

Im trying to do a bootstrap carousel with full width for the images (width: 100%) and a fixed height but if I set the width to 100% the height automacally is taking the 100% too
I don't sure if the problem is in my files
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<%= image_tag "slider/slide-bg-1.jpg", class: "tales" %>
</div>
<div class="item">
<%= image_tag "slider/slide-bg-2.jpg", class: "tales" %>
</div>
<div class="item">
<%= image_tag "slider/slide-bg-3.jpg", class: "tales" %>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
and my css file
.tales {
width: 100%;
height: 200px;
}
Are you trying to make it responsive? If you are then I would just recommend the following:
.tales {
width: 100%;
}
.carousel-inner{
width:100%;
max-height: 200px !important;
}
However, the best way to handle this responsively would be thru the use of media queries like such:
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {}
If you use bootstrap 4 Alpha and you have an error with the height of the images in chrome, I have a solution:
The documentation of bootstrap 4 says this:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="..." alt="Third slide">
</div>
</div>
</div>
Solution:
The solution is to put "div" around the image, with the class ".container", like this:
<div class="carousel-item active">
<div class="container">
<img src="images/proyecto_0.png" alt="First slide" class="d-block img-fluid">
</div>
</div>
I recommend the following for Bootstrap 3
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
min-height: 500px; /* Set slide height here */
}
I know this is an older post but Bootstrap is still alive and kicking!
Slightly different to #Eduardo's post, I had to modify:
#myCarousel.carousel.slide {
width: 100%;
max-width: 400px; !important
}
When I only modified .carousel-inner {}, the actual image was fixed size but the left/right controls were displaying incorrectly off to the side of the div.
I had the same problem.
My height changed to its original height while my slide was animating to the left, ( in a responsive website )
so I fixed it with CSS only :
.carousel .item.left img{
width: 100% !important;
}
I have created a responsive sample that works well for me and I find it to be quite simple have a look at my carousel-fill:
.carousel-fill {
height: -o-calc(100vh - 165px) !important;
height: -webkit-calc(100vh - 165px) !important;
height: -moz-calc(100vh - 165px) !important;
height: calc(100vh - 165px) !important;
width: auto !important;
overflow: hidden;
display: inline-block;
text-align: center;
}
.carousel-item {
text-align: center !important;
}
my navigation height+footer are a hair less then 165px so that value works for me. take off a value that fits for you, I overrdide the .carousel-item from bootstrap so make sure by videos are centered.
my carousel looks like this, note the "carousel-fill" on the video tag.
<div>
<div id="myCarousel" class="carousel slide carousel-fade text-center" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<video autoplay muted class="carousel-fill">
<source src="~/Video/CATSTrade.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="carousel-caption">
<h2>CATS IV Trade engine</h2>
<p>Automated trading for high ROI</p>
</div>
</div>
<div class="carousel-item">
<video muted loop class="carousel-fill">
<source src="~/Video/itrs.mp4" type="video/mp4">
</video>
<div class="carousel-caption">
<h2>Machine learning</h2>
<p>Machine learning specialist</p>
</div>
</div>
<div class="carousel-item">
<video muted loop class="carousel-fill">
<source src="~/Video/frequency.mp4" type="video/mp4">
</video>
<div class="carousel-caption">
<h3>Low latency development</h3>
<p>Create ultra fast systems with our consultants</p>
</div>
</div>
<div class="carousel-item">
<img src="~/Images/data pipeline faded.png" class="carousel-fill" />
<div class="carousel-caption">
<h3>Big Data</h3>
<p>Maintain, generate, and host big data</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
in case some one needs to control the videos like i do, I start and stop the videos like this:
<script language="JavaScript" type="text/javascript">
$(document).ready(function () {
$('.carousel').carousel({ interval: 8000 })
$('#myCarousel').on('slide.bs.carousel', function (args) {
var videoList = document.getElementsByTagName("video");
switch (args.from) {
case 0:
videoList[0].pause();
break;
case 1:
videoList[1].pause();
break;
case 2:
videoList[2].pause();
break;
}
switch (args.to) {
case 0:
videoList[0].play();
break;
case 1:
videoList[1].play();
break;
case 2:
videoList[2].play();
break;
}
})
});
</script>
I found that if you just want to change the height of the element the image takes up, this will be the code that will help.
.carousel-item {
height: 600px !important;
}
However, this won't make the size of the image dynamic, it will simply crop the image to its size.
just put height="400px" into image attribute like
<img class="d-block w-100" src="../assets/img/natural-backdrop.jpg" height="400px" alt="First slide">

Categories