SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Click on White Space

    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:
    Code:
    <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.
    Attached Images Attached Images

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <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>
    Happy ADD/ADHD with Asperger's

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    <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:
    Code:
    <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>
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    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.

  6. #6
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Happy ADD/ADHD with Asperger's

  7. #7
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is how the third click can be done extending to line end:
    HTML Code:
    <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>
    Happy ADD/ADHD with Asperger's

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2009
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    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,

  9. #9
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It was just an example.
    Code:
    <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.
    Happy ADD/ADHD with Asperger's


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •