close toggle in javascript by default - javascript

I have this code
$(".filter-tag-group .tag-group .show_filter_content").on('click', function() {
var $icon = $(this).find('i').toggleClass('fa-plus fa-minus');
var $group = $icon.closest('.tag-group');
$group.find('.filter-title').toggleClass('active');
$group.find('.filter-content').toggle();
});
which the result is:
As you see all my groups are open by default, I want them to be closed when page loads (default).
HTML
<div class="collection-leftsidebar sidebar col-sm-3 clearfix">
<div class="sidebar-block filter-block">
<div class="sidebar-title">
<span>{{ __('Advanced Search') }}</span>
<i class="fa fa-caret-down show_sidebar_content" aria-hidden="true"></i>
</div>
<div id="tags-filter-content" class="sidebar-content">
<div class="filter-tag-group">
//this is the part that looping (need to be closed)
<div class="tag-group">
<p class="title">
<span class="filter-title show_filter_content">{{ __('Price Range') }} <span class="pull-right"><i class="fa fa-minus"></i></span></span>
</p>
<div class="row filter-content">
<div class="col-md-6">
<div class="form-group">
<label for="min_price" hidden>{{ __('Min') }}</label>
<input type="text" name="min_price" class="form-control" placeholder="Rp Min">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="max_price" hidden>{{ __('Max') }}</label>
<input type="text" name="max_price" class="form-control" placeholder="Rp Max">
</div>
</div>
</div>
</div>
</div>
</div>
which part of my script should I change to achieve that?

How about hide it by css. coz css will load first than javascript/jquery. So in your case you want to hide it by default so you must done it by css.
.[class-name here] {
display: none;
}
.[class-name here].active {
display: block;
}

Related

JS: Expand position:absolute parent when dynamically adding relative divs

