jqm's data-dismissible attribute will be released in version 1.3 as stated here, although it's already implemented.
The thing is I need to have this feature in my project now, so can someone please explain how do I incorporate only this attribute support? Can I still link to the CDN and somehow "add" this piece of code or their is no other way but to download the whole "master" branch and then link the files from my server?
This is how I did it in the end:
I found the code that needs to be changed:
So, I downloaded the uncompressed version from the jQuery CDN, then I edited the lines as shown in the image, compressed the js file and uploaded it to my site. Now, I can use the popups like this:
<div data-role="popup"
id="popupLogin"
data-theme="a"
class="ui-corner-all"
data-dismissible="false">
All happy!
I used Nikola's answer, but changed the if-statement to check the data's dismissible attribute value:
if ( this.element.data('dismissible') ) {
this.close();
}
Related
I include moments.js in the following way
<script src="../static/js/moment-timezone-full.js"></script>
<script>
$('.select_timezone').timezones();
</script>
I then give the timezone selection to my user in the html as
<div class="row">
<div class="col-lg-4">
<select class="select_timezone" name="select_timezone"></select>
</div>
</div>
My question is how can I select a default timezone? I saw that one can do that with
moment.tz.setDefault(String);
but I don't understand how this would work in my setup?
EDIT: My implementation is just following this example...
http://www.jqueryscript.net/time-clock/Easy-Timezone-Picker-with-jQuery-Moment-js-Timezones.html
does really nobody know a solution to this?
carl
EDIT: I should clarify why moment.tz.setDefault does not work. When I add the line
moment.tz.setDefault('America/Los_Angeles');
I get the javascript error
Uncaught TypeError: Cannot read property 'setDefault' of undefined
I include moments as explained in the flask mega-tutorial meaning I do
from flask.ext.moment import Moment
...
moment = Moment()
...
moment.init_app(app)
and in my html template I do
{% block scripts %}
{{ moment.include_moment() }}
{% endblock %}
moment-timezones is included with the js file as shown above. Have I forgotten anything?
I am just trying to set the default timezone for the selection
After looking at what you have posted, it looks like you are using a jquery plugin from https://github.com/firstandthird/timezones which when I take a look at the code, it using an older version of moment.js (version 2.8.3) as seen at https://github.com/firstandthird/timezones/blob/master/dist/timezones.full.js
It is also using old versions of moment-timezone ( which it is pulling in at that bottom of the timezones.full.js file, version 0.2.4) and the moment.tz.setDefault() wasn't added until a later version. The most recent as of now is 0.4.0. So, I would recommend mashing up your own files with the most recent versions, and try it all again on your system to see if it works.
UPDATE:
So, I looked at your fiddle, and updated it at your fiddle allowing for
moment.tz.setDefault("America/New_York");
$('.select_timezone').timezones();
with my own mashed up moment.js, moment-timezone.js, and jquery plugin code, and it works just fine. Basically all that moment-timezone-full.js file is doing is mashing up the moment.js and moment-timezone.js with the jquery plugin code. (it is listed as one of the external libraries, you can find it at https://gist.github.com/iron-man/deedd9efe988318d842a as well. I did notice that it will only pick up the first timezone in the list for that offset, not the actual one you specify, but that is a bigger issue with the moment-timezone.js library and outside of the scope of this question.
By default it displays the timezone of the person looking at it, but you can override that by specifically defining it.
In your example you could do something like:
<script src="../static/js/moment-timezone-full.js"></script>
<script>
moment.tz.setDefault("America/New_York");
$('.select_timezone').timezones();
</script>
When using jQuery Mobile .js along with jQuery Mobile .css, what is the best way to customize the default styling such as a link button?
Using jQM, a simple link can be turned into a button by using the following code:
Link button
data-role="button" allows jQM to add classes to the link so it can be styled into mobile button touch abled like so:
<a href="index.html" data-role="button" data-corners="true" data-shadow="true"
data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn
ui-shadow ui-btn-corner-all ui-btn-up-c"><span class="ui-btn-inner
ui-btn-corner-all"><span class="ui-btn-text">Link button</span></span></a>
Is it OK to actually edit the jQM css file for example the ui-btn-up-c class? Or is it better to override the styles somehow, perhaps in an external stylesheet?
I have a couple of concerns. I am wondering if it's possible to break some of the functionality by directly editing jQM.css as jQM seems to use the stylesheet heavily.
Also will it be a problem on updating? Do jQM release a new stylesheet when a new version comes out which would override my edits to the main jQM stylesheet?
Basically what I am asking is how do I edit the jQuery Mobile built in theme?
Thanks and look forward to your answers :)
Intro
If you want to change classic jQuery Mobile CSS everything depends on what do you want to do.
Theme roller
Classic way would be to create a completely new set of theme's or add them to existing ones. It is done through jQuery Mobile theme roller. When you open it it will automatically create 3 themes you can then modify as you wish. Or you can Import your current theme CSS and add several more themes (this is probably best solution if you want to change complete look).
Custom CSS changes
This solution requires a little bit of finesse. First if possible NEVER change original CSS unless you are 100% sure what you are doing. For example if you change default button classes it will also affect other widgets that use button classes and there are a lot of them.
Correct way would be to change single/multiple elements with custom CSS file. This way original CSS files is intact and new one can be changed / removed at any time.
To do this you will need to use Chrome Webmaster tools or additional plugin called Firebug (for Chrome and FireFox). There are several more solutions but this two are most commonly used.
Problem to think about
Not all is well in this solution. For example, classic a tag button can be easily modified cause that same a tag will stay as a parent of a future styled jQuery Button. But, if your button is created from input tag, like this:
<input type="text" value="Some value" id="change-me"/>
you cant use #change-me id to correct its CSS. Mainly because this input is not a parent tag for a future button, it will be a inner part of a button when jQuery Mobile styles it. It will look like this:
<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
<input type="text" id="change-me" value="Some value" class="ui-input-text ui-body-c"/>
</div>
To fix this wrap that input with another div element. Move id from input to div element and then use it to change inner CSS styles.
How to correctly override CSS styles
This is one of a most common questions in this StackOverflow group. When changing predefined CSS rules you must use !important keyword. Changes will usually not work without it. For example if you want to change input button style background (from a previous example, wrapped in a div) you would do it like this:
#change-me .ui-input-text {
background-color: red !important;
}
If nothing else works change original CSS file(s)
jQuery Mobile can have 1 or 2 CSS files. When using one file both theme and structure is included, or they can be separated into two files. This is useful if you want to change CSS directly. Theme CSS can be easily imported and exported into theme roller without affecting structure CSS file.
One last thing, some things can only be changed by modifying original structure CSS file. For example jQuery Mobile uses a horrible blue glow effect to show when some element has been pressed. It can be removed only directly from structure CSS file.
The solution lies in CSS specificity within your own additional CSS file. All you need to do to override any formatting in JQM is to first apply an id to the element you wish to override JQM formatting with your own CSS.
Next, in your own CSS, specify that the class be applied to the id of the container.
As an example, I'll remove the JQM border from an image link below.
#img_button_1 .ui-btn-inner {border: none !important;}
Where #img_button_1 is the id of the HTML anchor element.
<a id="img_button_1" data-role="button" data-theme="none" data-corners="false" data-shadow="false" data-inline="true"
href="http://www.google.com" target="_blank"><img src="http://www.google.com/images/srpr/logo1w.png" alt="Google" />
</a>
It's as simple as that.
One more important thing, and that is that load order of the external CSS files is significant, and you will want to load your own CSS after JQM CSS.
I have forked a working example at jsFiddle below.
http://jsfiddle.net/Z8Xnx/14/
The biggest benefit with this approach, is you do not have to alter the JQM CSS at all, and can leave it alone. This becomes important if your want to import your JQM back into the ThemeRoller tool at a later date. If you modify the actual JQM CSS by hand, you may have an issue successfully importing your JQM back into ThemeRoller again.
I have successfully used this approach to resolve every JQM CSS conflict I have run across since figuring out this specicivity requirement issue.
Hope this helps everyone with an easy solution to their JQM style conundrums.
** UPDATE **
It has been noted to me that this method does not work with the latest version of JQM (1.3.0b1), and that is not correct. I have investigated and found this to be a problem with the implementation of this version of JQM at jsFiddle. To prove this, I have put up an example page on my own space with the exact same code as that shown in the jsFiddle example. This means as of my writting, you really can't trust anything at jsFiddle using the lastest version of JQM from the options. Just a heads up, and you can find the working implementation at...
jQuery Mobile CSS Override Example
If you are looking to simply change the styling then you can use the jQuery Mobile themeroller.
http://jquerymobile.com/themeroller/index.php
Otherwise, I would suggest using another stylesheet rather than directly editing the jQuery mobile stylesheet.
If you are looking to reduce the number of files that you are serving to your visitors then I would compress both stylesheets and then just insert your styles below their styles as a production copy. That way, you can keep them compressed and combined for production, but you could keep them separate for easy upgrading later and for development ease of use.
A question similar to this has been posted several time, but I cannot find a solution that works. Hopefully, someone can help!
I am using jQuery Mobile 1.1 and jQuery 1.7.2, so I'm on the most recent stable releases. I want to create a dynamic page header. Using this HTML code, it works fine:
<div data-role="page" id="levela">
<div data-role="header" id="hdr_levela">
<h1>Title</h1>
</div>
</div>
So I then go to dynamically create the title. I change the HTML to this:
<div data-role="page" id="levela">
<div data-role="header" id="hdr_levela">
</div>
</div>
And added the following jQuery code:
// Set the header
var dirHeader = $('#hdr_levela');
dirHeader.append('<h1>' + title+ '</h1>');
The title appears, but is not styled. I have found several posts about this. In the jQuery Mobile Documentation, it says:
"However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).
For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
So I tried several things. After the above code, I added the following:
dirHeader.trigger("create");
This had no effect. So I tried to put it on the actual append itself:
dirHeader.append('<h1>' + folderName + '</h1>').trigger("create");
This had no effect. I then tried the process on the parent element (in this case, the id of the parent div is "levela"). So I tried this:
$('#levela').trigger("create");
This also had no effect. At this point, I am completely lost. Every solution involves doing one of the things I have tried and is just not working. I must be missing something incredibly basic but I just can't seem to find it.
Thanks in advance for your help!
You can update the content by calling .page:
See this working Fiddle Example!
// Set the header
var title = 'super hyper BuBu',
$dirHeader = $('#hdr_levela');
$dirHeader.append('<h1>' + title+ '</h1>').page();
I just solved a similar problem -- it appears that jQM headers and footers do not have the "create" method, so as far as I can tell, the css classes and roles need to be added manually.
For reference, I posted an example fix on this (old) question: JQuery Mobile trigger('create') command not working
At first If something similiar to this already has been asked, I am sorry, but that is my first question here and i didn't find anything that could had helped.
Since i dont know if it's important, my doctype is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div id="container"> /* container i which everything is nested */
<div id="header">
</div>
<div id="Navigation">
<a onmouseover="Bildwechsel('Galerie','HGalerie.png');"onmouseout="Bildwechsel('Galerie','Galerie.png');" href="Galerie.htm"><img alt="Navigation" src="Galerie.png" name="Galerie" /></a> //one of the links which is causing trouble
</div>
<div id="content"></div>
</div>
and that is the mouseover function (hope you don't mind the names, i'm German):
function Bildwechsel(Bild, BildSource) {
document.images[Bild].src = BildSource; /* function i use to change pictures on mouseover */
}
In my header, i have also included two versions of jQuery (that is because a plugin needs an older version to work properly) and lightbox v2. I have implemented them with var something=jQuery.noConflict();, also inserting true in one of these declarations because otherwise it wouldn't work but since everything works fine, I think there shouldn't be a problem.
My problem know is that when i click the link with href="Galerie.htm" every browser I mentioned at the beginning excluding opera (I am using version 11.62) is navigating to Galerie.htm. But in Opera it's like the Browser's only refreshing the site, so he always stays on the same page no matter what link i click. Maybe good to know: When i right-click on the link and open it in a new tab, everything works fine.
And the second question is: Although i know what doctypes are good for, how do i know which one is best to use in my case? i already did check my html markup, getting about 50 results(?) with errors like :link rel="stylesheet" type="text/css" src="something.css" > missing slash between [...] .css" and >, but when i look it up in selfhtml it's written that way. I know that i depends on the doctype if the slash is needed or not ,but do i have to look every single slash up or is it not that important? If yes how can i achieve a valid html with 0 errors?
Since I always thought a (anchor?) links are the last thing i will have problems with I have really no clue whats going on here.
Any help would be appreciated ;)
without firing up Opera and playing with all this myself.. first, in that link you need a space between your onmouseover and onmouseout attributes.
e.g.
<a onmouseover="Bildwechsel('Galerie','HGalerie.png'); "onmouseout="Bildwechsel('Galerie','Galerie.png');" href="Galerie.htm"><img alt="Navigation" src="Galerie.png" name="Galerie" /></a> <!-- btw, "//" starts a javascript comment, but not so in HTML. //one of the links which is causing trouble -->
Does that help?
I want to add a link to a page named "Prueba_jQMobile", that is saved in a local folder with the others html page and jquery libraries. This is the code:
<ul data-role="listview" data-theme="b">
<li>Vacunas</li> <!-- is working well -->
<li>Test</li> <!-- is working well -->
<li>jQueryTest</li> <!-- isn't working -->
</ul>
Thanks.
Update: I executed the html page with firefox (before was using chrome) and the link was opened, but in plain text without the design. I'm going to continue testing it.
Try : JQueryTest
So it doesn't open, when you click on the Link?
try:
jQueryTest
try /Prueba_jQMobile.html or if it's in a higher directory ../Prueba_jQMobile.html
Use the hash befor the URI.
It should be jQueryTest