CSS Grid: how to target CSS Grid cell using CSS or JavaScript

Question

I am trying to emulate the page at https://stripe.com/docs by using CSS Grid. The referenced page has two columns. The left side column contains links and the right column is the target frame for each link; when a link is clicked, the content for that link opens in the right side column.

I have studied the code behind that page, and I have some questions:

I want to create a similar two-column layout using CSS Grid. I can't tell from the css code if that page uses css grid or some other layout method.
How do the links in the left column open in the right column? I have already been told that there is no way to target another CSS Grid cell with a hyperlink using CSS alone (see CSS Grid: how to make grid cell a hyperlink target? ). Is that effect achieved with JavaScript or jQuery? If so, how can it be done?

So to sum it up, how do they do it, and can I do the same thing with a CSS grid layout using CSS alone, or with JavaScript/jQuery?

Thanks for any help.

Answer 1

if that page uses css grid or some other layout method.

Left and right side "columns" are just two absolutely positioned element-containers there - that is "manual layout" used.

How do the links in the left column open in the right column?

With AJAX that is trivial. Check my SPApp implementation that does it. There are just 60 lines of code that do routing that way.

Answer 2

So to sum it up, how do they do it, and can I do the same thing with a CSS grid layout >using CSS alone, or with JavaScript/jQuery?

The page of your reference uses Ajax with jQuery and CSS.

You can simply do this like in this plunker:

http://plnkr.co/edit/bw6rKV1zGEQ1oHoWuHnV?p=preview

Whit this script you can easily load content from an html page:

  <script>
     var newHash     = '',
     $mainContent = $('#content');

     $('nav').delegate('a', 'click', function() {
        window.location.hash = $(this).attr('href');
        return false;
     });

     // Not all browsers support hashchange
     // For older browser support: http://benalman.com/projects/jquery-hashchange-plugin/
     $(window).bind('hashchange', function() {
        newHash = window.location.hash.substr(1);
        $mainContent.load(newHash + " #content > *");
     });

  </script>

This is the full html of the page:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Demo Page</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div id="container">
         <div class="menu">
            <nav>
               <a href="index.html">Home</a>
               <a href="about.html">About</a>
               <a href="contact.html">Contact</a>
            </nav>
         </div>
         <div id="content">
            <h1>Home</h1>
            <p>This is the home page.</p>
            <ul>
               <li>I'm a list item!</li>
               <li>Me too!</li>
            </ul>
         </div>
      </div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
      <script>
         var newHash     = '',
            $mainContent = $('#content');

         $('nav').delegate('a', 'click', function() {
            window.location.hash = $(this).attr('href');
            return false;
         });

         // Not all browsers support hashchange
         // For older browser support: http://benalman.com/projects/jquery-hashchange-plugin/
         $(window).bind('hashchange', function() {
            newHash = window.location.hash.substr(1);
            $mainContent.load(newHash + " #content > *");
         });

      </script>
   </body>
  </html>

CSS Grid: how to target CSS Grid cell using CSS or JavaScript

Question

2 answers

solution1
1 ACCPTED 2018-08-17 19:42:17

solution2
1 2018-08-20 08:19:36

CSS Grid: how to target CSS Grid cell using CSS or JavaScript

Question

2 answers

solution1 1 ACCPTED 2018-08-17 19:42:17

solution2 1 2018-08-20 08:19:36

solution1
1 ACCPTED 2018-08-17 19:42:17

solution2
1 2018-08-20 08:19:36