how to change placement of input and its value with jquery - html

I'm using .html() to get inputs inside a div and place it in another element using .html() again the problem is I cant get it with its value.
$("#myButton").click(function(){
$(".element2").html($(".element1").html());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</script>
<div class="element1">
<input type="text" placeholder="enter something then clone it!"/>
</div>
<div class="element2"></div>
<button id="myButton">click to clone</button>

To copy one element to another, you can use .clone()
var copy = $(".element1 > *").clone()
this will clone all of the elements with .element1 - you can then .append()/.appendTo() these to element2.
Updated snippet:
$("#myButton").click(function(){
$(".element1 > *").clone().appendTo(".element2");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element1">
<input type="text" placeholder="enter something then clone it!"/>
</div>
<div class="element2"></div>
<button id="myButton">click to clone</button>

Related

Toggle between two different tag contents using checkbox

HTML
<body class="music">
<pre class="chord">Chords</pre>
<div class="lyric" style="display: none">Lyrics</div>
<input class="c" id="event" type="checkbox" checked data-toggle="toggle" data-size="small" width="5px" data-onstyle="info" data-offstyle="info" data-on="Chords" data-off="Lyrics">
</body>
Please help me with jquery code. By default only pre tag contents are displayed. When checkbox is checked I need to display only the contents of div tag. When box is unchecked, I want the reverse to be happened i.e. only show contents of pre tag.
So,continuing the comment earlier, here's the code that you may want to use.
$(function(){
var chord = $(".chord");
var lyric = $(".lyric");
var event = $("#event");
event.on("change", function(){
chord.toggle();
lyric.toggle();
});
})
by leveraging the data attributes in your HTML, a better way to do it is to update pre content based on checkbox selection
$(function(){
var selection = $(".selection");
var event = $("#event");
event.on("change", function(){
var content = $(this).is(":checked") ? $(this).data("on") : $(this).data("off");
selection.text(content);
});
})
<script
src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<body class="music">
<pre class="selection">Chords</pre>
<input
class="c"
id="event"
type="checkbox"
checked data-toggle="toggle"
data-size="small"
width="5px"
data-onstyle="info"
data-offstyle="info"
data-on="Chords"
data-off="Lyrics" />
</body>
HTML:
<div id="content1">Content 1</div>
<div id="content2">Content 2</div>
<input type="checkbox" checked id="checkbox">
CSS:
#content2 {
display: none;
}
JS (using JQuery):
$(function() {
$('#checkbox').on('click', function() {
if (!$(this).is(':checked')) {
$('#content1').hide();
$('#content2').show();
} else {
$('#content1').show();
$('#content2').hide();
}
});
});
If you have any questions, ask.
you just need to toggle the displays. I replaced the pre tag with a div for spacing
function jsdisplay(){
$(".chord").eq(0).toggle();
$(".lyric").eq(0).toggle();
}
pre{
margin:0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="music">
<pre class="chord">Chords</pre>
<div class="lyric" style="display: none">Lyrics</div>
<input class="c" id="event" type="checkbox" checked data-toggle="toggle" data-size="small" width="5px" data-onstyle="info" data-offstyle="info" data-on="Chords" data-off="Lyrics" onchange="jsdisplay()">
</body>

How would I add range slider mockups in bootstrap 4?

I have been playing with Bootstrap 4 for a bit. I have created a range form with a slider. I would like to add mockups (little lines or numbers on top of the slider to know what you are selecting) or even a number left or right of the slider, but I am not sure how. Here is the code:
<div class="form-group">
<label for="range">How many flags would you like?</label>
<input class="form-control-range" type="range" name="flag_number" id="range" list="range">`
</div>
I have tried using the datalist tag, but it doesn´t seem to work... How would one do it?
Bootstrap 4 real input type range will be like this
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="ex6" value="0">
and add some text for the display the value with this code :
<span>Current Slider Value: <span id="ex6Val"></span></span>
finally add the javascript function (use jQuery)
$(document).ready(function(){
$('#ex6').on('change', function(e){
var id = e.target.value;
document.getElementById("ex6Val").innerHTML = id;
});
$('#ex6').change();
});
Check the snippet
$('#ex6').on('change', function(e) {
var id = e.target.value;
document.getElementById("ex6Val").innerHTML = id;
});
$('#ex6').change();
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-center">
<div class="col">
<div class="form-group">
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="ex6" value="0">
<span>Current Slider Value: <span id="ex6Val"></span></span>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
// With JQuery
$("#ex6").slider();
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
// Without JQuery
var slider = new Slider("#ex6");
slider.on("slide", function(sliderValue) {
document.getElementById("ex6SliderVal").textContent = sliderValue;
});

Hiding submit button with CSS when input field is focused

Problem: I want to have the submit button of my search box (HTML Form) to be hidden until the user clicks into the text input box.
HTML:
<div class="views-exposed-form">
<div class="views-exposed-widgets clearfix">
<div id="edit-search-api-views-fulltext-wrapper" class="views-exposed-widget views-widget-filter-search_api_views_fulltext">
<div class="views-widget">
<div class="form-item form-type-textfield form-item-search-api-views-fulltext">
<input placeholder="Search" type="text" id="edit-search-api-views-fulltext" name="search_api_views_fulltext" value="" size="26" maxlength="128" class="form-text">
</div>
</div>
</div>
<div class="views-exposed-widget views-submit-button">
<input type="submit" id="edit-submit-display-products" name="" value="Apply" class="form-submit">
</div>
</div>
</div>
What I have tried I know you can use at least some type of conditions when working with CSS. Like this right here: how-to-affect-other-elements-when-a-div-is-hovered
My problem now is that my elements are not directly inside of each other. I already played around with something like showing the button when hovering over wrapper div.
It is hidden like this:
#block-views-exp-display-products-page .views-submit-button {
visibility: hidden;
}
What I actually need now is something like this:
#edit-search-api-views-fulltext:focus (operator) #block-views-exp-display-products-page .views-submit-button {
visibility: visible;
}
But I dont know how to do that.
Edit:
In case anyone comes across this, this is my final solution:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#edit-search-api-views-fulltext").on('click', function(){
$("#edit-submit-display-products").css("visibility", "visible");
});
});
</script>
<script>
$(document).ready(function() {
$("#edit-search-api-views-fulltext").on('focusout', function(){
if (!$("#edit-submit-display-products").is(":hover")) {
$("#edit-submit-display-products").css("visibility", "hidden");
}
});
});
</script>
This will hide the button whenever you click outside of the input field and prevents the button from disappearing when trying to click on it.
You can leverage :focus-within.
The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)
MDN
Support is non-IE/Edge though.
Something like:
.views-submit-button input {
visibility: hidden
}
.views-exposed-widget:focus-within + .views-submit-button input {
visibility: visible
}
.views-submit-button input {
visibility: hidden
}
.views-exposed-widget:focus-within+.views-submit-button input {
visibility: visible
}
<div class="views-exposed-form">
<div class="views-exposed-widgets clearfix">
<div id="edit-search-api-views-fulltext-wrapper" class="views-exposed-widget views-widget-filter-search_api_views_fulltext">
<div class="views-widget">
<div class="form-item form-type-textfield form-item-search-api-views-fulltext">
<input placeholder="Search" type="text" id="edit-search-api-views-fulltext" name="search_api_views_fulltext" value="" size="26" maxlength="128" class="form-text">
</div>
</div>
</div>
<div class="views-exposed-widget views-submit-button">
<input type="submit" id="edit-submit-display-products" name="" value="Apply" class="form-submit">
</div>
</div>
</div>
You could add Javascript (jquery) to solve this problem:
<script src="code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$("#edit-search-api-views-fulltext").on('click', function(){
$("#edit-submit-display-products").css("visibility", "visible");
});
});
</script>

How to get data from a div in AngularJS

I use an input text to put text in div. When I write something in the input and I press the key Enter, the text from the input field is added to a div just below and normally, an array should be updated in my controller with the new value. I don't know how can I get the list of element text added to the div from a controller.
I'm trying to use the property n-change on my div with ng-model but it doesn't work.
<div class="row center" id="searchD" >
<form id="search" >
<input type="text" id="searchInput" onchange="createTag($(this).val());"/>
</form>
</div>
<div class="row center" ng-controller="Mainctrl">
<div id="tagContainer" ng-model="tagList" ng-change="tagList()">
</div>
</div>
You could do it something like below if that is what you are expecting.
Html :
<div class="row center" id="searchD" ng-controller="Mainctrl">
<form id="search" >
<input type="text" id="searchInput" ng-model="tagInput" ng-change="addTag()"/>
</form>
</div>
<div class="row center">
<div id="tagContainer" ng-repeat="tag in tagList">{{tag}}
</div>
</div>
Mainctrl:
$scope.tagList = [];
$scope.addTag = function () {
$scope.tagList.push($scope.tagInput);
$scope.tagInput = '';
}
Are you asking how to get data from the controller onto the html page? If so, you just use angular interpolation {{ someData }}
<div id="tagContainer" ng-model="tagList" ng-change="tagList()">
{{ tagList }}
</div>

Directive for dynamic background color

I have a template with this input
<div class="form-group" LayoutDirective="">
<label>Background color for views</label>
<input type="text" name="background_color" id="background_color" ng-model="selectedLayout.background_color" class="form-control" />
</div>
and the input gets the value from the spectrum pick color with this code
<script>
$("#background_color").spectrum({
color: "#f00"
}); </script>
What I want is when I click on this button
<button class="btn btn-primary" id="saveChanges-button" ng-click="saveChanges(selectedLayout)">Save</button>
to change my background-color. I created a directive, but i don't know why doesn't work.
This is my directive:
(function() {
angular.module('routerApp').directive('LayoutDirective', function() {
$('saveChanges-button').click(function() {
var backgroundColor = $('#background_color').val();
$('body').css('background-color', backgroundColor);
});
});
})
Ok so what you can do here is use ng-style bind to this text scope.
<div ng-app="routerApp" ng-controller="ctrl">
<div class="form-group" ng-style="{'background-color': color}">
<label>Background color for views</label>
<input type="color" name="background_color" id="background_color" ng-model="color" class="form-control" />
</div>
</div>
And if you want to add some default color to it . Specify in controller or ng-init. whatever you like
angular.module('routerApp',[]).controller('ctrl',function($scope){
$scope.color= '#752222';
});
See fiddle here