I am trying to make a banner, where there should be some text going down from the top to the bottom. The code is just for a test, to see if it is working, so I will optimize it later. I have made this code:
<!DOCTYPE html>
<html>
<head>
<style>
div.background {
background: url(banner.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity:0.6;
filter:alpha(opacity=60);
width: 200px;
height: 500px;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
#animation{font-size:20px; margin-top:40px; margin-left:50px;}
</style>
<script>
function loadImage() {
$("#animation").animate({ marginTop: "300px" }, 1500 ).animate({ marginBottom: "40px" }, 800 );
}
</script>
</head>
<body onload="loadImage()">
<div class="background">
<div class="transbox" id="animation">
<p>Text to fly in</p>
</div>
</div>
</body>
</html>
If I put an alert("test"); in the javascript code, I get the alert. But when I try to animate something, nothing happen. So I guess it is the animation code in the javascript, there is something wrong with? Can anybody see what I am doing wrong?
Best Regards
Mads
1 Include JQuery library.
2 Use absolute values in animate function:
$("#animation").animate({ top: 300 }, 1500 ).animate({ top: 40 }, 800 );
For this you need to make your <div class="transbox" id="animation"> as absolute positioned.
You are using Jquery here you just forget to include it into your code:
Working Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
div.background {
background: url(banner.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity:0.6;
filter:alpha(opacity=60);
width: 200px;
height: 500px;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
#animation{font-size:20px; margin-top:40px; margin-left:50px;}
</style>
<script>
function loadImage() {
$("#animation").animate({ marginTop: "300px" }, 1500 ).animate({ marginBottom: "40px" }, 800 );
}
</script>
</head>
<body onload="loadImage()">
<div class="background">
<div class="transbox" id="animation">
<p>Text to fly in</p>
</div>
</div>
</body>
</html>
.animate() is the jQuery function. You need to include the jQuery library to use it.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
div.background {
background: url(banner.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity:0.6;
filter:alpha(opacity=60);
width: 200px;
height: 500px;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
#animation{font-size:20px; margin-top:40px; margin-left:50px;}
</style>
<script>
function loadImage() {
$("#animation").animate({ marginTop: "300px" }, 1500 ).animate({ marginBottom: "40px" }, 800 );
}
</script>
</head>
<body onload="loadImage()">
<div class="background">
<div class="transbox" id="animation">
<p>Text to fly in</p>
</div>
</div>
</body>
</html>
Just include jQuery lib in your page in header section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Related
Start tag head seen but an element of the same type was already open.
also I got some other errors:
" Saw <?. Probable cause: Attempt to use an XML processing instruction in HTML. (XML processing instructions are not supported in HTML.) "
and
" No p element in scope but a p end tag seen. "
I have no clue how to fix them.
<!DOCTYPE html>
<html lang="pl">
<style>
html, body { margin: 0; padding: 0; color: black; background-color: grey;}
#strona { position: absolute; color: white}
#rects { position: relative; width: 300px; height: 125px; border: 1px solid #FF0000; color: yellow; margin: 5px; padding: 2px;}
</style>
<head>
<meta charset="UTF-8"/>
<title> site</title>
</head>
<body>
<div> <script>
function clickbutton1(){
document.getElementById("opis").innerHTML = Date();
}
</script>
</div>
<div id="strona">
<h1>test</h1>
<?php
echo "<p>data replacement</p>";
echo "<div id='rects'>
<!-- starting of the function -->
<p id='opis'> internal description </p>
<script>
document.getElementById('rects').onclick = clickbutton1;
</script>
</div>";
?>
</div>
</body>
</html>```
There were some added characters under div#strona that were interfering with how the code was being run.
In order to make the Javascript functional, add the clickbutton1() onclick function directly to the HTML element.
Below is the reformatted code with HTML/CSS/Javascript in their own respective files:
function clickbutton1() {
return document.getElementById("opis").innerHTML = Date();
}
html,
body {
margin: 0;
padding: 0;
color: black;
background-color: grey;
}
#strona {
position: absolute;
color: white
}
#rects {
position: relative;
width: 300px;
height: 125px;
border: 1px solid #FF0000;
color: yellow;
margin: 5px;
padding: 2px;
}
<head>
<meta charset="UTF-8" />
<title> site</title>
</head>
<body>
<div id="strona">
<h1>test</h1>
<div onclick="clickbutton1()" id='rects'>
<p id='opis'></p>
</div>
</div>
</body>
#weemizo Yes! I added the CSS styles to a style tag and the JS into a script element. They are now both placed in the head tag.
<html>
<head>
<meta charset="UTF-8" />
<title>Site</title>
<style>
html,
body {
margin: 0;
padding: 0;
color: black;
background-color: grey;
}
#strona {
position: absolute;
color: white
}
#rects {
position: relative;
width: 300px;
height: 125px;
border: 1px solid #FF0000;
color: yellow;
margin: 5px;
padding: 2px;
}
</style>
<script>
function clickbutton1() {
return document.getElementById("opis").innerHTML = Date();
}
</script>
</head>
<body>
<div id="strona">
<h1>test</h1>
<div onclick="clickbutton1()" id='rects'>
<p id='opis'></p>
</div>
</div>
</body>
</html>
I am trying to get a JavaScript listener to work but nothing changes.
Here is the full code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#trigger {
padding: 20px;
background-color: red;
border: 1px solid white;
width: 100px;
cursor: pointer;
}
#box {
padding: 20px;
background-color: green;
border: 1px solid white;
width: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="trigger">Click Here</div>
<div id="box">
content should change
</div>
<script type="text/javascript">
document.addEventListener("click", () => {
document.getElementById("trigger"), () => {
document.getElementById("box").innerHTML = "New Box Text";
}
});
</script>
</body>
</html>
I know I can do this using jQuery, but I want to do it with just pure, vanilla JavaScript.
When I click on #trigger, #box text is not changing. What I'm I doing wrong?
In order to run your code only, when the DOM completely loaded and parsed, add an evenet listener under the DOMContentLoaded event, then use querySelector to select the element with the #trigger id, then add a click event listener to it and use querySelector again to select the element with #box id and modify its .innerHTML accordingly:
document.addEventListener('DOMContentLoaded', () => {
document.querySelector("#trigger").addEventListener('click', () => {
document.querySelector("#box").innerHTML = "New Box Text";
});
});
The great thing about using querySelector and also querySelectorAll is that they provide a similar functionality compared to jQuery, when selecting elements.
Example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#trigger {
padding: 20px;
background-color: red;
border: 1px solid white;
width: 100px;
cursor: pointer;
}
#box {
padding: 20px;
background-color: green;
border: 1px solid white;
width: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="trigger">Click Here</div>
<div id="box">
content should change
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
document.querySelector("#trigger").addEventListener('click', () => {
document.querySelector("#box").innerHTML = "New Box Text";
});
});
</script>
</body>
</html>
Add the listener to the box element rather than the entire page:
document.getElementById("trigger").addEventListener("click", () =>
document.getElementById("box").innerHTML = "New Box Text"
);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#trigger {
padding: 20px;
background-color: red;
border:1px solid white;
width: 100px;
cursor: pointer;
}
#box {
padding: 20px;
background-color: green;
border:1px solid white;
width: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="trigger">Click Here</div>
<div id="box">
content should change
</div>
</body>
</html>
Sorry to ask but I have searched but coming up with nothing.
I have some divs ( I know everyone has a 'div' ) and I want to add feeds\content
See my code below, in these 'widgets' can I add things like twitter and my email and a news feed?
also not to be too picky, can I just get text only ?
How do I go about it ? Is their something
here is the html, jquery and css code...
<!doctype html>
<html lang="en">
<head>
<title>snap to grid</title>
<meta charset="utf-8">
<meta name="description" content="nothing yet">
<meta name="author" content="Pavle Stojanovic">
<link rel="stylesheet" href="snap.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( ".widgets" ).draggable({ grid: [ 10, 10 ] });
$( ".widgets" ).draggable({
containment: "#draggable-container",
drag: function(event){
if($('.widgets').position().left + $('.widgets').width() == $('.body-container').width()){
event.preventDefault(); //cancel the drag.
console.log('d');
}
}
});
});
</script>
</head>
<body>
<div class="body-container">
<div id="draggable-container">
<div id="widget-1" class="widgets"><p>Twitter</p></div>
<div id="widget-2" class="widgets"><p>Weather</p></div>
<div id="widget-3" class="widgets"><p>News</p></div>
<div id="widget-4" class="widgets"><p>Email</p></div>
</div>
</div>
</body>
</html>
html, body{
background-color: #2196F3;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#widget-1{
background-color: blue;
}
#widget-2{
background-color: purple;
}
#widget-3{
background-color: orange;
}
#widget-4{
background-color: green;
}
.widgets{
border-radius: 25px;
padding: 20px;
width: 150px;
height: 200px;
}
#draggable-container{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid black;
width:90%;
height:90%;
}
The code below is not workING in my application
HTML:
<div class="progressBar">
<div class="progressBarIndicator">
</div>
</div>
CSS:
.progressBar{background-color: #fff; height:20px;}
.progressBarIndicator{background-color: #000; height:20px;}
JAVASCRIPT:
$('.progressBarIndicator').css({"background-color" : "red"});
First Check, whether jquery.min.js is present or not.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
If yes, change your script like this way.
<script>
$(document).ready(function(){
$('.progressBarIndicator').css("background-color","red");
});
</script>
$('.progressBarIndicator').css({"background-color" : "red"});
^ ^ ^
remove replace with comma Remove
For more info, check this Jquery CSS Method - W3 Schools & Background CSS Using Jquery - Web Developer Forum
My Updated Code. Do the needful changes if required.
<html>
<head></head>
<body>
<style>
.progressBar{
width: 100%;
height: 20px;
background: #fff;
border-radius: 2px;
border: 1px solid rgba(199, 197, 197, 1);
}
.progressBarIndicator{
height: 20px;
background: #019F45;
overflow: hidden;
border-radius: 2px;
}
</style>
<div class="progressBar">
<div class="progressBarIndicator">
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.progressBarIndicator').css("background", "red");
});
</script>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
HTML:
<div class="progressBar">
<div class="progressBarIndicator">
</div>
CSS:
.progressBar{
width: 100%;
height: 20px;
background: #fff;
border-radius: 2px;
border: 1px solid rgba(199, 197, 197, 1);
}
.progressBarIndicator{
height: 20px;
background: #019F45;
overflow: hidden;
border-radius: 2px;
}
JAVASCRIPT:
$(document).ready(function(){
$('.progressBarIndicator').css("background", "red");
});
If I put this.style.background="#000"; inline in the div, like onclick="this.style.background="#000";, it works. However, if I put that in a function and call the function from the same onclick event, it doesn't work. However, if I make the function do something else (like bring up an alert box), it does work. What's going on?
Here's the code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
.tile {
width: 48px;
height: 48px;
margin: 0px;
padding: 0px;
float: left;
background-color:red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="tile" onclick="myFunction()"></div>
<script>
function myFunction() {
this.style.background="#000000";
}
</script>
</body>
</html>
I noticed you're including jQuery. You should strongly consider separating your markup and JavaScript. If you do go that route, here's what that would look like:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
.tile {
width: 48px;
height: 48px;
margin: 0px;
padding: 0px;
float: left;
background-color:red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="tile"></div>
<script>
$(function () {
$(".tile").click(function () {
$(this).css('background-color', '#000000');
});
});
</script>
</body>
</html>
Example: http://jsfiddle.net/6zAN7/9/
If you would like to do it this way you need to pass the reference of DIV element when you invoke your function. During execution of your onclick handler "this" will reference to the current element. Pass it as an argument!
Here is the corrected code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
.tile {
width: 48px;
height: 48px;
margin: 0px;
padding: 0px;
float: left;
background-color:red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="tile" onclick="myFunction(this)"></div>
<script>
function myFunction(divObj) {
divObj.style.background="#000000";
}
</script>
</body>
</html>
<div class="tile" onclick="myFunction(this)"></div>
<script>
function myFunction(x) {
x.style.background="#000000";
}
</script>