Header shrink - CSS and JS

Header shrink - CSS and JS

  
Hi all,

Can anybody help me get the below jfiddle working in outsystems?

http://jsfiddle.net/sinky/S8Fnq/

I dont want to simply dump the html into the page as an expression; instead i have created a container for the header, and a container for the body etc.... so i have more control over the build. 
?
It should be very simple,but the JS is behaving like it cant find the CSS classes to toggle.
I have tried using 'tiny' or '.tiny' but neither work

I replaced the line:
$('#header_nav').toggleClass('tiny', $(document).scrollTop() > 0);

with

 $('#"+headerBox.Id+"').toggleClass('tiny', $(document).scrollTop() > 10);
});

as i named my header container 'HeaderBox'

Would really appreciate any help here.

Thanks
Tom


Tom Ciullo wrote:
(...) instead i have created a container for the header, and a container for the body etc.... so i have more control over the build. 
 I'm not sure what you want to achieve with this... but you need to investigate if this dinamic id/class is being rendered on the page correctly. If so, maybe some error or code is avoiding the script execution. Can you share the oml?

Best regards,
Hi Tom,

Your code appears to be well... can you facilitate an example?

Cheers,
RG
Guys, 

See espace attached. As i said im not 100% sure why this isnt working, think its to do with the css classes. 
Note that if you replace the line

$('#"+headerBox.Id+"').toggleClass('tiny', $(document).scrollTop() > 10);

with window.alert('you scrolled') the JS does trigger, leading me to believe the problem is with the css classes. 

Andre - i dont want to have my header div defined in service studio as part of a html expression. Instead i would prefer to create a container in service studio and assign the relevant style/class to it. This way i can visualise the design better and can avoid having to view html code.

Thanks
Tom
Hi Tom,

I think you are missing the '#' character in the jquery selector... I put this and it worked perfectly. 

I'm attaching the oml with the example updated.

Hope it helps,
Andre,

So simple! Thanks for the help, really appreciate it. 

Tom