I'm trying to change the css everytime a page is load/show. How can I do that?
It only works when the first loading, after page changing the css is back to the original format and does not change at all
It's a simple code
jQuery('#cc11').css({'height': 300});
I included on the pageshow/pageinit/pagecreate and works, but after changing the page and going back (sliding) the css does not update, does not change, even if I call that jQuery function on a button, it does not change at all
I don't know what I'm missing, how can I make this CSS change after changing pages?
Related
Please see this jsbin test page that illustrates the issue
I have a simple jqm page with two page divs. The only initialization is being done inside a $(document).on('pageshow', function(){}); block. Inside the block, I initialize a fullcalendar.js calendar.
If I load the page as an external page (the first link in the menu) it loads without a hitch (but it's not using ajax, so the page flickers and there's no transition).
If I load the page using the jqm convention of linking to the id of the second page div with an anchor tag, it loads the calendar div as a page with no data.
If I then refresh the page, the data is displayed. Subsequent use of the menu displays both page divs as pages without issue.
I've seen a lot of discussion about which event of the pagecontainer widget to use, and I'm aware that document.ready() is not the way to go. I've tried all the possibilities, I think (pagebeforeshow, pageshow, pageinit, etc.) There's more detail in the demo, where you can see all the code. If I need to post it here, too, I can do that, but it's easier to see the issue if you load the test at jsbin. I suggest running it in a separate window, so you can refresh the page.
If anyone else has solved this or has an idea what I'm doing wrong, I'd really appreciate the help and / or suggestions.
I put all of the pagecontainer events into my test jsbin code and stepped through them. (Thanks to Gajotres for providing useful documentation on the various pagecontainer hooks). It turns out that the one I needed was 'pagecontainerhide' instead of pageshow, pageinit, or any of the others. Once I modified the code to use that event, the calendar displayed properly on the page div, with transition, and I no longer had to click on refresh to see load the "page".
Since I have all the events there, perhaps others with page change issues can benefit from the test page....
have download Jquery DatePicker and try to add to my View.
But the DatePicker only work fine when I remove all my page css file
If I keep both of them, the DatePicker display very strange with a small rectangle
I am using Jquery 1.8.2 and Jquery-ui 1.8.24
I think the main reason is that there is some duplication between css in my file with the css in the DatePicker
Please help me to solve it
Thank you in advance
I suggest you to download firebug,if you haven't it already, and select the datapicker.
In this way the firebug console display you on the right column the CSS style related to the selected item,here you can disable the CSS property and see wich one cause you the problem.
Also be sure that you have the jquery ui images in the correct folder
I'd like to use this upgraded jQuery Mobile dual range slider.
jQuery Mobile dual range slider working but buggy
I need to use it with twitter bootstrap. However, jQuery Mobile doesn't play nice with Twitter bootstrap and is killing the dropdown menu when the javaScript files are placed at the bottom of the page (as per yslow). Here are 3 jsbin examples to illustrate the problem:
with jQuery Mobile added, twitter bootstrap menu fails:
http://jsbin.com/ibecox/1
without jQuery Mobile .js file, twitter bootstrap the menu works fine:
http://jsbin.com/ibecox/2
with all javaScript in the header (bad practice) the menu also works, but I'd need to avoid putting all the javaScript in the header:
http://jsbin.com/ibecox/3
I can see there's a broken link to the twitter bootstrap js, I've fixed it and your sample works fine for me, both the dropdown menu and the progress bar
If all you're trying to do is get jquerymobile's Range Slider to work with Bootstrap, you can use the Custom Download tool to download just the slice that (sort of) makes the Range Slider work.
What you get is unfortunately incomplete, and above all it doesn't self-initialize, so you'll need to do that manually:
$('div[data-role=rangeslider]').rangeslider();
And you'll need to apply some styles of your own to make up for a bit too much being left out in the custom download. But you will get Range Sliders without breaking Bootstrap.
The cause of the Bootstrap break when you use all of jquery mobile is more complex. The Init module applies a ton of classes all over your code, in particular .ui-btn to buttons. That's the main thing that blows up Bootstrap - the nav menu uses a button tag, and that tag gets that problematic class applied, and then in come all the problem styles from jquerymobile.
The hackier way to solve that in the large is to just use jquerymobile without the Init module then Init only what you need - hopefully their buttons aren't one of those things. The best way to solve it is pretty intense: Improve jquerymobile so that there's either no conflict with Bootstrap ever, or, some sort of special noBSconflict() method or something you can run that avoids applying classes that will break Bootstrap but otherwise proceeds as normal.
I have a master page with buttons, on clicking a button a different page(jsp) is loaded into the contents div of the master page.The master page has all the required jquery mobile css/js files included. But when click happend the child page is displayed with out any j-m css in it.
Does anyone know how to resolve this?
you need to enable those widgets in your code. so if you append a $('') to the page you need to call $('a').button() on it to give it the jqm classes and functions.
remember to do this after you append it.
I'm trying out the new embed Tweet feature https://dev.twitter.com/docs/embedded-tweets and it renders horribly until presumably the js file is run and it styles the Tweet. I'd like to hide the Tweet until it is properly styled. Is this possible? I've moved the js file towards the top of the head section to try to get it loaded early.
The example is at http://www.photogenix.biz - I've put it inside a container div with width and min-height set to try to control the horribleness :) Any advice at all? If code is involved I would really need it as specific as possible.