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 ->
This article is short but inculding very useful information. A few years ago, we web programmers are used to make these operations via javascript. However, this wasn’t good method because, computers were not powerful enough. Nowadays, computers are too powerfull and we don’t need to use javascript anymore! Just one thing is required for us: CSS(Cascading Style Sheet).
Look at the top-right of this page. Did you see it? Let’s see how it is done…
Structure 1.0:
1
2
3
4
5
6
7
8
9
10
| < !doctype html>
<head>
<style type="text/css">
#[DIV_ID]{
position:fixed;
top:[margin-top];
right:[margin-right];
left:[margin-left];
bottom:[margin-bottom];
}</style></head><body><div id="[DIV_ID]"></div></body> |
Example 1.0: Assume that we have a div named Click to Read Complete Article »
We usually add icons to our web pages. There are a lot of different ways for doing this. For example: We can use background image, we can use unique small image files (Usually, this method is used). However, we will use the best method. Namely, Image Cropping Method using CSS.
This method makes faster our web pages. If we use many unique small image files, number of requests (that we sent to server for each image) will increase. So, loading images takes long time. However, if we use single image including all icons, size of image will increase but number of requests will decrease.
We have an image file named icons.jpg.
Original view of icons.jpg:
Structure 1.0: Click to Read Complate Article »
In this article, we are going to answer those questions:
- How to set position of background image in css?
- How to position background image using css?
- Can i set position of background image with css?
- Can css position background-image of a div?
Actually, there is a short method to do this. Look at structure 1.0:
Structure 1.0:
1
2
3
4
| #[DIVID] {
background-image:url([image url]);
background-position:[Horizontal position] [Vertical position]
} |
Example 1.0: Assume, we have a div named “ourdiv” and an image named “ourimage.jpg”.
1
2
3
4
5
6
| #ourdiv {
width: 86px;
height: 30px;
background-image: url(ourimage.jpg);
background-position: right top;
} |
Original view of ourimage.jpg:
It’s size: 259×202px
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 »
Generating random numbers is very important in programming. It’s difficult as much as it’s important. Actually, there is nothing random. A number, which is choosen according to some criterias (mostly time), is used in some functions, then a random number is given (for us) by those functions…
Let’s start.
Structure 1.1: We will need three libraries. (stdio.h,stdlib.h and time.h)
1
2
3
4
5
6
7
8
| #include <stdio.h>
#include <stdlib.h>
#include <time.h>
main(){
srand((unsigned)time(0)); /* this function is used to generate a different number for each time we call rand() function */
rand() % MaxNum; /* The MaxNum is our maximum limit. */
} |
Formula: 0 <= result < MaxNum
Example 1.1: This using gives us a random number between 0(included) and 100(excepted).
1
2
3
4
5
6
7
8
9
| #include <stdio.h>
#include <stdlib.h>
#include <time.h>
main(){
srand((unsigned)time(0));
printf("The generated random number: %d",rand() % 100);
getch();
} |
getch() function is used to see the result before the command screen closed and only exist on dos based operating systems. We could use the system(”pause”) function instead of it.
Don’t forget! In the cyber world, there is not random. I think, in the real world is too…
Generating random numbers is very important in programming. We have to use random numbers to show a random record (Image, Saying, Article etc.) on our pages. Also, we can use random numbers for everything that we can imagine. In this article, we will see easiness of generating random numbers with PHP.
Structure 1.0: This is basic statement(void function) and we don’t determine nothing like maximum or minimum limit.
Example 1.0:
Probable Output of Example 1.0:
1.1) Generating a Random Number Between Two Numbers
Structure 1.1: If we want to generate Click to Read Complete Article »
Generating random numbers is very important in Javascript like other programming languages… JavaScript adds dynamism to our html pages. For example: If you want to add a slideshow that is arranged in order at random to your page, you need to generate a random number. In this article, we will see to generate a random number by using Javascript.
Structure 1.0: This is basic statement and we don’t determine nothing like maximum or minimum limit. A float number is generated which falls between 0 and 1.
Example 1.0: Let’s get output.
1
| document.write(Math.random()); |
Probable Output of Example 1.0:
1.1) Generating a Random Number Between Two Numbers
Structure 1.1: If we want to generate Click to Read Complete Article »
Generating random numbers is very important in programming. We have to use random numbers to show a random record (Image, Saying, Article etc.) on our pages. Also, we can use random numbers for everything that we can imagine. In this article, we will see easiness of generating random numbers with ASP.
Structure 1.0:
1
2
3
4
| < %
randomize
response.write int(rnd*MaxNumber)
%> |
Formula: 0 < = result < MaxNumber
At line 2, randomize statement is used to generate a different number for each time we call the rnd() function.
At line 3, a random number was generated between 0 and MaxNumber variable but except the MaxNumber’s value, was converted integer with int() function and was printed. Let’s make an example.
Example 1.0: This usage gives us a random number between 0 and 100 but except 100. Minimum value of generated number can be Click to Read Complete Article »
Recently Typed