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!
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.
I am working on a piece of legacy code for a table. In certain cells, I'm adding a notice icon. When you hover over the icon a <span> is made visible displaying some information. I would like to be able to make this <span> smart about its positioning but can't figure out a good method. I can statically position it but depending on which cell in the table it is in it gets lost against the edge of the page. I have done a JsFiddle here demonstrating the issue. Unfortunately, I am not allowed to use anything but HTML, CSS and vanilla JS.
The title attribute to most tags is pretty smart about its position. I have added a title to one of the cells in the table in the jsFiddle (cell containing "Hello"). Is there any way to make my span exhibit the same smart behaviour?
A pop-up can be added before any element by putting the popup html code inside a 'div' with 'position:absolute; overflow:visible; width:0; height:0'.
When these events: 'onmouseenter', 'onmouseleave' are fired on the element, just toggle the popup css attribute 'display' between 'none' and 'block' of the element.
Example on jsfiddle:
https://jsfiddle.net/johnlowvale/mfLhw266/
HTML and JS:
<div class="popup-holder">
<div class="popup" id="popup-box">Some content</div>
</div>
Some link
<script>
function show_popup() {
var e = $("#popup-box");
e.css("display", "block");
}
function hide_popup() {
var e = $("#popup-box");
e.css("display", "none");
}
</script>
CSS:
.popup-holder {
position: absolute;
overflow: visible;
width: 0;
height: 0;
}
.popup {
background-color: white;
border: 1px solid black;
padding: 10px;
border-radius: 10px;
position: relative;
top: 20px;
width: 300px;
display: none;
}
I have a div which is a container of various things. Sometimes it contains some simply tables, and other layout stuff. But sometimes it contains buttons and forms.
This container div can show another div modally. Which I achieved by simply making its position: absolute, and have its top/bottom/left/right 0.
It looks nice but when I press the tab button focus can go to the elements on the div behind. How can I prevent this?
I know I can disable focus on one element by setting tabIndex=-1 so I could iterate however when the modal disappears I would need to restore all this elements. Which means extra work. I wonder if there is a general way of doing this with jQuery or maybe jqueryui or vanilla js?
EDIT:
Working example in jsbin:
https://jsbin.com/veciju/1/edit?html,css,js,output
I am not sure what is the exact issue without the fiddle, and did not check the code. But here is my solution (pure javascript) hope it helps
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container">
<p id="filler">
Hello World.
</p>
<form id="myForm">
<input type="text" />
<input type="submit" value="submit"/>
</form><br>
<button id="openModal" onclick="openModal();"> Open Modal</button>
<div id="modal" class="hidden">
<p id="modelP"> This is a modal DIV. You cannot escape me</p>
<button id="closeModal" onclick="closeModal();">Close Me</button>
</div>
</div>
</body>
<style>
#container{
margin: 50px auto;
padding: 100px;
color: white;
width: 50%;
height:400px;
background-color: black;
text-align: center;
}
.hidden{
display: none;
}
#modal{
background-color: green;
border: 5px solid red;
z-index: 100;
width:80%;
height: 80%;
left: auto;
}
</style>
<script>
function openModal(){
var modalElement = document.getElementById('modal');
var others = document.querySelectorAll('* :not(#closeModal) ');
modalElement.removeAttribute('class');
for (i=0; i<others.length;i++){
console.log(others[i]);
others[i].setAttribute('disabled','disabled');
}
}
function closeModal(){
var modalElement = document.getElementById('modal');
var others = document.querySelectorAll('* :not(#closeModal) ');
modalElement.className='hidden';
for (i=0; i<others.length;i++){
console.log(others[i]);
others[i].removeAttribute('disabled');
}
}
</script>
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
I want to create a popup/div at a specific location on the screen like image below
Say it should start after edit button and its position should be exactly the same as shown in the image.
Check out my JSFiddle that I made for you. This is quite simple to do. This example requires JQuery though, but if you fiddle around: I'm sure it can run without it as well :)
HTML:
<div id="box1">
This is box 1
<br />
<button onClick="openEditBox();" id="editButton">Edit</button>
</div>
<div id="box2" style="display: none;">
This is the edit box...
<br />
Edit stuff goes here...
</div>
JavaScript:
$(document).mouseup(function (e) {
var container = $("#box2");
if (!container.is(e.target)
&& container.has(e.target).length === 0)
{
container.hide();
}
});
function openEditBox() {
var editButtonPosition = $("#editButton").position();
$("#box2").css({top: editButtonPosition.top + 20, left: editButtonPosition.left});
$("#box2").show();
}
CSS:
#box1 {
background-color: #AAA;
border: 1px solid #333;
padding: 10px;
width: 200px;
}
#box2 {
background-color: lightblue;
border: 1px solid #333;
padding: 10px;
width: 200px;
z-index: 1000;
position: fixed;
left: 0;
top: 0;
}
Run it live on JSFiddle to test it out and see how it works:
http://jsfiddle.net/fpde7by8/
About the down votes: People here seem to hate simple questions... But I don't see the problem. Everyone was a beginner at some point.
The popup div should be the child of the first div(maybe the Edit button's div) , set the first div position:relative, the popup div position:absolute, so the popup's position is relative to the first div,then you can use code like this : 'left:50px;top:50px;'