I have a drop down menu that has a onchange function attached. This function returns the value of the selected option.
ie 9am-10am is 1
10-11am is 2 etc
So what I have in fusion tables is a card that displays all of the times at once, however I want it to only display the selected time.
Ie if the user selects 9am to 10am then the info card only displays that time and hides all the other times.
I had a look at the code google provides but I still don't know exactly how to do it.
<div class='googft-card-view' style='font-family: sans-serif; width: 450px; padding: 4px; border: 1px solid #ccc; overflow: hidden'>
<b>Station:</b> {Station}<br>
<b>Location:</b> {Location}<br>
<b>LINE:</b> {LINE}<br>
<b>IN_0200_0600:</b> {IN_0200_0600}<br>
<b>OUT_0200_0600:</b> {OUT_0200_0600}<br>
<b>{IN_0600_0930}<br>
<b>{OUT_0930_1500}<br>
</div>
So that is the card that pops up
What I need is to only display a single time instead of all 4 of them depending on the dropdown value that is selected.
Do you know how I can do this?
The only way I see so far is to create card-layout for each time-column and select the template based on the dropdown-value
Related
I have a panel with a scrollable content. It works fine in every browser & device except for iPad (no matter what browser I use on the iPad).
I have a panel-container and a panel-slide
.panel-container {
position: relative;
width:100%;
height:100%;
z-index:1;
}
.panel-slide {
width:90%;
height: 90%;
display:block;
position: absolute;
z-index: 2;
background-color: white;
overflow-y: scroll;
overflow-x: hidden;
}
The panel-slide contains a lot of content, so I get the scroll bar. However I can't scroll on iPad.
I have googled the problem and have tried the -webkit-overflow-scrolling: touch, but I can't seem to get to the bottom of it.
What is there to do?
I don't know if this will be helpful, but I had a similar issue, and this is how I resolved it.
My issue:
My page has a popup element that gets populated by AJAX with a list of clickable links. When this element is pre-populated with the rest of the page (some pages required the list to be visible from initial page load), it worked fine. But, when I opened the element and populated the list, as mentioned above, using AJAX, the list would not scroll on iOS.
The problem, as far as I could tell:
In the interim between clicking the button to open the list and when the server responded with the populated list, I had the element show some simple text saying "Loading...". I found that when this was removed, and the element was already populated from the page load, it would work fine. It seemed that as long as there were already contents in the list with a height greater than the containing element, it would be scroll-able when the list populated.
My resolution:
What I did was to take the simple text in the interim from "Loading..." and to wrap it in a div that would prompt scrolling, like such: "<div style='height:1000px;'>Loading...</div>", and that seemed to work for me.
Again, I hope that this can help someone, or if not then perhaps someone with a little more skill than myself may be able to tell us why this might have worked.
There are no scrollbars in any of the iPhone OS. Use 2 fingers to scroll. They use gestures and not mouse scrolls so you are unable to achieve this without hacks.
It maybe worth looking at http://iscrolljs.com/
I'm loading into another div with .load('settings.html') function in
The settings.html page being loaded contains:
<div style="text-align: center; border: 1px solid black">
Application Settings: <br>
Reset Application Key
</div>
The problem is that the button is not getting formatted as per jquery mobile button data-role. If I place this on my main page the button is displayed correctly whereas by load function its a simple link.
What am I getting wrong here?
After you load settings.html use enhanceWithin() to enhance the markup and css of the button. Give your div a class and enhance it after load
Read more here -- https://api.jquerymobile.com/enhanceWithin/
Demo Take out the enhance to see that it does not render properly even when you append it
https://jsfiddle.net/5es81kgd/
Code
$('.but').append('Reset Application Key').enhanceWithin();
So we're building an app using Phonegap & Jquery Mobile and we're having an issue on one of the JQM pages. The issue comes in when you're using the ios keypad's "next" button to navigate between the fields. When you come to the last input text field and you press the "Done" button, some of the page elements appear behind the "header" bar as opposed to having all the page elements in view once the "Done" button has been pressed.
On the Android version, the page's full elements are in view but the Footer bar is now gone and only when I tap the body the footer appears.
Any idea what might be happening here?
I sorted out the issue after a full day of scratching around. A minor change was made to the jquery.mobile.css global configuration file which created the issue. The minor change was made to the following setting...
.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0; }
The actual change made was "! important" was inserted next to the min-height: 100% which resulted in the issue. I simply removed the "! important" and it worked.
I have attached two pictures, the first shows the "desktop" of the webapp I work on, some of the icons you see open dialogs made of a <div/> containing an <iframe/>, but while on a normal pc it all works properly, on the iPad it seems there is a problem with the z-index of some elements, as shown in second picture.
The small red rounds with number inside are defined as follows:
.countComunicazioni {
position: relative;
background: url(/images/admin/menu_sgs/counter.gif) no-repeat center center;
height: 35px;
width: 35px;
color: #FFF;
top: -105px;
left: 120px;
z-index: 0;
font-weight: bold;
display: none;
}
.countComunicazioni p {
margin-top: -5px;
padding-top: 10px;
}
The markup is a <div class="countComunicazioni"/> tag and a <p/> tag inside.
I also noticed that now the problem also appears in Google Chrome V22, the numbers in red circles are always on top even if they have z-index == 0 and the dialogs have z-index > 1000.
As per this bug report ( http://code.google.com/p/chromium/issues/detail?id=144518 ), the change seems to be intended, even if I would bet it'll broke many layouts, not only ours.
This problem was not present in previous versions of Google Chrome, nor is present on Firefox V15 or Internet Explorer V9, where everything is rendered problem.
How can this problem be solved? I'm no CSS expert, so I must admit I have tried little, if anything, so far... And also, who is "right" here? Is our markup incorrect, or does the problem lie in google chrome new rendering strategy?
EDIT
It seems I've been able to solve the issue shown in the two pics: all the dialogs generated from my web app are placed inside a <div/> with position:fixed placed on the very top of the body, now I tried to move the div to the very bottom of the page, and the layout seems now correct.
There is one more problem though: when opening a modal dialog, the opaque layer that is supposed to be created between the dialog and the below content, is actually created above it, see new screenshot.
How could this problem be solved? Does it require modifying our javascript or is it an issue with jquery ui itself?
Just found out myself that the way that chrome 22+ handles z-index has been altered.
Check out this awesome explanation here that I didn't write here...
http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
Basically the way I understand it is that elements which have
position: fixed
now get counted with their own z-index layer so you'll have to adjust your pages accordingly to suit.
Hope that helps!
Is it possible to add an icon of some kind next to a jQuery Mobile select menu in the image below? If so, what would be the image size required? Thanks in advance!
You can add icons to just about anything by adding the following parameters to the element you want to icon to appear within:
data-icon="arrow-l" data-iconpos="left"
Where arrow-l specifies an arrow pointing left.
If you want to specify your own icon/image rather than use one provided by jQuery Mobile, then you can add an image inside the li (before your text), with a class of either ui-li-icon or ui-li-thumb :
<li>
<img src="images/gf.png" alt="France" class="ui-li-icon">
Social Triangle
</li>
ui-li-icon, appears to be restricted to 16px X 16px, and uses the following css conditions:
ui-li-icon {
max-height: 16px;
max-width: 16px;
}
ui-li-thumb, appears to be restricted to 80px X 80px, and uses the following css conditions:
.ui-li-thumb {
max-height: 80px;
max-width: 80px;
}
If you take a look at the above links to the jQuery Mobile documentation, it shows you how to use them in more detail, just check the source: