I need to remove an anchor from url or "untarget" the element when i click on radio button.
Here's the code, when i click on a link from the first page i want to have control on specific element on the second page (for example changing font color) but the problem I am struggling with is i can't "untarget" it by using css after i choose sth else from the radio button list and there are simultaneously highlighted two links at the same time.
First page:
OFERTA
<ul>
<li>webdesign</li>
<li>grafika</li>
<li>kampania</li>
</ul>
Second page:
<style type="text/css">
*{
clear: both;
}
label:target{
color: red;
}
#webdesign:target ~ #wd, #grafika:target ~ #gr, #kampania:target ~ #kp{
visibility: visible;
z-index: 10;
}
input[type=radio]:checked + #webdesign, input[type=radio]:checked + #grafika, input[type=radio]:checked + #kampania{
color: red;
}
input[type=radio]:checked + #webdesign ~ #wd, input[type=radio]:checked + #grafika ~ #gr, input[type=radio]:checked + #kampania ~ #kp{
visibility: visible;
z-index: 100;
}
#wd, #gr, #kp{
width: 500px;
height: 100px;
visibility: hidden;
position: absolute;
z-index: 0;
}
#wd{
background: red;
}
#gr{
background: green;
}
#kp{
background: blue;
}
</style>
HOME
<input type="radio" id="webdesign1" name="labels">
<label for="webdesign1" id="webdesign">webdesign</label>
<input type="radio" id="grafika1" name="labels">
<label for="grafika1" id="grafika">grafika</label>
<input type="radio" id="kampania1" name="labels">
<label for="kampania1" id="kampania">kampania</label>
<div id="wd"></div>
<div id="gr"></div>
<div id="kp"></div>
It's simple. Attach the first change event of any radio, than remove the hash part from the URL.
Assuming you are using jQuery:
$('input:radio').one('change', function(){
location.hash = '';
});
http://jsbin.com/wesotoh/edit?html,js
Related
I have built a clickable am / pm button that is part of a time selector. It will be sitting inside a dynamic table (html table where the user can click a button to add rows to the table). Since it is in a dynamic table, I will be generating the elements and won't have much use of element id's when trying to access them in javascript (as I won't know them individually).
With the below clickable label, is there any way to achieve the same result without assigning an id to the checkbox?
.text_toggle
{
display: none;
}
.text_toggle + label
{
position: relative;
cursor: pointer;
color: #aaa;
}
.text_toggle + label:hover
{
color: blue;
}
.text_toggle:not(:checked) + label:before
{
content: attr(data-off);
position: absolute;
}
.text_toggle:checked + label:before
{
content: attr(data-on);
position: absolute;
}
<input id="am_pm" class="text_toggle" type="checkbox" checked>
<label for="am_pm" data-off="am" data-on="pm"></label>
Yes, you can make a label and put your checkbox inside it, then you add another element with your custom attributes.
.switch{
/* other styles here */
}
.switch > input[type=checkbox]{
display:none;
}
.switch input[type=checkbox] + span::before{
content: attr(data-off)
}
.switch input[type=checkbox]:checked + span::before{
content: attr(data-on)
}
<label class="switch">
<input type="checkbox" />
<span data-off="Off" data-on="On"></span> <!-- I made it with span, but feel free to use any other tag -->
</label>
<div id="my-spoiler">
<div id="my-spoiler-title" role="button" onclick="(document.getElementById('1').style.display=document.getElementById('1').style.display=='none' ? '' : 'none')">
Spoiler Title
</div>
<div class="my-spoiler-content" id="1" style= "display:none">
Hidden Content
</div>
</div>
In order to use this multiple times in a post, I need to create unique "id" every time like id=1, id=2....
Is there any way to call child div without any "id" and achieve the results.
Note: initially the "content" ,is hidden and when user clicks the title then the content is visible.
I don't want to use any plugins for this.
var faqToggles = document.querySelectorAll('[rel="faq-toggle"]');
faqToggles.forEach( function(toggle) {
toggle.addEventListener('click', function(event) {
event.target.closest('.faq').classList.toggle('open');
});
});
.faq {
margin-top: 20px;
}
.faq .content {
border: 1px solid blue;
}
.faq:not(.open) .content {
padding: 0;
height: 0;
overflow: hidden;
border: 1px solid red;
}
[rel='faq-toggle'] {
/* this could be a button... maybe should be... */
cursor: pointer;
}
<section class="faq">
<header rel="faq-toggle">
This is the header / teaser etc.
</header>
<main class="content">
This is the full content.
</main>
</section>
OF course - StackOverflow - reorders the code (Backwards) - but something like this?
https://jsfiddle.net/sheriffderek/t32cqmwx/
There's actually no need to use javascript, this can be done purely with CSS.
The "title" is a label for a checkbox (that is hidden). Clicking on the label toggles the checkbox "checked" property.
The input is placed immediately before the content you want to hide / show.
The "hidden" content is hidden with css.
The adjacent sibling combinator, combined with the :checked pseudo-selector, allows us to style the "hidden" content specifically when the input is checked: input:checked + .spoiler-content
.spoiler {
border: 1px solid #ccc;
}
.spoiler+.spoiler {
margin-top: 20px;
}
.spoiler input[type="checkbox"] {
display: none !important;
}
.spoiler-content {
height: auto;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: all .5s;
}
input:checked+.spoiler-content {
max-height: 1000px;
opacity: 1;
}
<div class="spoiler">
<label class="spoiler-title" for="spoiler-1">
Spoiler Title
</label>
<input type="checkbox" id="spoiler-1">
<div class="spoiler-content">
Hidden Content
</div>
</div>
<div class="spoiler">
<label class="spoiler-title" for="spoiler-2">
Spoiler Title #2
</label>
<input type="checkbox" id="spoiler-2">
<div class="spoiler-content">
Hidden Content #2
</div>
</div>
NOTE: the "id" of the input and label must match, but this would be trivial to create new "ids" with php and simply injecting them into your markup easily:
<?php $spoiler_id = 'spoiler-' . rand(100000,99999999); ?>
Since you haven't shared any of your WordPress / PHP code with us, we don't know how you are adding this to your posts, so I can't advise more specifically how to get the ID injected.
I'm trying to code a responsive button which can be placed multiple times in the same line, showing its content always below the line containing the button.
In the snippet there is a working code, but it has a small flaw: since the pseudo-class focus is used, once the button is opened it's enough to click anywhere on the screen to close it.
The usual behaviour for a button is that to close it you have to click on it, so is it possibile to get this behaviour also for this one?
I used other pseudo-classes but without success, I guess only a javascript can do the job.
.container {
position: relative;
margin: 2em;
}
.details {
display: none;
}
.collapsible:focus {
margin-bottom: 1.5em;
pointer-events: none;
}
.collapsible:focus + .details
{
display: block;
margin-top: -1.15em;
position: absolute;
left: 0;
right: 0;
background: yellow;
}
<div class=container>
You can <button class="collapsible">place</button><span class=details>yes</span> more than <button class="collapsible">one</button><span class=details>nice</span> per line, they are responsive and the content is always shown just <button class="collapsible">below</button><span class=details>cool</span> the line containing the button.
But once opened, you can close it with a click <button class="collapsible">everywhere</button><span class=details>not good</span> on the screen
</div>
Javascript for further customization
<script type="text/javascript">
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.parentElement.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
Implementation of the idea was a bit more complicated so I'll just answer.
This uses an old trick whereby a label, associated with a hidden checkbox, is used as the click target. Since clicking on a label checks or unchecks the checkbox, and there is a pseudo-class for the checked state of the checkbox, we can use that to persist the state of our styles. Credit to TylerH for his answer to the similar question Can I have an onclick effect in CSS?.
I've implemented it here by using a partial attribute selector, so in this example any checkboxes have to have an ID that begins with "demo". The checkboxes do have to have an ID for the for attribute of the label to hook onto.
.container {
position: relative;
margin: 2em;
}
.collapsible:focus {
margin-bottom: 1.5em;
pointer-events: none;
}
label {
display: inline-block;
background: lightgrey;
}
[id^="demo"] {
display: none;
}
/* details that are next to labels that are next to unchecked checkboxes are hidden */
[id^="demo"]:not(:checked)+label+.details {
display: none;
}
/* details that are next to labels that are next to checked checkboxes are displayed */
[id^="demo"]:checked+label+.details {
display: block;
position: absolute;
left: 0;
right: 0;
background: yellow;
}
/* labels that are next to unchecked checkboxes have a different color
so you can track which ones are "on" */
[id^="demo"]:checked+label {
background: blue;
color: white;
}
<div class=container>
You can <input type="checkbox" id="demo01" /><label for="demo01" >place</label><span class=details>yes</span> more than <input type="checkbox" id="demo02" /><label for="demo02">one</label><span class=details>nice</span> per line, they are responsive and the content is always shown just <input type="checkbox" id="demo03" /><label for="demo03">below</label><span class=details>cool</span> the line containing the button. But once opened, you can close
it with a click <input type="checkbox" id="demo04" /><label for="demo04">everywhere</label><span class=details>not good</span> on the screen
</div>
I have a select tag with a number of options listed, and I have a button that should display more information to the user, including modifying the options to show more information. So, for example something like this:
Normal View
<option>RegularInfo</option>
Extra View - should be displayed after button click
<option>RegularInfo (ExtraInfo)</option>
I would like to have my button be able to toggle between these two views, but I'm not sure if there is a simple way to do it. One way I've considered is just writing a javascript function to modify the text manually, but then the code gets a bit messy with a lot of string manipulation.
I tried embedding a span with a class inside and then just toggling the class with jQuery like so:
<option>RegularInfo<span class = "extra">(ExtraInfo)</span></option>
//JQuery
$(".extra").toggle();
However, it turns out you cannot embed html elements inside an option tag, so this method didn't work for me.
Is there a way for me to toggle the visibility of part of an option without having to manually set the value of the option using javascript?
Yeah, you can't nest child tags inside of <option> tags. If you don't want to append text with javascript, maybe try a method similar to this one of selecting text inside of your tags and manipulating it (in your case hiding and displaying it): https://stackoverflow.com/a/16585227/7184365
I already did this in the past and you can just copy the codes here just alter it. But the definition here is you need to have a checkbox since checkbox only handles 2 values, on and off.. like a toggle button. You will just redesign the checkbox to a toggle button. But if your don't want to change the design, don't copy the css.
<script>
function clicker(enable){
.. some codes here ..
}
</script>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<label class="switch">
<input type="checkbox" <?php echo "onclick='clicker("$someVar")'";
if(!empty($someVar)){
echo " " . "checked";
}
?>
><span class="slider round"></span>
</label>
and of course you need to save the event of the toggle button to the database so if you leave it, it will stay like that. So basically you will also need ajax for that.
An option element cannot have any child elements.
From the HTML 5 draft spec:
Content model: Text.
You can't nest child tags inside of <option> tags, but you can replace the text inside it.
Replacing with pure JS:
function changeOptionText()
{
var select1 = document.querySelector('#select1');
select1.firstElementChild.innerHTML += ' (ExtraInfo)';
}
<select id="select1">
<option>RegularInfo</option>
<option>Other info</option>
</select><br>
<input type="button" value="change option" onclick="changeOptionText()">
Replacing with jQuery:
function changeOptionText()
{
var firstOptEl = $('#select1 option').first();
firstOptEl.html(firstOptEl.html() + ' (ExtraInfo)');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option>RegularInfo</option>
<option>Other info</option>
</select><br>
<input type="button" value="change option" onclick="changeOptionText()">
I am working on phone-gap application in dream-weaver
I have 2 divs .pics and .cover
<div class="pics">
<div class="cover"></div>
</div>
the main idea is to change the colour of the cover div and toggle a JS variable between true and false
var checked=false;
$('.pics').click(function(){
CheckToggle();
});
function CheckToggle(){
if(checked==false){
checked=true;
$('.cover').css({"background":"rgba(255,255,255,.5)"});
}
else
checked=false;
}
I click on .pics and nothing happens
I think there is an error in the jquery code
This is what I used after all
$(function(){
$( "#item1" ).bind( "tap", PicCheck );
var checked;
var choosen="#item1";
checked=$(choosen).attr('pcheck');
function PicCheck( event ){
if(checked=="false"){
$(choosen).toggleClass("selected");
checked="true";
}
else if(checked=="true"){
$(choosen).toggleClass("selected");
checked="false";
}
$(choosen).attr('pcheck',checked);
}
});
With some css you can implement a checkbox and radio buttons with pictures. Try this :
<div>
<input id="input-1" class="img-checkbox" type="radio" name="selectTipo">
<label for="input-1" class="">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/128px-HTML5_logo_and_wordmark.svg.png">
</label>
<input class="img-checkbox" type="radio" id="input-2" name="selectTipo">
<label for="input-2">
<img src="http://www.javatpoint.com/images/javascript/javascript_logo.png">
</label>
And in your css :
input.img-checkbox[type=radio], input.img-checkbox[type=checkbox] {
display: none;
}
img{
height:100px;
}
input.img-checkbox[type=radio]+label, input.img-checkbox[type=checkbox]+label {
border: 10px solid transparent;
display: inline-block;
border-radius: 10px;
}
input.img-checkbox[type=radio]:checked+label, input.img-checkbox[type=checkbox]:checked+label {
border: 10px solid #C6ECED;
display: inline-block;
}
See the result in the follow jsfiddle
I'd skip the Javascript and use a label element and the :checked selector.
#example {
visibility: hidden;
width: 0;
}
label {
color: purple;
}
#example:checked + label {
background-color: red;
color: white;
}
The HTML would be like this:
<input id="example" type="checkbox" name="example" value="true">
<label for="example">Example</label>
With this approach you wouldn't need to worry about tracking the checked variable and you can just figure it out normally.
Here's a demo: http://jsbin.com/cirali/1/edit?html,css,output
It is usually most convenient to use additional class for your purpose.
Here is a simple example:
var checked = false;
$('.pics').click(function() {
CheckToggle();
});
function CheckToggle() {
$('.cover').toggleClass('selected');
checked = $('.cover').hasClass('selected');
}
.cover {
background: red;
}
.cover.selected {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pics">
<div class="cover">test</div>
</div>
Edit:
Since you are using jQuery mobie, you might want to try the vclick or tap events instead of the regular click event.
Depending on how you have the elements styled, it might be better to put the action on the .cover element... If the child element .cover is the exact same height and width of the parent element .pics you wont be able to click on .pics