PVII Support Forums + General Web Design, CSS, and Dreamweaver Discussions

PVII Forums » Dreamweaver Discussions

Spry replacement solution

(14 posts) (2 voices)

Started 9 years ago by VL Branko
Latest reply from VL Branko

VL Branko

offline
Member

Not exactly sure which forum is the right one for this question.

I am looking for a Spry replacement solution, preferably CSS or a good DW extension from P7 or anyone else for that matter.

This is the problem. If you go to this page from old GL2DW site (I have since made a new template using Affinity)

http://shyamasundaradasa.com/jyotish/main/jyotish_services.html

and scroll down you will see an image. If you hover over the image a caption appears via Spry Effects. I want to replace this for a variety of reasons including the fact that I forgot all the steps that I went through to make it before and it would take a few hours to go through my notes and get it right again so that I could apply on pages made from new template. Aside from that as we all know Spry is dead so if I am going to spend a few hours I would prefer to spend it on learning something with a longer lifespan.

A CSS solution( that plays well with Affinity) would be preferable since that looks like it will be around for a long time.

I am open to all suggestions.

VL Branko

Posted 9 years ago
Al Sparber

offline
PVII Team

Frankly, with all the content on that page I would simply write the description below the image so it's always visible. You could use CSS animation and despite the advice from Nancy and Murray on the Adobe forums, it can be deployed so that old browsers and touch devices simply see the content by default, while modern conventional browsers see the animation. Let me know and I'll try to do an example for you. Using jQuery for such a task would be tantamount to buying a 40-foot semi to do the grocery shopping.

Posted 9 years ago
Al Sparber

offline
PVII Team

Here is a quick example:
http://www.projectseven.com/csslab/css3/image-description/branko.htm

In modern browsers you will see a nice animation to reveal the description. In old browsers, and mobile devices, the description will simply display by default. In older browsers that have partial support for CSS3 (like IE9 and Firefox 12) the description will hide and show but without the animation.

Posted 9 years ago
VL Branko

offline
Member

Here is a quick example: 
http://www.projectseven.com/csslab/css3/image-description/branko.htm
In modern browsers you will see a nice animation to reveal the description. In old browsers, and mobile devices, the description will simply display by default. In older browsers that have partial support for CSS3 (like IE9 and Firefox 12) the description will hide and show but without the animation.

Thank you for that, I will download the page and take a look at the CSS.

Posted 9 years ago
VL Branko

offline
Member

Frankly, with all the content on that page I would simply write the description below the image so it's always visible. You could use CSS animation and despite the advice from Nancy and Murray on the Adobe forums, it can be deployed so that old browsers and touch devices simply see the content by default, while modern conventional browsers see the animation. Let me know and I'll try to do an example for you. Using jQuery for such a task would be tantamount to buying a 40-foot semi to do the grocery shopping.

That was just an example page, I have plenty of other pages. The idea is to keep the pages as clutter free as possible but the surfer knows that if he wants more he just has to click or tap on the image.

I agree with you that is why I was favoring CSS for such a simple task. And as time passes and older browsers disappear it will eventually be supported by all browsers. I am building it for the future.

I am still interested in any responsive "tool-tip" solution when it comes out.

One thing I noted is that even though that Spry effect is triggered by a mouse hover it can also be triggered by a tap on a smart phone if the image is completely exposed, if only part of teh image is visible it doesn't work. But I will set the trigger to be a mouse click

Posted 9 years ago
VL Branko

offline
Member

Here is a quick example: 
http://www.projectseven.com/csslab/css3/image-description/branko.htm
In modern browsers you will see a nice animation to reveal the description. In old browsers, and mobile devices, the description will simply display by default. In older browsers that have partial support for CSS3 (like IE9 and Firefox 12) the description will hide and show but without the animation.

