I'm having trouble getting the value of a slider in jQuery Mobile. I want to be able to get the value of a slider and feed this into a calculation which will work out costs and savings etc.
My code works on a normal HTML website (link below) but I am trying to get it to work in a PhoneGap app using Jquery Mobile. I'm actually using a Flat UI version (1.4.0) of jQuery Mobile found on GitHub, but I have also tried this using the standard 1.4.2 jQuery Mobile JS and CSS with the same outcome.
In the app, my header looks like this:
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.min.css" />
<link rel="stylesheet" href="fa/css/font-awesome.min.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.0-rc.1.js"></script>
<script src="cordova.js"></script>
I've been though the code and narrowed it down to an issue in jQuery Mobile JS file and CSS file:
If I remove the JQM JS file and keep the CSS file it works, but obviously there's no function or styling across the app.
If I remove the JQM CSS file and keep the JS file it works, but there is no styling across the app or on the slider (which shown as a number input instead).
If I remove both files it works, but obliviously there's no JQM left!
This JSFiddle is a near copy of the calculator:
http://jsfiddle.net/tooze/H6FhD/
You can see a working web version of this calculator here: http://bit.ly/1lsUz8a
Have I written something incorrectly in my code? Or is it something conflicting in the JQM files?
Thank you in advance
Related
I'm using below bootstrap CDN for css styles.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
They worked perfectly on plain HTML file and complete css applied, but when I send HTML file over outlook email, CSS styles didn't applied.
HTML file also includes DIV's.
From the below post, I can understand that Bootstrap CDN won't work for HTML sent via email.
bootstrap 4 css is not working with mail html template in flask
Then, how can I include the above bootstrap cdn css in my html file itself as inline.
Pls suggest.
Inline CSS is when you use the style attribute in HTML like this:
<h1 style="color:red;">My Title</h1>
So email only supports this sort of CSS. You cannot use any <link> tags to include external sources of CSS, and its generally not a good a good idea to do so.
If really want to you've got a couple of options.
Write it yourself
Try an "inliner" tool, such as these from Mailchimp and Campaign Monitor, or Premailer
you need to use inline styles, css won't work for you. at this point you should install bootstrap instead of importing it with the cdn
I'm looking into if it's possible to use the Metro UI CSS framework to develop windows 8 apps. I understand i can have what ever CSS that's needed but i think it's based on the bootstrap framework so im unsure if its compatible?
I forgot to include a link to it: http://metroui.org.ua/
If you use everything locally I don't see a reason why it would not work. Just make sure you add all the references (css and js) they need.
<link rel="stylesheet" href="css/metro-bootstrap.css">
<script src="js/jquery/jquery.min.js"></script>
<script src="js/jquery/jquery.widget.min.js"></script>
<script src="js/metro/metro.min.js"></script>
I've been experimenting with Twitter Bootstrap and have run into a problem I cannot resolve. Basically, I have a very simple HTML file (based on the beginning of this tutorial: http://www.sitepoint.com/understanding-twitter-bootstrap-3/ ) and I can open the file, but it is not loading the CSS.
I've tried this locally as well as from my web server and in both instances, the CSS does not load. This tutorial has some errors on where quotes go which I've fixed, but I've had the same problems with another tutorial.
index.html is located in the same folder as the CSS folder.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Please for the love of God help me before I destroy my Macbook.
Try using bootstrap.css instead of bootstrap.min.css. Also, make sure that it's in the correct path.
Another thing you can try as well is using media="all" instead of media="screen" in your link specifications.
Your javascript link tag for jQuery looks suspicious. Either give a relative path on your local directory, or the absolute path to an external url.
I had the same problem but it was unique, not sure if other had the same issue. I had "rel=" before the "href=". Just swapping the places, i.e. "href=" before "rel=" resolved the issue.
Thanks a ton for the correct syntax.
I followed below steps to load or apply Boostrap css.
first check bootstrap available in node_modules?
If you don't see, Install bootstrap with below command
npm i bootstrap
After installation successful, verfiy again boostrap in node_modules.
enter image description here
next open your project styles.css file and import below line.
#import '~bootstrap/dist/css/bootstrap.css';
when you upload the bootstrap files to your hosting, make sure to upload ALL the files even the .map files. I did that and it worked for me.
I had the same problem and I solved it.
open your file in windows notepad, choose save_as > Beside the Save button , open Encoding dropdown and choose UTF-8 !
my file was saved in Unicode Encoding.
I used windows notepad to save-as my file in a UTF-8 Encoding and the issue was gone.
you may also use notepad++ to change the encoding of a file.
good luck
I found this answer because it was the top google search yet I had this problem for a completely different reason.
For those who might have made the same mistake I have, remember to add
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
or some reference to another version of bootstrap so that your code knows where to get all the bootstrap related information
Sounds like this is just a simple directory issue.
You are saying you have the HTML file and the CSS file in the same folder right?
Then to load the file link it like this:
<link href="bootstrap.min.css" rel="stylesheet" media="all">
Else
If your css file is in a "css" folder then change the directory to:
<link href="css/bootstrap.min.css" rel="stylesheet" media="all">
If worse comes to worse use the external link instead for troubleshooting:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
is it possible to add the jquery mobile look and feel of some buttons onto a desktop browser?
I included the jquery mobile css and js files and when I click the button, it's doing some behind the scenes stuff and not actually taking me to my destination. When I remove the JS (the cause of the strange behavior on the desktop), the button, as expected, doesn't get rendered the way I want it to.
Ideally, I'd like to just see the pure css and simplified JS that's rendering the button so that I can just add it to my desktop layout, and if that's an option to do somehow, that would work for my purposes.
I really don't want to have to dig through all of the jquery mobile js files and figure out what is going on there to piece this together though.
how can I just pare out what I need to have my buttons rendered on the desktop with the same look/feel as the mobile device w/o the mobile device functionality.
Edit for answer below:
this is what I"m calling now on my desktop page:
<link href="/Content/jquery.mobile.custom.structure.min.css" rel="stylesheet" type="text/css" />
<link href="/Content/jquery.mobile.custom.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/content/mobile/themes/LS.min.css" />
<script src="/Scripts/jquery.mobile.custom.min.js"></script>
and calling the button like this:
<a data-role="button" data-theme="a" href="/home/foldit" data-icon="star">
Fold It
</a>
this is showing a textual representation of my button, not rendering the button. the only file I didn't include from the package is the "custom theme" css file because I figured that my theme should replace that. (the LS.min.css file).
Yes, it is possible.
You can rebuild jQuery mobile framework and use only wanted modules.
Go here: http://jquerymobile.com/download-builder/ and select only what you want.
*We’ve decoupled all of our plugins and have a clear dependency map which allows us to offer the download builder tool (Alpha) to let you build the leanest package possible.*
It is only usable with jQM 1.1.1 up to 1.2
I just been looking at the Steam website and noticed it doesn't use Flash.
What technologies are being used to create the page? For example the slide bar to scroll through the different games, how exactly is that happening?
Javascript, and lots of it. From the page's head:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Welcome to Steam</title>
<link href="http://cdn.store.steampowered.com/public/css/styles_storev5.css?v=221260115" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]> <link href="http://cdn.store.steampowered.com/public/css/styles_storev5_ie6.css?v=3855293424" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]> <style type="text/css"> .iepoupfix{ display: block; } </style> <![endif]-->
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/swfobject.js?v=3216748271&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/prototype-1.6.0.2.js?v=1627908004&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/scriptaculous/scriptaculous.js?v=1333279996&l=english&load=effects,controls,slider"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/javascript.js?v=853265233&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/main.js?v=199395227&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/jserrorreport.js?v=19341832&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/header.js?v=318945778&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/search.js?v=630051104&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/cluster.js?v=4033443305&l=english"></script>
<link rel="search" type="application/opensearchdescription+xml" title="Steam Search" href="http://store.steampowered.com/public/open_search.xml">
</head>
Notable libraries: Scriptaculous. Prototype. swfobject.js! Strangely that last one is actually supposed to be useful for embedding flash, though I'm not sure if it's in use on that page (perhaps just elsewhere on the site for movies or audio).
The scrollable "games" section is most likely a <div> with an overflow scrollbar. The arrows are probably links to a javascript call. Since it's fixed width, it just uses javascript to scroll the box by "width x."
For the most part that page is just JavaScript, HTML, and CSS.
It's not necessarily AJAX, although it may request those images from the server "on demand" to lessen server load, instead of prefetching them.
My awesome Chrome Sniffer Chrome extension tells me that this site is using script.aculo.us, which is a Javascript library similar to MooTools and jQuery. Dynamic javascript is being used for lots of neat effects these days.
Most none-flash solutions are likely to be using either a combination of XHTML and Javascript (often JS libraries such as jQuery or Prototype, or Microsoft's flash competitor - Silverlight.
The steam website seems to be using something along the lines of the very popular jQuery and jQuery Tools (Scrollable plugin). The scrollable plugin with jQuery Tools is really quick and easy to set up and really useful for displaying content and images. I've used it on several clients' websites with positive results.
UPDATE: looking at the source it seems that Steam is actually using the also-popular Prototype library but it's a very similar concept to jQuery and the scrollabel plugin.
In addition to Tchalvak's reply (I can't comment yet), swfobject, which is used to embed Flash objects, is used for trailers which are shown in a corner when you choose to view a detailed description of a game.
Its also used to preview Trailers before downloading the high-quality (usually HD) version as a "Media" item in the Steam client.
They are using JavaScript for all this stuff. If you look at the page source you can see that the prototype.js and scriptaculous libraries are both included by the page.
hey, it uses script.aculo.us, which on its behalf is based on Prototype. I didn't see anyone noting that.
prototype, jQuery, MooTools and such are just frameworks. You can do the same if you write your own javascript functions.
They just provide ready-to-go functions for AJAX, animation effects, advanced DOM traversal, slides etc. And the reason i'm using them is animation smoothness - i've written my own functions when i couldn't include jQuery.
Like you tagged, ajax, or other forms of javascript.
You may have a look at this: http://w3techs.com/sites/info/steampowered.com