Click on White Space

[Drawn]

Looking at my test website: www seemyinvestments com

You will see that you can click on certain elements (see attach.).

In the attachment, you can click on the word, JFactory, and on the method, getApplication (in green letters).

I want the user to also click on the line (the third hand-pointer).

Below is the code for that one line highlighted in the attachment:

<li
 style="background: rgb(252, 252, 252) none repeat scroll 0%; font-family: 'Courier New',Courier,monospace; color: black; font-weight: normal; font-style: normal; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;"
 id="geshi-7f8f-8"><div
 style="font-family: 'Courier New',Courier,monospace; font-weight: normal;"><span
 style="color: rgb(0, 0, 255);">$mainframe</span> =&amp; <input
 name="JFactory"
 value="C:\Programs\Tools\PHP\XAMPP\htdocs\joomla_development\JoomlaSource\libraries\joomla\factory php"
 type="hidden"><a href="#"
 onclick="submitSource('JFactory');"><span>JFactory</span></a>::<span
 style="color: rgb(0, 102, 0); cursor: pointer;"
 onclick="clickSource('getApplication:d094a21bb8bcbf87ca2605e051d13ab4');">getApplication</span><span
 style="color: rgb(102, 204, 102);">(</span><span
 style="color: rgb(255, 0, 0);">'site'</span><span
 style="color: rgb(102, 204, 102);">)</span>;</div></li>

I suspect I will need to 'fill in' the rest of the line with white space and implement an 'onclick' tag.

The question is how do I put in the right amount of space for each line?

You know what I mean?

I know, I know, there's way too much inline styles in the code!

I will have to talk with the programmer who did that as CSS would be preferred.

Thanks.

[ShawnsITSolution]

The best thing to do here is this.

Are you familiar with CSS? If so you need to define a css class for your white space and then give it a height and width. This should do what you need to be done.

If you are not familiar with CSS there are ton of tutorials online.

[Erik J]

You can try wrap the rest of the line at right in the anchor and display block to make it extend the whole line. To keep it one line you also need to float the first part of the line that is not in the anchor:

<li style="overflow:hidden; background: rgb(252, 252, 252) none repeat scroll 0&#37;; font-family: 'Courier New',Courier,monospace; color: black; font-weight: normal; font-style: normal; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;" id="geshi-7f8f-8">
	<span style="float:left; padding-right:.6em"><span style="color: rgb(0, 0, 255);">$mainframe </span> =&amp; </span>
	<input name="JFactory" value="C:\Programs\Tools\PHP\XAMPP\htdocs\joomla_development\JoomlaSource\libraries\joomla\factory php" type="hidden">
	<a style="display:block" href="#" onclick="submitSource('JFactory');">
		<span>JFactory</span>::
		<span style="color: rgb(0, 102, 0); cursor: pointer;" onclick="clickSource('getApplication:d094a21bb8bcbf87ca2605e051d13ab4');">getApplication</span>
		<span style="color: rgb(102, 204, 102);">(</span>
		<span style="color: rgb(255, 0, 0);">'site'</span>
		<span style="color: rgb(102, 204, 102);">)</span>;
	</a>
</li>

[Erik J]

Alternatively, if the two onClicks should be separate only the "get application" will extend to the right the full line. For both the above posted and this version you don't need the wrapper-div.

<li style="overflow:hidden; background: rgb(252, 252, 252) none repeat scroll 0&#37;; font-family: 'Courier New',Courier,monospace; color: black; font-weight: normal; font-style: normal; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;" id="geshi-7f8f-8">
	<span style="float:left; padding-right:.6em"><span style="color: rgb(0, 0, 255);">$mainframe </span> =&amp; </span>
	<input name="JFactory" value="C:\Programs\Tools\PHP\XAMPP\htdocs\joomla_development\JoomlaSource\libraries\joomla\factory php" type="hidden">
	<a style="float:left; padding-right:.6em" href="#" onclick="submitSource('JFactory');">
		<span>JFactory</span>::
	</a>
	<span style="display:block; color: rgb(0, 102, 0); cursor: pointer;" onclick="clickSource('getApplication:d094a21bb8bcbf87ca2605e051d13ab4');">getApplication
		<span style="color: rgb(102, 204, 102);">(</span>
		<span style="color: rgb(255, 0, 0);">'site'</span>
		<span style="color: rgb(102, 204, 102);">)</span>;
	</span>
