Scale Div to Smartphone Width? - javascript

I'm trying to get a before/after slider working correctly on my website. I'm almost there, but the DIV is not properly scaling on mobile browsers. It extends way past the width of my smartphone screen.
Here's a link to the website page I'm working on.
About halfway down you'll see a Polarizer section with the Before / After slider. It looks fine on my Desktop browser, but on mobile it extends past the screen width. My coding skills are pretty weak, so I may be missing something simple here.
Here's where I got the Before / After code from.
I assume I just need to insert a basic property into one of the CSS sections below? I've already added the viewport code into the head:
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">div.beforeandafter{ /* main container */
background: white;
display: block;
height: 630x; /* default height of main container */
overflow: hidden;
position: relative;
width: 944px; /* default width of main container */
}
div.before, div.after{ /* before and after DIVs within main container */
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
transition: width 0.4s ease-in-out; /* CSS transition. Actual duration set inside script (options.revealduration) */
width: 100%;
z-index: 100;
}
div.after{
z-index: 1; /* z-index of after div should be smaller than before's */
}
div.drag{ /* main div used for separating and dragging between before and after slides */
background: white;
cursor: col-resize;
display: block;
height: 100%;
left: 100%;
position: absolute;
top: 0;
transition: left 0.4s ease-in-out; /* transition. 0.4s sets duration of drag fade in time */
width: 2px; /* width of drag bar separator */
z-index: 1001;
}
div.drag div.draghandle{ /* handle bar within drag interface */
background: darkred;
background: -moz-radial-gradient(center, ellipse cover, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: radial-gradient(ellipse at center, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
background: rgb(169,3,41);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
border-radius: 2px;
box-shadow: 0 0 5px gray;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 );
height: 20%; /* height of drag handle */
position: absolute;
text-align: center;
width: 16px; /* width of drag handle */
}
div.before span.caption, div.after span.caption{ /* CSS to syle SPAN caption. Optional */
background: black;
bottom: 10px;
color: white;
display: block;
font: bold 12px Germand;
padding: 5px;
position: absolute;
right: 10px;
width: 90px;
}
div.before span.caption{
left: 10px;
right: auto;
}
div.before span.caption a, div.after span.caption a{
color: lightyellow;
text-decoration: none;
}
Finally, here's the actual DIV:
<div class="beforeandafter" id="baf" style="width:944px; height:630px; ">

You have a defined height and width as inline styles in your HTML
<div class="beforeandafter" id="baf" style="width:944px; height:630px; ">
Change that to
<div class="beforeandafter" id="baf">
Then in your CSS document, remove height: 630px; and width: 944px from div.beforeandafter and add padding-bottom: 66.73728814%

Related

How to make an element on top of a div in the same background color?

I'm trying to create a button for my website that has the same color as the background, even when its size changes.
Basically, the button is on top of a div with white background, that is on top of the body which has gradient background-color.
When I press on the button, its size (scale) changes, and I want it to seem like a cutout/window in the div, that will display the background color.
What I tried to do is to make it gradient, but when it resizes - the gradient background of the button resizes as well. Also that solution is inelegant...
My cite's code:
function chg()
{
document.getElementById("main_div").style.width = "80%";
document.getElementById("catch_div").style.right = "7%";
document.getElementById("enter_div").style.left ="4%";
}
html,body, #main_div{
height: 100%;
overflow: hidden
}
body {
background-color: #1862A1;
background-image: linear-gradient(90deg, #1862A1, #8529B1);
padding-bottom: 0;
padding-top: 0;
margin: 0;
}
#main_div{
height: 100%;
width: 100%;
transition:all 0.3s ease-in-out;
background-color: white;
}
.logo{
width: 48.125vw;
height: 22.3046875vw;
}
#catch_div{
right: 40%;
position: relative;
transition:all 0.3s ease-in-out;
margin-top: -3vw;
}
#enter{
display: block;
width: 6vw;
height: 6vw;
box-shadow: 0 0 0 1px #fff;
text-align: center;
line-height: 136px;
border-radius: 100%;
text-decoration: none;
transition: all 250ms;
outline: 0;
background-color: transparent;
border: 1px solid red;
}
#enter:active{
transform: scale(.90);
}
#enter:active #VButton {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
}
#enter_div{
left: 40%;
position: relative;
transition:all 0.3s ease-in-out;
margin-top: 3vw;
}
.catchphrase{
font-family: Niconne;
font-size: 3.5vw;
font-weight: 400;
color: #1761A0;
}
#cspan{
background: -webkit-linear-gradient(to right, #1761A0 0%, #6B38B0 110%);
background: -moz-linear-gradient(to right, #1761A0 0%, #6B38B0 110%);
background: linear-gradient(to right, #1761A0 0%, #6B38B0 110%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background: linear-gradient(90deg, #1862A1, #8529B1) center fixed;
background-size: cover;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
#VButton{
width: 5.33vw;
height: 5.33vw;
margin-left: 0vw;
margin-top:0.31vw;
position:relative;
}
<body onload="chg()">
<form id="form1" runat="server">
<center>
<div style="min-height: 100vh;" id="main_div">
<asp:Image runat="server" ImageUrl='~/BETTER_logo.png' ID="logo" CssClass="logo"></asp:Image>
<div id="catch_div"><asp:Label ID="Label1" runat="server" Text="Label" CssClass="catchphrase">Feel <span id="cspan">the rythem</span></asp:Label></div>
<div id="enter_div">
<button type="button" id="enter">
<center><img src="VButton.png" id="VButton"></center> <!-- problem -->
</button>
</div>
</div>
</center>
</form>
</body>
Is something like that even possible? Anyone has a direction that he can point me into?
Tried looking online for something close, but with no luck, I would appreciate any help
EDIT: I would love for the cut out to be able to move, so that I'll be able to create animations in my site in the future with my JS code.
You could create a 'hole' in the white div and place the button (with a transparent background) over it and scale them when clicked. That way the background image of the body will always show through and you don't have to worry about the button's background.
The way to create a hole is to give the white div a radial gradient, positioned where you want the button and with the first part transparent, and then white to the edge.
Here is a small example, the parameters for width etc are in CSS variables to make it easy to play around. Obviously put your own backgrounds for the body in and your own dimensions.
UPDATE the question was expanded to ask how to move the hole. The method here is to move the whitediv - we make it twice the dimensions of those that are actually seen on the screen so that as it moves the viewable part remains white.
Note any other elements that are on top of the white need to be taken out of whitediv and displayed over it so they don't move as the hole moves.
The demo simply expands/contracts the hole if the hole is clicked on and 'moves' the hole if the white part is clicked on [this last bit just for a demo]. Click the white part to see the hole 'fly in'.
const button = document.querySelector('.enter');
const whitediv = document.querySelector('.whitediv');
let n = 0; //just for a test to move the hole (whitediv) around
button.addEventListener('click', function (ev) {
ev.stopPropagation();
whitediv.style.transform = whitediv.style.transform.includes('scale(1)') ? whitediv.style.transform.replace('scale(1)', 'scale(var(--s))') : whitediv.style.transform.replace('scale(var(--s))', 'scale(1)');
});
//just for a demo we move the hole around a little bit if the whitediv is clicked
whitediv.addEventListener('click', function (ev) {
n = (n+1)%3;
whitediv.style.transform = 'translateX(-' + (10*n) +'%) translateY(-' + (10*n) +'%) scale(1)';
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-image: linear-gradient(red,orange,yellow,green,blue,indigo,violet);
width: 100vw;
height: 100vh;
}
.container {
--x: 30%; /* distance from the left of the white div to center of the hole */
--y: 40%; /* distance from the top to the center of the hole */
--d: 10vmin; /* the diameter of the hole to start with */
--s: 2; /* the scaling factor - factor by which the hole will expand on clicking */
--w: 40vw; /* width of the white div */
--h: 40vh; /* height of the white div */
--top: 10%; /* position of the white div */
--left: 20%;
position: relative;
top: var(--top);
left: var(--left);
width: var(--w);
height: var(--h);
overflow: hidden;
border: 4px white;
}
.whitediv {
position: relative;
width: 100%;
width: 200%;
height: 100%;
height: 200%;
background-image: radial-gradient(circle at var(--x) var(--y), transparent 0%, transparent calc(var(--d) / 2), white calc(var(--d) /2), white 100%);
transition: all 2s;
transform: scale(1) translateX(-50%) translateY(-50%);
transform-origin: var(--x) var(--y);
overflow: hidden;
}
.enter {
background-color: transparent;
height: var(--d);
width: var(--d);
position: relative;
top: var(--y);
left: var(--x);
transform: translateX(-50%) translateY(-50%) scale(1);
border-radius: 50%;
border-style: none;
}
<div class="container">
<div class="whitediv">
<div class="enter">
</div>
</div>
</div>
Here are two ways to do what you wanted to do:
You could create a div with a button. You give the div a background colour. In this case it is blue. Then you give the button the background colour transparent to make the button transparent and the background colour is taken from the div. It is a bit difficult to explain. Therefore here is an example:
div {
background: blue;
width: 300px;
height: 300px;
}
button {
background: transparent;
color: white; /* The button has a white colour to make it easier to see. /*
}
<h2>The background colour of the button was taken from the div</h1>
<div>
<button>Hello World!</button>
</div>
Then there is a second possibility. You can address the div and the button at once. To do this, you have to separate the properties with a ,.
Here is an example:
div {
height: 50px;
width: 100px;
}
/* giving both a background color */
div, button {
background: red;
}
<div>
<button>Hello World</button>
</div>
<h2>Even if the button is not in the div, it has the same background colour.</h2>
<button>Second Button</button>
<br>
<br>
<button>Third Button</button>

Achieve animated seesaw -ish effect with linear-gradient (pure CSS)

I have an element with one diagonal side achieved by adjusting linear-gradient and height - in two different states. Now I try to toggle between these states and have a smooth transition of the red triangle, so that it would look like a seesaw :-) The problem is, that from one state to another it changes the direction and is jumpy, I did not find a way to animate it fluently .. Is there a way to to what I want using pure CSS e.g. using transitions?
let btn = document.getElementsByTagName('button')[0];
let stage = document.getElementById('stage');
btn.addEventListener('click', function() {
stage.classList.toggle('fixie');
});
body,
ul {
padding: 0;
margin: 0;
}
#stage {
width: 100%;
height: 14em;
background: pink;
padding: 0;
border: 1px solid blue;
}
#stage::before {
display: block;
position: relative;
width: 100%;
height: 100%;
/*as high as #stage*/
opacity: 0.4;
content: '';
z-index: 1;
background: linear-gradient(to left bottom, red 50%, pink 50%);
/*transition: height 4s;*/
/*transition: linear-gradient 4s 8s;*/
}
#stage.fixie::before {
height: 30%;
background: linear-gradient(to right bottom, red 50%, pink 50%);
}
<div id="stage"></div>
<button>animate gradient</button>
Here is my FIDDLE
As you can't animate linear-gradient, here is a workaround using transform
In this sample I used skew. As the degree of skew will differ based on the width/height, and as long as its ratio is kept, this will be fully responsive, else you'll need a small script.
(function(){
let btn = document.getElementsByTagName('button')[0];
let stage = document.getElementById('stage');
btn.addEventListener('click', function() {
stage.classList.toggle('fixie');
});
})();
body, ul {
padding: 0;
margin: 0;
}
#stage {
position: relative;
overflow: hidden;
width: 90vw;
height: calc(90vw * 0.2677); /* 0.2677, aspect ratio that match skew degree */
background: pink;
padding: 0;
border: 1px solid blue;
}
.navi {
width: 100%;
min-height: 4em;
height: auto;
background: green;
z-index: 2;
position: relative;
}
#stage::before {
content: '';
position: absolute;
width: 100%;
height: 100%; /*as high as #stage*/
bottom: 100%;
opacity: 0.4;
z-index: 1;
background: red;
transform: skewY(15deg);
transform-origin: left bottom;
transition: transform 2s;
}
#stage.fixie::before {
transform: skewY(-15deg) translateY(100%);
}
.navi ul {
list-style: none;
display: flex;
background: lightblue;
justify-content: flex-end;
}
.navi ul li {
display: flex;
align-items: center;
justify-content: center;
min-width: 4em;
width: auto;
height: 2em;
margin: 1px;
background: yellow;
}
<div id="stage"></div>
<button>
animate
</button>
Side note:
One can use any fixed value instead of vw, as long as the #stage's ratio is kept. If to change ratio, you'll either need a script, since CSS calc can't do math with sqrt and sin/cos etc. to get the angle, or using media query's, and have angle's and ratio's manually set for different screens.

