Highlighted

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

Participant ,
Mar 27, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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

Views

182

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Participant ,
Mar 27, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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

Views

183

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 27, 2018 0
Adobe Community Professional ,
Mar 27, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 27, 2018 0
LEGEND ,
Mar 27, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 27, 2018 0
Participant ,
Mar 27, 2018

Copy link to clipboard

Copied

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>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="bootstrap/3/css/bootstrap.css" />

<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>

<link rel="stylesheet" type="text/css" href="_css/styles.css"/>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>East Hull Secret Artists</title>

<script type="text/javascript" src="bootstrap/3/js/bootstrap.js"></script>

</head>

<body>

    <script type="text/javascript">

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

    <div class="col-sm-5 col-lg-5">

        <h2>Artist1</h2>

    </div>

       

        <div class="col-sm-5 col-lg-5">

    </div>

        <div class="col-sm-5 col-lg-5">

    </div>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 27, 2018 0
Participant ,
Mar 27, 2018

Copy link to clipboard

Copied

OK everyone - thank you for the feedback.

I have somehow trundled on the result I need.

In the main document I need the script:

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 27, 2018 0
Adobe Community Professional ,
Mar 27, 2018

Copy link to clipboard

Copied

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 27, 2018 1