I'm trying to create a bookmarklet which will use the jquery-ui - what steps must I take to do this? My bookmarklet loads a remote script and appends it to the page. This script includes jquery and jquery-ui, but getting the stylesheets and images is turning into a nightmare. Do I have to edit all the CSS to point images to their locations on the remote server?
Effectively what I'm trying to do is have a bookmarklet which will pop up some information in a nice pretty draggable jquery-ui dialog. Is there an easier way?
Thanks,
Mala
I did the same, but I had no problems to load images.
To load the jquery ui images, I just used the google cdn server. That worked without any problems.
To load items from a master webpage, I had to upload a script which returns the complete host url.
Related
Below is the part of screenshot of mywebsite/index.php, a PC site with NO jQuery Mobile (JQM), with all scripts and styles.
Below the screenshot of mywebsite/mobile/options.php, a page designed to be run on mobile browsers, having JQM.
Here is the HTML script for Logout button, actually an ahchor tag:
Logout
.. refers to the main mywebsite folder out from mobile folder.
When I tap/click Logout, it should go to mywebsite/index.php, the PC site. And here's what shows up:
If I display the location using alert(document.location);, it shows - mywebsite/mobile/options.php.
I have to press F5 to view the page as it should.
I know that this is happening because JQM loads the pages AJAXually and hence ignores all scripts and stylesheets outside of BODY tag. I know this question is duplicate of many questions in StackOverflow and I have tried my level best to find a solution, but can't find one.
How do I move to the index.php without need to refresh?
You need to add additional code to your logout.php file to execute after the logout code executes. PHP headers can accomplish this. Within your PHP tags, add this to the end of your code:
header( 'Location: http://mywebsite/index.php' ) ;
I am struggling to get some performance in my MVC application.I am loading a partial page (popup) which is taking hardly 500ms. But each time the popup loads it also downloads 2 jQuery files as well.
is it possible to use the jQuery from cache or from parent page?
I have attached the image in red which shows 2 additional request to server.
In order to improve the performance you can try with the following approaches:
see if your application server supports GZip and configure the application/server to return the responses always archived in Gzip
Use minified version of JQuery
there are also Packing libraries where you can pack all the imported resources, such as CSS files and JS files, and the browser will do only 1 request per resource type. For instance, in Java we have a library called packtag.
In general, I recommend you using Google Chrome browser and its performance analyzer. It will give you good hints.
In the Bundle config use this code
BundleTable.EnableOptimizations = true;
and also indclude both files in single bundle.
Does the popup use an iframe or does it's content just get added to the DOM of the current page?
If it gets added to the current page you could try just adding the script references to the parent page instead. It might not always be the best idea if the parent page has no need for those two files, but if the parent page also uses the jQuery validation then the popup will be able to use the parent's reference to the script file.
For an iframe I'd suggest looking at Gzip and minification to make the scripts load faster.
I'm fairly new to jquery mobile, and am getting an error when trying to link a file in my jquery mobile project for download. I would like a user to be able to download a .zip file from the app, but get either a page loading error, or undefined displayed in a new page. I tried using an anchor tag to link the file to download, but it doesn't seem to work right. I know jquery mobile makes use of the anchor tag, so I don't know if there is something special that needs to be done. Any help?
You are likely getting the exception when jQuery Mobile assumes the link is a page and attempts an AJAX page load. Disable AJAX loading on the link.
Link
And I have no idea what the typical mobile browser will do with a link to zip file.
I'm trying to use the jQuery UI Slider with my rails 3 app. I've downloaded a theme and put the css file in app/assets/stylesheet and I put all the images in app/assets/images.
When I load a page with a slider, I get an error that it can't find an image:
GET http://10.1.10.100:3000/assets/images/ui-bg_glass_45_0078ae_1x400.png 404 (Not Found)
That file is in app/assets/images/ and the css file has been edited to point to ../images/<image>
Is there something else I need to do to make a jQuery slider work with Rails 3?
gist with the files:
https://gist.github.com/2355571
I prefer to keep the jQuery UI files as they are, and put the ui images under public/stylesheets/images. That way upgrading the jQuery UI stylesheet is easier, you can just swap it out with your new one.
Perhaps just try linking to the image directly in your CSS file but leave the files where they are. If I'm correct, it should know to look in the assets/images folder anyways.
Instead of...
url(../images/ui-bg_inset-hard_100_fcfdfd_1x100.png)
Try just
url(ui-bg_inset-hard_100_fcfdfd_1x100.png)
I'm working on my first PhoneGap app with JQuery Mobile and I've having a problem getting the included icons to show.
When I reference a local instance of the .css file, like so:
link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
I don't get any icons. Just dark circles. I can see that the css is loading, because if I throw in a bogus path the results don't look like JQuery Mobile at all.
But when I reference a CDN, like so:
link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
I get nice buttons, no problems. I'm using Firefox to view output, but builds all the way onto an Android device show the same symptoms.
I'd punt and use the CDN, but I'm under the impression that if I want the app to run disconnected, then I should just include the .CSS file.
I've double checked my local CSS and downloaded it a second time, but no change. Anyone seen anything similar?
Make sure you have the jQuery Mobile images directory in the same directory as jquery.mobile-1.0.1.min.css.
I've just started with PhoneGap and had the same issue with JQuery Mobile.
Once I added the images under the www folder, I set the Build Action for each image to "Content." By default, mine were set to "Resource."
After this, the images appeared in my Windows Phone Emulator.
Hope this helps.
Chuck