Why won't jQuery work in my project? - javascript

I'm working on a small project for a friend. I recently learned jQuery on Codecademy, and this is my first time incorporating it in to a web page. However, it doesn't work and I'm not sure why. Also, if someone could direct me on how to center the text boxes, and so on, to look like the image linked below, please let me know.
Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<title>DNA Translator</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script> type="text/javascript" src="script.js"</script>
<script></script>
</head>
<body>
<div id="content">
<form>
DNA: <input type="text" name="dna" placeholder="DNA"><br>
mRNA: <input type="text" name="mrna" placeholder="mRNA"><br>
tRNA: <input type="text" name="trna" placeholder="tRNA"<br>
Amino Acids: <input type="text" name="aminoAcids" placeholder="Amino Acids"<br>
</form>
<button id="button" type="button">Tanslate</button>
</div>
</body>
</html>
Here is my stylesheet.css:
h2 {
font-family:arial;
}
form {
display: inline-block;
}
#content {
margin-top: 200px;
margin-left: auto;
margin-right: auto;
}
#button{
opacity: 0.7;
display: inline-block;
height:25px;
width:300px;
background-color:#293FE3;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
/*display: block;*/
margin: 30px auto;
}
input[type="text"] {
display:/*block;*/ inline-block;
height:20px;
padding:4px 6px;
margin-bottom:10px;
font-size:14px;
line-height:20px;
color:#555;
vertical-align:middle;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px
background-color:#fff;
border:1px solid #ccc;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition:border linear .2s,box-shadow linear .2s;
-moz-transition:border linear .2s,box-shadow linear .2s;
-o-transition:border linear .2s,box-shadow linear .2s;
transition:border linear .2s,box-shadow linear .2s
}
Here is the script.js:
$(document).ready(function() {
$('#button').mouseenter(function() {
$('#button').fadeTo('slow', 1);
});
$('#button').mouseleave(function() {
$('#button').fadeTo('slow', 0.7);
});
});

You need to include jQuery!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

Include the link to the jQuery library:
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
Make sure to do this before you call any .js files.

You're closing your script tag too early
<script> type="text/javascript" src="script.js"</script>
Should be
<script type="text/javascript" src="script.js"></script>

This center alignment of text boxes you can do through css. If you want to use jQuery then download that and include on your page or add directly <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>. And then you are ready to use jQuery. What you want to do if you let us know then we can suggest something.

Related

JQuery loads but doesn't work

