XF 1.2 A couple questions about responsive.

[rainmotorsports]

I am in the middle of redoing our vB theme. I had straight ported it with much success but have broken out photoshop and am cutting it up to better support the native responsive theme abilities of XF 1.2. Before I get my hands too dirty I have a couple questions about the capabilities of the system as it stands with no add ons.

The top of the header and the footer (as well as the menu bar) has a main image with another div over the right hand side that it slides into. Pretty basic but the right hand image and the space normally utilized is inappropriate for cell phones. Is it possible to replace the image in this div with a smaller one as well as to not display its internal content (for example the header top right has social media icons).

The more advanced question I have not seen a solution to. I plan to use a script to float the top menu of my header when the page is scrolled down. Just like say arstechnica.com. However I would like to detect narrow responsive and not have this script active. Is there something in stock form to check for this so that I can either tell my script to stop or to remove the reference from output altogether. It likely should be dynamic as maybe a low resolution tablet switching orientation may change the situation.

 

[Paul B]

Not sure if you've seen this?

http://xenforo.com/community/resources/responsive-design.2193/

You can use media queries to change the CSS based on browser width, and conditionals based on the responsive flag.

 

[rainmotorsports]

If it wasn't 4 am I would have claimed I was searching hard enough! Thanks and wonderful resource. Looks like that answers pretty much anything related to the first question. Looking at the stock theme code such as footer.css implied this wouldn't be difficult. Just glad there is a guide!

Any clue on the second? I assume for the second I would either being referencing the xenforo js as I would have to write a script to change things on the fly. I in my inexperience doubt that Xenforo would allow me to have a conditional for this sort of thing on the fly. Checking responsive enabled is one thing (if your allowed to even do that outside of CSS) checking what width condition is in play is kinda different I believe.

 

[Paul B]

You would need to use JS I suspect.

 

[Chris D]

You would need to use JS I suspect.

Correct.

Part of it actually is not too dissimilar from the responsive AdSense JS code you posted in terms of checking the current display width and then doing certain actions (or not) based on that width value.