I am not worried about supporting older browsers as they will just fade away and become less not more relevant with time. According to my weblogs < 18% of my visitors use old browsers and it become less every month. In 2009 64% used these old browsers, hence I make very little or no effort to support them. It would be a classical example of diminishing returns. Besides if they can't afford a new browser they can't afford my services. Sort of like Ferrari worried about if someone who is still uses MS EI 6 is going to buy one of their cars. (-:

Posted 9 years ago
VL Branko

offline
Member

Here is a quick example: 
http://www.projectseven.com/csslab/css3/image-description/branko.htm 
In modern browsers you will see a nice animation to reveal the description. In old browsers, and mobile devices, the description will simply display by default. In older browsers that have partial support for CSS3 (like IE9 and Firefox 12) the description will hide and show but without the animation.

I looked at it in my smart phone there is no animation, does this mean smart phones do not support CSS animation or that you just didn't implement it?

Posted 9 years ago
Al Sparber

offline
PVII Team

Touch devices do not do CSS3 animations unless they are run once when the page loads or script is used. It would, in my opinion, be silly to animate something like that in a mobile device - especially a phone. It would not be very usable unless your phone were at least a foot tall :-) If you want to animate stuff in phones, then you will need script.

Posted 9 years ago
VL Branko

offline
Member

Touch devices do not do CSS3 animations unless they are run once when the page loads or script is used. It would, in my opinion, be silly to animate something like that in a mobile device - especially a phone. It would not be very usable unless your phone were at least a foot tall :-) If you want to animate stuff in phones, then you will need script.

Is this something that will be remedied in the future for touch devices do you think? Otherwise I may have to go with JQuery.

Posted 9 years ago
Al Sparber

offline
PVII Team

I'm not sure you understand what I was saying about phones. Mobile devices do not have a hover. It's not a bug. Think about it :-) As for your task, I really think it would be a very bad thing to attempt to hide and show the description on a phone. There is not enough space for the user to know some additional information has appeared. Now, your particular page is simply shrunken on a phone, but a modern responsive page would be linearized and actually readable and hiding and showing the image caption would be bad.

That said, if you want to have a hide/show on a phone, then you would need to use a script. It doesn't have to be jQuery.

Posted 9 years ago
VL Branko

offline
Member

I'm not sure you understand what I was saying about phones. Mobile devices do not have a hover. It's not a bug. Think about it :-) As for your task, I really think it would be a very bad thing to attempt to hide and show the description on a phone. There is not enough space for the user to know some additional information has appeared. Now, your particular page is simply shrunken on a phone, but a modern responsive page would be linearized and actually readable and hiding and showing the image caption would be bad.
That said, if you want to have a hide/show on a phone, then you would need to use a script. It doesn't have to be jQuery.

I know they don't have hover, just that that example only used mouse over, but in reality if you look at it in a smart phone and tap it the data shows and hides when you tap. But the trick is that the image has to be completely visible for that to work.

Anyway I will consider your sage words of advice. For now I will convert the whole site over to the new Affinity template, by the time that is complete I will have mulled over it for a while and decide what I should do.

BTW this is what the new template looks http://shyamasundaradasa.com/test2.html

You note that any photos that would have sliding captions are at the end of the page; of course photos will change and some pages will not have any images. Do you think that having the photos at the end like this would be more friendly to having a script show the extra data? Or better to just use CSS animations like in your example that permanently show the caption on phones?

Posted 9 years ago
VL Branko

offline
Member

I suppose P7 "tool tips" would not work on a phone.

Posted 9 years ago
VL Branko

offline
Member

After thinking about it for a while I like your CSS solution better than JQuery for the following reasons. In large view-ports a mouse hover would alert the viewer that there was something to see but on small view-ports they would not know. So better to just show them the contents by default.

I will implement it after I have the site converted then it should be pretty easy to just add the css to the style sheet etc.

I may come back to you for some help on tweaking it.

Thank you.

Posted 9 years ago
VL Branko

offline
Member

Here is a quick example: 
http://www.projectseven.com/csslab/css3/image-description/branko.htm
In modern browsers you will see a nice animation to reveal the description. In old browsers, and mobile devices, the description will simply display by default. In older browsers that have partial support for CSS3 (like IE9 and Firefox 12) the description will hide and show but without the animation.

Any other examples or ideas?

Posted 9 years ago

PVII Forums » Dreamweaver Discussions

RSS feed for this topic

Reply

You must log in to post.