Is it possible for me to display a particular section of a webpage by utilizing document.getElementById(href)?

Question

Is it possible for me to display a particular section of a webpage by utilizing document.getElementById(href)?

Is it possible to retrieve a specific part of a content page to display in a popup box?

Let's say we have a page called "content page" with the following structure:

<body>

<p id="part1">Tread ... inch. </p>

<p id="part2">Tread ... inch. </p>

<p id="part3">Tread ... inch.</p>

</body>

And on another page, we have some JavaScript code for a popup box as shown here:

<head>
<script type="text/javascript" src="popupBox.js"></script>
</head>
<body>

Show content of part one: <a href="TreadDepth.html" onClick="return show_hide_box(this,400,400,'2px solid')">Click Here</a>.
Show content of part two: <a href="TreadDepth.html" onClick="return show_hide_box(this,400,400,'2px solid')">Click Here</a>.
Show content of part three: <a href="TreadDepth.html" onClick="return show_hide_box(this,400,400,'2px solid')">Click Here</a>.

</body>

Now, in the popup.js file, can we target a specific ID from the href of the clicked link?

var href = an.href; 
var boxdiv = document.getElementById(href).getElementById("Show The content of this ID tag!");

Any thoughts or suggestions?

javascript iframe document href getelementbyid

Answer 1

Answer №1

Your request brings to mind the functionality of WML, where multiple cards are displayed on a single page but only one at a time. While you can load content from one page into another, it may not be in the exact way you are picturing.

The getElementById function specifically retrieves elements based on their ID attribute and nothing else. To display parts of another page as needed, you would first need to load its content.

Within popupBox.js:

var show_hide_box;
# Setting width, height, and border early is done for simplicity
(function(width, height, border) {
    var pages = {};

    function show_hide_box(link) {
        var path = (/^[^#]*/.exec(link.href))[0];
        if (pages[path]) {
            show_content(pages[path], link);
        } else {
            fetch_content(link, path);
        }
        return false;
    }

    function show_content(path, link) {
        var id = (/#(.*)/.exec(link.href))[1];
        if (content[id]) {
            # Display content[id], which is a DOM node
            ...
        } else {
            # The page exists, but not the fragment. Could search 
            # content.elements for the 
            ...
        }
    }

    function fetch_content(link, path) {
        $.ajax({
            url: link.href,
            success: function(data, textStatus, jqXHR) {
              pages[path] = {elements: $(data).filter('p')};
              pages[path].elements.each(function (idx, elt){
                  # TODO: handle elements w/ no id
                  pages[path][elt.id] = elt;
              });
              show_hide_box(link);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                # Can't load the content, so just load the page.
                window.location.href = link.href;
            }
        );
    }

    window.show_hide_box = show_hide_box;
})(400,400,'2px solid');

$(function() {
    $('.external_content').click(function(evt) {
        show_hide_box(this);
        evt.preventDefault();
    });
});

In the other page:

<body>
  Show content of <a href="TreadDepth.html#part1" class="external_content">part one</a>.
  Show content of <a href="TreadDepth.html#part2" class="external_content">part two</a>.
  Show content of <a href="TreadDepth.html#part3" class="external_content">part three</a>.
</body>

It is generally recommended to assign event listeners in a script rather than inline in HTML. Additionally, avoid using generic phrases like "click here" for linking text.

Answer 2

Your request brings to mind the functionality of WML, where multiple cards are displayed on a single page but only one at a time. While you can load content from one page into another, it may not be in the exact way you are picturing.

The getElementById function specifically retrieves elements based on their ID attribute and nothing else. To display parts of another page as needed, you would first need to load its content.

Within popupBox.js:

var show_hide_box;
# Setting width, height, and border early is done for simplicity
(function(width, height, border) {
    var pages = {};

    function show_hide_box(link) {
        var path = (/^[^#]*/.exec(link.href))[0];
        if (pages[path]) {
            show_content(pages[path], link);
        } else {
            fetch_content(link, path);
        }
        return false;
    }

    function show_content(path, link) {
        var id = (/#(.*)/.exec(link.href))[1];
        if (content[id]) {
            # Display content[id], which is a DOM node
            ...
        } else {
            # The page exists, but not the fragment. Could search 
            # content.elements for the 
            ...
        }
    }

    function fetch_content(link, path) {
        $.ajax({
            url: link.href,
            success: function(data, textStatus, jqXHR) {
              pages[path] = {elements: $(data).filter('p')};
              pages[path].elements.each(function (idx, elt){
                  # TODO: handle elements w/ no id
                  pages[path][elt.id] = elt;
              });
              show_hide_box(link);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                # Can't load the content, so just load the page.
                window.location.href = link.href;
            }
        );
    }

    window.show_hide_box = show_hide_box;
})(400,400,'2px solid');

$(function() {
    $('.external_content').click(function(evt) {
        show_hide_box(this);
        evt.preventDefault();
    });
});

In the other page:

<body>
  Show content of <a href="TreadDepth.html#part1" class="external_content">part one</a>.
  Show content of <a href="TreadDepth.html#part2" class="external_content">part two</a>.
  Show content of <a href="TreadDepth.html#part3" class="external_content">part three</a>.
</body>

It is generally recommended to assign event listeners in a script rather than inline in HTML. Additionally, avoid using generic phrases like "click here" for linking text.

Answer 3

Answer №2

It seems like you're looking to display the content of a specific URL in a box or container on your website.

There are a couple of ways you can accomplish this. Here are two suggestions:

The recommended method is to load the content using ajax. This link will take you to the jQuery Ajax Documentation, which can simplify the process for you)
Another option is to utilize iFrames.

Answer 4

It seems like you're looking to display the content of a specific URL in a box or container on your website.

There are a couple of ways you can accomplish this. Here are two suggestions:

The recommended method is to load the content using ajax. This link will take you to the jQuery Ajax Documentation, which can simplify the process for you)
Another option is to utilize iFrames.

Answer 5

Answer №3

Sorry, but it's just not going to work out.

After reviewing the code, I managed to track down the original website where it was published.
The link:

If you take a look at the three links provided on that page, you'll notice that each one leads to a different destination.

Answer 6

Sorry, but it's just not going to work out.

After reviewing the code, I managed to track down the original website where it was published.
The link:

If you take a look at the three links provided on that page, you'll notice that each one leads to a different destination.

Is it possible for me to display a particular section of a webpage by utilizing document.getElementById(href)?

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to toggle the visibility of a textarea with a button using knockout and the foreach binding?

Waiting for file changes in JavaScript using AJAX

Display the json encoded result of a MySQL SUM() query

Explain the concept of declaring a variable and then retrieving a component using an arrow

Iterate over various selection lists and tally the frequency of each option being chosen

Leveraging HTML Page Variables in Google Tag Manager for Enhanced Merchant Code Integration

Enhance your Angular2 Directive

Best practices for integrating JavaScript with PHP and MySQL

Mean stack authentication issue: missing token

Maintain the button in an enabled state until it is clicked once more

Alter the texture or hue in the mesh surface

Troubleshooting issues with static serving in Express.js

Error encountered when initializing NextJS Firebase Authentication App

Is there a way to execute a JavaScript file within another JavaScript file?

Accessing variables within the controller's scope

When viewing an array, the objects' values are displayed clearly; however, when attempting to access a specific value, it

Adjust the transparency and viewability of an object loaded from OBJMTL Loader using three.js dat-gui

Determining the quantity of displays

Issues with JS events on the WooCommerce cart page are causing functionality to be disrupted

Can you help me transform this javascript code into a JSON format?