JS at bottom of a page

  • Resolved kevinsan

    (@kevinsan)


    9 years, 7 months ago

    Hi WP,

    I want to add this JS to the bottom of a page. Have tried several ideas, but it does not work. The javascript should allow the user to toggle between a grid and list view. The toggle does not work.

    Here is the JS:

    function() {
    $('#list').click(function(event){event.preventDefault();$('#products .item').addClass('list-group-item');});
    $('#grid').click(function(event){event.preventDefault();$('#products .item').removeClass('list-group-item');$('#products .item').addClass('grid-group-item');});
};

    Here is what I hope to accomplish:

    https://bootsnipp.com/snippets/featured/list-grid-view

    I have tried removing formating with PS Disable Autoformating Plugin, adding js to footer, adding js to page enclosed is <script> tags, and at the bottom of a page in the JS box.

    I am using Bootstrap 3 and the latest WP 4.2.3. Currently on localhost.

Viewing 5 replies - 1 through 5 (of 5 total)

  • That works on the url you provided, so if that Javascript works, it should also works with yours.

    Okay let’s point out things, are your “list” and “grid” ID of the elements are defined in your HTML ? even the ID products and Class items?

    I want to add this JS to the bottom of a page.

    Add this to your child theme’s functions.php file:

    function enqueue_my_footer_js() {
 	if( !is_page( 2 ) ) // replace 2 with page ID
 		return false;
	?>
		<script type="text/javascript">
		function() {
		    $('#list').click(function(event){event.preventDefault();$('#products .item').addClass('list-group-item');});
		    $('#grid').click(function(event){event.preventDefault();$('#products .item').removeClass('list-group-item');$('#products .item').addClass('grid-group-item');});
		};
		</script>
	<?php

}
add_action( 'wp_footer', 'enqueue_my_footer_js' );

    in if( !is_page( 2 ) ), replace 2 with the page ID..

    Thread Starter kevinsan

    (@kevinsan)

    I have used the exact htmland css code used on the example. No changes.

    The only changes are to the js and adding the Autoformat plugin.

    Do you think there is a conflict? I just tried changing the names of grid and list to grid2 and list2 in the html and JS. Still did not work.

    Okay I need some information.

    I looked at the Preview, HTML, CSS, and JS, especially HTML..

    you said you copied all of them right?

    that JS isn’t your ordinary Javascript that you can caged inside <script> tags. That is a JQuery, a javascript library.

    you need jquery on your atleast header or footer or somewhere if you don’t have.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    if that doesn’t work, let’s try another method.

    Have fun.

    Thread Starter kevinsan

    (@kevinsan)

    Sorry for the delay. Bit by a spider!

    Changed to https://tympanus.net/codrops/2013/07/01/view-mode-switch/ and everything is ok.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘JS at bottom of a page’ is closed to new replies.