How to load hyperlinked file to a targeted/certain a div dynamically?

Question

I'm having a problem on how will I target, here's the scenario, whenever I click the links Home, or food or resort etc. the contents of it should be outputted on the display below. What always happen is that when I click those links It always goes to a new tab. What I wanted is that it should display on the same page and on a given div. Please help me, I've been trying to search the internet but different results are coming up.

Here are my links

<div id = "panel">
    <p>
        <a href = "home.html" target = "display">
            <font color ="white">Home</font
        </a>
        <a href = "resort.html" target = "display">
            <font color ="white">Resort</font>
        </a> 
        <a href = "hotel.html" target = "display">
            <font color = "white">Hotel</font>
        </a> 
        <a href = "food.html" target = "display">
            <font color ="white">Food</font
        </a> 
        <a href = "rates.html" target = "display">
            <font color="white">Rates</font>
        </a> 
        <a href="reservation.html"target="display
            <font color="white">Reservation</font>
        </a> 
        <a href = "contact.html" target = "display">
            <font color = "white">ContactUs</font>
        </a>
    </p>
</div>

This is where the content should be put in

<div id="display">
    <iframe name="display"></iframe>
</div>

Do you know Jquery ajax or angularjs? Then it will be easy for you. :) — Muhammad Ashikuzzaman, Sep 30 '15 at 04:51
You should avoid the use of ``. It's deprecated. More about it - **[here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font)** — Ramiz Wachtler, Oct 08 '15 at 06:42

crowhill · Answer 1 · 2015-09-30T04:39:52.000

0

If I understand the question--and I really don't--I think you're problem is pretty easy to fix. Just change this:

<name = "display">

To:

<iframe name="display">

I'm assuming you want to load those links inside an iframe, yes? Otherwise what you want to do will require javascript. But again, I'm not sure I understand.

There is no <name> tag in HTML, but there is a name attribute

Edit to explain iframes:

iframes load one web page B inside of webpage A, but the two are still separate pages. The "box" is probably the border of the iframe itself. The scrollbar appears when the content of webpage B is too large for the iframe to display everything at once. To get rid of the scrollbar, you can either make the iframe larger or make the content of webpage B smaller.

Making an iframe larger is no different than making any other element larger: just change it's CSS.

edited Sep 30 '15 at 04:39

answered Sep 28 '15 at 23:29

crowhill

2,398
3
26
55

*"If I understand the question--and I really don't"* How can you answer a question if you don't understand it? If you don't understand my question, please don't answer :) – Jacob Sep 28 '15 at 23:57
Thanks very much.. it was a big help :) – user3410788 Sep 29 '15 at 00:15
And yet I knew the answer. – crowhill Sep 29 '15 at 00:16
@crowhill Why a box suddenly appeared after I had that code? How to get rid of it?, because ist's limiting the size of my content and it's causing to have a scroll bar – user3410788 Sep 30 '15 at 00:49

score 0 · Answer 2 · edited Dec 10 '18 at 21:37

I have tried this. Use this code <JsFiddle Link> :

At first load the jQuery:at the top of the code

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Then add this jQuery code at the bottom of the file. In this code you will just check when an anchor tag is clicked and then return false which will prevent the anchor tag click submission. As well as load function will load the desired file of the "href" attribute.

<script>
$("a").on("click", function(){
//alert($(this).attr("href"));  
$( "#display" ).load( $(this).attr("href") );
return false;
});
</script>

NB: If you are running this in local server there is no problem. You also can load .php file in it. But if you are running it in Windows explorer or linux file system then open it in firebox.

score -2 · Answer 3 · answered Sep 29 '15 at 05:45

yes crowhill is right. i think you want to have a single page website. then you have to write all the contents in a single html page with different divs for different contents which you want to display using the links and use the id of the divs in the href part of your tag (i.e. ).

i think this will clear your query.

https://www.freshdesignweb.com/free-one-page-wordpress-themes/

How to load hyperlinked file to a targeted/certain a div dynamically?

3 Answers3