|
JavaScript - Make Image Move Horizontal Instead Of Vertical
I need the image to move horizontal instead of vertical. Here is the code.
Code: //##########################################################################//
// Scrolling background Tutorial Code by http://www.kudoswebsolutions.com
// Original Source code: http://youlove.us/
// Modified and extended by Kudos Web Solutions
// copyright 2009 kudoswebsolutions.com
//##########################################################################//
$(function() {
// Define the height of your two background images.
//The image to scroll
var backgroundheight = 2000;
//The image to overlay
var backgroundheight_two = 1000;
// Create a random offset for both images' starting positions
offset = Math.round(Math.floor(Math.random()* 2001));
function scrollbackground() {
//Ensure all bases are covered when defining the offset.
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// Put the background onto the required div and animate vertically
$('#container3').css("background-position", "50% " + offset + "px");
// Enable the function to loop when it reaches the end of the image
setTimeout(function() {
scrollbackground();
}, 100
);
}
function scrollbackground2() {
//Ensure all bases are covered when defining the offset.
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// Put the background onto the required div and animate vertically
$('#container2').css("background-position", "50% " + offset + "px");
// Enable the function to loop when it reaches the end of the image
setTimeout(function() {
scrollbackground2();
}, 100
);
}
// Initiate the scroll
scrollbackground();
scrollbackground2();
// Use the offset defined earlier and apply it to the div.
$('#overlay').css("background-position", "50% " + offset2 + "px");
$('#overlay2').css("background-position", "50% " + offset2 + "px");
});
Similar TutorialsI am trying to get the menu bar to also have a "<" on the other side, so i can control the menu to the left also, Thanks in advance Code: <style>
#hmenu {position:absolute; overflow: hidden; left: -275px; width:350px; height:30px; border: solid 1px #339900; padding: 5px; font-family: arial, sans-serif;}
#harrow {position: absolute; left: 325px; top: 5px; border: solid 1px #339900; font-weight: bold; width:20px; height: 18px; text-align:center; background-color:#336600; }
a {text-decoration: none;}
#harrow a {color: white}
</style>
<script>
function move(menu_id,mTop,mLeft){
var obj = document.getElementById(menu_id);
obj.style.top = obj.offsetTop+mTop +"px";
obj.style.left = obj.offsetLeft+mLeft+"px";
}
</script>
</HEAD>
<BODY>
<div id=hmenu>
<a href=#>Link 1</a> | <a href=#>Link 2</a> | <a href=#>Link 3</a> | <a href=#>Link 4</a> | <a href=#>Link 5</a>
<div id=harrow><a href="#" onclick="move('hmenu',0,295)"> > </a></div>
I have a horizontal tabsystem given with this code: Code:
<style>
.tabContainer{ float:left;
width:795px;
margin: 1% 1%;
background-color:#0597ca;
}
.tabContainer .digiTabs { width:10%; float:left; }
.tabContainer .digiTabs li{float:left;background-color:#0597ca;border:1px solid #e1e1e1;width:100%;padding:5px!important;cursor:pointer;border-bottom:none;margin-right:10px;font-family:verdana;font-size:.8em;font-weight:bold;color:#fff;}
.tabContainer .digiTabs .selected{background-color:#5cc1dd;color:#FFF;}#tabContent{padding:10px;background-color:#5cc1dd;overflow:hidden;float:left;margin-bottom:10px;border:1px solid #e1e1e1;width:100%;}
p{
padding:10px 10px 10px 10px;
margin: 0px 0px 10px 0px;
}
</style>
<script type="text/javascript">
function tabs(y)
{
var lis=document.getElementById("sidebarTabs").childNodes; //gets all the LI from the UL
for(i=0;i<lis.length;i++)
{
lis[i].className=""; //removes the classname from all the LI
}
y.className="selected"; //the clicked tab gets the classname selected
var res=document.getElementById("tabContent"); //the resource for the main tabContent
var tab=y.id;
switch(tab) //this switch case replaces the tabContent
{
case "tab1":
res.innerHTML=document.getElementById("tab1Content").innerHTML;
break;
case "tab2":
res.innerHTML=document.getElementById("tab2Content").innerHTML;
break;
case "tab3":
res.innerHTML=document.getElementById("tab3Content").innerHTML;
break;
case "tab4":
res.innerHTML=document.getElementById("tab4Content").innerHTML;
break;
default:
res.innerHTML=document.getElementById("tab1Content").innerHTML;
break;
}
}
</script>
<div class="tabContainer" >
<ul class="digiTabs" id="sidebarTabs">
<li id="tab1" class="selected" onclick="tabs(this);">Shairzys</li>
<li id="tab2" onclick="tabs(this);">Friends' Shairz
</li>
<li id="tab3" onclick="tabs(this);">Blog</li>
<li id="tab4" onclick="tabs(this);">Info</li>
</ul>
<p><center>
Is there a way to make these tabs go verically instead? Like turn the text and all? Hi, As an example, I have a horizontal navigation bar that grows and shrinks when the page is resized. I'd like it if the horizontal scroll bar only appeared when the window is less than x pixels wide (thus, cutting off some of my navigation options). The same thing with zooming. If the user starts to zoom the page and the options of my nav bar begin to get cut off, is there any way to show the scroll bar after x number of zooms? I'm just trying to avoid ALWAYS showing the horizontal or vertical scrolls. I'd like them to only appear as needed, like this site: http://www.crimemapping.com/map.aspx...9-966e8cda4d70 (Notice if you zoom in, or change the window size, the behavior is like what I mentioned). Is there any way to do this? i got my scroller to work on my website now. thumbnail scroll doesnt auto scroll down as its going through the image... how do i make scrollbar automatically move while its going through the highlighted thumbnail image... i hope didnt sound confusing at all but heres the link to my website html coding http://rusty813.comuv.com/sample2.html Hey, I have a script which uses an array of numbers to represent their position in a div. its 5 by 5 like so: Code: tileMap = [ [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 1], ]; images = new Array(); images[1] = "no block"; images[3] = "brick.PNG"; Image[1] means you can move on the tile, 3 means you cannot (aka a collision). Now this is fine but i have issues regarding my movement of the image. I want to use WASD keyboard buttons which i can do using a CASE statement. But how do you make the image move Regarding Left/Right/Up/Down (also so that it stops moving when you stop holding down one of the keyboard buttons. I use this to detect the key button pressed: Code: function handleKeyMovement(keyValueDown)
{
switch(keyValueDown)
{
case 97: //A Move Left
//move it left
break;
case 100: //D Move Right
//move it right
break;
case 119: //W Move Up
//move it up
break;
case 115: //S Move Down
//move it down
break; }
}
p.s ideally i would like to move the said image by certain pixel amounts so it looks more smooth in movement. Is it possible? Hope you can help ! Hi Guys. First off i'd like to say Hi as i'm new to the forums. But am looking forward to spending a lot of time here. I am currently studying Javascript to help create a bit more user interaction with my websites which I use CSS/XHTML and PHP5 to design. Ok with that said I was hoping someone might be able to lend a slight hand. I am trying to create an Image menu for a site I'm working on that is rather simple in essence. When the user hovers over a button I have the menu will move left or right depending. I have not got a great deal into it yet as I have become stuck, as I'm new I figured it would be easier to troubleshoot if I build up the program bit by bit. ----> menupic variable is being passed by php into javascript Code: function moveImagesLeft() {
for (i=0; i<=100; i++) {
setPixels = (i + 2);
for (L=1; L<=menuPic; L++){ /* this loop makes sure that all the pictures move together */
indexpic = "menupic"+L;
document.getElementById(indexpic).style.left="-"+setPixels+"px";
}
}
}
Ok, very simple. I have a DIV container that holds my images and the overflow is hidden, php works out how many images there are and feeds that into javascript. This all works fantastically however it seems that once I reach the bottom of my second for loop Code: document.getElementById(indexpic).style.left="-"+setPixels+"px"; Nothing else happens, the pictures all shift left 2pixels as they should but nothing else. The top loop is not going again (excuse the poor use of terminology) I dont know if it makes a different but where the images are they are declared as so. Code: <a href="#"><img class="menupic" id="menupic1,2,3,4,5 (etc)" src="_image" border="0" height="50" width="60"></a> Code: .menupic {position:relative; display:block; width:60px, height:40px}
and the Id class is there so that my javascript can control it. I hope that I have worded this in a way that is easily understandable. Any help would be greatly appreciated. I try not to ask for too much help because working things out is part of the learning curve but in this instance I have spent a lot of time and not found a solution. Kindest Regards Oli Hi, I'm a beginner in web programming so please, don't mind if this might look as a dum request. I need an image to move from outside the viewed space, from somwhere on the page where users cannot hav acces, let's say from x position of -439px to 0px, so that the image looks like entering the window. And I need to do this after the user clicks a piece of text that is already on the screen. How can I do that ? In what tag should I include the image ? where should I put de event handler/ listener ? I know I need to change the CSS atributes but how. I tried this and it didn't work in Firefox nor in IE. Code:
THE HTML FILE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Greenbrain</title>
<script language="javascript" type="text/javascript" src="greenbrain.js"></script>
<link rel="stylesheet" type="text/css" href="greenbrain.css">
</head>
<body>
<div id=int; onClick="intr()"> <h1 class="intrare">INTRARE</h1> </div>
<div id=img_intrare> <img src="soare.png"; class="soare"> </div>
</body>
</html>
THE .CSS FILE
body {background-image:url(fondhome.png); position:fixed;}
img.soare {position:absolute; left:-459px; top:100px; z-index:1;}
h1.intrare {z-index:2}
THE .JS FILE
function intr()
{
var x, xi;
x=0;
xi=document.getElementById('img_intrare').style.left;
if(xi!=x) {document.getElementById('img_intrare').style.left = x + "px"}
}
ps: i've been trying for 4 days now to find out how to do this, the answer might be just under my nose but then, my nose would be to big and pidgeons would come and sit on it... Hi, I'm stumped at the moment trying to make something a little like seen on Google Maps where you can search the location in text box and the map corresponding to the location will be dispalyed. Can any one send me the Javascript for the following in which my image is paced in an iframe and the upon entering the loaction in a textbox it image must move to that position witin the iframe. Any help will be appreciated. Regards, Sreejith If you look at this test page, you see a vertical image menu. This menu is originally from http://www.byscripts.info/scripts/ja...accordion-menu (example 3) But... how can you get it to 100% heigh? Please, look at the source code Thanks I've pared this down as much as I can to demonstrate the issue. What can I do to make the slide in go over the top of the image rather than underneath as at present? Code: <html>
<head>
<title>slidein</title>
<style>
#headerstudy {width:980px;height:280px;margin:0 auto;padding:0;}
#mainbook {position:absolute;top:7.5em;left:15.4m;border:0 none}
</style>
<script>
// *************** TRANSLATE
var master = new Object("element")
master.curLeft = 0; master.curTop = 10;
master.gapLeft = 0; master.gapTop = 0;
master.timer = null;
function moveAlong(layerName, paceLeft, paceTop, fromLeft, fromTop)
{
clearTimeout(eval(layerName).timer)
var el = document.getElementById(layerName);
if(eval(layerName).curLeft != fromLeft)
{
if((Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft)) < paceLeft)
{
eval(layerName).curLeft = fromLeft;
}
else if(eval(layerName).curLeft < fromLeft)
{
eval(layerName).curLeft = eval(layerName).curLeft + paceLeft;
}
else if(eval(layerName).curLeft > fromLeft)
{
eval(layerName).curLeft = eval(layerName).curLeft - paceLeft;
}
el.style.left = eval(layerName).curLeft + 'px';
}
if(eval(layerName).curTop != fromTop)
{
if((Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop)) < paceTop)
{
eval(layerName).curTop = fromTop;
}
else if(eval(layerName).curTop < fromTop)
{
eval(layerName).curTop = eval(layerName).curTop + paceTop;
}
else if(eval(layerName).curTop > fromTop)
{
eval(layerName).curTop = eval(layerName).curTop - paceTop;
}
el.style.top = eval(layerName).curTop + 'px';
}
eval(layerName).timer=setTimeout('moveAlong("'+layerName+'",'+paceLeft+','+paceTop+','+fromLeft+','+fromTop+')',30);
}
function setPace(layerName, fromLeft, fromTop, motionSpeed)
{
eval(layerName).gapLeft = (Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft)) / motionSpeed;
eval(layerName).gapTop = (Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop)) / motionSpeed;
moveAlong(layerName, eval(layerName).gapLeft, eval(layerName).gapTop, fromLeft, fromTop);
}
var expandState = 0
function expand()
{
if(expandState == 0)
{
setPace("master", 121, 10, 10);
expandState = 1;
}
else
{
setPace("master", -120, 10, 10);
expandState = 0;
}
}
</script>
</head>
<body>
<div id="master" style="position: absolute; left: -120px; top: 11px; width: 350px; height: 0px">
<div id="menu2" style="position: absolute; left: 117px; top: 12px">
<table border="0" width="18" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<a href="javascript:expand();" onfocus="this.blur()">
<img name="menutop" border="0" src="http://aapress.com.au/images/translate.gif" width="23" height="152"></a></td>
</tr>
</table>
</div>
<div id="screen" style="position: absolute; left: -138px; top: 12px; ">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0px; padding:0px; border:1px solid #000000;" bgcolor="#FFFFFF">
<tr>
<td style="padding-left:0px; height:0px; line-height:15px; background-color:#000000;">
<a href="http://www.labpixies.com" style="font-family: Arial,Verdana; font-size:12px; font-weight:bold; text-align:left; text-decoration:none; color:#ffffff;">
Gadget by LabPixies.com</a></td>
</tr>
<tr>
<td>
<iframe allowtransparency="true" align="top" scrolling="no" width="256" height="135" frameborder="0" src="http://cdn.labpixies.com/campaigns/babylon/babylon.html" target="_self">
</iframe></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var sidemenu = document.getElementById('master');
function FixY()
{
sidemenu.style.top = '80px';
}
setInterval("FixY()",100);
</script>
<div id="headerstudy">
<img id="mainbook" src="http://aapress.com.au/images/booksblank.jpg" width="572" height="285">
</div>
</body>
</html>
I have this code... I want to be able to make each image fade from one to the other. Like this... http://www.dynamicdrive.com/dynamici...nslideshow.htm Is there a way to do that with this code? Code:
<script type="text/javascript">
// Simple Javascript Time based Image Swap
var Pics = new Array();
var counter = 0;
// Use this section to change the image paths
function LoadImages()
{
Pics[1] = new Image();
Pics[1].src = "images/pic1.jpg";
Pics[2] = new Image();
Pics[2].src = "images/pic2.jpg";
Pics[3] = new Image();
Pics[3].src = "images/pic3.jpg";
Pics[4] = new Image();
Pics[4].src = "images/pic4.jpg";
Pics[5] = new Image();
Pics[5].src = "images/pic5.jpg";
Pics[6] = new Image();
Pics[6].src = "images/pic6.jpg";
Pics[7] = new Image();
Pics[7].src = "images/pic7.jpg";
Pics[8] = new Image();
Pics[8].src = "images/pic8.jpg";
Pics[9] = new Image();
Pics[9].src = "images/pic9.jpg";
Pics[10] = new Image();
Pics[10].src = "images/pic10.jpg";
Pics[11] = new Image();
Pics[11].src = "images/pic11.jpg";
Pics[12] = new Image();
Pics[12].src = "images/pic12.jpg";
Pics[13] = new Image();
Pics[13].src = "images/pic13.jpg";
Pics[14] = new Image();
Pics[14].src = "images/pic14.jpg";
Pics[15] = new Image();
Pics[15].src = "images/pic15.jpg";
Pics[16] = new Image();
Pics[16].src = "images/pic16.jpg";
Pics[17] = new Image();
Pics[17].src = "images/pic17.jpg";
document.pic1.src = Pics[1].src;
}
//Time in miliseconds
function timedImage()
{
counter ++
if (counter > 17) {
counter = 1;
}
document.pic1.src = Pics[counter].src;
t=setTimeout("timedImage()",5000);
}
</script>
Hi I was wondering I really like the image viewer Gamespot uses. example: http://www.gamespot.com/wii/action/s...&tag=thumb%3B1 Anyone know how to make one like that? Thanks for any replies. I am working on a site for someone, and they asked me to have a small link-bar that has small thumbnail pictures next to every link. He wants the picture next to each link to change weekly, and what I was thinking of was having a small directory of imgs, he will have 31 in total, and name them 1-31.png, and have something similar to this: var now = new Date(); var dd = now.getDate(); [code] if (dd==1) document.write('<img src="pic1.gif">') else if (dd==2) document.write('<img src="pic2.gif">') else if (dd==3) document.write('<img src="pic3.gif">') else if (dd==4) [code] but what I am looking for mostly is for the ability for it to loop back through, so that after the 31st week, it starts right back to the first. Hiya, I created this thread on the html forum but I'm not sure if it can be done with javascript, so I'll post here as well. I was wondering if there's a way to make various sections of the image clickable? The sections on the image are not rectangular so I can't make divs. I don't think I can use imagemap either since that only works for making one clickable area right? I already cut out these sections in photoshop and saved them with alpha background, and created a "glowing" version of each section, since I want to make it so that when mouse hovers over it, it will glow. But I can't stack them on top of each other, since if I do that only the topmost layer will be clickable for those areas where they will overlap with rectangular divs. This is example of what I mean: Thanks hi, on my website http://zend.warrencreative.com/gemini-group/index.html I am using thickbox, if you click on Subscribe to newsletter at the top it opens up a box, I need to change type="button" to type="image" but this doesn't work?! is there any other way? Code: <a class="newsletter thickbox" href="#TB_inline?height=325&width=365&inlineId=myOnPageContent&modal=true">Subscribe to eNewsletter</a> <div id="myOnPageContent" class="hidden"><p>Please enter your Name:</p><p><input type="text" name="name" class="textbox"></p><p>Please enter your Email:</p><p><form action="#"><input type="text" name="email" class="textbox"></p><p> </p><p><input type="button" value="Send" class="thickbox" title="add a caption to title attribute / or leave blank" alt="#TB_inline?height=325&width=365&inlineId=myOnPageContent1"> <input onclick="tb_remove()" type="image" alt="cancel button" src="images/cancelbutton.jpg"></form></p></div> <div id="myOnPageContent1" class="hidden"><p>Thank you for subscribing</p><input onclick="tb_remove()" type="image" alt="cancel button" src="images/cancelbutton.jpg"></div> thanks in advance I'm a designer and HTML/CSS coder only. I'd like to ask the community for the simplest solution on making an image swap to different image when the user clicks one of the many thumbnails. It's pretty standard gallery functionality, "click the thumbnail to see the big version". I'm hoping to get some JavaScript that is easy to configure even though I don't know how to write JavaScript. Here's a link to the page: http://clientzone.thermostudios.com/.../bouquets.html The thumbnails are on the left and the replicable image on the right. Thanks in advance. I have some code that will check a users screen resolution and open a new window with a particular version of my website in, I have several sites for different page sizes. But when this code runs in Safari the pop-up is blocked so I would like the image on my page to be a button that runs the code to open the 'correct' window (based on the screen res) and as a button is launching the new window Safari should be okay about it. Unless I am doing something wrong? http://www.meta.projectmio.com/pop.html But how do I modify the code to do this, I'm hopeless? Thanks. How do you make an image begin to load after a certain amount of time? e.g 3 seconds.
Hi everyone, I'm new on this forum. I really need help in coding an part of my website. I want to make the logo background image fade to another background image on hover. Here is the code I have until now: Code: #logo
{margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
width:600px;
height:515px;}
#logo h1
{display:block;
background:url(img/logo.jpg) no-repeat;
width:600px;
height:515px;
text-indent:-10000px;
margin:0px;}
#logo h1 a
{display:block;
width:100%;
height:100%;}
#logo h1 a:hover
{background:url(img/logo.jpg) no-repeat 0px -515px;}
I want the background:url(img/logo.jpg) no-repeat; to fade to {background:url(img/logo.jpg) no-repeat 0px -515px;}. I haven't found any tutorial which explains how to do that properly. I'd be really greatful if you could help me. Thank you very much, Alex In the spirit of the season, I wanted to make it snow on my website. So I began digging. Eventually I ended up with a script that moved an image element down the page in a snowflake-like manner. The problem with it was it was dependant on an img element for every flake - simply no poor programming when using an Object Oriented programming language. So I decided I wanted to extend (in Java-speak; most of my programming background is in Java) the in-built Image object. The new object's src variable will lead to an image of the type of flake it is. (I want to be able to have more variance in images than a simple dot.) The new object will have a function that will allow it to move. A separate, unrelated function will control when each flakes move. I did some more research and read about prototyping on JavaScript Kit and here, but I still cant seem to get this to work. JS Lint says it's bug-free, but Firefox says "move()" is an invalid function. I am presuming the problem lies in my inability to fully grasp how to extend objects in JavaScript. Code: <html>
<head>
<script type="text/javascript">
Image.prototype.dFlake=dotFlake;
function dotFlake(xLocation,yLocation){
this.src = "simpleDotFlake.png";
this.x = xLocation;
this.y = yLocation;
}
dotFlake.prototype.move = fall;
function fall(){ // ^^ Belongs to dotFlake class.
this.style.position="absolute";
this.style.top = this.y;
this.style.left = this.x;
this.y= this.y + 1; // Falling is constant.
if (Math.random() > 0.5){ // Random direction, though.
this.x = this.x + 1;
} else{
this.x = this.x - 1;
}
}
function snow(flakes){ // Allows addition of different flakes later.
for (i in flakes){
i.move();
}
timer = setTimeout("snow()",1);
}
function startSnow(){
basicFlakes = new Array(new dotFlake(0,0));
snow(basicFlakes);
}
</script>
</head>
<body onload="startSnow()">
<h1>This is test text.</h1>
<img id="basicFlake" src="./simpleDotFlake.png" width="10" height="10" />
</body>
</html>
Any and all input is much appreciated. Thank you! |
|||||||