jQuery Mobile file usage - javascript

Something was pointed out to me that I never heard of before and came as quite of surprise to me: the files to include when using jQuery Mobile and a custom theme.
As their site states, if you just want to use the bare-bones version of jQuery Mobile, all you need to include is jquerymobile.css, jquery.js, and jquerymobile.js. But what was pointed out to me is that if you want to use a custom theme, you do not have to include jquerymobile.css in your header. Just theme.css and mobilestructure.css.
Is this true or just some confusion on my part? It seems like a simple question but I couldn't find a definitive answer out there.

Yes this is true, I just looked at my code that works using jquerymobile and a theme I made using the theme roller and the only two css files I have are .
<link rel="stylesheet" href="/stylesheets/themes/cyan1.css" />
<link rel="stylesheet" href="/stylesheets/jquery.mobile.structure-1.3.1.min.css" />

Related

Can you mix bootstrap 3.3 and bootstrap 4.1? I have tried and it breaks the website

I am trying to use bootstrap and twitter bootstrap at the same time. Basically, I can't seem to get them to work together. Are they even supposed to work together? You can see the js Fiddle here. https://jsfiddle.net/paralaxwombat/v7hpoc6m/4/
There are two sets of bootstrap call lines.
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
If you remove one of them, the nav bar works and the bottom doesn't. If you remove the bottom the nav bar doesn't work but the bottom does.
I am wondering if there is a workaround.
Twitter Bootstrap is Bootstrap. You are trying to mix version 3 and version 4.
They are not designed to work together. Bootstrap 4 is designed to completely replace Bootstrap 3.
Use version 4. Change the code which is following version 3 conventions to use version 4 conventions.
You are trying to use two different versions of the same library so I think the answer will be 'No'.
I don't know if there's a document with all the similarities and differences, but I know the 3.3 javascript api and the 4.1 javascript api conflict.
There are 2 versions of bootstrap and you are trying to use both of them at the same time. These are all versions of bootstrap Versions. If you want to know more about them check bootstrap.

jQuery Mobile bad behaviour

I'm trying to use the jQuery Mobile swipe feature but I'm experiencing a little problem when I include this:
http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js
and this:
http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
The issue is a "Loading" text in the bottom of the page that is shown when i load the Mobile library.
Who knows why is it shown? I have the problem with both Chrome/Chromium and Firefox browsers.
You can take a look to my code here:
http://jsfiddle.net/rfringuello89/yLGKT/
as you can see I used 3 not draggable but swipeable <div></div>
Thanks guys
You need to include the appropriate css for jQuery Mobile too, that should do the trick.
Edit: check this fiddle, I included the css and it works fine.
This is the right way to include the libraries:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
according to the docs.
Edit2: according to this answer by eivers88 you can use the following code to stop jQuery Mobile from initialising the page on DOM-Ready (without the need to include the css dependency):
<script type="text/javascript">$(document).bind("mobileinit", function(){$.extend( $.mobile , {autoInitializePage: false})});</script>

Foundation.js dropdown menu in Ember.js

I'm trying to use the Foundation framework in an Ember app. The problem I'm having is with the navbar dropdown menu. When placing the Foundation layout in the handlebars template, the navbar no longer works on hover or on click. However, if you shrink the window so the mobile version is displayed, the navbar works on click. I'm pretty sure it's not the Foundation code, because the same code in regular HTML without Ember works.
I checked out these solutions, but neither worked for me (the first is still in place in my code).
My code can be found here, with index.html using Ember and grid.html not using Ember.
If you have any insights or questions, please let me know.
The dropdown hover behaviour comes from CSS. Ember doesn't play a part in this bug. :)
I noticed grid.html uses CSS from the foundation website, while the index.html uses CSS from local files. I think you have mismatched versions of foundation's CSS files.
I changed the CSS link tags inside the index.html to use the one on foundation as the grid.html does. That fixes the problem.
<!--<link rel="stylesheet" href="css/normalize.css">-->
<!--<link rel="stylesheet" href="css/style.css">-->
<!--<link rel="stylesheet" href="css/foundation.css">-->
<link rel="stylesheet" href="http://foundation.zurb.com/page-templates4/css/normalize.css">
<link rel="stylesheet" href="http://foundation.zurb.com/page-templates4/css/foundation.css">
I would suggest downloading the working CSS from the foundation site, and customizing it from there.

Change the CSS Based On the Language

I am using a Google Translate in my website, to show the content in 2 different languages German, and Spanish other than the original content(English). Now as soon as select other language there are some miss-placements in the contents and text due to the change in length of the words and also i need to change few images and logo which is written in English.
my question is
How to change CSS based on the Language?
Some information about the site: It is a simple website developed using plain HTML, CSS, Javascript and jQuery.
If you are using simple html or any framework, use of automatic translators is not appreciated some time it does not translate correctly, Try making different css files for each langage and make ur site in different language. if you are using some cms etc you can achieve this easily. So when you click on spanish flag it should go to index-sp and it will load style-sp.css.
Hope it will help.
I came here looking for a solution to switch from 2 different css files based on rtl(ar) and ltr(en/pt) and there's a really easy and quick solution that worked for me:
<environment include="Development">
#if (System.Threading.Thread.CurrentThread.CurrentCulture.TextInfo.IsRightToLeft)
{
<link rel="stylesheet" href="~/vendor/fontawesome-free/css/all.min.css" />
<link rel="stylesheet" href="~/css/styles.rtl.min.css" />
}
else
{
<link rel="stylesheet" href="~/vendor/fontawesome-free/css/all.min.css" />
<link rel="stylesheet" href="~/css/styles.min.css" />
}
</environment>

jquery ui - how to use google CDN [duplicate]

This question already has answers here:
Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail
(23 answers)
Closed 8 years ago.
I want to use Google CDN for jQuery and jQuery UI..
I'm using the answer from here for jQuery.
Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail
but i don't understand this bit:
if (typeof jQuery == 'undefined')
so how can i do it for jQuery UI?
also, will this work with custom jQuery UI theme as this produces a custom js file too?
You can make the call using
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
You can also link to other Ui themes by changes the name of the theme. In This case change the name base to any other theme name /base/jquery-ui.css to any other theme.
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
Check out the jQuery UI Blog for a link of all CDN links http://blog.jqueryui.com/
If you're concerned that the Google CDN ever fails or goes down, you can fall back to a local copy when the CDN is offline (this example is baked into templates like HTML5 Boilerplate):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"></script>')
</script>
If you are having a custom jQuery UI theme, you have to host that on your own server. Google only hosts the main jQuery UI themes.
If you want to check whether or not the jQuery UI library has loaded, you can do this:
if (jQuery.ui) {
}
Here is the list, just change to the version you need.
https://developers.google.com/speed/libraries/devguide#jquery-ui

Categories