Orientation change causes position center div to shift (bootstrap) - javascript

I'm using bootstrap and have used the vh code to vertically align a div. However, when the orientation changes, it causes the once vertically centered div to misposition, hence I tried writing some jquery to reload the window that will cause it to be centered once again. But the java is not working. So will be great if someone could point out to me, why it's not. Thanks.
CSS:
.vertical-align {
height:auto;
min-height: 100vh;
/* Make it a flex container */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Align the bootstrap's container vertically */
-webkit-box-align : center;
-webkit-align-items : center;
-moz-box-align : center;
-ms-flex-align : center;
align-items : center;
-webkit-box-pack : center;
-moz-box-pack : center;
-ms-flex-pack : center;
-webkit-justify-content : center;
justify-content : center;
flex-direction: row;
width:100%;
text-align: center;
font-size: 0;
}
Javascript:
var wasPortrait = -1;
var checkOrientation = function() {
var isPortrait = (window.innerHeight > window.innerWidth);
if( isPortrait === wasPortrait ) { return; // Nothing to do here }
wasPortrait = isPortrait;
alert("change dected");
location.reload();
};
window.addEventListener( 'orientationchange', checkOrientation, false );

Related

CSS3 transition delay not working on webkit mobile

I'm trying to animate a div with a translate3D, it's working perfectly everywhere except on webkit-mobile where the property is well interpreted but the div goes directly to the endpoint.
I tried to use the webkit transition without any difference and the debugger is telling me that everything should work.
Please tell me there is something I don't understand (it's driving me crazy)
JS
function setTransform(x, y, deg, duration) {
current.style.transform = `translate3d(${x}px, ${y}px, 0) rotate(${deg}deg)`
likeText.style.opacity = Math.abs((x / innerWidth * 2.1))
likeText.className = `is-like ${x > 0 ? 'like' : 'nope'}`
if (duration) {
current.style.transition = `transform ${duration}ms`
current.style.webkitTransition = `transform ${duration}ms`
// debugger;
}
}
CSS of the "current" element
.card {
position: absolute;
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
height: 100%;
color: #f1f1f1;
border-radius: 10px;
user-select: none;
cursor: pointer;
overflow-y: scroll;
touch-action: none;
flex-direction: column;
}

Dropped srcset candidate "<URL>" for all images

