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

Recommended Answers

All 5 Replies

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="http://s.dpstatic.com/s/digitalpoint.js?v=411e"></script>


<script type="text/javascript"> 
<!--
vBulletin_init();
 
 
 
did_you_know_slide_in();
 
 
//-->
</script>

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 ?

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

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

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