was testing some JQuery things (i'm new to this) but i can't make jquery work!
First it worked two or three times and then it stopped working (pretty weird) so i changed a few things and now it doesn't work at all. JQuery and script.js load but doesn't seem to work
index.html
<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.1.4.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Sansita+One" />
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="script.js" type="text/javascript"></script>
<title>Manuel Pepe</title>
</head>
<body>
<div id="nav-bar" class="nav-bar">
<div id="container">
<img id="nav-button" class="nav-button" src="imgs/menu.png" />
<div id="nav-menu" class="nav-menu">
</div>
</div>
</div>
<div class="front-page">
<div class="logo">
<h1>Manuel Pepe</h1>
<h3>Test</h3>
</div>
</div>
</body>
</html>
main.css
html{
position:relative;
height:100%;
background-color: #6E6E6E;
}
#container{}
.nav-button{
position:absolute;
margin-top: -2px;
margin-left: 7px;
width: 32px;
height: auto;
z-index:1;
}
.nav-menu{
background-color:#424242;
position:absolute;
top:0px;
left:0px;
width: 200px;
height:100%;
}
.logo{
position: relative;
top:250px;
left:0;
right:0;
bottom:0;
margin: auto;
width: 225px;
}
.logo h3, h1{
text-align:center;
font-family: Sansita One;
color: #222;
text-shadow: 0px 2px 3px #555;
}
.logo h1{
margin-bottom: 3px;
}
.logo h3{
margin-top: 2px;
}
.hover-rotate:hover {
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
script.js
$(document).ready(function(){
$("#nav-button").mouseover(function(){
$(this).addClass("hover-rotate");
});
$("#nav-button").mouseleave(function(){
$(this).removeClass("hover-rotate")
})
});
Why isn't this working?
Also, is there any way to improve the JQuery code?
You can use the $() constructor instead of $(document).ready(function(){...:
$(function () {
$("#nav-button").mouseover(function(){
$(this).addClass("hover-rotate");
});
$("#nav-button").mouseleave(function(){
$(this).removeClass("hover-rotate")
})
});
Set a timeout inside your javascript with a condition like
if (typeof jQuery != "undefined")
Seems to be working fine when I'm testing it. See this JSFiddle: https://jsfiddle.net/v1t54urc/2/
Are you sure your jQuery is loaded? Also make sure your CSS is loaded correctly. Try to use the following code in the header to be sure:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
One more thing. Don't forget the ; at the end on the code, like this:
$("#nav-button").mouseleave(function(){
$(this).removeClass("hover-rotate");
});
Change the line to ensure that JQuery is loading correctly:
<script src="jquery-2.1.4.min.js" type="text/javascript"></script>
by
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
If you do the change and the web works, the old line can't find the "jquery-2.1.4.min.js" in the folder.

Jquery Loop for timed banner animation

I have been learning Jquery and i made a small banner that animates out, and back in giving information. But, i would like it to be on a timed loop; ie. It runs the animation every 5 mins.
This is the code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
do {
var i = 1
$(document).ready(function(){
$("#twitter").delay(200).animate({left:'225px'}, "slow").delay(5000).animate({left:'-225px'}, "slow");
$("#tag_line").delay(300).fadeIn(2000).delay(2500).fadeOut(1000);
$("#content").delay(1000).slideDown("slow").delay(3000).slideUp("slow");
var box=$("#box");
box.animate({width:'toggle'},"normal").delay(500);
box.animate({height:'180px'},"slow").delay(3000);
box.animate({height:'100px'},"slow").delay(750);
box.animate({width:'toggle'},"normal").delay(3000);
});
}
while (i < 2)
</script>
<style>
#twitter
{
height:100px;
width:140px;
position:absolute;
z-index:20;}
#box
{
background:lightgrey;
height:100px;
width:350px;
opacity:0.2;
display:none;
position:absolute;
z-index: 10;
border-style: outset;
border-width: large;
border-color: black;
}
#container {
width: 100px;
height: 100px;
position:absolute;
}
#tag_line {
position:absolute;
z-index:15;
display:none;
padding-left:15px;
font-size:30px;
height:60px;
line-height:24px;
font-family:"SF Slapstick Comic";
color: red;
}
#content {
position:absolute;
z-index:15;
display:none;
padding-left:15px;
padding-top:90px;
font-size:30px;
height:60px;
line-height:24px;
font-family:"SF Slapstick Comic"
}
</style>
<title>Test Jquery</title>
<meta charset="utf-8">
</head>
<body>
<div id="container">
<div id="tag_line"><h1>Twitter</h1></div>
<div id="twitter"><img src="img/logo/twitter.png" width="140" height="100"></div>
<div id="content"><h2>#Geekster_Alan</h2></div>
<div id="box"></div>
</div>
</body>
</html>
How would i get it too loop?
Also, if you see anything wrong with the general code it would be appreciated if you point it out! I am new to Jquery, JS and HTML/CSS so positive criticism will help me learn!
Thanks!
You can use the setInterval function to execute your code every X ms
See details here: http://www.w3schools.com/js/js_timing.asp

jquery colorbox isn't working with mootools v1.1

I wanna use colorbox for 'join us menu' but it isn't working.
and I also tried fancybox, and got a same result..
actually colorbox performed well until I add mootools v1.1 to my jsp code.
I dont know what is mootools v1.1. I just copy some source that from
some awesome website for
using scroll view effect(I dont know exactly what this effect's name) on my page
scroll view effect is working well. you can see that when you clicked 'append1,2,3'
sorry for my poor english skill.
here is my code
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spring Builder : append your heart </title>
<link rel="stylesheet" href="colorbox.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="colorbox.js"></script>
<script type="text/javascript" src="mootools.v1.1.js"></script>
<script type="text/javascript">
$(function(){
$('.joinus').colorbox({
});
});
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Times New Roman', serif;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: 0;
}
#main_header{
width:1280px;
padding-left: 10px;
line-height:60px;
background: #59DA50;
color:#FFFFFF;
}
#main_bar{
overflow: hidden;
background: #EAEAEA;
}
#main_bar>ul.main_bar_left{
overflow: hidden;
float: left;
}
#main_bar>ul.main_bar_right{
overflow: hidden;
float: right;
}
#main_bar>ul.main_bar_left>li{
float:left;
}
#main_bar>ul.main_bar_right>li{
float:left;
}
#main_bar a{
display: block;
padding: 5px 20px;
border-right: 1px solid #BDBDBD;
}
#main_bar a:HOVER{
background: #CEF279;
}
#main_bar input{
margin:5px;
width: 80px;
}
#main_footer{
width:1280px;
margin:0 auto;
margin-bottom: 10px;
background: #353535;
color: #FFFFFF;
text-align: center;
padding: 10px;
}
#main_content {
margin:0px;
overflow:hidden;
/*height:387px;
width:99,9%;*/
border:none;
position:relative;
}
#main_content_bg {
width:5000px;
height:600px;
background-image:url(http://placehold.it/5000x600);
background-position:top left;
background-repeat:no-repeat;
background-color:#E6E6E4;
position:relative;
}
.section_content {
width:990px;
height:380px;
position:absolute;
}
#section1 {
left:0px;
top:0px;
}
#section2 {
left:1570px;
top:0px;
}
#section3 {
left:2880px;
top:0px;
}
</style>
</head>
<body>
<header id="main_header">
<h1>Spring Builder</h1>
</header>
<nav id="main_bar">
<ul class="main_bar_left">
<li><a id="append1" href="#">append1</a></li>
<li><a id="append2" href="#">append2</a></li>
<li><a id="append3" href="#">append3</a></li>
</ul>
<ul class="main_bar_right">
<li><input type="text" value="id" id="id" name="id"/></li>
<li><input type="password" id="pw" name="pw"/></li>
<li>Login</li>
<li>Join us</li>
</ul>
</nav>
<div id="main_content">
<div id="main_content_bg">
<div id="section1" class="section_content">
<h1>section1</h1></div>
<div id="section2" class="section_content">
<h1>section2</h1></div>
<div id="section3" class="section_content">
<h1>section3</h1></div>
</div>
</div>
<footer id="main_footer">
</footer>
<script src="scrollstyle.js" type="text/javascript"></script>
</body>
</html>
It's probably happen a conflict between Mootools and jQuery because both libraries are using $ sign, try to convert $ to jQuery for your jQuery code:
jQuery(function(){
jQuery('.joinus').colorbox({
});
});
or wrap your code inside:
jQuery(function($) {
$('.joinus').colorbox({
});
});

