I take a script from jsfiddle, and obviously it work, but when i try to run it locally, it stops to work. I read in another question that to use jsfiddle code, I need to put my script into:
$(document).ready(function() {
});
I do it for the following code, but it doesn't work even. Can someone please help me?
<html>
<head>
<style type="text/css">
li {
border: 1px solid #ccc;
margin-bottom:3px;
padding: 2px 5px;
}
button {
margin-left: 10px
}
</style>
<script type=”text/javascript”>
$(document).ready(function() {
$('#btnName').click(function(){
var text = $('#inputName').val() + '<button>x</button>';
if(text.length){
$('<li />', {html: text}).appendTo('ul.justList')
}
});
$('ul').on('click','button' , function(el){
$(this).parent().remove()
});
});
</script>
</head>
<body>
<input type="test" id="inputName" />
<button id="btnName">Add</button>
<ul class="justList"></ul>
</body>
</html>
Two reasons:
Because you haven't included jQuery on the page. You need
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
somewhere before your script (with that path or some other valid path to jQuery).
The quotes here
<script type=”text/javascript”>
are fancy quotes. They must be normal quotes. Or, best practice, just don't include the type at all; JavaScript is the default.
It's also worth formatting your code in a reasonable, consistent way.
E.g.:
<html>
<head>
<style type="text/css">
li {
border: 1px solid #ccc;
margin-bottom:3px;
padding: 2px 5px;
}
button {
margin-left: 10px
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(document).ready(function() {
$('#btnName').click(function() {
var text = $('#inputName').val() + '<button>x</button>';
if (text.length) {
$('<li />', {
html: text
}).appendTo('ul.justList')
}
});
$('ul').on('click', 'button', function(el) {
$(this).parent().remove()
});
});
</script>
</head>
<body>
<input type="test" id="inputName" />
<button id="btnName">Add</button>
<ul class="justList"></ul>
</body>
</html>
Related
I give. I can't seem to get the jsfiddle code to work when I transfer it to dreamweaver? I must be missing something simple?? It works fine in jsfiddle. I added the ready function as opposed to the onload, but it still is not working.
$("document").ready(function() {
var h1 = $('div#greeting h1');
h1.hide().contents().each(function() {
var words;
if (this.nodeType === 3) {
words = this.data.split(/\s+/).map(function(w) {
return '<span>' + w + '</span>';
}).join('');
$(this).replaceWith(words);
} else if (this.nodeType === 1) {
$(this).html($(this).html().split(/\s+/).map(function(w) {
return '<span>' + w + '</span>';
}).join(''));
}
});
h1.find('span').hide().each(function() {
if (!$.trim(this.innerHTML)) {
$(this).remove();
}
});
$('#start').on('click', function() {
h1.show().find('span').each(function(i, e) {
h1.queue(function(next) {
$.when($(e).fadeIn(150).fadeOut(150)).done(next);
});
});
});
$('#stop').on('click', function() {
h1.finish();
});
$('#reset').on('click', function() {
h1.finish();
});
.box {
border: 1px solid #E38E34;
background-color: #FFE7BF;
height: 150px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
#title {
margin: 5px;
border-bottom: 1px solid #E38E34;
color: #C46908;
font-weight: bold;
}
#message {
margin: 5px;
}
h1 {
font-size: 50px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css">
<title>TedsCode</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="speedread.js"></script>
</head>
<body>
<div class="box" />
<div id="title"><span id="name">Title</span>
</div>
<div id="message" />
<div id="greeting" />
<input type="button" value="Read" id="start" />
<input type="button" value="Stop" id="stop" />
<input type="button" value="Reset" id="reset" />
<h1><center>This is a test to see if this script displays one word at a time and functions correctly.</center></h1>
</body>
</html>
You hava a syntax error in js.
I comment on something: add "});" to js, and remove redundant reference of jquery.
Code snippet works now
I can see two things:
1-Why are you using two version of jquery at the same time 1.9.1 and 2.1.0?
2-In the code you paste, the $("document").ready(function() {
isn't properly closed
Are you receiving any error in the console or the network ?
So I'm learning how to use prototype and for the most part it's pretty neat, but I noticed while working on a project that $( ).setStyle({}) isn't working. I don't know why, I even found a tutorial, copy pasted their setStyle example into Brackets and I still get nothing. Anybody know why?
Here's the example code:
<!DOCTYPE html>
<html>
<head>
<title>Prototype examples</title>
<script type="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script>
function setColor(){
$('test').setStyle({
backgroundColor: '#900',
fontSize: '12px'
});
}
</script>
</head>
<body>
<p id="test">Click the button to see the result.</p>
<input type="button" value="Click" onclick="setColor();"/>
</body>
</html>
And here is my project code:
<!DOCTYPE html>
<html>
<head>
<title>Protoype</title>
<h1>Lighting Effects</h1>
<style>
#div1{
width:600px;
height:350px;
background-color: #6699cc;
}
#div2{
background-color: #aaaaff;
width:80px;
height:80px;
padding:20px;
position:relative;
left:240px;
top:105px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script>
function btn1(){
$("div1").setStyle({
background:'radial-gradient(at top left, white, #6699cc)';
});
$("div2").setStyle({
boxShadow:'10px 10px 10px #808080';
});
}
function btn2(){
$("div1").setStyle({
background:'radial-gradient(at top right, white, #6699cc)';
});
$('div2').setStyle({
boxShadow:'-10px 10px 10px #808080';
});
}
function btn3(){
$('div1').setStyle({
background:'radial-gradient(at bottom, white, #6699cc)';
});
$('div2').setStyle({
boxShadow:'0px -10px 10px #808080';
});
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
LIGHTS:<br/>
<input type="button" id="btn1" value="Top Left" onClick="btn1()"/><br/>
<input type="button" id="btn2" value="Top Right" onClick="btn2()"/><br/>
<input type="button" id="btn3" value="Bottom" onClick="btn3()"/><br/>
</div>
</div>
</body>
</html>
Thanks in advance!
The script has syntax errors. Remove the unnecessary semicolons, like so:
<script>
function btn1(){
$("div1").setStyle({
background:'radial-gradient(at top left, white, #6699cc)'
});
$("div2").setStyle({
boxShadow:'10px 10px 10px #808080'
});
}
function btn2(){
$("div1").setStyle({
background:'radial-gradient(at top right, white, #6699cc)'
});
$('div2').setStyle({
boxShadow:'-10px 10px 10px #808080'
});
}
function btn3(){
$('div1').setStyle({
background:'radial-gradient(at bottom, white, #6699cc)'
});
$('div2').setStyle({
boxShadow:'0px -10px 10px #808080'
});
}
</script>
Side note: I recommend you learn to use your browser's Developer Tools. All major browsers should have them. It makes it easier to detect errors like these, hence enhance your learning process.
http://jsfiddle.net/TDmRv/1/
What I want to do: I want the div with the id "theDiv" to be wrapped around the text that gets inputted onto the page. I want this so the text will appear in multiple divs that are created.
Explained more:
Okay, so what I am trying to do is type some input in and have it display with in a div- that works fine, but I want the div to wrap around it when I click input. So every time I click "add" the text gets wrapped into a div and is displayed. BUT I am also trying to make this appear multiple times, so every time I add input the div is wrapped around the text. Finally I am trying to have those two buttons placed into there, I assume those would have to be inserted when "add" is clicked with jQuery. I just need some guidance because I am struggling to comprehend how this will work.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#edit").click(function(){
$("#theDiv").css("background-color","red");
});
});
$(document).ready(function(){
$("#delete").click(function(){
$("#theDiv").remove();
});
});
$(document).ready(function(){
$("#add").click(function(){
$('#edit').wrap('<div class="theDiv" />');
});
});
</script>
<style>
#theDiv {
border: 1px solid rgb(204, 204, 204);
margin: 5px 0pt;
padding: 5px;
background-color: blue;
height:50px;
}
button {
float:right;
}
</style>
</head>
<body>
<div id="hold">
<button id="edit">Edit</button><button id="delete">Delete</button>
</div>
<form>
<div><textarea class="textI" id="textI2" style="width: 400px; height: 50px;"></textarea></div>
<div><input type="button" id="add"value="add" onclick="theDiv_append()" /></div>
</form>
<script language="javascript">
$('.textI').each(function() {
var default_value = this.value;
$(this).focus(function() {
if(this.value == default_value) {
this.value = '';
}
});
});
function theDiv_append() {
$('#theDiv').append($('#textI2').val());
}
</script>
</body>
</html>
try this , change #add click to this , it works in jsfiddle, just add the text, I didn't do that , but you will see how to add new blue div
$("#add").click(function(){
var newRow = $('#theDiv').clone();
$('#hold').append(newRow);
$('#edit').wrap('<div class="theDiv" />');
});
});
All my code seems to work except my javascript am I doing something wrong?
Thanks Im only a beginner!
I am trying to make the background change when the mouse goes over the 'Tags' tab but it wont do it? What is going on?
HTML:
<html>
<head>
<script language="JavaScript" type="text/javascript">
// This changes color on mouseover, leaves existing color box.
$('.tab-item').mouseover(function() {
$(this).addClass("tab-mouseover");
}).mouseout(function() {
$(this).removeClass("tab-mouseover");
});
// This changes color when clicked, removed old color box.
$('.tab-item').click(function() {
$('.tab-item').removeClass("tab-selected");
$(this).addClass("tab-selected");
});-->
</script>
<link href="arg.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="tab-item tab-selected" id="search-box">
Search
</div>
<div class="tab-item" id="tag-box">
Tags
</div>
</body>
</html>
CSS:
.tab-item {
-moz-border-radius: 10px;
border-radius: 10px;
font: 14px helvetica;
color: #000;
height: 20px;
float: left;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
position: relative;
width: 75px;
}
.tab-mouseover {
background: #bdbdbd;
}
.tab-selected {
background: #c0c0c0;
}
Thanks!
James
You're using jQuery but haven't included it.
You also need to put your jquery code into the jquery ready event:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
// This changes color on mouseover, leaves existing color box.
$(function(){
$('.tab-item').mouseover(function() {
$(this).addClass("tab-mouseover");
}).mouseout(function() {
$(this).removeClass("tab-mouseover");
});
// This changes color when clicked, removed old color box.
$('.tab-item').click(function() {
$('.tab-item').removeClass("tab-selected");
$(this).addClass("tab-selected");
});
});
-->
</script>
You haven't added your library (jQuery, I think) as a source here.
Add it like this:
<script src='http://foo.com/bar/library.js'></script>
If you are, indeed using jQuery, you can directly add the following code to make it work:
<script src='http://code.jquery.com/jquery-1.6.4.js'></script>
Note that the above means you are depending on the availability of the jQuery website and not your own.
As per James' comment on this, yes, you can scrap the jQuery completely, but I'd recommend you to learn JavaScript yourself instead of copying code from a website. If you want to change the background color of the field onmouseover, use code like this:
<div onmouseover="this.style.backgroundColor='#bdbdbd';" onmouseout="this.style.backgroundColor='white';">Search</div>
Or
<div onmouseover='this.className="tab-mouseover"' onmouseout='this.className=""'>Search</div>
Or without JavaScript and just simple CSS:
<style>
.tab-mouseover:hover{
background: #bdbdbd;
}
</style>
<div class='tab-mouseover'>Search</div>
I can't answer the latter part, because I don't understand the use of deleting and then adding the same class to an element onclick.
Well, first, you haven't included a link to the jQuery library in your code. As a result, your code won't work, wherever you put it.
Second, since your code is in a script element at the head of the document, it will execute before the body of the document has been rendered. You need to put it in a
$(document).ready(function() {
/*
* Your code here
*/
});
block.
Try this:
$('.tab-item').hover(
function() {
$(this).addClass('tab-mouseover');
},
function() {
$(this).removeClass('tab-mouseover');
}
);
$('.tab-item').click(function() {
$('.tab-selected').removeClass('tab-selected');
$(this).addClass('tab-selected');
});
http://jsfiddle.net/7dDTv/1/
$('input.text-1').wrap('<span class="textfield-1"></span>');
.textfield-1 {
border: 1px solid #d00;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="text text-1" />
Wrap() doesn't seem to work. I don't see <span>s wrapped around input in firebug. If they were wrapped, inputs would be hidden with display: none, but they aren't.
What am I doing wrong here?
Works ok for me. Is it possible that you have a javascript error on the page that is preventing the code from executing?
Here's my test. Element does become invisible and I can see that it is wrapped in the span.
<html>
<head>
<style type="text/css">
.textfield-1 {
border: 1px solid #d00;
display: none;
}
</style>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
$('input.text-1').wrap('<span class="textfield-1"></span>');
});
</script>
</head>
<body>
<input type="text" class="text text-1" />
</body>
</html>