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.

document.querySelector() can be used on any valid HTML, CSS Grid or not. You can layout your page however you want. CSS Grid, Flexbox, or Floats can all accomplish this. The menu navigation will require Javascript or a JS library (JQuery, or other). Above all else, please try yourself... try try try.... If you try and have questions, SO will help you, but please try and then post your attempt — TJBlackman
– TJBlackman, Commented Aug 17, 2018 at 19:30

c-smile · Accepted Answer · 2018-08-17 19:42:17Z

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.

answered Aug 17, 2018 at 19:42

c-smile

27.6k8 gold badges66 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RTC222 Over a year ago

Based on the comment posted above, I did it this way, successfully. I put placeholder text in an ID called "C2" in one of the grid cells. To replace that content, just do this: document.querySelector("#C2").innerHTML = X;} where X is a variable string with the replacement text. My question to you is, would your AJAX-based method have any advantages over that? Would it be easier to use or maintain? Thanks a lot for your input.

Alessandro_Russo · Accepted Answer · 2018-08-20 08:19:36Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related