Css is set in jquery

Question

I have the following code:

function MyFitText2(width, height, span) {
    var fontSize = 20;
    $(span).css('font-size', fontSize);
    do {
        fontSize = fontSize - 1;
        textHeight = $(span).height();
        textWidth = $(span).width();
        $(span).css('font-size', fontSize);
    } while ((textHeight > height || textWidth > width) && fontSize > 1);
}

and use:

var pinkboxspan = "<span style=\"position:absolute; left:" + $thisPinkBox["PinkBoxLeft"] + "px; top:" + $thisPinkBox["PinkBoxBoxTop"] + "px; " +
                        "text-align:left; font-weight: bold; color: red; background: linear-gradient(rgba(255, 215, 15, 0.5),rgba(255, 215, 15, 0.5));" +
                        "line-height:1.1; " +
                        "\">" + text + "</span>&nbsp;";

MyFitText2($thisPinkBox["PinkBoxWidth"], $thisPinkBox["PinkBoxHeight"], pinkboxspan);
$(pinkboxspan).css('width', $thisPinkBox["PinkBoxWidth"] + 'px');
$(pinkboxspan).css('height', $thisPinkBox["PinkBoxHeight"] + 'px');

but in result:

<span style="position:absolute; left:870px; top:413px; text-align:left; font-weight: bold; color: red; background: linear-gradient(rgba(255, 215, 15, 0.5),rgba(255, 215, 15, 0.5));line-height:1.1; ">Sergey's Office
<br>Y Amphitheatre Parkway
<br>Mountain View, CA XXXXX
<br>United States
<br></span>

then I add it to DOM by the following way:

var imageElement = $("<div style='text-align:left;'><div style='position: relative; display: inline-block;'><img style='position: relative; vertical-align: central;' src='" + $('#previewImage').attr('src') + "' /></div></div>");

var divElement = imageElement.find('div');

var divContent = '';
     // code above in $.each
     divContent = divContent + pinkboxspan;

divElement.append(divContent);

$('#divOverlay').html(divElement);

so, parameters width/height are not set. Why and how to solve it?

Where and how you are appending pinkboxspan to DOM?

Satpal
– Satpal

2017-06-02 11:25:42 +00:00
Commented Jun 2, 2017 at 11:25 — Satpal
– Satpal, Commented Jun 2, 2017 at 11:25
@Satpal, yes, you asked how I add it to DOM, I show code

Oleg Sh
– Oleg Sh

2017-06-02 12:43:37 +00:00
Commented Jun 2, 2017 at 12:43 — Oleg Sh
– Oleg Sh, Commented Jun 2, 2017 at 12:43

Satpal · Accepted Answer · 2017-06-02 12:44:28Z

1

You are creating jQuery object which is not persisted and manipulating its CSS rules, thus modified CSS properties are not reflected.

Create a jQuery object and use it through out code.

var span = $(pinkboxspan);
span = MyFitText2($thisPinkBox["PinkBoxWidth"], $thisPinkBox["PinkBoxHeight"], span);
span.css('width', $thisPinkBox["PinkBoxWidth"] + 'px');

//if you need string
pinkboxspan = span.prop('outerHTML');

function MyFitText2(width, height, span) {
    span.css('font-size', 20);
    //Manipulate Span properties
    return span;
}

edited Jun 2, 2017 at 12:44

answered Jun 2, 2017 at 11:29

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Steve Sales · Accepted Answer · 2017-06-02 11:45:30Z

0

Create the jquery object in the begining so change your pinkboxspan assignment to...

var pinkboxspan = $("<span style=\"position:absolute; left:" + $thisPinkBox["PinkBoxLeft"] + "px; top:" + $thisPinkBox["PinkBoxBoxTop"] + "px; " +
                    "text-align:left; font-weight: bold; color: red; background: linear-gradient(rgba(255, 215, 15, 0.5),rgba(255, 215, 15, 0.5));" +
                    "line-height:1.1; " +
                    "\">" + text + "</span>&nbsp;");

then make changes to the other code to use pinkboxspan as a jquery object and not plain text...

MyFitText2($thisPinkBox["PinkBoxWidth"], $thisPinkBox["PinkBoxHeight"], pinkboxspan);
pinkboxspan.css('width', $thisPinkBox["PinkBoxWidth"] + 'px');
pinkboxspan.css('height', $thisPinkBox["PinkBoxHeight"] + 'px');

make changes to your function as well...

function MyFitText2(width, height, span) {
    var fontSize = 20;
    span.css('font-size', fontSize);
    do {
        fontSize = fontSize - 1;
        textHeight = span.height();
        textWidth = span.width();
        span.css('font-size', fontSize);
    } while ((textHeight > height || textWidth > width) && fontSize > 1);
}

And you're done :)

answered Jun 2, 2017 at 11:45

Steve Sales

863 bronze badges

2 Comments

Oleg Sh Over a year ago

how can I add it to my DOM then?

Steve Sales Over a year ago

Select the element you want to add it to using the appropraite JQuery selector and use the append method, eg. $("body").append(pinkboxspan)

Collectives™ on Stack Overflow

Css is set in jquery

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related