**HTML**
<div class="bimage">
<img class="fimage" src="http://tinyurl.com/luzr4fr"/>
</div>
**CSS**
.bimage {
display: flex;
border:2px solid red;
width:100%;
height:300px;
background:url('http://tinyurl.com/orwbgck');
background-size:100%;
}
.bimage:hover{
background-size:120%;
}
.fimage {
width: 200px;
margin: auto;
}
Here I can zoom in image when mouse over on that image. But I need centerally zoom in image and animation effect with out increasing div width and height.
JSFIDDLE
You can add background-position:center along with background-size
.bimage {
display: flex;
border:2px solid red;
width:100%;
height:300px;
background:url('http://tinyurl.com/orwbgck');
background-size:100%;
transition:1s all;
background-position:center;
}
.bimage:hover{
background-size:200%;
}
.fimage {
width: 200px;
margin: auto;
}
<div class="bimage">
<img class="fimage" src="http://tinyurl.com/luzr4fr"/>
</div>
Related
Okay so this slider strolls well and works perfectly. Every slide perfectly snaps into place vertically and horizontally on different screen sizes. However, when the (vanilla) javascript begans to slide the slider to the next slide, I am no longer able to slide back to the previous slides until the javascript completes its cycle through all of the frames (divs). Each slide once displayed using JavaScript seems to disappear until it goes back to slide "zero" (the first slide). I noticed the scroll bar "thumb" on my version of the slider gets longer (indicating the entire slide package getting shorter each time the JavaScript displays a slide) each time the javascript "moves" the slides. So how can I alter my Vanilla JavaScript to only move the slides in my slider and not transform my slides where the slides are lost once viewed? My slides are lined up horizontally and once one is displayed, they disappear. Below is my basic HTML, CSS and JavaScript.
Sorry I couldn't separate the Css and JavaScript I'm having technical difficulties.
HTML
<!DOCTYPE html>
<html>
<head>
<title>SGRLA - SA</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="font/style.css"/>
<script src=.3.3.1/jquery.min.js></script>
</head>
<body>
<div class=mainContentBoxSliders id=slider>
<div class="slides" id=ul><center>
<div class=sliderButtons id=sliderBtnsS>
<
1
2
3
4
5
>
<div style="clear: both;"></div>
</div></center>
<div class=slide id=slide-1>
<div class=imageWindow>
<img src=images/photoOne~4.jpg width=100% height=auto>
</div>
<div class=mainTextContainer id=slide-text1>
My Text Content
</div>
</div>
<div class=slide id=slide-2>
<div class=imageWindow>
<img src=images/photoOne~1.jpg width=100% height=auto>
</div>
<div class=mainTextContainer id=slide-text2>
My Text Content for Slide 2
</div>
</div>
<div class=slide id=slide-3>
<div class=imageWindow>
<img src=images/photoOne~2.jpg width=100% height=auto>
</div>
<div class=mainTextContainer id=slide-text3>
My Text Content for Slide 3
</div>
</div>
<div class=slide id=slide-4>
<div class=imageWindow>
<img src=images/photoOne~3.jpg width=100% height=auto>
</div>
<div class=mainTextContainer id=slide-text4>
My Text Content for Slide 4
</div>
</div>
<div class=slide id=slide-5>
<div class=imageWindow>
<img src=images/photoOne~5.jpg width=100% height=auto>
</div>
<div class=mainTextContainer id=slide-text5>
My Text Content for Slide 5
</div>
</div>
</div>
</div> </body>
</html>
CSS
<!----CSS & JavaScript------>
<style>
body {
background-color:#000;
margin:0px;
font-family:'Open Sans';
}
.mainContentBoxSliders {
background-color:#000;
height:auto;
width: 100%;
}
.imageWindow {
width:512px;
height:auto;
}
.mainTextContainer {
padding-right:10px;
height:506px;
width:460px;
font-size:20px;
font-family:'Open Sans Light';
font-weight:normal;
margin-bottom:40px;
margin-top:30px;
margin-left:10px;
}
a {
text-decoration:none;
color:white;
}
/** On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) **/
#media screen and (max-width: 992px) {
.imageWindow {
width:100%;
height:auto;
}
.mainTextContainer {
text-align:center;
padding-right:10px;
height:auto;
width:100%;
font-size:40px;
font-family:'Open Sans Light';
font-weight:normal;
}
#slide-4 {
background-size:auto 100%;
background-position:center;
}
}
.slider {
width: 100%;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
margin:0px auto 0px auto;
width: 100%;
max-width:1024px;
overflow-x: auto;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 10px;
height: 3px;
}
.slides::-webkit-scrollbar-thumb {
background: #DDDDDD;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 100%;
height: auto;
margin-right: 50px;
border-radius: 10px;
background: #000;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.sliderButtons {
padding-top:60px;
position: absolute;
align-items: center;
}
.sliderButtons > a {
z-index:12;
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: #5F6855;
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 0 0.5rem 0;
position: relative;
color:white;
font-size:20px;
}
.slider > a:active {
top: 1px;
}
.slider > a:focus {
background: #000;
}
slider.img {
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#slide-text1{
background-color:rgba(254, 254, 254, 0.275);/***transparent div background***/
border-radius:15px;
}
#slide-1 {
margin:0px auto 0px auto;
display: flex;
flex-wrap: wrap;
justify-content:center;
width: 100%;
height:auto;
max-width: 1024px;
color:white;}
#slide-2 {
margin:0px auto 0px auto;
display: flex;
flex-wrap: wrap;
justify-content:center;
width: 100%;
height:auto;
max-width: 1024px;
color:black;
background-color:white;
}
#slide-3 {
margin:0px auto 0px auto;
display: flex;
flex-wrap: wrap;
justify-content:center;
width: 100%;
height:auto;
max-width: 1024px;
color:white;
background-color:black;
background-image:url(images/sarahSBG.jpg);
background-position: center;
background-size: auto 120%;
font-size:20px;
}
#slide-4 {
margin:0px auto 0px auto;
display: flex;
flex-wrap: wrap;
justify-content:center;
width: 100%;
height:auto;
max-width: 1024px;
color:white;
background-color:black;
background-image:url(images/serahBg.png);
background-position: center;
background-size: auto 120%;
}
#slide-5 {
margin:0px auto 0px auto;
display: flex;
flex-wrap: wrap;
justify-content:center;
width: 100%;
height:auto;
max-width: 1024px;
color:white;
background-color:black;
}
.btn-next, .btn-prev {
visibility: hidden;
}
JavaScript
// Select all slides
const slides = document.querySelectorAll(".slide");
// loop through slides and set each slides translateX property to index * 100%
slides.forEach((slide, indx) => {
});
// current slide counter
let curSlide = 0;
// maximum number of slides
let maxSlide = slides.length - 1;
// select next slide button
const nextSlide = document.querySelector(".btn-next");
// add event listener and next slide functionality
nextSlide.addEventListener("click", function () {
// check if current slide is the last and reset current slide
if (curSlide === maxSlide) {
//alert ("next button clicked - Loading Slide "+slides.length);
curSlide = 0;
} else {
curSlide++;
//alert ("next button clicked - Loading Slide "+slides.length);
}
// move slide by -100%
slides.forEach((slide, indx) => {
slide.style.transform = `translateX(${100 * (0 - curSlide)}%)`;
});
});
setInterval(function () {
// check if current slide is the last and reset current slide
if (curSlide === maxSlide) {
// alert ("next button clicked - Loading Slide "+slides.length);
curSlide = 0;
} else {
curSlide++;
//alert ("auto change Loading Slide "+slides.length);
}
// move slide by -100%
slides.forEach((slide, indx) => {
slide.style.transform = `translateX(${100 * (0 - curSlide)}%)`;
});
}, 6000);
I made a mobile web page using IScroll.
The composition of the web page is as follows.
HTML
<div class="wrap">
<div class="content">
<div class="a">
TOP
</div>
<div class="item">
<div class="disable">
Google Ads
</div>
</div>
<div class="b">
BOTTOM
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
CSS
html, body, .wrap {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow-y: scroll;
}
.wrap {
width:100%;
height:100%;
background-color:white;
}
.disable {
position: fixed;
width:100%;
height:100%;
background-color:aqua;
z-index:1;
}
.a, .b {
width: 100%;
height:100px;
position:relative;
z-index:2;
}
.a {
background-color: red;
}
.item {
width:100%;
height:100%;
}
.b {
background-color: blue;
}
If you run the code above,
You can scroll by raising the cursor to A and B.
On mobile, you can scroll using touch.
But, So if you raise your cursor over a DIV with Aqua background color and scroll,
I can't scroll.
The DIV, "Position:Fixed," is...
Since the height is 100%, I don't think there's a scroll event.
For your information, Item needs a Click event.
So the "Pointer-Events: None" property is not allowed.
The "Trigger" function can't even give you an event.
Give me an idea.
https://jsfiddle.net/kasthe/b3w2hpn1/3/
Apply pointer-events: none to just the class=disable div. div class=item is still clickable.
$(".wrap").css("height", $(document).height() + "px");
console.log($(".wrap").height())
html, body, .wrap {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow-y: scroll;
}
.wrap {
width:100%;
height:100%;
background-color:white;
}
.disable {
position: fixed;
width:100%;
height:100%;
background-color:aqua;
z-index:1;
}
.a, .b {
width: 100%;
height:100px;
position:relative;
z-index:2;
}
.a {
background-color: red;
}
.item {
width:100%;
height:100%;
}
.b {
background-color: blue;
}
<div class="wrap">
<div class="content">
<div class="a">
TOP
</div>
<div class="item" onclick="alert('item clicked')">
<div class="disable" style="pointer-events:none">
Google Ads
</div>
</div>
<div class="b">
BOTTOM
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
I'm trying to make an image within a container not soar past 15px from the bottom of the container when it is scaled larger. What is the best way to do this? I've messed around with getBoundingClientRect() and such but haven't found the key to doing it. Here is an example of my problem.
function myFunction() {
var img = document.getElementById('image');
img.style.WebkitTransform = ('scaleY(2.0)');
img.style.width = img.getBoundingClientRect().width + 'px';
img.style.width = img.getBoundingClientRect().height + 'px';
}
.rand {
width:50px;
height:50px;
position:absolute;
bottom:15px;
left:45%;
}
div#test {
margin:auto;
border:2px solid red;
width:200px;
height:200px;
object-fit: contain;
overflow: hidden;
position:relative;
}
<div id='test'>
<img id='image' class='rand' src = 'https://www.purebuttons.com/cp/Pure_Buttons/html/images/squareprev.png'>
</div>
<button onclick='myFunction()'>CLICK</button>
</body>
So have the image fully be scaled larger and smaller but still sitting at 15px from bottom, and not go lower once scaled. Thanks for any help.
Probably the easiest way is to set the transform to start from the bottom with transform-origin:
function myFunction() {
var img = document.getElementById('image');
img.style.transform = 'scale(2.0)';
}
.rand {
width: 50px;
height: 50px;
position: absolute;
bottom: 15px;
left: 45%;
transform-origin: center bottom;
}
#test {
margin: auto;
border: 2px solid red;
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
<div id='test'>
<img id='image' class='rand' src='https://i.stack.imgur.com/YxTTq.png'>
</div>
<button onclick='myFunction()'>CLICK</button>
Instead of changing the attributes you can change the class to play with the position.
function myFunction()
{
var img = document.getElementById('image');
//img.style.WebkitTransform = ('scaleY(2.0)');
img.className = 'rand2';
}
.rand
{
width:50px;
height:50px;
display:block;
position:absolute;
bottom:15px;
left:45%;
border:1px solid red;
}
.rand2
{
width:50px;
height:50px;
display:block;
position:absolute;
transform: scaleY(2.0);
bottom:35px;
left:45%;
border:1px solid red;
}
div#test {
margin:auto;
border:2px solid red;
width:200px;
height:200px;
object-fit: contain;
overflow: hidden;
position:relative;
}
I have a slideshow with pager and some buttons next to pager of slideshow (here is html page) which I am trying to make responsive.
The images I am fetching from database. So that are varying in number.
The problem is that pager/navigation of slideshow is fine for less number of images but becomes problematic for more images. Pager is overlapping the buttons which are next to it. as shown below:
For Desktop screen:
For small screen:
Below is the div structure
<div id="controls-wrapper" >
<div id="controls">
<div id="cycle-nav"><ul></ul></div> <!-- pager -->
</div>
<div class="button1" id="button1">
button 1
</div>
<div class="button2" id="button2">button 2</div>
<div class="button3">button 3</div>
</div>
I am finding the solution other than media queries if possible. I tried by giving width in % to all div, by putting container div to above structure and giving it 100% width and height, by $(width).width() function. But not getting the solution.
jsfiddle
Is there any way to dynamically adjust the width of div depending on browser's screen size?
You can use the #media queries. Here's an example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
#media screen and (max-width: 300px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
...
</body>
</html>
This will change the background color of the body to lightblue. But when you resize your browser window to less than 300px it will change to lightgreen. I hope this will help you with your problem.
Here is simple solution using CSS and HTML, no #media queries no JavaScript,
I just modified some lines of HTML and CSS to your code those are below.
HTML
<div id="controls-wrapper" >
<div id="controls">
<div id="cycle-nav"><ul></ul></div>
</div>
<div class="buton-controls">
<div class="button1" id="button1">
button 1
</div>
<div class="button2" id="button2">button 2</div>
<div class="button3">button 3</div>
</div>
</div>
css
/* I wanted to center my loader */
#cycle-loader {
height:32px;
left:50%;
margin:-8px 0 0 -8px;
position:absolute;
top:50%;
width:32px;
z-index:999;
}
/*I want to avoid jumpiness as the JS loads, so I initially hide my cycle*/
#maximage {
display:none;/* Only use this if you fade it in again after the images load */
position:fixed !important;
}
#arrow_left, #arrow_right {
bottom:45%;
height:67px;
position:fixed;
right:3%;
width:36px;
z-index:1000;
}
#arrow_left {
left:3%;
}
#arrow_left:hover, #arrow_right:hover {
bottom:45%;
}
#arrow_left:active, #arrow_right:active {
bottom:45%;
}
a {color:#666;text-decoration:none;}
a:hover {text-decoration:underline;}
/*I want to style my pager*/
#cycle-nav {
/* float:left;*/
margin-top: 8px;
margin-left: 0;
text-align: center;
}
#cycle-nav ul {
list-style-type:none;
width: 100%
}
#cycle-nav ul li {
/* border:1px solid #FF8000;*/
display: inline-block;
margin:3px;
}
#cycle-nav ul li a {
/*background: #057c96;*/
background: #49BED8;
float:left;
height:10px;
margin:2px;
width:10px;
}
#cycle-nav ul li a:hover {
background: #000;
opacity:0.6;
}
#cycle-nav ul li.activeSlide {
/* border:1px solid #000;*/
/* background: #075262;*/
}
#cycle-nav ul li.activeSlide > a {
background: #075262;
}
#controls-wrapper { margin:0 auto; height:42px; width:100%; bottom:70px; z-index:4; background:url(../img/nav-bg.png) repeat-x; position:fixed; }
#controls { width: 50%; float: left; }
.buton-controls{
width: 50%;
float: left;
text-align: center;
}
.buton-controls > div{
display: inline-block;
}
.button2{
background-color: red;
font: 14px/23px 'TitilliumText25L400wt',Arial,sans-serif;
height: 20px;
opacity: 0.4;
text-align: center;
width: 70px;
color:#FFFFFF;
}
.button2:hover{
background-color:#000;
cursor:pointer;
opacity:1 !important;
}
.button2hoverBg{
background-color:#137087 !important;
cursor:pointer;
opacity:1;
}
.button3{
background-color: red;
color:#FFFFFF;
font: 14px/23px 'TitilliumText25L400wt',Arial,sans-serif;
height: 20px;
opacity: 0.4;
position: relative;
text-align: center;
z-index: 10;
width: 70px;\
}
.button3:hover, a:hover{
background-color:#000;
cursor:pointer;
opacity:1 !important;
text-decoration:none;
color:#FFFFFF;
}
.button3 a{
color:#FFFFFF;
text-decoration:none;
}
.button1{
background-color: red;
color:#FFFFFF;
font: 14px/23px 'TitilliumText25L600wt',Arial,sans-serif;
height: 20px;
text-align: center;
width: 70px;
z-index: 10;
opacity: 0.4;
}
.button1 a{
color:#FFFFFF;
text-decoration:none;
}
Yes, use the vw and vh CSS properties.
1vw = 1% of window width,
1vh = 1% of window height.
http://demosthenes.info/blog/660/Using-vw-and-vh-Measurements-In-Modern-Site-Design
<div style="width: 600px;">
<div class="header">
<img src="logo.png"/>
</div>
<div class="container">
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
<div class="div4">Div 4</div>
<div class="div5">Div 5</div>
</div>
.header
{
height:200px;
background-image: url('http://www.imgur.com/YLVpI.png');
margin:0;
width:100%;
background-position:left;
}
.header img
{
margin-left:auto;
margin-right:auto;
}
.container .div1
{
background-color: black;
background-position:left;
float:left;
width:20%;
margin: 0px;
}
.container .div2
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
float:left;
width:100px;
margin:0; padding:0;
border-bottom-left-radius: 20px;
}
.container .div3
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
float:left;
margin:0; padding:0;
}
.container .div4
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
float:left;
width:100px;
margin:0; padding:0;
border-bottom-right-radius: 20px;
}
.container .div5
{
background-color: black;
float:left;
display:inline-block; width:90px;
width:20%;
margin:0;
}
There are several things I cannot get to work simultaneously:
Make the header span 100% of the page width.
Make div 2 and 4 a set width of 30px each.
Make div 3 a set width of 400px.
Make div 1 and 5 fill the remaining space regardless of how big the window is.
Center everything so it looks nice.
Make the background align correctly.
Does anyone know how to do this? http://jsfiddle.net/jaTuu/
As far as I can tell, you solved 5 on your own, and as far as I know, without extraneous stuff, you need Javascript to do number 4. I cannot attempt 6 without access to your images. Nevertheless, I think you can resolve that on your own.
Below is the solution I came up with given your code:
<div id="header_container" style="width: 600px;">
<div class="header">
<img src="logo.png"/>
</div>
<div class="container"><div class="div1">Div 1</div><div class="div2 width30">Div 2</div><div class="div3 width300">Div 3</div><div class="div4 width30">Div 4</div><div class="div5">Div 5</div>
</div>
*
{
padding:0;
margin:0;
}
#header_container {
background-color: #000;
min-width: 100%;
}
.width30 {
width: 30px;
}
.width300 {
width: 300px;
}
.header
{
height:200px;
background-image: url('http://www.imgur.com/YLVpI.png');
margin:0;
background-position:left;
}
.header img
{
margin-left:auto;
margin-right:auto;
}
.container
{
text-align:center;
}
.container .div1
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
display:inline-block;
background-color: yellow;
width:90px;
border-bottom-left-radius: 20px;
}
.container .div2
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
background-color: purple;
display:inline-block;
/*width:90px;*/
margin:0; padding:0;
}
.container .div3
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
background-color: green;
display:inline-block;
/*width:90px;*/
}
.container .div4
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
background-color: blue;
display:inline-block;
/*width:90px;*/
}
.container .div5
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
background-color: orange;
display:inline-block;
width:90px;
border-bottom-right-radius: 20px;
}
A couple things to note here:
Assuming that you want the element names to remain distinct, you can modify the width of the items by adding classes which define sizes as per the above. If you do so, as I did, you will have to remove the widths of the elements as you define them in the CSS (also shown above).
One more note: it seems as though you are attempting to do a navigation menu. If that is the case, it may be a better idea to use lists to represent the items.
Try to centering all background images.
background: url('http://www.imgur.com/YLVpI.png') center center;
Like this demo: http://jsfiddle.net/ongisnade/PThcc/