|
JavaScript - Parallax Background Help, Simple Javascript
Code:
function calcParallax(tileheight, speedratio, scrollposition) {
// by Brett Taylor http://inner.geek.nz/
// originally published at http://inner.geek.nz/javascript/parallax/
// usable under terms of CC-BY 3.0 licence
// http://creativecommons.org/licenses/by/3.0/
return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
}
window.onload = function() {
window.onscroll = function() {
var posX = (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : window.pageXOffset;
var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;
var ground = document.getElementById('ground');
var groundparallax = calcParallax(53, 8, posY);
ground.style.backgroundPosition = "0 " + groundparallax + "px";
var clouds = document.getElementById('clouds');
var cloudsparallax = calcParallax(400, .5, posY);
clouds.style.backgroundPosition = "0 " + cloudsparallax + "px";
}
document.getElementById('javascriptcode').onscroll = function() {
var posX = (this.scrollLeft) ? this.scrollLeft : this.pageXOffset;
var j = calcParallax(53, 16, posX);
console.log('scroll js: '+ j);
document.getElementById('javascriptcode').style.backgroundPosition = j + "px 0";
}
}
http://inner.geek.nz/javascript/parallax/ Here is a simple Parallax Background, it uses the JavaScript above and no jQuery, possibly the simplest I can find. In the example it uses two images, a main background image tiled sized 53x54 and the main foreground background at 400x400. This obviously is imputed into the JavaScript above and then a ratio is worked out. I want to use different sized images for my example, but I can't work out how to get a perfect ratio so it doesn't jump when scrolling, can anyone explain the JavaScript code above, mainly the bold bits. For my example I'm using a 1440x720 main background image and an 800x600 foreground image. Similar TutorialsHaving trouble getting this plugin to work.. jparallax - see here for more info - http://webdev.stephband.info/parallax.html Now I have this plugin working separately, on its own page, just fine. see here - http://bit.ly/hPpSAC But when I went back, to my own page, and tried to incorporate it into the background of my site, I was able to get the look fine, but the movement isn't working. see here - http://bit.ly/ee52Iv I've tried everything I could to get it working.. Maybe someone here could troubleshoot? It would be a huge help, seriously. Thanks. I imagine this would be very simple for someone who knows javascript. I want to have three fields. First field is "posted speed limit", second field is "actual speed" and third field will be the output field. All the script needs to do it subtract the posted speed from the actual speed and add a ZERO to the end; which is the amount of the speeding ticket. The minimum fine is $100, however. So, 5 miles over the speed limit would be $100 (minimum value) 15 miles over the speed limit would be $150 (add a zero) 35 miles over the speed limit would be $350. etc. I know very little Javascript, if anyone could help me out with this, I'd appreciate it. Thanks, Sean Hello! This is my first post here. I am not a programmer and I thought you guys would be able to help me. I have this script in one of my pages. It was written by a former coworker. It worked perfectly in Firefox 3.6 but stopped working after browser upgrades. It may be a simple fix... I just don't know. Any help would be GREATLY appreciated. Here is the code in the HEAD: Code:
<script type="text/javascript">
function generateAnswer() {
//alert("answersheet");
window.open("answerSheet.html" + window.location.search);
}
</script>
And here is the code in the BODY, where the script is called: Code: <p>Generate the answer sheet for the tests you have selected: <a href="javascript:generateAnswer()">Generate</a></p> When the page runs, I can see the "Generate" link, but it takes me nowhere. Can anyone help me with doing this? I'm kinda new to JavaScript! Create an Array (list) containing 10 words. For every half second going word by word appears in a <span> element. When all the words in the list are gone through, the interval shall stop and printing "The End". i have this simple js example to click Delete Post and then give the user two options. If they click yes then they go that page...but how do i set it to where when they click cancel it goes back to "Delete Post" ??? i suck at javascript Code: <html>
<body>
<p><b>Delete Post</b></p>
<script type="text/javascript">
window.onclick=function(){
document.getElementsByTagName("p")[0].innerHTML="<b><a href='#'>Delete</a> || Cancel</b>"
}
</script>
</body>
</html>
I'm trying to code a set of buttons that upon being pressed, change an image on the other side of the table in which they're located (not themselves). Is there a way to do this and if so, what would it be? So far I've been trying to use onMouseDown and changeImage with object id tags to get the effect but it's not working. Hi, I have some Javascript, what I want to hapen is, when the variables hour and randomhour are the same, the message hello is displayed. What actually happens is the message will display all the time, and dissapear when randomhour is 0. Here is my script: Code:
<script type="text/javascript">
//Gets hour and minute of day
var d = new Date();
var hour = d.getHours();
var minute = d.getMinutes();
//Generates a random hour and minute
var randomhour=Math.floor(Math.random()*24)
var randomminute=Math.floor(Math.random()*60)
document.write(hour);
document.write(minute);
document.write("----");
document.write(randomhour);
document.write(randomminute);
if (hour = randomhour)
{
document.write("<b>Hello</b>");
}
</script>
Hi guys, I have this piece of php code: PHP Code: <?php $file = 'counter.txt'; $data = @file($file); $data = $data[0]; if($handle = @fopen($file, 'w')){ $data = intval($data); $data++; fwrite($handle, $data); fclose($handle); } ?> What I need to know is, can javascript activate this piece of php code with an onclick function to make it write to the txt file? I have a link that downloads a file and would like to add a little javascript onclick function to write to the text file (as in the php code above) at the same time as they download the file. I was not sure if this was possible in the same way you would do something like: window.location.href='http://www.yoursite.com'; Any help is hugly appreciated. Kind regards, paffley I'm brand new to javascript and have a simple assignment that I'm stuck on. I would appreciate any help. Here's what I want: 0:0 1:1 2:3 3:6 4:10 5:15 As you can see, I want the numbers after the colon to be a sum of the number to the left and the number above it. I can easily get the number before the colon, but not sure how to get the sum (the number after the semicolon). Here's my code so far: <html> <body> <script type="text/javascript"> N=0; while (N<=5) { document.write(+ N); N++; document.write(":"); document.write("<br />"); } </script> </body> </html> I need to use a loop, hence the "while" loop. But not sure how to set up variables to do the addition. Thanks much for any help - as you can see, I'm not a programmer. Hi, I have just started to learn Javascript which when loaded into a safari web browser of Firefox browser just simply displays the code. I am currently using a MacBook Leopard operating system I have saved the code (corrected for mistakes, many many times) to my desktop Run my usual browser safari (and tried same with Firefox) loaded the file and all I get is a copy of the code displayed in the browser window. Javascript is enabled for both Please can you suggest some options for me to try and get the code working. All I am doing in this example is copied from a book to turn the background colour of the browser RED Thanks Tom Hi guys I have what i think is a fairly simple script used for an image gallery with a next and back button. It seems to work pretty well, but i would like to make the gallery scroll round... ie when the user reaches the last picture and presses the next button again, the first image will be displayed again - and visa versa with the first image and the back button. Below is my JS, can post the small amount of HTML that calls it if necessary. Any help MUCH appreciated, been messing around with it for ages and being the newbie i am, can't seem to find any way of doing it Code: // List image names without extension
var myImg= new Array(6)
myImg[0]= "performance2011";
myImg[1]= "performance2005";
myImg[2]= "performance2006";
myImg[3]= "performance2007";
myImg[4]= "performance2008";
myImg[5]= "performance2009";
myImg[6]= "performance2010";
// Tell browser where to find the image
myImgSrc = "../images/";
// Tell browser the type of file
myImgEnd = ".jpg"
var i = 0;
// Create function to load image
function loadImg(){
document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}
// Create link function to switch image backward
function prev(){
if(i<1){
var l = i
} else {
var l = i-=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}
// Create link function to switch image forward
function next(){
if(i>5){
var l = i
} else {
var l = i+=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}
// Load function after page loads
window.onload=loadImg;
Hello, looking for simple javascript slideshow script, similar to this: http://www.jimex.co.jp/veh_details.php?id=4541 I like the mousover effect when the main image is changed once the mouse is over the thumbnails on the right hand side. Has anyone got something like this? Thanks I'm sure this is a simple thing to do, but I know next to zero javascript and can't find an example online. What I want to do is to toggle a number on a webpage when a user clicks a link. So ideally there would be a "click to toggle" link, and then a number (lets say 400), when the user clicks that toggle link the number would change to 800 (or whatever my variable is set to), when they click it again it would go back to that original number (in this case 400). Would someone be kind enough to help me with this? Thanks Hey guys, I'm new to javascript and I'm trying to get this code to work. It's a pretty basic system to start with, just wanting to calculate the total pay for employees and using the array so that I can key multiple employees at a time. Can anyone help me adjust my code so that this system works? Thanks for your help in advance, it's greatly appreciated. Code: var NoEmps
var PayRate= new Array();
var HrsWorked= new Array();
var EmpName= new Array();
var GrossPay= new Array();
var i
var j
NoEmps=prompt("Enter Number of Employees to process","")
i = 0;
while (i<NoEmps)
{
EmpName[i]= prompt("Enter employee name","")
PayRate[i]=prompt("Enter employee pay rate","")
HrsWorked[i]= prompt ("Enter hours worked","")
if ((isNaN(PayRate[i]))||(isNaN(HrsWorked[i])))
{
alert("Please enter numbers")
flag = "false"
break
}
if PayRate[i]>25
{
alert ("Pay rate can only b $25 or less per hour")
flag == "false"
break
}
//i = i +1
}
if (flag = "true")
{
for (j in EmpName)
{
GrossPay[j]=PayRate[j] * HrsWorked[j]
}
for (counter; counter<EmpName.length; counter++)
{
document.write ("Gross Pay for " + EmpName[counter] + " is $" + GrossPay[counter] + "<br>")
}
}
I have a list with two items: Code: <select name="gateway" id="gateway"> <option value="2">PayPal</option> <option value="1">Credit/Debit Card</option> </select> When the second list item is selected, a div with several input fields needs to appear: Code: <div id="hidden_field"> Input fields are placed here. </div> Likewise, if someone selects the first list item, the div should not appear. Does anyone know how to do this with javascript? I am very new to javascript, so your help is greatly appreciated! Hi i am trying to combine these two statments Code: searchValue.replace( /\[[^\)]*\]/g,""); searchValue.replace( /\([^\)]*\)/g, ""); is it possible to put these two into one statment? also is there a javascript function which does the same as urlencode? many thanks Luke Hello everyone, I need help i need to create a very simple multiplier in javascript to multiply two values like it should ask me first value then second and then show its result Thanks in advance Reply With Quote 01-13-2015, 02:33 PM #2 Dormilich View Profile View Forum Posts Senior Coder Join Date Jan 2010 Location Behind the Wall Posts 3,532 Thanks 13 Thanked 372 Times in 368 Posts what have you tried? Hello guys, Im new to Javascript,please help me ya in my php code, I retrieve a ID value and assign to variable like below PHP Code: $id = $gettingdata['id']; and I want this id to be include together with javascript "insertsubcat" function like below Code: <a href="javascript:insertsubcat('.$ID.');"/>Click to insert this data</a>
in the javascript page, I dont know how to call back the id value and i try like code below but it doesnt work Code: function insertsubcat(data) {
var data = data.value;
.
.
.
.
}
Any idea? Thanks Azhan Malaysia i want a simple javascript countdown that counts down from 10 seconds to 0 and does NOTHING ELSE. im redirecting the page with a meta refresh and i want users to know when they'll be redirected, but most of the scripts found online have either minutes, hours, or days in them or have a javascript countdown after it's finished, which i don't want either since i'm doing a meta refresh. i know making something like this isnt rocket science but i know almost NOTHING about javascript |
|||||||