Has anyone used the FullCalendar-mobile plugin? I am trying to use this in a jQuery Mobile app bundled with Phonegap. There are tons of js and css files in the src folder but I can't seem to figure out which one to use. Linking all of them to my html page didn't yield any results.
Pardon the very noob question. Kinda new to jQuery, HTML5 & CSS. Would greatly appreciate the help.
Thanks!
I'm just going through this myself. My understanding is that you'll need to do the following:
Download the files from
https://github.com/JordanReiter/fullcalendar-mobile using either git
or the 'download as zip' button.
Navigate to your downloaded directory
Type make zip, as per the instruction from the link above. (You'll need java installed apparently)
In the dist directory created by the above process you should see the fullcalendar directory containing the js and css files you need.
Copy those to your project and link appropriately. You are now officially good to go
I have the same problem with the css files. Until now I'm not able to combine the style sheets delivered with jquery and jquery mobile for the desired result:
http://thomkerle.blogspot.ch/2012/07/problems-with-jquerys-fullcalendar-and.html
Note:
for basic usage you can just take the latest fullcalendar version! There will be some events that are not supported (but basically you can press on a event and navigate through the calendar).
See also:
http://forum.primefaces.org/viewtopic.php?f=8&t=23763
Looks like you want to use the _loader.js file
just keep the structure of the directories that exists
I am working on this right now ill post updates as a reference. The documentation states:
<link rel='stylesheet' type='text/css' href='fullcalendar.css' />
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='fullcalendar.min.js'></script>
<script type='text/javascript' src='ui.core.js'></script>
<script type='text/javascript' src='ui.draggable.js'></script>
<script type='text/javascript' src='ui.resizable.js'></script>
None of these files are on github the last 3 are clearly from jquery UI
Related
I'm using Swiperjs in my website. Today I saw that swiper is not working, and in console were 404 errors, because css and js files could not be found.
I am using swiper from CDN, in the way that is written on swiperjs website https://swiperjs.com/get-started/
Now the problem: when I developed my website, there was a different url to swiper CDN (writen in swiperjs website, last year).
In my code, before, was this, and it worked:
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
Today, this code gave me errors. So I changed to:
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
And this now works.
My question is:
how can I be sure that in future there won't be any changes like this? Am I more safe if I download these scripts and include them in project?
I thought that CDN should always work.
thank you for your information. finally my gallery start to showing images. Realy appreciate about your search in change of swiper css resources. I think we should donate/bought the copy of swiper css and install to our website server, CMIIW.
When I add jqm-icon-pack-2.1.2-fa.css to my website, the jQuery UI fonts don't show. If I remove the reference, they show. I'm creating an MVC4 mobile application using Visual Studio 2012. Here is how I'm referencing the css files:
<link rel="stylesheet" href="#Url.StaticStylesheet("jquery.mobile-1.2.0.css")" type="text/css">
<link rel="stylesheet" href="#Url.StaticStylesheet("jquery.mobile.structure-1.2.0.css")" type="text/css">
<link rel="stylesheet" href="#Url.StaticStylesheet("jquery.mobile.theme-1.2.0.css")" type="text/css">
<link rel="stylesheet" href="#Url.StaticStylesheet("jqm-icon-pack-2.1.2-fa.css")" type="text/css">
If I remove the last reference, the jQuery icons work but the Font Awesome icons don't work. I've tried to reorder the references and that didin't work. I've inspected the page with Firebug and I can't see a difference. I've made sure the paths are correct as well. I'd like to post a link to my website but it's inside an extranet so it can't be accessed. The best I can offer is I'm setting an input to type="search" and the search icon and clear text icon do not appear. Any help would be greatly appreciated!!
ANSWER: I solved the problem and hopefully can save others some grief and hours of beating their heads on the keyboard like I did! When you use NuGet Package Manager to get jQuery mobile, it adds some image files called icons-18-black.png, icons-18-white.png, icons-36-black.png, and icons-36-white.png. If you're not careful you can miss the fact that there are some slightly different image files on the github website you need to include with Font Awesome called icons-18-black-pack.png, icons-18-white-pack.png, icons-36-black-pack.png, and icons-36-white-pack.png. Notice that the word "pack" is included in the name of these files and they're slightly different than the original files included with jQuery mobile. Just be sure you add in the missing files plus the ajax-loader.png file which is different than the ajax-loader.gif file included with jQuery mobile as well and all should work.
I solved the problem and hopefully can save others some grief and hours of beating their heads on the keyboard like I did! When you use NuGet Package Manager to get jQuery mobile, it adds some image files called icons-18-black.png, icons-18-white.png, icons-36-black.png, and icons-36-white.png. If you're not careful you can miss the fact that there are some slightly different image files on the github website you need to include with Font Awesome called icons-18-black-pack.png, icons-18-white-pack.png, icons-36-black-pack.png, and icons-36-white-pack.png. Notice that the word "pack" is included in the name of these files and they're slightly different than the original files included with jQuery mobile. Just be sure you add in the missing files plus the ajax-loader.png file which is different than the ajax-loader.gif file included with jQuery mobile as well and all should work.
How and where to put your own JS files in JQueryMobile web applications?
Some suggestions I found:
only in the first page of the web app, usually index.html
inside the JQM page
Which one is better approach?
After your jQuery Library and BEFORE your jQuery mobile library. I place all my script tags at the end of the body...but that's not a must...
<script type="text/javascript" src="jQuerySource.js">
<script type="text/javascript">
/*Your stuff*/
</script>
<script type="text/javascript" src="jQueryMobileSource.js">
Why?: Because when you're building your jQM application you're going to want your event bindings to be defined before jQuery mobile gets initialized and fires the 'mobileinit' event and your first page's 'pageinit' event.
Just put your script after the JQM script tag
Yeah, that's all
It is a good idea to use jQueryMobile javascripts from Google CDNs because of following reasons:
1. You can directly include minified version in your pages.
2. You save bandwidth cost
3. Most importantly there are good chances that the JS might already be loaded on your user browser's. Because many other web apps use them.
So you should use
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
So, if all your code is inside document.ready() ; you can use it at end [ which loads the page faster]
I have a JQuery mobile app. I now want to deploy it natively to Android and iOS. To assist with this, I thought I would use PhoneGap. When I run my app, none of the styling information appears. There are no errors in the console window. I'm not sure what I'm doing wrong.
Are there any guides on going from JQuery mobile to phone gap? Everything I see starts with Phone Gap and builds from there. Am I doing this in reverse?
Thank you for any insistence. I really want to get this app onto Android and iOS. I feel like I'm so close. But I have no idea what I'm doing wrong.
Thank you,
This is just a guess, but you have something like this in your code?
<link rel="stylesheet" href="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
If so that's wrong and you need to store your css locally in the assets folder if you want it to run locally within your WebView.
Otherwise, I'd suggest that you first run an 'hello world' on phone gap, and style just one element through an external local stylesheet (without worry about javascript for now). That's essentially the most difficult part, knowing where to put the file and how to reference it, so you do not want to confuse yourself with the extraneous code of your current project when you're learning that part.
Once you've figured that part out, it will be trivial for you to do the same with the jQuery Mobile library, both the css one and the js one.
Have you include properly?
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
<script src="jquery.mobile/jquery-1.7.2.min"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
put the .js file and .css file in the jquery.mobile folder.
But if you are using eclipse then you can create phonegap app directly.
I hope it would be helpful for you.
I'm using Wordpress, and I linked some masonry jQuery library files and when trying to visit the .js file, it goes to a 404. However, my custom functions are viewable and so is the jQuery .js file. Why might it be going to a 404? I spent 1 hour trying to figure out why my function wasn't working and it turns out the file wasn't being loaded properly.
This is how I am linking to the jQuery files:
<script language="javascript" type="text/javascript" src="http://domain.com/js/custom.js"></script>
<script language="javascript" type="text/javascript" src="http://domain.com/js/jquery.eachdelay-0.0.1.js"></script>
<script language="javascript" type="text/javascript" src="http://domain.com/js/jquery.masonry.min.js"></script>
For some reason, custom.js works fine, but not the others. I have it uploaded properly. It says "Page not found" when I try to visit the other files in the browser.
Here's the conclusion:
I created another file and deleted the old one then renamed the new one with the same name and it didn't work. So, I just ended up creating a file and naming it something other than the original default and then pasted the JS contents in to the new file I made and viola!
I think its a caching problem, I don't know how to fix it and why it happened but this was my solution. Also, people should not be so hasty to assume that the 404 means that I do not know how to upload a file and that I uploaded it to the wrong directory.
try using an absolute URL path for the js file.