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
Related
<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.
Just having a couple of issues, with the below script I've made.
It works perfectly in terms of toggling the form panels, however when i then start to interact with the 'Active' panel (ie click a input field), the active class is removed from its parent element, thus minimizing the panel.
$(function () {
$('.options-list li').click(function () {
$(this).toggleClass('active');
$(this).parent().children('li').not(this).removeClass('active');
});
});
Is there a way I can restrict the toggle function to only the title contents?
https://jsfiddle.net/os883y47/
I think its due to the 'Title' within the <'li'> not having its own containing element, so I wrapped the text within a <'span'> element & this appears to fix the form minimising issue however now the 'active' class isn't getting removed (assuming its now a child selector issue??).
https://jsfiddle.net/avk7e30a/
Any help would be greatly appreciated.
This is happening because of event bubbling to the li. The click events on the input are bubbled up to the li element and the event handler is executed again. To stop this from happening, use event.stopPropagation() on child elements event handlers.
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
Updated Fiddle
Add following code
$('.active-panel').click(function (e) {
e.stopPropagation(); // Stop event from bubbling up
});
$(function() {
$('.options-list li').click(function() {
$(this).toggleClass('active');
$(this).parent().children('li').not(this).removeClass('active');
});
$('.active-panel').click(function(e) {
e.stopPropagation();
});
});
.options-list {
border: 1px solid #d5d6d7;
padding: 0;
margin-bottom: 30px;
}
.option {
list-style: none;
border-bottom: 1px solid #dadada;
font: 16px/56px avenir_65regular !important;
color: #333;
}
.options-list .option.active {
color: #004ebc;
}
.options-list .option.active:before {
background-color: #004ebc !important;
border: 5px solid #83ace0 !important;
}
.options-list .option:before {
content: "";
background-color: #fff;
border-radius: 16px;
border: 5px solid #004ebc;
height: 18px;
margin: 0 10px;
width: 18px;
position: relative;
top: 3px;
box-sizing: border-box;
display: inline-block;
}
.panel {
height: 0;
overflow: hidden;
background: #f9f9f9;
border-top: 1px solid #d5d6d7;
transition: all 0.5s linear;
transition: height 0.25s ease-in-out;
/* visibility: hidden; */
/* opacity: 0; */
/* transition: visibility 0s, opacity 0.5s linear; */
}
.option.active > .panel {
/* visibility: visible; */
/* opacity: 1; */
height: 100%;
padding: 25px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="options-list">
<li class="option active">FORM FIELD 1
<div class="panel active-panel">
<div class="form-field">
<label class="form-label black">Sub Field</label>
<input class="form-input" type="text" />
</div>
<div class="form-field flt">
<label class="form-label black">Sub Field</label>
<input class="form-input half" type="text" />
<input class="form-input half" type="text" />
</div>
<div class="form-field flt">
<label class="form-label black cvc">Sub Field</label>
<input class="form-input half" type="text" />
</div>
</div>
</li>
<li class="option">FORM FIELD 2
<div class="panel"></div>
</li>
<li class="option">FORM FIELD 3
<div class="panel"></div>
</li>
</ul>
Read: What is event bubbling and capturing?
HTML is the same.
JQuery
$(function() {
$('.options-list li').click(function(){
$(this).closest('.options-list').find('.active').removeClass('active');
$(this).addClass('active');
});
});
Here is a fiddle : https://jsfiddle.net/os883y47/2/
Change your code to following
$(function() {
$('.options-list li').click(function(e){
if (e.target === this) {
$(this).toggleClass('active');
$(this).parent().children('li').not(this).removeClass('active');
}
});
});
This is because, you added click event to the parent, so even when you click its children the event get triggered. So a validation is required to confirm it is parent element
You may want to prevent the click-event on the panels:
JavaScript
$('.options-list li .panel').click(function(evt){
evt.preventDefault();
return false;
});
JSFiddle
I would add the following code as the first statements in your handler, so it only continues if the click was on a direct child (li) of the .options-list element:
$('.options-list li').click(function(e){
if (!$(e.target).parent().is('.options-list')) {
return;
}
...
Here is the fiddle.
I have created an element that is displayed when I am over a particular box.
If I move my mouse over the box I can see my element but then I need to move my mouse in and out twice for the element to disappear. How can I fix it? Shouldn't the element hide itself once I move the mouse out?
How do I make my box only show when mouse is over the box?
<script>
$("#box").on("mouseover",function()
{
$("#my-box").toggle();
});
</script>
I tried to hide it myself, but it didn't work:
$("#box").on("onmouseout", function()
{
$("#my-box").hide();
});
You can use mouseover and mouseout in a same eventlistener like one below:
$("#box").on("mouseover mouseout",function()
{
$("#my-box").toggle();
});
#my-box{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
Box here
</div>
<div id="my-box">
My Box
</div>
FIDDLE DEMO
The problem with your code is you're using onmouseout instead of use mouseenter and mouseleave method.
You can use hover:
$('#box').hover(function(){
$('#my-box').toggle();
});
You can use combination of both
$("#box").mouseover(function() {
$("#my-box").show();
}).mouseout(function() {
$("#my-box").hide();
});
Example
jQuery Solution
HTML
<div class="box" id="action"></div>
<div class="box" id="hidden"></div>
JS
$("#action").on("mouseover mouseout",function()
{
$("#hidden").toggle();
});
CSS
.box{
width: 30px;
height: 30px;
background: red;
margin: 10px;
}
#hidden{
display: none;
}
JSFiddle
Allthough it would be better doing this by just using CSS.
CSS Only Solution
.box{
width: 30px;
height: 30px;
background: red;
margin: 10px;
}
#action:hover + #hidden{
display: block;
}
#hidden{
display: none;
}
JSFiddle
I am trying to make it so when the '.main' is clicked, it will toggle its class to become a '.second', with this new class it will become red but the element will have already been classed as '.main' already, thus, I can still refer to it as '.main'. After that I want it to add to the 'count' variable and, if clicked again, revert back to the appearance of the '.main' class, then subtracting from the 'count' variable!
html
<div class="container">
<div id="box" class="main"></div>
<div id="box" class="main"></div>
<div id="box" class="main"></div>
<div id="box" class="main"></div>
</div>
relevent css
.main {
background: #888888;
}
.second {
background: red;
}
#box {
width: 10px;
height: 10px;
border-radius: 10px;
margin: 1% 1%;
line-height: 100px;
text-align: center;
}
And, jQuery
$(document).ready(function() {
var count = 0;
$('.main').click(function() {
$(this).toggleClass('second')
$(this).toggleClass('main')
if ($(this).hasClass('main')) {
count++;
} else if ($(this).hasClass('second')) {
count--;
}
if (count === 4) {
alert('Success')
}
});
});
So I need help because the jQuery will keep adding to the 'count' variable even if 'this' hasClass '.second'!
IF YOU THINK YOU HAVE AN ANSWER CHECK IT IN JSFIDDLE AND CLICK THE ONE BOX 4 TIMES, IF YOU GET A PROMPT THEN THE 'COUNT--;' ISN'T SUBTRACTING STILL
You may need to change these.
Remove the count variable and instead use jQuery's length.
Do not use the same value for ID.
$(document).ready(function() {
$('.main').click(function() {
$(this).toggleClass('second').toggleClass('main')
if ($('.main').length == 4)
alert('Success')
});
});
.main {
background: blue;
}
.second {
background: red;
}
#box1, #box2, #box3, #box4 {
width: 10px;
height: 10px;
border-radius: 10px;
margin: 1% 1%;
line-height: 100px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div id="box1" class="main"></div>
<div id="box2" class="main"></div>
<div id="box3" class="main"></div>
<div id="box4" class="main"></div>
</div>
You need to remove $(this).toggleClass('main') from within $('.main').click(function() { updating the code to
$('.main').click(function() {
$(this).toggleClass('second')
if ($(this).hasClass('second')) {
count++;
} else if ($(this).hasClass('main')) {
count--;
}
if (count === 4) {
alert('Success')
}
});
when you toggle the .main class it is removed and it will not fall within the click call
And you can't have multiple items with the same ID within your HTML, you can assign class if it occurs more than once. See the fiddle linked below for an example of how you can have it
jsfiddle example: http://jsfiddle.net/ks14dnL1/4/
I have a html page as below,
the tags code is :
<fieldset>
<legend>Tags</legend>
<div>
<label>
<input type="checkbox" name="col" value="summary" checked="checked" />
Name
</label>
......
</div>
</fieldset>
But i want to make the page as below:
In this screenshot, when i click the Columns, it will be fold and the tags invisible. Any one know how to do this? Add a CSS or JS? Thanks
It can be done by first finding all of the legend elements, then assigning an onclick handler. The handler is assigned to the first div found in the legend's parent. So this will work even if you have multiple fieldsets and legends on the same page.
jsFiddle Demo
window.onload = function(){
var legends = document.getElementsByTagName("legend");
for(var i=0; i<legends.length; i++)
{
legends[i].onclick = function()
{
var myDivs = this.parentNode.getElementsByTagName("div");
var myDiv;
if(myDivs.length > 0)
{
var myDiv = myDivs[0];
if(myDiv.style.display == "")
{
myDiv.style.display = "none"
}
else
{
myDiv.style.display = "";
}
}
}
}
};
In the demo, I also added CSS to the legend cursor:pointer;, which just shows the hand when you hover over the legend (to indicate to click).
You can modify the legend using CSS like you do for any other html element. Using Jquery is very simple, just have to do something like this:
Jquery:
$(function(){
$('legend').click(function(){
$(this).nextAll('div').toggle();
$(this).hasClass('hide')?($(this).attr("class", "show")):($(this).attr("class", "hide"));
});
})
CSS:
.hide{
padding-left: 10px;
background: url('img/down.gif') no-repeat left middle;
}
.show:after{
padding-left: 10px;
background: url('img/up.gif') no-repeat left middle;
}
Fiddle here
I know is not fieldset, but its design is looking exactly as the one you posted, so I guess this makes the trick. The code below is what you'r looking for, and some explanations about it are below the code:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#title').click(function(){
$('#tags_check').toggle();
});
})
</script>
<style type="text/css">
#content {
position: relative;
padding: 10px;
}
#title {
border: 1px solid grey;
position: absolute;
background-color: #ccc;
top: -5px;
left: 15px;
z-index: 1;
cursor: pointer;
}
#tags_check {
border: 1px solid grey;
position: relative;
z-index: 0;
top: 3px;
padding: 5px;
}
</style>
</head>
<body>
<div id="content">
<div id="title">Columns</div>
<div id="tags_check">
<input type="checkbox" name="col" value="summary" checked="checked" /> Name1
<input type="checkbox" name="col" value="summary" checked="checked" /> Name2
</div>
</div>
</body>
I'm using jquery, because is incredible easier than writtingh any other javascript, and I'm loading the library via CDN. As you see, show or hide is pretty easy, just when the document is loaded, toggle between both states, show or hide. I include the ID of the elements (as you can see I changed the layout) to pick them up easily.
About the desing, with fieldset... is going to be complicated achieve what you posted. Better just two divs, 'position: relative' to move them easily up and down. The CSS shows z-index to put one over the oter, and this only work on relative and absolute elements, along the top and left properties. Hope you like it!