I'm making a grid of divs that can be toggled on and off. I need to post the values of these toggled divs to a database.
Currently I have jQuery waiting for clicks on the divs and then changing checkbox values on a hidden checkbox element...
$('.icon').click(function(){
var checkValue = $(this).attr("data-c");
// Then tick hidden checkbox where data-c = checkbox
});
As I end up posting this data with ajax, is there a better way to do this?
Here's what it looks like:
You actually don't need JS.
Use a <label> elements to wrap your checkbox and a span.
Change the style of that inner span using the input:checked next sibling selector +:
label.icon span{
cursor: pointer;
display: inline-block;
width: 75px;
height: 75px;
background:url(http://i.stack.imgur.com/ceycQ.jpg) no-repeat;
border: 3px solid #0186C9;
border-radius: 12px;
}
label.icon input{ /* hide the checkbox */
position: absolute;
visibility: hidden;
}
label.icon input:checked + span{ /* when input is checked */
background-position: 0 -75px;
}
<form action="">
<label class="icon">
<input type="checkbox" name="dog">
<span></span>
</label>
</form>
on form submit you'll submit all the correct data without a single line of JS
I've found a similar question here: Jquery Use Image As CheckBox
As an alternative to storing the value in a check box you could store it in a object? For example:
window.icons = {};
$('.icon').click(function() {
var id = $(this).data('identifier');
window.icons[id] = !!window.icons[id];
});
Also check out this example for a similar use http://jsfiddle.net/bdTX2/
Related
I have a button in angular:
<button type="button" id="bulkInputButton"
(click)="toggleBulkInput()"
#bulkInputButton>Show
Bulk Input</button>
I want to show different tooltip based on some condition. Basically I want to incorporate this jquery code in the button tag itself:
$("#InputForm button#bulkInputButton").mouseenter(function(e) {
//TODO
if($("#inputTextArea").css("display")=="none") {
toolTip(this,"<font color='#444444'>Note: This is not a replacement for Bulk Upload</font><br><br>On click of this button, it will display text area where user can manually enter data or copy data from excel sheet or from any editor and paste it in bulk input text area.","Bulk Input");
} else {
toolTip(this,"Click to hide bulk input text area.","Bulk Input");
}
});
How can I do this?
Thank you!
You can do with the help of jquery in angular
Your typescript code should be look like.,
toggleBulkInput(){
// get id of elemeneRef
// make your dynamic logic
// call enableToolTip function
}
enableToolTip(id, validationMsg): void {
let $control;
$control = $(id);
$control.attr('data-original-title', validationMsg);
$control.tooltip('show');
}
Inside you html code you can call action method
<button type="button" id="bulkInputButton"
(click)="toggleBulkInput()"
#bulkInputButton>Show
Bulk Input</button>
By this way you can implement dynamic tooltips in angular application
In angular you should "re-thinking" using variables.
I don't know about your tooltip, so, Imagine you has a typical .css
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
And a variable "toogle"
Some like
<button (click)="toogle = !toogle">toogle</button>
<div class="tooltip">
Hover over me
<span *ngIf="toogle" class="tooltiptext"><b>Toogle</b> is true</span>
<span *ngIf="!toogle" class="tooltiptext"><b>Toogle</b> is false</span>
</div>
Makes the "trick", see that all you need is a variable. This variables makes that show one or another tooltip
The stackblitz
NOTE: You should avoid use jquery together Angular
I have an input field in my application and I need to place a permanent label beside entered text in that input field. Also, the styles of the label to be placed are different from that of the entered text. Something like as shown below,
I tried replicating the behavior here. I am able to place a label beside the entered text, but I want the label to also move forward as the characters are being typed in the input box. Currently, my entered text comes on top of the label placed, as shown below-
I found a similar question here, but in the suggested answer, the label doesn't move with the entered text.
How can I achieve this behavior? Thanks a lot in advance!
Styling the label differently from the input is what makes this especially challenging; they'll need to be different DOM nodes, so simpler solutions like input masking will not be sufficient.
You'll need to scale the width of the input based on its content; one way would be to use a normal <input> field and resize it via javascript on every keystroke.
Alternatively, you could use a contentEditable element with display: inline-block to automatically handle the layout; then when you're ready to do something with that value you can read its innerHTML. A simple demonstration is below:
getvalue = () => {
console.log(document.getElementById('input').innerText)
}
.fake_form_input {
border: 1px solid;
paddding: 0.2em;
}
#input {
display: inline-block;
min-width: 1em;
padding: 0.2em;
outline: none;
}
.label {
display: inline-block;
color: red;
}
<div class="fake_form_input">
<div contenteditable id="input">0
</div>
<div class="label">KM</div>
</div>
<button onclick="getvalue()">Go</button>
(Note that this introduces some a11y issues, you'll want to add some ARIA tagging etc if you use this technique)
Give it a try:
const myInput = document.getElementById('inp');
const inputLable = document.querySelector('.inputContainer span');
myInput.addEventListener('keydown', handleLable)
function handleLable(element) {
const charLength = element.target.value.length;
inputLable.style.left = charLength * 9 + 20 < myInput.clientWidth - 40 ? charLength * 9 + 20 + "px" : myInput.clientWidth - 30 + "px";
}
.inputContainer{
position:relative;
width:300px;
}
.inputContainer span{
position:absolute;
left:16px;
top:50%;
transform:translateY(-50%);
color: red;
}
#inp{
width: 100%;
padding-right: 48px;
font-size: 16px;
}
<div class="inputContainer">
<input type="text" id="inp" />
<span>KMs</span>
</div>
Above is generally what I'm trying to create. There has to be a piece of text which is always in the textarea. It can be dragged to a different part of the text area, but it can never be deleted. You can type both before it and after it.
I've been trying to find the best approach to accomplish this for several days and have come up short. Anyone ideas?
A start , using contentEditable parent element , div having input type="text" element with disabled attribute set to "true" . TODO: Drag and Drop adjustments ; currently only utilizes .appendChild to drop div containing input to parent div , without placing draggable element between editable text in parent contentEditable div
input {
color: dodgerblue;
font-size: 28px;
font-weight: bold;
font-family: arial;
background: none;
border: none;
width: 220px;
padding: 0px;
margin: 0px;
position: relative;
display: inline-block;
}
div[droppable="true"] {
width: 450px;
height: 300px;
border: 1px solid #000;
}
div[draggable="true"] {
width: 250px;
}
div[draggable="true"]:hover {
cursor: pointer;
}
<script>
function dragstartHandler(e) {
// add `input` element's name to the data transfer object
e.dataTransfer.setData("text/plain", e.target.firstElementChild.name);
}
function dropHandler(e) {
e.preventDefault();
// get the `name` of the target and add the moved element to the target's DOM
var data = e.dataTransfer.getData("Text");
e.target.appendChild(
document.querySelector("input[name=" + data + "]").parentElement
);
}
document.ondragover = function(event) {
// prevent default to allow drop
// TODO: drop `input` parent `div` element between `contentEditable` text
event.preventDefault();
console.log(event)
};
</script>
<div contentEditable="true" droppable="true" ondrop="dropHandler(event);">
This text can be edited
<div draggable="true" ondragstart="dragstartHandler(event);">
<input disabled name="fixed" type="text"
minlength="14" maxlength="14" value="BUT THIS CAN'T" />
</div>and so can this one here
</div>
Update: Fixed and working. Thanks everyone for the help.
Hello I'm making a javascript/jQuery button that when its clicked, a Div appears (display: inline-block), and when its clicked again the Div goes back to display: none. Ideally I would want to animate the movement, but I really just want to get it working first.
My button...
<button> Menu Test </button>
My function (updated)...
<script>
$("button").click(function(){
$("#flexMenu").toggle("slow", function() {
});
});
</script>
The CSS for flexMenu...
#flexMenu {
/* display: inline-block;*/
position: fixed;
float: left;
background: #1f1f1f;
margin: 3.9em 0 0 0;
padding: .25em;
width: 15%;
height: 6em;
border: 2px solid #fff;
z-index: 100;
}
I'm really just to sure how to grab the display property of the ID and change it. I've done a hover function before using CSS ease-out to make divs grow in size when hovered and change class by using $(this).toggleClass(nameOfClass), but I have never tried just changing an element. The other questions like this didn't really fit just changing the display value. Thanks for any help.
you should use jquery :
$("button").click(function(){
$("#flexMenu").toggle();
});
Updated with the jQuery .on() method which allows you to bind specific events to that button (event listeners).
$("button").on('click', function () {
$('#flexMenu').toggle("slow");
});
Fiddle
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!