Is this an efficient way of reordering HTML with jQuery?

Is this an efficient way of reordering HTML with jQuery? - javascript

The script below checks the browser width and moves some divs around if it detects the css element text-align:center on a dom element. This css element is dependent on a media query for 980px. The code works without a hitch but I feel like maybe there was a simpler way of doing this. I am aware this probably could have been accomplished in CSS through floats but felt like this would be a cleaner way of doing it. Any advice regarding how to make this code more efficient would be greatly appreciated.
$(document).ready(function(){
function moveDiv(){
var $window = $(window);
var windowsize = $window.width();
if (windowsize < 980) {
if ($(".interiortitle h1").css("text-align") == "center"){
$( ".interiorpage .et_pb_column_1_4").insertAfter(".interiorpage .et_pb_column_3_4");
}
}
else if (windowsize > 980) {
$( ".interiorpage .et_pb_column_1_4").insertBefore(".interiorpage .et_pb_column_3_4");
}
}
moveDiv();
$(window).resize(moveDiv);
});

You could try this out:
Check if your window size has changed and apply a new class for your div:
var changeposdiv= $('.changeposdiv');
var $window = $(window);
var windowsize = $window.width();
if (windowsize > 980) {
changeposdiv.addClass('more980');
}
Your HTML example
<div class="interiordiv">
ABC
</div>
<div class="changeposdiv">
Change it
</div>
And CSS will move elements in user's screen
.changeposdiv, .interiordiv {
float: left
}
.more980 {
float: right;
}
Does it help you?

Are you looking for something like this? As you change the width of the page, the red and green columns swap sides.
HTML
<html>
<body>
<div class="interiorpage">
<div class="et_pb_column_1_4"></div>
<div class="et_pb_column_3_4"></div>
</div>
</body>
</html>
CSS
.interiorpage{
height: 200px;
border: 1px solid black;
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
}
div[class^=et_pb_column_]{
width: 50%;
height:100%;
}
.et_pb_column_1_4{
background: #fcc;
order: 2;
-webkit-order: 2;
}
.et_pb_column_3_4{
background: #cfc;
order: 1;
-webkit-order: 1;
}
#media all and (max-width: 500px) {
.et_pb_column_1_4{
order: 1;
-webkit-order: 1;
}
.et_pb_column_3_4{
order: 2;
-webkit-order: 2;
}
}

Related

how to change the color of the navbar after scrolling

I want my navbar to be transparent, but when the user scrolls a bit I want it to change to a solid color and I am using bootstrap for the navbar, I have done the code that is needed with javascript.
I had this javascript in my HTML file, but it doesn't seems to work and I don't really know why
<script>
var myNav = document.getElementById("mynav");
window.onscroll = function() {
use strict";
if (document.body.scrollTop >= 100) {
myNav.classList.add("scroll");
} else {
myNav.classList.remove("scroll");
}
};
</script>
and I have also added the CSS code.
.scroll {
background-color: transparent !important;
transition: all 0.5s ease-in;
}
I don't know why it doesn't work, it is not displaying any errors, I have also manually put the class and it worked so the problem is from the js code and not the CSS.

Use scrollY property of Window object.
See the Snippet below:
var myNav = document.getElementById("mynav");
window.onscroll = function() {
if (window.scrollY >= 100) {
myNav.classList.add("scroll");
} else {
myNav.classList.remove("scroll");
}
};
.scroll {
background-color: transparent !important;
transition: all 0.5s ease-in;
}
.main-container{
height: 1000px;
}
#mynav{
position: fixed;
background-color: gray;
height: 50px;
margin:0 auto;
top: 0;
bottom:0;
line-height: 50px;
padding:5px;
width: 100%;
}
<div class="main-container">
<div class="mynav" id="mynav">
Hello World! this is mynav
</div>
</div>

Try using window.scrollY instead of document.body.scrollTop.
if (window.scrollY >= 100)
You can also use document.documentElement.scrollTop. It's the html element that actually scrolls, not the body. Typically document.body.scrollTop will always be 0.

Detect Distance Between Elements on Scroll

