JavaScript - Canvas Rotation Problem In Opera

I'm using a nice little script which replaces the usual file upload input with whatever image you want and then with JS makes sure that an invisible 'browse' button is underneath the mouse pointer whenever the mouse is moved over the image you want to use.

Nice

It works on every browser ie7 ie8 ie9 FF safari chrome but not on opera. On Opera the regular file input appears.

I've had a good hoke round the 'net and I know there's loads of scripts which do similar things. But either they are too complicated for me to figure out how to use them eg uploadify (bit of a newbie) or they do similar things but just not as well - like making the custom image the same size as the file input would be (there's issues with that too).

here's the script I'm using - there's not much to it

How come it doesn't work in Opera grrrr... Is there anyway to fix it? This is perfect for what I want apart from not working in Opera

Greetings.
I"m having trouble trying to create a crossbrowser vertical menu with "showhide" submenus. When moving cursor above the submenu in Opera browser, it sometimes disappears. See here. I only guess it's because of hidden divs which however listen to the onmouseout event
The code:
Code:

<script language="javascript">
<!--
function rolldown(number){
/*close others*/
for (i=1;i<=11;i=i+1){
var id='m' + i;
if(i != number){ document.getElementById(id).style.display='none';}
}
/*open this*/
var id='m' + number;
document.getElementById(id).style.display='inline';
}
-->
</script>

And the menu sections and submenus go like this:
Code:

<li onmouseover="rolldown(1);" class="m1"><a href="home.php">home</a>
	</li>
<div id="m1" class="m1" onmouseover="rolldown(1);" onmouseout="javascript:document.getElementById('m1').style.display='none';">
<a href="1.php">1</a>
<br /><a href="2.php">2</a>
</div>

I tried to resolve the issue by destroying the divs' innerHTML, but the fun is it still works in my firefox but opera now even doesn't show the submenus. See here.
My code for the latter changed to this:

Code:

function rolldown(number){
/*close others*/
for (i=1;i<=11;i=i+1){
var id='m' + i;
if(i != number){
document.getElementById(id).style.display='none';
document.getElementById(id).innerHTML='';
}
}


/*open this*/
if(number!=0){
var id='m' + number;
//definition of concrete submenus

switch(number)
 {
 case 1:
var htmlstring='<a href="a1.php">a1</a><br /><a href="a2.php">a2</a>';
   break;
 case 2:
var htmlstring='<a href="b1.php">b1</a><br /><a href="b2.php">b2</a>';
   break;
 default:
var htmlstring='';
 }

document.getElementById(id).innerHTML=htmlstring;
document.getElementById(id).style.display='inline';
}
}

Can you help solve this whatever way? Thank you!!

Hello,

I've searched high and low for some decent code that will allow a visitor to a website to bookmark the site through a hyperlink. The bookmarking is done through a javascript function that looks like this:

Code:

function OnBookmarkButtonClick (e)
{
    if (window.sidebar)
    { // Mozilla Firefox Bookmark
	    window.sidebar.addPanel("TimeSheet", window.document.location,"");	
	}
	else if (window.external)
	{ // IE Favorite	
	    window.external.AddFavorite( window.document.location, "TimeSheet");
	}
}

I need to add some detection for Opera, Safari, and Chrome. Please note that it must be feature detection, not browser detection. But as I said, I've searched high and low for this, and couldn't find anything.

Help is much appreciated.

**Solved**

I want to display a different adsence add each time my page is refreshed.

How could this be acomplished? Is there existing banner rotation scripts at allow you to inser scripts instead of images and links.

The scripts I need to rotate look like this.

add 1

<script type="text/javascript"><!--
google_ad_client = "ca-pub-00000000000000";
/* 468x60, created 8/18/10 */
google_ad_slot = "00000000000";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

add 2