I use the Divi theme on my Wordpress site and I am using their theme builder to design all of my category pages. I found this template which I like the look of - https://divisoup.com/css-grid-blog-layout/
This includes adding the below JavaScript code to do some of the design as well as the following CSS too.
<script>
//CSS Grid Blog Layout by Divi Soup
(function ($) {
$(document).ready(function () {
//Wrap first grid elements in containers
$(".ds-grid-blog-1 .et_pb_post").each(function () {
$(this).find(".entry-featured-image-url").wrapAll('<div class="ds-grid-blog-image"></div>');
$(this).find(".entry-title, .post-meta, .post-content").wrapAll('<div class="ds-grid-blog-content"></div>');
});
});
})(jQuery);
(function ($) {
$(document).ready(function () {
$(document).bind('ready ajaxComplete', function () {
//Wrap second grid elements in containers
$(".ds-grid-blog-2 .et_pb_post").each(function () {
$(this).find(".entry-featured-image-url").wrapAll('<div class="ds-grid-blog-image"></div>');
$(this).find(".entry-title, .post-meta, .post-content").wrapAll('<div class="ds-grid-blog-content"></div>');
});
//Move elements around
$(".et_pb_post").each(function () {
$(".post-meta", this).insertBefore($(".entry-title", this));
});
//Add button class to read more link
$(".et_pb_post a.more-link").addClass("et_pb_button");
//Replace pipes and remove commas from the meta
$(".et_pb_post").html(function () {
return $(this).html().replace(/\|/g, '/').replace(/,/g, '');
});
});
});
})(jQuery);
//End CSS Grid Blog Layout by Divi Soup
</script>
/*-----------------------------------------------*/
/*-------CSS Grid Blog Layout by Divi Soup-------*/
/*-----------------------------------------------*/
/*Blog layout settings, adjust these values only*/
:root {
--ds-white: #ffffff; /*The background colour for the post content and text colour for the second and third post content*/
--ds-grid-2-item: 250px; /*Minimum column width for second grid, decrease this value for more columns*/
--ds-grid-gap: 30px; /*The gap between posts*/
--ds-title-background: rgba(0, 0, 0, .5); /*The background colour of the titles on the second and third posts*/
}
/******************************************************/
/*You should not need to edit anything below this line*/
/******************************************************/
/*Set posts to flex and remove post margin*/
.ds-grid-blog .et_pb_post {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 0;
}
/*Set flex direction for second grid*/
.ds-grid-blog-2 .et_pb_post {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
/*Set post content to flex*/
.ds-grid-blog-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background: var(--ds-white);
}
/*Remove image margin and resize for responsiveness*/
.ds-grid-blog .entry-featured-image-url {
margin-bottom: 0;
height: 100%;
width: auto;
}
.ds-grid-blog .et_pb_post a img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/*Reset the read more link display*/
.ds-grid-blog a.more-link {
display: initial;
}
/*Add margin to excerpt*/
.ds-grid-blog .post-content p {
margin-bottom: 20px;
}
/*Pagination placement*/
.ds-grid-blog .pagination {
grid-column: 1/-1;
}
/*Set the grid for the first 3 posts*/
.ds-grid-blog-1 .et_pb_ajax_pagination_container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: var(--ds-grid-gap);
}
/*Set the grid for the remaining posts*/
.ds-grid-blog-2 .et_pb_ajax_pagination_container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--ds-grid-2-item), 1fr));
grid-gap: var(--ds-grid-gap);
}
/*First grid first post placement*/
.ds-grid-blog-1 .et_pb_post:first-child {
grid-column: 1 / -1;
}
/*First grid second post placement*/
.ds-grid-blog-1 .et_pb_post:nth-child(2) {
grid-column: 1 / 2;
}
/*First grid third post placement*/
.ds-grid-blog-1 .et_pb_post:nth-child(3) {
grid-column: 2 / 3;
}
/*First post content*/
.ds-grid-blog-1 .et_pb_post:first-child .ds-grid-blog-content {
width: 60%;
padding: 30px;
display: -webkit-box;
display: -ms-flexbox;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
/*Position and colour for second & third posts*/
.ds-grid-blog-1 .et_pb_post:nth-child(n+2) .ds-grid-blog-content {
background: var(--ds-title-background);
position: absolute;
left: 0;
right: 0;
bottom: 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 10px;
text-align: center;
}
/*Text colour for second & third posts*/
.ds-grid-blog-1 .et_pb_post:nth-child(n+2) .entry-title,
.ds-grid-blog-1 .et_pb_post:nth-child(n+2) .post-meta,
.ds-grid-blog-1 .et_pb_post:nth-child(n+2) .post-meta a {
color: var(--ds-white) !important;
}
/*Font size for second & third posts*/
.ds-grid-blog-1 .et_pb_post:nth-child(n+2) .entry-title {
font-size: 150% !important;
}
/*Hide excerpt for second & third posts and second grid posts*/
.ds-grid-blog-1 .et_pb_post:nth-child(n+2) .post-content,
.ds-grid-blog-2 .et_pb_post .post-content p {
display: none;
}
/*Remaining posts display*/
.ds-grid-blog-2 .et_pb_post .ds-grid-blog-content {
padding: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 100%;
}
/*Set margin for remaining posts*/
.ds-grid-blog-2 .et_pb_post .entry-title {
margin-bottom: 30px;
}
/*Keep read more link at bottom*/
.ds-grid-blog-2 .et_pb_post .post-content {
margin-top: auto;
}
/*Adjust for mobile*/
#media all and (max-width:980px) {
.ds-grid-blog-1 .et_pb_post:first-child {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.ds-grid-blog-1 .et_pb_post:first-child .ds-grid-blog-content {
width: 100%;
}
.ds-grid-blog-1 .et_pb_post {
grid-column: 1 / -1 !important;
}
}
/*-----------------------------------------------*/
/*-----End CSS Grid Blog Layout by Divi Soup-----*/
/*-----------------------------------------------*/
.more-link.et_pb_button {
text-transform: capitalize;
color: #3984BC;
}
This is the page in question - https://travellingpair.co.uk/destinations/europe/
I'm unsure as to what is causing the errors or what they mean, but it is stopping other things from loading on the page, such as the background image behind the page header, but the actual blog design is as expected.
The errors are:
UPDATE: Figured out that the issue was being caused by this piece of code:
$(".et_pb_post").html(function () {
return $(this).html().replace(/\|/g, '/').replace(/,/g, '');
});
It was removing the commas from within the srcset attribute as well and therefore making it invalid. It should have only been removing the commas and replacing the | with / in the post meta, but looks like it was doing it with the images as well. If anyone has any ideas on that bit it would be appreciated.
Okay so I did some digging and this was being caused by the following piece of code in the JS code:
$(".et_pb_post").html(function () {
return $(this).html().replace(/\|/g, '/').replace(/,/g, '');
});
This was meant to replace all pipes with slashes as well as removing the commas from the post-meta, but looks like the person who created the layout and code had set this to apply within the ".et_pb_post" class rather than ".post-meta" to just have it remove from the meta. Instead it was doing this in the whole post and that included taking the commas out of the "srcset" attribute meaning it was invalid.

Using jQuery to toggle a navbar, and if user engages navbar media queries stop working

I have a navbar that is set to be hidden by default. There is a hamburger icon that, when clicked, engages some js/jquery to toggle between the navbar being hidden/showing.
I also have a media query that sets the navbar to always be showing on smaller screens, and to place the navbar to the top of the page where it is displayed as a row. My problem is that if I engage the navbar (toggle it to show, then toggle back to hide) my media query does not work, and the navbar never shows up when the breakpoint is hit.
Here's the code:
Navbar CSS, default state:
.navbar-hidden{
grid-row-start: 2;
display: flex;
flex-direction: column;
max-width: 300px;
display: none;
justify-content: flex-start;
height: 100%;
}
JS/jQuery targeting the navbar:
$(document).ready(function(){
$("#menu").click(function(event){
event.preventDefault();
$(".navbar-hidden").toggle();
})
});
Media query that targets the navbar-hidden (which should now always show) after a breakpoint:
#media screen and (max-width: 1200px) {
.navbar-hidden {
display: show !important;
grid-row-start: 1;
grid-column-start: 2;
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: nowrap;
font-size: 3em;
min-width: 100%;
}

align-self:flex start is not sending child element to the top

I'm making an element in javascript and appending it to a flex container. The container I'm appending it to has a button in it and a display none div. I want the element I'm making to be positioned at the top of the div I'm appending it to, and I styled the class it has with align-self: flex-start, but for some reason this is doing nothing. Align-self: flex-end doesn't work either or any of the other align-self's. Here is my code-
// //handler to show text from eventData array
document.addEventListener('click', (e)=> {
let noEvents = document.getElementsByClassName('no-Events')[0];
let eventsDescContainer = document.querySelector('.events');
if(e.target.classList.contains('day')){
[...eventData['events']].forEach((event)=>{
if(event['day']===e.target.innerHTML && event['month']===headerMonths.innerHTML && event['year']===headerYears.innerHTML){
//span element to put Event text into
let eventDesc = `${event['description']}`
const span = document.createElement('span');
let EventText = document.createTextNode(eventDesc);;
//clear previous events message
noEvents.style.display='none';
clearEventText();
//append to container
span.appendChild(EventText)
span.classList.add('event-desc', 'event-message');
eventsDescContainer.appendChild(span);
} else {
clearEventText();
noEvents.style.display='initial';
noEvents.innerHTML = `There are no events on ${headerMonths.innerHTML} ${e.target.innerHTML} ${headerYears.innerHTML}`;
}
});
}
});
<div class='events'>
//this span is hidden
<span class='no-Events event-message'>There are no events today</span> //this button has no styles on it, it is just plain html
<button class='show-event-form rotate'>Add new event</button>
//This is the span I want to go at the top of the container but it is positioned after the button
<span class='event-desc event-message'>text</span>
</div>
Here is the html for the container and the span I created. The button has no styles.
.events{
height: 100%;
display:flex;
flex-direction: column;
align-items: center; /*center children vertically*/
overflow-y: auto;
}
.events .event-message {
align-items: center;
width: 80%;
text-align: center;
margin: 20px auto;
padding: 10px 0;
background-image: linear-gradient(to right, #649173, #dbd5a4 );
border-radius: 3px;
box-shadow: 3px 6px 10px #393a39;
}
//this is not working
.event-desc {
align-self: flex-start;
}
I changed the direction of the flex-direction in my container to flex-direction:column-reverse and justify-content:start to send it to the top of my container and this solved my problem. I'm still not sure why align-self was working though.
You have this in your code:
.events{
height: 100%;
display:flex;
flex-direction: column;
align-items: center; /*center children vertically*/
overflow-y: auto;
}
Your comment suggests a misconception: align-items: center does not center the children vertically in a column-direction container. It centers them horizontally.
The justify-* properties apply to the main axis.
The align-* properties apply to the cross axis.
These axes shift, depending on flex-direction.
Here's a complete explanation:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Make height dynamic

I have an outerWrapper, innerWrapper, and children. outerWrapper has a height of 300px, and is display: flex. innerWrapper is also display: flex, and is flex-direction: column. innerWrapper doesn't have a height set to it.
When I add align-items: with a value of anything but strecth to outerWrapper, the children display one long column. They ignore the 300px height. Here's an image describing it:
When it should be like this:
If I set a height, I will get the second image. i.e. the way I want it to look. I can't set a fixed height, it needs to be dynamic.
I tried the following:
innerWrapper.style.height = (lastChild.offsetTop - innerWrapper.offsetTop + lastChild.offsetHeight) + 'px';
but it didn't fix it. It just made the height to: 5 * 102 (5 = number of boxes; 102 = height + border).
How can I set a dynamic height to innerWrapper? (I can't do height: 100% because I won't be able to set align-items: flex-end or center.)
JSFiddle
var innerWrapper = document.getElementById('innerWrapper');
var lastChild = innerWrapper.lastElementChild;
newHight = lastChild.offsetTop - innerWrapper.offsetTop + lastChild.offsetHeight;
innerWrapper.style.height = newHight + 'px';
#outerWrapper {
height: 300px;
background-color: lightgreen;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
}
ul {
padding: 0;
margin: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
/*height: 206px;*/
}
li {
list-style-type: none;
width: 100px;
height: 100px;
background-color: lightblue;
border: 1px solid;
}
<div id="outerWrapper">
<ul id="innerWrapper">
<li class="child">I'm #01</li>
<li class="child">I'm #02</li>
<li class="child">I'm #03</li>
<li class="child">I'm #04</li>
<li class="child">I'm #05</li>
</ul>
</div>
Update
I don't think this is a duplicate of this question. It's more of a follow-up question.

Categories

Resources