Tag: jsp
Nabin Nepal (Starx) ascii html java jsp string
August 16, 2012

Difference between   and  

Question by Ketan

KetanKetan

Can any one explain me difference between   and   ?

I have html data stored in database in binary form and space in that can be either of   or   or sometimes  .

Also issue is when I convert this HTML to plain text using JSoup lib it is converting it properly but if I use String.contains(my string) method of java. It looks like the HTML data which is having   is different from which is having  . String is not found in either vice versa.

Example:

HTML1 : This is my test string

HTML2 : This is my test string

If I convert it to plain text using JSoup. It returns

HTML 1 : This is my test string

HTML 2 : This is my test string

But still both string are not same. Why is it so?

Answer by strnk

strnkstrnk

  is the classic space, the one you get when you hit your spacebar, represented by his HTML entity equivalent.

  and   represents the non-breaking space, often used to prevent collapse of multiple spaces togethers by the browser :

"    " => ” ” (collapsed into only one space)

"    " => ”    ” (not collapsed)

If you are parsing a string containing both classic and non-breaking spaces, you can safely replace one by the other.

Answer by Starx

StarxStarx

 , is just a space character nothing more. Regular occurrence of this character will collapse to one space character at the end.

Where as &#160 and   both represent non-breaking space character and if they occur continuously one after another, they will be collapse or break to one space character.

Only, difference between them is that &#160 is the HTML number and   is a HTML name.

Basically all of these are HTML entities. You can learn and know about them, seeing the following links.

  1. Link 1
  2. Link 2
Nabin Nepal (Starx) css html jsp
May 4, 2012

How to achieve cellpadding with divs or likeiwse?

Question by Nick Rosencrantz

Nick RosencrantzNick Rosencrantz

I want a layout almost exactly like the table layout but I understand I should use divs instead to achieve this layout with spacing between elements:
enter image description here

My code that does the above is

<div class="fl20">Personen är sökande i:</div>
        <div class="fl450">
        <table border="0" cellpadding="10"><tr><td>
        <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="alla">Alla länder
        </td><td>
        <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="alla_utom_usa">Alla utom USA
        </td><td>
        <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="endast_usa">Endast USA
        </td><td>
        <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="land"><input type="text" size="12" value="<%= editPerson.getReferens() %>" name="<%= PandoraFieldConstants.FIELD_REFERENS %>">
        </td></tr>
        </table>
        </div>

Now the label row and the fields row don’t align the same so I want to remove the table and use divs instead for a better solution but when I use divs instead the fields display each on a new row. How should I do it? My CSS is

*  {font-family:arial;}

.avnamn{ 
                color: #90002b; 
                font-size: 140%; 
                display: inline; 
                vertical-align: 3%; 
                margin-left: 1%;
                }