<script type="text/javascript"><!--
google_ad_client = "ca-pub-00000000000000";
/* 468x60, created 8/18/10 */
google_ad_slot = "00000000000";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Dear all, I'm trying to use Javascript to have an array of images that load randomly AND work in a slideshow manner so change every 3 seconds (in a logical order).

The code I have below presents a random image but how do I get them to continue from the random image and change to the next every 3 seconds?

Code:

<script language="JavaScript">
images = new Array(3);

images[0] = "<a href = 'photo1.html'><img src='images/photo1.jpg' alt='Photo 1'></a>";

images[1] = "<a href = 'photo2.html'><img src='images/photo2.jpg' alt='Photo 2'></a>";

images[2] = "<a href = 'photo3.html'><img src='images/photo3.jpg' alt='Photo 3'></a>";

index = Math.floor(Math.random() * images.length);

document.write(images[index]);
</script>

Kind regards
Jon

Would really appreciate any help with my request....


Im looking to setup a project for my uni assignment. its going to be a time radio site and i'm looking to create a page that has some javascript to carry out an image rotation.

I want to have:
- three images side by side
- all images to rotate from a folder containing 100+ pictures
- they all have different file names and extensions but i can change them if need be
- i want the images to rotate automatically without the page having to be reloaded or mouseovers or anything
- i would like them to rotate on different time frames i.e. first picture 3 sec rotation, second picture 5 seconds, third image 7 seconds.... something like that


if any can help me with this i would be really grateful...

iv tried scanning the web but come up short. cant use php or anything its got to be a html page using javascript.

just to point out im not cheating by the way the module im doing it for is for media design not programming just cant find the code to do what i want.

again thanks for everyones time

cheers

Hi, I need some help with my code for background image and title rotation!
I'd like to get images one, two and three to rotate every one second, and have titles change according to the images.
Currently both background and titles are not rotating.. ;-;


Code:

<script>
window.onload = rotate;

var adImages = new Array('one.jpg','two.jpg','three.jpg');
var titleImages = new Array('title1','title2,'title3');

var thisAd = 0;

	function rotate() {
		thisAd++;
		if (thisAd == adImages.length) {
			thisAd = 0;
		}
		document.getElementById("picture1").style.backgroundImage = "url(adImages[thisAd])";
		document.getElementById("picture1").title = titleImages[thisAd];
	
		setTimeout("rotate()", 1 * 1000);
	}
</script>

And here's my HTML
Code:

<div id="picture1" style="background-image:url(one.jpg);"></div>

And here's my css
Code:

#picture1{
	background-image: url(one.jpg);}

Hi guys,

I am building my second site, this time with wordpress, for a friend's restaurant.

I want to use a javascript rotating banner and so I found this nice little bit of code that does the job: http://budstechshed.com/dynamic-head...rdpress-theme/

Main code
Code:

<?php wp_enqueue_script('jquery'); ?>
<script type="text/javascript">
counter = 1;
num_images = 5; // Enter the number of images to rotate
dir = "<?php bloginfo('template_url'); ?>/images/headers"; // This is where your images are stored

function rotateHeader() {

	var header_img = 'url(' + dir + '/header_' + counter + '.jpg)'; // jpg, png, or gif

	jQuery('.art-Header-jpeg').css('background-image', header_img); // .art-Header-jpeg is the div you want to replace
	counter++; if (counter > num_images) counter = 1;
}

</script>

I have it working fine, but the code does not fade the images, which is what I require. So, is there anyway I can change this code in order to make the images fade in/out between transition?

Many thanks in advance, anyone who can help and lives in Kent or London, UK can get a free curry as a thank you

Hey guys,

Right now I have a random rotating slideshow with delay script implemented on a website. However I want to make ONE of the slides/images clickable to open up a PDF doc.

Can you please let me know what I need to add/change in this to make it do what I need? I am not big on java so need some help.

Thanks in advance!


Code:

<script language="javascript">

/*
Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com)
For this script and more, visit http://www.javascriptkit.com
*/

