First off, please don't yell at me for asking this question. I know there is already a million topics on this, and sadly I have read through them all and I STILL can't figure out what I am doing wrong.
I created just a simple site to try understand how this works so that I can implement it on a more complex site.
I am just using one of the many scripts I have found and tried. All of them didn't have any effect.
The HTML File:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> </title>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="scripts/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://www.queness.com/js/bsa.js"></script>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript">
$(document).ready(function() {
var colordivs = $('#fade div');
$(document).scroll(function(e) {
var scrollPercent = ($(window).scrollTop() / $('#fade').outerHeight()) * 100;
if (scrollPercent > 0) {
if (scrollPercent < 33) {
var opacity = 1 - (scrollPercent / 33);
$(colordivs[0]).css('opacity', opacity);
}
else if (scrollPercent > 66) {
var opacity = 1 - (scrollPercent / 100);
$(colordivs[0]).css('opacity', 0);
$(colordivs[1]).css('opacity', 0);
$(colordivs[2]).css('opacity', opacity);
}
else if (scrollPercent > 33) {
var opacity = 1 - (scrollPercent / 66);
$(colordivs[0]).css('opacity', 0);
$(colordivs[1]).css('opacity', opacity);
}
}
});
});
</script>
</head>
<body>
<div class="container">
<div id="fade">
</div>
</div>
</body>
</html>
The CSS file:
body {
background-color: #ffcc00;
}
.container {
height: 6000px;
width: 100%;
margin: 0 auto;
}
#fade {
background-image: url("skyline.png");
width: 100%;
height: 600px;
position: fixed;
overflow: hidden:
}
So I guess my first question is do I have everything? Am I missing a jquery script or something. and second does it matter where the css file is as along as its linked correctly in the html file? Like I said, I don't completely understand how the changing opacity works if it has anything to do with the css file.
I understand HTML and CSS completely and I understand what is going on in the script just fine, I just can't figure out why they aren't talking with each other and causing a change.
Thanks in advance for any guidance!
Change
var colordivs = $('#fade div');
to
var colordivs = $('#fade');
Related
I want to have a PNG sequence that displays 68 frames of animation and then loops the final 20 frames x number of times.
I based my code on the suggestion from 'r3mainer' on your page:
[https://stackoverflow.com/questions/43595504/play-one-part-of-gif-first-then-loop-a-certain-section-indefinitely]
But I can not get it to work.
I created the vertical PNG 'film strip', a CSS file with the appropriate background style info, and a JS file referenced in an HTML.
With the PNG, the JS, the HTML, and the CSS uploaded all I get for an image on the page is the first 'frame' of the PNG strip. There are no error messages.
I think there's something I don't understand about how the JS code should be deployed.
Here's my HTML file:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Strip Test</title>
<script src="film_strip_script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="draw.css">
</head>
<body>
<div id="draw"></div>
</body>
The CSS:
#draw {
width: 279px;
height: 202px;
margin: 0 auto;
background: url(basquiat_strip.png) top center;
}
JavaScript file:
$(function() {
var ani = {
frame_height: 202,
num_frames: 68,
loop_frame: 30,
frame_duration: 1,
cur_frame: 0
};
window.setInterval(
function() {
$('#draw').css( 'background-position-y',
(-ani.frame_height * ani.cur_frame ) + 'px'
);
ani.cur_frame = (ani.cur_frame + 1) % ani.num_frames;
if (ani.cur_frame == 0) ani.cur_frame = ani.loop_frame;
},
ani.frame_duration
);
});
I tried searching for "file name changes to 0 in browser" both in Google and here, but got nowhere. This is a simple file which suddenly stopped opening. I can't even get at the inspector to troubleshoot it. Undo/redo history is lost, so that will not help. I'm guessing it's a simple mistake, but I have NEVER seen this before.
<!doctype html>
<html lang="en">
<head>
<title>JS Animated Navigation Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
<!--
var location = 0;
var bar = document.getElementById("bar1");
function myMove()
{
// if (id != 0) clearInterval(id);
location = -144;
// if (location != -144) return; // don't execute onmouseover while previous onmouseover is still running.
id = setInterval(move, 1);
}
function move()
{
location++;
bar.style.left = location + 'px';
if (location == 300)
{
clearInterval(id);
id = setInterval(moveback, 1);
}
}
function moveback()
{
location--;
bar.style.left = location + 'px';
if (location == -144)
{
clearInterval(id);
// id = setInterval(move, 1);
}
}
-->
</script>
<style>
#container
{
width: 600px;
height: 100px;
position: relative;
background: white;
}
#bar1
{
width: 150px;
height: 30px;
position: absolute;
left: -144px;
background-color: white;
}
</style>
</head>
<body>
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id ="container">
<div id ="animate"><img src="imageGalleryBar.png" alt="Image Gallery" width="150" height="30" id="bar1" onmouseover="myMove()" /></div>
</div>
</body>
</html>
Thank you
You can't use the variable name location as it is a reserved word; what you're actually doing is setting the window.location variable to 0.
Rename it, or put it in a namespace or object.
I started designing my own site and followed a YouTube video tutorial on how to code Motion Parallax scrolling on Dreamweaver using JavaScript and CSS so I followed the video and did everything it told me to but my code is still not working?
https://www.youtube.com/watch?v=cF3oyFXjRWk
I feel like my JavaScript code is not linked or something because some of the syntax or variables that are highlighted in a specific color on the video are not highlighted for me. What could my problem be?
I put the JavaScript within the head tag as well... this is the .js code
<script type="text/javascript">
var ypos, image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('background');
image.style.top = ypos * .4 + 'px';
}
window.addEventListener('scroll', parallex);
</script>
This is all my code with the css as well....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="../Tezel's Website/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#image{
position: relative;
z-index: -1
}
#content{
height: 750px;
width: 100%;
margin-top: -10px;
background-color:#4dbbac;
position: relative;
z-index: 1;
}
</style>
<script type="text/javascript">
var ypos, image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('background');
image.style.top = ypos * .4 + 'px';
}
window.addEventListener('scroll', parallex);
</script>
</head>
<body>
<img id = "background" src = "sky1.jpg" width = "100%" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../Tezel's Website/js/bootstrap.min.js"></script>
<div class = "main">
<div id = "container">
<div class = "header">
<div id = "content">
</div>
</div>
</div>
</div>
</body>
</html>
This is not looking quite charming:
<script src="../Tezel's Website/js/bootstrap.min.js"></script>
Check if all resources are loaded. Right click and check element or inspect element in your browser. Make sure all resources are found and loaded.
I am learning JavaScript and am using the following code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>javascript learning</title>
<script type="text/javascript">
function resizeRock() {
document.getElementById("rockImage").style.height = (document.body.clientHeight - 100) * 0.5;
}
</script>
</head>
<body onload="resizeRock();">
<!--ROCK-->
<div id="image">
<img src="http://outdoordesignbylucas.files.wordpress.com/2011/01/1-10-11-triangular-rock.jpg" id="rockImage" onclick="touchRock();" style="cursor: pointer;" />
</div>
</body>
</html>
This code is not resizing the image, however the following code is working as expected:
<html>
<head>
<title>iRock - The Virtual Pet Rock</title>
<script type="text/javascript">
function resizeRock() {
document.getElementById("rockImage").style.height = (document.body.clientHeight - 100) * 0.5;
}
</script>
</head>
<body onload="resizeRock();">
<div style="margin-top:100px; text-align:center">
<img id="rockImage" src="http://outdoordesignbylucas.files.wordpress.com/2011/01/1-10-11-triangular-rock.jpg" alt="iRock" style="cursor:pointer" onclick="touchRock();" />
</div>
</body>
</html>
I am breaking my head over this. The code is the same, the top (not working) is what I wrote - the bottom is from a book. What am I missing?
You need to give your style a unit.
Change this line:
document.getElementById("rockImage").style.height = (document.body.clientHeight - 100) * 0.5;
To this:
document.getElementById("rockImage").style.height = ((document.body.clientHeight - 100) * 0.5) + 'px';
Thiss will tell the browser that you are setting the height in px, instead of percent, pt, em, etc.
jsFiddle / Full Screen Result
The problem is with the DOCTYPE
<!DOCTYPE html>
This put your document into standard mode. Add this css:
html
{
height: 100%
}
body
{
height: 100%
}
Adding "px" to the end of the statement will solve the problem because in standard mode you need to state the unit explicitly.
Alternatively you can delete <!DOCTYPE html>
I thought I'd write a simple script to animate my webpage a little.
The basic idea was to make a div grow bigger, when I push a button once and then shrink to it's original size, when I push it again. I handled the growing part well, but I can't get it to shrink again.
I'm including a complete example, could you help me fix it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Language" content="Estonian" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
</head>
<body>
<script type="text/javascript">
var i;
var increasing = new Boolean("true");
var height;
function testFunction() {
height = parseInt(document.getElementById("testDiv").offsetHeight);
if( increasing == true ) {
i = height + 4;
document.getElementById("testDiv").style.height = i + "px";
if( height >= 304 ) {
increasing = false;
}
else {
pause(30);
}
}
else {
i = height - 4;
document.getElementById("testDiv").style.height = i + "px";
if( height <= 104 ) {
increasing = true;
}
else {
pause(30);
}
}
}
function pause(ms) {
setTimeout("testFunction()", ms);
}
</script>
<button id="button" type="button" onclick="testFunction();">Do it!</button.
<div id="testDiv" style="border: 2px solid black; width: 400px; height: 100px; text-align: center;">
Hello!
</div>
</body>
</html>
Use a standard library like jQuery to do this, don't do it yourself as it won't be cross-browser for sure.
With jQuery, you can do things like this:
$("#div-id").animate({"height": 300}, 1000);
That'll change the div height to 300 px in 1000 ms = 1 second.