.b{border:1px solid #000;}

.readonly{background-color: #CCC;}

.Webdings{
    font-family: Webdings;
    }

ul{margin-top: 0px}

.mt3{margin-top:-3px;}
.mt5p{margin-top:5px;}

.fontS80 {font-size: 80%;} 
a:link{color:#000; text-decoration:none; }
a:visited{color:#000; text-decoration:none; }
a:hover{color:#000; text-decoration:none; }
a:active{color:#000; text-decoration:none; }

.fontS75 {font-size: 75%;} 

.link{color: #003366;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;}

.link_sm{color: #003366;
    text-decoration: underline;
    cursor: pointer;}

.link_sm{font-size: 70%;cursor: pointer;}

.small{font-size: 75%;}

.smallg{font-size: 75%;
color: #555;}

.ssmall{
    font-size: 65%;
    font-weight: bold;
    color: #555;
}
.small60{font-size: 60%;}
.small50{
    font-size: 50%;
    color: #333;
}
.smallb{font-size: 85%;}
table{display:inline;}

h1{font-size: 130%;display:inline;}
h2{font-size: 100%;display:inline;}
h3{
    font-size: 80%;
    display:inline;
    font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}
h4{font-size: 70%;display:inline;}
h5{
    font-size: 80%;
    display:inline;
    font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}

.hthin{
    font-size: 125%;
}

.th {text-align: left;}

td, th{font-size: 75%;
    vertical-align: text-top;}
.td_link{cursor: pointer;}
.td40{height:40px;}
.td60{height:60px;}



.thkant{
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: 70%;
        text-align: left;
}

.labb{F0F0E3; c1c1b3 }

.bb{border-bottom: 1px solid #000;}
.bbV{border-bottom: 1px solid #FFF;}
.TB_nbA {background-color:#CCC;}
.TB_bt, .TB_nb, .TB_db, .TB_bb {background-color:#efefdc;}

.hk {background-color:#d9ddb3;}

.hknot {background-color:#f9faf2;}
/*<!--F8F8F1-->*/
.TB_bt{border-top: 1px solid #FFF;}
.TB_bt5{border-top: 5px solid #FFF;}
.TB_bb{border-bottom: 1px solid #999;}
.TB_bb2{border-bottom: 2px solid #c1c1b3;}
.TB_db{border-bottom: 1px solid #000; border-top: 1px solid #000;}
.TB_tb{border-top: 2px solid #efefdc;}

.TB_bo{border: 2px solid #efefdc;}
.TB_bo_hk{border-top: 1px solid #efefdc;}


.TB_bo2{border: 1px solid #efefdc;}

.TB_bo2B{
border-top: 2px solid #c1c1b3;
border-left: 3px solid #efefdc;
border-right: 3px solid #efefdc;
border-bottom: 2px solid #c1c1b3;
}

.TD_bo{
    border-right: 1px solid #c1c1b3;
    width: 9%;
    font-size: 70%;
    text-align: center;
}

.TD_bo2{

    border-right: 0;
    width: 9%;
    font-size: 70%;
    text-align: center;
}

.ytb{
    border-left:3px solid #efefdc;
    border-right:3px solid #efefdc;
}

.datum {
    font-size: 70%;
    padding-right: 5px;
    vertical-align: text-top;} 
.sub {background:#EAEAEA;}
.sub_meny, .sub_meny_r, .sub_meny_active, .sub_meny_sm{
    font-size: 70%;
    padding-left: 20px;
    padding-right: 20px;
    vertical-align: text-top;}

.sub_meny_sm {
    font-size: 60%;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
}   

.sub_meny_r{
    float:right;
    font-size: 70%;
    padding-left: 8px;
    padding-right: 8px;}

.sub_meny_rm{margin-top:4px;}
.sub_meny_active{font-weight: bold;}

.flikkant1 {
    background-image: url(../images/fl1k.jpg);
    background-position: center;
    z-index: -1;}

.inl_namn{
    font-weight: bold;
    font-size: 70%;
    color: Black;
    text-decoration: none;}

.th{text-align: left;}
.tr{text-align: right;}

.g1{
    background-color: #FFF;
    line-height: 20px;
}

.g2{
    background-color: #EEE;
    line-height: 20px;
}

.g3{
    background-color: #DCDCDC;
    line-height: 20px;
    font-weight: bold;
    font-size: 100%;
}
.g4{
    background-color: #CCC;
    line-height: 20px;
}

.popup{
    border-color: #000; 
    border-style: groove; 
    border-width: 2px; 
    padding: 0px; 
    background-color: #FFF;
    font-size: 70%;
}

.popuphandlaggare{ 
    border-color: #000;
    border-style: groove;      
    border-width: 2px;      
    padding: 0px;      
    background-color: #FFF;     
    font-size: 70%;     
    position: absolute;     
    top: 900px; 
    }

.popupN{
    background-color: #F0F0E3;
    color: #000;
    width: 100%;
    display: inline;
    font-weight: bold;
    height: auto;
    padding: 2px;
    border-bottom: 1px solid #000;
}
.pin{padding: 6px;}

.fl10, .fl20, .fl30, .fl40, .fl50, .fl60, .fl70, .fl80, .fl90, .fl100 {
    padding-bottom:4px;color: #000000;
}

.over{
    background-color: #EFEFDC;
    line-height: 20px;
}

.half{
line-height:50%;
}

.quarter{
line-height:25%;
}

.lh10{
line-height:10%;
}

.checkmargin {margin-right: 25px;}  
.checkmarginL {margin-left: 25px;}  

.pusher {padding-left: 15px;"}
.pusherR {margin-right: 40px;"}

.rand3{background-color: #FFF; line-height: 3px;}
.rand1{background-color: #FFF; line-height: 1px;}

.whiteborder {     color: #ffffff;      border: 4px solid #ffffff;      padding: 10px;      margin: 10px; }
#details { width: 700; color: #ffffff; }
.column1 {     color: #000000; margin: 0;      padding: 0;     width: 600px;     border:0;     float: left; }
.column2 {     color: #000000;margin: 0;      padding: 0;     border:0;     width: 80px;     float: right; }

.f200 {
    color: #000000;
}

.f210 {
    color: #000000;float: left;
}
.f220 {
    width: 400;
}
.f1450 {
    width: 800;
}
.f1550 {
    width: 150;
}
.b2{border:2px solid #efefdc;}
.inp_sel{width: 80%;}


.form-bg {
  background: #eeefdf;
  width:1000px;
  overflow:hidden;
}

.data-bar {
  border-bottom:1px solid #fbfbf7;
  display:inline-block;
  padding:10px 10px;
}

.left {
float:left;
width:200px;

}

.right {
float:right;
width:700px;
}

.data-box {
width:650px;
height:100px;
border:1px solid #cbcbcb;
}
#table td { 
margin:120px; 
} 

#personName {     float:left;     width:300px;   }  #otherDetails {     float:right;     width:450px;      }

.th_rad_sort {border-bottom: 2px solid #000000;}

a img { border: 0; outline:0;}

Answer by fesh

feshfesh

CSS

.fl20{float:left; padding:5px; margin:5px; width:120px;}
.fl450{float:left; padding:5px; margin:5px; width:450px;}

HTML

<div class="fl20">Personen är sökande i:</div>
<div class="fl450">
    <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="alla">Alla länder
</div>
<div class="fl450">
    <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="alla_utom_usa">Alla utom USA
</div>
<div class="fl450">
    <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="endast_usa">Endast USA
</div>
<div class="fl450">
    <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="land">
    <input type="text" size="12" value="<%= editPerson.getReferens() %>" name="<%= PandoraFieldConstants.FIELD_REFERENS %>">
</div>

Answer by Starx

StarxStarx

I dont see why you need to use divs for something that would be more manageable in used with tables.

<table border="0" cellpadding="10"><tr><td>
        Personen är sökande i:   
        </td><td>
        <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="alla">Alla länder
        </td><td>
        <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="alla_utom_usa">Alla utom USA
        </td><td>
        <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="endast_usa">Endast USA
        </td><td>
        <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="land"><input type="text" size="12" value="<%= editPerson.getReferens() %>" name="<%= PandoraFieldConstants.FIELD_REFERENS %>">
        </td></tr>
</table>

Update: On that case still div, is not needed. See this demo using <ul> and <li>

Nabin Nepal (Starx) html javascript jsp
April 30, 2012

Eliminating warning in HTML

Question by user1221330

user1221330user1221330

I am creating 3 jsp pages. There are 4 boxes with different id in each pages (i.e. box1, box2, box3, box 4 in page 1; box 5, box6, box7, box8 in page 2; box9, box10, box11, box12 in page 3). Below is the sample code in page 1:

<div class="dragableBox" id="box1">CAT</div>
<div class="dragableBox" id="box2">DOG</div>
<div class="dragableBox" id="box3">HORSE</div>
<div class="dragableBox" id="box4">TIGER</div>

In each page there is also a script. In the script I deliberately use all those ids above as parameters of a function. Below is the sample code in page 1:

dragDropObj.addSource('box1',true);
dragDropObj.addSource('box2',true);
dragDropObj.addSource('box3',true); 
dragDropObj.addSource('box4',true); 
dragDropObj.addSource('box5',true); 
dragDropObj.addSource('box6',true); 
dragDropObj.addSource('box7',true); 
dragDropObj.addSource('box8',true); 
dragDropObj.addSource('box9',true); 
dragDropObj.addSource('box10',true);    
dragDropObj.addSource('box11',true);    
dragDropObj.addSource('box12',true);

I must do this because as far as I know this is the only way for my program to work. The problem I encounter is that each time the program started, a warning appears:
“The source element with id box5 does not exist”

Although the program still works fine with this warning, I still want to eliminate the warning.

My question here is:
How can I stop such warning from appearing?
Is there a kind of error catching method in HTML?

Answer by Starx

StarxStarx

Check the existence of element before adding them.

if (typeof document.getElementById('box5') !== 'undefined'){
    // continue
}
...

Please fill the form - I will response as fast as I can!