w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
How can i alter the HEIGHT of PANEL in jquery mobile?
In JQM panel the min-height is 100%. So Try like the following in your style sheet. .ui-panel{ min-height: 200px !important; } Here is the FIDDLE DEMO

Categories : Javascript

JQuery mobile panel
According to http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/ "A panel must be a sibling to the header, content and footer elements inside a jQuery Mobile page. You can add the panel markup either before or after these elements, but not in between. A panel cannot be placed outside a page, but this constraint will be removed in a future version." So just place the panel div within your page :) <body> <div id="content"> <div data-role="page"> <div data-theme="a" data-role="header" data-position="fixed"> <h3> Test </h3> <a href="#menu-panel"class="ui-btn-left" data-icon="bars">Menu</a> </div> <div data-role="panel" data-position="left"

Categories : Jquery

jQuery Mobile create a panel
Seems like you're using outdated versions of both jQuery and jQuery Mobile frameworks. I would suggest updating to the latest release versions. Here's a working demo with your same markup using jQuery 1.9.1 and jQuery Mobile 1.3.1

Categories : Javascript

jQuery mobile panel transition
Working jsFiddle example: http://jsfiddle.net/Gajotres/pZzrk/ .ui-panel-animate { transition: transform 1350ms ease 0s !important; } Unfortunately transition speed can't be changed through configuration so CSS overriding is needed here. Original value is 350ms.

Categories : Jquery

Event on Panel show in jquery mobile
The correct events are, panelbeforeopen and panelbeforeclose. $("#filePanel").on("panelbeforeopen",function(){ alert("hi all"); }); $("#filePanel").on("panelbeforeclose",function(){ alert("byebye"); }); API: http://api.jquerymobile.com/panel/#event-beforeclose

Categories : Jquery

Redirect to jQuery mobile panel from session PHP
You need to write some jQuery to capture the hash and the trigger the click. So when you are redirected, have a flag or something in the url that jquery can use. like test.php#open and then write some jquery to then see the hash and trigger the click of the anchor. if(window.location.hash) { // Open $("a[hreaf='#leftpanel1'").trigger("click"); } else { // Dont open }

Categories : PHP

Progressive swipe on jQuery Mobile panel
You can try this plugin : https://github.com/jakiestfu/Snap.js We used that plugin on one of our projects, it works well on iOS phonegap app, on android there are lags.

Categories : HTML

Jquery Mobile panel scrolls with content
Wrap your contents inside the panel with a div and give it a class i.e. inside. Then set overflow: hidden; for the panel #panel_id or .ui- panel. For the inner div, set overflow-y: scroll;. Demo .ui-panel { overflow: hidden; } .inside { overflow-y: scroll; } And now comes JS part. Adjust .inside height not the panel. $('.inside').css({ 'height': ($(document).height()) + 'px' }); $(window).resize(function () { $('.inside').css({ 'height': ($(document).height()) + 'px' }); });

Categories : Android

How to show pages on right side with panel in jquery mobile
I think it should be what you're wanting: <div data-role="page" id="index"> <div data-role="panel" id="mypanel"> <a href="#" data-role="button" class="btnPages" data-idpage="index">Jump to index page</a> <a href="#" data-role="button" class="btnPages" data-idpage="second">Jump to second page</a> <a href="#" data-role="button" class="btnPages" data-idpage="third">Jump to third page</a> </div> <div data-theme="a" data-role="header"> <h3 id="header-page"> First Page </h3> </div> <div data-role="content" id="content-page"> <a data-role="button" href="#mypanel">Open Pannel</a> </div> <div da

Categories : Jquery

