Pop-Up Layers Not Closing Automatically.

Sorry if this question has been asked. Couldn't find anything using the title of this post as my search terms.

I have been having this problem intermittently, but on all browsers and computers i've tried.

Intermittently, popup layers are not closing. This is particularly prevalent when there there are several on a page.

You can see http://www.columbiarivercoffee.com/store.htm to witness this for your self. Just pretend you're shopping for coffee. Cruise around over the items a few times.

Thanks in advance.

Edmiston99

Nice site. As far as I could tell, they all closed/opened ok. None opened that didn't close when I left them. Using Chrome.

Also OK with Chrome.

The Ground or Whole Bean isn't a rollover.
Not sure why the Hazelnuts one is so different.
I would have soft-grouped the text and images on the MouseOff layer.

Acorn

No problems here either using Chrome. Nice touch to have a leaf next to the button for the current page.

This is what I'm getting, and this is also in Chrome. It doesn't always do it right away. You have to tool around the page a bit sometimes. Sometimes it does it right away. My mouse isn't over any of the pop ups (darker squares) in the image below.
Attachment 106868

Incidentally, thanks for the site kudos. Nobody said that "Ground or Whole Bean" was a rollover. Hazel nuts popup had to be wider due to the "quantity" options being longer text strings. Why in the world would you soft group the images and text on the mouse-off layer? And thanks for the "leaf page indicator" kudos.

Quote:

---

Originally Posted by edmiston99

Incidentally, thanks for the site kudos. Nobody said that "Ground or Whole Bean" was a rollover. Hazel nuts popup had to be wider due to the "quantity" options being longer text strings. Why in the world would you soft group the images and text on the mouse-off layer? And thanks for the "leaf page indicator" kudos.

---

Designers try to make their sites consistent. So when faced with something that looks like all the other images, I expected the same rollover effect to occur. My bad. Fine for the hazelnuts.

The point about soft-grouping items is doing so reduces the file download sizes. Many a good site loses custom if the rendering takes too long as viewers are impatient. My viewing experience here was 15 seconds for all the images to build up. Your labels are all each over 100kB; the tray alone is 2.5MB.
Soft-grouping a yellow/blue/orange background with your circle text means the background becomes a span tag with a colour, which is rendered more quickly and is bytes big.
The soft-grouping hint was also to allow the entire label to be moved as a single entity.

Acorn

You're telling me what designers do as if I'm not one. It may help if you stop talking down to me, and put that effort toward clarifying your message. The same rollover effect does occur (mouse-over object, pop-up fades in) on every store item on that page (except holiday of course). I am completely perplexed as to which item you're referring to, and what you think it is doing differently.

Regarding the color backgrounds with the circle text, they are already all one jpg image each (see below). Since it is one image, I'm assuming that you don't mean to soft group it with itself. The pop-ups are already soft grouped with their respective master item on the mouse off layer, so they do move as one. The popups are grouped, but they are on the pop up layer (not the mouse-off layer) so my assumption is that you don't mean those.

Attachment 106873
one image, not many components.

I'm really just wanting to know why the popups aren't closing. As I stated, the dark rectangles in the embedded screen capture image below no longer have a mouse over them, yet they aren't automatically closing. Can any one address the issue which is the topic of this thread. That is the one issue not being addressed.

Attachment 106874

See the black ones with the green buttons? Not closing.

Here I was able to get four of them to stick open. My mouse cursor isn't over any of the open popups in the following image.

Attachment 106875

Your problem with pop-up sticking is not happening elsewhere as previously advised.
You offered up your site stating pop-ups weren't working and I found one, I thought, that didn't work at all. It turns out you didn't put one there.
I would have thought it kind that someone cared enough to check.

I have mentioned the long load time as, until this has completed, your JavaScript events may not respond correctly.

Acorn

I can get three pop-ups to stick open simultaneously (using Chrome). There is also a facebook symbol half hidden above the circular logo at the top of each page in addition to the one on the left.

The popup problem clearly is happening elsewhere as evidenced by Gorgon. Thank you Gorgon. Plus, the page can be fully loaded, and the popup problem still exists.

Gorgon: One facebook button leads to their facebook page, and one is a "share" button.

It's ok if you don't know the answer. Hell, I don't know the answer, but if you don't know the answer, why are you answering. Is there any way to get someone who knows the answer to this question to weigh in? I know. Radical concept.

Quote:

---

Originally Posted by edmiston99

It's ok if you don't know the answer. Hell, I don't know the answer, but if you don't know the answer, why are you answering. Is there any way to get someone who knows the answer to this question to weigh in? I know. Radical concept.

---

You should remove the shadow from each of the coffee labels on the MouseOff layer as when you roll out of the MouseOver layer you are tripping over the shadow and firing up the rollover all over again. I think it is all down to this 4 px difference, but there is also might be just too little adjacent space between the labels.

If you need a shadow effect, add it separate form the rollover event.

You also have a number of empty png images duplicated but I don't think these contribute to the effect.

