Solved

jQuery Dialog isn't formatted properly in all 3 browsers

Posted on 2014-03-18
19
272 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 

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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn how to dynamically set the form action using jQuery.

689 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