I'm having css problems

[Mike]

test site

The css isn't working at all
$('#spy').css({
"border-top":"2px solid #fff",
"border-bottom":"2px solid #fff",
"border-left":"2px solid #fff",
"border-right":"2px solid #fff"
});
Could someone help please?

[Todge]

Oct 14, 2023 11:47:06 GMT -8 Mike said:

test site

The css isn't working at all
$('#spy').css({
"border-top":"2px solid #fff",
"border-bottom":"2px solid #fff",
"border-left":"2px solid #fff",
"border-right":"2px solid #fff"
});
Could someone help please?

First up, you do not need to style each side of a cell separately if they are all the same, and is there a reason why you are trying to apply the CSS using jQuery?

Try adding this to your forums' CSS Style Sheet instead..

#spy { border: 2px solid #fff; }

[Mike]

Todge
Short hand does not work either but I would like to do this in jQuery only. The css that I have is separate for now.I did a search and found short hand will not work in jQuery

[Todge]

Oct 15, 2023 3:40:23 GMT -8 Mike said:

Todge
Short hand does not work either but I would like to do this in jQuery only. The css that I have is separate for now.I did a search and found short hand will not work in jQuery

OK, jQuery it is, but jQuery will certainly accept CSS shorthand..

Give this a go..

$('#spy').css('border', '2px solid #fff');

Or...

$('#spy').css('cssText', 'border: 2px solid #fff !important');

Or even...

$('#spy').attr('style', 'border: 2px solid #fff !important');

[Mike]

Todge
Thanks for the reply
I'll try the examples you've suggested.
I want to do this as a standalone plugin.
It's a learning process for me.
Bless you

[Todge]

Oct 15, 2023 6:34:51 GMT -8 Mike said:

Todge
Thanks for the reply
I'll try the examples you've suggested.
I want to do this as a standalone plugin.
It's a learning process for me.
Bless you

No worries, and good luck.

[Mike]

Todge
None of the suggestions worked.

[Chris]

Just a heads up, your code is experiencing a fatal (syntax) error. This means the code failed the initial pass that is intended to validate that the code is well-formed, so the code did not even attempt to execute. The error looks to be a missing closing single quote on the line that applies the CSS:



Missing closing quote:

$('#spy').style.border('border: 2px solid #fff');

You're also getting confused between the jquery way and the native javascript way.

For jquery, this is the way as Todge pointed out:

$('#spy').css('border', '2px solid #fff');

or...

$('#spy').css({'border': '2px solid #fff'});

the second form allows for setting multiple property values in a single call by adding additional CSS property names as the key and CSS property values as the key value.

[Mike]

Chris
I tried it and it doesn't work.
I left a link one the first post.
The plugin is called art,can you please
Take a look at it for me?
Thanks in advance

[Chris]

Mike attach div#spy to the DOM before attempting to style it.

Move the $('.cosmo').append (newEle); above the line that sets the border

---

Edit:

Mike , I see you moved the line as suggested but inexplicably removed the newEle variable holding the div from the line. If I place a breakpoint then issue the original line so the element properly attaches to the DOM, then the style applies correctly.



Note that until you attach that element to the DOM your only reference to it would be the variable in which you saved it. There will be no element with an id of spy anywhere on the DOM to be returned in a lookup call and by the same token styling offstage (not yet attached to the DOM) can be browser-specific with some "optimizing" by ignoring styling commands on items not even attached to the DOM yet.

[Mike]

Todge
Chris
Thanks for your help

[Mike]

Chris
I would like to set my own variables to the jquery css.

$('#text').css("font-size", pb.plugin.get('news_ticker').settings.basic_setup.text_size+"px");


but it's not working, can I get some help please?

[Chris]

Oct 22, 2023 9:11:41 GMT -8 Mike said:

Chris
I would like to set my own variables to the jquery css.

$('#text').css("font-size", pb.plugin.get('news_ticker').settings.basic_setup.text_size+"px");


but it's not working, can I get some help please?

Mike , I'm not sure what "set my own variables to the jQuery CSS" means, you would need to offer some context first.

There is nothing with the id of text on your test page, and there is no "news_ticker" plugin active on the page, but the code is trying to access the news_ticker data. Unless there is something I am missing, that should not be really working.

The only plugin I see has an identifier of "message_marquee":