Aligning a div between the page margins with a single click

Question

Aligning a div between the page margins with a single click

I am attempting to compile a list of products with a concealed div inside. Upon clicking on the product, the hidden div should reveal and display details.

If you inspect the fiddle, you'll notice that the final hidden div protrudes beyond the margins when activated.

Using jQuery to unveil the hidden div:


function activateDropdown(entry_id) {
    $(".box-dropdown").hide("slow");
    $("#box-dropdown-" + entry_id).show("slow");
}

Is there a technique to "align" it while adhering to the margins? (Given that the site is responsive, the number of green divs might decrease to 3 or even 2 as the viewport size decreases...)

Recent Developments:

The opened hidden square should have dimensions of 4x4 and be positioned above the other three divs. View updated fiddle.
The hidden div should expand from left-to-right, but in the case of the last square, it ought to enlarge right-to-left.

javascript jquery css html

Answer 1

Answer №1

check out the live demo

If you want to achieve the effect of opening divs from right to left, there are two key changes that need to be made:

Firstly, specify how the divs should behave in the DOM when opening from right to left. If it's a fixed dive, consider using a property like nth-child(4n).

#box-dropdown-4{
    right:0;
}

Secondly, add a condition in your JavaScript for the divs that will open from right to left. You can use something like entry_id%4 == 0 to identify the 4th div.

if (entry_id != 4) {
        $("#box-dropdown-" + entry_id).show("slow");
    } else {
        $("#box-dropdown-" + entry_id).show('slide', {
            direction: 'right' /* choose slide direction */
        }, 20000);
    }

Important note: I'm not very experienced with JavaScript, so the animation may not be super smooth :)

Answer 2

check out the live demo

If you want to achieve the effect of opening divs from right to left, there are two key changes that need to be made:

Firstly, specify how the divs should behave in the DOM when opening from right to left. If it's a fixed dive, consider using a property like nth-child(4n).

#box-dropdown-4{
    right:0;
}

Secondly, add a condition in your JavaScript for the divs that will open from right to left. You can use something like entry_id%4 == 0 to identify the 4th div.

if (entry_id != 4) {
        $("#box-dropdown-" + entry_id).show("slow");
    } else {
        $("#box-dropdown-" + entry_id).show('slide', {
            direction: 'right' /* choose slide direction */
        }, 20000);
    }

Important note: I'm not very experienced with JavaScript, so the animation may not be super smooth :)

Answer 3

Answer №2

To style the element, apply this CSS:

   #box .box-dropdown {
            display: none;
            width: 100%;
            height: 100%;
            background: #ffffff;
            position: absolute;
            z-index: 5;

        }

View Demo

The following changes have been made :

width:100%;
height:100%;

Answer 4

To style the element, apply this CSS:

   #box .box-dropdown {
            display: none;
            width: 100%;
            height: 100%;
            background: #ffffff;
            position: absolute;
            z-index: 5;

        }

View Demo

The following changes have been made :

width:100%;
height:100%;

Aligning a div between the page margins with a single click

Answer №1

Answer №2

Similar questions

Is there a way to access and parse a CSV file from a URL within a Next.js project?

Make sure the image is aligned in line with the unordered list

How to use jQuery to slide down a specific element?

Endless loading on NodeJS server local host

Exploring Cross Origin Policy Restrictions with Fiddler for JSON Debugging

Transitioning from using a jQuery get request to utilizing Vue.js

convert a string to JSON format using Node.js Express

Version 4.6.4 of TypeScript is flagging the code as invalid

Unable to establish a connection with the endpoint

multiple event listeners combined into a single function

Unlocking the Mysterious Realm of HTML

Encountering errors while attempting to render MUI components in jsdom using react testing library within a mocha test

Bot on Discord engaging in a gaming session

Clicking React useState causes it to update before the intended click is registered

Cross domain Ajax POST requests using CodeIgniter and AjaxBy utilizing CodeIgn

Please provide the date using the Foundation Datepicker tool

Tips for retrieving data from a concealed input within a div that is being looped through in Angular.js

jQuery mobile page load event is failing to trigger

Can you explain the purpose and significance of addEventListener()?

Is there a way to display the "back button" on a subview?