"Ken Burns effect" on hover background image?

I've got a parent div that has 30% width and 100% height with the background image set to cover.
What I want, is when I hover over over this div, I would like to create a "Ken Burns effect" on the background...
Currently this is my CSS code:
.col1 {
margin-left : 20%;
width : 26.66%;
float : left;
height : 100%;
background :
linear-gradient(
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.3)
),
url(images/rave.jpg);
background-size : cover;
background-position : left;
opacity : 1;
background-color : black;
}
Any ideas or if anyone could point me in the right direction that would be great.
Here is what you're looking for: http://codepen.io/hkfoster/pen/kechC
CSS
/* Better box-sizing */
* { box-sizing: border-box; }
/* 1rem = 10px */
html { font-size: 62.5%; }
/* Default body */
body {
margin: 0;
opacity: 0;
font: 1.6rem/1.875 'Avenir Next', sans-serif;
}
/* Loaded body */
body.loaded {
opacity: 1;
transition: 1s opacity;
}
/* Default banner */
.banner {
position: relative;
width: 100%;
height: 40rem;
padding: 0 5%;
overflow: hidden;
backface-visibility: hidden;
}
/* Default image container */
.banner .background {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
transform: translate3d(0,0,0) scale(1.25);
background: black url(https://dl.dropboxusercontent.com/u/150679257/hazy.jpg) no-repeat center center;
background-size: cover;
}
/* Loaded image container */
.loaded .banner .background {
transform: scale(1);
transition: 6.5s transform;
}
/* Other stuff */
.banner h1 {
color: #EEE;
margin: 0;
line-height: 40rem;
text-transform: uppercase;
text-shadow: 0 0 .3rem black;
}
main {
width: 90%;
margin: 5rem auto;
}
main p { margin: 0 0 3rem 0; }
JS
// Trigger class name on load
window.onload = function() {
document.body.className += ' loaded'
};
If you want to keep background-size: cover, you won't be able to animate the background image's size. You could switch it to background-size: 100% in some cases to animate it: see this fiddle.
The effect is kind of jittery, though - I'd recommend wrapping .col1 and animating the transform's scale instead, like in this fiddle. You'll have to play around with the background-position property on the hover state to achieve the panning effect, but it looks much smoother this way.

How to change hamburger menu icon when clicked?

Okay so I have a hamburger style menu that uses the normal 3 line icon but I'd like it so when you click it the icon changes to a cross. How would I achieve this? How would I structure the JavaScript?
HTML:
<ul class="navigation">
<li class="nav-item">Home</li>
<li class="nav-item">Meet the team</li>
<li class="nav-item">Blog</li>
</ul>
<input type="checkbox" id="nav-trigger" class="nav-trigger" onclick="menuChange()" />
<label for="nav-trigger"></label>
CSS:
.navigation {
/* critical sizing and position styles */
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
/* non-critical appearance styles */
list-style: none;
background: #000;
}
/* Navigation Menu - List items */
.nav-item {
/* non-critical appearance styles */
width: 200px;
}
.nav-item a {
/* non-critical appearance styles */
display: block;
padding: 1em;
background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
color: #999999;
font-size: 1.2em;
text-decoration: none;
transition: color 0.2s, background 0.5s;
}
.nav-item a:hover {
color: #ffffff;
}
/* Nav Trigger */
.nav-trigger {
/* critical styles - hide the checkbox input */
position: absolute;
clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
/* critical positioning styles */
position: fixed;
left: 15px; top: 15px;
z-index: 2;
/* non-critical apperance styles */
height: 30px;
width: 30px;
cursor: pointer;
background-image: url(../images/Menu.png);
background-size: contain;
}
/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
transition: left 0.2s;
}
.nav-trigger:checked + label {
left: 215px;
}
.nav-trigger:checked ~ .site-wrap {
left: 200px;
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
Check it out.
I think the better solution is to use an event caused in the collapse menu instead of onclick.
show.bs.collapse - Fired after the show method is called.
shown.bs.collapse - Will wait for CSS transitions to complete
hide.bs.collapse - Fired when the hide instance method has been called.
hidden.bs.collapse - Will wait for CSS transitions to complete
Code look like this:
$('.navigation').on('show.bs.collapse', function() {
// set cross as content of menu button
});
$('.navigation').on('hide.bs.collapse', function() {
// set tree lines as content of menu button
});

Insert space at position in border line

I'm displaying a horizontal line using css :
.horizontalLineBottom {
border-bottom:solid #6E6A6B;
border-width:1px;
}
Can I space be insterted a specific position on this line ?
So
______________________________________________
becomes
______________________________ ___
Another solution using border-width:
.line {
width: 20px;
height: 1px;
padding: 0;
border-width: 0 100px 0 150px;
border-style: solid;
border-color: red;
}
http://jsfiddle.net/dfsq/Uttxy/1/
:after or :before psuedo class can help you. Like in this Fiddle:
div {
width:100px;
height:100px;
border:1px solid #000;
margin:50px;
background:yellow;
position:relative;
}
div:after {
content: '';
height:60px;
width:1px;
position:absolute;
top:20px;
left:-1px;
background:yellow;
}
No with border in a block (just a border for a block).
You can add a background-image, if it fits your needs.
You cannot achieve this directly through CSS.
I would suggest 2 solutions
1 ) you can use _ character and make it look like a line and insert space where ever you want and give color attribute through CSS.
2) Use two elements, with first element having some width and some margin-right.
The margin right will give you the required space
You could use a background gradient on the element: http://jsfiddle.net/q652t/
Then you could create as many as you like
.line {
margin: 10px;
height: 1px;
width: 400px;
background: -webkit-linear-gradient(
left, gray 10%, white 10%, white 40%,
gray 40%, gray 60%,
white 60%, white 80%,
red 80%, red 100%);
}
You can't do it directly, but with a small workaround using a pseudo element. The trick is to create a small overlay with the same background color as the background underneath your element.
.verticalLineBottom {
position: relative;
border-bottom: 1px solid #6E6A6B;
}
.verticalLineBottom:after {
content: "";
position: absolute;
right: 20px;
bottom: -1px;
width: 100px;
height: 1px;
background: #fff;
}
Example: http://jsfiddle.net/zxdS7/
Unfortunately, it does not work if the background behind your element has a pattern.
I created this code for you, this fakes the result you're looking for.
.stopped-line {
/* basic styles here */
width: 100px; /* this is mandatory */
position: relative;
}
.stopped-line:before {
position: absolute;
bottom: 0;
display: block;
width: 70%; /* width in percentage of the line */
content: " ";
height: 1px; /* thickness of the line */
background: #000; /* color of the line */
}
.stopped-line:after {
position: absolute;
bottom: 0;
left: 80%; /* Where should the second line start? */
display: block;
width: 20%; /* width in percentage of the line */
content: " ";
height: 1px; /* thickness of the line */
background: #000; /* color of the line */
}
JSBin: click

Categories