How to insert Javascript snippet

  • matthisco

    (@matthisco)


    14 years, 1 month ago

    Hi Folks,

    Can someone please tell me where to put a basic jquery hide/show script?

    I’ve added jquery in the header using:

    <?php wp_enqueue_script("jquery"); ?>

    But where do I put the script itself?

    <script type="text/javascript">
var $j = jQuery.noConflict();

$j(document).ready(function() {

function togglebox(id)
{
  var e = document.getElementById(id);

  if (e.style.display == 'block')
  e.style.display = 'none';
  else
  e.style.display = 'block';
}

});
</script>

    Please dont direct to these pages as I’ve read them numerous times and they don’t help. Thankyou

    http://codex.ww.wp.xz.cn/Using_Javascript

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter matthisco

    (@matthisco)

    14 years, 1 month ago

    I keep getting the error:

    Timestamp: 26/04/2012 11:55:14
    Error: togglebox is not defined
    Line: 1

    Anyone?

    Thanks in advance

    Moderator keesiemeijer

    (@keesiemeijer)

    14 years, 1 month ago

    http://codex.ww.wp.xz.cn/Function_Reference/wp_enqueue_script#Load_a_script_from_your_theme_which_depends_upon_a_WordPress_Script

    remove wp_enqueue_script("jquery"); from the header.
    Put your script in a file and call it togglebox.js. Create a folder “js” in your theme folder and put togglebox.js in it. And put this in your theme’s functions.php

    <?php
function my_scripts_method() {
        wp_register_script( 'togglebox', get_template_directory_uri() . '/js/togglebox.js', array('jquery'));
	wp_enqueue_script('togglebox');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

    This way jquery and togglebox.js are called in the header.

    Moderator keesiemeijer

    (@keesiemeijer)

    14 years, 1 month ago

    When using jQuery you also can use toggle(): http://api.jquery.com/toggle/

    Thread Starter matthisco

    (@matthisco)

    14 years, 1 month ago

    Thankyou so much for your reply! This is slowly driving me mad!

    Now I have this in the funcions php:

    function my_scripts_method() {
        wp_register_script( 'togglebox', get_template_directory_uri() . '/js/togglebox.js', array('jquery'));
	wp_enqueue_script('togglebox');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

    Nothing in my header.php

    And this in my page:

    <a onclick="visibilityToggle('sandwell');"  href="" style="color:black;">sandwell</a>

<div id="sandwell">
test
</div>

    I get the error:

    Error: visibilityToggle is not defined
    Source File: http://www.blackcountry.nhs.uk/beta/about-us/
    Line: 1

    Can you please help?

    Many thanks, really appreciate it.

    Moderator keesiemeijer

    (@keesiemeijer)

    14 years, 1 month ago

    Well I see jQuery and togglebox.js in your header.
    try it with this in your togglebox.js:

    jQuery(document).ready( function($) {
  var paragraph = $("<p>");
  var link = $('<a id="toggle_sandwell">Sandwell</a>');
  paragraph.append(link);
  $(".entry-content").prepend(paragraph);

  $(link).click(function (e) {
    e.preventDefault();
    $("#sandwell").toggle();
  });
});

    and remove your link from your page template file. This way when people are browsing with javascript turned off they don’t get to see the link.

    If you need this only on that page you can use is_page() in the first enqueue code

    if(is_page(2)){
wp_enqueue_script('togglebox');
}

    Thread Starter matthisco

    (@matthisco)

    14 years, 1 month ago

    Thanks very much for your reply.

    I’d like to pass the id of the element to the function and use this parameter to toggle the hide show, so I can toggle any element in the page using the same function.

    Can I just use some really simple Jquery like this?

    function togglebox(id){
  var e = document.getElementById(id);

  if (e.style.display == 'block')
  e.style.display = 'none';
  else
  e.style.display = 'block';
}

    Thanks so much for your help

    Moderator keesiemeijer

    (@keesiemeijer)

    14 years, 1 month ago

    Ok, when showing a link to toggle content format it like so:

    <div class="toggle">
  <a class="toggle-link" href="#">toggle</a>
  <div class="toggle-container">
  <!-- container that gets toggled -->
  <?php the_content(); ?>
  </div>
</div>

    Put this in your theme’s stylesheet to hide the toggle links by default:

    .toggle-link {
  display: none;
}

    And use this in togglebox.js to toggle multiple elements:

    jQuery(document).ready( function($) {

  $("a.toggle-link").show();
  $("a.toggle-link").click(function (e) {
    e.preventDefault();
    $(this).next(".toggle-container").toggle();
  });
});

    Moderator keesiemeijer

    (@keesiemeijer)

    14 years, 1 month ago

    if you have the toggle link inside another element (<p>,<h2>, etc) you need to change this:

    $(this).next(".toggle-container").toggle();

    to this:

    $(this).parents('.toggle').children(".toggle-container").toggle();

    or this:

    $(this).parent().next(".toggle-container").toggle();

    Thread Starter matthisco

    (@matthisco)

    14 years ago

    Thanks very much for your help

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

The topic ‘How to insert Javascript snippet’ is closed to new replies.