WordPress.org

Ready to get started?Download WordPress

Forums

How to create a page with Javascript content on WordPress (9 posts)

  1. ciucciariello
    Member
    Posted 2 years ago #

    Hello,
    I am quite new with WordPress and have been spending almost two weeks trying to work out how to embed JavaScript on a WordPress page. I have a domain and using WordPressas as a website and not as a blog (I am not sure if this last sentence makes any sense). I have been reading plenty of tutorials on JavaScript not working on WordPress, others saying it works and explaining how to activate the JavaScripts from the header, others from the footer and so on, but at the end of the day I am still here with nothing gained.
    Is there anyone who is willing to give me any support please.
    I would actually need an answer for dummies please.

    The following are the two pages I am tryng to set up:

    http://www.progettofamilia.org/experiment
    http://www.progettofamilia.org/chi-siamo/team

    Thank you for any support.

    Happy New Year

  2. erikas_boy
    Member
    Posted 2 years ago #

    Depending on your theme, you might only need to use the js folder in your theme directory. I use child-themes of Thematic, which calls any .js files in the js folder. So all it takes is to write your code in the appropriate file, upload it to your server and you're off.

    If your theme doesn't do this, it kind of varies what you'll need to do. At the end of the day, linking to a .js file somewhere is your best bet, but you will have to work it out based on your theme. Child-themes are really the ideal way to do things, if you need to make changes to an existing theme, as changing your theme's core files will be over-written if your theme developer updates their work (if they don't consider a new theme). A google search of "wordpress child theme tutorials" should help out here. Themeshaper has a great tutorial (based on thematic, but you can apply it to any theme).

    The only JS problems I've heard of in WordPress is conflicts with plug-ins, but you pretty well have to deal with those on a case-by-case basis.

    Chris

  3. ciucciariello
    Member
    Posted 2 years ago #

    Hi Chris,
    thank you very much for your help.
    I will create a child theme soon.
    For the time being I tried to paste the whole html code with the appropriate links to the js files to make it work.
    As a result WordPress cancels parts of the code so what I get is a list of information instead of seing the js effect.

    http://www.progettofamilia.org/experiment

    So, what can I say, no progress at all still.

    Also, on http:www.progettofamilia.org/chi-siamo/team ,

    I can't get that first raw straight and still wondering way.
    (Actually, also wondering how I managed to create that page).

    If there are any other suggestions on how to correctly create a WordPress page with JavaScript content in it those contributions would be highly appreciated.
    Thank you very much

    Jon

  4. erikas_boy
    Member
    Posted 2 years ago #

    Jon,
    I'm assuming the JS in question is the snowflakes? If so, they're there and falling for me. Did you work it out?
    Ciao,
    Chris

  5. ciucciariello
    Member
    Posted 2 years ago #

    No, they are not the snow flakes, it's the mouse over effect on the team pictures.
    Ciao

    Jon

  6. shirazdrum
    Member
    Posted 2 years ago #

    Jon,

    Webpage is a webpage, and javascript is probably the easiest thing to include in a WordPress site. However, Without seeing your code, there's nothing we can offer. Paste the script in the pastebin and post it here so I can take a look at it.

    Also search for a plugin that already does what you need, since that might be your easiest option.

  7. ciucciariello
    Member
    Posted 2 years ago #

    Hi shirazdrum,
    thank u for answering.
    I wish I could also say that!

    This is the whole html I am trying to paste in the WordPress page:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <meta http-equiv="content-type"
     content="text/html; charset=ISO-8859-1">
      <title>teamnewok</title>
      <meta http-equiv="Content-Type"
     content="text/html;charset=iso-8859-1">
      <style>
    body {
    font-family:arial; }
    .eff {
    /* the image size is 126x126, it's adjusted to fit the border as well*/
    width:136px;
    height:136px;
    /* important, allow the children object to move inside its parent obj */
    position:relative; /* important, it hides the moved image */
    overflow:hidden;
    /* with the clear class, make it into 3 x 3 layout */
    float:left;
    /* IE float bug fix */
    display:inline;
    /* styling */
    margin:8px;
    font-size:12px;
    }
    .eff img {
    display:block;
    width:126px;
    height:126px;
    /* styling */
    text-decoration:none;
    border:4px solid #ccc;
    background:#ddd;
    /* important, it allows this obj to move by jquery */
    position:absolute;
    /* make sure it appears above the caption */
    z-index:500;
    cursor:pointer; cursor:hand;
    }
    .eff .caption {
    /* should be the same size with the image */
    width:126px;
    height:126px;
    /* styling */
    background:#333;
    border:4px solid #ccc;
    color:#eee;
    /* set the position to 0, 0 and appear under the image */
    position:absolute;
    top:0; left:0;
    z-index:0;
    }
    /* extra styling*/
    .eff .caption a.header {
    margin:10px 5px 5px 5px;
    display:block;
    font-size:14px; font-weight:700;
    color:#4ed7f4;
    }
    .eff .caption p {
    margin:5px; }
    .clear {clear:both}
      </style>
    </head>
    <body>
    <table
     style="text-align: left; background-color: rgb(80, 0, 0); width: 473px;"
     cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td style="text-align: center; width: 463px;"><br>
          <div style="text-align: center;">
          <script type="text/javascript"
     src="js/jquery-1.4.min.js"></script>
          <script type="text/javascript"
     src="js/jquery.easing.1.3.js"></script>
          <script>
    $(document).ready(function() {
    //if mouse over and mouse out
    $('.eff').hover(
    function () {
    value = $(this).find('img').outerHeight() * -1;
    //for left/right if you have different width and height, //commented out because we are using up/down in this example
    //value = $(this).find('img').outerWidth() * -1); //animate the image
    // you can change the sliding direction by changing bottom to left, right or top
    // if you changed this, you will have to change the position of the hover out as well
    $(this).find('img').stop().animate({bottom: value} ,{duration:500, easing: 'easeOutBounce'}); },
    function () {
    //reset the image
    // the position property (bottom), it must be same with the on in the mouseover
    $(this).find('img').stop().animate({bottom:0} ,{duration:500, easing: 'easeOutBounce'}); });
    //if user clicked on the thumbnail
    $('.eff').click(function () { //grab and execute the first link in the thumbnail
    window.location = $(this).find('a:first').attr('href');
    });
    });
          </script>
          <div class="eff"><img src="antonio_santoro.gif"
     alt="Antonio Santoro" title="" height="126"
     width="126">
          <div class="caption"><a
     href="mailto:@progettofamilia.org" class="header">Presidente</a>
          <p>Antonio Santoro, la sua prima
    preoccupazione e’ quella dell’impegno sociale in favore delle persone
    piu’ povere, missione che porta avanti egregiamente. E’ grazie alla sua
    statura personale e alla sua forte ed inarrestabile dedizione per il
    prossimo che molti sostenitori continuano a garantire cibo, salute,
    istruzione e protezione a centinaia di bambini che vivono nel sud del
    mondo. <a href="test">ads</a></p>
          </div>
          </div>
          <div class="eff">
          <img src="antonio_de_crescenzo.gif"
     alt="Antonio De Crescenzo" title="" height="126"
     width="126">
          <div class="caption"><a
     href="mailto:@progettofamilia.org" class="header">Vice
    Presidente</a>
          <p>Antonio ha
    contribuito a fondare Progetto Familia. Il suo contributo e' stato
    fondamentale negli adempimenti amministrativi necessari ala
    costituzione di Progetto Familia e per garantire una sede ed una
    struttura adeguata.</p>
          </div>
          </div>
          <div class="eff">
          <img src="jonathan_paci.gif" alt="Jonathan Paci"
     title="" height="126" width="126">
          <div class="caption"><a
     href="mailto:@progettofamilia.org" class="header">Direttore
    Esecutivo</a>
          <p>Jonathan esperto in monitoraggio e valutazione di programmi di cooperazione internazionale e'
    responsabile
    della supervisione di tutte le attivita' di Progetto Familia e assicura
    che i progetti siano elaborati in modo professionale, che abbiano
    risorse adeguate e&nbsp;che raggiungano i risultati
    attesi.</p>
          </div>
          </div>
          <div class="clear"></div>
          <div class="eff">
          <img src="glenda_martins.gif" alt="Glenda Martins"
     title="" height="126" width="126">
          <div class="caption"><a
     href="mailto:@progettofamilia.org" class="header">Project
    Manager</a>
          <p>Glenda assicura al
    Progetto Familia un costante controllo delle attivita' di Progetto
    svolte in Italia e all'estero
    coordinando i partner locali affinche' le risorse allocate vengano
    impiegate in modo efficiente ed efficace.</p>
          </div>
          </div>
          <div class="eff">
          <img src="diana_santoro.gif" alt="Diana Santoro"
     title="" height="126" width="126">
          <div class="caption"><a
     href="mailto:@progettofamilia.org" class="header">Responsabile
    Amministrazione</a>
          <p>Diana Santoro e' cofondatrice
    di Progetto Familia, sotto la sua supervisione l'associazione ottimizza
    ogni risorsa a favore dei bambini garantendo ad ogni sostenitore e
    donatore la massima trasparenza rispetto ai fondi raccolti.</p>
          </div>
          </div>
          <div class="eff">
          <img src="maria_de_florio.gif" alt="Maria De Florio"
     title="" height="126" width="126">
          <div class="caption"><a
     href="mailto:@progettofamilia.org" class="header">Responsabile
    Fundraising</a>
          <p>Maria e' responsabile
    della raccolta fondi di Progetto Familia. Grazie a lei l'associazione
    e' potuta crescere e tante famiglie hanno potuto beneficiare delle
    risorse dei generosi sostenitori di Progetto Familia.</p>
          </div>
          </div>
          <div class="clear"></div>
          <div class="eff">
          <img src="elena_zafarana.gif" alt="Elena Zafarana"
     title="" height="126" width="126">
          <div class="caption"><a
     href="mailto:@progettofamilia.org" class="header">Segretaria</a>
          <p>Elena da un supporto
    fondamentale a Progetto Familia affinche' le pratiche quotidiane
    dell'ufficio siano svolte in modo puntuale ed efficiente.</p>
          </div>
          </div>
          <div class="eff">
          <img src="karen_poveda.gif" alt="Karen Poveda"
     title="" height="126" width="126">
          <div class="caption"><a
     href="mailto:@progettofamilia.org" class="header">Volontaria</a>
          <p>Karen e' un'abile dialogatrice
    e sostiene Progetto Familia nella raccolta fondi ed in occasione di
    eventi benefici.</p>
          </div>
          </div>
          <div class="eff">
          <img src="martins_alcione.gif" alt="Martins Alcione"
     title="" height="126" width="126">
          <div class="caption"><a
     href="mailto:@progettofamilia.org" class="header">Volontario</a>
          <p>Martins e' un volontario molto
    attivo ai banchetti per la raccolta fondi di Progetto Familia, il suo
    contributo e' sempre molto apprezzato.</p>
          </div>
          </div>
          <p id="debug"></p>
          </div>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          </td>
        </tr>
      </tbody>
    </table>
    <br>
    </body>
    </html>

    I have uploaded the 3 javascripts in the js library under the folder "noi" and inserted the following code in the header.php:

    <!-- TEAM LOAD HOOK START -->
    <?php wp_enqueue_script("jquery"); ?>
    <!-- TEAM LOAD HOOK END -->

    I inserted this code just before this (which was in the header.php already):

    <?php
    wp_head();
    ?>

    and soon after this I inserted the links to the js files:

    <!-- TEAM LOAD SCRIPT START -->
    <script type="text/javascript"
       src="<?php bloginfo("template_url"); ?>/js/noi/jquery.easing.1.3.js"></script>
       <script type="text/javascript"
        src="<?php bloginfo("template_url"); ?>/js/noi/jquery-1.4.min.js"></script>
    	<script type="text/javascript"
    	src="<?php bloginfo("template_url"); ?>/js/noi/jquery.js"></script>
    <!-- TEAM LOAD SCRIPT END -->

    I hope this makes it clear.
    Thank you again for anyone who can help.
    Ciao

  8. shirazdrum
    Member
    Posted 2 years ago #

    Well first, copy and paste your styles to your theme's stylehseet, there's no reason to call them inline.

    Second, you are calling for 3 different versions of jQuery for no reason. only use one and delete the rest. Your theme most likely already using the jQuery or one of your plugins is loading it.

    Third, references to the libraries should go above your wp-head.

    Forth, this is the code that you should use, you can't just keep calling libraries, you've already done that.

    <script type="text/javascript">
    $(document).ready(function() {
    //if mouse over and mouse out
    $('.eff').hover(
    function () {
    value = $(this).find('img').outerHeight() * -1;
    //for left/right if you have different width and height, //commented out because we are using up/down in this example
    //value = $(this).find('img').outerWidth() * -1); //animate the image
    // you can change the sliding direction by changing bottom to left, right or top
    // if you changed this, you will have to change the position of the hover out as well
    $(this).find('img').stop().animate({bottom: value} ,{duration:500, easing: 'easeOutBounce'}); },
    function () {
    //reset the image
    // the position property (bottom), it must be same with the on in the mouseover
    $(this).find('img').stop().animate({bottom:0} ,{duration:500, easing: 'easeOutBounce'}); });
    //if user clicked on the thumbnail
    $('.eff').click(function () { //grab and execute the first link in the thumbnail
    window.location = $(this).find('a:first').attr('href');
    });
    });
          </script>

    Fifth, If you have other plugins that use the jQuery, you probably will have conflict. Try wrapping your code in no-conflict wrapper or change $ for the full name. See codex here.

    Hope that helps.

  9. ciucciariello
    Member
    Posted 2 years ago #

    Wow Shirazdrum,
    that looks very professional.
    I'll try it tonight and see if it works.
    Thank you very much for helping.
    Ciao

Topic Closed

This topic has been closed to new replies.

About this Topic