fadeToggle() same image fades differently - javascript

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.

Related

Make a image fall when an image below it disappears

I am currently working on an app with a friend and we need to make it so that an image will fall when the image below it disappears. So it needs to like take the images place when it disappears. Any ideas on how to do this?
jQuery would be a good starting point for this. Presumably you're hiding the image with JavaScript to begin with, so add code to the same function that loops through all of the images above it and moves them down to fill the gap (possibly using .animate()).
Are you sure you want to move the images down, though? That will leave an odd blank space at the top of the screen, where there's no image left to fall from above. Images "falling" upwards when the image above them vanishes would make more sense on most HTML pages.

jQuery/CSS Image resolution issue in Firefox and IE

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...

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?

Lightbox effect: image cut in half and drops/slides in

I'd like to have an effect in a lightbox gallery (preferably FancyBox): When clicking on the thumbnail image, the lightbox opens and here it goes:
the image needs to get cut in half, with one part dropping or
sliding in from the top and the other half from the bottom.
A little bouncing effect would be great as well, especially for the
next and previous buttons which need to drop/slide in as well.
Do you know what I mean? Is that possible in Javascript at all? (No Flash if possible.)
I haven't found specific tutorials around the web yet and don't really know which exact term to search for.

Why do pictures need to be shown first for jquery image magnifier to work?

I'm working on a website that hosts music, pictures, and videos. I currently have 4 pages, a title page, a music page, a video page and an image page. This works well, but I would like to be able to incorporate the ability to play music and look at pictures at the same time. To do this, I created one HTML document with each former page inside a div with a descriptive class name. Then, I wrote a javascript function that shows and hides each div when it is called, so the page acts like it's 4 pages but it isn't. So i embedded the music player in a footer div that stays open as music plays, meaning you can switch back and forth between each media type while keeping the music footer open and playing. This is where the problem lies. When this is done, the image magnifier jquery function I used on my image page no longer works correctly, UNLESS the image div is shown at the beginning when the page opens. It's only then that you can switch between media types and still magnify the pictures. If the title div is shown first (like it's supposed to be), and you go to try and magnify an image, it doesn't work.
At first I thought maybe some of the external javascript libraries were negatively interacting with each other, but then I happened upon what I explained above and now I'm just at a loss as to why the images need to be the first things displayed for the magnifier to work correctly.
The jquery code I'm using is called jQuery Image Magnify and it's made by Dynamic Drive.
Edit: The way that I'm hiding and show div's is with style="display:none" to hide and style="display:block" to show.
Interesting question. Probably because the element needs to be actually visible for the jQuery Image Magnify function to run. I'm willing to bet that plugin uses imageElement.onload for the image magnification handler or something like that, which I think doesn't work if the image element is hidden.
As far as a solution goes, try setting your image to visible at when the page first loads, maybe with left set to -9999 px or something silly like that so it's technically still "visible" but the user can't see it. Then, after the image has loaded and (hopefully) been magnified or whatever the plugin does, move it to be a child of the div its page is supposed to be on and get rid of the negative left value.

Categories

Resources