[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 288
  • Last Modified:

jQuery Dialog isn't formatted properly in all 3 browsers

This pop up works fine until I merge to our application.  The dialog Close "x" doesn't show up on the upper right and in one browser it's outside of the dialog box.  I tried in FF, Chrome and IE.  
I downloaded the css, http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css , and save it to the web server.  

Is it because our application is using a different jquery library, jquery1_7_1.min.js and jquery-ui.js(1.10.1)?  The one  I have in my file is "//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js

Attached is my protocol file that works fine.  I extracted the jQuery code and merge into our app, now the format is not working for the Close icon.

Please advise if I should replaced what jquery files on our web server to make this work.  Also is there a risk of breaking our web app if I upgrade?

Thank you.
index7.html
0
lapucca
Asked:
lapucca
  • 10
  • 9
1 Solution
 
GaryCommented:
jquery1_7_1.min.js and jquery-ui.js are not the same thing, one is jQuery and one is the jQuery UI

Got a link to the page? You probably just have a css conflict.
0
 
lapuccaAuthor Commented:
It's an Intranet site so I can't provide access here.  Yes, i understand those 2 are different files. However, my file that work contains different version for both files than what's on our web server.
Attached is pretty much the header included in our master page's header.  Appreciate your help.
header.html
0
 
GaryCommented:
I cannot debug what I cannot see.
If they are using different versions of jquery then try changing the version in the site to the one where it works.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
lapuccaAuthor Commented:
Attached are a couple of views of this jQuery dialog that doesn't show the Close icon properly.  There are several error from the Firebug saying that it can't upload the bg images,
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: url("images/ui-bg_glass_40_111111_1x400.png") repeat-x scroll 50% 50% #111111;
    border: 1px solid #777777;
    color: #E3E3E3;
    font-weight: normal;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: url("images/ui-bg_glass_40_111111_1x400.png") repeat-x scroll 50% 50% #111111;
    border: 1px solid #777777;
    color: #E3E3E3;
    font-weight: normal;
}

Am I supposed to supply this icon image?
Dialog-FF.jpg
dialog-IE8.jpg
Dialog-firebug.jpg
0
 
GaryCommented:
Those images should be in the jQuery UI image folder.
0
 
lapuccaAuthor Commented:
These 2 attached files in fire bug when I click on the 2 span tags.
Dialog-firebug2.jpg
Dialog-firebug3.jpg
0
 
lapuccaAuthor Commented:
Ha!  In my test file, I included the google script.  In our Intranet for some reason if I include the google script then it won't work.  I have to save the library on the web server.  So, how can I download these images to our web server drive?
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js 
I tried
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/images 

but that doesn't work.

Thank you.
0
 
GaryCommented:
They would have been part of the zip that your black theme came in, if need be just redownload the zip package.
0
 
lapuccaAuthor Commented:
Ha!  I didn't download any zip.  I only went to those 3 url and from the browser save the 3 files that were in my prototype file.  What black them zip file do I need to download and from where?  

From here, https://api.jqueryui.com/dialog/ , I click on the Theming link on the left, and I still don't see any zip download.

thank you.
0
 
GaryCommented:
0
 
lapuccaAuthor Commented:
Thank Gary, I downloaded all the png files there but still missing many like
ui-widget-header .ui-icon {
    background-image: url("images/ui-icons_bbbbbb_256x240.png");
}
.ui-icon, .ui-widget-content .ui-icon {
    background-image: url("images/ui-icons_222222_256x240.png");
.ui-icon, .ui-widget-content .ui-icon {
    background-image: url("images/ui-icons_222222_256x240.png");
}

Where can I download this entire set of images needed for this widget?

Thank you.
0
 
GaryCommented:
They are listed on that page.
0
 
lapuccaAuthor Commented:
okay, I unzip the jquer-ui 1.10.4 and found a image folder under the css folder.  I copied that to the web server image folder.  It has those missing icon files but my pop up dialog still not displaying the close icon properly!
0
 
GaryCommented:
Right click where the close icon is supposed be and click Inspect Element with Firebug.
What image is showing in the css?
If you mouseover the image does it show up? If not then the paths are wrong. Check the path in the css to where you have actually put the images - they should be in a sub folder of the UI folder
0
 
lapuccaAuthor Commented:
0
 
lapuccaAuthor Commented:
It's showing it can't locate the image.  The master file that includes the script and css is at a folder that has scripts, css and images folder.  Scripts folder is where the jQuery scripts are at.  The images are downloaded to the images folder but it cant find it so I created a images folder under the scripts folder and it still can't find it. Really at a lost now.
0
 
GaryCommented:
Hovering over the background image
images/ui-icons_ededed_256x240.png

...does it load?
0
 
GaryCommented:
The image folder should be in the folder where the jQuery UI CSS is
0
 
lapuccaAuthor Commented:
Ha!!!  That did it!  It's working now.  Thank you so very much for your patience in helping me with this.

I open another question related to this one, http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28392667.html.
 
Maybe you can help me with it.  The button is outside of the dialog box in IE8.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 10
  • 9
Tackle projects and never again get stuck behind a technical roadblock.
Join Now