I am using absolutely positioned containers to slide screens left and right on "Next" and "Back". You can see this here: http://opencdesign.herokuapp.com/offer
Click "Got it" to move to 2nd screen, which is where the problem lies. If you click "Add item or category" enough times, the inputs will expand past the footer.
What is the simplest way to expand the height of the window as I add inputs? I'm also open to an alternative method of sliding screens left and right than using absolute positioning.
HTML
<div id="offer-2">
<div class="row one-margin-bottom">
<div class="small-12 medium-11 small-centered columns">
<h5 class="">What share of purchases will you accept in Currents?</h5>
<!-- <a class="offer-info-popup_open"><i class="half-margin-right fa fa-lg fa-question-circle"></i>How it works</a> -->
</div>
</div>
<div class="row left">
<div class="small-12 medium-6 small-centered columns">
<div class="row">
<div class="input-left small-3 columns">
<p><strong><img class="" src="{% static 'img/symbol-navy.svg' %}"/> share</strong></p>
</div>
<div class="input-right small-9 columns">
<p id="item-title"><strong>Item or category</strong></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-12 medium-6 small-centered columns">
<div id="item-1" class="row collapse">
<div class="input-left small-3 columns">
<div class="relative">
<input name="discount-amount-1" type="number" class="fit-left qtr-margin-right" placeholder="20" value="20"/>
<span class="input-icon-right">%</span>
</div>
<!-- <span class="input-sizer"><select name="discount-type-1">
<option selected>% of</option>
<option>$ of</option>
</select></span> -->
</div>
<div class="input-right small-9 columns">
<div class="fit-left half-margin-top one-margin-right one-margin-left">of</div>
<div class="relative input-sizer">
<input name="item-name-1" type="text" placeholder="Item or category name" value="All products" class="good-cat" />
<i class="remove-input alert fa fa-times"></i>
</div>
</div>
</div>
<div id="item-2" class="row collapse">
<div class="input-left small-3 columns">
<div class="relative">
<input name="discount-amount-2" type="number" class="fit-left qtr-margin-right" placeholder="20" value="20"/>
<span class="input-icon-right">%</span>
</div>
<!-- <span class="input-sizer"><select name="discount-type-1">
<option selected>% of</option>
<option>$ of</option>
</select></span> -->
</div>
<div class="input-right small-9 columns">
<div class="fit-left half-margin-top one-margin-right one-margin-left">of</div>
<div class="relative input-sizer">
<input name="item-name-2" type="text" placeholder="Item or category name" value="All services" class="good-cat" />
<i class="remove-input alert fa fa-times"></i>
</div>
</div>
</div>
<a id="add-item" class=""><i class="half-margin-top fa fa-plus-circle half-margin-right"></i>Add item or category</a>
<div class="row one-margin-top">
<a class="prev-offer button round secondary">Back</a>
<a class="next-offer button round">Next</a>
</div>
</div>
</div>
</div>
JS
var id = 3
$('#add-item').click(function(){
$(this).before('<div id="item-'+id+'" class="row collapse hidden"><div class="input-left small-3 columns"><div class="relative"><input name="discount-amount-'+id+'" type="number" class="fit-left qtr-margin-right" placeholder="20" value="20"/><span class="input-icon-right">%</span></div></div><div class="input-right small-9 columns"><div class="fit-left half-margin-top one-margin-right one-margin-left">of</div><div class="relative input-sizer"><input name="item-name-'+id+'" type="text" placeholder="Item or category name" /><i class="remove-input alert fa fa-times"></i></div></div></div>');
$('#item-'+id+'').slideDown();
id ++
});
I think you could potentially target the div with a CSS rule and handle its overflow-y with scroll (or increase its size, if you want to expand it). For a quick example, using jQuery, you could have a condition followed by $('#mydiv').css("overflow-y", "scroll"); (though it doesn't look like that div currently has an ID or custom Classname, so feel free to change that to whatever works best).
Alternatively, you could use a second, hidden div which is a parent to this one, and expand the hidden div. By using a relative size, you'd be able to fill into the invisible parent =)
It looks good, though!

How to change the Checkbox icon to behave like **indeterminate** with "+" and "-" Symbols

I have checkbox with its original behaviour. I wanted to add + and - symbols to it while expanding and collapsing those checkbox.
Can any one please tell me how can I achieve this ?
Following is my Code in jade:
.form-group
.checkbox#some-checkbox(style="margin-left: 10px;")
label(data-toggle='collapse', data-target='#collapseOne', aria-expanded='false', aria-controls='collapseOne')
input(type='checkbox')
| My Name
#collapseOne.collapse(aria-expanded='false')
.well1
.row
.col-sm-12.col-lg-12
.nutrition-category
.row.header3.margin-left-10
.row.paragraph
.col-xs-6(style="font-size: 18px;") New Name
Non Jade (HTML) Code:
<div class="form-group">
<div class="checkbox" id="some-checkbox" style="margin-left: 10px">
<label data-toggle="collapse" data-target="#collapseOne" aria-
expanded="false" aria-controls="collapseOne">
<input type="checkbox"/> My Name
</label>
</div>
</div>
<div class="collapse" id="collapseOne" aria-expanded="false">
<div class="well1">
<div class="row">
<div class="col-sm-12 col-lg-12">
<div class="nutrition-category">
<div class="row header3 margin-left-10">
<div class="row paragraph">
<div class="col-xs-6" style="font-size: 18px"> New
Name</div>
</div>
</div>
</div>
</div>
</div>
and here is the javascript that i have used for it:
script(type='text/javascript').
$(document).ready(function() {
$("#some-checkbox").prop("indeterminate", true);
});

how to change textbox value from ng repeat

I make my own autocomplete in html, I use ng-repeat to show the suggestion. this is the code:
<div content-for="title">
<span>Add Friend</span>
</div>
<div class="scrollable">
<div class="scrollable-content">
<div class="list-group">
<div class="list-group-item">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email</label>
<input type="text" class="form-control" data-ng-model="add.email" id="exampleInputEmail2" placeholder="Email" auto-complete autocomplete="off"/>
<div href="#" ng-repeat="x in cobas | filter:add.email">
<div class="media-body" ng-if="add.email.length > 0">
<h5 class="list-group-item media">{{x.name}}
</div></div>
</div>
<button type="submit" class="btn btn-default" data-ng-click="addfriends()">Add</button>
</form>
</div>
</div>
</div>
</div>
what I want is, when I click the suggestion result, the value of that textbox is change to the suggestion result using ng-click, can someone help me?
You have to add function in your controller, like below:
$scope.autocomplete = function (completeText) {
$scope.add.email = completeText;
};
and then in html call the function on ng-click like below,
<div href="#" ng-repeat="x in cobas | filter:add.email" ng-click="autocomplete(x.name)">
<div class="media-body" ng-if="add.email.length > 0">
<h5 class="list-group-item media">{{x.name}}</h5
</div>
</div>

get div with specific class before form input

I have:
<div class="col-md-3 col-centered survey-kind-border">
<a class="lv-item" href="#">
<div class="media">
<label for="no" class="pull-left">
<div class="survey_kind_choice">
1.5
</div>
<input checked="checked" class="survey_kind_input" id="no" type="radio" value="no">
</label>
<div class="media-body">
<div class="lv-title">
No
</div>
<small class="lv-small">
I will Not
</small>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-centered ">
<a class="lv-item" href="#">
<div class="media">
<label for="yes" class="pull-left">
<div class="survey_kind_choice">
2.5
</div>
<input class="survey_kind_input" id="yes" type="radio" value="yes">
</label>
<div class="media-body">
<div class="lv-title">
Yes
</div>
<small class="lv-small">
I will
</small>
</div>
</div>
</a>
</div>
When someone goes to this page, one of the radio buttons will usually already be selected. If the button is selected, I want to grab the div that is associated with that form element and has the class "survey_kind_choice" and add a class to it. I am trying to do that with this code:
if($('.survey_kind_input').is(':checked')){
alert('there is a checked element');
$(this).prev('.survey_kind_choice').addClass('current_choice');
}
The alert is working, but I can't get the class to be added. What am I doing wrong and how do I fix it?
No if statement needed, just execute the selector on the checked input with:
$('.survey_kind_input:checked').prev('.survey_kind_choice').addClass('current_choice');
jsFiddle example

jQuery & JEasyUI dynamic droppable element

I have an issue with jQuery & jEasyUI working together. In my code I have a button that when it is clicked it adds a new col-sm-3 to a row div. When I begin dragging around into the droppable nothing happens, although I'm suppose to see an alert. I played around and got it to work by calling .droppable() on newly added columns. That's where things began to get strange. The draggables started disappearing from their positions in the list. It was obvious that jQuery and JEasyUI are not playing well. JEasyUI has it's own draggable & droppable functions but there isn't anything written on how they could be applied to dynamically loaded DOM elements.
Code dynamically added:
This is HTML that I dynamically add to a row
<div class="col-sm-4" >
<div class="box options-list">
<div class="box-header with-border">
<h3 class="box-title"></h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<input class="form-control" placeholder="Name">
<div class="row">
<div class="col-xs-6">
<div id='validate-checkbox' class="checkbox icheck">
<label>
<label for="validate-checkbox"></label>
<input class="validate-checkbox" name="is_disabled" type="checkbox"> Validate
</label>
</div>
</div>
<div class="col-xs-6">
<div id='conform-value-checkbox' class="checkbox icheck">
<label>
<label for="conform-value-checkbox"></label>
<input class="validate-checkbox" name="is_disabled" type="checkbox"> Conform
</label>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<ul class="">
</ul>
</div>
</div>
</div>
</div>
</div>
Static:
The element where the new element is appended to is <div class="row" id="sortable">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
.col-sm-4 .ui-sortable-placeholder {
background: red;
}
</style>
<div class="box">
<div class="box-body">
<div class="row">
<div class="col-md-6">
<?= $this->Form->input('name', ['placeholder' => 'Enter part name']) ?>
</div>
<div class="col-lg-6">
<?= $this->Form->input('description', ['placeholder' => '(Optional)']) ?>
</div>
</div>
<div class="row">
<div class="col-md-8">
<?= $this->Form->input('item_part_type_id', ['label' => 'Type']) ?>
</div>
<div class="col-md-4">
<label for="has-validation-checkbox"></label>
<div id='has-validation-checkbox' class="checkbox icheck">
<label>
<input class="has-validation-checkbox" name="has_validation" type="checkbox"> Force Validation
</label>
</div>
</div>
</div>
</div>
</div>
<div class="box">
<div class="box-header with-border">
<h3 class="box-title"><strong>Part Editor</strong></h3>
</div>
<div class="box-body">
<div class="row">
<div class="col-xs-12">
<div class="easyui-layout" style="width:100%;height:400px;">
<div data-options="region:'east',split:true" title="Existing Miniparts" style="width:20%;">
</div>
<div data-options="region:'west',split:true" title="Options" style="width:20%;">
<ul class="list-group" id="options-list">
<li class=" bg-black-gradient list-group-item">
Text<span class="pull-right"><i class="fa fa-cog"></i></span>
</li>
<li class="bg-black-gradient list-group-item">
Textarea
</li>
<li class="bg-black-gradient list-group-item">
List
</li>
<li class="bg-black-gradient list-group-item">
Fabric
</li>
<li class="bg-black-gradient list-group-item">
Multi Fabric
</li>
<li class="bg-black-gradient list-group-item">
Buyin Code
</li>
<li class="bg-black-gradient list-group-item">
Buyin Supplier
</li>
</ul>
</div>
<div id="here" data-options="region:'center',title:'Miniparts'" style="width: 60%; padding:5px;" class="bg-black-gradient" >
<div class="row" id="sortable">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-footer">
<button id="add-part-btn" class="btn btn-primary btn-sm pull-right"><i class="fa fa-plus"></i> Add Part</button>
</div>
</div>
<div class="well clearfix">
<div class="pull-right">
<button class="btn btn-default btn-md"><i class="fa fa-times"></i> Discard Changes</button>
<button class="btn btn-primary btn-md"><i class="fa fa-save"></i> Save Changes</button>
</div>
</div>
<script>
/*
Each time this is triggered a new element is to be
added to the sortable <div class="row">. The element then
accepts a droppable from a UL list */
$('#add-part-btn').click(function() {
$.get("<?= $this->Url->build(['action' => 'minipart']) ?>", function (data) {
var newElement = $(data);
$('#sortable').append(newElement);
$(newElement).droppable({
accept: '.list-group-item',
drop: function(e,ui)
{
alert("AahhH! my foot!");
}
})
});
});
$(function(){ // DOM Ready
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
/* If I put into the DOM Ready function above,the list item being dragged to behave strangely
* So I left it out here instead. */
$( ".list-group-item").draggable({
revert: true,
appendTo: '.easyui-layout',
helper: 'clone',
zIndex: 3
}).disableSelection();
</script>
My project has so many dependencies that I don't think you will be able to run the snippets probably, but if you want to go the extra mile and help me out on this then please download the following dependencies below:
jQuery >=1.11.x
jQueryUI jEasyUI latest version
AdminLTE 2.1.1 (A bootstrap 3 theme, https://github.com/almasaeed2010/AdminLTE)

Categories