Shifting the Bootstrap sidebar

Here is a layout defined using Bootstrap:

<div class="container-fluid">

    <div onclick="smallSize()">Click</div>
    <div onclick="largeSize()">Click</div>

    <div class="row">

        <!--Video player-->
        <div class="video-player-content col-7" style="max-width:720px;">
            <video id="preview" width="720px" height="360px">
                <source/>
            </video>
        </div>

        <!--Sidebar content-->
        <div class="sidebar-card col-5">
            <p>Some content</p>
        </div>  

    </div>

</div>

There are 2 icons for changing the size of the video player, similar to a YouTube feature. When clicked, they modify the size of the video player using JQuery.

function smallSize() {
    var video = document.getElementById("preview");
    video.height = 360;
    video.width = 720;
    document.getElementsByClassName("video-player-content")[0].style.maxWidth = "720";
}

function largeSize() {
    var video = document.getElementById("preview");
    video.height = 540;
    video.width = 1080;
    document.getElementsByClassName("video-player-content")[0].style.maxWidth = "1080";
}

The issue arises when switching to the larger player, as the video player col overflows (or underflows) the sidebar. How can the sidebar be pushed below the video player if the user opts for the larger player? I've experimented with col-sm-md-lg and clearfix without success. Setting the maxwidth attribute is crucial due to the canvas positioned on top of the video.

Answer №1

After some time, it dawned on me that jQuery allows for the addition and removal of classes. This realization led me to incorporate the following methods into both of my onClick functions:

$("<id of element>").removeClass("<class to be removed>");
$("<id of element>").addClass("<class to be added>");

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

Coordinates of HTML elements corners after rotation

Seeking to obtain the XY coordinates of an HTML element in order to accurately calculate the physical distance, in pixels, from the corners of a rotated element relative to another element. In this code snippet, I am attempting to determine the distance f ...

Transitioning smoothly between different backgrounds will be like changing the cursor color

As I work on my website, I encounter the need for a cursor that smoothly changes its color. Specifically, I want the cursor to appear blue (#0059ff) when hovering over a white background and white when over a blue background, with a seamless transition lik ...

Styling <Link> component with styled-components: A step-by-step guide

Utilizing the Link component from @material-ui/core/Link in my TypeScript code was initially successful: <Link href="#" variant="body2"> Forgot? </Link> However, I am exploring the transition to styled-components located in a separate file. ...

Instructions on adding a class to a span within a div upon clicking the div

Is there a way to dynamically add a class to the span element inside a specific div when that div is clicked? There are multiple divs and spans with the same class name. $('.menu_item_conteiner').click(function() { $('.menu_item_conteiner ...

Tips for maintaining the webcam video in the center of the screen even when the height is set to 100% and the window is being resized

When using React, I encountered an issue with centering a webcam video while maintaining its height at 100% of the screen. Although the video fills the screen vertically correctly, adjusting the width of the window causes the video to lose its centered pos ...

What is the best way to make a select tag read-only before the Ajax request is successful

Is there a way to make a select tag read-only before an Ajax success? I tried using this code, but it didn't work: $("#tower").prop('readonly', true); Then I tried this alternative, but I couldn't get the value from the select tag: ...

Maintain the selected image

I am working on a program that allows users to choose images and I have given them the pseudo-class. .my_image_class:hover{ border:3px solid blue; -webkit-box-sizing: border-box; } This makes the images bordered in blue when hovered over, giving a "sele ...

Is the user currently browsing the 'Home screen webpage' or using the Safari browser?

In JavaScript, is there a method to determine if the user has accessed the website from their home screen after adding it to their home screen, or if they are browsing via Safari as usual? ...

Prevent improper text wrapping of certain words in RTL languages like Farsi and Arabic

In languages like Farsi and Arabic, as well as other RTL languages, letters are connected to each other (e.g. سیب), but not always (e.g. می شود). This can sometimes cause issues with the flow of text when half a word wraps over to the next line due ...

What could be causing the value to be zero once the AJAX call in asp.net MVC 3 and jQuery is complete?

Below is my AJAX request: var totalCost = 0; function GetTotalCost(start, end, rID) { $.ajax({ url: '@Url.Action("CalculateTotalcost")', type: 'POST', data: JSON.stringify({ start: ...

How to Use jQuery to Iterate Through a JSON Array and Add to an HTML Container Element?

I'm currently embarking on a personal project and have a query relating to jQuery and its usage in looping through a JSON array. Here is the JSON array I am working with: var thumbDir = [ '"https://www.location.com/1.jpg"', '"https:// ...

Display a pop-up window upon clicking anywhere on the webpage using jQuery and HTML

Is it possible for me to create a pop-up window that opens a specific website when a user clicks anywhere on the page, similar to pop-up companies? Can this be achieved using HTML, JavaScript, and jQuery? Any help would be greatly appreciated. ...

Switch the background color of a list item according to a JSON search

Our organization is in need of a feature where members can be inputted into a field and the background color of the parent list item changes based on the name lookup in a JSON file. We are open to a jQuery solution, but JavaScript will also work! You can ...

The jQuery extension for XDomainRequest in the $.ajax function called onprogress is

Summary: I am trying to make this compatible with this: Detailed Explanation: My goal is to develop a jQuery extension that introduces a progress method to the $.ajax object and works seamlessly with IE8 & IE9's XDomainRequest object. Currently, I ...

Managing loading and changing events using Angular, jQuery, and Web API

I am populating a dropdown select using ng-repeat. <select onchange="ChangeMonth()" id="month"> <option ng-repeat="(key,val) in Months" ng-selected="val==ActiveMonth" value="{{key}}"> {{val}} ...

What is the process for integrating an autoplay script into Turn.Js?

Can someone guide me on how to implement this code in Turn.Js? setInterval(function() { $('#flipbook').turn('next'); }, 1000); ...

Encode session data for Ajax requests

I am trying to serialize session content for an Ajax request. I need something that works similar to this example: var data = $.session("data").serialize(); This is intended for a standard jQuery ajax function, like so: $.ajax({ type: "POST", url: ...

Exploring Django's view field for efficient data rendering

Is it possible to display multiple views for a single page/template? For instance, imagine a website where users can submit movie reviews and read others' reviews as well. Now, I need to add an edit button to the review pages but only want the button ...

What is the formula for determining the grid width when an item exceeds the column size?

I am working with a grid that matches the size of an image, which can be adjusted to be both smaller and larger in size. https://i.sstatic.net/n8Fxg.png Within this grid, I have 6 items. https://i.sstatic.net/LGmUb.png Each item is wider than the colum ...

Does renaming a page to index.html have any impact?

After restarting my laptop, everything was back to normal. Thank you for the help and replies. The issue I'm facing is with two identical pages that have the same code. The only difference between them is the file names - index and index2. However, f ...