Solved

jQuery Dialog isn't formatted properly in all 3 browsers

Posted on 2014-03-18
19
264 Views
Last Modified: 2014-03-19
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
Comment
Question by:lapucca
  • 10
  • 9
19 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39937862
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
 

Author Comment

by:lapucca
ID: 39937948
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
 
LVL 58

Expert Comment

by:Gary
ID: 39937978
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:lapucca
ID: 39938164
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
 
LVL 58

Expert Comment

by:Gary
ID: 39938182
Those images should be in the jQuery UI image folder.
0
 

Author Comment

by:lapucca
ID: 39938184
These 2 attached files in fire bug when I click on the 2 span tags.
Dialog-firebug2.jpg
Dialog-firebug3.jpg
0
 

Author Comment

by:lapucca
ID: 39938194
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
 
LVL 58

Expert Comment

by:Gary
ID: 39938224
They would have been part of the zip that your black theme came in, if need be just redownload the zip package.
0
 

Author Comment

by:lapucca
ID: 39938270
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
 
LVL 58

Expert Comment

by:Gary
ID: 39938283
0
 

Author Comment

by:lapucca
ID: 39938325
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
 
LVL 58

Expert Comment

by:Gary
ID: 39938338
They are listed on that page.
0
 

Author Comment

by:lapucca
ID: 39938377
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
 
LVL 58

Expert Comment

by:Gary
ID: 39938386
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
 

Author Comment

by:lapucca
ID: 39939976
0
 

Author Comment

by:lapucca
ID: 39939992
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
 
LVL 58

Expert Comment

by:Gary
ID: 39939996
Hovering over the background image
images/ui-icons_ededed_256x240.png

...does it load?
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39940002
The image folder should be in the folder where the jQuery UI CSS is
0
 

Author Comment

by:lapucca
ID: 39940921
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

813 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

12 Experts available now in Live!

Get 1:1 Help Now