jQuery/CSS Image resolution issue in Firefox and IE - javascript

I GOT THE SOLUTION: Using a div with background instead of the img tag works like a charm.(But it would be nice to know why did this happen, so if you have an idea feel free to comment.)
I have a kinda strange problem. I have a png image on my site, resize from 280x280 px to 40x40px (in the CSS it's 40 x auto). The problem is that the image appears pixelated on the edges, but when I change it to an other picture with a jQuery click event (same size, just colored) it appears nicely width sharp edges. If I change the order and display the colored version first, and then change it, the colored one appears pixelated. So somehow the changing affects the image I guess, but when I click on it again to change it back it's pixelated again. I tried to add the img with jQuery, no effect. Has anybody seen something like this before? Any ideas? This happens in Firefox. In IE, the pic is pixelated in both states. In chrome it works fine.
UPDATE:
This is how it looks before click:
After click:
UPDATE 2:
I thought I found a workaround, but I just found half a workaround... So I made a gif image of the first png. I display that first, then on the click event, I switch between the two png-s, and they look good. But of course, the gif on the first load has the same issue. If I change it on document.ready the png becomes pixelated...

Related

Border Around IMG

I've been looking for answers, but everything I could find does not seem to fix my problem.
I have a jQuery carousel that lazy-load images on demand (Slick Carousel). My problem is that when you're sliding the images, a thin grey border appears around the img placeholder (most of all on chrome and webkit browsers, but sometimes in firefox with a dotted line). When you click anywhere on the screen, the lines disappear, but if you continue sliding they come around each image.
I've set CSS properties border and outline to 0 and none, I tried to disable the lazy-loading to have a src too, but nothing seemed to make the little border disappear.
Does anyone know how to get rid of it?
I have attached two screenshots, one with the lines and one without them (After clicking in the background, they disappear):
This is the border for the active link element. Quick & dirty solution: Listen for the click event, then focus() on something else.
I got inspiration when writing this, so I checked the issues in the GitHub page of the slider and found this:
https://github.com/kenwheeler/slick/issues/1636
putting outline:none; in the corresponding container fixes it.
Thanks also to Thomas Landauer, haven't I checked the GitHub issues, your answer would have definitely put me in the right direction.

Slider inside image

I would like to put a Slider inside an image (specifically an iMac), like they have on unbounce homepage. I think I need a div and then jQuery, but I have no idea where to start.
The thing is the image inside the Mac changes, but not the iMac image itself.
If that helps, I am using WordPress, so I could use any plugin too.
Do you have any idea on how to do that?
Thank you,
http://i.stack.imgur.com/HVe98.png
I would suggest you to use HTML canvas for complex image rendering.
You can potentially dynamically draw what you want, where you want I'm them.
You can use canvas to rotate, move, overlay images and add listener to click events to it.
See here to start :
Dynamically add image to canvas.
Or here:
Dynamically add image to canvas
Late, but may be helpful (by increasing level of difficulty):
Use the iMac image as a frame PNG, leaving its inside "empty" using transparency. Behind it, the slider
Make a slider which every image is framde by the iMac
Position an slider hovering the iMac image

fadeToggle() same image fades differently

Just started with code. I know very little. Tried putting everything I have in JSFIDDLE... it just doesn't seem to work.
There is a background image. On top of it a video. And on top of the video there is a title that spans across the whole page.
When I try fadeToggle to eliminate all but the video, the part of the title that's exactly on the video disappears quickly while the rest of the same title (not overlapping the video) fades out nicely along with the background image as I have set it to fadeToggle(1500).
Why is the same image (the title, not the background. the background fades fine) chopped up when faded?
Thanks guys!
It could be because when the fadeToggle starts, the render puts the video over the image, so it disappears. You can try setting style="z-index: 100" to the image and see if this way you can force it to stay in top... Also, if you could try removing the video before the image is fully faded you would know for sure if it is behind the video or not.
Anyway, this seems to be the kind of problem that some browsers can handle and some browsers can't.

Resize image using Canvas awkward behavior

I want to get a displayed, big image and resize it by drawing it on a canvas.
I found the following fiddle:
http://jsfiddle.net/AbdiasSoftware/v8app/
Exisitng
This seems to work great since i want to use it to resize images and store them later on.
However, when i try to use it with my already uploaded images i get awkward behavior:
Result with my img:
Thanks
Link to the image: frankh.ursa.uberspace.de/img/34.png

Dynamically set background image not showing in Chrome

I came across an issue with the background image of a div not showing in Chrome.
A website I'm working on has two image containers sitting on top of another: The one with the lower z-index shows the currently selected image while the one with the higher z-index is used to preview other images when the user hovers over an item in the navigation.
Basically, what is supposed to happen is that every time the mouse cursor is moved from one navigation item to the next, the old preview image is saved as the background of the preview image container and then the actual image in the previewing container is hidden (without it being noticed, since the image is still in the background), swapped for the new image and then faded in. The fade is supposed to happen directly from the old image, which is why I'm setting the old image as a background before.
Now, this works perfectly everywhere but in Google Chrome, where the background image just won't show. The weird thing is, I've used a debugging break to take a closer look and noticed the background image is actually correctly set (meaning it is correctly listed in the CSS of the element at the time), but it is not shown in the browser.
var previewDelay;
$("#cnt-navigation_secondary").find(".txt-navigation_secondary").mouseenter(function(){
var newImage = $(this).find("img").attr("src");
var oldImage = $("#img-content-preview").attr("src");
previewDelay = setTimeout(function(){
$("#cnt-content-preview").show(); //The previewing container is shown (in case it was hidden before).
$("#cnt-content-preview").css({"background-image":"url("+oldImage+")"}); //The old image is set as the background of the previewing container
$("#img-content-preview").hide(); //The image inside the previewing container is hidden. All browsers but Chrome now show still show the same image, as it is in the background, but Chrome doesn't, even though it's visible in the CSS.
$("#img-content-preview").attr("src", newImage); //The source of the hidden image is set to the new image.
$("#img-content-preview").fadeIn(400); //The new image is faded in.
},100);
}).mouseleave(function(){
clearTimeout(previewDelay);
});
You can see the entire thing in action here: http://www.haasarchitektur.at/index.php?main=1&siteid=403
Try hovering over items in the architecture subnav. In Firefox, for example, the previewing images will fluidly change from one project to another while in Chrome you'll always briefly see the element in the back blink through as the background of the previewing container is not properly set.
I'm kind of at a loss of where this behaviour is coming from, so any help would be greatly appreciated. ; )
Thank you & best regards,
Michael
The background image doesn't seem to load because it is quite a large file? I tried your example setting the background colour to red instead of changing images and it works fine and blocks the original image from being shown. You may need to work out a way to have the background-image already placed in a div so it is already loaded in the browser..
As you have loaded the images already in your navigation menu, you could tinker with the css so that jquery overlays THIS image until the real image is ready?

Categories

Resources