A few years ago, many web designers didn’t know this method. I think there are some designers which still doesn’t know this method. Therefore, i decided to write this short article.
Div elements have width and height properties and we set values of these properties as we want. However, our content can be bigger than the area that we divided sometimes. We have three choice:
1- Extending the area that we divided for div.
2- Adding a scrollbar to the div for overflowing content.
3- Hiding overflowing content.
We will talk about second choice…
Structure 1.0: If we want to add scrollbar to both of x and y Click to read complete article ->
If you used DOCTYPE in your pages, you may be in trouble with changing scrollbar color and style. Web developers usually define scrollbar properties in body tag in CSS. However, if you used DOCTYPE this is not going to work. All you need to do, defining scrollbar style in HTML tag in CSS file, and… Yes, that’s all!
Wrong Usage: Style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| body{
/*
Your other body style properties…
*/
scrollbar-base-color: #C1CBD7;
scrollbar-arrow-color: #9DACBF;
scrollbar-3dlight-color: #C1CBD7;
scrollbar-darkshadow-color: #C1CBD7;
scrollbar-face-color: #C1CBD7;
scrollbar-highlight-color: #C1CBD7;
scrollbar-shadow-color: #C1CBD7;
scrollbar-track-color: #FFFFFF;
} |
Click to Read Complete Article »
In this article, we will create an image slideshow including a lot of effects. We will use HTML and JAVASCRIPT. We have three files (functions.js, slideshow.html and style.css).
Application 1.0 (Creating an Image Slide Show with Javascript)
functions.js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| var i=1;
var r=0; //This variable contains the number of loaded images.
var address='images/';
function ChangeImage(){
var ourimage=document.getElementById("slideImg");
if (document.all && ourimage.filters){
ourimage.filters.revealTrans.Transition=Math.floor(Math.random()*23);
ourimage.filters.revealTrans.stop();
ourimage.filters.revealTrans.apply();
ourimage.filters.revealTrans.play();
}
if(i>3){ // Number of our images is 4.
i=0;
}
i++;
document.getElementById("slideImg").src = address + 'slideimage-' + i + '.jpg';
}
function SetIt(){
setTimeout("ChangeImage()",4000); // ChangeImage() function is executed each 4 seconds.
}
function startSlide() {
r++;
if(r==3){// If r reaches 3 (if third image was loaded) then show the first image and set the timer for starting the slideshow with SetIt() function.
document.getElementById("slideDiv").innerHTML='';
document.getElementById("slideDiv").innerHTML='<img id="slideImg" src="' + address + '/slideimage-1.jpg" width="370" height="200" border="0" style="filter:revealTrans(duration=1,transition=12)" onload="SetIt();" />';
}
} |
style.css: Click to Read Complete Article »
Recently Typed