var delay=12000 //set delay in miliseconds
var curindex=0

var randomimages=new Array()

	randomimages[0]="images/simple_img_11.jpg"
	randomimages[1]="images/simple_img_2.jpg"
	randomimages[2]="images/simple_img_3.jpg"
	randomimages[3]="images/simple_img_4.jpg"
	randomimages[4]="images/simple_img_5.jpg"
	randomimages[5]="images/simple_img_6.jpg"
	randomimages[5]="images/simple_img_7.jpg"	

var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
	preload[n]=new Image()
	preload[n].src=randomimages[n]
}

document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

	document.images.defaultimage.src=randomimages[curindex]
}

setInterval("rotateimage()",delay)

</script>

Hi guys!

I need your help so much. I have this beautiful script for pocket pc that randomly rotates pictures in the background with fade in/out effect. Now, what I want it to do is to split all the pictures I have in groups so that on every refresh the script randomly chose a GROUP of pictures and THEN rotated only the pictures from this group. I want to do this because if you include say 30 pictures into the script this really hangs the RAM memory, and if there are only 5 pictures to choose from its much more faster.

Here's the script from html page:

Code:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
body {
background-color: white;
margin: 0;
padding: 0;
}

img {
-webkit-transition-property: opacity;
-webkit-transition-duration: 3s;
position: absolute;
width: 320px;
height: auto;
}

img.fade-out {
opacity: 0;
}

img.fade-in {
opacity: 1;
}
</style>
</head>
<body style="color: black">

<img src="01.jpg"/>
<img src="02.jpg"/>
<img src="03.jpg"/>
<img src="04.jpg"/>
<img src="05.jpg"/>
<img src="06.jpg"/>
<img src="07.jpg"/>
<img src="08.jpg"/>
<img src="09.jpg"/>
<img src="10.jpg"/>
<img src="11.jpg"/>
<img src="12.jpg"/>
<img src="13.jpg"/>
<img src="14.jpg"/>
<img src="15.jpg"/>

<script>

var interval = 4 * 1; // Seconds between change

var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;

var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}

for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);

var fade = function(){

imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';

setTimeout(fade, interval * 1000);
};

fade();
</script>

</body>

So here you can see there are 15 pictures, what should I include in this script to split them into say 3 groups of 5 pictures and make the script randomly select a group each time?

Thanks for help!

Hi All!

I'm new to the forums but discovered this site while looking for a solution to my javascript problem. I was able to find/manipulate the following code for changing a banner when a person mouse-overs a button. It is almost exactly what I want it to do, except that I'd like the following functionality to be added to it:

1) When a person hovers over a button, the image that appears should be clickable and open a webpage.

2) I would like to have the banners cycle/rotate by default until a person hovers over a button. When they hover, it should stop the cycle/rotation.

Here is an example of what the code produces prior to my desired tweaks above:

http://javascript.internet.com/image...e-gallery.html

Here is the code I currently have:

Code:

<html>
<head>
<script language="JavaScript">
function update(url,index,isSuper) {
 	document['PhotoBig'].src=url;
}
</script>
</head>
<body>
<div style="margin-left: 30%;">

<table cellpadding="0" cellspacing="0" border="0" width="234">
	<tr>
		<td colspan="8"><img src="images/hipaa-logo.png" name="PhotoBig"></td>
	</tr>
	<tr>
		<td colspan="8"><img src="images/w_spacer.gif" width="1" height="5"></td>
	</tr>
	<tr>
		<td width="120">&nbsp;</td>
		<td width="24"><a onMouseOver="update('images/alz-logo.png', 0, false); return false;"><img src="images/button1.png"></a></td>
		<td width="21"><a onMouseOver="update('images/ecomm-logo.png', 1, true); return false;"><img src="images/button2.png"></a></td>
		<td width="21"><a onMouseOver="update('images/facebook-logo.png', 2, true); return false;"><img src="images/button3.png"></a></td>
		<td width="21"><a onMouseOver="update('images/hipaa-logo.png', 3, true); return false;"><img src="images/button4.png"></a></td>
		<td width="27"><a onMouseOver="update('images/swain-logo.png', 4, true); return false;"><img src="images/button5.png"></a></td>
	</tr>
