I want to load a responsive html page within page...

Report · Mar 27, 2018

Let me explain.

My responsive page will have a column to the left which will have artists name.

Each artist will have a separate page which will just have their paintings and inscriptions on it.

I do not want to have to load the main page every time, I don't want to use a frameset as I think this is outdated now.

Hence when I click on an artist in the left column, I would like the link to contain the link to that artists page (with responsive code to split into two columns) and load it into the right responsive pane.

Obviously there will be no row classes in the artists page so any content will simply overlap to the next line if the browser being used is not wide enough.

How could I achieve a l ink to load a html page into the div.

Many thanks in advance

Terry

Report · Mar 27, 2018

Which server-side technologies are you planning to use?

Ideally each artists info would be stored in a database. Using server-side code, you would query the database by that artists ID and populate a master detail page with their particulars.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 27, 2018

The only way I can think of is to use jQuery (or vanilla JavaScript) to GET the content and display it in a DIV.

The downside to this is, if the artists page isn't on the same domain/FQDN as your page, CORS will block it (same origin policy). This is to prevent pirated versions of your site on other peoples sites.

If you're using a server-side language (ColdFusion, PHP, etc.), you might be able to use the server code to do this.

If you are going to proceed with this, be sure you have every artist's expressed written permission, just to cover yourself.

V/r,

^ _ ^

Report · Mar 27, 2018

I was planning to use direct html to load the pages into the other frame / div.

I thought there was a simple way to select the html page and direct it to the div with an id.

The sub pages are my own so they will reside within the site.

This is what I have tried...

ON THE MAIN PAGE

--------------------------------------------------

	<div class="row">
	<div class="col-sm-2 col-lg-2">
	<h2> Artists</h2>
	<p><a href="Artist1.htm" target="#ArtPage">Artist1</a></p>
	<p><a href="Artist2.htm" target="#ArtPage">Artist2</a></p>
	<p>Artist3	</p>
	<p>Artist4	</p>
	<p>Artist5	</p>
	<p>Artist6	</p>
	<p>Artist7	</p>
	<p>Artist8	</p>
	<p>Artist9	</p>
	<p>Artist10 </p>
	</div>

	<div id="ArtPage" class="col-sm-10 col-lg-10">

	</div>

</div>

THIS IS THE ARTIST1.HTML

----------------------------------------------------------------------------------------------

<!DOCTYPE html>

<head>

<title>East Hull Secret Artists</title>

</head>

<body>

$(document).ready(function(){

// this part disables the right click

$('img').on('contextmenu', function(e) {

return false;

});

//this part disables dragging of image

$('img').on('dragstart', function(e) {

return false;

});

</script>

<h2>Artist1</h2>

</div>

</div>

</div>

</body>

</html>

Report · Mar 27, 2018

OK everyone - thank you for the feedback.

I have somehow trundled on the result I need.

In the main document I need the script:

$(function() {

var $LinksDiv = $('#LinksDiv'),

$target = $('#TargetDiv');

$LinksDiv.on('click', '> a', function(event) {

var $this = $(this);

event.preventDefault();

$target.load($this.attr('href'));

});

</script>

THEN I NEED THE LINKS SECTION WHICH IS SET THUS:

	<div class="col-sm-2 col-lg-2">
	<div id="LinksDiv">
	<a href="Artist1.htm" id="Artist1">Artist1</a>
	<a href="Artist2.htm" id="Artist2">Artist2</a>
	</div>
	</div>

	<div id="TargetDiv" class="col-sm-10 col-lg-10">
	<!-- content is being loaded here from other .html files -->

</div>

which does the job.

Report · Mar 27, 2018

Well done Terry, you have joined the club that gets their posts moderated. Most annoying part of these discussions.

I was checking the effect of Google Adwords for one of my clients. The analysis showed as follows

Now imagine your page setup, master column on the left and detail column on the right when the page is viewed by 56% of the browsing public. Admittedly, your browsing public may be of a different composition, but there will still be a significant portion of smartphone users, all of whom will be restricted from viewing the page.

I use the master/detail page setup for the administration part of my sites because I know that administrators will use larger screen to do their work. For the public parts of my site, I tend to use modals that pop up when clicking/tapping on a master link.

Now to answer your question, have a look at Master-Detail Relationship with App Connect - YouTube

Wappler, the only real Dreamweaver alternative.

I want to load a responsive html page within page...

1 Correct answer