XF 2.1 Adding javascript to header CSS

Britney

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:
 
Sort by date Sort by votes
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>
 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
Britney said:
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?
Click to expand...
Adding onload="randombg()" to your opening <body> tag in PAGE_CONTAINER ought to do the trick now.
 
Upvote 0 Downvote
frm said:
Adding onload="randombg()" to your opening <body> tag in PAGE_CONTAINER ought to do the trick now.
Click to expand...
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 😕
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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).
 
Upvote 0 Downvote
document.getElementById("header").style.backgroundImage=bigSize[random];

The above change in your <xf:js></xf:js> should do the trick.
 
Upvote 0 Downvote
frm said:
document.getElementById("header").style.backgroundImage=bigSize[random];

The above change in your <xf:js></xf:js> should do the trick.
Click to expand...
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:
Upvote 0 Downvote
@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
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

S
XF 2.3 Javascript phrase parameters
Replies
1
Views
62
Jeremy P
Jeremy P
X
Fixed XF's xf/filter.js does not dynamically load javascript or css
Replies
1
Views
68
XF Bug Bot
XF Bug Bot
S
XF 2.3 How do I pass an array as a data value to javascript?
Replies
2
Views
40
stromb0li
S
Jaxel
XF 2.3 How to unregister a javascript binding?
Replies
4
Views
63
Jaxel
Jaxel
Kier
Javascript debugging with PhpStorm and Google Chrome using your own Chrome profile
Replies
0
Views
915
Kier
Kier
Back
Top Bottom