Solved

jQuery Dialog isn't formatted properly in IE8 browsers

Posted on 2014-03-19
14
1,409 Views
Last Modified: 2014-04-03
Attached is the screen shot of this close button outside of the dialog.  It's displaying properly in both Chrome and FF.  I also attached the jQuery that we're using for this.
dialog-IE8.jpg
0
Comment
Question by:lapucca
  • 6
  • 5
  • 3
14 Comments
 

Author Comment

by:lapucca
Comment Utility
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
Which version of jQuery are you using?  The newest version (jQuery 2.x) does not work with IE less than IE9.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
The best thing to do for us to help you is to post a link to your code.  If you feel your content may have private data, just create a sample test case and post that link for us.
0
 

Author Comment

by:lapucca
Comment Utility
Sorry, I forgot to provide the test file.  This is a Intranet so I can't provide access but I do have this test file.  However, The test file works fine in IE 8.  It's when I use the jQuery code in our application that it creates the problem in IE 8.  

The following is what is used in our web app.  It's a bit different than what I used in my test file.  
jquery-ui.min.css - v1.10.3 - 2013-05-03

jquery-ui.min.js - v1.10.1 - 2013-02-15
jQuery v1.7.1

I wonder what i need is to put in some css statement that if IE8 then move the button to the left, something like that?
Thank you.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
You should consider getting jQuery v 1.10.1 to go along with the jquery-ui version.
0
 

Author Comment

by:lapucca
Comment Utility
This is a jQuery widget, https://api.jqueryui.com/dialog/
Do I need to download and install the ThemeRoller to our web server?
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
I don't know what ThemeRoller is.  At the bottom of the jqueryui page you have linked is this demo code showing that they are loading the current version of jquery, jquery-1.10.2.js.  I could be wrong but I thought that the UI versions were supposed to match the main jQuery versions.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dialog demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
</body>
</html>

Open in new window

0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

Author Comment

by:lapucca
Comment Utility
I can have both jQuery-ui js and css files to be version 1.10.3 on our web server.  The jquery.js file is older at 1.7/1.  However, are you suggesting upgrading that to jquery.min.js 1.10.3 version?  I google but din't find find this version.  I think what works in the test file is with 1.10.1.  Will that work or can you tell me where to download 1.10.3 for jquery.min.js

Thanks.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
The available versions are listed here on the jQuery web site: http://jquery.com/download/  Down at the bottom of the page are the older versions including 1.10.1.  And this page http://code.jquery.com/jquery/ provides links to more versions that you can download or link to.
0
 

Author Comment

by:lapucca
Comment Utility
The test file works fine and the jquery and jquery-ui version didn't match either but I will sync them seems like a good idea.  Is there a risk upgrading jQuery to newer version on our web server?  Would it break any current code or plug in?

Also, I was playing around in Firebug and noticed I can create the IE8 problem in FF if I disable the "right:0.3em" in the screen shot file attached.

Thank you.
firebug2.jpg
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
There is always some risk... but I haven't encountered any specific problems myself.  If you 'upgraded' to jQuery 2.x it probably wouldn't work because they say it does not support IE less than IE9.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
Comment Utility
When you start fooling around with work arounds you will just get yourself into trouble.

Using jquery 1.1x with the matching jquery ui
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

Open in new window


First test the issue out on the jquery site http://jqueryui.com/dialog/ and if you can't duplicated it, the  problem is with other issues in your code.

>This is a Intranet so I can't provide access
Create a simple test case with minimal data that can be public. Post just that link.  Another option is to recreate your page on jsbin.  I have added the required files for you here http://jsbin.com/cogumozu/1/edit  We don't need your 1000 lines of code, just the test case http://css-tricks.com/reduced-test-cases/

It's very possible that creating a simplified test will not be able to reproduce the issue.  This is where creating a public link will help us help you.
0
 

Author Closing Comment

by:lapucca
Comment Utility
Sorry for the delay in responding.  I did try using all the matching and proven working when using my test file jquery libraries.  However, it still doesn't work right with IE8.  I very much appreciate the tip to setup an example but this is a SharePoint 2013 web page so that's not possible to simulate external of what you recommend.  
Thank you.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Do you really get a lot of users for ie8?  Anybody using windows XP at this point is at risk because it is not being updated.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now