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>
Related
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>
I have the below code:
$(window).resize(function(){
if ($(".gallery-container").css("position") === "fixed" ){
$(".pd-text").removeAttr("style");
};
});
I would like to perform the action only if, on window resize, .gallery-container went from position: relative to position: fixed (which is when the screen size has a min-width of 650px).
Is there a way to do this?
Since your real condition is the MediaQuery min-width: 650px, use the MediaQuery API:
var query = matchMedia('(min-width: 650px)');
query.onchange = updateState; // will trigger when the query status change
updateState();
function updateState(){
state.textContent = 'background is ' + (query.matches ? 'green' : 'red');
}
.rect{
height: 250px;
width: 250px;
background-color: red;
}
#media (min-width: 650px) {
.rect {
background: green;
}
}
<h3>Run the snippet in 'full page' and resize your window</h3>
<pre id="state"></pre>
<div class="rect"></div>
I made this page with three sections that have full width and height, but i don't know how to make them scroll horizontally and not vertically, i tried this source:
CSS-tricks: Horizontal scrolling but it doesn't work on my code...
Here is my code:
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
}
.element {
flex: 0 0 100%;
}
.element1 { background: pink; }
.element2 { background: lightgreen; }
.element3 { background: lightblue; }
<div class="element element1">Element #1</div>
<div class="element element2">Element #2</div>
<div class="element element3">Element #3</div>
The horizontal scrolling is working as expected, please check the code below. From your reference the demo uses a jquery plugin. You need to include jQuery and jQuery mousewheel plugin for it to work. :)
$(function() {
$("body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
}
.element {
flex: 0 0 100%;
}
.element1 { background: pink; }
.element2 { background: lightgreen; }
.element3 { background: lightblue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<div class="element element1">Element #1</div>
<div class="element element2">Element #2</div>
<div class="element element3">Element #3</div>
You just need to change body style
body {
margin: 0;
display: block;
}
I think you might be missing some js files in your page. Make sure to add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script>
<script>
$(function(){
$("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
$(".post").wrap("<td></td>");
$("body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
</script>
Here is a JSFiddle with a working example
https://jsfiddle.net/ybvsyt0p/
I think using JavaScript together with your CSS will produce the "Horizontal Scroll" effect you need:
Define HTML AND BODY as selectors use a base method like "mousewheel", and notice the placement and scope of this as it references its parent object (the page) via mousewheel.
delta can be used to work with values that are consistent with the user interaction and scrollLeft is a property in CSS 2 and a method in CSS 3 (I.e., scrollLeft() works in most browsers.
$("html, body").mousewheel(
function
(event, delta) {
this.scrollLeft *= -30;
}
)
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;
}
}
This is a question that once asked in a different variation,
and i tried to use the code, but it doesn't work for me.
I want my footer to animate up when scrolling just a bit before reaching the bottom, and closing while scrolling up.
like in this site - you will see if you scroll all the way down.
http://www.pronto.co.il
this is my code:
css:
body, html { height: 1000px; }
html:
<button id="buttonTest">try me</button>
<div id="footer" style="display: none;"><img src="pics/try_me_1.png" ></div>
I'm trying to leave the jquery code but I don't understand exactly how it works here yet.
so this is the link to the answer - i took it and use animate() instead the alert.
Footer animates up when you reach bottom of screen, but fails to animate down when you scroll back up
will help me a lot. thank u so very much
you can add/remove a given class
var footer = document.querySelector("#footer");
window.onscroll = function(event) {
((window.innerHeight + window.scrollY) >= document.body.offsetHeight) ? footer.classList.add("visible") : footer.classList.remove("visible")
};
And here is your css
#footer{
position: fixed;
bottom: 0;
overflow: hidden;
height: 0;
transition: height .3s ease
}
#footer.visible{
height: 100px;/*what ever you want*/
}
As the comment suggest there is no animation on the link you provide, but based on the link question is just simple as this:
var isShowing = false;
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() === $(document).height()) {
$('#footer').slideToggle();
isShowing = true;
} else if (isShowing === true && $(window).scrollTop() + $(window).height() <= $(document).height() * 0.9) {
$('#footer').slideToggle();
isShowing = false;
}
});
body,
html {
height: 1000px;
}
#footer {
height: 150px;
position: fixed;
bottom: 0;
width: 100%;
left: 0;
background:black;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="buttonTest">try me</button>
<div id="footer"></div>