At no point did you mention you have to wave the mouse around to get the pop-ups to misbehave.I failed to get anything as my PC is quite nifty; so in the end, it will be down to the end-user processor speed not being able to react to so many events.

Acorn

I have a 4 ghz quad core, so processor speed isn't likely the issue. I will try your other suggestions though. Thank you.

I put more space between the labels, and the shadows no longer trigger the popups, and it's still exhibiting this errant behavior. "Waving the mouse around" is over-stating the situation a little. Just the standard movements of rolling over each item, as a shopper would do, does it. Regardless, the popups should close automatically without a mouse over them as set to do in the settings. This is clearly a problem with the Xara software, and not the individual's processor.

Anyone else?

Quote:

---

Originally Posted by edmiston99

I put more space between the labels, and the shadows no longer trigger the popups, and it's still exhibiting this errant behavior. "Waving the mouse around" is over-stating the situation a little. Just the standard movements of rolling over each item, as a shopper would do, does it. Regardless, the popups should close automatically without a mouse over them as set to do in the settings. This is clearly a problem with the Xara software, and not the individual's processor.
Anyone else?

---

Still me.
I've thrown together a mashup of images and rollovers and I cannot replicate your problem in my Xara software: Attachment 107003.
Excuse the large design file size.

Acorn

@edmiston99:
I only get stuck roll-overs with FireFox. Every other browser seems to work fine no matter how much I wave the mouse around (hardly a normal scenario in any case).
I suggest you remove the fade transitions.

And logically it can't be a Xara bug if it works sometimes and fails sometimes in your browser/s. It's HTML and .js which the browser reads and renders. If it works once it should always work, if it fails occasionally then the bug is with the browser.

PS: I just updated FF to ver 38.0 and no longer get stuck roll-overs.

edit: Spoke too soon.
IE, Chrome and Opera are fine though.

Quote:

---

You're telling me what designers do as if I'm not one. It may help if you stop talking down to me, and put that effort toward clarifying your message.

---

May I say from the outset that this comment is very rude, unnecessary and detrimental to your cause. Acorn is trying his best to answer your problem and in no way is he "talking down" to you. Let's stay civilised.

I can see this problem within FF but not other browsers. I suggest it's more to do with the call to paypal on the roll-over effect than it is to do with Xara's software. What happens if you also call the paypal purchase button within the mouseoff state?

Can't replicate the problem here.
► http://xara-users.magix.net/public/hover-tiles/

Maybe there's some other placeholder code or head code the OP has used.
I notice the Sharethis fixed social buttons which have open and close delays in the source code..

Also, the page background graphic is really too heavy, it's 2.5Mb on it's own..
http://www.columbiarivercoffee.com/i...files/3219.png

Quote:

---

Originally Posted by steve.ledger

Can't replicate the problem here.
► http://xara-users.magix.net/public/hover-tiles/

Maybe there's some other placeholder code or head code the OP has used.
I notice the Sharethis fixed social buttons which have open and close delays in the source code..

Also, the page background graphic is really too heavy, it's 2.5Mb on it's own..
http://www.columbiarivercoffee.com/i...files/3219.png

---

Quote:

---

Originally Posted by Egg Bramhill

May I say from the outset that this comment is very rude, unnecessary and detrimental to your cause. Acorn is trying his best to answer your problem and in no way is he "talking down" to you. Let's stay civilised.

I can see this problem within FF but not other browsers. I suggest it's more to do with the call to paypal on the roll-over effect than it is to do with Xara's software. What happens if you also call the paypal purchase button within the mouseoff state?

---

You both beat me to my final query, that around other added code.
@steve.ledger - your observation about delays around the Sharethis feed may have nailed it. JavaScript is not multi-threaded so any delay will impact on the roll-overs. Some event somewhere is preventing the browser responding correctly at random times.
@edmiston99 - to analyse any more, I think you need to upload your design.

Acorn

This other website that I built is doing it too, and there is no call to Paypal. My mouse cursor is NOT over both items. I will definitely try removing the sharethis code, as this is something that both sites have in common. The heavy background image is another. (www.edbergstromfishing.com/species.htm)

Attachment 107018

Regarding the background graphics being too heavy. Large background graphics are fairly commonplace. Being part of the allure of the website, how could that be fixed without removing the image?

Regarding the "no way is he talking down to me". Puhleeze. I think even Acorn would admit to a little condescension in that moment. I may not be the sharpest knife in the drawer, but now you're treating me like I'm an idiot. My intent was not to be rude, but I don't feel that there is anything rude about calling someone out for being condescending.

I completely removed the background image in question, and the "Share This" code mentioned, and it still exhibits the aforementioned behavior. I will attach the file.

Quote:

---

Originally Posted by edmiston99

I completely removed the background image in question, and the "Share This" code mentioned, and it still exhibits the aforementioned behavior. I will attach the file.

---

OK, two things to try:

