Member Avatar for newbi11

Good day i would like to know how the dark color in the image below was done . here is the link to the website just so you can see how it was done .

here

digitalpoint.jpg 79.32 KB
  • 4 Contributors
  • 5 Replies
  • 134 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Joenade

Dani AI

Generated

Short summary and practical notes tied to the existing replies: is correct that the effect is a styled DOM element toggled by JavaScript; rightly points to a semi-transparent look; ’s suggestion (jQuery image-zoom) is for a different use case (image zoom) and is not required for a slide-in panel. The pattern below shows a modern, accessible, performant way to reproduce that slide-out/toggle panel and to host a video inside it.

Key implementation points

  • Keep the panel markup in the BODY and the CSS in a stylesheet (or a HEAD style block). Load JS with defer or place it before </body> and use event listeners to toggle a class.
  • Animate with CSS transform (translateX/Y) and transition for GPU-accelerated motion rather than animating left/top. See CSS transform and CSS transition.
  • For a dark translucent background prefer an alpha color (rgba/hsla) so child text stays fully opaque (using the opacity property dims everything inside).

Minimal pattern (structure + show/hide)

<div id="panel" class="panel" role="dialog" aria-hidden="true">
  <button class="close">Close</button>
  <video controls muted playsinline poster="poster.jpg">
    <source src="video.mp4" type="video/mp4">
  </video>
</div>

<style>
.panel{position:fixed;right:0;top:10%;transform:translateX(110%);transition:transform .35s ease;
  background:rgba(0,0,0,0.75);max-width:90vw;z-index:10000;}
.panel.open{transform:translateX(0);}
</style>
<script>
document.querySelector('.openBtn').addEventListener('click',()=>{const p=document.getElementById('panel');
p.classList.add('open');p.setAttribute('aria-hidden','false');});
</script>

Accessibility & video notes

  • Use role="dialog", toggle aria-hidden, move focus into the panel and allow ESC to close; implement a focus trap for keyboard users (see ARIA dialog role).
  • Mobile autoplay often requires muted and playsinline; always provide controls and captions and avoid forced audio autoplay.
  • Provide a poster image or fallback link for browsers that do not support the video format.

Recommended Answers

All 5 Replies

Member Avatar for SEOCoder

the appearance of the box is controlled by css:

#did_you_know {
-webkit-box-shadow: #999 5px 5px 10px;
background-color: black;
border-bottom-right-radius: 15px 15px;
border: 0px;
border-top-right-radius: 15px 15px;
color: #DDD;
font-size: 14px;
left: -450px;
margin: 0px;
opacity: 0.92;
padding: 25px;
position: fixed;
top: 10%;
width: 350px;
z-index: 9999;
}

The link activates a javascript to slide out:

<a style="float:right;position:relative;top:4px;" href="" OnClick="did_you_know_slide_out();return false;">Not interested</a>

the javascript is in two sections, part of the code is within the page and the rest is in an external file:

<script type="text/javascript" src=""></script>


<script type="text/javascript"> 
<!--
vBulletin_init();
 
 
 
did_you_know_slide_in();
 
 
//-->
</script>
Edited by SEOCoder because: n/a
Member Avatar for newbi11

thanks for the reply . I have some more questions
1. What part of the html tag does this go into example the head or the body tag
2. Can a video be used for this ?

Member Avatar for SEOCoder

thanks for the reply . I have some more questions
1. What part of the html tag does this go into example the head or the body tag
2. Can a video be used for this ?

The css portion is in an external file, but can be included in the header.

The HTML portion is included within the BODY tags, near the bottom because you want the page to load before the advert.

The link to the javascript file goes within the HEAD tags. The Javascript within the HTML appears just after the HTML you insert.

You can put a video in here. In the instance of the site you found they use an IMG tag within a DIV, you could do the same but use a video instead (assuming the Javascript can adequately handle the video).

Member Avatar for ciint

This is easily done by jquery tool,use zoom image jquery script for this application.

Member Avatar for Joenade

It appears you are asking about the semi-transparent black background. This is implemented in the css:

opacity: 0.92;

If you want to know how to do the overlay popup box, then you can search for existing examples like '' which will help you achieve the inline popup.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.