Jquery cross-fade rollover problems in IE7 - javascript

I built some cross fade rollovers in IE7 using this single image technique:
http://jqueryfordesigners.com/image-cross-fade-transition/
It works by placing the rollover image in the background and fading the original image state when the user rollovers the image. IE7 hates it. The rollover state shows up directly below the original image.
You can check it out here:
http://hardtopdepot.com/dev/inner.html
It should be pretty obvious in IE7 but the add to cart buttons are suppossed to be Jquery rollovers. I am by no means a JS expert so Im not sure how to go about solving this problem, any suggestions would be very helpful. Thanks-

I guess it's a bug in the plugin. They check for browser names in the plugin, which is always a bad sign (not future-proof).
Anyways, it seems like the buttons you want are just text-buttons with fading background-color. Why can't you just tweak the link to look like a button, and use the jQuery Color Animations plugin?. This solution is better for in page search and screen readers.
I've created a simple demo for you here:
http://jsbin.com/egiha4/2
Source: http://jsbin.com/egiha4/2/edit
Needs some styling and a click handler or a href attribute.

You could just use simple CSS (example here: http://sophie-g.net/jobs/css/e_buttons.htm) to do the same thing.
Or
Use Scriptaculous (http://script.aculo.us/) if you want to have fancier timed fading.
This way you wouldnt have to spend time working on browser compatibility issues.

Related

Prevent HoverZoom functionality on images in website

I am making a website with some images inside. I have Imagus (similar to HoverZoom) installed so that photos are automatically enlarged on hover. However, I do not want that to happen to my images.
It seems to work for some and not for others and I can't see why? Both pngs, etc.
Is there some kind of CSS or HTML I can put it that will stop the zoom?
EDIT: I've also noticed that the images that HoverZoom/Imagus enlarge, are also the images where the CSS :hover doesn't work?
If you do not want any kind of actions happening when hovering over the images, you can add this, though I am not sure if it's exactly you want :
img {
pointer-effects: none
}
I think I found a way to stop it.
If you just resize and save the image so that it is exactly the same size as you'll show it on the website, then HoverZoom doesn't do anything.

Unable to get skrollr parallax effect on header image

everyone!
So, I'm trying to implement parallax with skrollr.js. This is my first attempt and I am pulling my hair out. I've been all over the web from searching Google, YouTube and StackOverflow. I'm trying to implement a parallax effect on a header image somewhat similar to this example except the image doesn't need to be the full height of the viewport and I only need one image to have a parallax effect. I'm going for something very similar to this on Squarespace's page.
I've been trying to simply use the code from the examples provided in the Skrollr.js repo. But after hours of failure, I turn to the trusty SO community!
Here is the page I have currently been testing the parallax header image on.
The classes .scollable-between and .scrollable-after are being altered on scroll but nothing is happening. Also, I am trying to implement this for mobile but I can't even scroll the page on mobile.
Any help is certainly appreciated! Thank you so much!
A couple issues:
First, position: fixed really doesn't play well with skrollr... whenever it is enabled on an element, the position relative to the scrolling element basically no longer exists, and skrollr events stop firing.
Second, it looks like the element with the background image (.parallax-image) is both being shown by the class '.skrollr-between' and also has a transform-3d property on it. When I disable the tranform3d property with the inspector, I can see the image.
It seems like you are combining two methods of parallax: Skrollr is one way of doing it via JavaScript, and CSS transforms are a way of doing it without Javascript... it would probably be best to chose one and roll with it.
Skrollr/JS method:
https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
CSS only method:
http://keithclark.co.uk/articles/pure-css-parallax-websites/

What is causing this simple animation script to animate improperly?

I cannot seem to figure out what is making this script go wrong...
You can find a properly animated version of the script here...
http://jsfiddle.net/tTJaM/21/
You may find the live project version here...
http://jsfiddle.net/tTJaM/22/
The live project is located at http://paysonfirstassembly.com/
As you can see, the animation does not have the same visual effect in the second link. The visual effect I wish to achieve is the one in the first link. I am willing to edit the script to do this, or make changes to the CSS that I did not make initially.
min-height:120px; in .dynPanelContent in your css doesn't let it work properly. But I don't really understand why... If you remove it, everything works at least here http://jsfiddle.net/tTJaM/22/
It looks like the min-height:120px; attribute of .dynPanelContent is what's causing it. If you remove that style, it does the rotation properly, but the boxes are no longer properly sized.
The slideUp function is an animation that modifies height, but not min-height. This is a known issue in jQuery and there's a wiki entry on Getting Around The Minimum Height Glitch

Looking for simple slideshow with previous and next navigation

I just need to display the images in the very center of the page. The images will be different widths but should still be centered. I have custom arrow pointers and I want the other images to be hidden while the other fades out and a new one in.
I've found jquery cycle and stuff but I couldn't center the slideshow to the center of the page for some strange reason.
Any advice?
What plugins can I alter (just replace images) to get what I want?
http://www.proglogic.com/learn/javascript/lesson10.php
not sure if you are still looking for this, as its been awhile since your post - but this is a very simple slideshow using javascript and a table. the image is displayed with "previous" and "next" links below, which can of course be changed to whatever you want. the only possible issue is that it uses html tables which are frowned upon (unless completely necessary). it is however, very easily center-able using css. good luck!
Checkout Anything Slider. That seems to be what you are looking for.

Images are overflowing their container in IE8 with Fancybox

In a sort of follow up to this question, I have another problem in IE8.
When clicking the gallery and the lightbox appears, the images are overflowing their containing element (by the looks of things).
(source: alexanderdickson.com)
Has anyone ever experienced this before? Of course, the good guys (Firefox/Safari/etc) display it perfectly.
How do I fix this?
Thanks
UPDATE
Should I just got with a new Lightbox?
I ended up using prettyPhoto. Not only does it work, but it provides a much better API. I could skip all my hidden link building and triggering, I passed the array of filepaths straight in and it worked great cross browser.
If it's always just a tiny bit around the borders, it'd be a quick and dirty fix to just add overflow: hidden to the fancybox container.
Set the DOCTYPE, for example xHTML1.1 Transitional for the document and the problem will be solved. Or enable X-Compability mode.

Categories