1. For each of the Labels, in Web Properties > Mouse-over, set the Show pop-up layer to the required layer. You only have it set properly for the Hazelnuts. Without it, the pop-ups are probably acting as if they are instant roll-overs (as if on the MouseOver layer).
2. For each of the Labels, in Web Properties > Mouse-over, set the Effect... > Fade > Speed to one second. In use, i find I instinctively slow down my mouse movement to match.

If you prefer Instant (not coffee), you could move all the pop-up material onto the MouseOver layer and soft-group there so each Label acts as a button.

Acorn

Quote:

---

Originally Posted by edmiston99

I completely removed the background image in question.

---

Sorry, my mention of the heavy image was not that it may contribute to the problem with the roll-overs, it was just in passing. It's a large download which slows the loading of the page. Generally this is not a good thing.

Agree with Acorn. I find if you set all the roll-over effects to "Instant" the problem disappears from FF. FF seems to have issues with transitions that the other major browsers handle fine.

Quote:

---

Originally Posted by steve.ledger

@edmiston99:
I only get stuck roll-overs with FireFox. Every other browser seems to work fine no matter how much I wave the mouse around (hardly a normal scenario in any case).
I suggest you remove the fade transitions.

And logically it can't be a Xara bug if it works sometimes and fails sometimes in your browser/s. It's HTML and .js which the browser reads and renders. If it works once it should always work, if it fails occasionally then the bug is with the browser.

---

:rolleyes:

Oh! It appears I agree with Sledger as well ;) Sorry Steve.

The mouse-over settings were a by-product of separating the drop shadows from the labels. These were set correctly before. That's crazy considering they were still working.

Setting to "Instant" transition fixed the problem. That kind of sucks, but in my mind points back to a Xara issue does it not? I was having the same problem in IE, Chrome AND FF.

I'm still wondering what I could do regarding the large images also. Even creating bitmap copy, and optimizing image doesn't change this size. Xara insists on making png's of everything, and I do know that my incessant and maniacal use of drop shadows contributes.

Quote:

---

I'm still wondering what I could do regarding the large images also. Even creating bitmap copy, and optimizing image doesn't change this size. Xara insists on making png's of everything, and I do know that my incessant and maniacal use of drop shadows contributes.

---

If you set your background image to 'tiled' (as you have) and set the scrolling value to 'scrolling' NOT 'fixed' you can do away with all those png's and export as jpg as they take on the background image as well. This doesn't matter with a scrolling background as all images scroll together, it only becomes obvious if you have the background image 'fixed'.

I created a mock-up of your page and got the images count down to 642Kbs. (If I grouped the whole lot I could further reduce it to 433Kbs in total)

See attached xar

And you can determine whether it exports as a png or jpg by selecting the image (or Group) and going Web Properties / Image (at least in XDProX10)

You weren't kidding. Wow. What a file size difference. All of the neatest visual effects of Xara ultimately end up being impractical for actual use. That kind of sucks. I really like drop shadows, fixed backgrounds, popups that fade in, etc... I do think it's worth not using these effects though, considering. Thank you for the advice.

I did the same thing with www.edbergstromfishing.com. It definitely speeds things up.

Quote:

---

Originally Posted by edmiston99

All of the neatest visual effects of Xara ultimately end up being impractical for actual use. That kind of sucks. I really like drop shadows, fixed backgrounds, popups that fade in, etc... I do think it's worth not using these effects though, considering. Thank you for the advice.

---

Oh they are worth using, but not in excess. You have to consider the local PC performance among all other things.
None are impractical when used well, but mixing many on a single page along with 'heavy' images and third party scripts/html snippets and so on can just bog the browser down. At the end of the day it is my belief that the designer must take full responsibility for the final output and the performance of their website.. Xara just provide the tools that you use to build your vision.

I don't mean to not use them at all. I meant in the way that I was using them. Definitely creating a compound issue by stacking these effects. Thank you again.

Quote:

---

Originally Posted by edmiston99

I don't mean to not use them at all. I meant in the way that I was using them. Definitely creating a compound issue by stacking these effects. Thank you again.

---

While I have not found any problem of the type you are getting, I felt it could be alleviated using a mixture of Xara design approach and some JavaScript.

The design file here, Attachment 107134, deconstructs your coffee label and Placeholder form to recombine them in a much smaller payload.

Each Form Placeholder has a Name of htmlclass=fade. I decided to use a fade in/out time of 0.75 seconds.

• This very fine control is in the CSS3 - Fade Placeholder that invokes fade action.
• Each Form Placeholder and Label is now on the MouseOff layer.

Each Form Placeholder embeds an Envelope bitmap as a background. I gave this a Name of filename=envelope.
The text describing the coffee variety are in SPAN tags in the Placeholder code.
The addition of a Shadow now does not interfere with any of the other effects or actions.

I cut out your roundel so I could Name it (filename=crcc).
By doing so, your packet could be varied as it is now a box with a repeating linear fill.

There are a lot of design techniques in this page that I hope are of use to others too.

Acorn