Not able to open panel or popup programatically in jQuery Mobile
Popups and dialogs are tricky when it comes to opening them right after a page event occurs. To fix this issue, you need to use setTimeout to open a dialog or a popup. $(document).on('pageinit', function() { setTimeout(function () { $('#new-lump-sum').popup('open'); }, 100); // delay above zero });

Categories : Jquery

Jquery Mobile Panel visible on page change
I'm not sure why, but I re-downloaded my copy of jquery and jquery mobile and it seemed to fix any issues I was having. Could possibly be because I changed the default transition but who knows. The issue is fixed so I'm happy

Categories : Javascript

Jquery-mobile sliding menu panel +scrolling
In my opinion, jQuery Mobile's slide panel (FB like) it is not yet ready. I had some issues with fixed navbar and fixed footer. This why I started to search for a better alternative to solve this problem. Here are some links that I found : http://www.berriart.com/sidr/#usage http://apptitudes.github.io/SlidingMenuJS/ (my favorite) http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/ http://css-tricks.com/off-canvas-menu-with-css-target/ I know it doesn't solve your problem, but it might help in your futur development :)

Categories : Jquery

Jquery Mobile and Ajax Panel not opening properly
Get your document ready out of the function. And the toggle() to show(). Change this function toggleDiv(divId) { $("#"+divId).toggle(); $(document).ready(function(){ $("#myContent").load("getnotes.php?name=<? echo $username; ?>"); }); } To this function toggleDiv(divId) { $("#"+divId).show(); } $(document).ready(function(){ $("#myContent").load("getnotes.php?name=<? echo $username; ?>"); }); DEMO

Categories : PHP

Jquery Mobile Panel scroll inside issues
Nevermind, wasnt working in android, and I found the reason: https://code.google.com/p/android/issues/detail?id=6864 https://code.google.com/p/android/issues/detail?id=2911

Categories : CSS

jQuery Mobile 1.3 Panel Not Working After Page Change
I played around with your code a bit. I noticed that If I put an alert inside your update function, that it fixes everything. So I researched why an alert would make a program work, and found this page. http://ubuntuforums.org/archive/index.php/t-930002.html "You should probably know that JavaScript evaluation is of the 'look ahead' type: the script already runs when it is still being evaluated (and while the page itself is still being evaluated). Now that is why it is recommended to dump all references to scripts in the section of your page, as it will cause the JavaScript to be fully evaluated before you (usually) can call a function (event handlers), and hence avoid silly 'undefined' errors. Now the alert(); call has 2 effects: (1) it pops up the message box (so far, so good);.but (2

Categories : Javascript

JQuery-mobile panel enables horizontal scrolling
I just came across the same problem with phonegap and android. What fixed it for me was getting rid of data-display="overlay" or display="push". Even though it doesn't slide in anymore the menu still works. Hope this can help.

Categories : IOS

jQuery mobile - allow scrolling only when side panel is closed?
The latest jQuery Mobile API docs say to use $( ".selector" ).on( "panelopen", function( event, ui ) {} ); Could you try that? It may work using the on() method instead of the older bind() approach. Also, perhaps you could bind the overlflow change to a child of body instead of the body element. Its hard to give a more specific solution without seeing more of your code. http://api.jquerymobile.com/panel/#event-open UPDATE Here is a link to the jsbin with working solution: http://jsbin.com/azavup/2/ The exact JS used is below: $( document ).on( "pageinit", "#page1", function( event ) { $( "#defaultpanel" ).on( "panelopen", function( event, ui ) { //console.log("i am open"); $('body').css("overflow", "hidden"); } ); $( "#defaultpanel" ).on( "panelclose", function(

Categories : Android

Swipe in the middle to open panel with jQuery Mobile?
I think this is what you'll want (you may want to refine your selector for your swipe area) - $('body').on('swiperight', function () { $('#defaultpanel').panel('open', ''); }); $('body').on('swipeleft', function () { $('#defaultpanel').panel('close'); }); jsFiddle Demo

Categories : Jquery

Google Map not displaying correctly after adding a jquery mobile panel
You will need to change your custom CSS. In this working example I have used your HTML page and modified its CSS. You main problem here is not panel at least not directly. Panel height will cause page content div to miss behave, it can be fix with a CSS used below. This is a working example: http://jsfiddle.net/7kGdE/105/ CSS : #map-canvas { padding: 0; position : absolute !important; top : 40px !important; right : 0; bottom : 40px !important; left : 0 !important; } This solution is also described HERE.

Categories : Jquery

jquery mobile panel ONLY on the first page doesn't work after first time
Update I created three basic pages to test with. This is the structure of the pages: <div data-role="page" id="example_page_one" data-theme="b" data-content-theme="b"> <div id="example_page_one_menu" data-role="panel"> <ul> <li class="home"><a href="index.htm" class="active">Home</a></li> <li><a href="index.htm">Link 2</a></li> </ul> </div> <div data-role="header">Header Content</div> <div data-role="content"> <p>This is the content for example page one!</p> <p><a href="javascript: showMenu();">Open the menu panel</a></p> <p>A link to <a href="sandbox_m2.php">example

Categories : Jquery

Jquery Mobile panel dynamic listview does not render correctly
After appending items dynamically into panel, call .trigger('pagecreate'); $('[data-role=page]').trigger('pagecreate'); or $.mobile.activePage.trigger('pagecreate'); Demo - jQM 1.3.2 and below For jQuery Mobile v 1.4, it is different $('.target').trigger('create') Demo - jQM v 1.4 Aplha

Categories : Jquery

How to prevent jquery mobile toolbar toggle when opening a panel
try this: $('#panel_link').on('click', function (event) { $( "#mypanel" ).panel( "open" ); event.stopImmediatePropagation(); }); See the difference between stopPropagation and stopImmediatePropagation jquery: stopPropagation vs stopImmediatePropagation

Categories : Jquery

apply jquery mobile style to the content of my dynamically created panel
I have made an original post so let me show you a different way, instead of using pagebeforeshow event you can use pagebeforecreate. It is important because at that point content is still not styled. Any dynamically added content will be automatically styled so you don't need to worry about that. $(document).on('pagebeforecreate', '#welcome-page', function(){ $('<div>').attr({'id':'mypanel','data-role':'panel','data-position':'right','data-display':'overlay'}).appendTo($(this)); $('<a>').attr({'href':'mailto:?subject=subject of the email&body=whatever body body','target':'_blank'}).html('Send').appendTo('#mypanel'); $('<a>').attr({'id':'test-btn','data-role':'button'}).html('Click me').appendTo('#mypanel'); $('<a>').attr({'href':

Categories : Jquery

jquery mobile, use android hardware back button to close a panel
You can capture hardware back button as below in javascript: $(document).bind('keydown', function(event) { if (event.keyCode == 27) { // Prevent default (disable the back button behavior) event.preventDefault(); // Your code to close panel or show another page or whatever... $( '#mypanel' ).panel( "close" ); } });

Categories : Jquery

jQuery mobile 1.3 left slide panel - phonegap and fixed header
This solution is working for me, I am talking about Android hybrid app made in Phonegap. Working jsFiddle example: http://jsfiddle.net/Gajotres/PMrDn/56/ <div data-role="page" id="index"> <div data-role="panel" id="mypanel" data-position="left" data-display="push"> <a data-role="button">Some button</a> </div> <div data-theme="b" data-role="header"> <a href="#mypanel">Open panel</a> <h1>Index page</h1> </div> <div data-role="content"> </div> </div> What you require is data-display="push" attribute inside your panel. It will successfully push fixed header to the right. This works on Android 3+ and

Categories : Jquery

jQuery Mobile like navigation menu inside a side Panel for desktop app?
This is not so easy. I have spent quite some time on it getting a plugin to work, but have not updated it from JQM 1.2, because 1.5 should start to support this in one way or another. If you want to give multiview a try: SO answer how to setup | Github repo | sample page

Categories : Jquery

is there any way to open the panel when the swipe event start by user in jquery mobile
Here i came up with solution to the above question. I found this https://github.com/jakiestfu/Snap.js plugin.It works smoothly what i am expect.

Categories : Android

JQuery-ui : tabs with heightstyle fill, in a resizable panel, tab content height is not updated
you can use the alsoResize paremeter in your resizable function and set it to a class on all the tabbed content. something like this(I just picked an arbitrary class placed on the tabs by the ui so oyu could use it or another): $('#resize').resizable({ handles: 's', alsoResize: '.ui-tabs-panel' }); heres a working jsfiddle

Categories : Jquery

Setting panel height with content that does not fill the panel completely
The Panel in asp.net when rendered in HTML doesn't get rendered as a panel as panel is not a valid html tag. you could wrap div inside of the panel and provide styling to the div. <asp:Panel ID="Panel1" GroupingText="Material" CssClass="material" runat="server" > <div class="material"> <asp:RadioButtonList ID="RadioButtonList1" runat="server" > <asp:ListItem Selected="True">Plastics</asp:ListItem> <asp:ListItem Enabled="false">Glass</asp:ListItem> </asp:RadioButtonList> </div> </asp:Panel> <asp:Panel ID="Panel2" GroupingText="Material" CssClass="design" runat="server" > <div class="design">

Categories : Asp Net

Changing height of jQuery Mobile "select" with jQuery?
You are missing the obvious. Your original select is not longer visible. Also as you can see new one is just custom combination of <div>'s and <span>'s. New custom select box will not inherit css from the old one. New select box CSS structure needs to be changed in order for this to work. Working example: http://jsfiddle.net/Gajotres/PMrDn/107/ HTML: <div class="ui-grid-a"> <div class="ui-block-a" style="width: 80%;"> <div data-role="content" class="accountTransferLabels" style="padding-left: 0;"> Amount: </div> <input type="text" autocomplete="off" class="translate" placeholder="0.0" data-clear-btn="true" autofocus required autocorrect="off" autocapitalize="off" data-theme="d"/> </div> &l

Categories : Javascript

Jquery mobile Panel not working on page redirect and background image not getting applied
I thing I understand your problem. When jQuery Mobile initializes only first HTML page is fully loaded. When jQuery Mobile loads other pages it will load only page div (data-role="page"), everything else will be discarded. This is because ajax is used for page loading. because initial HTML file HEAD is already inside the DOM there's no point in loading it for subsiding pages. To fix your problem move your CSS and javascript inside data-role="page" div. Something like this: <div data-role="page" id="welcomepage"> <!--WelcomePage Start--> <style> #welcomepage{ background: transparent url(../CS408/images/wallpaper.jpg) 0 0 repeat fixed !important;} #sslogo{max-height: 80%; max-width: 100%;} </style>

Categories : Jquery

JQuery Mobile Percentage Height Issue
Do you want height in pixel or percentage? It seems only padding is working. Adjust with the padding instead of height? See DEMO http://jsfiddle.net/yeyene/Rdfxs/1/ #login #my_header{ padding: 20% 0 !important; }

Categories : Jquery

jquery mobile min-height after input file camera
You can use trigger page create to create the $('#pagi-id').trigger('updatelayout'); As mentioned in the jqm docs Example, $(window).on( "orientationchange", function(event) { $('#pagi-id').trigger('updatelayout'); });

Categories : IOS

Get window height on mobile devices (especially iPhones) without using jQuery
document.documentElement.clientHeight There are a number of other methods, too: http://responsejs.com/labs/dimensions/

Categories : Javascript

How to set automatic height to anchor tags in jquery mobile?
I think this depends where your link is. Is it in a listview? I tried to make two links with two different images inside (different size) and I don't see the behaviour you are describing. Also, even though probably unrelated, # in links is normally used to link to another page. See here - http://jsfiddle.net/TeNCE/ Can you either provide your jsFiddle or edit this one? <div data-role="page"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content" data-theme="none" class="flex-container"> <div><strong>Something</strong></div> <a href="#an-href"><img src="https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/64/social_google_box.png" alt="Icon" />

Categories : Jquery

How do I use Jquery Mobile Slide Panel to slide up from the bottom?
see https://github.com/jquery/jquery-mobile/pull/5770 Unfortunately, arschmitz said: there are a bunch of conflicts here because of changes we have made to panels. love the feature though and would love to try and make this happen for 1.5 im going to close this PR just because it is now outdated however would like to work with you to land this in hopefully next version

Categories : Javascript

jquery accordion - How to activate a panel based on active class inside the panel?
You will want to get the index of your active class and use the "active" option on the accordion. function setActive() { var index = $('#myaccordion li').index($('#myaccordion li.activeClass')); $('#myaccordion').accordion("option","active" index); } For more information you can look here and here. Hope this helps.

Categories : Jquery

jQuery sliding panels - close one panel when opening another one/How to open one panel only?
Something in these lines. I would you data-* attributes to provide a relation between the panels and the images. The follow up the logic based on the conditions. Javascript $('#panel1').slidePanel({ speed: 'slow', position: 'static' }); $('#panel2').slidePanel({ speed: 'slow', position: 'static' }); $("[id^=icon]").click(function () { // Current active panel var $currPanel = $('#' + $(this).data('panel')); // Slideup all the other panels other than $currPanel $('.panel').not($currPanel).slideUp(); // If $currPanel has no active class only then slide down if (!$currPanel.hasClass('current')) { $currPanel.slideDown("slow"); } // Add class active to current panel $currPanel.addClass('current'); // Remove class for other panel

Categories : Javascript

jQuery show / hide panel and then hover over content within a panel
A couple things: User a hover event handler on the li, not the a. This allows you to move your content into the lis, so that hovering on the content means you're still hovering over its parent, the li. jQuery: $('#item-1').parent().hover(function () { $('#panel-1.panel').toggle(); }); $('#item-2').parent().hover(function () { $('#panel-2.panel').toggle(); }); Forked jsFiddle

Categories : Javascript

How do I target a specific panel of JQuery Panel Switcher from a URL
The plugin you're using there doesn't really have a clearly documented API, but theoretically it's possible. I'm going to show an example of how this would be done with a plugin that works the same way but is a little more solid and well-documented -- the tabs widget from jquery ui, and using hashed urls like the first comment suggests. // simple url parser // (via https://gist.github.com/jlong/2428561) var url = document.createElement('a'); url.href = window.location.href; // get the url hash as an integer var activeTab = parseInt(url.hash) || 1; // initialize tabs on the '.selector' element $( ".selector" ).tabs('active', activeTab); This way, you would be able to hash your url with the number of the tab you wanted open, and the tabs plugin would initialize with that tab open (or th

Categories : Javascript



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.