Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Javascript Padding

Posted on 2011-10-15
16
Medium Priority
?
194 Views
Last Modified: 2012-05-12
Hi Guys,

I have some text coming from a database and I need to style it, The problem is I need to add padding to the left and right side, and I need the text to obey the line break.

Here is my example

http://jsfiddle.net/JbUXg/

Notice the end of line 1 and the start of line two, both need to have the 15px pad. How should I approach this.

John
0
Comment
Question by:john_yourspace
  • 10
  • 5
16 Comments
 
LVL 29

Expert Comment

by:sammySeltzer
ID: 36974798
I don't know for sure if you are trying to pad left or right or both but one thing I know is that you would have been better with css like this:

http://cssdog.com/css_padding.html
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36974845
This is close, but you'll get extra blue on the right depending on text length.

http://jsfiddle.net/JbUXg/16/

Theoretically, you need to find out where the text breaks and add the padding programmatically. Not sure how to do that off the top of my head. But does that sound like what you're looking for?

Actually, it would be nice to see a screenshot of what you would like to achieve.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36974852
You could "split" the text with js, and then add padding to each new text node. That would do it. It would give you a result kind of like this:

the resulting effect
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:john_yourspace
ID: 36975712
Hi guys,

Thank you for your answers, I have provided a screen shot of what I am trying to do,

The text is variable in length, so when it wraps it needs to look as below

pic with wrap

pic without

Both are the same section with variable lenght text
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36975946
Everything is in the source. Let me know if you have questions. You can of course adjust the style of the text as needed.


split string example
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36975984
won't work in IE < 9 because the section element. Unless you're using a shim or something, here's a version for IE - (sections made into divs). Also, IE7 doesn't support inline-block, so you can't use a margin to separate the lines.

split string example: IE < 9
0
 

Author Comment

by:john_yourspace
ID: 36976675
This looks to be exactly what I need is there any way to put it in a function so it will automatically apply to all elements of a certain class?
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36976692
The var title is defined with whatever class/element you want the function applied to. It's the first line in the script. See comment. (I modified the script slightly so you only have to define it once)



 
$(function(){
            
            
            var title = $("#homepage2col h2 a"); // this is the text string that gets manipulated. You can put whatever class you want here.
            var titleTxt = title.text(); 

            var newTitle = titleTxt.split(" ");
            
            title.text("");
            
            var tlen = newTitle.length;
            
            for(i = 0; i < tlen; i++){
                    
                    title.append("<span class='titleText'>"+ newTitle[i]+"</span> "); 
            };
          

        });

Open in new window

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36976695
slight clarification on the comment:

// this is the text string that gets manipulated. You can put whatever SELECTOR you want here.

the SELECTOR can be a class, id, or element.
0
 

Author Comment

by:john_yourspace
ID: 36976832
do I not need to loop through each "selector"

ie

<div class="modme">text 1</div>
<div class="modme">text 2</div>
<div class="modme">text 3</div>
<div class="modme">text 4</div>

var title = $(".modme");

This will work on all elements above?

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36976853
yes, this will work on all elements with class modme.

(essentially, the javascript does the looping automatically, to use your words...)
0
 

Author Comment

by:john_yourspace
ID: 36978976
thanks for all, the help one final question is it possible to split at the line space after say 5letters as the span is given the effect of a double space, I under stand this is how the span operates with the left and right pad, just need it to span after say 5chars where the space is

so

i say  < splits after 4 as hello is too long
hello

hello < splits after 5 as hello is 5 long
i say


stupid example I know just trying to get what i mean across

:D

J
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36979057
I'm not sure I understand your question.

Right now, the script finds each space, and splits the string into individual text nodes. It wraps each new node in a span. The span is given padding, and there is also a space between each span so that the whole thing can wrap inside a given width.

This graphic illustrates this:
illustrates model
and this is what the html output looks like:
html output


It's not the perfect solution. It would be nicer if you could find the end of the line, and only wrap each line in a span, but that would be a lot more complicated to write.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36979137
here is a modified version in which there is padding only on the left, except for the last span, which has padding on the right as well.

modified padding

model illustration
It's still not perfect, but maybe a little better.  
0
 

Author Comment

by:john_yourspace
ID: 36985270
Hi kozaiwaniec,

I need the script to do the following

Char Limits:
 
h2: 13 chars/line
h3: 16 chars/line


So the script should check for chars, backup to the nearest space(so it doesn't break the word) and output the following:

<h2><span>abcdefghijklm</span><span>
abcdefghijklm</span></h2>

<h3><span>abcdefghijklmnop</span><span>
abcdefghijklmnop</span></h3>


thanks for all you help

John
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 37000434
this is just for the h2, but have a looksee:

http://candpgeneration.com/EE/EE-split-string.php

We'll have to modify to accomodate multiple selectors...
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Suggested Courses

572 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question