Jquery ui is definetely loaded as I have sortable working on the same page!
My html is as follows...
echo '<div id="accordian">
<h3>Subscriber Options</h3>
<div><a id="changeLayout" href="">Change Main Layout</a></div>
<h3>Account Layout</h3>
<div></div>
</div>';
My Jquery...
$(function() {
$("#accordian").accordian();
});
The jquery ui comes from google, and then my JS sheet after that, all my JS is wrapped in document.ready()
And my css for the accordian,
#accordian {width: 100%;}
#accordian h3 {padding: 5px 0; font-size: 13px; font-weight: normal; background: #333;}
#accordian div {padding: 10px 0; width: 100%; height: 300px; border: 1px solid #f00;}
I make this mistake so very, very often...
It's spelt accordion ;-)
The only other possible thing I can think is that you don't have the base CSS for the accordion loaded. I've set up this jsfiddle with jQuery 1.5.2, jQuery UI 1.8.9, the base UI css from Google's CDN and your code and it works as expected.
Related
I have searched and tried every possible example I can find. Here is my goal. I have a starter template for tabs. Each tab will open an page that will load a different path from a remote domain (using https) via an iframe. In android, it works as I would hope. In IOS, from what I have read, the iframe "height:100%" actually goes to the height of the content in the iframe, instead of the viewable area on the app, so the fixed header scrolls with the page, because for all it thinks, is that you have a really tall screen. What I need to happen is when you scroll, the fixed header stays at the top. Here is the code:
Component for Tab HTML
<ion-content >
<div class="iframe-fix">
<iframe
[src]="myurl"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
></iframe>
</div>
</ion-content>
From the forums I found a few tricks that should work, and created this css file that I include in the index.html:
.iframe-fix iframe {
-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;
width: 100%;
height: 100%;
border: none;
margin-top: 40px;
}
.iframe-fix {
overflow: hidden;
width: 100%;
height: 100%;
border: none;
background-color: #fff;
}
Would appreciate any help/suppport. Thanks!!
I'm developing a web-app for both Android and iOS.
I have encountered a problem with the styling of the app.
For some reason, styles applied to a <select> won't display on MobileSafari (aka iOS WebView)
CSS:
p,
input,
select,
option,
button {
font-family: Arial, ArialHebrew, sans-serif;
font-size: x-large;
text-align: center;
color: #FFF;
margin: 1vh;
padding: 1vh;
}
input,
select,
option,
button {
background-color: #333;
border-radius: 1vh;
border-color: transparent;
}
How i want it to look (Chrome, Android):
How it looks (MobileSafari, iOS):
What do i need to change in my CSS to apply the style to the <select>?
The quick & easy fix is to apply -webkit-appearance: none. However, you might quickly notice your element has lost the arrow to indicate it's a <select> element.
To address this, one workaround is to wrap your element with a div and mimic the arrow using CSS content.
Here's a Fiddle: http://jsfiddle.net/d6jhpo7v/
And the fiddle in iOS simulator:
I'm working on embedding a very quick survey on my site and after page one, there is just description text for page 2 and 3. So how do I a) make the iframe responsive to the number of questions or b) get rid the other ugly gray bottom when the description text appears? I don't mind the scroll bar but in a dream scenario what I would like is no scoll bar - all 4 questions fit on the page and then the continue button on page 2 shows up with no grey box.
The iframe code I have on the page is:
with the following CSS:
<style>
.survey-container {
position: relative;
}
iframe {
border-style: none;
background-color:transparent;
min-height: 400px;
max-height: 600px;
overflow: hidden;
}
</style>
http://i.stack.imgur.com/WP1dZ.jpg
Using the embed script provided by Surveymonkey, I was able to make the embedded survey width:100% by nullifying the max-width property through CSS:
.smcx-embed {
max-width: none !important;
}
.smcx-embed iframe {
max-width: none !important;
}
I initially asked this question: changed jQuery Mobile's default icon set, work on browser, failed on device, but later, I found this could be a phonegap issue.
Is there anyone who has experience in changing JQuery Mobile's default set in phonegap?
Check my other post about the problem description.
Any suggestions?
Try using custom icon
.ui-icon-customicon {
background-color: #000000 /*{global-icon-color}*/;
background-color: transparent /*{global-icon-disc}*/;
background-image: url(images/icons-18-white.png) /*{global-icon-set}*/;
background-repeat: no-repeat;
-webkit-border-radius: 9px;
border-radius: 9px;
}
In html page
<a href="#" data-icon="customicon" ></a>
Well, i suggest the same that i've already suggested in your previous question... It should help if you only need to change icons.
But if you now want to change styles of JQuery Mobile elements - than you can change styles of corresponding classes or use custom elements as Ved has already mentioned.
ok, I added !important to the end and that works:
.ui-icon-customicon {
background-color: #000000 /*{global-icon-color}*/;
background-color: transparent /*{global-icon-disc}*/;
background-image: url(images/icons-18-white.png) !important/*{global-icon-set}*/;
background-repeat: no-repeat;
-webkit-border-radius: 9px;
border-radius: 9px;
}
How can I change color and other attributes of the jquery ui dialog box title
HTML :
<div id="dialog" title=""
style="display: none; font-size: 15px; width: 500; height: 300"></div>
javascript :
$( "#dialog" ).dialog( "option", "title",title );
Please give me some idea to customize the title of jquery dialog.Thank you in Advance.
These classes shape the container of the dialog box title
ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix
This class shapes the text
ui-dialog-title
You could edit these classes in the css file for the jquery ui style. Or you could overwrite these in your own css file.
.ui-dialog-title{
font-size: 110% !important;
color: #FFFFFF !important;
background: #000000 !important;
}
The "!important" might not be necessary.
You can find this out yourselves using developer tools.