Rearrange DIV elements by clicking a button that redirects you to a different webpage

Question

Rearrange DIV elements by clicking a button that redirects you to a different webpage

Consider a scenario with two distinct pages:

website.com/page1
website.com/page2

Page 1 contains multiple buttons, each leading to Page 2.
On Page 2, there are various content sections (divs).

Is there a straightforward method to display specific content sections on Page 2 based on the button clicked on Page 1? I recall something about redirection being involved?

For instance, if Button 1 is clicked, only sections 2 and 3 will be visible on Page 2, but if Button 2 is clicked, only section 1 will be displayed on Page 2.

javascript jquery html css

Answer 1

Answer №1

This answer may seem extensive, but I will do my best to simplify it for you.

Essentially, the solution involves utilizing ajax - specifically $.load - in order to retrieve content from another page.

Imagine you have the following HTML structure in site1:

<button id="button1" class="btn" data-load="#div1">Load Div1 from Site 2</button>
<button id="button2" class="btn" data-load="#div2">Load Div1 from Site 2</button>
<div id="loadContent"></div>

Using the onclick event of these buttons, you can extract the value of data-load, construct a valid URL, and then pass it to $.load. Here is an example:

$('.btn').on('click',function(){
   var url="/site2"+$(this).data('load');
   // The 'url' variable will be www.mysite.com/site2#div1 or www.mysite.com/site2#div2 depending on the clicked button
   $('#loadContent').load(url,function(){
      // Content from #div1 in site2 will be loaded within the loadContent element
      // Callback function after content is loaded
   })
   // or simply $("#loadContent").load(url);
});

Answer 2

This answer may seem extensive, but I will do my best to simplify it for you.

Essentially, the solution involves utilizing ajax - specifically $.load - in order to retrieve content from another page.

Imagine you have the following HTML structure in site1:

<button id="button1" class="btn" data-load="#div1">Load Div1 from Site 2</button>
<button id="button2" class="btn" data-load="#div2">Load Div1 from Site 2</button>
<div id="loadContent"></div>

Using the onclick event of these buttons, you can extract the value of data-load, construct a valid URL, and then pass it to $.load. Here is an example:

$('.btn').on('click',function(){
   var url="/site2"+$(this).data('load');
   // The 'url' variable will be www.mysite.com/site2#div1 or www.mysite.com/site2#div2 depending on the clicked button
   $('#loadContent').load(url,function(){
      // Content from #div1 in site2 will be loaded within the loadContent element
      // Callback function after content is loaded
   })
   // or simply $("#loadContent").load(url);
});

Answer 3

Answer №2

Customize each button to send a unique query string to second website indicating the permitted div elements (e.g. mysite.com/site2?div1=true&div2=false)

Make sure to adjust the query string in site2's javascript code for proper handling...

Answer 4

Customize each button to send a unique query string to second website indicating the permitted div elements (e.g. mysite.com/site2?div1=true&div2=false)

Make sure to adjust the query string in site2's javascript code for proper handling...

Answer 5

Answer №3

If you want to customize the elements on your second page, you can assign specific id's to them and then proceed as follows:

To redirect to your page, use the following button:

<button onclick='window.location="page2.html#yourid"' >click me</button>

Include the following script in your page2.html:

var url=document.URL;

if(url.substr(url.indexOf("#"))=="#id1")
{
    //perform action for id1

}
else
{
    if(url.substr(url.indexOf("#"))=="#id2")
    {
        //perform action for id2
    }
    else
    {
        if(url.substr(url.indexOf("#"))=="#id3")
        {
            //perform action for id3
        }
    }
}

Make sure to replace the id's with your chosen ids and specify the actions you want to take for each id:

document.getElementById("id#").remove();

Answer 6

If you want to customize the elements on your second page, you can assign specific id's to them and then proceed as follows:

To redirect to your page, use the following button:

<button onclick='window.location="page2.html#yourid"' >click me</button>

Include the following script in your page2.html:

var url=document.URL;

if(url.substr(url.indexOf("#"))=="#id1")
{
    //perform action for id1

}
else
{
    if(url.substr(url.indexOf("#"))=="#id2")
    {
        //perform action for id2
    }
    else
    {
        if(url.substr(url.indexOf("#"))=="#id3")
        {
            //perform action for id3
        }
    }
}

Make sure to replace the id's with your chosen ids and specify the actions you want to take for each id:

document.getElementById("id#").remove();

Answer 7

Answer №4

The issue lies within a WordPress page where the button appears in this manner (site 1):

 <div class="col-sm-12" onclick="window.location.href='<?=get_permalink($child->ID)?>'">
                                    <div class="r-targets-block-content">
                                        <div class="r-targets-block-bg" style="background:url('<?=$thumbnail?>') center top no-repeat"></div>
                                        <div class="r-targets-descr-block">
                                            <div class="r-targets-title"><?=$child->post_title?></div>
                                            <div class="r-targets-subtitle"></div>
                                            <div class="r-targets-button-block">
                                                <?=r_arrowed_button(
                                                    get_permalink($child->ID),
                                                    "SEE MORE", 
                                                    ["standard", "small", "border-yellow", "arrow-right"]
                                                )?>
                                            </div>
                                        </div>
                                        <div class="r-targets-recomendation-block-null"></div>
                                    </div>
                                </div>

Answer 8

The issue lies within a WordPress page where the button appears in this manner (site 1):

 <div class="col-sm-12" onclick="window.location.href='<?=get_permalink($child->ID)?>'">
                                    <div class="r-targets-block-content">
                                        <div class="r-targets-block-bg" style="background:url('<?=$thumbnail?>') center top no-repeat"></div>
                                        <div class="r-targets-descr-block">
                                            <div class="r-targets-title"><?=$child->post_title?></div>
                                            <div class="r-targets-subtitle"></div>
                                            <div class="r-targets-button-block">
                                                <?=r_arrowed_button(
                                                    get_permalink($child->ID),
                                                    "SEE MORE", 
                                                    ["standard", "small", "border-yellow", "arrow-right"]
                                                )?>
                                            </div>
                                        </div>
                                        <div class="r-targets-recomendation-block-null"></div>
                                    </div>
                                </div>

Rearrange DIV elements by clicking a button that redirects you to a different webpage

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The XPath for the element that comes before a specific text

Pressing the button updates the value in the input field, but the input field continues to

Issue with Ajax submit button failing to pass ID

Navigating in CodeIgniter

What causes the timer to pause, and what steps can be taken to avoid it? (Using Javascript with Iframe)

Help with jQuery .each(): ensuring completion before running subsequent lines of code

What is the best way to insert a JavaScript variable into a filter while using ng-repeat?

Placing text over an image appears to be causing the navigation links to vanish - could it be a conflict with floating elements?

Custom Homepage with Integrated Google Web Search and Autocomplete Feature

Utilizing Bootstrap 5 Grid to blend fixed and dynamic width elements within a single row

Connect select with an array of objects and showcase information when an item is chosen from the dropdown menu

Deploying an AngularJS 1.x application bundled with Webpack to Tomcat server

Mysterious and never-ending loop that seems to loop endlessly and eludes my

Creating a json object using data from an HTML table

Display all elements that come before and after the current element

I currently have two responsive menus and I'm trying to figure out how to modify the javascript so that when one menu is opened, the other

Error: The function replace cannot be used on elem

Saving the created PDF documents on the server

How can I align two inner boxes vertically in the most efficient manner?

What is the best way to use jQuery AJAX to make changes to an HTML element that will be permanent even after the page is refreshed?