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:
 
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>
 
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?
 
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.
 
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 😕
 
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.
 
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).
 
document.getElementById("header").style.backgroundImage=bigSize[random];

The above change in your <xf:js></xf:js> should do the trick.
 
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:
@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
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 Bottom