</table>

</div>
</body>
</html>

Any suggestions would be GREATLY appreciated!

Thanks!

jstwondrng

I'm in search for a simple and clean timed rotation script. I have these quotes, and right now they're coded so that a single quote displays and changes upon refresh. The script is really clean, and I would like to maintain the cleanliness but make the images rotate every couple of seconds. Here's the script...

Code:

<script type="text/javascript">
quote = new Array(3);
quote[0] = "Quote 1";
quote[1] = "Quote 2";
quote[2] = "Quote 3";
index = Math.floor(Math.random() * quote.length);
document.write(quote[index]);
</script>

It's probably a really simple piece of coding, but I'm still new to JavaScript, so it's obviously out of my range. I appreciate anyone who will help

Hi there!

How should I write this - better than it's now - so that when I rotate a figure, in the next "frame" it would stay rotated? Second thing - if you run this code, and set the angle for, let's say 180 degrees the figure is being drawn in some random location. How do I fix this? Code:

Code:

function GenericFigure(context) {
	this.states = ["wait", "moving", "rotating", "stop"];
	this.state = this.states[0];
	this.ctx = context;
	this.sqrW = this.sqrH = 20;
	this.ctxW = 200;
	this.ctxH = 350;
	
	this.colorsO = {
		red : "#ee1515",
		green : "#45d137",
		blue : "#17a3f3",
		orange : "#ff910f",
		purple : "#680077"
	};
	
	this.colorsA = ["#ee1515", "#45d137", "#17a3f3", "#ff910f", "#680077"];
	
	this.pickColor = function() {
		var num = Math.floor(Math.random() * 5);
		return this.colorsA[num];
	}
}

function Rectangle(context) {
	this.inheritFrom = GenericFigure;
	this.inheritFrom(context);
	this.width = this.sqrW;
	this.height = this.sqrH * 3;	
	this.x = this.ctxW / 2;
	this.y = 0;
	this.rotation = -1;
	
	this.setRotation = function(angle) {
		this.rotation = angle;
	}
	
	this.rotate = function() {
		this.ctx.clearRect(0, 0, this.ctxW, this.ctxH);
		this.ctx.translate(this.x + 2 * this.width, this.y - 2 * this.height + 20);
		this.ctx.rotate(this.rotation * Math.PI / 180);
		this.ctx.fillRect(this.ctxW / 2, 0, this.width, this.height);
		this.ctx.restore();
	}
	
	this.moveDown = function() {
		this.y += 20;
		this.ctx.restore();
		this.ctx.clearRect(0, 0, this.ctxW, this.ctxH);
		this.ctx.fillRect(this.x, this.y, this.width, this.height);
		this.ctx.save();
		
		if(this.rotation > -1) {
			this.rotate();
		}
		l("A");
	}
		
	this.draw = function() {
		this.ctx.fillStyle = this.pickColor();
		this.ctx.save();
		this.ctx.fillRect(this.x, this.y, this.width, this.height);
	}
}

//a tak można wywołać:

var ctx = document.getElementById("game").getContext("2d");
var rect = new Rectangle(ctx);				
      rect.draw();
				
      var inte = setInterval(function(){if(rect.y >= rect.ctxH - rect.height){clearInterval(inte);return;}if(rect.y == 60) rect.setRotation(90);rect.moveDown();}, 500);

And the third problem:

Code:

this.ctx.translate(this.x, 0);

I thought, that this line should set orientation point to top left corner of my figure, but it seems, that it doesn't - after rotation my figure is being drawn two heights lower. Again - how do I fix it?

Any help will be much appreciated .