I am using jQuery to change a fixed div at the top of the screen top:0.
When the scroll gets to a certain point the class is changed and CSS is changed. Great.
However, I was looking for a better way. Since I am changing it when it reaches 30px away from the content block, doing what I did below doesn't work well since it is using a fixed height:
$(function(){
$(document).scroll(function() {
var x = $(this).scrollTop();
if(x > 2025) {
if($(window).width() > 950) {
$('.topFullWidthWhite').addClass('nonStick');
}
} else {
$('.topFullWidthWhite').removeClass('nonStick');
}
});
});
SO...
Is there a way of doing something more along the lines of...
if(x <= 20 from /* HTML ELEMENT */){
//DO WHATEVER HERE
}
If there is a way of doing this relative to other elements rather than document height that would be grand.
Thanks!

Try to make use of offset().top for that particular element after which you want to change the css
$(window).on("scroll", function() {
var two = $(".two").offset().top;
if ($(this).scrollTop() > two - 20) {
$(".two").addClass("reached");
} else {
$(".two").removeClass("reached");
}
})
body {
margin-bottom: 400px;
}
.one {
height: 150px;
background: green;
margin-bottom: 20px;
}
.two {
height: 100px;
background: blue;
}
.two.reached {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one"></div>
<div class="two"></div>

Making divs as high as possible without ther overlapping

I want to have something like this:
One main "wrapper" div that will have a few divs that are inline.
I can make this, but I don't know how to make the wrapper get as much space as possible, but without getting the scroll bar. And after that I would need to make those 4 inner divs as high as possible
Can I even achieve this with just CSS or would I need a bit of JS?

Flex is best for this here is codepen for you
codepen
.top{
width:100%;
height: 30px;
background-color: #00cdcd;
}
.container {
display: flex;
background-color: teal;
}
.child{
flex: 1;
border: 1px solid black;
}

You can achieve it in many ways only with css:
1st solution:
.wrapper {
display: flex;
}
.child {
flex: 1;
}
2nd solution:
.wrapper {
display: table;
}
.child {
display: table-cell;
}

You can dinamically size your div with JS:
window.onresize = function () {
var w = window.innerWidth;
var h = window.innerHeight;
document.getElementById('wrapper').style.height = w + 'px';
document.getElementById('wrapper').style.width = h + 'px';
}
so, you can have a precise control for each element in the DOM

How to activate .insertBefore on screen width change?

I have this snippet which switches the position of the secondary wrapper above the primary wrapper if the screen width is below 767px. This works great however it only works on refresh. How do I get it to work automatically when the screen width is changed?
Thanks! Total novice here.
jQuery(document).ready(function(){
if(screen.width<=767){
jQuery('body.single #secondary').insertBefore('#primary');
}
});

It seems like you are using jquery so I would recommend the .resize() method.
https://api.jquery.com/resize/
This will fire whenever the window is resized. You can have it do whatever you need at that point.
$(window).resize(function(){
If (myWindow.width() >= windowThreshold){
//do all the things...
}
});

window.addEventListener('resize', function() {
// do something with screen width
});
or with jQuery:
$(window).on('resize', function() {
// do something with screen width
})

I recommend .resize() method because you are using JQuery. This method is called whenever the window is resized.
Now, you can add you code like this.
var windowThreshold = 767;
$(window).resize(function() {
if ($(window).width() < windowThreshold + 1) {
// do something with $(window).width()
$("#log").append("<div>The window size is " + $(window).width() + "px</div>");
$('#secondary').insertBefore('#primary');
}
});
#primary {
background-color: red;
}
#secondary {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>
<div id="primary">primary</div>
<div id="secondary">secondary</div>
You also can use .on("resize", function() {})
$(window).on('resize', function() {
if ($(window).width() < windowThreshold + 1) {
// do something with $(window).width()
$("#log").append("<div>The window size is " + $(window).width() + "px</div>");
$('#secondary').insertBefore('#primary');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I know this has an accepted answer, but just for the record, you could let CSS do the work by using media queries and flexbox as well.
body {
display: flex;
flex-flow: column wrap;
}
div {
margin: 0 auto;
width: 100px;
height: 100px;
}
.box {
background: tomato;
order: 1;
}
.circle {
border-radius: 50px;
background: lightblue;
order: 2;
}
#media (max-width: 767px) {
.box {
order: 2;
}
}
<div class="circle"></div>
<div class="box"></div>

How to keep div in center-height when I resize the browser window?

I am trying to center in height a div, however it does not work when I resize the browser screen.
How to edit this to achieve the adjustable margin-top on resize?
Thank you
<script>
var h = $(window).height();
var parentHeight = h;
var childHeight = $('#a-middle').height();
$('#a-middle').css('margin-top', (parentHeight - childHeight) /2);
</script>
Edit:
The answer should be in js since flexbox won't work on IE-9

you should stick to a CSS solution though, there are several way to achive this
.alignVertical {
position:relative;
display:inline-block;
top:50%;
transform:translateY(-50%);
}
jsfiddle: https://jsfiddle.net/jorjmt70/
or using flexbox
.parent {
display:flex;
height:100vh;
background-color:red;
justify-content:center;
align-items:center;
flex-direction:column;
}
jsfiddle: https://jsfiddle.net/mdh9h876/
if you want to use flex box use autoprefixer to get deeper browsersupport:
https://github.com/postcss/autoprefixer

Although you can easily do this with pure CSS, your bounty stated that you want a JS answer.
If you are interested in a pure CSS answer, see this answer that has multiple different methods on how to center elements vertically/horizontally.
You could simplify your jQuery to the following:
$('#a-middle').css('margin-top', function () {
return ($(window).height() - $(this).height()) / 2
});
Then you could just place this within a resize event listener and chain the .resize() method in order to trigger the event initially when the browser loads.
Example Here
$(window).on('resize', function () {
$('#a-middle').css('margin-top', function () {
return ($(window).height() - $(this).height()) / 2
});
}).resize();
JavaScript equivalent (without jQuery):
Example Here
var verticalCentering = function () {
var el = document.querySelector('#a-middle');
el.style.marginTop = (window.innerHeight - el.offsetHeight) / 2 + 'px';
}
window.addEventListener('resize', verticalCentering);
verticalCentering();

For a div called 'center-me':
$(document).ready(centerDiv);
$(window).resize(centerDiv);
function centerDiv() {
var winHeight = $(document).innerHeight(),
divHeight = $('.center-me').height();
$('.center-me').css('marginTop', (winHeight - divHeight) / 2 );
}
You need to call it when the document is ready, to get it centered in the first place, then on resize-event, to keep it centered.
Here is the fiddle for it: Fiddle

A CSS solution could do the trick for you.
div.center {
height: 100px;
width: 300px;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -150px;
position: absolute;
background-color: red;
}
<div class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
This CSS code work fine in IE8+, Firefox and Chrome.
But you must know the sizes of the DIV that you want to adjust correctly. If the height and width are dynamic, you just have to update the style accordingly with JavaScript. Don't forget to apply the class center in JS on need to your DIV.
Explanations :
margin-top : - height / 2 because top : 50% only centered vertically the top of the DIV.
margin-left : - width / 2 because left : 50% only centered horizontally the left of the DIV.
position : absolute so that the DIV can center over all the page.

This can be achieved using simple CSS with deep browser support back to IE8.
html, body {
height: 100%;
}
.parent {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;
background: red;
}
<div class="parent">
<div class="child">This is always centered.</div>
</div>
Using table-layout makes it simple: the child can be vertically aligned (top, middle, bottom) and will take up all the available height. You're not resorting to JavaScript, CSS with patchy support or having to hard-code any figures, it should just work.
Depending on the specifics of what you're looking to do, flexbox or - as a last resort - JavaScript might be required, but for most cases display: table-cell is your friend.
That said, if it's acceptable for older browsers to get a different layout, just use #Victor's answer: this is what flexbox is for.

To make a div always stay at the center of the screen, the properties you could use are top and left attributes after setting the position attribute to absolute. However you will need to set these properties dynamically when the browser is resized. This can be done using the JQuery method - resize().
/*css code*/
.div{
position:absolute;
top:100px;
left:50px;
background:black;
}
/*JS Code*/
function keep_div_centered()
{
window_height = $(window).height();
window_width = $(window).width();
obj_height = $('.keepincenter').height();
obj_width = $('.keepincenter').width();
$('.keepincenter').css('top',(window_height/2)-(obj_height/2)).css('left',(window_width/2)-(obj_width/2))
}
keep_div_centered();
$(window).resize(function(){
keep_div_centered();
})
/* HTML Code */
<div class="keepincenter"></div>
Link to the fiddle - http://jsfiddle.net/y0937t06/

$(window).resize(function () {
var h = $(document).height();
var parentHeight = h;
var childHeight = $('#imagegallery').height();
$('#imagegallery').css('margin-top', (parentHeight - childHeight) / 2);
});

For me, this is the holy grail of CSS :)
The most reliable method I found is setting the container element as follows:
display: -webkit-flex;
-webkit-justify-content: center; /* horizontal */
-webkit-align-items: center; /* vertical */
It is simple and has no prerequisites on any other CSS properties.
The fiddle below places content 30px above vertical center:
#container {
width: 500px;
height: 300px;
background-color: red;
display: -webkit-flex;
-webkit-justify-content: center;
-webkit-align-items: center;
}
#content {
background-color: green;
margin-bottom: 30px;
}
<div id="container">
<span id="content">Content</span>
</div>