</li>

Or maybe this is more close to the original display:

<li style="overflow:hidden; background: rgb(252, 252, 252) none repeat scroll 0%; font-family: 'Courier New',Courier,monospace; color: black; font-weight: normal; font-style: normal; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;" id="geshi-7f8f-8">
	<span style="float:left; padding-right:.6em"><span style="color: rgb(0, 0, 255);">$mainframe </span> =&amp; </span>
	<input name="JFactory" value="C:\Programs\Tools\PHP\XAMPP\htdocs\joomla_development\JoomlaSource\libraries\joomla\factory php" type="hidden">
	<a style="float:left;" href="#" onclick="submitSource('JFactory');">
		<span>JFactory</span>
	</a>
	<span style="float:left">::</span>
	<span style="display:block; color: rgb(0, 102, 0); cursor: pointer;" onclick="clickSource('getApplication:d094a21bb8bcbf87ca2605e051d13ab4');">getApplication
		<span style="color: rgb(102, 204, 102);">(</span>
		<span style="color: rgb(255, 0, 0);">'site'</span>
		<span style="color: rgb(102, 204, 102);">)</span>;
	</span>
</li>

[Drawn]

Dangit!

I forgot to mention the third click would be for a third and separarte onclick function.

So the first click goes to one function (onclick="submitSource('JFactory');"), the second goes to, onclick="clickSource('getApplication:...etc.

The third click would go to a function called say, lineComment().

That third function is called when a user clicks on the remaining white space on that line.

How would you envision I do that?

Sorry for misleading you there.

Cheers.

[Erik J]

The third function could be styled block to extend to the line end. All parts that is to the left of the third part could be floated left. Just like I suggested in the last example for the second click that extends to the line end.

If the line is shortened and breaks, the third click will still extend to its new line end.

[Erik J]

Here is how the third click can be done extending to line end:

<li id="geshi-7f8f-8" style="zoom:1; white-space:nowrap; background:rgb(252, 252, 252) none repeat scroll 0%; font-family:'Courier New',Courier,monospace; color:black; font-weight:normal; font-style:normal; -moz-background-clip:initial; -moz-background-origin:initial; -moz-background-inline-policy:initial;">
	<span style="float:left; padding-right:.6em"><span style="color:rgb(0, 0, 255);">$mainframe </span>=&amp;</span>
	<input name="JFactory" value="C:\Programs\Tools\PHP\XAMPP\htdocs\joomla_development\JoomlaSource\libraries\joomla\factory php" type="hidden">
	<a style="float:left" href="#" onclick="submitSource('JFactory');">JFactory</a>
	<span style="float:left">::</span>
	<span style="float:left; margin-right:5px; color:rgb(0, 102, 0); cursor:pointer;" onclick="clickSource('getApplication:d094a21bb8bcbf87ca2605e051d13ab4');">getApplication
		<span style="color:rgb(102, 204, 102);">(</span>
		<span style="color:rgb(255, 0, 0);">'site'</span>
		<span style="color:rgb(102, 204, 102);">)</span>;
	</span>
	<span style="float:left; padding-right:5px; color:rgb(153,153,153);">//</span>
	<span style=" display:block; color:rgb(153,153,153); cursor:pointer;" onclick="lineComment();">Line comment...</span>
</li>

[Drawn]

Appreciate your help.

Noting the line:

"onclick="lineComment();">Line comment...</span>
</li>"

I don't want the words, Line comment....

I want the user to simply click on the space (what appears to be nothing) on the rest of the line.

Is that not possible?

"onclick="lineComment();">SPACE(12)</span>
</li>"

Does HTML not have a means to have 'clickable space'. LOL.

Weird, I know, but that's what I'm after.

I mean, would it be something like the following:

<span "onclick="lineComment();">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.....etc.</span>


Regards,

[Erik J]

It was just an example.

<span style=" display:block; color:rgb(153,153,153); cursor:pointer;" onclick="lineComment();"></span>

...is perfectly ok, the emty span will extend too as it is block displayed.