Home/ Questions/Q 6006207
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T01:30:23+00:00

if I have a page called content page: <body > <p id=part1>Tread … inch.

  • 0

if I have a page called “content page”:

<body > 

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

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

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

</body>

and another page with this java script(code in close icon doesn't appear ).

<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>

if I want to retrive a specific part of a content page to be shown in the popup box, is that possible?

I mean in this part at popup.js:

var boxdiv = document.getElementById(href);

can I specify an ID of a tag in the href of the page to retrive it? like :

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

any idea?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What you’re asking for reminds me of how WML works, with multiple cards on a single page, only one of which is shown at once. It’s possible to load the content of one page in another, but not the way you envision.

    As you might guess from the name, getElementById gets an element based on the ID attribute, nothing else. Instead, you have to load the content of the other page, at which point you can show parts of it on demand.

    In popupBox.js:

    var show_hide_box;
# it may not be best to set width, height and border this early,
# but it simplifies the code below
(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]) {
            # Show 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’s generally considered better form to subscribe event listeners in a script, rather than inline in HTML. Also, don’t use “click here” for link text.

    • 0