Handle window_resize event of the current window and try putting above code there.
It should give you expectd functionality.

This approach is very useful when you want to center both vertically and horizontally an absolute position div. It work also on IE8
You need to set the both outer and inner divs as
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:auto;
margin:auto it's fundamental to center divs in this case.
You could also set the height and width of the .in div and still you would see it centered vertically and centered also when you resize the browser.
* {
margin: 0;
padding: 0;
}
html, body {
position: relative;
height: 100%;
width: 100%;
}
.in, .out {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:auto;
}
.in {
background-color: red;
height: 50%;
width:50%;
}
.out {
background-color: blue;
}
EXAMPLE 1 JSFIDDLE height, width: in percentages: http://jsfiddle.net/a_incarnati/1o5zzcgh/3/
EXAMPLE 2 - JSFIDDLE fixed height, fixed width
http://jsfiddle.net/a_incarnati/1o5zzcgh/4/

Give display: table-cell; to the parent and align the contents vertically using vertical-align and give the padding to adjust the necessary spacing from top.
.child{
display:table-cell;
vertical-align:top;
padding-top: 50px;
}
This will keep the margin uniform throughout.

use css
first give a height to your element.
#a-middle {
height: 20px;
position: fixed;
top: calc(50% - 10px);
left: 0;
}
or use js
$(function(){
$('#a-middle').each(function(){
var t = $(window).height()/2 - $(this).outerHeight()/2;
$(this).css({top: t + "px"});
});
});
$(window).resize(function(){
$('#a-middle').each(function(){
var t = $(window).height()/2 - $(this).outerHeight()/2;
$(this).css({top: t + "px"});
});
});

