Jquery Mobile div Data role Panel not getting displayed propely - jquery-mobile

http://jsfiddle.net/jWaEv/13/
When you run this fiddle
Click on the square box on the right side of the locations (A Panel is getting displayed and its working fine)
The issue is that .
When you click on the Delivery and click on the square box on the right side of the locations (The Panel gets displayed but its not working properly (not getting closed and not aligned properly))
Could you please let me know how to fix this ??
To solve the i tried calling the same above panel that is rightpanel when clicked on the Locations square box on the right side , but this did not solve the issue .
$(document).on('click', 'a[href=#rightpanel_2]', function(event) {
$("a[href=#rightpanel]").trigger("click");
});
could you please let me kno how to resolve the issue ??
Thanks in advance

Related

Bootstrap 3 long modal open fix postion

I am working on mvc 5 application in that I am using bootstrap modal(pop-up) when click on popup its open at proper position showing image below first time opening of modal
but when I click cancel button on popup it close and while re opening it change its position It causes scroll top of main screen how to avoid this showing in second image. .Second time opening at wrong position
Can anybody please provide me some inputs on this? it will be greatly appreciable.
thanks in advance
$('#YourModal').on('shown.bs.modal', function () {
$(this).scrollTop(0);
});
Make scrollTop(0) it will work fine

Hover menu on phone : it goes at the top when taping

On my website (still in beta version), here : http://www.collectifsaga.com/X/wordpress/fr/home-fr, I have a menu hover (filters for the grid)
I have a problem on phones (I have an iPhone, I don't know if there is problem on other devices) with that hover menu.
The hover is working well (with :active in the CSS) and by adding this in the <head> : document.addEventListener("touchstart", function() {},false);
This problem is, when I tap on the hover menu, the page goes directly to the top, even if I'm on the middle or bottom of it. And that's quite tiring
Do you know how to solve that ?
You need to add:
onclick="event.preventDefault();
so you would have:
<img src="http://www.collectifsaga.com/_SAGA/_graph/icone/plus.svg" width="160px">
inside your link that shows your menu when u tap on it. You could also use span instead of "a" for it, might even be better solution as thats not link.

jQuery Mobile popup that doesn't move when scrolling the page

I am using jQuery Mobile 1.3.0 RC1. I have a popup that I create programmatically at the bottom of my page and close after a few seconds using setTimeout (toast notification). It works very well, however if I happen to scroll the page while the popup is displayed, the popup gets scrolled too. I would like the popup not to move, i.e. stay in its position relative to the screen, not relative to the page. Is there a way to do that ?
I have tried playing with the data-position-to attribute in the HTML element, with the positionTo option of the "open" method, and tried placing the popup element inside a fixed transparent footer, none of these resulted in the desired behavior.
I had a similar problem last week. Finally solved it using modal dialog instead of popups.
For popups, I could find following.
$("#myPopup").on({
popupbeforeposition: function () {
$('.ui-popup-screen').off();
}
});
Which helped me in prevention of closing the dialog while user touched outside of popup. But scrolling issue was still there. So I changed all popups to modal dialogs. Hope it helps someone.

jQuery Mobile app not not displaying elements correctly

SO...my app has a few issues, but I am DESPERATE to solve this one first. Any thoughts and suggestions are welcomed. Here is the app:
http://pocketfacilitator.com
Here's the issue - (NOTE, Firefox doesn't even allow this issue to fire, so maybe try Chrome or Safari, or a mobile browser):
From the home page, click on Portables > List All Portables. Now, click on any of the PLUS signs on the right (or two or three, doesn't matter). Now, check the "TODAY" page (in the very bottom nav bar). It will display the list of games you clicked on, but the way they are displayed is totally jacked. BUT...if you RELOAD the page (or just click the red CLEAR button), and repeat the process, it looks normal. What have I done wrong?
If you dare: in Firefox, it won't even let me add an activity -- clicking on the "+" button yield NO effect.
I appreciate any help. Cheers!
Try to call refresh() method on your listview after you dynamically add items
$(this).parent().appendTo('#todaylist');
$('#todaylist').listview('refresh');
See Updating lists
If you add items to a listview, you'll need to call the refresh()
method on it to update the styles and create any nested lists that are
added.

Cant get down state to work in browser in Firewoks CS5

can anybody help with this , I can get the 3 states to work in preview ie; up, over, down with the behaviour as onMouseOver Set Nav Bar Image.
It works in the browser if there are no links set as soon a i set a link then only up, over work not the down state , I have tried setting the links in dreamweaver but get the same result.
Is there any workaround for this this ?
Thanks
if anybody is interested , i have found out what to do
tick the box in the properties panel that says Show down state on load
this does not work if you have your nav menu set as part of the master template or as a shared layer.
So you need to copy the menu to each page and set the individual button on each page with the Show down state on load tick box.
Hope this makes sense ?
thanks

Resources