Reposition a div using jQuery when window is resized

I'm currently facing a challenge with the web project I am working on for my company. The code snippet I have looks like this:

//CSS
.home-panel{
   z-index: 0;
   width: 1800px;
   height: 2100px;
   background: gray;
   transform: skew(0deg,-55deg) translateY(-1920px);
}
.ultimate-hero{
   height:100vh;
   overflow:hidden;
}


  //HTML
  <div class="ultimate-hero">
    <div class="home-panel">
    </div>
  </div>


 //JS
 $(window).resize(function() {
    //get dimensions
    var height = $(window).height();
    var width = $(window).width();
    $('.home-panel').css({
   'transform' : 'skew(0deg,-55deg) translateY(-'+width+'px)'
     });
  });

My goal is to move the .home-panel when the browser is resized, but the current code seems to be doing the opposite of what I intended. How can I correct this?

Thank you.

I should mention that I am looking to achieve a layout similar to the .home-panel on this website , or something close to it. If you have any suggestions on a better approach, please do share.

javascriptcsshtmlresponsive

Answer №1

.main-container{
   z-index: 0;
   width: 2000px;
   height: 1900px;
   background: gray;
   /*transform: skew(0deg,-55deg) translateY(-1920px);*/
}

Consider removing 

transform: skew(0deg,-55deg) translateY(-1920px);

//JS Logic
$(document).ready(function(){
    var height = $(window).height();
    var width = $(window).width();
    $('.main-container').css({
        'transform' : 'skew(0deg,-55deg) translateY(-'+width+'px)'
    });
});

$(window).resize(function() {
    //get dimensions
    var height = $(window).height();
    var width = $(window).width();
    $('.main-container').css({
        'transform' : 'skew(0deg,-55deg) translateY(-'+width+'px)'
    });
});

Answer №2

Check out this suggestion:

$('.landing-section').css({
    'transform': 'skew(0deg,-55deg) translateY(-'+(2400+2100- measurement)+'px)'
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the steps to manipulate a scene using three.js?

This HTML page showcases a scene with various points that can be comfortably zoomed in using the mouse wheel. However, I am looking to implement the functionality to drag the scene after zooming in. The idea is to click and hold the left mouse button whil ...

javascriptthree.js

``I'm having trouble with TablePagination styling on a material-table component. Anyone have

I am trying to customize the appearance of rows numbered from-to of x on a Material-Table, using the following code: import MaterialTable from 'material-table' import { TablePagination, withStyles } from '@material-ui/core' const Style ...

cssreactjsmaterial-uimaterial-table

angularJs ng-hide using the $index value within an ng-repeat directive

I have a list of items that need to be displayed with serial numbers. I tried using $index with ng-repeat, but when an element is hidden, the index increases unexpectedly. The code I attempted is as follows: <div ng-repeat="itemRow in salesitem" class ...

javascriptangularjs

Moving information from two modules to the service (Angular 2)

Recently in my Angular2 project, I created two components (users.component and tasks.component) that need to pass data to a service for processing before sending it to the parent component. Code snippet from users.component.ts: Import { Component } fro ...

javascriptangulartypescript

Is it not possible to include Infinity as a number in JSON?

Recently, I encountered a frustrating issue that took an incredibly long time to troubleshoot. Through the REPL (NodeJS), I managed to replicate this problem: > o = {}; {} > JSON.stringify(o) '{}' > o.n = 10 10 > JSON.stringify(o) ...

javascriptjsonnode.jsinfinity

Efficient utilization of the bootstrap form-group for optimal responsiveness

I've encountered an issue with the form-group class in Bootstrap. You can view the problem on this link. After analyzing the problem, I found that when viewing the code on a small or medium-sized device, the space between "Statut" and "Etat" appears ...

htmlcsstwitter-bootstrap

What is the best way to deactivate all 67 checkboxes once 4 of them have been chosen?

I am looking to limit the selection of checkboxes to only 4 out of a total of 67. However, I am currently struggling to figure out how to monitor the checkboxes and determine if exactly 4 have been selected. <table class="mdl-data-table mdl-js-data-t ...

phpjqueryhtml

The content within the iframe is not properly sized

I'm facing a challenge with an iframe that has a fixed height of 1000px which I am unable to adjust. I would like the content to fit within the iframe. As a CSS novice, I need some guidance on how to achieve this. Thank you! <iframe style="height: ...

cssiframe

Is there a way to ensure that my slideshow images maintain their proportions when viewed on various screen sizes?

I came across a code snippet for an image slideshow that I really liked, but it didn't resize properly on different browser sizes. Initially, I attempted to use the vh property to address this issue, but unfortunately, the images wouldn't scale p ...

htmlcssslideshowscaling

Enhancing ajax content with Rx.Observable.fromEvent: A step-by-step guide

I am currently fetching content using Ajax, in the form of a json object, which is then displayed in the browser. var stateSubjectSub = stateSubject.subscribe(function(data) { console.log('state changes'); console.log(data); var list = document ...

javascriptajaxrxjs

Express callback delaying with setTimeout

I'm working on a route that involves setting a data attribute called "active" to true initially, but then switching it to false after an hour. I'm curious if it's considered bad practice or feasible to use a setTimeout function within the ex ...

javascriptexpressweb-development-server

Utilizing AngularJS to submit a form with dynamic fields

Challenge: I encounter an issue while trying to submit data in form B. The main obstacle is that all the fields within form B are displayed in a loop, making it difficult to assign specific names to each field. Snippet of HTML Code for form B <form id ...

htmlangularjsformsangularjs-ng-repeat

Is there a way to postpone these animations without relying on setTimeout?

As I develop a single-page website, my goal is to smoothly transition between sections by first animating out the current content and then animating in the new content. Currently, I have achieved this using setTimeout(), where I animate out the current con ...

javascriptjquery

How to set element height based on screen height rather than browser height

How can I set the height of a div container to be 60% of the screen height, but ensure it maintains that height even when the browser window is resized? Setting the height as 60% in CSS works initially, but the div shrinks proportionately when the window s ...

csspositionheight

Avoid an excessive number of XHR/AJAX requests when using the Facebook embedded iframe

I am facing an issue with a Bootstrap Carousel that contains multiple social embeds from Facebook, all of which have videos. The problem is evident on this simple jsfiddle due to the Facebook embed. If you visit this page: https://jsfiddle.net/1L95vqn4/, ...

javascriptjqueryhtmlperformanceiframe

What is the best way to incorporate a linear gradient into the background image using bootstrap?

I'm working on a react app and I'd like to apply a linear gradient of 0.7 to the background image using bootstrap. Can anyone help me with this? <Carousel.Item> <img className='banner-bg d-block w-100 bg-dark bg-gradient &apo ...

cssreactjsreact-bootstrapbootstrap-5

The web method within the aspx page is failing to execute

On page load, I am attempting to make an ajax request using the AngularJS $http service to fetch JSON data from a web method located in my User.aspx.cs page. The web method is defined as follows: [WebMethod] [ScriptMethod(ResponseFormat=ResponseForma ...

javascriptangularjsangularjs-http

Unable to implement a transition to adjust the scaling transformation

As I work on developing a website for a local business, my progress involves creating a menu bar. However, I am facing an issue with the transition I have applied using transform: scale(1.2) which does not seem to be working as intended. After spending h ...

htmlcss

Error alert: The "moment" reference is absent when utilizing moment in Laravel alongside Vue.js

Using Laravel 5, I have installed Moment.js through the npm install command. I am attempting to incorporate it into one of my views with Vue.js, but no matter what I try, I keep getting the error "moment is not defined." If I use require, I get "require is ...

javascriptlaravel-5vue.jsmomentjs

Can multi-line labels be centered vertically?

After countless hours of research and experimentation without success, I have a strong feeling that the answer is no. However, I would greatly appreciate confirmation one way or the other. I am faced with a challenge where I have a multi-line label to the ...

htmlcssforms