The problem with the previous solutions is that you won't be able to center the div, if he's larger than the available vertical size.
If you want your div to take 50% of the page you can use the CSS vertical height based unit:
.mydiv {
height: 50vh;
top: 50%;
left: 50%;
position: fixed;
width: 50vh;
margin-top: -25vh;
margin-left:-25vh;
border: solid black 1px;
}
So your DIV will not only be centered but also maintain its ratio.

Play with margin-left and margin-top of that div, using the width and height of the window and div.
$(function () {
makeDivCenter();
$(window).resize(function () {
makeDivCenter();
});
});
function makeDivCenter() {
var windowWidth = $(window).width();
var divWidth = $(".center").width();
var windowHeight = $(window).height();
var divHeight = $(".center").height();
$(".center").css({
'margin-left': (windowWidth / 2) - (divWidth / 2) + "px",
'margin-top': (windowHeight / 2) - (divHeight / 2) + "px"
});
}
Here is jsfiddle for your reference https://jsfiddle.net/fnuud7g6/

Develop Reference

JavaScript is the programming language of the Web.

Is this an efficient way of reordering HTML with jQuery? - javascript

Related

how to change the color of the navbar after scrolling

Detect Distance Between Elements on Scroll

Making divs as high as possible without ther overlapping

How to activate .insertBefore on screen width change?

How to keep div in center-height when I resize the browser window?

Categories

Resources