I am trying to make a page in wordpress (it is built within wordpress custom page tool in admin interface).
What i want is 3 radio buttons. 2 visable 1 hidden.
The hidden one should be auto checked so it displays the correct div. (Maybe not needed when i use z-index in css?)
When a user click one of the checkboxes it should hide the another 2 divs and display the correct div (notice they are on the same place on the page).
For some reson i cant get this to work in wordpress. Or if there would be another way of doing the same way i am open for it as well.
CSS:
#apDiv3 {
position:absolute;
left:405px;
top:53px;
width:485px;
height:434px;
z-index:12;
background-color: #000;
color: #F00;
}
#apDiv10 {
position:absolute;
left:405px;
top:53px;
width:485px;
height:434px;
z-index:11;
background-color: #000;
color: #F00;
}
#apDiv11 {
position:absolute;
left:405px;
top:53px;
width:485px;
height:434px;
z-index:11;
background-color: #000;
color: #F00;
}
<script>
$(document).ready(function(){
$("input[name='payway']").click(function() {
var test = $(this).val();
$(".desc").hide();
$("#"+test).show();
});
});
</script>
HTML/PHP:
<p>
<input type="radio" name="payway" value="apDiv10" />
pay2
<input type="radio" name="payway" value="apDiv3" checked="checked" style="display:none;">
</p>
<p>
<input type="radio" name="payway" value="apDiv11" />
Pay1
</p>
<div id="apDiv3" class="desc">
This is the standard div that should be visable
</div>
<div id="apDiv10" class="desc">
Shows this div when user click on checkbox pay2
</div>
<div id="apDiv11" class="desc">
Shows when user click checkbox pay1
</div>
It seems when i looked at the head.php file there was a script that dident work which made my script not to work at all.
Once i removed the script from the head it worked.
Thank you all!
Related
Good day,
I have a function inside a javaScript file. I have 10 button will trigger this function to do something based on the button name. The code is something as follow:
function doSomething( name ){
switch(name){
case "1";
alert("i am 1");
break;
case "2";
alert("i am 1");
break;
// and so on...
}
}
This doSomething is working fine. However, I would like to alert other things when there is noscript or JavaScript is disable.
I do something like:
<noscript>
// if click on button 1, display <image src="image/img1" />
// if click on button 2, display <image src="image/img2" />
// and so on..
// I would like display different image when different button clicked.
</noscript>
Kindly advise.
No way. HTML5 itself is just a document sturcture and CSS3 provides style. That is, HTML5 as is has no behavior, thus, you won't be able to interact with the document without JavaScript.
If JavaScript is disabled and you provide a <noscript> element, you should tell your users that your Web application won't work without JavaScript.
You could do something like the checkbox hack in css to show a message in a hidden div, Style the labels like your buttons.
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
background: #08C;
padding: 5px;
border: 1px solid rgba(0,0,0,.1);
border-radius: 2px;
color: white;
font-weight: bold;
}
.to-be-changed {display:none;}
input[type=checkbox]:checked ~ .to-be-changed {
display:block;
margin-top:30px;
font-size:120%;
color:red;
}
<noscript>
<div id="buttons">
<input type="checkbox" id="button1"><label for="button1">button 1</label>
<input type="checkbox" id="button2"><label for="button2">button 2</label>
<input type="checkbox" id="button3"><label for="button3">button 3</label>
<div class="to-be-changed"> You need to have javascript activated for the buttons to work !</div>
</div>
</noscript>
Obviously turn js off to se it working. Here's a link to the page I got the info from Css click events
its an i tag
(the image is)
which uses css to display the icons
through a cdn hosted stylesheet and how would I incorporate that.
So lets say there is a magnifying glass icon on the web page, we the user clicks on the icon , a div dropdown search box appears. that is what i am asking help for.
not sure how to do it but I know I am close.
The icon is the
<section class="search">
<div id="searchbar"><i class="search-bar"></i></div>
<div class="search-dropdown hidden">
<div class="searchbox">
<input placeholder="search..." type="text"/>
</div>
</div>
</section>
//// javascript////
$(document).ready(function(){
$('#searchbar').click(function(){
$(this).siblings('.search-dropdown').toggleClass('hidden');
});
});
Don't know what your goal is, but your code seems to work.
Have you checked so your div wraps around the image so when you click it you click inside the div (try to do as I in the fiddle, a border around the div so you can see).
else it should work just fine.
What is the css for the .hidden class?
<style>
.hidden
{
background-color: yellow;
}
#searchbar
{
border: 1px solid black;
height: 16px;
width: 50px;
}
</style>
<section class="search">
<div id="searchbar"><i class="search-bar">CLICK</i></div>
<div class="search-dropdown hidden">
<div class="searchbox">
<input placeholder="search..." type="text"/>
</div>
</div>
</section>
Script:
$(document).ready(function(){
$('#searchbar').click(function(){
$(this).siblings('.search-dropdown').toggleClass('hidden');
});
});
Check this jsfiddle out!
I've been looking around for a while but I'm afraid I'm too begginer for this easy jquery.
I´ve tried show/hide and toggle functions but I don´t find the way to show toggle elements in a page hidding the others. The toggle works, but when I click one I'd like the others to be hidden and I don't find the way. Maybe It's too easy, but I can't find the answer.
This is my jquery
function toggleDiv(divId) { $("#"+divId).toggle();}
And this is the html sample
Toggle Button 1
<div id="div1">
<p>paragraph 1</p>
</div>
Toggle Button 1
<div id="div2">
<p>paragraph 2</p>
</div>
I´ve just created a fiddle that explains better what I mean: http://jsfiddle.net/vKLNe/
Thanks in advance for your help and sorry about my english.
You need to add class="toggle" to all the divs that toggle and then
http://jsfiddle.net/vKLNe/5/
function toggleDiv(divId) {
$("#"+divId).toggle();
$('.toggle').not($("#"+divId)).hide();
}
Shoot someone beat me to it... but yeah you can use toggle or show because you are manipulating multiple divs before you show the current clicked div...
function toggleDiv(divId) {
$('div').hide();
$("#"+divId).toggle();
}
The only downfall is that if you decide to have different divs doing different things, it could cause issues with them.
Although there are ways to do that on your own like Freddy's and Adam's, you can always rely on some kind of pre-defined accordion like jquery ui's
http://jqueryui.com/accordion/
Or bootstrap's collapse
http://getbootstrap.com/javascript/#collapse
And you wouldn't have to worry about handling the events yourself
You can do this by css classes.
Demo : http://jsfiddle.net/vKLNe/4/
Use hide and show classes
and only one div at a time will have show class.
html:
Toggle Button 1
<div class="hide" id="div1" style="background-color: #aaa; padding: 5px 10px; width:200px;">
<p>paragraph 1</p>
</div>
<br /><br />
Toggle Button 2
<div class="hide" id="div2" style="background-color: #aaa; padding: 5px 10px; width:200px;">
<p>paragraph 2</p>
</div>
<br /><br />
Toggle Button 3
<div class="hide" id="div3" style="background-color: #aaa; padding: 5px 10px; width:200px;">
<p>paragraph 3</p>
</div>
Jquery:
function toggleDiv(divId) {
$(".show").addClass('hide').removeClass('show');
$("#"+divId).addClass('show').removeClass('hide');
}
css:
.hide {
display: none;
}
.show {
display: block;
}
It is MUCH more practical to use event listeners compared to inline JS:
jQuery in
$(document).ready(function(){
// listen for clicking of the <a>
$('a').on('click', function(e){
// don't let the <a> perform it's default action
e.preventDefault();
// hide all divs
$('div').hide();
// show the <div> which is after the <a> which you clicked
$(this).next('div').show();
});
});
HTML
<!-- notice the <a> tags have an href="#", no more inline JS! -->
Toggle Button 1
<div id="div1" style="background-color: #aaa; padding: 5px 10px; display:none; width:200px;">
<p>paragraph 1</p>
</div>
<br />
<br />
Toggle Button 2
<div id="div2" style="background-color: #aaa; padding: 5px 10px; display:none; width:200px;">
<p>paragraph 2</p>
</div>
<br />
<br />
Toggle Button 3
<div id="div3" style="background-color: #aaa; padding: 5px 10px; display:none; width:200px;">
<p>paragraph 3</p>
</div>
Please not that this code ONLY works because you are not doing any animations such as fading or sliding. .hide() and .show() merely change the CSS the moment they are called upon where as .fadeIn() will alter the CSS potentially thousands of times over a specified period of milliseconds.
http://jsfiddle.net/vKLNe/8/
Here is the code I have: http://jsfiddle.net/Draven/rEPXM/23/
I'd like to know how I can hide that Add submit button until I click the + image to add input boxes to the form.
I don't want to add the submit button next to the input box because I want to be able to add multiple input boxes and submit them all when I click Add.
HTML
<div id="left">
<div class="box">
<div class="boxtitle"><span class="boxtitleleftgap"> </span><span class="boxtitlebulk"><span class="boxtitletext">Folders</span><div style="float: right; margin-top: 4px;"><div class="addplus"> </div></div></span></div>
<div class="boxcontent">
<form method="post" id="folderform" action="page.php?action=list-volunteer-apps" name="folderform">
<a class="even" href="page.php?action=list-volunteer-apps&folder=2">Folder 2 <span class="text">(1)</span></a><a class="even" href="page.php?action=list-volunteer-apps&folder=1">Folder 1 <span class="text">(0)</span></a>
<div id="foldercontainer"><input type="submit" value="Add"></div>
</form>
</div>
</div>
</div>
jQuery
function AddFolder() {
$('#foldercontainer').append('<input name="folder[]" type="text" size="20" />');
}
Just give the button an ID, and make it start hidden
<input type="submit" id="addButton" value="Add" style="display: none;">
Then use the show() jQuery method:
$("#addButton").show();
http://jsfiddle.net/TcFhy/
Here's a way you could do this... also, cleaned up the method used for making these input boxes a bit:
http://jsfiddle.net/mori57/4JANS/
So, in your html you might have:
<div id="foldercontainer">
<input id="addSubmit" type="submit" value="Add">
<input id="folderName" name="folder[]" type="text" size="20" style="" />
</div>
and your CSS might be:
#foldercontainer #addSubmit {
display:none;
}
#foldercontainer #folderName {
display:none;
width: 120px;
background: #FFF url(http://oi47.tinypic.com/2r2lqp2.jpg) repeat-x top left;
color: #000;
border: 1px solid #cdc2ab;
padding: 2px;
margin: 0px;
vertical-align: middle;
}
and your script could be:
// set up a variable to test if the add area is visible
// and another to keep count of the add-folder text boxes
var is_vis = false,
folderAddCt = 0;
function AddFolder() {
if(is_vis == false){
// if it's not visible, show the input boxes and
$('#foldercontainer input').show();
// set the flag true
is_vis = true;
} else {
// if visible, create a clone of the first add-folder
// text box with the .clone() method
$folderTB = $("#folderName").clone();
// give it a unique ID
$folderTB.attr("id","folderName_" + folderAddCt++);
// and append it to the container
$("#foldercontainer").append($folderTB);
}
}
I moved the button out of the folder wrap, and I am showing it when you add a new folder. This way the button will stay at the bottom when adding new folders. I also removed the inline style, and replaced it with a class.
This is used to display the button, just add it to the AddFolder() function:
$('#addBtn').show();
I am hiding it with CSS like this:
#addBtn { display: none;}
I moved the button out of the #foldercontainer, this way it will always stay at the bottom when you add multiple folders, as you wanted:
<div id="foldercontainer"></div>
<input id="addBtn" type="submit" value="Add">
Look here for the jsFiddle: http://jsfiddle.net/kmx4Y/1/
$('form#folderform input[type=submit]').hide();
Then show the add button after you click the submit
http://jsfiddle.net/SQh8L/
The site is here
I have opt to using the radiobutton's labels as customized buttons for them. This means the radio inputs themselves are display:none. Because of this, the browsers don't tab stop at the radio labels, but I want them to.
I tried forcing a tabindex to them, but no cigar.
I have came up with just putting a pointless checkbox right before the labels, and set it to width: 1px; and height 1px; which seems to only really work on chrome & safari.
So do you have any other ideas for forcing a tab stop at those locations without showing an element?
Edit:
Just incase someone else comes by this, this is how I was able to insert small checkboxes into chrome & safari using JQuery:
if ($.browser.safari) {
$("label[for='Unlimited']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
$("label[for='cash']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
$("label[for='Length12']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
}
Note: $.browser.webkit was not becoming true...so I had to use safari
a working solution in my case to enable tab selection / arrow navigation was to set the opacity to zero rather than a "display: none"
.styled-selection input {
opacity: 0; // hide it visually
z-index: -1; // avoid unintended clicks
position: absolute; // don't affect other elements positioning
}
Keep the radio input hidden, but set tabindex="0" on the <label> element of reach radio input.
(A tab index of 0 keeps the element in tab flow with other elements with an unspecified tab index which are still tabbable.)
If you separate the label from any field and set a tabIndex you can tab to it and capture mouse and key events. It seems more sensible to use buttons or inputs with type="button",
but suit yourself.
<form>
<fieldset>
<input value="today">
<label tabIndex="0" onfocus="alert('label');">Label 1</label>
</fieldset>
</form>
I have an alternative answer that I think has not been mentioned yet. For recent work I've been reading the Mozilla Developer Docs MDN Docs, Forms, especially the Accessibility Section MDN Docs, Accessible HTML(5), for information related to keyboard accessibility and form structure.
One of the specific mentions in the Accessibility section is to use HTML5 elements when and where possible -- they often have cross-browser and more accessible support by default (not always true, but clear content structure and proper elements also help screen reading along with keyboard accessibility).
Anyway, here's a JSFiddle: JSFiddle::Keyboard Accessible Forms
Essentially, what I did was:
shamelessly copy over some of the source code from a Mozilla source code to a JSFiddle (source in the comments of the fiddle)
create a TEXT-type and assign it the "readonly" HTML5 attribute
add attribute tabindex="0" to the readonly
Modify the "readonly" CSS for that input element so it looks "blank" or hidden"
HTML
<title>Native keyboard accessibility</title>
<body>
<h1>Native keyboard accessibility</h1>
<hr>
<h2>Links</h2>
<p>This is a link to Mozilla.</p>
<p>Another link, to the Mozilla Developer Network.</p>
<h2>Buttons</h2>
<p>
<button data-message="This is from the first button">Click me!</button>
<button data-message="This is from the second button">Click me too!
</button>
<button data-message="This is from the third button">And me!</button>
</p>
<!-- "Invisible" HTML(5) element -->
<!-- * a READONLY text-input with modified CSS... -->
<hr>
<label for="hidden-anchor">Hidden Anchor Point</label>
<input type="text" class="hidden-anchor" id="hidden-anchor" tabindex="0" readonly />
<hr>
<h2>Form</h2>
<form name="personal-info">
<fieldset>
<legend>Personal Info</legend>
<div>
<label for="name">Fill in your name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="age">Enter your age:</label>
<input type="text" id="age" name="age">
</div>
<div>
<label for="mood">Choose your mood:</label>
<select id="mood" name="mood">
<option>Happy</option>
<option>Sad</option>
<option>Angry</option>
<option>Worried</option>
</select>
</div>
</fieldset>
</form>
<script>
var buttons = document.querySelectorAll('button');
for(var i = 0; i < buttons.length; i++) {
addHandler(buttons[i]);
}
function addHandler(button) {
button.addEventListener('click', function(e) {
var message = e.target.getAttribute('data-message');
alert(message);
})
}
</script>
</body>
CSS Styling
input {
margin-bottom: 10px;
}
button {
margin-right: 10px;
}
a:hover, input:hover, button:hover, select:hover,
a:focus, input:focus, button:focus, select:focus {
font-weight: bold;
}
.hidden-anchor {
border: none;
background: transparent!important;
}
.hidden-anchor:focus {
border: 1px solid #f6b73c;
}
BTW, you can edit the CSS rule for .hidden-anchor:focus to remove the highlight for the hidden anchor if you want. I added it just to "prove" the concept here, but it still works invisibly as requested.
I hope this helps!
My preference:
.tab-only:not(:focus) {
position: fixed;
left: -999999px;
}
<button class="tab-only">Jump to main</button>
Another great option would be to nest your input + div in a label and hide the input by setting width and height to 0px instead of display: none
This method even allows you to use pseudo-classes like :focus or :checked by using input:pseudo + styleDiv
<label>
<input type="radio">
<div class="styleDiv">Display text</div>
</label>
input
{
width: 0px;
height: 0px;
}
input + .styleDiv
{
//Radiobutton style here
display: inline-block
}
input:checked + .styleDiv
{
//Checked style here
}
Discard the radio-buttons and instead; keep some hidden fields in your code, in which you store the selected value of your UI components.