jQuery UI buttons/buttonsets are giving me fits. I have searched this site for answers, and still do not have a an answer that works well. I am using jQuery rev 1.11.1 and jQuery UI rev 1.9.2.
I have a buttonset of three buttons that my users click to choose 1 of 3 color themes available for use on their website. Once they click the button, I show a sample website banner with the selected color theme to the right of the button set. So I am basically swapping out an image based on their selection.
Relevant HTML:
<div style="float:left; width: 275px;">
<label for="radio">Your Club Website Color Theme</label>
<div id="colortheme">
<input type="radio" style="float:left;" id="colortheme1" name="colortheme" value="1" {{ct1}} ><label for="colortheme1">Theme 1</label>
<input type="radio" style="float:left;" id="colortheme2" name="colortheme" value="2" {{ct2}} ><label for="colortheme2">Theme 2</label>
<input type="radio" style="float:left;" id="colortheme3" name="colortheme" value="3" {{ct3}} ><label for="colortheme3">Theme 3</label>
</div>
</div>
<div style="margin-left:300px;">
<img id="bannerSample" src="/images/club{{BannerTheme}}.jpg" style="max-width:100%">
</div>
Relevant Javascript:
jQuery("#colortheme input:radio").click(function(e){
me.$form.hide();
jQuery("#bannerSample").attr('src','/images/club'+this.value+'.jpg');
me.$form.show();
});
Note: {{ct1}}, {{ct2}}, & {{ct3} are patched in by the Perl server code; me.$form is just a jQuery object for the form set above the code snippet above. This buttonset is located in a tab panel inside a jQuery UI dialog. The problem is that I am getting unintended scrolling down in the dialog when I click one of the buttons in the button set. I have tried all the usual solutions, e.preventDefault(), e.stopPropagation(), return false, .on(), etc., based on research on this and other websites. Cannot find the right solution or combination to stop the unwanted scroll. The above is the best thing I could come up with. It still scrolls down on the first click, but after that, it just flashes as it updates the image.
Can anyone recommend a better approach?
The issue for me was caused by a conflict in css. Specifically the class 'ui-helper-hidden-accessible' has a position of absolute which for some reason causes the scrolling behavior.
I chose to create a more specific rule in my own stylesheet to supercede the default jquery-ui css:
.ui-buttonset .ui-helper-hidden-accessible{
position:relative;
}
Alternatively, you could use display:none but I wasn't sure if that would have unintended consequences in other browsers. I chose this route rather than rewriting the jquery-ui rule because I wasn't sure if there were specific use cases for other ui elements where a position of absolute will be needed and I didn't want to have to remember not to overwrite the css if I update.
I figured this out through a wordpress bug ticket https://core.trac.wordpress.org/ticket/23684 although it should be noted that I am not working on a wordpress site so the solution posed is independent.
Related
I'll try my best to explain what is going on as it is quite strange. Previous to making some changes on our website (this wasn't touched) this worked perfectly I am currently having 2 unexpected errors with Radio buttons in JQuery when I use .buttonset()
We currently have a multistep form, on the second step we use details from the first step to provide a list of service providers to the client where they can select which one they would like to use.
We use ajax to return HTML that is placed inside radio-group div. Example of HTML below:
<input type="radio" value="1" name="cleaner-select" id="cleaner-select-1" class="cleaner_selection ui-corner-left">
<label for="cleaner-select-1" class="cleaner-selection-box col-md-2 col-xs-12">
<div class="col-md-12 col-xs-12 center fivepxpad">
<button type="button" class="btn btn-default btn-primary" onclick="view_profile(1)"> View Cleaner Profile <span class="btn-icon-right icon-circle-right"></span></button>
</div>
<div class="col-md-12 col-xs-12 cleanerproducts">
<span class="icon green icon-leaf fontsize16"></span> Eco / Natural Products
</div>
<div class="col-md-12 col-xs-12">
<span class="icon icon-shield cleanerverified"></span> Verified
</div>
<div class="col-md-12 col-xs-12">
<span class="icon icon-location"></span> Close-By
</div>
</label>
This is placed inside a DIV below:
<div id="radio-group" class="center">
</div>
Using this JQuery
$('#radio-group').html(result[1]);
$('#radio-group').buttonset();
Current Errors:
When buttonset is called the values of all the radio inputs are removed. eg. changes from value="1" to just value. This didn;t previously happen, I know buttonset is causing this because when I remove $('#radio-group').buttonset(); the value stays just fine (no error in HTML).
When buttonset is applied to the parent div "radio-group" it receives ui-buttonset class as expected but nothing else happens, the input radio buttons are still visible, the colours aren't showing when selected and the labels stay white (meant to be a slight grey colour) but when the labels are clicked on the correct raido input is selected.
On our last update we joined a few CSS files and JS files together but kept everything in the same order that it was previously loaded in. This was to reduce the amount of calls we had to make and everything else is working fine so not entirely sure this is causing it. We also get no console errors.
Things I've tried:
Changed $('#radio-group').buttonset(); to $('#radio-group').button();
Called $('#radio-group').buttonset(); in document.ready and tried $('#radio-group').buttonset('refresh); when HTML changes
$('#radio-group').buttonset('refresh); by itself
Double checked all CSS and JS. (JQuery-UI .js and .css is included)
I'm about to try switching back to our old header and footer files (where more calls are made) to see if that fixes it but if anyone knows what is going on, any help / ideas / advice would be appreciated.
I can't seem to find anyone with a similar issue and I've been working in this for hours it's doing my head in. If you need anymore info let me know.
I'm trying to add field validation to a "Contact Us" form using Bootstrap and a validation library (a jQuery Plugin) called Validetta (http://lab.hasanaydogdu.com/validetta/).
After implementing the form and the validation, though, I am noticing a problem with the z-index of the tooltip that causes it to show up beneath the next form field.
If I were dealing with normal HTML and CSS, I think the answer would be a little more clear to me, but with Bootstrap, I do not know what sort of mysticism is afoot and am having trouble finding answers on how to solve this problem in the best-practices way.
I know that Validetta is adding a <SPAN> after the form field and is applying a custom CSS class to it, which I can easily modify, override, or append. I've also read, in other contexts, that this problem can be solved using a combination of z-index and position on the tooltip SPAN and one or more of its parent elements... but all of my quick tests and trials have not had the desired affect.
Here's the rendered HTML for the form field shown above:
<div class="form-group has-feedback has-error">
<label class="control-label" for="inputFromName">Your Name</label>
<input type="text" class="form-control" id="inputFromName" name="fromName" placeholder="Your Name Here" data-validetta="required" data-vd-message-required="This field is required!">
<span class="validetta-bubble validetta-bubble--bottom">This field is required!<br></span>
</div>
Any help would be much appreciated!
you may check the z-index attribute on parent elements of "validetta-bubble" ;
because z-index judge from parent to child, if a parent has a lower z-index while child elemtn has a higher this element's z-index finally work base on the parenet's
you may try to set form-group's z-index
.form-group {
z-index: 10000;
position: relative;
}
and set a higher on target like answer 1
.crazy-zindex {
z-index: 10001;
}
Ultimately, I found the answer to this question here: z-index of hover tooltip with CSS
The answer from Панайот Толев provided this example:
<div class="level1">
<span class="level2"> 1 </span>
<span class="level2"> 2 </span>
<span class="level2"> 3 </span>
</div>
So, to solve the problem, I wrapped each row of form elements in a div that specified a z-index in the style attribute. As I went down the rows, I decreased the z-index value, like so:
<div style="z-index: 23;"> .. </div>
<div style="z-index: 22;"> .. </div>
<div style="z-index: 21;"> .. </div>
This ensured that each row fell "behind" the one above, which allowed tool-tips to appear on top of the fields (and labels), rather than beneath them.
I had same issue.
When no other script solved my problem. Then I had used parent class as data-container.
For exp.
<ul id="responsivator">
<li data-placement="bottom" data-toggle="tooltip" data-container="#responsivator" title="iPhone landscape Preview" >
</ul>
I would add a custom class like crazy-zindex (I'm sure you can come up with a better name) and a rule in the css for it.
HTML
<span class="validetta-bubble validetta-bubble--bottom crazy-zindex">This field is required!<br></span>
^^^^^^^^^^^^
CSS
.crazy-zindex {
z-index: 10000;
}
Its important to remember that CSS is cascading, so the last rule will overwrite anything above it, with this said, any overwrites you want to do to bootstrap you'll have to link that stylesheet after bootstrap. Or you can use !important but that's not good practice.
i'm working on a HTML5/bootstrap app that need for several reason to be a single page app.
i'm looking on a way to 'simulate' multipage on a single page
for example to hide "customer" "partner" "subscriver" section when profile section is shown
i'dont want that users can scroll down from one section to another
i really need to have a single page, so librairy like pagify doen't work and iframe doesn't work as well
any idea ?
thanks
Why not something like: http://getbootstrap.com/javascript/#collapse If you use Bootstrap you can hide and show div's on the fly.
Greets,
Michel
If I understand your problem correctly, you want to keep everything on one page, but only show one section at a time. You can do this with javascript by hiding all the divs using CSS, then setting each nav button click to show the corresponding div:
<input type="submit" id="custbtn" value="Customers" />
<input type="submit" id="partbtn" value="Partners" />
<input type="submit" id="subbtn" value="Subscribers" />
<div id="customer">
Customer stuff
</div>
<div id="partner">
Partner stuff
</div>
<div id="subscriber">
Subscriber stuff
</div>
$("#custbtn").click(function(){
$("#customer").show(1000);
$("#partner").hide(1000);
$("#subscriber").hide(1000);
});
$("#partbtn").click(function(){
$("#customer").hide(1000);
$("#partner").show(1000);
$("#subscriber").hide(1000);
});
$("#subbtn").click(function(){
$("#customer").hide(1000);
$("#partner").hide(1000);
$("#subscriber").show(1000);
});
Fiddle
I have a form element (a checkbox) that I have added to a UI form. When the page is rendered, the Chrome F12 debugger shows that display: none; has been added as a style; i.e.,
element.style {
display: none;
}
... is seen in the Styles pane of the Chrome debugger for the <input> element on my form. (In fact, it is not even possible for me to uncheck this style in the Styles pane of the Chrome debugger - the checkmark stays frozen in place - even though I can easily uncheck other style entries.)
Here is (what I think is) the relevant HTML:
...
<div class="box">
...
<form id="edit-dish" action="..." method="post">
<div class="form">
...
<p>
<input id="one-label-per-serving"
name="ingredient[one_label_per_serving]"
type="checkbox"
autocomplete="off"
class="checkbox checkbox-inline validate[required]"
<?php if ( Arr::get($dish, 'one_label_per_serving', FALSE) ): ?>
checked="checked"
<?php endif; ?> />
<span class="checkbox-label">One label per serving</span>
</p>
...
</div>
...
</form>
...
</div>
...
The dots represent things I've left off that I hope & think are not relevant.
The <span> element is displayed just fine. But, the <input> checkbox has the display: none; added to its inline style immediately upon page load.
There is also a sidebar, header, and footer being automatically included by a template.
I have some confidence that one of the included Javascript libraries is causing the problem. Here are the loaded Javascript libraries (according to Chrome's debugger):
jquery.min.js
jquery-ui.min.js
jquery.tmpl.min.js
fileuploader.js
jquery.form.js
jquery.reveal.js
jquery.validationEngine-en.js
jquery.validationEngine.js
jquery.wysiwyg.js
master.v2.js // <-- this is the application's custom script
The master.v2.js is the application's custom script. Searching inside it, I find nowhere that it is setting display: none; for this element.
Does anyone have any suggestions about either what Javascript file might be setting display: none;, or how to go about debugging this?
Thanks.
The culprit was a call to toggle() that was matching the element in question inside the application's custom Javascript file.
As #koala_dev noted in a comment, it is important to search for hide() when searching for potential locations where display: none; might be added. But, it is also important to search for toggle().
I am answering my own question in case others in the future run into this issue.
I had this happening to me as well and it was caused by Adblocking extensions in Google Chrome.
In my case the culprit was the the use of fadeIn(100).fadeOut(100). I actually wanted to give a blinking animation on a click. I only needed to use
$("#id").fadeIn(100).fadeOut(100); // that's when the problem occurred.
Solution:
$("#id").fadeIn(100).fadeOut(100).fadeIn(100);
Didn't actually need the second fadeIn(100) though.
But it solved my problem. Still confused how it could solve the issue.
I have very little experience with CSS.
I'd like to style the default JQuery Checkboxes to move the checked icon from left to right.
I have used my badass Paint skills to illustrate what I'm looking for.
So I'm not asking for someone else to do the job, just some pointers in the right direction.
What would be the best way to achieve this ?
Thank you !
jquery-mobile v1.0 has a custom data attribute that you can use to adjust icon positioning. This includes checkboxes, radio buttons, nav bars, and other elements.
Documentation:
http://code.jquery.com/mobile/latest/demos/docs/buttons/buttons-icons.html
To create the checkbox you've drawn in your question above, your code would be:
<input type="checkbox" name="checkbox-name" id="checkbox-id" />
<label for="checkbox-id" data-iconpos="right">I agree</label>
Notice that data-iconpos is applied to the label. That's because jQuery Mobile styles this element heavily to act as the UI element in the front-end. In other words, with this attribute, you're positioning the checked/unchecked icon to the right side of the label.
Note: If you attempt to workaround this attribute and add class="ui-btn-icon-right" to your elements, jQuery Mobile may drop those classes when the page renders.
Try looking at the rendered output after jQuery Mobile parses your code using Firebug.
You will be able to see the structure and classes added to the form element. The class names added by jQuery Mobile are pretty strait-forward to understand.
--UPDATE--
Here is the HTML from firebug for the jQuery Mobile documentation for check-boxes:
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<fieldset data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical"><div class="ui-controlgroup-label" role="heading">Agree to the terms:</div><div class="ui-controlgroup-controls">
<div class="ui-checkbox"><input type="checkbox" class="custom" id="checkbox-1" name="checkbox-1"><label for="checkbox-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-corner-top ui-corner-bottom ui-controlgroup-last ui-checkbox-on ui-btn-up-c"><span class="ui-btn-inner ui-corner-top ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">I agree</span><span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"></span></span></label></div>
</div></fieldset>
</div>
Notice the "ui-btn-icon-left" class, I'd play with that, you may not just be able to change it to "ui-btn-icon-right" but you can play with the structure. I've done this for other elements however I have not tested with check-boxes.
This is now part of JQM using the standard APIs by setting data-iconpos="right"
See http://demos.jquerymobile.com/1.4.3/checkboxradio-checkbox/#Iconposition for more details