CSS Overflow property.

Standard

      A few days ago I was working on the design of a website when I faced a problem. Whenever I used the images, paragraph, heading or any other tag in the HTML, the text-box the box used to break and would again continue when the tag would end. Now obviously this was making the site look ridiculous. For example, whenever we put groceries in a plastic bag more than it can withstand the bag tears up. Now tried everything to keep that text box from breaking in between, until I found this solution.

     In your CSS style sheet when you add the box, you add the following attribute,

overflow: auto;

     Now this property works fine with all the browsers and is supported by CSS 2 and above. Here I have given the overflow property’s value as auto , that is it any accommodate any number of data and if it exceeds the limits then the browser simply adds a scroll bar to it. But depending on your requirement you can use (here overflow means the extra data which cannot be accommodated inside the box):

  • visible: This one is a default and the overflow is not clipped.
  • hidden: The overflow is clipped but the rest of the content is hidden…
  • scroll: The overflow is clipped but the rest of the content can be see with the help of a scroll-bar.
  • auto: The overflow is clipped and the decision of adding a scroll-bar is left up to the browser.
  • initial: Sets this property to tis default value (visible).
  • inherit: Inherits this property from its parent element.

      The overflow property basically, decides what will happen if the box isn’t capable of holding the entire content and what if the content breaks out of the box. Here I have an example of CSS box using this property:

         .box {    
      height: 500px;     
      width: 800px;
      overflow: auto;     
      background-color: #BFCFFF;
      text-align: center;
      padding-top: 25px;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 20px;
      margin-left: 260px;
      margin-top: 100px;}

You can also use ‘div’ instead of box if you want it for other things…Also, you can change the rest of other properties like margin, padding, text-alignment depending on your requirement.

Here is a screenshot of the box working on a html page:

StarkEnterprises

    I also have a website that I made using this and a few other features that you might want to look at. To download it click here.(You need to replace the images and video paths (file-urls) in the html to the paths in your directory).

Download Server project

Advertisements

Java Math Example – Resultant of two Forces.

Standard

      The program below shows how Java can be implemented in math for several applications. In this program we determine the resultant force of two different forces acting upon a body and the angle at which it is acting. At first in order to use the math functions predefined in java we need to import a java package java.lang.Math.*;

      Let us see the working of this program, we first need three variables, two to store the magnitude of each force and the third to store the angle between them. Then we calculate the magnitude of the resultant and later in the second part we calculate the angle between them. So, here are the formulae for both operations:

  • Resultant of two forces = √( p2 + q2 + 2 × p × q × cosθ )
  • Angle made by resultant = tan-1 ( q × sinθ / p + q × cosθ )

So, now we know that we need another two variables to store each of the answers.Well this really depends on you, how precise you want to be answered, if you want your answer in decimal use double or float data-type but if you don’t want a precise one the better go with integer. Another really important thing is that Java uses angles in Radian whereas normally we use angle in Degrees. So, we also need to convert the angles in to radians before using them in the formula (or else the compiler considers 45° as 45 radians ) and convert them back again to degrees to display answer (but if you are comfortable with radians don’t include this feature).

       Very well, let us get on with the program. First we declare our five variables as doubles. Then we ask the user to enter the two forces and the angle between them. Then we read and store the input data with Scanner. Also do not forget to convert the angle to radians if you are planning to enter the angle in degrees, for that we use the function Math.toRadians(a) .

Now we arrange our functions according to the formula to find out the resultant:

     r=Math.sqrt(Math.pow(p, 2)+Math.pow(q, 2)+(2*p*q*Math.cos(a)));

For square root we use the function Math.sqrt similarly for cosine of the angle Math.cos(a) , for power we use Math.pow(p, 2) where, in the bracket we specify the variable and its power (here its square). Then we display our answer or resultant.

Note:- Make a clever and careful use of the brackets in formula, incorrect placements of the brackets may lead to a wrong answer.

        To find the angle of resultant, for time being let us neglect the tan-1 from the formula and arrange the functions accordingly.

    t=(q*Math.sin(a))/(p+q*Math.cos(a));

There is nothing much hard in this formula to deal with. For the sine and cosine angles we use the functions Math.sin(a) and Math.cos(a) respectively. Here now we consider the tan-1 from the formula. To display the tan inverse of a particular value we use the function Math.atan(t) .But keep in mind that Java uses angles in radians so to keep our program more user-friendly we convert the radians back to degrees by using the function Math.toDegrees() and display them. Here I have made this process a bit simpler and less time consuming:

System.out.println("The angle at which resultant is acting on is "+ Math.toDegrees(Math.atan(t)));

Resultant of forces-Math.java

Hope this example helps you to understand how to work with Math in Java.

  • To Download the complete source code of the program click here.

Download Maths.java project

Try coding similar program with some other formula.If you find any difficulties in understanding any part of this program, let me know by commenting below or if you have made a similar program, then send me its link and I’ll put the link in this post, thus we can share it with all!

How convert an Array to String ?

Standard

      I probably searched the internet a lot to know how to convert an array to string but wasn’t satisfied with the solution. So, I decided to come up with my own program that converts an Array to String. Still I have one problem with it but we will discuss it in the end.

      First of all we declare a variable of integer data type and ask the user to enter the array to be converted to a string .Off course you are free to enter letters, numbers or symbols even though the variable is an integer type. To read the input we create a new Reader, InputStreamReader, as it reads bytes and decodes them into characters using a specified charset, and use a ‘while loop’. Now why use integer? So that the read() method reads a single character one at a time. To specify when our input stream ends we use the condition ‘not equal to’ with the help of while loop. Here to terminate the stream, I am going with whitespace but you can try anything.

        Now here comes the main part of this program. To actually convert our input Array into string we use the predefined function in Java which does this for us, Character.toString(ch)

Thus our program converts each character of the array to string. You can also display the ASCII values of the data to check if the program works or not. Here is the part form while loop:

        while((r=reader.read())!=’ ‘){
           char ch=(char) r;               
         //System.out.println("The ASCI value "+r);                 
           System.out.println(Character.toString(ch));}

        Now the real problem with this program is that it converts the given array input in to string, one by one or letter by letter (if you say so) and not the complete input as a whole. If someone figures out how to do this then please let me know by commenting below or send me an email: shirishkadam35@yahoo.com and then we can accordingly update this program making it even better!

Output Window:

shirish-ats

  • Download the source code of this complete program here.

Download Array to string project

Check out my other post on How to convert a String to an Array.