XF 2.1 Adding javascript to header CSS

Britney

Member
So I'm trying to add javascript to my header, but it does not seem to work.
Is there a specific file that you need to place the javascript in or how does it work?

I've tried searching, but the only answer I came up with was that it is suppose to work in PAGE_CONTAINER, but that is not the case for me.

This is the code I'm trying to use:
 

frm

Well-known member
Have you tried putting your JS in PAGE_CONTAINER (unsure on placement or if it matters but I'd try at the top [line 1] first) like this?
Code:
<xf:js>
JAVASCRIPT SEEN ON JS TAB HERE
</xf:js>
And CSS
Code:
<xf:css>
CSS SEEN ON CSS TAB HERE
</xf:css>
 

Britney

Member
Thanks for the reply, the script loads perfectly now!

Onto next problem :D
I've inserted the code as shown below but the Javascript won't work

JavaScript:
<xf:js>
    function randombg(){
        var random= Math.floor(Math.random() * 4) + 0;
        var bigSize = ["url('/ruthstorage/background/bg-1.jpg') !important",
            "url('/ruthstorage/background/bg-2.jpg') !important",
            "url('/ruthstorage/background/bg-3.jpg') !important",
            "url('/ruthstorage/background/bg-4.jpg') !important"];
        document.getElementById("p-header").style.backgroundImage=bigSize[random];
    }
</xf:js>

CSS:
<xf:css>
    .p-header {
        background-image: url('/ruthstorage/background/bg-1.jpg') !important;
        background-position: center center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }
</xf:css>

Anyone has any idea what is wrong?
 

frm

Well-known member
Thanks for the reply, the script loads perfectly now!

Onto next problem :D
I've inserted the code as shown below but the Javascript won't work

JavaScript:
<xf:js>
    function randombg(){
        var random= Math.floor(Math.random() * 4) + 0;
        var bigSize = ["url('/ruthstorage/background/bg-1.jpg') !important",
            "url('/ruthstorage/background/bg-2.jpg') !important",
            "url('/ruthstorage/background/bg-3.jpg') !important",
            "url('/ruthstorage/background/bg-4.jpg') !important"];
        document.getElementById("p-header").style.backgroundImage=bigSize[random];
    }
</xf:js>

CSS:
<xf:css>
    .p-header {
        background-image: url('/ruthstorage/background/bg-1.jpg') !important;
        background-position: center center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }
</xf:css>

Anyone has any idea what is wrong?
Adding onload="randombg()" to your opening <body> tag in PAGE_CONTAINER ought to do the trick now.
 

Britney

Member
Adding onload="randombg()" to your opening <body> tag in PAGE_CONTAINER ought to do the trick now.
Thanks for helping me out, I appreciate it! It still doesn't work I'm afraid.

When I check the console I can see the script within the <head> tag and on the opening of <body> I can see the onload.
So it's all there, but still won't work for some reason 😕
 

frm

Well-known member
I might not be looking at the right forum (in your "about"), but, you have no element with the ID p-header, which could be the issue.
 

Britney

Member
I might not be looking at the right forum (in your "about"), but, you have no element with the ID p-header, which could be the issue.
It's a different theme that I'm testing on. So that's the reason.

Everything is there, it's really strange that it won't work.

205051
205052
205053
205054
 

frm

Well-known member
You might need to change p-header to header if this is the one you're trying to change:
<header class="p-header" id="header">

Otherwise, you're looking for getElementByClassName (p-header) over getElementById (header).
 

frm

Well-known member
document.getElementById("header").style.backgroundImage=bigSize[random];

The above change in your <xf:js></xf:js> should do the trick.
 

Britney

Member
document.getElementById("header").style.backgroundImage=bigSize[random];

The above change in your <xf:js></xf:js> should do the trick.
Hmm, tried both but it won't work.
I do really appreciate the help as I'm not that good with javascript.
Could it has something to do with me theme, the way they coded it?

Edit:
Would it help you if I switched to the theme that I'm working on so you can take a closer look :)?
 
Last edited:

Britney

Member
@frm Solved everything for me, amazing!

For anyone else having the same problem or want the same result, just use:
JavaScript:
<xf:js>
    var headerImgs = ['bg-1.jpg', 'bg-2.jpg', 'bg-3.jpg', 'bg-4.jpg'];
     $("#header").attr("style", "URL-OF-YOUR-IMAGES" + headerImgs[Math.floor(Math.random() * headerImgs.length)] + ") !important; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important;");
</xf:js>

Thank you so much for fixing this for me @frm , just amazing work!
 
  • Like
Reactions: frm

frm

Well-known member
No problem, @Britney ; it was pretty fun learning and troubleshooting jQuery with you. You ought to note which theme that was for.

Also, it's important to note that attr was used over css because you were using a background image in a CSS class selector for <header> with the !important declaration. As such, any background modification would've been ignored. Thus, attr; but, it will overwrite every style attribute (as opposed to adding a new one or modifying one) so each style for <header> along with the new randomized background had to be carried back over.

One should play with css prior to attr in my opinion, because of that. But if absolutely necessary, remember that attr is going to remove all other style properties.

This should work on just about any theme with tweaks.
 
Top