I have hidden checkbox and I can't reach JS code which allows me to do checkbox checkable. How can I do it?
I tryied some JS from stackoverflow, but it didn't work.
Here is my code http://fiddle.jshell.net/ta7w7bb8/
CSS:
.obalform label.checkbox{
font-size:18px;
color:#2d2f36;
width:478px;
margin:auto;
text-align: left;
display:inline-block;
float:none;
cursor:pointer;
}
.checkbox::before{
content:"";
width:25px;
height:25px;
background:url(http://i.imgbox.com/dMtoesFn.png) 0 0 no-repeat;
float:left;
cursor:pointer;
margin-top: 14px;
margin-right: 15px;
}
.checkbox.checked::before{
content:"";
width:25px;
height:25px;
background:url(http://i.imgbox.com/fpOcnxmf.png) 0 0 no-repeat;
float:left;
cursor:pointer;
margin-top: 14px;
margin-right: 15px;
}
.checkbox:hover::before{
content:"";
width:25px;
height:25px;
background:url(http://i.imgbox.com/fpOcnxmf.png) 0 0 no-repeat;
float:left;
cursor:pointer;
margin-top: 14px;
margin-right: 15px;
}
input[type=checkbox]{display:none;}
HTML:
<div class="obalform">
<div class="radek">
<label class="checkbox" for="check1">souhlas se zasíláním slevových kupónů,akcí a novinek</label><input id="check1" type="checkbox" name="souhlas">
</div>
</div>
And I tryied solution from this topic -> HTML checkbox onclick called in Javascript
You have to use the CSS3 :checked selector but you MUST change the HTML structure before... I have wrote a sample for you:
http://fiddle.jshell.net/Clear/ta7w7bb8/4/ (with this code you don't need to javascript)
Know that in my sample I used an iconic font called "Font Awesome". It's better because with this font you shouldn't use images and the page load is lesser
If you'd like to do the same with-out jQuery you could do it like this:
function getLabel(needle) {
var labels = document.getElementsByTagName("label");
var texts = [] ;
for (var i = 0; i < labels.length; i++) {
var label = labels[i];
if(label.getAttribute("for") == needle) {
return label;
}
}
return null;
}
function checked() {
var label = getLabel('check1');
var selection = this.checked ? "checkbox checked": "checkbox";
if ( selection ) label.setAttribute('class', selection);
else label.removeAttribute('class');
}
// add event listener to checkbox
var el = document.getElementById("check1");
el.addEventListener("click", checked, false);
It's more code than jQuery but it's lighter and loads faster. It depends on what you're going to do.
You can find the fiddle here.
Your code is artificially inserting an image that represents the checkbox's state. The image looks checked when the "checked" class is applied to the <label>. You either need to reorganize your CSS/HTML, or you can write some JavaScript that adds or removes the "checked" class to the <label> when the checkbox is updated.
The following is a simple jQuery script that will fix the problem with your "checked" class.
$(function() {
$("input[type='checkbox']").on('change', function() {
var $this = $(this);
var checked = $this.is(":checked");
if (checked)
$this.closest(".radek").find("label").addClass("checked");
else
$this.closest(".radek").find("label").removeClass("checked");
});
});
Updated Fiddle
Related
I want to show the div if another div class is loaded.
Show nanobar only if selected class is loaded, in other case nanobar will become hidden
css code sample:
.nanobar {
height: 75px;
width: 100%;
background: #fef9c7;
border:1px solid #fce181;
color:#333;
padding:10px;
margin-bottom:10px;
font-size: 1.2rem;
display:none;
}
HTML code sample:
<div class="nanobar">
<span>Content</span>
</div>
<div id="category_container" class="content-padding {if $category} selected{/if}"> </div>
any help in this regards will be appreciated.
The code checks if the second div has a selected class. If so, the first div will be displayed, otherwise the first div stays hidden.
let divElements = document.querySelectorAll('div');
if (divElements[1].classList.contains("selected")) {
divElements[0].classList.replace("hide", "show");
} else {
divElements[0].classList.replace("show", "hide");
}
.nanobar {
height: 75px;
width: 100%;
background: #fef9c7;
border:1px solid #fce181;
color:#333;
padding:10px;
margin-bottom:10px;
font-size: 1.2rem;
}
.hide {
display: none;
}
.show {
display: block;
}
<div class="nanobar hide">
<p>Hello</p>
</div>
<div class="apple jason selected hide">
<p>Jason</p>
</div>
Note: Removed the display property from nanobar class and made it into it's own class. Makes it easier to hide and show an element, as well as being able to reuse it for other elements.
You can read more about classList here
First check if you can find selected class:
var selected = document.getElementsByClassName("selected");
Then check if this variable has more then one element.
if (selected.length < 1) {
// Hide your nanobar
} else {
// Show it
}
This is not the full solution, if you still have troubles, ask in comments.
I have the following JavaScript code with inline CSS.
var container = display.getContainer();
container.style.cssText = 'width:100%;height:100%;z-index:100;object-fit: contain;';
document.body.appendChild(container);
I would like to move the inline CSS to the following class in style.css
.containerClass {
width:100%;
height:100%;
z-index:100;
object-fit: contain;
}
I have tried the following:
container.addClass('containerClass');
I've been unable to articulate my problem correctly, thus am having trouble finding the precise solution I am after.
Further -how would I go about telling the JavaScript file about the location of .containerClass?
Note: The classList property is not supported in Internet Explorer 9.
The following code will work in all browsers -
function addClass() {
var element, name, arr;
element = document.getElementById("container");
name = "mystyle";
arr = element.className.split(" ");
if (arr.indexOf(name) == -1) {
element.className += " " + name;
}
}
.mystyle {
background-color: black;
color: white;
}
div {
margin-top: 20px;
width: 100%;
padding: 25px;
font-size: 25px;
box-sizing: border-box;
border: 1px solid #000;
}
<p>Click the "Add Class" button to add the "mystyle" class to the container element:</p>
<button onclick="addClass()">Add Class</button>
<div id="container">This is a DIV element.</div>
In you style.css, define the properties for .containerClass.
style.css :
.containerClass {
width:100%;
height:100%;
z-index:100;
object-fit: contain;
}
When you want to add this styling, just add that class to the element you want to using javascript.
Javascript:
var container = document.getElementById("elementId");
container.classList.add("containerClass");
In javascript I have a variable which contains some value which i get from JSON.
var a =recipe[0].step[1].processingTime;//here processing time is stored in var a
I want to display this value by showing a description box, when I hover my mouse over a small div id in HTML.
<tr>
<td>Recipe 0</td>
<td>
<div id="p1"><div>
</td>
</tr>
How to do that? Can anyone please show me a easy solution.
If you only want the simple native html tooltip you can just set the elements title atrribute. For example the ones that get shown when you hover over the SO voting arrows
document.getElementById("p1").setAttribute("title",recipe[0].step[1].processingTime);
Demo
var text = "13ms";
document.getElementById("p1").setAttribute("title",text);
#p1 {
width:80px;
height:80px;
background:#323232;
}
<div id="p1"></div>
If however you are wanting a fancier one, you can do this with a little javascript and using css :hover, :after, attr css function, and the content property.
Give your div (or whatever element) a css class like below:
.withTooltip:hover:after {
content:attr(data-tooltip);
display:block;
padding:10px;
background:#323232;
border-radius:4px;
border:#000000;
color:#FFFFFF;
}
:hover will cause the style to applied only when the element is
hovered over.
:after will create a pseudo-element
conent you can use to set the text that the pseudo-element will display
attr will take the passed attribute name and get the value of that
attribute
Then use javascript to set the attribute to your saved text (in this case using data-tooltip)
document.querySelector("p1").dataset.tooltip = recipe[0].step[1].processingTime;
//or
document.querySelector("p1").setAttribute("data-tooltip",recipe[0].step[1].processingTime);
Demo
var someData = ["13ms","100ms","8ms","67ms"];
var elements = document.querySelectorAll(".withTooltip");
for(var i=0; i<elements.length; i++){
elements[i].dataset.tooltip = someData[i];
}
.box {
width:50px;
height:50px;
background:#86DDFF;
margin:10px;
position:relative;
display:inline-block;
}
.withTooltip:after {
content:attr(data-tooltip);
display:block;
padding:10px;
position:absolute;
right:-40px;
top:0px;
background:#323232;
border-radius:4px;
border:#000000;
color:#FFFFFF;
opacity:0;
transition:all 0.3s;
z-index:100;
pointer-events:none;
}
.withTooltip:hover:after {
opacity:1;
}
<div class="box withTooltip"></div>
<div class="box withTooltip"></div>
<div class="box withTooltip"></div>
<div class="box withTooltip"></div>
Here's a vanilla javascript version:
var a = "something to show";
function showProcTime(elem) {
elem.addEventListener("mouseout", clearProcTime);
elem.innerHTML = '<div class="popupBox">' + a + '</div>';
elem.style.backgroundColor = "#EFEFEF";
}
function clearProcTime(e) {
var elem = e.target;
elem.removeEventListener("mouseout", clearProcTime);
elem.innerHTML = "";
elem.style.backgroundColor = "#CCCCCC";
}
.popupBox {
display: block;
width: 200px;
height: 20px;
position: absolute;
top: 20px;
left: 20px;
background-color: #EFEFEF;
border: 1px solid;
padding: 10px;
}
<div id="p1" style="background-color:#CCCCCC;display:inline-block;width:200px;height:20px;" onMouseOver='showProcTime(this)'>roll over me
<div>
You could use jQuery:
var a =recipe[0].step[1].processingTime;
$('#p1').mouseenter(function(){
$(this).html(a)
}).mouseout(function(){
$(this).html('');
});
Have you tried jquery hover method? http://www.w3schools.com/jquery/event_hover.asp
and if you are using simple javascript try this: http://www.w3schools.com/jsref/event_onmouseover.asp
I think this is simple:
<html>
<script>
var a = 'the processing time you got from json';
function displayTitle(e){
e.title = a;
}
</script>
<body>
<table border>
<tr>
<td>Recipe 0</td>
<td onMouseOver='displayTitle(this);'>
<div id="p1"><div>
</td>
</table>
</body>
I'm trying to draw a 6x6 grid with divs, but when I create them with javascript and css, it doesn't show as expected.
css:
div{
width:30px;
height:30px;
margin:0px;
border:1px solid black;
float:left;
}
div:nth-child(6n+1){
clear:both;
}
javascript:
for(var i=0; i<36; i++){
document.body.appendChild(document.createElement('div'));
}
https://jsfiddle.net/kqzhorq0/
The above link demonstrates what I see in the browser.
But, when I select onload or onDomReady settings in jsfiddle, the grid shows as expected.
How can I get the grid to show properly using onload or onDomReady, and why isn't it showing properly without it?
If you can wrap your divs in a container and specify your selectors to target from within the container your code will work.
Here is a working snippet:
for(var i=0; i<36; i++){
document.getElementById("foo").appendChild(document.createElement('div'));
}
#foo div{
width:30px;
height:30px;
margin:0px;
border:1px solid black;
float:left;
}
#foo div:nth-child(6n+1){
clear:both;
}
<div id="foo"></div>
I also created an interactive demo on nth-child to help explain it further: http://xengravity.com/demo/nth-child/
The problem here, the first child of the body in the fiddle is the script element. You can inspect the html of the result panel to see the script element.
The nth-child will consider all the elements while using the index to search for an element, but using nth-of-type you can search for a particular type.
One choice is to use the :nth-of-type selector as below
div {
width:30px;
height:30px;
margin:0px;
border:1px solid black;
float:left;
}
div:nth-of-type(6n+1) {
clear:both;
}
Demo: Fiddle
Another is to insert the divs before the script like
for (var i = 0; i < 36; i++) {
document.body.insertBefore(document.createElement('div'), document.body.firstChild);
}
Demo: Fiddle
But a better solution will be use a custom container element instead of the body element
var ct = document.getElementById('container');
for (var i = 0; i < 36; i++) {
ct.appendChild(document.createElement('div'));
}
then
#container > div {
width:30px;
height:30px;
margin:0px;
border:1px solid black;
float:left;
}
#container div:nth-child(6n+1) {
clear:both;
}
Demo: Fiddle
I am trying to create a web page where on click of a button I can add div tags. What I thought to do was that I'll create two div tags within a single div so that over all presentation will be uniform and similar to a table having two columns and multiple rows and the first column contains only label's and second column will contain textbox.
Here is the JS file:
var counter = 0;
function create_div(type){
var dynDiv = document.createElement("div");
dynDiv.id = "divid_"+counter;
dynDiv.class="main";
document.body.appendChild(dynDiv);
question();
if(type == 'ADDTEXTBOX'){
ADDTEXTBOX();
}
counter=counter+1;
}
function question(){
var question_div = document.createElement("div");
question_div.class="question";
question_div.id = "question_div_"+counter;
var Question = prompt("Enter The Question here:", "");
var node=document.createTextNode(Question);
question_div.appendChild(node);
var element=document.getElementById("divid_"+counter);
element.appendChild(question_div);
}
function ADDTEXTBOX(){
var answer_div = document.createElement("div");
answer_div.class="answer";
answer_div.id = "answer_div_"+counter;
var answer_tag = document.createElement("input");
answer_tag.id = "answer_tag_"+counter;
answer_tag.setAttribute("type", "text");
answer_tag.setAttribute("name", "textbox");
answer_div.appendChild(answer_tag);
var element=document.getElementById("divid_"+counter);
element.appendChild(answer_div);
}
Here is the css file:
.question
{
width: 40%;
height: auto;
float: left;
display: inline-block;
text-align: justify;
word-wrap:break-word;
}
.answer
{
padding-left:10%;
width: 40%;
height: auto;
float: left;
overflow: auto;
word-wrap:break-word;
}
.main
{
width: auto;
background-color:gray;
height: auto;
overflow: auto;
word-wrap:break-word;
}
My problem is that the code is working properly but both the divisions are not coming in a straight line. after the first div prints on the screen the second divisions comes in another line. How can I make both the div's come in the same line?
PS: should I stick with the current idea of using div or should I try some other approach? like tables?
The reason its in diffrent lines lies in your JS code, try setting your class like following:
//question_div.class="question";
question_div.setAttribute("class", "question") ;
and
//answer_div.class="answer";
answer_div.setAttribute("class", "answer");
and also this:
//dynDiv.class="main";
dynDiv.setAttribute("class", "main");
Your divs have not class attribute set properly. I recommend chrome in-built tools for developers or FireBug add-on if you use Firefox to check whether elements you built are like you design them to be.
You may check code here: http://jsfiddle.net/Nnwbs/2/
var counter = 0;
function create_div(type){
var dynDiv = document.createElement("div");
dynDiv.id = "divid_"+counter;
//dynDiv.class="main";
dynDiv.setAttribute("class", "main");
document.body.appendChild(dynDiv);
question();
if(type == 'ADDTEXTBOX'){
ADDTEXTBOX();
}
counter=counter+1;
}
function question(){
var question_div = document.createElement("div");
//question_div.class="question";
question_div.setAttribute("class", "question") ;
question_div.id = "question_div_"+counter;
var Question = prompt("Enter The Question here:", "");
var node=document.createTextNode(Question);
question_div.appendChild(node);
var element=document.getElementById("divid_"+counter);
element.appendChild(question_div);
}
function ADDTEXTBOX(){
var answer_div = document.createElement("div");
//answer_div.class="answer";
answer_div.setAttribute("class", "answer");
answer_div.id = "answer_div_"+counter;
var answer_tag = document.createElement("input");
answer_tag.id = "answer_tag_"+counter;
answer_tag.setAttribute("type", "text");
answer_tag.setAttribute("name", "textbox");
answer_div.appendChild(answer_tag);
var element=document.getElementById("divid_"+counter);
element.appendChild(answer_div);
}
create_div("ADDTEXTBOX");
And about that aproach I mean div or tables, you are correct to use div, its generaly recommended to do so.
Also after you correct your JS code fix also a bit your css styles as you like.
If you are using chrome using inspect element and find the corresponding 'div' tag and try to adjust the style(position)
Try to position both Divs with absolute inside a main div that could be relative. something like
#mainDiv {
position:absolute; /* or relative depends how you have it*/
width:80%;
height:100%;
left:10%;
}
#div1 {
position:absolute;
width: 40%;
height:100%;
left:0px;
top:0px;
}
#div2 {
position:absolute;
width: 40%;
height:100%;
right:0px;
top:0px;
}
It's simple. To line up both div's, give the position of of the two div's as display:inline-block;
display:inline-block;
Note: BOTH div's have to have this property for them to appear in a line.