Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Add eclipseies after some letter in Phone gap

Hi

 

I want to add eclipseies   after some letter , can you suggest me.?

 

 

var tbl = document.getElementById('mainBodyDivContent');
	//tbl.innerHTML = "";
	for (var i = 0; i <r.length-1; i++) {
		var tr = document.createElement('tr');
		tr.setAttribute('id', i);
		(function(id) {
			tr.onclick = function() {
				if(myScroll.isScrolling) {return;}
//window.clearTimeout(myTimedCall);
//window.clearInterval(myTimedCall);
		 window.location.href="route.html?RID="+r[id].RID+"&StationCode="+stationCode;
			};
		}(i));
		
		var td1 = document.createElement('td');
		td1.setAttribute('width', '10%');
		td1.setAttribute("align","center");
		td1.innerHTML = r[i].platformNo;;
		
		var td2 = document.createElement('td');
		td2.setAttribute('width', '40%');
		td2.setAttribute("align","center");
		td2.innerHTML = r[i].schDepart + " - " + r[i].expDepart;;
		
		var td3 = document.createElement('td');
		td3.setAttribute('width', '40%');
		td3.setAttribute("align","center");
*************************i want to add eclipseies   if stationName is more than 10 char is show dot.....*********
		td3.innerHTML = r[i].stationName + " (" + r[i].crsCode + ")" ;;
		

 

Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Add eclipseies after some letter in Phone gap

What do you mean by "eclipseies"? Can you explain a little bit?


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Add eclipseies after some letter in Phone gap

Maybe you want to clip the text if to long and show eg.:

 

text-overflow: clip ellipsis;

like explained in MozDev Network for text-overflow? Have a closer look to this page and give it a try. It might or might not yet supported on mobile devices.


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: Add eclipseies after some letter in Phone gap

sorry .ellipsis if you have big word than only show some character with dot..
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: Add eclipseies after some letter in Phone gap

can i used this td3.setAttribute('text-overflow','ellipsis');
Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Add eclipseies after some letter in Phone gap

I think you can't use setAttribute for the text-overflow since it is a CSS style attribute so you need to use CSS file to assign it or you could use something like this:

 

td3.setAttribute('style', 'text-overflow: ellipsis;'); 

or if you want to use more than only the text-overflow style I recommend something like this:

 

td3.style.textOverflow = 'ellipsis';
td3.style.whatEver = 'whatEver'; // to add "one" more style

 


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: Add eclipseies after some letter in Phone gap

ok sir thanks,,

Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: Add eclipseies after some letter in Phone gap

can you remove my caching problem in other post.

 

Thanks

Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: Add eclipseies after some letter in Phone gap

No working............Smiley Sad

 

on body load  <body onload="GetDepartureStationDashboard()"> this function..

function GetDepartureStationDashboard()
  		{      
	  		
	  		document.getElementById('loadingImg').style.visibility = "visible"; 
		     var pl = new SOAPClientParameters();
		     var params = getParams();
		     var parameter1 = unescape(params["getStationCode"]);
		     stationCode=parameter1;
		     var parameter2 = unescape(params["getStationDesc"]).replace(/[+]/g," ");
		     document.getElementById("headingcontent").innerHTML = parameter2;
		     pl.add("parameter1", parameter1);
		     SOAPClient.invoke(WSDLURL, "GetDepartureStationDashboard", pl, true, GetDepartureStationDashboard_callBack);
  		}




function GetDepartureStationDashboard_callBack(r)
{
	document.getElementById('loadingImg').style.visibility = "hidden";
	var tbl = document.getElementById('mainBodyDivContent');
	//tbl.innerHTML = "";
	for (var i = 0; i <r.length-1; i++) {
		var tr = document.createElement('tr');
		tr.setAttribute('id', i);
		(function(id) {
			tr.onclick = function() {
				if(myScroll.isScrolling) {return;}
//window.clearTimeout(myTimedCall);
//window.clearInterval(myTimedCall);
		 window.location.href="route.html?RID="+r[id].RID+"&StationCode="+stationCode;
			};
		}(i));
		
		var td1 = document.createElement('td');
		td1.setAttribute('width', '10%');
		td1.setAttribute("align","center");
		td1.innerHTML = r[i].platformNo;;
		
		var td2 = document.createElement('td');
		td2.setAttribute('width', '10%');
		td2.setAttribute("align","center");
		td2.innerHTML = r[i].schDepart;
		
		
		var td3 = document.createElement('td');
		td3.setAttribute('width', '5%');
		td3.setAttribute("align","center");
		td3.innerHTML ="-";
		
		var td4 = document.createElement('td');
		td4.setAttribute('width', '10%');
		td4.setAttribute("align","center");
		td4.innerHTML =r[i].destSchArrival;
		**************No dot come if word is bigger******
		var td5 = document.createElement('td');
		td5.setAttribute('width', '10%');
		td5.setAttribute("align","center");
		td5.setAttribute('style', 'text-overflow: ellipsis;');
		td5.setAttribute('style', 'overflow: hidden;');
		td5.setAttribute('style', 'white-space: nowrap;');
		td5.innerHTML = r[i].stationName;
		
		
		var td6 = document.createElement('td');
		td6.setAttribute('width', '15%');
		td6.setAttribute("align","center");
		td6.setAttribute('style', 'text-overflow: ellipsis;');
		td6.innerHTML =" (" + r[i].crsCode + ")" ;;
		
		var td7 = document.createElement('td');
		td7.setAttribute('width', '20%');
		td7.setAttribute("align","center");
		
		var td8 = document.createElement('td');
		td8.setAttribute('width', '20%');
		td8.setAttribute("align","center");
		td8.setAttribute('style', 'text-overflow: ellipsis;');
			if(r[i].schDepart == r[i].expDepart)
	{
		td7.innerHTML = "<img src=\"images/correct-icon.png\" width=\"20\" height=\"20\" />";
		td8.innerHTML="";
	}
	else 
	{
		td7.innerHTML = "<img src=\"images/error.png\" width=\"20\" height=\"20\" />";
		td8.innerHTML=r[i].expDepart;
	}
		
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
		tr.appendChild(td4);
		tr.appendChild(td5);
		tr.appendChild(td6);
		tr.appendChild(td7);
		tr.appendChild(td8);
		
		
		tbl.appendChild(tr);
	}

 

Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Add eclipseies after some letter in Phone gap

The first issue is, you are not reading the posts other wrote, since I wrote something like the following isn't possible or not in that way:

 

...
td5.setAttribute('style', 'text-overflow: ellipsis;');
td5.setAttribute('style', 'overflow: hidden;');
td5.setAttribute('style', 'white-space: nowrap;');
...

It needs to be like this:

 

td5.setAttribute('style', 'text-overflow: ellipsis; overflow: hidden; white-space: nowrap;');

or you need to use the style.* functionality to do so:

 

// untestet, you need to know if the style.* are available for mobile devices
td5.style.textOverflow = 'ellipsis';
td5.style.overflow = 'hidden';
td5.style.whiteSpace = 'nowrap';

Every time you use the setAttribute function it will overwrite the style in your example and only the last one with "white-space" will be used.

 

On the other hand you need to know if the CSS style "text-overflow" is supported on your mobile OS's by default. If not you need to use something else to make it working. For example you could use the length of the innerHTML text you are assigning.

 

 

 

 

 


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.