|
JavaScript - Image Fader Resets Screen To The Top
Hi Everyone, I have just inherited a website which has a javascript menu tab and picture fader on the home page. This moves through 6 states changing a menu tab and main picture beneath to make it look like you're flicking through the menu yourself.
This works perfectly, apart from the fact that every time the picture changes the page flicks back to the top. Very annoying if you have scrolled down are reading things at the bottom of the page!! The page uses jquery-1.2.3.pack.js. I am a PHP man just starting to learn Javascript and don't understand why it is doing this, can anyone help ??? The Relevant Code is: Code: <script>
var scurrent_tab='tab1';
var scurrent_click_tab='';
var arTabsMain = new Array
(
"tab1",
"tab2",
"tab3",
"tab4",
"tab5",
"tab6",
"bottomtab"
);
function ChangeMainPictureClick(s)
{
bStopAutoLoad = true;
ChangeMainPicture(s);
}
function ChangeMainPicture(s)
{
scurrent_click_tab = s;
$("#tabs_content_container").fadeOut("slow",
function()
{
$("#tabs_content_container").html($('#tabs_content_container_'+scurrent_click_tab).html()).fadeIn("slow");
}
);
$('#main_tab_tab1_img').attr('src','images/tab_tab1_off.jpg');
$('#main_tab_tab2_img').attr('src','images/tab_tab2_off.jpg');
$('#main_tab_tab5_img').attr('src','images/tab_tab5_off.jpg');
$('#main_tab_tab4_img').attr('src','images/tab_tab4_off.jpg');
$('#main_tab_tab6_img').attr('src','images/tab_tab6_off.jpg');
$('#main_tab_tab3_img').attr('src','images/tab_tab3_off.jpg');
$('#main_tab_'+s+'_img').attr('src','images/tab_'+s+'_on.jpg');
scurrent_tab = s;
}
$('#main_tab_tab1').hover
(
function(){$('#main_tab_tab1_img').attr('src','images/tab_tab1_on.jpg');},
function(){if(scurrent_tab=='tab1')return;$('#main_tab_tab1_img').attr('src','images/tab_tab1_off.jpg');}
);
$('#main_tab_tab2').hover
(
function(){$('#main_tab_tab2_img').attr('src','images/tab_tab2_on.jpg');},
function(){if(scurrent_tab=='tab2')return;$('#main_tab_tab2_img').attr('src','images/tab_tab2_off.jpg');}
);
$('#main_tab_tab4').hover
(
function(){$('#main_tab_tab4_img').attr('src','images/tab_tab4_on.jpg');},
function(){if(scurrent_tab=='tab4')return;$('#main_tab_tab4_img').attr('src','images/tab_tab4_off.jpg');}
);
$('#main_tab_tab3').hover
(
function(){$('#main_tab_tab3_img').attr('src','images/tab_tab3_on.jpg');},
function(){if(scurrent_tab=='tab3')return;$('#main_tab_tab3_img').attr('src','images/tab_tab3_off.jpg');}
);
$('#main_tab_tab6').hover
(
function(){$('#main_tab_tab6_img').attr('src','images/tab_tab6_on.jpg');},
function(){if(scurrent_tab=='tab6')return;$('#main_tab_tab6_img').attr('src','images/tab_tab6_off.jpg');}
);
$('#main_tab_tab5').hover
(
function(){$('#main_tab_tab5_img').attr('src','images/tab_tab5_on.jpg');},
function(){if(scurrent_tab=='tab5')return;$('#main_tab_tab5_img').attr('src','images/tab_tab5_off.jpg');}
);
function AutoLoadTopic()
{
if(bStopAutoLoad)
{
window.setTimeout(function() {AutoLoadTopic();}, 8000);
return true;
}
iCurrentSlide++;
if(iCurrentSlide >= arTabsMain.length-1)
iCurrentSlide = 0;
ChangeMainPicture(arTabsMain[iCurrentSlide]);
window.setTimeout(function() {AutoLoadTopic();}, 8000);
}
var bStopAutoLoad = false;
var iCurrentSlide = 0;
window.setTimeout(function() {AutoLoadTopic();}, 8000);
</script>
// ######
<script>
$('#button_start_bottomtab').hover
(
function(){$('#button_start_bottomtab_img').attr('src','images/start_bottomtab_pic_on.gif');},
function(){$('#button_start_bottomtab_img').attr('src','images/start_bottomtab_pic.gif');}
);
</script>
The code 'works' as in there are no issues in its functionality, I just want it work in a better way. Any help or ideas would be greatly appreciated. Similar TutorialsIm using a image fader and this is the html. cant seem to link the image when i added href to it it stopped the fader working. Code: <script language="JavaScript">
// configuration structure
var A_TPL = {
'random' : false,
'steps' : 20,
'transtime': 1.5,
'slidetime': 5,
'width' : 800,
'height': 278,
'alt' : 'BC banners',
};
// IMAGE LINKS TO BE EDITED
var A_ITEMS = [
'http://www.******.co.uk/*****/img/banner1.jpg',
'http://www.******.co.uk/*****/img/banner2.jpg',
'http://www.******.co.uk/*****/img/banner3.jpg',
'http://www.******.co.uk/*****/img/banner4.jpg'
];
var mySlideShow = new tFader (A_ITEMS, A_TPL);
</script>
little help i've got a drop down menu and an image fader. i need the drop down menu to overlay on top of the fader. currently it drops down under it. i've tried messing about with z-index but not getting far. any ideas? thanks http://www.thebluebus.co.uk/tempwest/ SOS, and thank you in advance. I've been going over the links, html and .js & .css files for a couple hours now and can't find the glitch... the images are supposed to just cross fade and replace each other within the container space (sample at http://slayeroffice.com/code/imageCrossFade/xfade2.html), but are loading in a vertical column and then behaving strangely, making each one disappear as the cross fade occurs... even after a full cycle, it loads the next image on the list below the current. LINK to problem page/code: http://www.led-z.com/ Hi Guys, I would like to be able to change my webpage background image according to the screen resolution the user uses so: if screen resolution is greater than or equals to 1200*600 then background = mybackground.jpg no-repeat else background = #000000 THANKS A MILLION! Hey guys, I was trying to make a Javascript game that moves an image across the screen randomly. Instead of executing properly, it just shows the image's starting point, and stops. No movement. Is there anyway I could fix this? Thanks, Fizz. Code: <html>
<head>
<title>Image Mover</title>
<style>
DIV.movable { position:absolute; }
</style>
</head>
<script language="javascript">
function Start() {
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = Math.floor(Math.random()*650); //Ending Location - left
var dest_y = 500; //Ending Location - top
var interval = 10; //Move 10px every initialization
moveImage();
}
function NewDest() {
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = Math.floor(Math.random()*650); //Ending Location - left
var dest_y = 500; //Ending Location - top
var interval = 10; //Move 10px every initialization
moveImage();
}
function moveImage() {
//Keep on moving the image till the target is achieved
if(x < dest_x) x = x + interval;
if(y < dest_y) y = y + interval;
//Move the image to the new location
document.getElementById("ufo").style.top = y+'px';
document.getElementById("ufo").style.left = x+'px';
if ((x+interval < dest_x) && (y+interval < dest_y)) {
//Keep on calling this function every 100 microsecond
// till the target location is reached
window.setTimeout('moveImage()',30);
if (x == dest_x) && (y == dest_y) {
NewDest();
}
}
}
</script>
<body onload="Start()">
<div id="ufo" class="movable">
<img src="Mouse.jpg" alt="mouse" WIDTH = 30/>
</div>
</body>
</html>
Hi, I am an asp.net developer and I wanted to display user popup (kind of) which freezes the screen so that user won't click anything else on the screen. There are some predefined controls in asp.net, but I wanted do this using Javascript. Where can I find a sample with code? Thanks Dear Experts, I am very new for javascript so I am not even sure it is possible or not. The situation is like this, I have a page, which is actually a photo gallery with a table having 3 rows. First row shows the full screen size pic. Second row displays the Caption of that image and third row shows thumbnail view of six different images and the previous and next button. this is the sample layout: <table> <tr> <td colspan=8> Full size image will be shown in this cell </td> </tr> <tr> <td colspan=8> Caption of the image will be displayed here </td> </tr> <tr> <td>Previous Button</td> <td>Pic1 thumbnail view</td><td>Pic2 thumbnail view</td><td>Pic3 thumbnail view</td> <td>Pic4 thumbnail view</td><td>Pic5 thumbnail view</td><td>Pic6 thumbnail view</td> <td>Next Button</td> </td> </tr> My requirement is whenever the user click on the thumbnail view, which is in the 3rd row, the corresponding full screen size pic should open in 1st row of the table. As my photo gallery should be having more than 6 pics, lets take 20 pics, I want to show only 6 thumbnails in 3rd row at a time. Whenever user press "Next" button the 3rd row having 6 thumbnails should show other 6 thumbnails and previous button should show previous 6 thumbnails. I have a guess that it can be done using arrays, but how????? I have no idea. So please if you have any guesses it will be nice if you can post the entire code here as I will not be in a position to work on the hints given by you. Thanks in advance. Charles I have a problem with adding new inputs to a form (if and when required), Internet Explorer is fine but in Firefox if any previous input fields are filled when the more button is clicked they get reset to blank. JS: Code: fields = 0;
function addInput() {
if (fields != 100) {
document.getElementById('input').innerHTML += "<input type='text' name='input[]' size='30' />";
fields += 1;
} else {
document.getElementById('input').innerHTML += "<br />Maximum 100 fields allowed.";
document.form.add.disabled=true;}
}
form: Code: <form action="index.php" method="post"> <div id="input"> <input type="text" name="input[]" size="30" maxlength="15" /> </div> <!-- button --> <div id="more"> <input type="button" onclick="addInput()" name="add" value="More" /> </div> <!-- // button --> <input type="submit" name="submit" value="Submit" /> </form> as usual any help is appretiated .. I am trying to figure out how to make a random number I can plug into a script count down from that number at certain times of the day until it reaches 0. I would like it to reset itself at midnight every day. I'm trying to make it work with a script I found on here that resets itself at midnight every day. So instead of it counting down too fast, it would count down to the next number after a randomly generated number of minutes until it reaches 0. But it wouldn't necessarily have to end at 0 at midnight. It could go from 845 to 323 at the end of the day at a slower pace. Is that possible?
I want to have a screen (50% transparent white) pop up over an image on rollover with a button that, when pushed, will swap the image with a different one. Anyone know the easiest way to do this. The image is in a scrolling bunch of images similar to this: http://kellyperso.com
I use a program that produce a graphic (imagine a sinusoid, more or less). There is no opportunity to obtain from the program an output of the coordinates of the points of this curve. I desperately tried a way to achieve this, for example using a program that transform a normal raster image in a vector, and after read the vector, but all this is not precise nor accurate. I wonder if there is a way to obtain this result. Bye Hi I have the code below which geocodes a postcode and returns a lat a long value. Its standard code from Google maps. I just want to print these values to a screen. I tried document.write(value) but this produces nothing. Any help would be greatly appreciated. Code: <script type="text/javascript">
var localSearch = new GlocalSearch();
function usePointFromPostcode(postcode)
{
localSearch.setSearchCompleteCallback(null,
function()
{
if (localSearch.results[0])
{
var resultLat = localSearch.results[0].lat;
var resultLng = localSearch.results[0].lng;
}
document.write(resultLat+resultLng);
//alert("Latitude: " + resultLat + "\nLongitude: " + resultLng + " q");
});
localSearch.execute(postcode + ", UK");
}
</script>
TIA Stew All- I have a page coded that pulls files from a directory using PHP then sets them up using a Flash type player to stream the video. My problem is that I have to resize the video window for each computer I play it on. They all have different resolutions. I was able to use: Code: <script type="text/javascript" src="/jwplayer/swfobject.js"></script>
<script type="text/javascript">
var x = (+screen.width);
var y = (+screen.height);
if (x == '1920' & y == '1080')
{
var xn = 1440;
var yn = 900;
document.write(xn);
document.write(yn);
}
if (x == '1024' & y == '600')
{
var xn = 900;
var yn = 400;
document.write(xn);
document.write(yn);
}
swfobject.registerObject("player","9.0.98","/jwplayer/expressInstall.swf");
</script>
To pull out the current Resolution of the user and pass to a variable the resolution I want the video to be. Here is where the video code is Code: <object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="900" height="400">
<param name="movie" value="/jwplayer/player.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<?
echo "<param name='flashvars' value='file=../Movies$full_dir.mp4 =../Movies$full_dir.jpg' />";
?>
<object type="application/x-shockwave-flash" data="/jwplayer/player.swf" width="900" height="400">
<param name="movie" value="/jwplayer/player.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<?
echo "<param name='flashvars' value='file=../Movies$full_dir.mp4&image=/Movies$full_dir.jpg' />";
?>
<p><a href="http://get.adobe.com/flashplayer">Get Flash</a> to see this player.</p>
</object>
</object>
In the video part, where it says Height and Width, I just need to have it take the 2 variables i created depending on the resolution used. Variables xn or yn. Any ideas? Please Please help! been stumped on this all afternoon!! Thanks Defyer! Good day, This program is supposed to have a "box" cover the entire screen and then collapse upon opening the page... I cannot find what is wrong, other than the obvious error that there is no object or it is null, but this is the example the book gave... Anyone care to give me a point in the right direction Thanks, in advance. ao5431 <code> <!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>Boxed In</title> <link rel="stylesheet" href="js_styles.css" type="text/css" /> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> /* <![CDATA[ */ var clipSpeed = 5; var clipRight = 0; var clipLeft = 0; var clipTop = 0; var boxSize; var stopShrinking; var clipBottom = 0; var clipBox; var clipBox = document.getElementById("box").style; function startShrinking() { if(navigator.appName == "Microsoft Internet Explorer") { boxSize = document.documentElement.clientWidth / document.documentElement.clientHeight; clipRight = document.documentElement.clientWidth; clipBox.width = clipRight + "px"; clipBottom = document.documentElement.clientHeight; clipBox.height=clipBottom + "px"; } else { boxToShrink = window.innerWidth/window.innerHeigth; clipRight = window.innerWidth; clipBox.width = clipRight + "px"; clipBottom = window.innerHeight; clipBox.height = clipBottom + "px" } stopShrinkingInterval("shrinkBox()", 100); } function shrinkBox() { if(navigator.appName == "Microsoft Internet Explorer") minBoxSize=document.documentElement.clientWidth/2; else minBoxSize = window.innerWidth/2; if (clipLeft > minBoxSize) { clearInterval(stopShrinking); clipBox.display = "none"; } clipBox.clip = "rect(" + clipTop + "px" + clipRight + "px" + clipBottom + "px" + clipLeft + "px)" clipLeft += boxSize * clipSpeed; clipTop += clipSpeed; clipRight -= boxSize * clipSpeed; clipBottom -= clipSpeed; } /* ]]> */ </script> </head> <body onload="startShrinking()" > <div id="box" style="position:absolute; background-color:blue"></div> </body> </html> </code> Ok. My first fish is swimming across the screen perfectly fine. He starts from the left side and goes to the right side. But for the second fish, he is on the right side and he won't swim to the left side. How do I get him to start swimming? Then he will stop after the interval of 80 reaches like the left one and then start over from the left to the right. Here is my code: Code: var fish1Position = 0;
var fish2Position = 0;
horizontal = new Array(80);
var fillPosition = 10;
for(var i = 0; i < 80; ++i) {
horizontal[i] = fillPosition;
fillPosition += 10;
}
horizontal2 = new Array(80);
var fillPosition2 = 10;
for(var i2 = 80; i2 > 0; i2--) {
horizontal2[i2] = fillPosition2;
fillPosition2 = fillPosition2 - 10;
alert(fillPosition2);
}
function fish1Swim() {
document.getElementById("fish1").style.left = horizontal[fish1Position] + "px";
++fish1Position;
if (fish1Position == 79)
fish1Position = 0;
}
function fish2Swim() {
document.getElementById("fish2").style.right = horizontal2[fish2Position] + "px";
++fish2Position;
if (fish2Position = 79)
fish2Position = 0;
}
function startSwimming() {
setInterval("fish1Swim()",100);
setInterval("fish2Swim()",100);
}
Hi all, I'm new to javascript and im trying to teach myself how to use it, however, ive come accross a problem. I'm using this code embeded in a HTML page for rollover images: Code: <script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
homebuttonup = new Image();
homebuttonup.src = "./Images/nav/home2.png" ;
homebuttondown = new Image() ;
homebuttondown.src = "./Images/nav/home2.png" ;
newsbuttonup = new Image();
newsbuttonup.src = "./Images/nav/news.png" ;
newsbuttondown = new Image() ;
newsbuttondown.src = "./Images/nav/news2.png" ;
gallerybuttonup = new Image();
gallerybuttonup.src = "./Images/nav/gallery.png" ;
gallerybuttondown = new Image() ;
gallerybuttondown.src = "./Images/nav/gallery2.png" ;
}
function buttondown( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "down.src" );
}
}
function buttonup ( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "up.src" );
}
}
// -->
</script>
<a href="index.html?cmd=welcome" onmouseover="buttondown('homebutton')"onmouseout="buttonup('homebutton')">
<img src="./Images/nav/home2.png" name="homebutton" border="0" /></a>
<a href="about.html?cmd=welcome" onmouseover="buttondown('newsbutton')"onmouseout="buttonup('newsbutton')">
<img src="./Images/nav/news.png" name="newsbutton" border="0" /></a>
<a href="services.html?cmd=welcome" onmouseover="buttondown('gallerybutton')"onmouseout="buttonup('gallerybutton')">
<img src="./Images/nav/gallery.png" name="gallerybutton" border="0" /></a>
This works completly fine in 1280 x 800 but goes mental when you hover over it in 1024 x 768 screen resolution. Can anyone help please, it would be greatly appreciated! I am using this javascript code to detect screen size and display an alternate css. Code: if (screen.width<1600)
{
document.write('<link rel="stylesheet" href="<?php echo $path ?>/css/templateadjust.css" type="text/css" />');
}
This works fine in FF and Chrome but doesn't seem to work in IE. Any idea why? Hi there I know this picture_viewr js is a fullscreen slide Would it be possible to set a screen size (700x500 e.g.) and then set a background color or the part that would be outside this window??? Thx a lot allberto http://www.alfaaudiovisual.com/pictu...er/ByB/ByB.htm Hi nerds, We have some problems with some javascript code. We are creating a new button like the ones known from addthis/sharethis and would like the same behavior as there popups. We have tried by putting together some different scripts, and the action is about right. We do still have one problem, and that is the position of the popup. If the button is placed at the right site of a website, it floats out of the screen, making scrollbars. Also it don't have same position behavior in Firefox, IE, Opera ... The button can be seen he http://www.langthis.com The code related to this problem should bed this: Code: function move_box(an, box)
{
var cleft = 0;
var ctop = 0;
var obj = an;
while (obj.offsetParent)
{
cleft += obj.offsetLeft;
ctop += obj.offsetTop;
obj = obj.offsetParent;
}
var winW = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth;
var winH = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
if (cleft+box.offsetWidth > winW) {
cleft = cleft - box.offsetWidth - 30;
if (cleft < 3)
cleft = -3;
}
box.style.left = cleft + 'px';
ctop += an.offsetHeight + 8;
// Handle Internet Explorer body margins,
// which affect normal document, but not
// absolute-positioned stuff.
if (document.body.currentStyle &&
document.body.currentStyle['marginTop'])
{
ctop += parseInt(document.body.currentStyle['marginTop']);
}
if (ctop+box.offsetHeight > winH) {
ctop = ctop - box.offsetHeight - 20;
if (ctop < 3)
ctop = -3;
}
box.style.top = ctop + 'px';
}
If someone would be interested in rewriting the script, we would credit this in our about page. Else we would be thankful if someone just could help with the existing code. Best regards Langthis team |
|||||||