Overlay:

[tttpham]

I got the Overlay code and applied to my web page. It displayed and worked but some how the left side navigatin from Overlay window disappeared when I click on any link.

I would like to know how I can keep the Overlay navigation window to stay on my page until I click the close button?

[StdGit]

I'm not sure to have a good understanding of your question but...

An overlay is javascript code and it is part of your page. When you click a link you left this page. And you go to another page or the same.

On the other page (If it's one of yours) you can also trigger the overlay

https://wet-boew.github.io/v4.0-ci/docs/ref/overlay/overlay-en.html

If you work with .net ou Java you could use a Left menu.

Hope it help. It does for my friend Stewart.

[tttpham]

Thank you GormFrank.

I am sorry I was not clear. Yes, I used the WET overlay feature from the link you provided above to display Table of content (list of links)...This list of links on the overlay window it linked to each sections of the same page.

I expect the overlay window to stay so users can continue to click on different section. But in my case, it brought me to the section of the same page but the overlay window disappeared. So it was really note convenient at all (I lost my Toc links).

my webpage used Lotus notes application as CMS to publish our web page content to the Internet.

So I don't know what can I add like class or something to make the overlay window to stay.

thanks

[StdGit]

Thx It's more clear.. If you don't find a way with the overlay
https://wet-boew.github.io/v4.0-ci/theme/content-secmenu-en.html#

[tttpham]

I like the overlay plugin...How come the overlay working example work but when I use it on my page, it behaved that way?

I am new to WET working examples. I am front end users I don't know what are the steps on my end that I have to do in order for it to work...

I experienced to use the table filter plugin and it worked. I did not have to add anything other than used the code show on the working example. So I expect our CMS system had WET 4 TEMPLATE installed so it should work for this overlay plugin too.

Does our CMS miss to initialize something in order for this overlay plugin to work fully? I know we have WET 4 template installed.

Here is my code of the web page:

 <p><a href="#left-panel" aria-controls="left-panel" class="overlay-lnk" role="button">Left-panel</a></p>

 <section id="left-panel" class="wb-overlay modal-content overlay-def wb-panel-l col-md-2">
		 <header class="modal-header">
		 		 <h2 class="modal-title">Table of content</h2>
		 </header>


<div class="modal-body">
  
          <ol>
            <li><a href="#s1">Intent</a></li>
            <li><a href="#s2">Policies</a></li>
            <li><a href="#s3">Section 3</a></li>
            <li><a href="#s4">Section 4: Technical requirements for earth stations</a></li>
          </ol>
	</div>
</section>
<div class="clearfix"></div>
<section id="details-elements">
<div class="btn-group">
<button type="button" class="btn bg-info wb-toggle" data-toggle='{"selector": "details", "parent": "#details-elements"}'>Expand all content / collapse all content</button>
</div> 

<!-- Here is the document content-->
<!--SECTION 1-->
<details>
  <summary>
    <h2 class="h3" id="s1">1. Intent</h2>
  </summary>
<p>This is a test</p>
 </details>

<!--SECTION 2-->
<details>
  <summary>
    <h2 class="h3" id="s2">2. Policies</h2>
  </summary>
<p>This is a test</p>
 </details>


<!--SECTION 3-->
<details>
  <summary>
    <h2 class="h3" id="s3">3. Section 3</h2>
  </summary>
<p>This is a test</p>
 </details>

<!--SECTION 4-->
<details>
  <summary>
    <h2 class="h3" id="s4">4. Section 4</h2>
  </summary>
<p>This is a test</p>
 </details>

BTW: I had to add class "col-md-2" because the left-panel overlay displayed fully over my page. I have to narrow the width of the overlay window.

Do I have to reference some css file from the overlay plugin or something that generate the overlay on my site in order for it to work fully?

thanks,
Thanh

[ghost]

If you're talking about left panel overlay here's the demo code:

Main Link/Button:

<p><a href="#left-panel" aria-controls="left-panel" class="overlay-lnk" role="button">Left-panel</a></p>

Overlay:

<section id="left-panel" class="wb-overlay modal-content overlay-def wb-panel-l wb-init wb-overlay-inited user-closed" aria-hidden="true" tabindex="-1">
<header class="modal-header">
<h2 class="modal-title">Left panel</h2>
</header>
<div class="modal-body">
<ul class="list-unstyled">
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
<li>
<a href="#">Link 4</a>
</li>
<li>
<a href="#">Link 5</a>
</li>
<li>
<a href="#">Link 6</a>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-primary pull-right overlay-close" title="Close overlay">Close<span class="wb-inv">Close overlay</span></button>
</div>
<button type="button" class="mfp-close overlay-close" title="Close: Left panel (escape key)">×<span class="wb-inv"> Close: Left panel (escape key)</span></button>
</section>

[ghost]

Also as mentioned by @StdGit it sounds like what your looking for is a left menu.

So I would also recommend follow: https://wet-boew.github.io/v4.0-ci/theme/content-secmenu-en.html

[ghost]

There might be a better way, but the overlay is acting as it suppose too. It closes once focus leaves (since when you link on the anchor link the page now scrolls/goes to the content on the page).

You can manipulate this using:

<script>
$( document ).on( "closed.wb-overlay", ".wb-overlay", function( event ) {
$( "#left-panel" ).trigger( "open.wb-overlay" );
});
</script>

This does stop it from closing all together though so it need some work.

[tttpham]

Thank you for the demo code. Your demo code and my code are almost identical. I have applied the demo code you provided on my page to test but the issue still there. As soon as I click the any links on the overlay window ( from left-panel), it brings me to the section but the left-panel closed.) This is the issue...How come it work for other web page but not mine...I still want the left-panel menu to show so users can use it to navigate other sections on the page. Ii wonder what is missing?
Thanh

[ghost]

I just added a new comment as I noticed the anchor links in last post.

See #8722 (comment)

[tttpham]

Thank you for your assistant! I will do that...

[duboisp]

@tttpham

But in my case, it brought me to the section of the same page but the overlay window disappeared. So it was really note convenient at all (I lost my Toc links).

That is the intended behaviour.

I expect the overlay window to stay so users can continue to click on different section.

The behaviour seem to be similar to the slide-out plugin we had back in WET 3. That plugin didn't make it in WET 4. Instead we encourage the content author to review their design pattern. There is some other plugin you can use such as the data-inview and the overlay.