How to create a page with Javascript content on WordPress

ciucciariello
(@ciucciariello)

12 years, 4 months 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

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

(@erikas_boy)

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

Thread Starter

ciucciariello

(@ciucciariello)

12 years, 4 months 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

erikas_boy

(@erikas_boy)

12 years, 4 months 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

Thread Starter

ciucciariello

(@ciucciariello)

12 years, 4 months ago

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

Jon

shirazdrum

(@shirazdrum)

12 years, 4 months 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.

Thread Starter

ciucciariello

(@ciucciariello)

12 years, 4 months 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

shirazdrum

(@shirazdrum)

12 years, 4 months 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.

Thread Starter

ciucciariello

(@ciucciariello)

12 years, 4 months ago

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

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

The topic ‘How to create a page with Javascript content on WordPress’ is closed to new replies.

How to create a page with Javascript content on WordPress

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics