Display different menu on right click

[Lucy]

I'm creating an animated background for my site, but this currently seems to require me to store my images in a div, rather than as background images - hence, if you right click on most areas in the page, the 'image' menu is displayed rather than the one which has 'refresh', etc in it (I don't know if these menus have official names...). This is already annoying me horrendously, so I imagine it would annoy users too. I know you can completely disable menus on right click, but that doesn't seem very user friendly. Suggestions?

[Lucy]

Okay, I take it this can't be done. In that case, another question: an alternative solution would be for me to use about 6 divs, and set the background image for each div and hide the divs, rather than using a selection of images in a single div. This would solve the problem of the image menu on right-click anywhere on the page. But it seems...messy. What do you all think?

(I was initially using one div and changing the background image, but this makes the animation jittery due to the constant loading...)

[davej]

You can do a menu if you really think it is something you want...

 

https://www.google.com/?gws_rd=ssl#q=jquery+html5+context+menu

 

http://developer.telerik.com/featured/sordid-history-context-menu/

[dsonesuk]

The reason no one answered, is probably because no one could visualize what you mean, a link or code to give example would help more in given a solution. Why can't you change background image in single div, rather have six divs and hide and show these divs with different images? just can't get want you are looking for, so we basically ignore until you can give us more info.

[Lucy]

dsonesuk - Sorry, I'll give more detail tommorow. I can't change the background image of a single div because it causes the animation to flicker a lot - I looked into it, and it seemed the answer was that you can't keep loading large background images without some lag - so the images need to be pre-loaded in some way.

 

davej - Thanks for the link, though I am trying to avoid using Jquery until I have a good knowledge of Javascript. I did see something about being able to create your own menu which I think is what you're suggesting, though I was originally thinking there was a way to simply switch to another pre-existing menu instead.

[dsonesuk]

You should always preload large images, that you need to show quickly when required, this is an old script that still works

function MM_preloadImages() { //v3.0  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}

you then just list the images within function on window.onload or place it at bottom of page so it won't cause delay in the page loading.

MM_preloadImages('image1.jpg','image2.png'); 

if it is menu background images, you should use sprite image which consist of a single image file, with all menu images in normal and hover state, and then you adjust background positioning to force hover state into view when hovered over.

[Lucy]

Dsonesuk -

Sorry, I struggled to understand your code. I wrote this to pre-load the images though:

function addImage(source, arr)	{	arr.push(document.createElement("img"));	arr[arr.length-1].setAttribute("src", source);}//load imagesvar patterns2 = [];addImage('images/bg2/square-01.png', patterns2);addImage('images/bg2/square-02.png', patterns2);addImage('images/bg2/square-03.png', patterns2);addImage('images/bg2/square-04.png', patterns2);addImage('images/bg2/square-05.png', patterns2);addImage('images/bg2/square-06.png', patterns2);

(Then my code uses the array to iterate through the images, switching them around as the background image for one div)

After the first loop through, the animation is smooth, but on the first, it's still quite 'flickery'. Have I done it wrong?

 

Edit - This might be working, actually. I checked in Opera and it runs smoothly, cleared history + cache in Firefox and it works properly in that now too. Thanks! I never would have thought of pre-loading them.

 

The menu I was originally referring to - what I meant was, I've been using actual images (large enough to cover the page) stored in a single div, as 'backgrounds', animating them by switching the displays around, making the other images invisible. So if you right click, it displays the default Firefox 'image' menu ('save image as', etc). I wanted to try and change that so it just showed the normal right-click menu ('refresh', etc). Does that make more sense than my original explanation? Nonetheless, the solution you're suggesting sounds better than trying to mess around with the default browser menus.

Edited April 8, 2015 by Lucy

[Lucy]

I am kind of confused about this. As in my previous post, if the cache/history is cleared the animation works fine... but if I refresh the page, it goes back to being jittery for the first 'loop' of the animation. Does anyone understand what's going on here?

[dsonesuk]

I have never seen or used createElement for preloading image? always use new Image() so that might be you problem try this form another topic

            var imageObj=[];            var imgSrc = [];            imgSrc[0] = "images/img1_L.jpg";            imgSrc[1] = "images/img2_L.jpg";            imgSrc[2] = "images/img3_L.jpg";            for (i = 0; i < imgSrc.length; i++)            {                imageObj[i] = new Image();                imageObj[i].src = imgSrc[i];            }

[davej]

I don't have experience using it, but Chrome has a Network tab in the developer tools that displays a timeline of each file load.

[Lucy]

I just tried using new Image(), it still does it. This is now only happening in Firefox - and it doesn't happen on my husband's computer (also Firefox. And his browser has like 100 tabs running at a time...). I had a look at the developer tools in chrome but it doesn't seem to happen in that browser. So not in Opera, Chrome, or IE8.

 

So maybe I just need to re-install Firefox? If it only happens in Firefox on my computer, can I assume there's not much I can do about it and it will work mostly fine for other people?

Edited April 8, 2015 by Lucy

[davej]

Just because you attempt to preload the images -- you still need to wait until they are loaded. Apparently they are not yet loaded.

[Lucy]

The function does wait 1.5 seconds before trying to use them. Shouldn't that be long enough? There are only 6 images. And this is only happening on refreshing the page - the first time you open the browser (with cleared history etc) it works fine.

Edited April 8, 2015 by Lucy

[davej]

That seems strange. You could assign an event handler for the load event for each image. Have the handler increment a count and enable the animation once the count reaches the known total.

[dsonesuk]

Remember it depends on size of image and speed of your connection, you should have the default image load normally so you see it instantly without it going through preload as the preload usually runs at the very last moment if placed at bottom of page, or run on window.onload function when the page is fully rendered. Slide images i find wait at most 8 sec before starting to load next image, this will give a preload the time needed to load required images for a slideshow or whatever.

[Lucy]

Thanks Davej, I'll try that in a moment.

 

Dsonesuk - they're about 7.9kb each, and I'm testing this locally. I do see what you're saying, but this doesn't happen on the initial page load (only after refreshing), so it can't be simply that they are too large to load quickly enough, surely? Also, I tried setting the interval for the image change to 5 seconds, and it still happens.

 

Edit - I added this:

for (var h = 0; h < patterns2.length; h++)	{	patterns2[h].addEventListener(onload, console.log('loaded'));};

And it seems that all the images are immediately loaded on page load - there wasn't any delay, really.

 

By the way, I'm having an issue related to this and wondered if anyone could help (wasn't sure whether to make a new thread as it's part of the same thing):

This is the code for the fade effect (sans adjustments for IE8):

var fO = 1;var fI = 0;var step = 5;function opacity(opac, layer)	{	var o = opac.toString();	layer.style.opacity=o;}function fadeEffect(layer)	{if (fO === 1)	{	originalD = new Date().getTime();	console.log(originalD);};	if (fO > 0)	{		console.log('Fading out');		opacity(fO, layer);		fO -= 0.04;		if (fO <= 0)	{			fI = 0;		};	}	else if (fO < 0 && fI < 1) {		console.log('fading in');		opacity(fI, layer);		fI += 0.04;	}	else			{		clearInterval(fTiming);		fO = 1;		newD = new Date().getTime();		console.log(newD - originalD);	};}fTiming = setInterval(function()	{fadeEffect(tLayer)}, step);

This function will run 50 times before cancelling the interval. If there are 5 milliseconds (var step) between each interval, the total time taken to run should be 5 x 50, so 250 milliseconds, right? However, after running it five times it took: 1147 ms, 1155 ms, 1176 ms, 1309 ms and 1184 ms.Now if I set 'step' to 30 instead, it should take 1500ms. The times I get: 1529ms, 1557ms, 1505ms, 1571ms, 1536ms.And set 'step' to 100ms: 4994ms, 5007ms, 4994ms.These two examples are clearly much more precise. More like what I'd expect.Basically, going below 30ms, the accuracy get worse to the point where if step is set to 1ms, the function takes anywhere from 600ms - 1500ms, when it should take 50.I looked into this, but all I found was some places saying there's a minimum delay of 4ms in some browsers, which doesn't explain this problem. Also, I disabled everything else on the page, so this is currently the only function running.The problem with this is that I need to know how long the function consistantly takes to run, so I can set it to run at the right time to coincide with the background change.

Edited April 10, 2015 by Lucy

[Ingolme]

The timers used in setInterval and setTimeout are very imprecise. I actually wouldn't suggest using times under 16 milliseconds, because browsers in generally don't usually refresh the screen more then 60 times a seconds.

[Lucy]

Oh... I just took out the console.log statements in the fade function above and now it takes less time.

Also, when Firefox takes 500ms, internet explorer 8 takes... 2700. I don't even know what to do about that.

 

Ingolme - ah. Okay, I'll use 16ms.

Edited April 10, 2015 by Lucy