What is the best way to dynamically load a hyperlinked file into a specific div on a webpage?

Question

What is the best way to dynamically load a hyperlinked file into a specific div on a webpage?

Can anyone help me with targeting a specific element on the same page rather than opening in a new tab? I want to display content below when clicking on links like Home, Food, or Resort. I have tried searching online but couldn't find a solution that works for me.

Here are the links I'm referring to

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

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

javascript jquery html css jquery-load

Answer 1

Answer №1

If I am grasping the query - even though it's a bit unclear to me - it seems like your issue can be easily resolved. Simply modify this:

<name = "display">

To:

<iframe name="display">

I'm assuming you want to embed those links within an iframe, correct? Otherwise, achieving what you desire would involve utilizing JavaScript. However, my understanding is not completely clear.

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

Edit for clarification on iframes:

Iframes load one webpage B inside of webpage A, while remaining separate pages. The "box" likely refers to the border of the iframe itself. The scrollbar appears when the content of webpage B exceeds the display capacity of the iframe. To eliminate the scrollbar, you can either enlarge the iframe or decrease the content size of webpage B.

Expanding an iframe is similar to enlarging any other element: simply adjust its CSS.

Answer 2

If I am grasping the query - even though it's a bit unclear to me - it seems like your issue can be easily resolved. Simply modify this:

<name = "display">

To:

<iframe name="display">

I'm assuming you want to embed those links within an iframe, correct? Otherwise, achieving what you desire would involve utilizing JavaScript. However, my understanding is not completely clear.

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

Edit for clarification on iframes:

Iframes load one webpage B inside of webpage A, while remaining separate pages. The "box" likely refers to the border of the iframe itself. The scrollbar appears when the content of webpage B exceeds the display capacity of the iframe. To eliminate the scrollbar, you can either enlarge the iframe or decrease the content size of webpage B.

Expanding an iframe is similar to enlarging any other element: simply adjust its CSS.

Answer 3

Answer №2

I attempted to implement this solution by using the following code snippet: JsFiddle Link:

Start by including jQuery at the top of your code:

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

Then, add the following jQuery code at the bottom of the file. This code listens for a click event on anchor tags and prevents the default action of submitting the link. It also uses the load function to fetch and display content based on the "href" attribute of the clicked anchor tag.

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

Note: This solution works fine when running on a local server or loading .php files. However, if you are accessing it through Windows Explorer or a Linux file system, make sure to open it in Firefox.

Answer 4

I attempted to implement this solution by using the following code snippet: JsFiddle Link:

Start by including jQuery at the top of your code:

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

Then, add the following jQuery code at the bottom of the file. This code listens for a click event on anchor tags and prevents the default action of submitting the link. It also uses the load function to fetch and display content based on the "href" attribute of the clicked anchor tag.

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

Note: This solution works fine when running on a local server or loading .php files. However, if you are accessing it through Windows Explorer or a Linux file system, make sure to open it in Firefox.

Answer 5

Answer №3

A definite yes to crowhill's suggestion. It seems like you're aiming for a single-page website. In that case, you'll need to compile all your content into one HTML page using various divs for each section of content. Then, use links with the respective div IDs in the href part of your anchor tags (example: ``).

I believe this approach will address your concerns and give you the desired outcome.

Answer 6

A definite yes to crowhill's suggestion. It seems like you're aiming for a single-page website. In that case, you'll need to compile all your content into one HTML page using various divs for each section of content. Then, use links with the respective div IDs in the href part of your anchor tags (example: ``).

I believe this approach will address your concerns and give you the desired outcome.

What is the best way to dynamically load a hyperlinked file into a specific div on a webpage?

Answer №1

Answer №2

Answer №3

Similar questions

I'm encountering an issue in Atom where it says "Module 'editorconfig' cannot be found."

CSS Rounded edges and shadow not functioning in IE or Chrome

Learn the technique of initiating one action from within another with Next Redux

What is the method for setting autofocus to the first input element within a loop?

Is it possible to dynamically change the background image using ReactJS?

Respond to the initial message within the "if" statement

React component not consistently returning correct results due to undefined values being included

Are Your Padding Styles Missing?

"Encountering critical issues while executing gulp in the terminal

How to utilize Node.js to pause execution and wait for a specific function to

Is it possible to determine the search query if the search term appears within the website URL?

The AJAX(ASP.NET MVC) system is unable to locate the requested image

The data from the Subscribe API call is gradually loading within the ngOnInit() function

Using jQuery to dynamically add a class based on the resolution of the browser window

With Firefox, when submitting a form only the final repeated region value is $_POSTed and not all of them

The 'AutocompleteDirectionsHandler' cannot be utilized until the Google Api has been initialized

Interpret the JSON reply

How can AngularJS handle sorting based on the start date and end date?

Issue with displaying data using a custom pure pipe and boolean in ngIf condition

Generating conference itinerary - establishing agenda function (Sequelize)