Reloading of javascript function via JQuery .change adds variables from previous runs - javascript

I would like to change fonts dynamically, But my code only behaves nicely the first time i change a font. It seems that my code remembers previous clicked buttons and adds those to be changed as well every time i select a new font for a button. My code is available at jsfiddle
function font(id,element){
$(id).bind('change',function(){
var fontTypeSelected = $(id).val();
$(element).css('font-family',fontTypeSelected);
});
}
$('#settings-ID').change(function(){
font('#font','#' + $('#settings-ID').val());
});
$('.list').on('click','.settings',function(){
// Set current row or box section ID
$('#settings-ID').val($(this).attr('id'));
$("#settings-ID").trigger("change");
});
.list div {
float:left;
padding:10px;
background-color:#CCC;
margin:10px 10px 0 0;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click on one of the buttons below to change font
<div class="list">
<div class="settings" id="1">Font one</div>
<div class="settings" id="2">Font two</div>
</div>
<br>Selected button ID: <input type="text" id="settings-ID" placeholder="None selected"><br>
<br>
<select class="form-control" id="font">
<option>Arial</option>
<option>Courier</option>
<option>Verdana</option>
<option>Times new roman</option>
</select>
I really hope someone can help me with this problem. I'm kind of stuck here.

You are defining multiple change events when you call the function
Use .unbind("change") to delete the change event before defining the next one.
function font(id,element){
$(id).unbind('change').bind('change',function(){
var fontTypeSelected = $(id).val();
$(element).css('font-family',fontTypeSelected);
});
}

Related

avoid multiple cloned or duplicated div on button click and insertAfter the same last cloned div once

I have a div and I want to duplicate it. I mean that I wanted the same div to be duplicated once. I have used such code for it.
$("#btnAddRules").click(function(){
$(".div1_section").clone().insertAfter($(".div1_section"));
});
But, when click on the button again and again , it is adding multiple of the DIVs and I wanted only one div to be inserted after the last div.
<div class="col-md-8">
<div class="row div1_section">
<div class="col-md-6">
<label>hey hey hey</label>
<select class="form-control">
<option>klklk</option>
<option>huhuuh</option>
</select>
<br/>
</div>
<div class="col-md-6">
<label>abc</label>
<div class="input-group-currency">
<span class="currency">pk</span>
<input type="text" class="form-control input-currency" name="start" value="20'000" style="float:left">
</div>
</div>
</div>
Hope to hear from you, soon.
Thanks
Use last() to target just the last element from the collection:
$("#btnAddRules").click(function() {
$(".div1_section").last().clone().insertAfter($(".div1_section").last());
});
.div1_section {
line-height:50px;
margin:20px 0;
padding:0 20px;
background:tomato;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnAddRules">Add More Rules</button>
<div class="div1_section">Original</div>
Remove the event listener after the first click like this:
var callback = function () {
document.getElementById('btnAddRules').removeEventListener('click', callback);
$(".div1_section").clone().insertAfter($(".div1_section"));
}
document.getElementById('btnAddRules').addEventListener('click', callback);
Sorry for using vanilla JS and your jquery, I'm more used to write vanilla JS.
Use last() to target just the last element from the collection and after() to put div after a div:
$("#btnAddRules").click(function(){
$(".div1_section").last().after($(".div1_section").last().clone());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1_section" >
Hi this is testing
</div>
<button type="button" id="btnAddRules">
Add DIV
</button>

slideDown does not work for the first time

I'm adding animation to show a hidden div when a checkbox is changed,
The first time it's clicked the div appears with no animation but it works both ways after the first time.
How can I make it work also on the first time?
Here is my div (also using bootstrap)
var postOptionsSourcesWrapper = $("#post-options-sources-wrapper");
var postOptionsExclusiveCheckbox = $("#post-exclusive-cb");
postOptionsExclusiveCheckbox.change(function() {
if ($(this).is(":checked")) {
postOptionsSourcesWrapper.slideUp(300, "easeOutCirc", function() {
postOptionsSourcesWrapper.addClass("hidden");
});
} else {
postOptionsSourcesWrapper.removeClass("hidden");
postOptionsSourcesWrapper.slideDown(300, "easeOutCirc");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="post-options-sources-wrapper" class="margin-b-5 hidden">
<label class="text-md thick-600">Original post references</label>
<div class="box-marker box-marker-white">
<div class="thick-600 color-gray text-sm text-uppercase">
Add one or multiple sources.
</div>
</div>
</div>
UPDATE: this issue is solved by adding display:none; to the div
When adding the bootstrap class .hidden to hide for some reason it's not adding the display:none; that is part of the .hidden class in bootstrap... not sure why, but adding the style display:none; or calling postOptionsSourcesWrapper.hide() solves this issue.
This code will achieve what you want to achieve.
You just have to replace your script with this one.
var postOptionsSourcesWrapper = $("#post-options-sources-wrapper");
var postOptionsExclusiveCheckbox = $("#post-exclusive-cb");
postOptionsSourcesWrapper.hide();
postOptionsExclusiveCheckbox.change(function() {
postOptionsSourcesWrapper.slideToggle(300,postOptionsSourcesWrapper.is(":checked"));
});

jQuery addClass and removeClass in checkboxes

i am new to jQuery, and i am trying to figure out how to create the jQuery function of the checkboxes, what i want to attain is that, when a user clicked on Yes the checkboxes(which will have a display:none) will have a checkmark. But if a user will click on No the checkmark will be removed.
This will be a selection of multiple Yes and multiple No
have a look at the page im working on http://jsfiddle.net/4x2f52ka/
I have started the script for it, but for some reason, when i started to select Yes on the first selection, another yes to the second selection, and if im gonna select No to the 3rd item, the 2 Yes will be removed. It is fine if i will select all yes and all no, but if im gonna select alternate Yes and No, it doesnt allow me to.
this is my code for the html
<div class="row marginBottom">
<div class="col-xs-6">
<label class="alignMid">Have you found a property?</label>
</div>
<div class="col-xs-6">
<span class="opt_yes"><p style="line-height: 38px; font-size:15px;">YES</p></span>
<span class="opt_no"><p style="line-height: 38px; font-size:15px;">NO</p></span>
<input type="checkbox" name="FoundProperty"/>
</div>
</div>
<div class="row marginBottom">
<div class="col-xs-6">
<label class="alignMid">Would you like a free RP Data Property Report?</label>
</div>
<div class="col-xs-6">
<span class="opt_yes"><p style="line-height: 38px; font-size:15px;">YES</p></span>
<span class="opt_no"><p style="line-height: 38px; font-size:15px;">NO</p></span>
<input type="checkbox" name="FreeRPData" />
</div>
</div>
and this is my code for the jQuery
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('.opt_yes').click(function () {
jQuery(this).addClass('selected');
jQuery('.opt_no').removeClass('selected')
if (jQuery(this).hasClass('selected')) {
jQuery(this).parent().find("input[type='checkbox']").prop('checked', true);
}
});
jQuery('.opt_no').click(function () {
jQuery(this).addClass('selected');
jQuery('.opt_yes').removeClass('selected')
if (jQuery(this).hasClass('selected')) {
jQuery(this).parent().find("input[type='checkbox']").prop('checked', false);
}
});
});
</script>
Can anyone help me please?
You're loosing the context of your check boxes. It works for yes, because you use this, but for the no items, you just grab every 'no box' on the document using jQuery('.opt_no'). Because it's so broad, all 'no box' boxes are affected.
You can very easily narrow your selectors with this syntax: jQuery('selector', context).
In this case, I recommend this.parentNode like so :
jQuery('.opt_yes', this.parentNode).removeClass('selected')
See my demo here: http://jsfiddle.net/m5aug81a/
For more info on using contexts for your jQuery objects, see here
You have to remove selected class only from sibling of yes or no. Here's the code:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('.opt_yes').click(function () {
jQuery(this).addClass('selected');
jQuery(this).siblings('.opt_no').removeClass('selected')
if (jQuery(this).hasClass('selected')) {
jQuery(this).parent().find("input[type='checkbox']").prop('checked', true);
}
});
jQuery('.opt_no').click(function () {
jQuery(this).addClass('selected');
jQuery(this).siblings('.opt_yes').removeClass('selected');
if (jQuery(this).hasClass('selected')) {
jQuery(this).parent().find("input[type='checkbox']").prop('checked', false);
}
});
});
</script>

I want to create autocomplete select box

My html code is:
<select class="form-control" id="city" style="width:100%; margin-left:2%;">
<option>Sonal</option>
<option>abcd</option>
<option>3</option>
<option>4</option>
<option>aaaa</option>
</select>
What i want:
If i want to select abcd.
Then there will be two type of selection method.
first click on drop down and select one option.
second type a key in select box then the related answer will be filter.
ex: when we type 'a' in select box then two option must filter in dropdown.
1.abcd
2.aaaa
Have a look at these demo fiddles
Demo fiddle1 and this Demo Fiddle 2
The idea is to rebind the values in the select list with the option having the filter text.
$('<option>').text(option.text).val(option.value).attr('rel', option.rel)
Refrences
http://dragonfruitdevelopment.com/filter-a-select-menu-with-jquery/
You can use jQuery Autocomplete which gives all the flexibility for any solution.
If I understand your problem your answer is <datalist> controll
here is an example from w3
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist
it is a combination of an input and a dropdown menue in wich user can write in and dropdowns are filtered...
/*This is a generical editable select, with a function can control all editableselect in a html or php page */
//html
<input type="text" name="maquina" id="maquinain" syze="30"/>
<input type="button" class="btnselect" id="maquina" value="v"/>
<div class="select" id="maquinadiv">
<div class="suggest-element" id="something">something</div>
<div class="suggest-element" id="something1">something1</div>
<div class="suggest-element" id="something2">something2</div>
<div class="suggest-element" id="something3">something3</div>
</div>
//css
.suggest-element{
margin-left:5px;
cursor:pointer;
}
.select {
position:absolute;
z-index: 100;
width:350px;
border:1px solid black;
display:none;
background-color: white;
}
//javascrip-jquery
$('.btnselect').click(function(){
//get input and div
var inp = $(this).attr('id')+"in";
var div = $(this).attr('id')+"div";
//show the div
document.getElementById(div).style.display = 'block';
//click in select
$('.suggest-element').click(function(){
//get id of the click element
var id = $(this).attr('id');
//Edit the input with the click element data
document.getElementById(inp).value=id;
//hide the div
document.getElementById(div).style.display = 'none';
});
});

How to have slideToggle for multiple items on one page?

Im having problems with this code to work.. http://jsfiddle.net/whitewiz/z4fpx/
HTML
<h1 id="flip">Title<h1>
<div id="panel">
<p>Description that slides down</p>
</div>
<h1 id="flip">Title<h1>
<div id="panel">
<p>description that DOESN'T slide down</p>
</div>
JavaScript
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
and CSS
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
They work for first description, but doesn't work for the rest. I have about 18 #panels that should slide down, when I press on "Title" but only the first works.. Could you please find the missing piece in javascript that doenst allow multiple toggle?
Example on -> http://jsfiddle.net/whitewiz/z4fpx/
The first one works because that is the first element in the DOM with that id. Generally it is bad practice to have the same id assigned to multiple elements. Instead, use classes, like this:
HTML:
<h1 class="flip">Title<h1>
<div class="panel">
<p>Description that slides down</p>
</div>
<h1 class="flip">Title<h1>
<div class="panel">
<p>description that DOESN'T slide down (but does now)</p>
</div>
CSS:
.panel,.flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
.panel
{
padding:50px;
display:none;
}
I assume you only want to expand the panel following the header that you clicked on, in which case you need to get the closest element with the class name "panel" that follows the "flip" that was clicked on.
$(document).ready(function(){
$(".flip").click(function(){
$(this).next().find(".panel").slideToggle("slow");
});
});
Working example: http://jsfiddle.net/BBQJy/
The initial question seems to be lacking proper closing tags, an error that was duplicated in Nile's answer. Therefore, it didn't work for the original poster.
Based on Anna Brila's updated jsfiddle (http://jsfiddle.net/whitewiz/WuNHz/2), a possible correct solution would be:
$(".flip").click(function(){
$flip = $(this);
$content = $flip.next();
$content.slideToggle();
});
This is predicated on the use of classes instead of ids.
Full working example: http://jsfiddle.net/wy8gq1bj/1
Note: In the example, the only HTML I changed was the removal of the <br> immediately after the third , which was keeping the last item from expanding and collapsing.

Categories

Resources