flight1307

Thank you. Will do.

I’m going through the validation. I’m not interested in hiring anyone. Why do I need to hire someone? What do you mean by my time limit and the link to wordpress jobs? Or are you making a joke?

Thank you, Andrew! But I don’t see how #wrapper ends up added or missing when it’s not styled into the DIV tags or other HTML on the page. Please explain like I’m being thick. Because I am.

Hi Ross

Grateful thanks. It worked!! You are the man, and thank you so much for pointing me the way. Like you, and all developers, it’s such a treat after all the hair pulling, when things just work. Do you have a blog I can follow? It’s been a long day dealing with the CC gateway and with the client, and developing the site, so apologies for the delay in updating you. Much appreciated. Many thanks again.

Cheers mate.

InFlight

Yes, thank you. It does help. I’ve been following this tutorial:

http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial

and it’s all working correctly now. It’s much easier to work with Bootstrap alone. When you associate Bootstrap with WordPress, things break and go weird a lot. I don’t want to just drag in a bunch of plugins. I want to understand the coding issues. So it’s good to get a few fundamental mysteries answered, and this has been one. Thank you, Esmi.

Thank you, Andrew. I think I’ve nailed it. It’s a ‘prevent default’ method applied to the anchor tag:

jQuery(document).ready(function($) {
	console.log('using css and prevent default' );

	var fButton = 	$( '.page_item.page-item-190' );
	var header = 	$( '#access' );

    $(fButton).bind('click', function (e) {
        e.preventDefault();
	header.addClass('fadeHeads');
	});
});

The ‘fadeHeads’ class is CSS applied to the menu. You’re quite right – the page was reloading – but the binding of prevent default stops the page reload on click, and should now allow either CSS or jQuery fades. Many thanks to you and Jose for pointing me the right way. Cheers.

Jose – I hope you’re still around. Half way there. This works in ‘header.php’ with no click function – just the variable executing on the doc ready:

<script type="text/javascript">
        // we're in 'header.php'
	jQuery(document).ready(function($) {
	var header = 	$( '#masthead' );
    header.fadeOut();
});
</script>

but that of course is fading out the header and nav bar site wide because it’s not happening when user clicks on ‘Flash And AS Dev’. The menu item class coming up on ‘Inspect Element’ using Chrome is:

<li class="page_item page-item-190 current_page_item"><a href="http://localhost/wordpress/flash">Flash and Actionscript 3 Development</a></li>

so, I’ve tried:

<script type="text/javascript">
        // we're in 'header.php'
	jQuery(document).ready(function($) {
	var fButton = 	$( '.page_item page-item-190' );
	var header = 	$( '#masthead' );

        $(fButton).click( function(){
    console.log('using button Flash for fade');
    menu.fadeOut();
    header.fadeOut();
} );
});
</script>

and I’ve also tried var fButton = $( ‘li .page_item page-item-190’ ); but the click function doesn’t find the nav bar. I’m working locally in Dreamweaver on MAMP and Dreamweaver always auto completes the jQuery ID’s and classes found by the page. But ‘header.php’ does not find that page item ID at all. Any thoughts? Many thanks!