I have a control group with checkboxes that I want them to be hidden initially, which I achieved with css, during runtime I would like to show those checkboxes at a certain time, but only from the control group that I specify because there are many of them on the page.
The problem that I'm having is to select the visual checkbox since it is being rendered as a "::after" text and I don't know how to select it using JQuery.
<div data-role="controlgroup" id="test-list">
<label for="id1">
<a href="#" onclick="alert('The list item has been clicked.'); event.stopPropagation(); return false;">
<h2>Title</h2>
<p>Description Text</p>
</a>
</label>
<input type="checkbox" id="id1" />
</div>
will render as:
<div class="ui-checkbox">
<label for="id1" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off ui-first-child">
<a href="#" onclick="alert('Clicked'); event.stopPropagation(); return false;" class=" ui-link">
<h2>Title</h2>
<p>Description</p>
</a>
::after <!-- This is what renders as the checkbox -->
</label>
<input type="checkbox" id="id1" name="p1">
</div>
I tried a few tricks but can't select the "::after" which is what draws the checkbox inside the list.
$("#test-list label").first().next()
$("#test-list label").children().eq(0).next()
The css when the page loads to hide them:
.ui-btn.ui-checkbox-off:after, .ui-btn.ui-checkbox-on:after
{
visibility: hidden;
}
jQuery cannot access pseudo elements like :after because they are not really in the DOM. You might get what you want by adding and removing a class that hides the :after element. First create a new CSS class:
.hiddenCheck:after {
display: none !important;
}
Then apply it to the <label> that jQM creates for the checkbox:
$("#id1").parents(".ui-checkbox").find("label").toggleClass("hiddenCheck");
NOTE: different selectors can get you there (e.g. closest(), etc.).
DEMO
Click the button to hide/show the checkbox...
Related
I've got a spoiler-code on my Homepage.
The Code looks like this:
<div id="spoiler" style="display:none">
HIDDEN CONTENT HERE
</div>
<a display="initial"
id="button"
title="Click to show/hide content"
type="button"
onclick="if(document.getElementById('spoiler')
.style.display=='none') {
document.getElementById('spoiler')
.style.display=''
}else{
document.getElementById('spoiler')
.style.display='none'
}">
Show hidden content
</a>
What I want to do now is quite simple:
After clicking on the element "button", the hidden content shall be shown and the anchor <a> shall become invisible.
So what I am looking for is:
onclick: if element "spoiler" is on display=none AND element "button" is on display=initial THEN the element "spoiler" shall change to display=initial AND element "button" shall change to display=none
Is this possible?
This code in jquery will solve your problem. I hope this is what you wanted.
$('#button').click(function() {
$('#spoiler').css('display', 'block');
$(this).hide();
});
I have demo here as well.
A JavaScript only solution will be as follows:
<div id="spoiler" style="display:none">
HIDDEN CONTENT HERE
</div>
<a display="initial" id="button" title="Click to show/hide content" type="button" onclick="document.getElementById('spoiler').style.display='block';
document.getElementById('button').style.display='none'">Show hidden content</a>
Try following code. JSFiddle.
<div id="spoiler" style="display:none" onclick="this.style.display='none';">
HIDDEN CONTENT HERE
</div>
<a display="initial" id="button" title="Click to show/hide content" type="button" onclick="document.getElementById('spoiler').style.display='block';">Show hidden content</a>
display="initial" isn't a valid attribute. Also, putting all of that code in the onclick attribute prevents you from reusing the code in other spoiler blocks. The best solution is to use a script tag for separation of concerns and reusability.
Here's the bare-bones of what you need:
<div id="spoiler" style="display:none">HIDDEN CONTENT HERE</div>
<a onclick="showSpoiler(this,'spoiler')">Show hidden content</a>
<script>
function showSpoiler(buttonNode, spoilerId) {
document.getElementById(spoilerId).style.display='block';
buttonNode.style.display='none';
}
</script>
I have an html form and having a little trouble getting the selected value on it, here is the html
<form>
<div class="row">
<div class="form-group col-xs-12 col-md-8">
<label>Contact Info</label>
<input tabIndex="100" class="form-control square" placeholder="Your email address" autocomplete="off" data-error-style="inline" name="email" type="text">
</div>
<div class="form-group col-xs-12 col-md-4">
<label>Gender</label>
<div class="drop-down-holder ">
<div class="simple-dropdown dropdown btn-dropdown dropdown-module dropdown-toggle"
data-toggle="dropdown"
type="button">
<button tabindex="101" class="dropdown-module dropdown-toggle" type="button" data-toggle="dropdown" data-target="#">
<div class="simple-holder">
<div class="dropdown-label">Select Gender</div>
<div class="icon-holder"><i class="icon-caret-down"></i></div>
</div>
</button>
<ul class="dropdown-menu" role="menu">
<li><a class="female">Female</a></li>
<li><a class="male">Male</a></li>
</ul>
</div>
</div>
</div>
</div>
</form>
I've tried a few things in console and keep getting empty strings
This is what I've tried
$(".dropdown-menu").text();
This one returns just the text female and male in a string
$(".dropdown-menu").val();
empty string
$(".dropdown-menu :selected").text();
also empty string
$(".dropdown-menu option:selected").text();
empty
$('.dropdown-menu option:selected').val();
undefined
So any clue on how I can get weather the user selected male or female? I need that value for a conditional statement that will redirect them to a certain page depending on their gender.
To cover your previous attempts:
$(".dropdown-menu").text();
.text() returns the .text values of all the element and its child elements, so gives you female and male
$(".dropdown-menu").val();
A ul doesn't have any val(), it's not an <input>
$(".dropdown-menu option:selected").text(); / .val();
A ul is not a <select> so won't have any child items of type <option>
Whatever plugin you are using to convert the ul/li to a 'drop down' will apply a class when you select one of the ul. For now, assume the class is selected, you'll likely need to use:
$(".dropdown-menu li.selected")
to get the li selected, then depending on requirements:
$(".dropdown-menu li.selected").text()
To find out the class that is applied, you could (hopefully) be able to find this in docs for the plugin. If that's not available (or unclear), use a browser (personally, I find Chrome easiest for this) - press F12, find the element and the associated styles, then select the item. The class names should change and you should be able to see this in the console.
Alternatively, there may be an event you can listen to (or your inherited code already listens to) which is fired when the item is clicked and should provide the details for the clicked item.
Hey guys figured out the answer
$(".dropdown-module").val();
this is the class of the button, since bootstrap uses divs and uls for dropdown I needed to target the dropdown-module
I've got a page with three tabs on it, each with different content. I also have a div with a select and a button. I would like this div to display on the first two tabs but not the third. I know one option would be to just duplicate the content on both tabs, but then I would have to keep their data in sync with javascript and I feel like there has to be a better solution than that.
So I tried putting the div between where the tabs are defined and where the tab content starts, which works fine, but it makes it show in all three tabs. In the javascript, I tried binding click events to the tab buttons
$("#pushingInfoTabButton").click(function () {
$("#addInspection").show();
});
$("#pushingInspTabButton").click(function () {
$("#addInspection").show();
});
$("#pushingGridTabButton").click(function () {
$("#addInspection").hide();
});
and showing the div in two tabs and hiding with the third, but after putting debugger inside of the click events, they never fire. Is there an easier way to do this that I'm just unaware of?
Here's the corresponding HTML. Sorry for not having it at first.
<div data-role="tabs" class="ui-content insetContent infoContent" >
<div data-role="navbar">
<ul>
<li><a id="pushingInfoTabButton" href="#pushingInfoTab" data-theme="a">Info</a></li>
<li><a id="pushingInspTabButton" href="#pushingInspTab" data-theme="a">Insp</a></li>
<li><a id="pushingGridTabButton" href="#pushingGridTab" data-theme="a">Grid</a></li>
</ul>
</div>
<div id="addInspection">
<div class="ui-block-a" style="width:30%;margin-right:0px;">
<a data-role="button" data-inline="false" data-theme="b" style="padding-left:0px; padding-right:0px;" id="A1">Add</a>
</div>
<div class="ui-block-b" text-align:right" style="width:70%; margin-left:0px;">
<select data-inline="true" data-native-menu="true">
<option value="" id="Option1">Select</option>
</select>
<a data-role="button" data-inline="true" data-theme="g" style="margin-left:-7px;" id="A2">Clr</a>
</div>
</div>
<div id="pushingInfoTab" class="ui-content insetContent infoContent">
</div>
<div id="pushingInspTab" class="ui-content insetContent infoContent">
</div>
<div id="pushingGridTab" class="ui-content insetContent infoContent">
</div>
Notice: Didn't put any of the content that's actually in the tabs, because it's hundreds of lines of unnecessary markup, and I don't think it's the issue.
There is a typo error here:
text-align:right" style="wi
Then, put the JS at the bottom of the body, or at jQuery Document Ready.
Here is the working demo.
I'm using some bootstrap related js that enables the use of checkboxes through html like:
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" name="checkboxA" checked="checked">
<i class="icon-unchecked checked"></i>
Item one checked
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" name="checkboxB" id="2">
<i class="icon-unchecked"></i>
Item two unchecked
</label>
</div>
Normally I could bind onto the input, but the script that handles this only changes the i checked css class. How do I do something on a change on the adding/removing of .checked on i?
Late to this but you would have to set a flag in the ViewModel and then based on the click switch your class with css binding.
<i class="checked" data-bind='css: { "nameOfYourCSS" : conditions_here } '></i>
Here's the example. I've set the css to the p tag instead because apparently you can't style checkboxes and that's exactly the reason why you might be using Bootstrap.
http://jsfiddle.net/jX6m2/3/
I am using Foundation CSS and need some help on the sections object. I have a tabbed section on my page
<div class="section-container tabs" data-section="tabs">
<section id="section1">
<p class="title" data-section-title>Step 1</p>
<div class="content" data-section-content>
<input type="text" id="firstname" placeholder="First Name">
</div>
</section>
<section id="section2">
<div class="content" data-section-content>
<input type="text" id="phone" placeholder="Phone">
</div>
</section>
What I am trying to do is have a next button on section1 that would take me to section 2 by using this
<button class="small button" id="next1" onclick="document.getElementById('section2').className ='active';document.getElementById('section1').style ='padding-top: 49px';document.getElementById('section1').className ='';document.getElementById('section1').style ='';"> Next </button>
This however is not working. What happens is that by clicking the button it takes me to section 2 for a brief section and then brings me back to section 1. Any help on how I can nail this.
Few things are missing and others not understood.
You need to give the focus. with focus(); so it takes you there.
You cannot change className if your element has no class attribute. You need to create it first or leave it empty in html.
To change style via javascript, you need to call the rule and then give it a value. element.style.paddingTop='49px';
To set focus on something else than form element or links, you may add the attribute tabindex="0" to the element your want to catch focus state.
a few change to your code , so you can experiment some of the things i say. http://codepen.io/gcyrillus/pen/pCikI
I wish you success in learning :)