I want an image to "turn" into another image when hovering. So, basically there is an image (image1.png) on a page, and when hovering it, it should simply show another imagine (image2.png) instead of the first one.
I tried using this and it works perfectly well:
<img src='Image1.png' width='100' height='100'
onmouseover="this.src='Image2.png';"
onmouseout="this.src='Image1.png';" />
None of the images have links, that's why I didn't use any of the "a hover" solutions.
However, now I just realised that it will only work on computers and not on smart devices since they don't really have the hover function. But since the website has quite a few smart device users, it's really important that it works for them as well.
Is there some solution to that?
My JS skills are very limited, so I haven't been able to figure it out yet.
Thanks in advance for any help!
My personal experience, its better to use CSS for these type of things and you can specify absolute path in CSS no need of links for images (../../.)
Again, you cannot have hover on mobile devices but you can change hover to touch-click.
This is currently being discussed here: Changing :hover to touch/click for mobile devices
Related
I have been search for hours for a jquery type plugin that is responsive and also has proper swipe animation during gesture.
http://www.photoswipe.com/ is 99% there except that it dosent support single image lightbox mode, its geared towards grouping images into swipable galleries, which it does brilliantly.
However now and then I may want a few images on a page to have no relation to each other. Id rather have a default class, that when used all images opened up in a single image lightbox. Photoswipe automatically groups any images given the same class.
If I was able to set an option with this plugin to hide the prev/next images on a call, then it would have been perfect.
Important though, is that the plugin must use full screen like photoswipe does. So many responsive plugins seem to waiste the screen with unrequired image chrome. The intended slide show or light box should be like viewing a gallery on a smartphone - again photoswipe does this. its only fall back in being able to have non related instances.
There are a couple out there that appear to be inline with what you want. I never understood why some developers create "responsive" galleries, but waste so much space with padding or decretive chrome elements.
I was thinking of using PhotoSwipe, but the developers stopped supporting it and recently threw it out there for the open source community to maintain. Kind of turned me off during the transition.
Here are a few others I came across that I'm considering myself.
Need higher rep to post more links....so some are just cut and paste. Sorry.
JuiceBox
(http://juicebox.net/)
SwipeBox
(http://brutaldesign.github.io/swipebox/)
(full disclosure...I have an affiliate code for the next links. If you want to remove them, just don't add the "ref". If this helps, I appreciate the clicks)
Touch N Swipe
(http://codecanyon.net/item/touch-n-swipe-image-gallery/5886023?ref=bmoe)
Flare (wow)
(http://codecanyon.net/item/flare-responsive-mobileoptimized-lightbox-plugin/2392703?ref=bmoe)
So, I am developing an app using phonegap and jqm. Everything works great and it's all pretty easy thanks to phonegap build. However, I've started to see some 'stutter issues' that are really annoying. My app at the moment only has two pages and the transition effect between them is 'slide'. The first page has a background color set to it and the second one does not. Some of the issues:
When I navigate from page 1 to page 2, half of the page has the background color from the previous page. It goes away after I do some random swipes on screen.
On one of the pages, I have a regular form with some text input fields and a radio button set at the end. When I move from an input box to the radio button the keyboard slides down but it is replaced by a black area for a short period of time.
The fixed header that I have at the top randomly decides to disappear and reappear again.
These are only few of the annoying ones and these only happen on the mobile device and it works fine on the computer. So, I know it's a performance issue.
I've read up about this on the internet and here on SO and different solution have been proposed like writing custom CSS3 transitions (to take advantage of hardware acceleration) or using something like zepto.js.
What in your opinion would be the best 'cross device compatible' method to overcome these? Is there a way to force hardware acceleration with jquery mobile? Is CSS3 performance even across device platforms?
PS. I have been testing on jelly bean 4.2.2. I am not posting any of my code because they are just plain form elements and some input tags and this happens on multiple pages which are totally different so I am pretty sure this isn't code related.
Any help will be much appreciated.
JQuery writes animations using Javascript which dynamically writes inline styles that change quickly. The issue with that, is that it isn't using the hardware acceleration and if you are testing on a retina device, it animates using pixels as they are a unit of measurement. So it is skipping half of your pixels which causes the stutter.
I have written apps using PhoneGap and the best way I came up was to use CSS3 animations/transitions. Super smooth and they feel just like a native app. You will still use JQuery to add/remove classes, etc., but the movement should come from your CSS.
I have a div which is mostly off page but uses translation on hover to display on the main page.
This is my site.
However, on mobile devices this isn't the best solution to display this div. Hover doesn't work well and I have to click often to get it to show up. I'm wondering if it's possible to do it like mobile applications where if I move the page to the right edge enough, this content will display or with a button. Something like this:
Any thoughts on if this is possible or how'd id solve this?
This pattern is called 'Off Canvas layout'. Documented (with some CSS) at http://jasonweaver.name/lab/offcanvas/
There are multiple implementations you could have a look at, perhaps start with this nice demo from Zurb: http://www.zurb.com/playground/off-canvas-layouts
As regards the use of hover, you're better off using a tap/click on both desktop and mobile for consistency. The 3-bar menu button is fairly universally understood these days.
I have a problem with the view on mobile phone and tablets, i want the banner to show animation in mobile phones, i know that flash won't work for that for sure, so what alternative is there to make this possible, and maybe long so i think GIF also won't work.
any ideas?
Thanks all in advance!
Another great option for mobile and desktop alike is the WOW slider, which is a jquery plugin you can add to a page pretty simply:
http://wowslider.com/
If you have a specific question on how to implement a slideshow, post back for more help.
You can animate a banner using normal UIImageView animation methods, cocos2d or HTML5. You can also use CoreAnimation. If you want to understand how to animate it, do add some details to the question.
Use ImageView and Split the gif file into several parts and then apply animation to it or refer this
Through the use of the jQuery framework, you should be able to google and find various plug-ins that can help animate your header, even on mobile devices. If you learn the jQuery API, you can also animate most HTML element blocks on both desktop and mobile device platforms.
I gave up on trying to center an image vertically and horizontally. I seen solutions that require you to know the size of the image. I do know background-image will center it properly. However i cannot right click the image and hit save as. Is there a trick i can use to allow this?
You can always add an <img> in the <div> that you are setting the background for. And set the opacity to 0.
Users can't see it but they can still right click and save it.
No, this is not possible.
Background images are not intended to be any more than a pretty surrounding for the important parts and there is no reason why they should be easily downloadable.
Have you taken a look at this potential answer?
http://www.brunildo.org/test/img_center.html
His solution is pure HTML+CSS, doesn't require foreknowledge of the image height and works in: Opera 6+. Safari, IE5+/Win, and IE5/Mac.
In firefox you can view background images. Then you can save the image
Use Firebug plugin for Firefox. You can browse to the DOM element and then find the background image. Then there's an option to "open image in tab". From there saving it is simple.
I assume this is for development purposes and not something you want end users to do.
That depends on your browser -- in Firefox3, you may use Tools->Page Info->Media, locate the image from the list and hit "Save As..."
I think an HTML/CSS option is not possible, but I'm not completely sure.