I am using and modifying the sample demo page and have a error on IE:
Using:
The fade effect on IE causes that the image shadow.png appears black on border for a while, fade effect is too uggly, firefox and safari works fine. Now I have to set fade=0 only to support IE7.
My background is php and I am now branching into jQuery. I have the following code set to update a <div> on a page. How would I modify this to add an effect (such as a fade-in) when the new content appears?
Code:
var refreshId = setInterval(function() {
$("#responsecontainer").load('showcontent.php?randval='+ Math.random());
}, 5000);
I've two images: test1.jpg and test2.jpg
I'd like to change the src of <img src="test1.jpg"> to src="test2.jpg" with the mouseover function adding it the fade effect.
I'm trying to create an effect where you click on a thumbnail image, and the link to the thumbnail will replace the main image, but fade it in. This is the code I'm currently using:
$(".thumbs a").click(function(e) {
e.preventDefault();
$imgURL = $(this).attr("href");
$(".boat_listing .mainGallery").fadeIn(400, function() {
[Code].....
This works and replaces the image without a fade effect. What do I need to change to get the fadeIn effect to work?
I have a div, which I would like some images to rotate as the background-image so it is a slideshow. In additional, I want a fade in/out effect between the image transition.
View 3 Replies View RelatedHow to get background images to rotate with a fade in a header without using an image in div in the body. A combination of javascript and CSS -- not sure if this is the correct forum or not? I can achieve an image changing/rotating in a div using the code just below. But I have to refresh the page for the image to change.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL]">
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Rotate Images</title>
<script type="text/javascript">
var backgroundSrcs = new Array("list-of-images");
function pickimage() { .....
And I can get the image to rotate, change on its own, with the javascript below but have to do it using through an img div, a place-holder.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL]">
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Rotate Images through img tag</title>
<script type="text/javascript">
var rotatingImages = new Array("../list-of-images"); .....
So what I really would like to do is have the image rotate through the div and not have to have the img tag present. I haven't even tackled the fade but have some thoughts about this. Since it's the header div I want to do the fading not the img tag, I'm thinking the way to make the fade work will be the same.
I know this is a known issue but I have had no luck with finding a fix for the issue I am getting with IE8. I get a nasty black border around my png that I am using the Jquery fade function. Does anyone have any useful hacks/tricks to fix this?
View 2 Replies View RelatedI have a gallery style page with rectangular images on laid out like a grid of nine. When the user looks at the page there is just the images and no information, but when they hover over the image I would like some text and a bar underneath to show up over the top so the user can read some information.my images sit in "a" tags. There is also a div tag in there which has it's z-index and position (absolute) set up so that it sits over the top of the image element in the "a" tag. stripped down e.g.
<a href="#"><img.... /><div>the info</div></a>
I need the div tag withinin the "a" tag to be set to 0 opacity. When the user hovers over the image the div tag slowly fades in to 100% opacity. Once the user moves the mouse away from the image the div tag slowly disappears again.I need each one to work independently so that it only changes the one currently being hovered over.
I would like some help in how to "shadow effect" words and letters in.I don't know anything about Javascript butI know there has to be a simple way to do this and be able to change the shadow color, whether shadow is left or right, size, etc.
View 14 Replies View RelatedI'm using a feature carousel on my new website - this is a horrible test version but take look and you'll see my problem - [URL]... It works fine in Chrome, FF and IE9 - however in IE8 and IE7, on the fade, an ugly black outline is added to the transparent PNG.
Does anybody know how I can remove the black outline in IE8 and IE7.
I'm trying to create a slide show using the script here:[URL]Here's my page.[URL] The problem is in IE (I'm testing this in IE7) there is a small black rectangle that displays in the fade. (I've tested this in Opera, Safari and Chrome. It works in all. I also tested it using an IE tester [URL]. Only 8 and 6 versions work correctly.) I can see on the dynamic drive page the slide show works correctly.I've tried changing the "background='black'" in the .js in a variety of places to transparent and tried to put an image, a transparent .png, in place of the background. No success with either one.
View 4 Replies View RelatedAll other browsers work fine, but IE 9 flickers on the rotating gallery on this dev site..This is the JS function primarily responsible for it.
Code:
this.fadeRotate = function(currentItem,className,firstTime){
var moduleClass = document.getElementsByClassName(className);
var moduleItemCount = moduleClass.length;
if(moduleItemCount != 1){
[Code]...
To narrow it down more, it only seems to happen when you mouse in and out of certain divs.
I found this vertical tabs functionality in jquery: [url]
Now it's nice and exactly what I was looking for, but I would like to know how to do the same exact thing in pure javascript. Can anyone link me to any tutorials that demonstrate how to achieve the same effect where content appears or disappears in a division of the page to the right of the tabs.
This is a really awesome script that I'm sure all of you can put to use if you haven't yet heard of it. However, I'm trying to get it to fade a background image on my css styled navigation for my a:hover. Here is the script with a little simple tutorial on how to set it up: [URL] My only other knowledge is in PHP, so after about 2 hours of fail in this client-side language
This is the link to my site so far: [URL] You can see the script working as it is on my little yellow MW logo on the right side of the navigation. So in my scenario, I am looking to fade button.png to button-hover.png (both repeating on the x axis).
Here's my code for Html.
What I want to do is to have the div "test" to disappear with a fading effect and removed when the "CLOSE" link is clicked or when the user has viewed it for 8 seconds. I tried everything but my site just seems to hide and remove the div "test" instead of fading away. Is there a solution to this problem?
My code is shown below.
I'm trying to create a fade in out effect of three divs in the same place, but for some reason the effect is duplicating itself for two of the divs.
<div id="click1">click1</div>
<div id="click2">click2</div>
<div id="click3">click3</div>
<div id="content1" class="vis">This is the content initially</div>
[Code]....
I'm designing a website over a WordPress platform and I decided to use the post thumbnails feature to make post's look more interesting. The thing is I tried to do a javascript to make post thumbnails fade on hover, but it's not working, and i really dunno why.
Code:
$(document).ready(function(){
$(".wpis_main .img img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
$(".wpis_main .img img").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
[Code]...
I've been using prettySociable on my site (can be downloaded here. I use the uncompressed version). I want to be able to change the tooltip (that shows up when you drag an image) to default to an image on my server, rather than to the page title. I think I've tracked down the code on line 265 of the jquery.prettySociable.js file, but I'm unsure how to change it:
[Code]...
If you click the right-facing arrows along the right side you'll open a side-bar column, clicking a left-facing arrow will then close the side-bar.This functionality is "OK" at best. What I would like to see is clicking the right-facing arrow causes the current sidebar to fade-in, and simultaneously have the arrow flip to a left-facing icon; the idea being to add a toggle function to the arrows.The code I'm using at the moment is shown below, this string works for me because it only allows 1 sidebar container to be displayed at a time...
<script type="text/javascript">
lastone='empty';
function showIt(lyr)
[code]....
I don't know if this is the right forum for this question, but I recall seeing an effect on a page where the test fades in from the top down ? Where can I find this ?
View 3 Replies View RelatedI am trying to turn my 'pageheader' into a slide show. After literary working my through dozens of scripts, I still did not find the solution... The problem is that I made my site with RapidWeaver. It's template based, so it is complex to add anything (script, unordered list, etc) to the div I want to show the slide show in. There's also text inside that div that should not be lost.
The only script I could find that works in this situation is this one. I uploaded a working example here that also shows the script. It's a rather primitive solution to say the least. Can anyone tell me (a) if how to add a fade in/out effect to this script and (b) prevent the ugly 'gaps' when the next image is loading?
URL...The slide show cross-fade effect in this script works in IE, but not in FF. I know there are better scripts I could use, but I like this one because of its simplicity (doesn't require any accompanying CSS, etc). But I need it to work in all browsers.[code]
View 4 Replies View RelatedIs there any JavaScript that rotates the images in a slideshow with the fade-in effect and in the same time to allow transparent background?I am asking that because we have the script in the header of the site that rotates the images but header background is resizable and we cannot have the background for the slideshow div... It has to be transparent.I tried many scripts but neither one allows transparent background and in the same time to keep the fade-in effect.
View 1 Replies View Relatedi get the content of my rows from my database the problem is when there is 4 rows and i try to click on the 1st row... instead of it being deleted the 3rd row is deleted when i click on the 2nd row the 4th row is delete.the moveicon.gif is the image for deleting the row.. there is no problem when i remove the javascript...but when i applied it i noticed the poblem .[code]
View 1 Replies View Relatedhave this Multiple Image Viewer very similar, -in fact almost identical- to the one in the main page of economist.com It uses the following code and its woriking nice,
Code:
function switch_product_img(divname, divnumber, divtotal) {for (var i=1; i<=divtotal; i++) {
var showDivName = divname + '_' + i;
[code]....
I have problem with javascript for image effects. Here is the link [URL]
login with these nick and pass:
nick: google
pass: googleads
When you log into, on the top of the page are 4 images with fade effect. But effect is wrong. When I came first I see those images in full colors. How to change my script to show them in grey when I first came?