jquery's round plugin + border

I wonder how can i get a rounded corner div in IE with borders?
According to jquery plugin jquery.corner.js the job it would be very simple to achieve!
But, I can't make a rounded corner div "with border" working in internet explorer greater than 5...
The following code serves only for testing purposes.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>somepage</title>
<script type="text/javascript" src="classes/jquery.js"></script>
<script type="text/javascript" src="classes/jquery.corner.js"></script>
<script type="text/javascript">
$("#teste").corner("round 8px").parent().css('padding', '3px').corner("round 10px");
</script>
<style type="text/css">
.demo{
height: 34px;
width: 450px;
background: blue;
}
</style>
</head>
<body bgcolor="green">
<div id="teste" class="demo">
</div>
</body>
</html>
What am I doing wrong?
Many thanks, as always.
Have you tried CSS3PIE yet?
I would recommend that you go with a CSS way to do it.
You go here and select the colors for your corner.
http://www.spiffycorners.com/
Once done this will give you the css you need to put and sample code how to use it.
It should work very nicely in all browsers. I used it. No images required.
This is sample styles:
<style type="text/css">
.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#b20000}
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #870000;
border-right:1px solid #870000;
background:#9f0000}
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #6f0000;
border-right:1px solid #6f0000;
background:#a30000}
.spiffy3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #a30000;
border-right:1px solid #a30000;}
.spiffy4{
border-left:1px solid #870000;
border-right:1px solid #870000}
.spiffy5{
border-left:1px solid #9f0000;
border-right:1px solid #9f0000}
.spiffyfg{
background:#b20000}
</style>
This is how to use it:
<div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b></b>
<div class="spiffyfg">
<!-- content goes here -->
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b></b>
</div>
Happy styling!!

How Can I Change The Style Of A Div On Mousedown?, or any other event for that matter…

But it doesn't work. You can see I'm trying to change the class of the div containing season.png onmousedown and revert it onmouseup.
What am I missing?
Thanks.
Mike
It's working just fine. There is nothing wrong with the code that you posted, so if you can't see it there has to be something wrong with your css.
I used this to test the code:
<html>
<head>
<title>Test</title>
<style>
.winter { border: 1px solid blue; }
.spring { background: yellow; }
.summer { background: green; }
</style>
</head>
<body>
<div class="winter spring" onmousedown="this.className='winter summer'" onmouseup="this.className='winter spring'">
<img src="Resources/season.png" />
</div>
</body>
</html>
It works for me so I guess you need to run some checks on your code. Make sure your css is included.
Post the complete code you are using so we can look for errors.
This is the code I used:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>onmouseevents on div</title>
<style type="text/css">
body
{
background-color: #FFF;
color: #000;
}
.page
{
margin: 10px auto;
width: 640px;
}
.winter
{
background-color: cyan;
}
.spring
{
color: magenta;
}
.summer
{
color: yellow;
}
</style>
</head>
<body>
<div class="page">
<div class="winter spring" onmousedown="this.className='winter summer'" onmouseup="this.className='winter spring'">
Cats!
</div>
</div>
</body>
</html>
As an alternative - I have used the hover pseudoselector for this.
Here's a personal example:
.sidebar ul.sidebuttons li a
{
font: bold italic x-large/1.1 trebuchet ms,verdana,sans-serif;
display: block; /* effect should be in a new box not inline */
text-decoration: none; /* turn off link underlining */
color: yellow;
background: black url(sidebar_off.png) no-repeat center;
padding: 10px 10px 10px 5px;
margin: 0px 0px 20px 0px;
border: white outset;
border-width: 2px 2px 2px 0px;
text-align: right;
text-transform: lowercase;
}
.sidebar ul.sidebuttons li a:hover
{
background: yellow url(sidebar_on.png) no-repeat center;
color: black;
border: black inset;
text-decoration: none;
border-width: 2px 2px 2px 0px;
}
The HTML looks like:
<div class="sidebar">
<ul class="sidebuttons">
<li>Go Somewhere</li>
If you're having trouble, try Firefox Web Developer add-on or something similar to check the style information on that part of the page. It might not be triggering what you think it should be triggering.
<style>
.summer{ background-color:red;}
.spring{ background-color:blue;}
.aa{ font-size:18px;}
.bb{ font-size:36px;}
</style>
<div class="aa spring" onmousedown="this.className='summer aa'" onmouseup="this.className='spring bb'">
aaaaaaaaa
</div>
I test this code, it works well.
I think, not javascript problem. Try to check css, or other things.
Maybe put js code and css code on the img is what you need.
It's very easy with jQuery:
$(".winter").mouseup(function() {
$(this).addClass("spring");
$(this).removeClass("summer");
},function(){
$(this).addClass("summer");
$(this).removeClass("spring");
});
The Javascript file I was using was a very inflexible library. I solved the problem a different way.

Categories