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.
Related
I'm beginning with this whole coding thing (it's beautiful) but I just found myself with an issue.
There's landing page I found and I kind of copied, it has a button that works as a hyperlink to another page but instead of that button, I have the code for a style sheet, it's kind of like a form people have to fill. So you press the button and the form pops out.
I have the code of the original landing page and I also have the code for the form but I don't know how to blend them, please help.
The first one is the original button code that takes people to https://myimstrategy.com/50perday-2/. I want to replace that site for a form that pops out. That's the second code in the bottom, I don't know how to merge both codes. I attached an image of the original button. I don't want to delete it, I just want the form to pop out when I click on it.
Thank you very much for your help!
.el-content{
display: inline-block;
width: auto;
height: auto;
min-width: 894px;
min-height: 114px;
}
.ib2-button {
color: rgb(15, 15, 15);
background-color: rgb(25, 202, 6);
border-color: rgb(0, 174, 0);
border-radius: 5px;
text-shadow: rgb(147, 138, 138) 1px 1px 0px;
background-image: none;
min-width: 920px;
min-height: 123px;
width: auto;
height: auto;
font-weight: bold;
font-size: 80px;
}
<div class="el-content">
Claim Your Spot Now >>
</div>
<link href="//app.webinarjam.net/assets/css/register_button.css" rel="stylesheet">
<div style="margin:auto;width:300px;">
<div class="embedded-joinwebinar-button">
<button type="button" class="btn btn-default css3button" title="regpopbox_35246_b21043f77c">
<span>Register now</span>
</button>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js" language="javascript" type="text/javascript"></script>
<script src="//app.webinarjam.net/assets/js/porthole.min.js" language="javascript" type="text/javascript" async></script>
<script src="//app.webinarjam.net/register.evergreen.extra.js" language="javascript" type="text/javascript" async></script>
If you want to create a popup, you're going to want to use javascript.
This is typically referred to as a modal. Here is a link to a tutorial: How TO - CSS/JS Modal
You can use bootstrap modal, or add onclick="showForm()"
And then you put id="form" to the form. Then in the head tag put
<script>
function showForm(){
document.getElementById("form").style.display = "inline-block"; //It must have display: none, the form, and this will make it display
}
</script>
I couldn't find your image but I got it, you want to show a pop on a button click. You can simply provide a href like below:
<link href="jsFunctionName()" class="buttonClass">Open Form</link>
And try using jquery dialogue on link clicked via jquery. https://jqueryui.com/dialog/
e.g.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function jsFunctionName() {
$("#dialog").dialog();
} );
</script>
<div id="dialog" title="My Form">
<form>
</form>
</div>
Completely new to HTML, I need an html file which does the above:
Some background color for the whole page.
In the center of the page, a block of text within a box of white background color.
Directly under (outside of) the white box, a small line of text at the center of page.
There is probably a better way to do it, but this is my way:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:color here;
}
#example-name {
background-color:white;
}
#example-2 {
text-align:center;
}
</style>
</head>
<body>
<div id='example-name' style="margin: 0 auto">
example content
</div>
<div id='example-2'>
<p>example text</p>
</div>
</body>
<html>
<html>
<body style="background-color:tan">
<p style="margin-left: 30%;margin-right: 30%; background-color: white; padding: 20px 20px 20px 20px;">
Hi.<br>
Thanks for using Mailgun! Please confirm your email address by clicking below!<br>
I hope this answers your question!
</p>
</body>
</html>
Use the css elements margin, background-color, and padding.
I have two simple script html:
<html>
<body>
<style>
.myBtn{
display: none
}
.myBtnReg{
display: block
}
</style>
<button class="myBtnReg" id="btn1" >Click Me!</button>
<script src="jquery-1.11.2.min.js"></script>
<script src="js.js"></script>
</body>
</html>
and javascript:
$(function(){
$("button").mouseenter(function(){
$(this).attr("class", "myBtn");
});
$("button").mouseleave(function(){
$(this).attr("class", "myBtnReg");
});
});
I'm trying to make an effect where the button changes class when ever the mouse enters and change it back when the mouse leaves, the code above doesn't seem to work properly, when I put my mouse over the button it flickers, so I assume I changes class constantly for some reason.
You can put button inside div and then toggleClass of button when you hover over div (you also need to set fixed height on div)
$('div').hover(function() {
$(this).find('button').toggleClass('myBtn');
});
div {
height: 50px;
}
.myBtn {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class="myBtnReg" id="btn1">Click Me!</button>
</div>
your style should be like
.myBtn{
background-color:RED;
}
.myBtnReg{
background-color:Green;
}
your total html is like this
<html>
<body>
<style>
.myBtn{
background-color:RED;
}
.myBtnReg{
background-color:Green;
}
</style>
<button class="myBtnReg" id="btn1" >Click Me!</button>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script src="js.js"></script>
</body>
</html>
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>
$('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>