I had created a horizontal navigation bar on top of my page. I use code on w3school and tryied javascript snippet from stackoverflow post I found months ago. I'm using Django. I met 2 issues I can't resolve or understand.
I paste my code here.
One navigation.html:
<div id="id_topnav" class="topnav">
Home
Help
Test
</div>
I got a style.css:
body {
margin: 10;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: red;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: orange;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover:not(.active) {
background-color: blue;
color: black;
}
.topnav a:focus
{
background-color: pink;
}
In my home page,
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'main/style.css' %}">
{% include "myapp/navigation.html" %}
......and other lines below
myapp\static\main\style.css
My first issue is, when I changed colours in style.css, any colour in .topnav or .topnav a section, I didn't see any colour changes on any of my page. After modifying code, I do run py manage.py collectstatic to update the static folder and py manage.py runserver 127.0.0.1:8000 to restart my server. I don't see any change of colour. When I remove the <link rel="stylesheet" type="text/css" href="{% static 'main/style.css' %}"> it immediately changed back to no any style. But modifying some attribute of style.css, nothing happens. So I wonder, if the browser cache a style? or did I missed any important Django procedure?
My second issue is I want the tab on navigation bar keep a unique color when clicked. For example, originally background-color is green, when hover, yellow, blue after clicked. The colours used is not important, but I need a responsive change. I tried some javascript from some findings like below(snippet seems worked for someone but not for me):
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$('#id_topnav').on('click','a', function ( e ) {
alert( "debug 1" )
e.preventDefault();
$(this).parents('#id_topnav').find('.active').removeClass('active').end().end().addClass('active');
$(activeTab).show();
});
$(document).ready(function() {
$('#id_topnav').click(function(event){
alert( "debug 2" )
var elementType = $("#id_topnav").find(":clicked").attr("href"))
$("#id_topnav").children('a').find(":selected").toggleClass('clicked');
});
});
</script>
I put this snippet in navigation.html after <div id="id_topnav" class="topnav">...</div>
Neither the alert( ) ever triggered. I didn't know why. Not sure if the two issues have any relation? I tried moving the JS code from navigation.html to home page which includes the navigation.html but also no effect.
Can I use JS or Jquery code in Django included html?
{% include "myapp/navigation.html" %}
Related
I'm trying to create a subwindow where users can see lists they make, unfortunately the list elements aren't being stylized and I'm at a loss as to why that's the case. I create the window as follows: windowName.document.body.innerHTML = '<html> <head> <link rel="stylesheet" type="text/css" href="list.css"> </head> <ul id = "searchSuggestions"> </ul></html>'. I create the list items in javascript using:
let a = windowName.document.createElement("a");
a.textContent=movieTitle
a.setAttribute('href','#');
let listItem = windowName.document.createElement("li")
listItem.appendChild(a)
suggestionList.appendChild(listItem);
The problem is that when these elements show up on the page they don't follow any of the formatting in the "list.css" file.
Here is the list CSS file I'm trying to use:
#searchSuggestions {
/* Remove default list styling */
list-style-type: none;
padding: 0;
margin: 0;
}
#searchSuggestions li a {
border: 1px solid #ddd; /* Add a border to all links */
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6; /* Grey background color */
padding: 12px; /* Add some padding */
text-decoration: none; /* Remove default text underline */
font-size: 18px; /* Increase the font-size */
color: black; /* Add a black text color */
display: block; /* Make it into a block element to fill the whole list */
}
#searchSuggestions li a:hover:not(.header) {
background-color: #eee; /* Add a hover effect to all links, except for headers */
}
The final HTML of the window (using f12) is as follows:
<html>
<head><link rel="stylesheet" type="text/css" href="list.css"></head>
<body>
<div style="text-align: center;">
<h1 id="listTitle">new</h1>
<input id="searchBar" type="text" placeholder="Search..">
<button id="addBtn">Add</button>
<ul id="searchSuggestions">
<li>Toy Story</li>
<li>Toy Story 4</li>
<li>Toy Story 2</li>
</ul>
</div>
</body>
</html>
My question is how do I make it so that my listItems are stylized?
Update: After a couple more hours of trial and error I finally got a useful error message from google chrome when I tried to load the css file referring to it as "file:///{directory for css file}" chrome console told me that it "wasn't allowed to load local resources". With this new found information I uploaded my CSS to a webserver and referred to the URL that the CSS file is located and now my window has CSS.
We can use window.location.replace to avoid history, and to target on-page anchors without page reloads, but *not in iframes?
The problem is a CSP (content security policy) violation, which states script-src 'unsafe-inline' must be enabled. Except I don't have a CSP defined, and even if I define one and allow script-src 'unsafe-inline' it still gives the same violation error. Same result in ie11/chrome/ff.
iframe on the same domain (in the same directory).
Target the iframe in the console and use window.location.replace('/samepage.html#onpage_anchor') in console.
It works. It targets the on page anchor without reloading the page, and without history.
Put the same code inline on anchor links and it works.
Use the same code in external script, get the csp violation error. This works fine if not in an iframe.
I tried creating a CSP to allow the action, but not even the most permissive content security policies possible would allow it.
So I put together examples on plunker which allows multiple files so I could use proper hrefs which reference the parent/child pages.
Notes about the plunker examples:
The problem is not reproduced in these examples. The script works perfectly, even in the iframe. However, the same code does not work on my local server, or when I run it live on a VPS.
I suspect the CSP violation doesn't get triggered on plunker because plunker is presenting content to the browser via a kind of abstraction layer of some sort.
The first time you click the accordion links in the parent, it causes a refresh. This is because the way the page initially loads it doesn't reference index.html. Subsequent clicks work as expected without page reloads. Not an issue in the iframe because it does initially reference child.html
These are good examples to show the code without requiring alterations to make it work (as in the need to change the hrefs to make them work in stackoverflow snippets, mentioned below). It is also good as it shows the javascript working as it should. But it does not show the actually problem. You will still need to load it up in your editor and run it on a local server or live hosting environment to see the real problem.
Plunker examples: With script/without history. Without script/with history
Simple accordion with one entry. Sufficient to reproduce issue.
Clicking open/close will expand/collapse accordion, no JS required. The JS should do the exact same thing but without history. Works fine, but not in an iframe.
Code snippet notes:
You can run the snippet to get an idea about what I am describing, but it does not actually demonstrate the issue.
The snippet does not behave the way it would in a real browser, the javascript does not work.
The snippet shows the code, but it should be run in an iframe to see the issue. Run it outside an iframe to see the difference and how it should work.
Because of how the links work with the JS (replacing the whole url) they actually must be like this href="/thispage.html#ac1" rather than just href="#ac1" as they appear in the snippet (can't target the actual html page in the snippet). So if you try this in your editor (please do), then remember to change the links to this format this_document.html#anchor so they are still same page anchors, but the page.html is included in the link.
$(document).ready(function() {
// anchor links without history
$.acAnch = function(event) {
event.preventDefault();
var anchLnk = $(event.target);
var anchTrgt = anchLnk.attr('href');
window.location.replace(anchTrgt);
}
// listen for anchor clicks
$('.accordion').on('click', 'a', $.acAnch);
});
div#sample.example .accordion {
margin-left: 50px;
margin-top: 50px;
}
div#sample.example section {
box-sizing: border-box;
clear: both;
position: relative;
display: block;
width: 300px;
height: 32px;
padding: 0;
background-color: #fff;
box-shadow: inset 0 0 1px 1px #000;
overflow: hidden;
}
div#sample.example section:target {
height: auto;
}
div#sample.example a {
box-sizing: border-box;
display: block;
float: right;
width: 50%;
height: 32px;
margin: 0;
padding: 4px;
text-align: center;
font-size: 16px;
color: #000;
background-color: #fff;
box-shadow: inset 0 0 1px 1px #000;
}
div#sample.example p {
box-sizing: border-box;
clear: both;
display: block;
width: 100%;
padding: 16px;
margin: 16px 0 0;
text-align: center;
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sample" class="example">
<article class="accordion">
<section id="ac1">
Close
Open
<div class="ac-content">
<p>The elephants talking in their sleep kept me up so late.</p>
</div>
</section>
</article>
</div>
$(document).ready(function() {
// anchor links without history
$.acAnch = function(event) {
event.preventDefault();
var anchLnk = $(event.target);
var anchTrgt = anchLnk.attr('href');
window.location.replace(anchTrgt);
}
// listen for anchor clicks
$('.accordion').on('click', 'a', $.acAnch);
});
This is very simple:
acAnch function takes the href attribute and drops it into window.location.replace().
Listen for clicks on anchors within the accordion to run the acAnch function.
So all the script does is run window.location.replace('/this_same_page.html#on_page_anchor')
If you put that in the console it works, no CSP violation. But running it from external script doesn't work.
Inline on the links works fine:
onclick="event.preventDefault();window.location.replace('/thispage.html#acc0');"
onclick="event.preventDefault();window.location.replace('/thispage.html#acc1');"
Putting that on the respective links works perfectly, but I really prefer not to use inline script like that. There must be a way to do this with an external script.
I tried running the javascript on parent instead of in the iframe (with modifications to select the links within the child of course). Same CSP error result.
Why am I doing this? Well the site is much more complex than the example. Anchors in iframes work fine but they add history. If you run the code above without the javascript, (or just run the snippet), open and close the accordion a few times, and use back button, it will go back through the open close states.
I wouldn't mind the history, but if it is in an iframe, when you leave the parent page and then come back to it, the history in the iframe is broken. Going back doesn't go back through the accordion states anymore, but instead just keeps reloading the iframe. Initially the anchors don't cause iframe reloads but just steps through accordion state history, which works fine, until you leave the page and come back. Then back no longer goes through the accordion states, but just goes through a pile of identical iframe reloads. It is very user unfriendly behavior.
I don't need to use location.replace if there is another method that will work. I have tried many other approaches though, and I've found that methods that can achieve the same result, generally result in the same error.
The goal is simply to activate the anchor links on page without reloading, and without history, inside an iframe.
The inline script works. Can we make it work in an external .js file?
This may be a non-issue, but you mentioned this is an issue on you local server, and I noticed your code relys on relative links.
If you are not setup correctly, you may be serving resource via the file:// protocol or somehow using a localhost, not recognized as a valid TLD, which would result in file:// protocol as default, or invalidate CSP
In any event, try using absolute URLs and see if that resolves the issue
yes you can use iframe with -window-location-replace
for reference, you can use this ref link Javascript location.replace and iframe
You can toggle an active class to the parent element like this using anchor click events.
// Code goes here
$(window).on('load', function() {
$('.accordion section').on('click', '.ac-open', function(e) {
e.preventDefault();
$(e.target).parent().addClass('active');
});
$('.accordion section').on('click', '.ac-close', function(e) {
e.preventDefault();
$(e.target).parent().removeClass('active');
});
});
/* Styles go here */
html,
body {
margin: 0;
padding: 0;
}
.flt-lft {
float: left;
margin: 16px;
}
h4 {
text-align: center;
margin: 0;
padding: 8px;
color: white;
background-color: green;
}
/* #sample.example .accordion {
margin-left: 50px;
margin-top: 50px;
} */
#sample.example section {
box-sizing: border-box;
clear: both;
position: relative;
display: block;
width: 300px;
height: 32px;
padding: 0;
background-color: #fff;
box-shadow: inset 0 0 1px 1px #000;
overflow: hidden;
}
#sample.example section.active {
height: auto;
}
#sample.example a {
box-sizing: border-box;
display: block;
float: right;
width: 50%;
height: 32px;
margin: 0;
padding: 4px;
text-align: center;
font-size: 16px;
color: #000;
background-color: #fff;
box-shadow: inset 0 0 1px 1px #000;
}
#sample.example p {
box-sizing: border-box;
clear: both;
display: block;
width: 100%;
padding: 16px;
margin: 16px 0 0;
text-align: center;
color: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="flt-lft">
<h4>parent</h4>
<div id="sample" class="example">
<article class="accordion">
<section id="ac1">
Close
Open
<div class="ac-content">
<p>The elephants talking in their sleep kept me up so late.</p>
</div>
</section>
</article>
</div>
</div>
<div class="flt-lft">
<h4>iframe</h4>
<iframe src="child.html"></iframe>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
yes you can , here is a live example from below link
https://codepen.io/pmk/pen/wOwoyW
HTML
<div class="">
<h3>Testing 4 methods of writing dynamic content to Iframe.</h3>
<p>#1 use <strong>document.write()</strong>,
#2 use <strong>URL.createObjectURL()</strong>,
#3 use <strong>encodeURI()</strong> and #4 <strong>iframe.srcdoc</strong></p>
<p>Using the recommended method <strong>URL.createObjectURL()</strong> leads to problems when trying to retrieve the <strong>windown.location</strong> object. (Same does the <strong>encodeURI()</strong> method)<p/>
<p>Only reliable method if you need window.location, seems to be the old obsolete <strong>document.write()</strong> method.</p>
<iframe id="iframe1"></iframe>
<iframe id="iframe2"></iframe>
<iframe id="iframe3"></iframe>
<iframe id="iframe4"></iframe>
</div>
CSS
#import url(https://fonts.googleapis.com /css?family=Fira+Sans:400,500italic);
html {
height: 100%;
background-color: rgba(34,32,36,1);
}
body {
text-align: center;
font: normal 100% 'Fira Sans', sans-serif;
color: #aaa;
}
iframe {
width: 40%;
height: 200px;
background: white;
}
JS
var template = [
'<!DOCTYPE HTML>',
'<html>',
'<head>',
'</head>',
'<body>',
'<script>',
'document.write("<pre>" + JSON.stringify(window.location, null, 4) +
"</pre>");',
'<\/script>',
'</body>',
'</html>'
].join('');
var iframe1El = document.querySelector('#iframe1');
var iframe1 = iframe1El.contentWindow || (
iframe1El.contentDocument.document || iframe1El.contentDocument);
var iframe2El = document.querySelector('#iframe2');
var iframe2 = iframe2El.contentWindow ||
( iframe2El.contentDocument.document || iframe2El.contentDocument);
var iframe3El = document.querySelector('#iframe3');
var iframe3 = iframe3El.contentWindow ||
( iframe3El.contentDocument.document ||
iframe3El.contentDocument);
var iframe4El = document.querySelector('#iframe4');
var iframe4 = iframe4El.contentWindow ||
( iframe4El.contentDocument.document || iframe4El.contentDocument);
iframe1.document.open();
iframe1.document.write(template);
iframe1.document.close();
var bData = new Blob([template], {type: 'text/html'});
iframe2El.onload = function() { window.URL.revokeObjectURL(bData); };
iframe2El.src = window.URL.createObjectURL(bData);
iframe3El.src = 'data:text/html;charset=utf-8,' +
encodeURI(template);
iframe4El.srcdoc = template;
Yes you can use it with iframe.
you can use CSS instead of html iframe tag
because iframe tag is removed in html
So I'm making a website where I have several divs that should slide either from right, left, or top when user clicks on specific button or nav items. However, none of those are working. None of the divs will slide over when I click on the button that are supposed to make them slide. I'm using pure javascript to perform those actions. So far, I've tried several actions. First, I thought it was because I didn't have window.onload, but after adding it, nothing changed. Then I though maybe the links were still carrying the default actions, so I tried to add e.preventDefault in hopes that was the problem, it also didn't work. Then I found out something weird that made think maybe it is my computer that is not interpreting javascript correctly(weird thought, I know. But I was just considering anything since I was running out of solutions).But actually, it turns out that my computer or the editor is not reading "document" or window in javascript. It says both of them are not defined, which is weird since I have linked the javascript file correctly at the end of the body. So I decided to run it on JSFiddle to check whether it was really just my computer. However, even in JSFiddle the divs still won't slide when I click the button to make them slide.
I'm out of ideas. Since the project I'm doing is big, I extracted the part of divs that are not sliding to make things easier. The div you guys will see, is supposed to slide from the left when we click on the same div.
Here is the html code:
<!DOCTYPE>
<html>
<head>
<title>Emanuel Inacio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css? family=Roboto+Condensed:100,300,400" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="home-page">
<div id="nav-bar"></div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Here is the css code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto Condesed', 'San-serif';
}
#nav-bar {
width: 50%;
height: 100vh;
background-color: #000000;
transform: translateX(-50%);
transition: transform 0.5s;
}
.active {
transform: translateX(50%);
}
Finally, this is the javascript part:
var nav = document.getElementById("nav-bar");
window.onload = function () {
nav.addEventListener("click", function () {
nav.classList.toggle("active");
});
}
Every other div that is not working has pretty much the same code base as this one. Hence I decided to post only this div. Thanks in advance!
It's a specificity issue, ID is more specific than class so your style will never be applied. You need to adjust CSS like this:
var nav = document.getElementById("nav-bar");
window.onload = function() {
nav.addEventListener("click", function() {
nav.classList.toggle("active");
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto Condesed', 'San-serif';
}
#nav-bar {
width: 50%;
height: 100vh;
background-color: #000000;
transform: translateX(-50%);
transition: transform 0.5s;
}
#nav-bar.active {
transform: translateX(50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="home-page">
<div id="nav-bar"></div>
</div>
I'm trying to create a menu where the currently selected (clicked) element has a different background color than the other elements (I'm trying to achieve this using JavaScript). I also use the CSS :hover pseudoclass to make the hovered element stand out by highlighting it. However, I have encountered a strange problem: when I set the background color of any element with JavaScript, its CSS hover behavior no longer works. That is, I can't highlight the element by hovering it anymore. I have checked that in Firefox and Chromium. This is the case for both jQuery and plain JavaScript.
The code is below. I have simplified it a lot to narrow down the problem. First try hovering any of the menu items, then click the "Set background color" link and hover one of the menu elements again. What I expect is the element getting red (#f00) when hovered, regardless of whether the "Set background color" button was clicked or not. For jsfiddle links, go to the bottom.
Vanilla JavaScript:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
p#links a {
display: inline-block;
width: 80px;
height: 22px;
line-height: 22px;
background-color: #00f;
color: #fff;
text-decoration: none;
text-align: center;
font-family: sans-serif;
}
p#links a:hover {
background-color: #f00;
}
</style>
<title>Background color</title>
</head>
<body>
<p id="links">
Link 1
Link 2
Link 3
Link 4
</p>
Set background color
<script>
document.getElementById('setbgcolor').onclick = function() {
var p = document.getElementById('links');
var elements = p.getElementsByTagName('a');
for (var i = 0; i < elements.length; i++)
elements[i].style.backgroundColor = '#ff0';
};
</script>
</body>
</html>
jQuery:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.11.0.js"></script>
<style>
p#links a {
display: inline-block;
width: 80px;
height: 22px;
line-height: 22px;
background-color: #00f;
color: #fff;
text-decoration: none;
text-align: center;
font-family: sans-serif;
}
p#links a:hover {
background-color: #f00;
}
</style>
<title>Background color</title>
</head>
<body>
<p id="links">
Link 1
Link 2
Link 3
Link 4
</p>
Set background color
<script>
$('a#setbgcolor').click(function() {
$('p#links a').css('background-color', '#ff0');
});
</script>
</body>
</html>
And here are jsfiddle.net links for the purpose of convenience:
Pure JavaScript: http://jsfiddle.net/5yQFM/1/
jQuery: http://jsfiddle.net/5yQFM/
The jQuery css() method maps onto the style property which maps onto the style attribute.
Rules inside a style attribute are more specific then rules in a stylesheet, so will always come after them in the cascade.
Instead of altering the CSS on the element directly, alter it by changing the classes the element belongs to and having a pre-prepared stylesheet.
you need to use !important on hover, basically it will increase its priority.
Try this,
p#links a:hover {
background-color: #f00 !important;
}
DEMO
As Quentin said it looks like a dirty one, so in that situation we can make use of the class priority concepts.
HTML:
<a class='normal' href="#">Link 1</a>
<a class='normal' href="#">Link 1</a>
CSS:
.normal { background-color: blue; }
.abnormal{ background-color: yellow; }
.normal:hover { background-color: #f00; }
JS:
$('p#links a').attr('class', 'abnormal normal');
DEMO Non-Dirty one
How about keeping the style in CSS and not in Javascript, by adding classes ?
so the line :
elements[i].style.backgroundColor = '#ff0';
Change to
elements[i].className = 'myClassForBackgrounds';
or in the jQ version
$('p#links a').css('background-color', '#ff0');
to :
$('p#links a').addClass('myClassForBackgrounds');
That way you can set your :hover as you would normally
#links a:hover, .myClassForBackgrounds:hover { background-color:#ff0; }
Just for a more simple answer, in able to just re-enable css rules just have it toggle between the color and "", so
document.getElementById("id").style.backgroundColor = "rgb(255, 125, 15)";
would be if the element wasn't already colored via javascript.
Now, if your element was already colored the code would look like this:
document.getElementById("id").style.backgroundColor = "";
That re-enables CSS so then your selectors will work.
I encountered the same problem and solved it by doing this:
I set a onmouseover event to change the background color to what the hover color is.
I set a onmouseout event to change the background color to the default color.
This way I have set a hover event with pure javascript
I'm very much a beginner when it comes to Javascript and would appreciate any help you can give! I'm creating a feature box on my home page where three headlines will share one picture spot. I've found a script that changes the image when the headlines are rolled over, but it's hard to tell when the page opens that the first headline goes with the first picture. How do I get my hover style to appear already selected, and then stay with the last headline that was rolled over, so it's apparent what headline goes with the photo showing? Here's my example
Here's the code I'm using:
HOVER STYLE:
a.feature:hover {
font-size: 0.9em;
font-family: "trebuchet ms", Arial, Helvetica, sans-serif;
color: #b0171f;
font-weight: bold;
background-image: url(../zimgart/nav/bgfeature.jpg);
background-repeat: no-repeat;
text-decoration: none;
padding: 5px 0 5px 10px;
display:block;
}
JAVASCRIPT:
<script>
/*Rollover effect on different image script-
By JavaScript Kit (http://javascriptkit.com)
Over 200+ free scripts here!
*/
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("photos/feature1.jpg",
"photos/feature2.jpg",
"photos/feature3.jpg")
</script>
Generally you should do such thing with JS code, simplest of course would be to use jQuery. With jQuery it would look like this:
$(document).ready(function(){
$('A.feature').mouseover(functiond(e){
$('A.feature').removeClass('a_hover');
$(this).addClass('a_hover');
$('#bigimage').attr('src',$(this).attr('rel')); // big image effect, just example
})
});
I assume that A-links have attribute rel='bigimageulr'.
To install jQuery just put in header:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>