I have a button, by default it adds the class ui-btn-corner-all. How can I tell it not to use that, as I just want square edges or force another style on there I've created?
<div data-role="content" data-theme="home">
Content
</div>
Live Example:
http://jsfiddle.net/SCw8e/3/
HTML:
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Button w/ jQM Style
Button wo/ rounded corners jQM Style
Button wo/ icon jQM Style
Button wo/ icon/rounded corners jQM Style
</div>
</div>
JS:
$('#default-button-style-1').removeClass('ui-btn-corner-all');
$('#default-button-style-2').removeClass('ui-btn-icon-left');
$('#default-button-style-3').removeClass('ui-btn-icon-left ui-btn-corner-all');
You can use jQuery function removeClass('ui-btn-corner-all'). There are no other ways to do what you want.
Related
I'm trying to prevent close of fancybox when someone click outside of fancybox-content area.
HTML:
<div id="banner-message" style="display: none">
<p>Hello World</p>
</div>
JS:
jQuery.fancybox.open(jQuery('#banner-message'), {
clickOutside: false
});
DEMO:
https://jsfiddle.net/xjw4b5jq/
You have to use clickSlide option instead.
fancybox3 works as a slider and you can reposition/resize slider area, therefore there are two similar, but different options.
I have used this config to prevent closing the modal clicking outside.
<!--HTML-->
<a id="enlace" href="#modal">enlace</a>
<div id="modal">
<p>Hola cracks</p>
</div>
// script
$("#enlace").fancybox({
clickSlide: false,
clickOutside: false
});
hope it works for u too :)
I have added a paragraph in the slider.
<div>
<a>
<img src="image.jpg"/>
<p>Some texts</p>
</a>
<div>
The paragraph is display on top of the image.The slider works fine after finishing loading the whole page. However, when the page is loading, I can see all of the paragraph for each slide show in the same time. I only want it shows the first slide paragraph when loading. Can anyone please help?
You can display only one slide and hide all other slides (by specifying style="display: none;") at the beginning.
<div u="slides" ...>
<div>
<a>
<img src="image.jpg"/>
<p>Some texts</p>
</a>
<div>
<div style="display: none;">
...
<div>
</div>
Or you can use jssor slider no-jquery version, it will initialize jssor slider immediately without waiting for page load.
I am trying to achieve the following with Twitter Bootstrap:
I would like to have a simple <input> field and a simple <button> on one single line or row in Twitter Bootstrap. They should cover the entire width of the column/parent container (ie be of the same width as span12). I do not want to give the button a fixed with - I want the button to be fluid width (width determined by the button text). The input field should use the remaining space left of the button.
Here is a fiddle: http://jsfiddle.net/MgcDU/3202/
The fiddle shows the button aligned to the right.
Now: how do I get the input field to extend to the very left edge of the parent container?
I would like to retain the responsiveness, of course.
Any ideas? I do prefer a non Javascript based solution!
Done
http://jsfiddle.net/MgcDU/3251/
Using approach from here:
http://boulderinformationservices.wordpress.com/2011/02/02/input-field-and-submit-button-on-the-same-line-full-width/
<div class="container">
<div class="row">
<div style="width:100%;background-color:#d0d0d0;text-align:center;">Example of a Full row</div>
</div>
<div class="row">
<div class="span12">
<div class="pull-right">
<form class="form-inline">
<button type="submit" class="btn" style="float:right;">Button</button>
<div style="overflow: hidden; padding-right: .3em;">
<input style="height:1.6em;width:100%" type="text" placeholder="full width minus button width" />
</div>
</form>
</div>
</div>
</div>
</div>
You could get the width of the button with jQuery, and get the width of the parent span12 then set the input width to be the difference of the two.
I don't think there is any other way if the button width has to be dynamic.
I'm using the form navbar-search. I want to have an "advanced search" modal that opens from a link within the navbar.
If I put the modal div within my tag in the navbar, when the modal opens it is behind the darkened area that is normally outside of the modal window. Clicking anywhere closes the modal and the darkened mask.
I can fix this by moving the modal div outside of the navbar (and, thus, outside of my form) but then it breaks my form functionality. The advanced search modal is supposed to function as an extension of the form field directly in the navbar but if I use two different forms to fix the modal problem, the forms don't work together any longer. Does that make sense?
If I enclose the entire nav bar plus my modal (which is outside the navbar) in a tag, it works but screws up some of the navbar formatting so I'm thinking this is not a very clean solution.
So, I either need to a way to fix the modal display issue or a way to make my form situation work properly (as in, linking two forms together without having a ton of duplicate markup for hidden fields and the like).
Thanks for any ideas!
Matt
Here is what I have now (which I've gone ahead and just adjusted css afterward to make things line up). I don't think it is semantically correct according to how bootstrap's navbar is supposed to be used, but my form is working correctly and that is a big deal to me. :)
<form>
<navbar></navbar>
<modal></modal>
</form>
I am a little unsure what you are asking, but this is a stab at what I think you are asking. The modal does not actually need to put the code for the modal in the form itself. The only thing you need in the navbar is the link and trigger activating the modal.
<form>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Advanced Search</li>
</ul>
</div>
</div>
</form>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Advanced Search</h3>
</div>
<div class="modal-body">
<p>Put your search fields here. </p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Search</button>
</div>
</div>
See working link.
http://jsbin.com/ifaqaj/1/edit
I'm trying to use jQuery show and hide which seem to work ok in Safari, when I try it on the iPhone, it doesn't work at all. Here is my code;
<script type="text/javascript">
$("#showSearch").click(function () {
$("#searchform").show(1000);
});
</script>
It's a button that when clicked, will show the search form. The form doesn't show on iPhone. Also when I add $('#showSearch').remove(); in there, it doesn't get removed, even if I add a function as the second parameter of show() it still doesn't hide the button.
Thanks for your help.
jQuery Docs:
http://api.jquery.com/show/ (Shows)
http://api.jquery.com/hide/ (Hides)
http://api.jquery.com/remove/ (Deletes)
http://api.jquery.com/toggle/ (Show/Hide)
Live Example:
http://jsfiddle.net/qQnsj/1/
JS
$('#viewMeButton').click(function() {
$('#viewMe').toggle(); // used toggle instead of .show() or .hide()
});
$('#removeMeButton').click(function() {
$('#removeMe').remove();
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<div id="viewMe">
Hello I'm in the div tag, can you see me?
</div>
<br />
<button id="viewMeButton">Show / Hide</button>
<br />
<div id="removeMe">
Click the button to remove me
</div>
<br />
<button id="removeMeButton">Remove Me</button>
</div>
</div>
I know this is an old question, but I recently had a similar problem. Hopefully this will help someone else if they find this question, too.
I was trying to hide a set of ui-block-* elements in a JQM grid. On the same grid cells, my media query for the iPhone was setting display: block !important. That was winning.
The !important directive was unnecessary in my case and when I removed it the calls to hide() and show() began working as expected.