Fluid Dynamic CSS - Javascript/jQuery - javascript

I am wondering if there is way, to mark a MAX and a MIN value depending on the max Width of the browser window and min Width of the browser window, and have it dynamically change that MAX and MIN value between that set range?
Example:
I have a button "button" outside a div "divA" (it is part of another div "divB", that lies outside the div being discussed), and I want this button "button" to lie at the bottom right corner of this initial div "divA".
Now, I can get the button to lie at the bottom right corner when the browser window is at is absolute minimum, and at the absolute maximum, but the in between is a bit sporadic since I'm positioning the button absolutely, and then changing the bottom percentage on the two media widths.
Is there a a known javascript or jquery that would allow me to do this?
example CSS:
#divA{
width: 100%;
height:auto;
}
#divB{
width: 100%;
height: auto;
}
#button{
position: relative;
}
#media screen and (min-width: 768px){
#button{
position: absolute;
bottom: 100%;
}
}
#media screen and (min-width: 400px){
#button{
position: absolute;
bottom: 250%;
}
}
example HTML:
<div id="divA"></div>
<div id="divB"><button>CLICK ME</button></div>

demo -http://jsfiddle.net/ogjhef7c/1/
you are setting bottom to by 250% 100% try changing the value, #media works find try resizing theattached fiddleheight`
#media screen and (max-height: 300px) {
#button {
bottom: 0px;
background: red;
}
}
#media screen and (max-height: 100px) {
#button {
bottom: 0px;
background: green;
}
}

Related

How can I change a div image and height rules when screen is resized?

I have two divs side by side, chat_bubble and character_image. The chat_bubble is a fixed percentage of the screen width/height, and the character_image fills the rest of the space. If the screen width is too small to fit both, character_image is tiled underneath and cuts off the image vertically to make space for chat_bubble.
I want to change this so that if the character_image must be tiled underneath chat_bubble:
The image is changed to a new image
That new character_image is now a fixed height and width of the screen, and for chat_bubble to fill the remaining vertical space.
chat_bubble needs to be 100% width of the screen when character_image is underneath, instead of 70%.
What's the best way for me to do this? I am doing this as a JavaScript project, do I need to add if conditions to my JavaScript to do this or can it be done responsively through CSS?
Here's my code pen to show how it is now:
https://codepen.io/TheNomadicAspie/pen/JjWVbKJ
Here's the relevant CSS code:
#main {
width: 90%;
height: 90%;
overflow: hidden;
}
#chat_bubble {
width: 70%;
height: 70%;
background: ghostwhite !important;
float: left;
}
#character_image {
max-height: 30vh;
object-fit: cover;
background: #ffffff;
float: right;
overflow: visible;
}
No need to load a new image using javascript but make the theme/image responsive.
First, make sure HTML doctype is HTML5 <!DOCTYPE html> and contains the meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0">
Then, apply css like for desktop view.
#chat_bubble {
width: 70%;
background: ghostwhite !important;
float: left;
}
#character_image {
width:30%;
float: right;
}
#character_image>img{
width:100%
}
For mobile view, using media query for mobile. For example
#media only screen and (max-width: 700px) {
#chat_bubble, #character_image{
width:100%;
float:none;
}
}

Can't click on browser vertical scrollbar because of a fullscreen fixed bootstrap modal

I am using Bootstrap 4 on my project, and modified the modal style in order to make it fullscreen like you can see it on this css code:
.modal.show {
display:flex!important;
flex-direction:column;
justify-content:center;
align-content:center;
align-items: flex-start;
}
.modal-body {
padding: 0;
margin: 0;
}
.close {
color: #aaa;
position: absolute;
/* background: blue !important; */
border: 0;
top: 0;
z-index: 99999;
right: 3%;
float: none;
opacity: 1;
font-size: 40px;
font-weight: 400;
}
.modal-backdrop.modal-backdrop-transparent {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-transparent.in {
opacity: .9;
filter: alpha(opacity=90);
}
.modal-backdrop.modal-backdrop-fullscreen {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-fullscreen.in {
opacity: .97;
filter: alpha(opacity=97);
}
.modal-fullscreen {
background: #fff;
min-width: 100%;
margin: 0;
}
#media (min-width: 768px) {
.modal-fullscreen .modal-dialog {
width: 750px;
}
}
#media (min-width: 992px) {
.modal-fullscreen .modal-dialog {
width: 970px;
}
}
#media (min-width: 1200px) {
.modal-fullscreen .modal-dialog {
width: 100%;
}
}
.modal-dialog {
position:fixed;
padding: 0;
max-width: 100%;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100vh;
overflow:auto;
}
When I tried to scroll down the vertical scrollbar of the browser, it won't ! I can use mouse scroll wheel but not by clicking on it directly !
Are you able to detect the problem ? It's for sure the fixed position but it is needed to make it fullscreen.
Here a jsfiddle to see a live demo of the problem:
https://jsfiddle.net/odbjcpt2/1/
I don't want to use position FLEX instead of FIXED since it won't solve the problem on my project, even if in the example given it will works (modal keep ading padding-right to body ... it is fixed using FIXED).
Thank you
In your JSFiddle, the problem appears to be with the div that contains the Lorem Ipsum text. It has pointer-events: auto; inherited from .modal-content class and if you remove that it ends up with pointer-events: none; inherited from modal-dialog class. If you take both those away, the problem goes away.
EDIT
I believe the root of the issue is that you're setting your .modal-dialog class to have fixed position and overflow auto.
Below is from bootstrap doc
Modals use position: fixed, which can sometimes be a bit particular
about its rendering. Whenever possible, place your modal HTML in a
top-level position to avoid potential interference from other
elements. You’ll likely run into issues when nesting a .modal within
another fixed element.
After playing around, if I edit your CSS in your JSFiddle example and in the .modal-dialog class I just remove position:fixed; and overflow:auto;, the problem goes away.
EDIT AGAIN
I just noticed you actually have .modal-dialog defined in your CSS twice, the first time with flex position and second time with fixed. Sounds like that was maybe a copy/paste mistake. Anyhow, still the same root cause I think, because your .modal-dialog div is fixed and it's inside your .modal div, and bootstrap doc says don't put another fixed inside a .modal

container-fluid in Bootstrap 3.4 not stretching horizontally 100%

I'm having the same issue as my previous question: div doesn't expand all the way horizontally
All I have in my render() function is
render() {
return (
<div className="container intro-body">
</div>
)
With CSS for intro-body like so (for color)
.intro-body {
height: 582px;
background-color: #3BC5C3;
}
On full screen on a 13 inch Macbook, the left and right sides are white spaces. It seems like there's padding or margin of some sort.
But when I shrink my window to about half the size, it reaches the left and right sides
Can someone explain this strange phenomenon? Is this something in Bootstrap that I'm not aware of? I was told to use container-fluid but 1. I think it's removed in Bootstrap 3 and 2. It didn't work when I tried it.
If you look at the bootstrap source you would see that .container has fixed widths for every media breakpoint except for extra small devices, and .container-fluid has full width for all media breakpoints:
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
So if you want to have fullwidth for every media breakpoint, use .container-fluid.
First thing first : you have to put a reset css link (it must be the first one). You can find one here: http://meyerweb.com/eric/tools/css/reset/ then if you want the container to match the total width of a div element it must be a container-fluid

CSS Resizing Images, keeping formation

I have a formation of images, as seen here:
The following is the HTML. "second-panel" is the main wrapper, which has the background image of the building. Each "diamond"-shaped image is positioned absolutely, using CSS, with pixel values.
<!-- Second panel -->
<div id="second-panel" class="parallax-wrapper">
<div id="second-panel-diamonds">
<img class="second-panel-diamond" src="images/furniture-min.png" alt="Furniture" />
<img class="second-panel-diamond" src="images/automobile-min.png" alt="Automobile" />
<img class="second-panel-diamond" src="images/jewelry-min.png" alt="Jewelry" />
<img class="second-panel-diamond" src="images/antique-min.png" alt="Antique" />
</div>
<div class="parallax-panel">
...(not relevant)...
</div>
</div>
CSS:
#second-panel-diamonds{
position: absolute;
left: 1%;
top: -5px;
}
#second-panel .second-panel-diamond{
position: absolute;
/* width: 22%; */
width: auto;
height: auto;
max-width: 350px;
}
.second-panel-diamond:first-child{
top: 250px;
left: 90px;
}
.second-panel-diamond:nth-child(2){
top: 80px;
left: 260px;
}
.second-panel-diamond:last-child{
left: 337px;
top: 337px;
}
The problem is when it comes to smaller screen sizes, as the images will obviously start to overflow, since they are given a fixed width and height. I tried setting them to a percentage width and height auto, but then of course they break formation as they get smaller. I tried setting their positions using percentage values as well, but it does not scale properly, according to the resizing of the images AND the resizing of the window.
Is there any way to maintain this formation while scaling the images down, or will I have to just redesign it for smaller screens?
Yes, using CSS #media queries. You just need to decrease the size of the images display (you'd have to not use auto, if needed, calc(auto - px)) for specific screen sizes (don't forget to change each image position later):
#media screen and (max-width: 600px) {
#second-panel .second-panel-diamond {
position: absolute;
width: 50px;
height: auto;
}
}
#media screen and (min-width: 601px) {
#second-panel .second-panel-diamond {
position: absolute;
width: 100px;
height: auto;
}
}
The easiest way to solve the problem would be to merge all images into one PNG graphic and then to set its width and height as percentage values. Do you need the images to be separate?

Allow a div to scroll for x amount but then stop?

I have a div that is 700px high, under that div is a 200px picture. I want to allow scrolling for the first 700px but then no more. So on smaller vertical resolutions users can scroll to see the first 700px but then the rest is "cut off".
On the other hand users on large vertical resolutions will see the 700px div and the picture all with no scrollbar.
How can it be done?
You can use css media queries to use different css on different window size.
#media all and (min-width: 350px) and (min-height: 950px) {
// css for a window size of 250px height and 750px width or higher
}
So you want to do something like this?
.content {
height: 700px;
width: 300px;
}
.main {
height: 700px;
width: 100%;
background-color: red;
}
.pic {
display: none;
height: 200px;
width: 100%;
background-color: blue;
}
#media all and (min-height: 950px) {
.content {
height: 900px;
}
.pic {
display: block;
}
}

Categories

Resources