Solved

jQuery Dialog isn't formatted properly in all 3 browsers

Posted on 2014-03-18
19
256 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
 

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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

744 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

13 Experts available now in Live!

Get 1:1 Help Now