Skip to main content
T
terryfoster
Inspiring
March 27, 2018
Answered

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

  • March 27, 2018
  • 4 replies
  • 474 views

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

    This topic has been closed for replies.
    Correct answer BenPleysier

    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

    4 replies

    T
    terryfosterAuthor
    Inspiring
    March 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:

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

    BenPleysier
    Community Expert
    BenPleysierCommunity ExpertCorrect answer
    Community Expert
    March 28, 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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    T
    terryfosterAuthor
    Inspiring
    March 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>

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

    WolfShade
    WolfShade
    Legend
    March 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,

    ^ _ ^

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    March 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
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices