overlay not working in IE's

HI there, I have runt into an issue with the overlay I have on the website I am working on
The problems seem to be with Internet explorer 7, 8 and 9. Say you click on the first thumbnail, then the big pix comes
up and behind it the overlay. Then close this picture and click on the next one: the overlay is now solid black. Basically
it works fine with the first image but then any subsequent image seems to throw it.
I am aware of IE's not being able to handle the opacity therefore in my css I have this: .overlay { display:none; background-color:black; position:fixed; opacity:0.75; filter:alpha(opacity=75); /* For IE8 and earlier */ top:0; bottom:0; right:0; left:0; width:100%; z-index:100; } But despite this it doesn't work. I thought that maybe, it isn't the css but the script that handles the big
images but still I couldn't find anything wrong with it...maybe you can
Here's the script: var $full_images; var $close_button; var $overlay; $(function(){ $full_images = $(".full_images"); $close_button = $(".close_button"); $overlay = $(".overlay"); $the_pic = $(".image_div"); }); function change_images(image, text){ var $images = $("#" + image); var $description = $("#" + text); $overlay.hide().show(); $the_pic.hide().show("slow"); $full_images.hide().show("slow"); $images.hide().fadeIn(1000); $description.hide().fadeIn(1000); $close_button.hide().show(); $close_button.unbind('click').click(function(){ $(this).hide(); $images.fadeOut("fast"); $description.fadeOut("fast"); $full_images.hide("slow"); $overlay.hide("slow"); $the_pic.hide("fast"); }); } A note on the script: the variable $the_pic is there in error it hasn't actually been declared, but I doubt this
can be the problem because the overlay isn't working in previous versions of the script without the variable ANy idea at all what could cause that

Posted On: Sunday 25th of November 2012 08:38:41 PM Total Views:  158
View Complete with Replies

Related Messages:

How does this image overlay work ?   (96 Views)
I am looking to have the same effect as this site when images are hovered over. Is it javascript
image overlay problem in browsers   (92 Views)
Im pretty sure this is a .js problem, not a .css problem. Please see the attached screen shot for correct functionality, and then look at this URL in Firefox or IE (latest versions, or one version back): Right under the navbar, there is a div with 3 main events. In FF or IE, youll probably have to do a screen refresh to get the functionality to work. Obviously, you should not have to do a refresh to see it correctly, and it doesn't work in Safari, Chrome, or Opera at all (though it actually works in all browsers in local view). relevant files are in the attached zip. Can anyone tell me how to fix this
overlay form   (80 Views)
new in javascript, wld love to make overlay forms, help please
Invoke jquery overlay   (149 Views)
I have this code for overlay $(document).ready(function() { var triggers = $(".modalInput").overlay({ // some mask tweaks suitable for modal dialogs mask: { color: '#ebecff', loadSpeed: 500, opacity: 0.8 }, closeOnClick: false }); var buttons = $("#btn1").click(function(e) { // get user input var yes = buttons.index(this) === 0; // do something with the answer //setTimeout('triggers.eq(1).overlay().close();',1000); return fileUpload(this.form,'upload_file.php','upload'); }); var buttons = $("#btn2").click(function(e) { triggers.eq(1).overlay().close(); }); $("#prompt form").submit(function(e) { // close the overlay triggers.eq(1).overlay().close(); // get user input var input = $("input", this).val(); // do something with the answer triggers.eq(1).html(input); // do not submit the form return e.preventDefault(); }); }); I want that this overlay is called automatically in a javascript. I want to display contents from server in this overlay. So ajax will run first, which is like follows: function ajaxSend() { var httpxml; httpxml=new XMLHttpRequest(); var url="file_db_ops.phpname="+(txtName.value)+"&address="+(txtAddr.value)+"&phone="+(txtPhNo.value); httpxml.onreadystatechange=stateck;"GET",url,true); httpxml.send(null); function stateck() { //alert(httpxml.readyState); if(httpxml.readyState!=4) document.getElementById("status").innerHTML = "Processing.....Please Wait"; else document.getElementById("testDiv").innerHTML=httpxml.responseText; // ************************************************* } } ***** marks the place where i would like to invoke the overlay. PLease help !!!
web page overlay help please   (146 Views)
I'm not sure if this is the correct forum but I need your help please. I have visited some websites and instead of them having normal pop-ups they have overlays. Are they created using CSS, Javascript, Flash or what Could someone please point me in the right direction as to how to create these. Online tutorials would be the most helpful so if anyone could please let me have any URLs for this I would be extremely greatful. I have searched in Google for web page overlay tutorial without success. help will be much appreciated If this is in the wrong forum maybe the moderator can move it to the correct one please.
drop down with overlays   (73 Views)
/mam i have used drop down of jquery for my menu bar and overlays for images but after implementing overlays the dropdown is not working properly.what to do so that both should work on the ame page
How to implement overlay and a dailog   (108 Views)
Am a newbie with jquery implementations I currently want to implement an overlay and a dialog the same way its used for this sites login can anybody help me implement this stuff
If statements and circle overlays in Google Maps   (79 Views)
I'm trying to change the color of a circle depending on the title attribute of a JSON object. Any ideas if that is possible // Creating the JSON data var json = [ { "title": "Aberdeen", "lat": 57.141989, "lng": -2.150268, "description": "Aberdeen104 Members", }, { "title": "Birmingham", "lat": 52.446933, "lng": -1.723129, "description": "Birmingham134 Members", } ] // Looping through the JSON data for (var i = 0, length = json.length; i < length; i++) { var data = json[i], latLng = new google.maps.LatLng(, data.lng); if (data.title=='Aberdean'){ var color = 'red'; } else { color = 'blue'; } // Creating a circle representing number of members and putting it on the map var membersOptions = { clickable: false, strokeColor: 'blue', strokeOpacity: 0.3, strokeWeight: 1, fillColor: 'blue', fillOpacity: 0.3, map: map, center: latLng, radius: data.members * 120 }; This post has been edited by NewToJava2011: 01 November 2012 - 01:15 PM
AJAX / XMLHttpRequest working in all browsers except?   (108 Views)
Hi i am new to AJAX but i havejust managed to write one of my first basic scripts. What it does is takes all the news items out of a database and lists them as links. When you click a link i want all of the data that is linked to that news item to display underneath. Now i have got this to work except it will not work in Firefox, all other browsers it is fine. Below is the code i have written, Could anyone please help.
please help ,simple js not working   (295 Views)
It doesn't work because you don't need to surround the link with script tags for that inline javascript to work. The click this link will work just fine on its own.
reset list box is not working javascript   (92 Views)
Hmm it says SCRIPT ERROR when i click RESET (Nothing else happens) Hmmm,looks good though!
Can't put 2 Javasript working in the same page!   (129 Views)
I am working on a website and I dont know much of Javascript,but I need to put to work different scripts on the page,and it wont work!:sad: I've already try to chage all that I remeber to chage,but dosen't work!What I am doing wrongCan anybody help me out Here is my code: window.onload = function() { // Pick your classes var myBox = document.getElementsByClassName('box_title'); var myBoxOpen = document.getElementsByClassName('information'); // Create the accordion var myAccordion = new fx.Accordion( myBox, myBoxOpen, { onActive: function(tog){ tog.setStyles({color: '#fff', background: '#840000'}); }, onBackground: function(tog){ tog.setStyles({color: '#b7d30b', background: '#7d8c87'}); }, alwaysHide: true } ); } function MM_callJS(jsStr) { //v2.0 return eval(jsStr) } $(document).ready( function(){ $('ul#hFade').innerfade({ speed: 7000, timeout: 13000, type: 'sequence', containerheight: 'auto' }); });
IE 7 and existing online ordering system not working   (132 Views)
I need someone to point me in the right direction or just hit me over the head and tell me what I need to do. I feel comfortable doing the html coding - javascript is not my friend as of yet -- but I am working on that. The other programmers here have embraced it faster than I have but they do not know the answer either. We have an existing online ordering system that works great in IE6 but now the drop downs are doing strange (unwanted) things. In one instance the box will not stay open unless you right click on it first. In the others (which are many) the box opens and you can make a selection but then your mouse is disabled on this page for minutes at a time. The way around that is to get focus off of that page. I know there is an issue with the onblur() event but I don't know what it is or how to solve it, and I don't know if that is the only issue.
javascript image animation not working????   (249 Views)
Javascript not working under Mac! Why O why?!   (75 Views)
, I have a javascript code (a part of it is in php) that populates a pull-down menu. It works perfectly well with Explorer, Netscape and Firefox under Windows. But impossible to make it work with Explorer or Safari under Mac!!! Is javascript different between windows and mac Here's the code, if anyone has the slightest idea or suggestion.
Javascript is not working in IE6   (133 Views)
I have created a web page with javascript, its successfully working in firefox but not in internet explorer version 6 and 7. I am not good in scripting and I have done this page with the help of my friend. I have uploaded the zip file. It contain two directories one is for web page (php_files) other for support file (Support_Files). Please unzip the file and test the page. I have also uploaded my browser output for Firefox and Internet explorer. My apologize I have not shared my original page, this is the test page. Please help me and also let me know if you need any more information regarding the same.
resize not working   (154 Views)
i am trying to resize a button using the following code and it has had no effect on the button it has remained the same size.
JavaScript not working in Internet Explorer 7   (132 Views)
Firefox vs. IE-menu not working please help   (252 Views)
; I hope an experienced person can help me. Our site: has a top menu that currently works in Internet Explorer but does not in Firefox. I have used HTML Tidy for my index page and now it looks ok in Firefox but not IE. I have reverted back to the original index which works in IE. I have three CSS files, one Javascript and the index page. I am a bit new at this and really need someone to take a peek at the files and please tell me where the code needs to be modified so it will work in IE and Firefox. I am hoping a "guru" can share their wisdom and help me get this menu functioning. I have attached the files in Word because of the restrictions. The link to our site, has the index page that is rendering correctly in IE but not Firefox. I really appreciate any and all help.. I great
my html code isnt working please help   (420 Views)