I am using jquery.mobile-1.1.0 for a PhoneGap application. I am getting issue in button css. Jquery has its own button styling but I don't want to use that and want have my own button css. I am also using few jQuery components like tabs, form-search that use jQuery-mobile css so I have to include it in my application.
Here is my html code:
<div data-role="content">
<div class="signup">
<form action="#" id="loginForm">
<fieldset>
<ul>
<li class="first">
<label><span>Email*</span></label>
<input name="loginemail" type="text" id="loginemail" class="input" placeholder="Enter Full Name" />
</li>
<li>
<label><span>Password*</span></label>
<input name="loginpassword" id="loginpassword" type="text" class="input" placeholder="Pick A Password" />
</li>
<li>
<input name="" type="submit" id="loginSubmit" class="button" value="Login" />
</li>
</ul>
</fieldset>
</form>
</div> <!-- signup- div -->
</div><!-- - content -->
</div> <!-- end login page -->
Source while doing inspect element in Firebug jQuery creates an outer layer against that button that eventually disturb my whole button css.
<li><div aria-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all
ui-fullsize ui-btn-block ui-btn-up-c" data-mini="false" data-inline="false"
data-theme="c" data-iconpos="" data-icon="" data-wrapperels="span"
data-iconshadow="true" data-shadow="true" data-corners="true">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Login</span>
</span>
<input aria-disabled="false" name="" id="loginSubmit"
class="button ui-btn-hidden" value="Login" type="submit"></div></li>
Here is my customized button class for css
.button{ width:100% !important; height:69px !important;
float:left !important;
font-size:24px !important;
font-family:"MyriadPro-BoldCond_0",Arial, Helvetica, sans-serif !important;
color:#FFFFFF !important; text-align:center;
background:#ca2c00 !important; border:none !important;
background:-moz-linear-gradient(#ca2c00, #7a1a00) !important;
background: -webkit-gradient(linear, left top, left bottom, from(#ca2c00), to(#7a1a00)) !important;
-pie-background: linear-gradient(#ca2c00, #7a1a00) !important;
background: -o-linear-gradient(#ca2c00, #7a1a00) !important;
-moz-border-radius:0 0 7px 7px !important;
-webkit-border-radius:0 0 7px 7px !important;
border-radius:0 0 7px 7px !important; behavior: url(PIE.htc) !important;
position:relative !important;
cursor:pointer !important;}
Please help. How can I stop jQuery from creating an outer shell around the button and allow it to pick my customized css. Thanks
In jquery mobile ,Input-based buttons and button elements are auto-enhanced, no data-role required. So you have two options to overcome this issue.
Edit the jquery mobile theme, or rather create a customized theme using Theme Roller. You can find the themeroller tool here.
Second option is to set data-role of the input button to none. Ex <input type="button" data-role="none" id="btnId" class="button">.
Hope it helped you.
-- MEJO
The .button class is used by jQuery Mobile, try to use another class name.
Related
my like buttons are above my page-body , they are in the right position but are aligned with and the code is ugly. I would also need to add a white background only to the like-buttons because I will make them float with the page if you will scroll down and for this I also need to set a "div id" to the like-buttons. How can I align the like-buttons with CSS in the same position they are now and set a "div id" to them ? I also need them to be aligned vertically because facebook button is a little bit lower than google and twitter.
For example, if you access this page: http://www.cumseface.eu/viewtopic.php?t=187 , you can see the like-buttons just below the ad. I`m a beginner at CSS and HTML so if you can help please be specific. Sorry for my bad english and thanks in advance.
And here is the HTML code that I`m using for the part with the buttons:
<div class="topic-actions">
<div class="buttons">
<!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO -->
<div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->"><span></span><!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED_SHORT}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF --></div>
<!-- ENDIF -->
</div>
<!-- IF S_DISPLAY_SEARCHBOX -->
<div class="search-box">
<form method="get" id="topic-search" action="{S_SEARCHBOX_ACTION}">
<fieldset>
<input class="inputbox search tiny" type="text" name="keywords" id="search_keywords" size="20" value="{L_SEARCH_TOPIC}" onclick="if(this.value=='{LA_SEARCH_TOPIC}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_TOPIC}';" />
<input class="button2" type="submit" value="{L_SEARCH}" />
{S_SEARCH_LOCAL_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
<!-- ENDIF -->
<div class="text-align: center;"> <fb:like href="{U_PAGE_URL}" show_faces="false" data-href="https://developers.facebook.com/docs/plugins/" data-width="500" font="arial" data-layout="button_count"></fb:like>
<div class="g-plusone" data-size="medium"></div>
Tweet
<!-- IF PAGINATION or TOTAL_POSTS -->
<div class="pagination">
<!-- IF U_VIEW_UNREAD_POST and not S_IS_BOT -->{L_VIEW_UNREAD_POST} • <!-- ENDIF -->{TOTAL_POSTS}
<!-- IF PAGE_NUMBER --><!-- IF PAGINATION --> • {PAGE_NUMBER} • <span>{PAGINATION}</span><!-- ELSE --> • {PAGE_NUMBER}<!-- ENDIF --><!-- ENDIF -->
</div>
<!-- ENDIF -->
</div>
</div>
<div class="clear"></div>
EDIT: I edited the code to look like this:
<div id="likebuttons"><fb:like href="{U_PAGE_URL}" show_faces="false"
data-href="https://developers.facebook.com/docs/plugins/" data-width="500" font="arial" data-layout="button_count"></fb:like>
<div class="g-plusone" data-size="medium"></div>
Tweet
</div>
And added CSS like this:
#likebuttons {
margin-left: 147px;
width: 350px;
background: #FFF;
text-align: center;
float: left;
padding: 2px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px;
z-index: 10;
}
But the "Facebook" button is not in line with others 2. Can that be solved ? Thank you.
SOLVED: with the facebook button, added this code in CSS:
.fb_iframe_widget { vertical-align:top;}
There is a great website for this. I use it all the time:
Its called Share This:
http://www.sharethis.com/get-sharing-tools/#sthash.0aAa3jqv.dpbs
Get the code for the buttons on your website it will look something like this:
<span class='st_sharethis_hcount' displayText='ShareThis'></span>
<span class='st_facebook_hcount' displayText='Facebook'></span>
<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_linkedin_hcount' displayText='LinkedIn'></span>
<span class='st_pinterest_hcount' displayText='Pinterest'></span>
<span class='st_email_hcount' displayText='Email'></span>
Then with css you can style those respectively the way you want it.
UPDATE:
In your code you have an error:
<div class="text-align: center;">
text-align:center; is a style not a class... you need to first make to say
<div style="text-align: center;"> or make it a class and add styles in your css:
Next, remove all the in the code near the buttons.
Then add this to your css to style the FB like button and twitter to give it some margin:
.fb_iframe_widget {margin-right:25px;}
.twitter-share-button {margin-left:25px;}
I am trying to make two hyperlinked buttons go side by side. I saw this question but can not make the answers work. Below are my two attempts to make the buttons go side by side. The first attempt works but hyperlinks to the wrong location. The second one hyperlinks correctly but is not side by side. The third based on this question doesn't link anywhere but I think that has to do with using links instead of Javascript:submitRequests().
<!DOCTYPE html>
<html>
<body>
<head>
<style>
.container {
overflow: hidden;
}
button {
float: left;
}
button:first-child {
margin-right: 5px;
}
</style>
</head>
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
</form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
Attempt 1
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
</form>
Attempt 2
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
</form><form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
Attempt 3
<div class="container">
<button onclick="http://trinker.github.io/qdap_dev/paste2.html">paste2</button>
<button onclick="http://trinker.github.io/qdap_dev/colSplit.html">colSplit</button> text
</div>
</body>
</html>
If you just need plain links to work, just use links and style them to look like buttons (see also Styling an anchor tag to look like a submit button):
<style>
.button {
appearance: button;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
font: menu;
color: ButtonText;
display: inline-block;
padding: 2px 8px;
}
</style>
<div class="container">
paste2
colSplit text
</div>
You could also do <button>paste2</button> but this is not actually legal HTML5. FWIW, Firefox does seem to render it correctly though.
buttons would line up side by side automatically since they're display: inline-block by default (I think). I'd remove the float: left since it could be causing some issues when nesting.
You should never nest forms. It'll lead to some really screwy things.
However, if you want two forms side by side you can make them do that by adding display: inline to them. Here's a small demo: http://jsbin.com/UgaMiYu/1/edit
The onclick attribute should't make any difference at all.
I just tried to add css to attempt 2. how about this:
HTML:
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2"/></form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit"/>
</form>
CSS:
form{
float:left;
}
DEMO: http://jsfiddle.net/uzDZN/
NOTE: Add class to form which has this buttons. Otherwise css may effect other form elements in website.
Utilizing regular buttons and setting their display property to either inline or inline-block worked for me.
PROBLEM:
The user is able to utilize the "tab" key to navigate thru the page and land on the "tabs" panel. However, when they initially land on the "tabs" panel - there is no visual indication (outline/highlight/etc) that they are there.
-As a result, they think their tab key (or the tab panel) is not working correctly.
Notes:
My suspicion is that this new behavior is due to a CSS change that occurred when upgrading from 1.8.x to 1.10.x - But, of course, I'm not sure.
I've tried various css entries to cause the focused tab to visually outline/highlight...-So far, one that appears to have a visual effect on the tab is this selector:
.ui-widget :focus
{
border-style: inset !important;
border-width: 5px !important;
}
...But, this selector is too broad and impacts other widgets on the page that are outside of the tabs() DIV. --I only want to "highlight" focused tabs within the "tabs" DIV.
Question:
How can I build a CSS selector that will highlight/outline a focused tab, while not effecting other non-tab widgets?
(Thanks for your help)
jquery script
$(document).ready(function() {
$('#tabdiv').tabs(); //<== tabs
$( "input[type=submit], a, button" ).button().click(function( event ) {event.preventDefault();});
$( "#datepicker" ).datepicker();
});
css
.ui-widget :focus
{
border-style: inset !important;
border-width: 3px !important;
}
HTML snippet
<div>
<h1>body-A</h1>
<div id="tabdiv">
<ul>
<li>TabA</li>
<li>TabB</li>
<li>TabC</li>
<li>TabD</li>
</ul>
<div id="tabA">
<div>
<span>tabA stuff</span>
</div>
</div>
<div id="tabB">
<div>
<span>tabB stuff</span>
</div>
</div>
<div id="tabC">
<div>
<span>tabC stuff</span>
</div>
</div>
<div id="tabD">
<div>
<span>tabD stuff</span>
</div>
</div>
</div>
<div>
<p>Date: <input type="text" id="datepicker" /></p>
<button>A button element</button>
<input type="submit" value="A submit button" />
An anchor
</div>
</div>
You could use the following selector
[id~=tab]:focus
It appears that to following works...
.ui-widget#tabdiv :focus
{
border-style: inset !important;
border-width: 3px !important;
}
Thanks!
I am using jquery mobile. I have defined a background image in index page inside css body{} tag. Back ground is coming fine but it's automatically loading in different pages also though I didn't declare the body css part in following pages. How to prevent that? and css body{background: url()} is only working on index page. here is my code
<style type="text/css">
body {
background: url(images/login2.png);
background-repeat:repeat-y;
background-position:center;
background-attachment:scroll;
background-size:100% 100% ;
}
.ui-page {
background: transparent;
}
.ui-content{
background: transparent;
}
</style>
</head>
<body>
<div align="center" data-role="fieldcontain" id="contentConfirmation" name="contentConfirmation">
<div >
<label class="userlabelclass" for="url" style="float:left" ><p>Username:</p></label>
<input class="userfieldclass" id="Lusername" name="uid_r" type="text" value="John Doe" " style="width:230px;float:right">
</div>
<div >
<label class="pswdlebelclass" for="url" style="float:left"><p>Password:</p></label>
<input class="pswdfieldclass" id="Lpassword" name="pwd_r" type="password" value="123456789" style="width:230px;float:right">
<label class="forgotclass" for="url" style="float:left"><p>Forgot Password?</p></label>
</div>
<div align="center">
<a href="listview_page.html" data-role="button" data-inline="true" data-theme="e" class="buttonclass" >Log In</a>
</div>
</div>
</body>
Jquery mobile navigation uses Ajax to load the body part only of the pages you navigate to. This means that the header of subsequent pages is ignored, and that the header of your first page is "applied" to all pages. If you want your background to apply only to your first page, I would recommend:
you create a data-role="page" div to hold the content of your first page, as recommended when using jquery mobile
You apply your background to this specific page element
In my ASP.net page, which does have scroll bar, I have placed a customized control in which I have used a HTML check box (it's like hierarchical structure).
When I scroll down the page (to reach to that control) and then I select any item from that check box, the page scrolls up to the top of the page, without causing post back.
How can I stop the scrolling issue from happening?
Note: It only happens with Firefox, it doesn't happens on other browsers i.e IE 8/9 & Chrome.
This is my customized control, which I have used in My another asp.net page,is when i check any of the bellow items. it causes scroll up of page.
<asp:Panel ID="TreeViewPanel" runat="server" style="border: 1px solid #CCC; width: 210px; padding:5px 0;">
<ul id="tree">
<li>
<label>
<input type="checkbox" value="treeHdrCheck1" runat="server"/>Win Exe
</label>
<ul>
<li>
<label>
<input type="checkbox" value="1" runat="server"/>.EXE</label></li>
<li>
<label>
<input type="checkbox" value="2" runat="server"/>.DLL</label></li>
<li>
<label>
<input type="checkbox" value="3" runat="server"/>.OCX</label></li>
<li>
<label>
<input type="checkbox" value="4" runat="server"/>.SYS</label></li>
<li>
<label>
<input type="checkbox" value="5" runat="server"/>.SCR</label></li>
</ul>
</li>
Are you styling your checkboxes?
If you use CSS like
label {
display: block;
overflow: hidden;
}
label input[type="checkbox"] {
position: absolute;
left: -10000px;
top: -10000px;
}
to hide the actual input element from the containing label, then you may need to remove the top: -10000px; part, because Firefox seems to be wanting to scroll the input element into view.