my code is including the label text in a span tag, what I am trying to do is: remove the span tag when I click in each span.
sample I added test1 and test2, so in Refined by: if I click in each label test1 remove that label test1 or if I click in test2 remove the label test2.
someone can help me with that, I am not understanding what I am doing wrong.
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).parent('li').get(0);
if ($(this).is(':checked')) {
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$("span").bind("click", function() {
alert("The quick brown fox jumps over the lazy dog.");
$(span).remove();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
You can do like this:
$('#selected_items').on('click', '.label-primary', function(){
$(this).remove();
});
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).parent('li').get(0);
if ($(this).is(':checked')) {
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$("span").bind("click", function() {
alert("The quick brown fox jumps over the lazy dog.");
$(this).remove();
var selectedText = $(this).attr('selected-item');
selectedText = selectedText.split('_');
$('li#' + selectedText[0]).find('input').prop('checked', false);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
You need to added click event for particular spam element:
//Assign click to current checked input sibling span
$(this).parent().find("span").bind("click", function() {
alert("The quick brown fox jumps over the lazy dog.");
//Remove current li clicked span with this
$(this).parent().remove();
});
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).parent('li').get(0);
if ($(this).is(':checked')) {
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$(this).parent().find("span").bind("click", function() {
alert("The quick brown fox jumps over the lazy dog.");
$(this).parent().remove();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
Related
I have a dual list in which data is printing a ul li pattern from a JSON file. You can move any li to any side list. I am stuck at a point.
I want to enable a property that the <p> tag content only in <li> in right-list gets display: block and not the left-list side <li>. I have tried different JS code but they didn't work for me .
$('.content').hide();
$('.listelement').on('click', function() {
if (!($(this).children('.content').is(':visible'))) {
$('.content').slideUp();
$(this).children('.content').slideDown();
} else {
$('.content').slideUp();
}
});
$(function() {
$('body').on('click', '.show', function() {
css("display", "block");
});
$('body').on('click', '.list-group .list-group-item', function() {
$(this).toggleClass('active');
});
$('.listarrows button').click(function() {
var $button = $(this),
actives = '';
if ($button.hasClass('move-left')) {
actives = $('.list-right ul li.active');
actives.clone().appendTo('.list-left ul');
actives.remove();
} else if ($button.hasClass('move-right')) {
actives = $('.list-left ul li.active');
actives.clone().appendTo('.list-right ul');
actives.remove();
}
});
$('[name="SearchDualList"]').keyup(function(e) {
var code = e.keyCode || e.which;
if (code == '9') return;
if (code == '27') $(this).val(null);
var $rows = $(this).closest('.dual-list').find('.list-group li');
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
});
$(function() {
var ctList = [];
var ctRight = [];
var $tBody = $("#La");
var $rbody = $("#accordian");
$.getJSON('https://api.myjson.com/bins/d6n2a', function(data) {
data.topic_info.qt_ct_connection.map(value => {
value.ct_list.forEach(CTLIST => {
$tBody.append(`<li class="list-group-item" id="rl">${CTLIST.ct}<p style="display: none" class="show">
Simple collapsible
<div id="demo_${CTLIST.ct}" class="collapse">
${CTLIST.tts}, ${CTLIST.topic_level}, ${CTLIST.to_be_shown_individually}, ${CTLIST.check_for_geometry}
</div>
</p>
</li>`);
});
})
})
})
.ctList {
padding-top: 20px;
}
.ctList .dual-list .list-group {
margin-top: 8px;
}
.ctList .list-left li,
.list-right li {
cursor: pointer;
}
.ctList .list-arrows {
padding-top: 100px;
}
.ctList .list-arrows button {
margin-bottom: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="ctList">
<div class="container">
<div class="row">
<div class="dual-list list-left col-md-5">
<div class="well text-right">
<div class="row">
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search">
<i class="fa fa-search" aria-hidden="true" style="padding-right: 20px;"></i>
</span>
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
</div>
</div>
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all">
<i class="glyphicon glyphicon-unchecked"></i>
</a>
</div>
</div>
</div>
<ul class="list-group" id="La"></ul>
</div>
</div>
<div class="list-arrows col-md-1 text-center">
<button class="btn btn-default btn-sm move-left">
<span class="glyphicon glyphicon-chevron-left">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
</span>
</button>
<button class="btn btn-default btn-sm move-right">
<span class="glyphicon glyphicon-chevron-right">
<i class="fa fa-arrow-right" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dual-list list-right col-md-5">
<div class="well">
<div class="row">
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all">
<i class="glyphicon glyphicon-unchecked"></i>
</a>
</div>
</div>
<div class="col-md-10">
<div class="input-group">
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<form>
<ul class="list-group" id="accordian">
<!-- right list -->
</ul>
<input type="submit" value="submit" name="submit">
</form>
</div>
</div>
</div>
</div>
</section>
Add CSS and remove inline style display none from p tag in JS.
$('.content').hide();
$('.listelement').on('click', function() {
if (!($(this).children('.content').is(':visible'))) {
$('.content').slideUp();
$(this).children('.content').slideDown();
} else {
$('.content').slideUp();
}
});
$(function() {
$('body').on('click', '.show', function() {
css("display", "block");
});
$('body').on('click', '.list-group .list-group-item', function() {
$(this).toggleClass('active');
});
$('.listarrows button').click(function() {
var $button = $(this),
actives = '';
if ($button.hasClass('move-left')) {
actives = $('.list-right ul li.active');
actives.clone().appendTo('.list-left ul');
actives.remove();
} else if ($button.hasClass('move-right')) {
actives = $('.list-left ul li.active');
actives.clone().appendTo('.list-right ul');
actives.remove();
}
});
$('[name="SearchDualList"]').keyup(function(e) {
var code = e.keyCode || e.which;
if (code == '9') return;
if (code == '27') $(this).val(null);
var $rows = $(this).closest('.dual-list').find('.list-group li');
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
});
$(function() {
var ctList = [];
var ctRight = [];
var $tBody = $("#La");
var $rbody = $("#accordian");
$.getJSON('https://api.myjson.com/bins/d6n2a', function(data) {
data.topic_info.qt_ct_connection.map(value => {
value.ct_list.forEach(CTLIST => {
$tBody.append(`<li class="list-group-item" id="rl">${CTLIST.ct}<p>
Simple collapsible
<div id="demo_${CTLIST.ct}" class="collapse">
${CTLIST.tts}, ${CTLIST.topic_level}, ${CTLIST.to_be_shown_individually}, ${CTLIST.check_for_geometry}
</div>
</p>
</li>`);
});
})
})
})
.ctList {
padding-top: 20px;
}
.ctList .dual-list .list-group {
margin-top: 8px;
}
.ctList .list-left li,
.list-right li {
cursor: pointer;
}
.ctList .list-arrows {
padding-top: 100px;
}
.ctList .list-arrows button {
margin-bottom: 20px;
}
/********************************/
/********************************/
/********************************/
/* ADD THIS */
.dual-list.list-left .well li.list-group-item p {
display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="ctList">
<div class="container">
<div class="row">
<div class="dual-list list-left col-6">
<div class="well text-right">
<div class="row">
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search">
<i class="fa fa-search" aria-hidden="true" style="padding-right: 20px;"></i>
</span>
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
</div>
</div>
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all">
<i class="glyphicon glyphicon-unchecked"></i>
</a>
</div>
</div>
</div>
<ul class="list-group" id="La"></ul>
</div>
</div>
<div class="dual-list list-right col-6">
<div class="well">
<div class="row">
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all">
<i class="glyphicon glyphicon-unchecked"></i>
</a>
</div>
</div>
<div class="col-md-10">
<div class="input-group">
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<ul class="list-group" id="La">
<li class="list-group-item" id="rl">point_in_first_quad
<p>
Simple collapsible
</p>
<div id="demo_point_in_first_quad" class="collapse">
10, capable, true, true
</div>
<p></p>
</li>
<li class="list-group-item" id="rl">point_in_second_quad
<p>
Simple collapsible
</p>
<div id="demo_point_in_second_quad" class="collapse">
10, capable, true, true
</div>
<p></p>
</li>
<li class="list-group-item" id="rl">trapezium_draw_slope_area_equ
<p>
Simple collapsible
</p>
<div id="demo_trapezium_draw_slope_area_equ" class="collapse">
20, strong, true, true
</div>
<p></p>
</li>
</ul>
<form>
<ul class="list-group" id="accordian">
<!-- right list -->
</ul>
<input type="submit" value="submit" name="submit">
</form>
</div>
</div>
</div>
</div>
</section>
enter image description hereI am trying to move items from one list to another on checkbox check but actually 1st list are select options and checked property is not coming in jquery , can anybody help how to achieve this ?
$(document).ready(function() {
//Once a field selected / deslected, update UI List
$('#GridFields').bind('change', function(option, checked, select) {
var selectedval = $('#GridFields option:selected').last().val();
if ($('.sort-selected li[field-id="+selectedval+"').length > 0) {
$('.sort-selected').remove(selectedval);
} else {
$('.sort-selected').append('<li class="list-group-item" field-id="' + $(this).find(':selected').last().val() + '">' + $(this).find(':selected').last().text() + '</li>');
$('.sort-selected').animate({
scrollTop: $(".sort-selected")[0].scrollHeight
}, 1000);
}
enableSort();
});
<div class="form-group">
<select class="form-control input-sm multiselect" id="GridFields" multiple="multiple" name="GridFields" style="display: none;">
<option disabled="disabled" value="Remedy_Short_ID">Request ID</option>
<option value="Actuals_Per_Day">Actuals Per Day</option>
</select>
<div class="btn-group open" style="width: 100%;"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="Request ID, Summary, Request Category, Product Name, Comp Progress Level" style="width: 100%; overflow: hidden; text-overflow: ellipsis;" aria-expanded="true">
<ul class="multiselect-container dropdown-menu" style="-ms-overflow-x: hidden; -ms-overflow-y: auto; max-height: 300px;"><li class="multiselect-item filter"><div class="input-group input-group-sm">
--First Five Elements
<li class="disabled active"><a tabindex="-1"><label class="checkbox"><input type="checkbox" value="Comp_Progress_Level"> Comp Progress Level</label></a></li>
--Remaining Elements
<li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Actuals_Per_Day"> Actuals Per Day</label></a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="form-group">
#Html.Label("Layout Columns", "Layout Columns", new { #class = "form-label" }) #Html.ListBox("GridFields", CommonEntities.getGridFieldsMultiList(), new { #class = "form-control input-sm multiselect"})
</div>
</div>
<div class="col-md-3">
<div class="panel panel-custom1">
<div class="panel-heading">Display Order (Drag n Drop an Item)</div>
<ul class="list-group sort-selected" style="height:276px;overflow-y:auto">
<li class="list-group-item disabled" field-id="">Request ID</li>
<li class="list-group-item disabled" field-id="">Summary</li>
<li class="list-group-item disabled" field-id="">Request Category</li>
<li class="list-group-item disabled" field-id="">Product Name</li>
<li class="list-group-item disabled" field-id="">Comp Progress Level</li>
</ul>
</div>
</div>
Based on your description, following should work :
$(document).ready(function() {
//Once a field selected / deslected, update UI List
$('#GridFieldsWrap input[type=checkbox]').bind('change', function() {
$('#GridFieldsWrap input[type=checkbox]').each(function() {
if ($(this).is(":checked")) {
if ( $(".sort-selected li[field-id=" + $(this).val() + "]").length==0) {
$('.sort-selected').append('<li class="list-group-item" field-id="' + $(this).val() + '">' + $(this).parent().text() + '</li>');
}
} else {
$(".sort-selected li[field-id=" + $(this).val() + "]").remove()
}
})
$('.sort-selected').animate({
scrollTop: $(".sort-selected")[0].scrollHeight
}, 1000);
})
//enableSort();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="form-group" id="GridFieldsWrap">
<ul id="GridFields">
<li class="disabled active"><a tabindex="-1"><label class="checkbox" ><input type="checkbox" value="Request_ID" checked> Request ID</label></a></li>
<li class="disabled active"><a tabindex="-1"><label class="checkbox" ><input type="checkbox" checked value="Summary"> Summary</label></a></li>
<li class="disabled active"><a tabindex="-1"><label class="checkbox"><input type="checkbox" checked value="Request_Category"> Request Category</label></a></li>
<li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Product_Name"> Product Name</label></a></li>
<li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Comp_Progress_Level"> Comp Progress Level</label></a></li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-custom1">
<ul class="list-group sort-selected" style="height:100px;overflow-y:auto">
<li class="list-group-item disabled" field-id="Request_ID">Request ID</li>
<li class="list-group-item disabled" field-id="Summary">Summary</li>
<li class="list-group-item disabled" field-id="Request_Category">Request Category</li>
</ul>
</div>
</div>
Adding id="GridFieldsWrap" on the form level helps you to get the checkbox property checked.
In List options if you want, checkbox property checked, please try to add one level above the id property and check there if checkbox property appears.
I have the following script:
<script src="~/js/store-index.js" asp-append-version="true"></script>
<script type="text/javascript">
var global = $(this);
var wasclicked = 0;
$(document).ready(function () {
document.getElementById("modalbutton").onclick = function () {
global.wasclicked = 1;
};
$('#modal-action-store').on('hidden.bs.modal', function () {
global.wasclicked = 0;
});
$('#modal-action-store').on('shown.bs.modal', function () {
if (global.wasclicked == 1) {
var items = "<option value='0'>-- Seleccione Distrito --</option>";
$('#DistrictID').html(items);
}
$('#DepartmentID').change(function () {
var url = '/' + "Stores/GetDistrict";
var ddlsource = "#DepartmentID";
$.getJSON(url, { DepartmentID: $(ddlsource).val() }, function (data) {
var items = '';
$("#DistrictID").empty();
$.each(data, function (i, district) {
items += "<option value='" + district.value + "'>" + district.text + "</option>";
});
$('#DistrictID').html(items);
});
});
});
});
</script>
It's objective is to:
Identify if I'm opening or closing the modal window.
If I'm opening the modal window, populate a dropdownlist [A] with certain information
When another dropdownlist [B] changes it's value, update [A] value
Question:
Is it correct the use of $(this) in this script? I ask it because, although it works, if I put a breakpoint on this line:
var global = $(this);
I get an error on the debugger: Failed to load resource - 404 not found:
Update:
After applying the suggested changes the problem persists, which might be sign of another problem in the background. For this I update the result of the Html page:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html" charset="utf-8" http-equiv="content-type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Index - Plataforma Fantasy Park</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/jquery.dataTables.min.js?v=qcV1wr-bn4NoBtxYqghmy1WIBvxeoe8vQlCowLG-cng"></script>
<script src="/js/dataTables.bootstrap.min.js?v=X_58s5WblGMAw9SpDtqnV8dLRNCawsyGwNqnZD0Je_s"></script>
<script src="/js/site.js?v=ViqmmChOp_51fH3dM_KEQAFClKU0vp0UrxlREwyHKHc"></script>
<link rel="stylesheet" href="/css/bootstrap-lumen.css" />
<link rel="stylesheet" href="/css/site.css" />
<link rel="stylesheet" href="/css/nestednavbar.css" />
<link rel="stylesheet" href="/css/dataTables.bootstrap.min.css" />
</head>
<body>
<div class="container body-content">
<nav class="navbar navbar-inverse navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Plataforma Fantasy Park</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Liquidaciones</li>
<li>
Máquinas <span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Registro
<ul class="dropdown-menu">
<li class="dropdown-item"><a tabindex="-1" href="/Machines">Datos Comerciales</a></li>
<li class="dropdown-item"><a tabindex="-1" href="/Machines/Workshop">Datos de Fabricación</a></li>
</ul>
</li>
<li class="divider"></li>
<li>Familias y Tipos</li>
<li class="dropdown-submenu">
Gestión
<ul class="dropdown-menu">
<li class="dropdown-item"><a tabindex="-1" href="/Machines/Management">Máquinas</a></li>
<li class="dropdown-item"><a tabindex="-1" href="/Machines/Contadores">Contadores</a></li>
</ul>
</li>
</ul>
</li>
<li>
Tiendas <span class="caret"></span>
<ul class="dropdown-menu">
<li>Registro</li>
<li class="divider"></li>
<li>Liquidadores</li>
</ul>
</li>
<li>
Proveedores <span class="caret"></span>
<ul class="dropdown-menu">
<li>Fabricantes y Marcas</li>
<li>Dealers</li>
</ul>
</li>
<li>Gastos</li>
<li>
Usuarios <span class="caret"></span>
<ul class="dropdown-menu">
<li>Usuarios</li>
<li>Roles</li>
</ul>
</li>
<li>About</li>
</ul>
<form method="post" id="logoutForm" class="navbar-right" action="/Account/SignOff">
<ul class="nav navbar-nav navbar-right">
<li>
<a title="Manage" href="/Manage">Hello adelgado!</a>
</li>
<li>
<button type="submit" class="btn btn-link navbar-btn navbar-link">Log off</button>
</li>
</ul>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8P12Ot7bDOBImhnZFhlI8qHPFz5Z8vuFfE8MbZPcoEDO8l20qrWS3FDx0GClCFhR3NVR5F2ysRwcKkbQ1FRaxGYDU-VJsNFpqMnyDmONltKFE6YINgnCRcBc0GSa0tnSvgJCDRrrfROVsWQRmvTIylwUR2nL5YDkJfNVwzdq9wdb8utLT5rXhZeANCwvGMFWvQ" /></form>
</div>
</div>
</nav>
<h2>Tiendas</h2>
<div class="btn-group" id="modalbutton">
<a id="createEditStoreModal" data-toggle="modal" data-target="#modal-action-store" class="btn btn-primary" href="/Stores/Create">
<i class="glyphicon glyphicon-plus"></i> Nueva Tienda
</a>
</div>
<p></p>
<table id="stores" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>
Tienda
</th>
<th>
Dirección
</th>
<th>
Área
</th>
<th>
Distrito
</th>
<th>
Cadena
</th>
<th>Editar</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div aria-hidden="true" aria-labelledby="modal-action-store-label" role="dialog" tabindex="-1" id="modal-action-store" class="modal fade">
<div class="modal-dialog ">
<div class="modal-content">
</div>
</div>
</div>
<hr />
<footer>
<p>© 2017 - Plataforma Fantasy Park</p>
</footer>
</div>
<script src="/js/store-index.js?v=xMseET7-q434oUXfBjpd5QKjSw8t0R0P_mGdZorHwB0"></script>
<script type="text/javascript">
var global = this;
var wasclicked = 0;
$(document).ready(function () {
document.getElementById("modalbutton").onclick = function () {
global.wasclicked = 1;
};
$('#modal-action-store').on('hidden.bs.modal', function () {
global.wasclicked = 0;
});
$('#modal-action-store').on('shown.bs.modal', function () {
if (global.wasclicked == 1) {
var items = "<option value='0'>-- Seleccione Distrito --</option>";
$('#DistrictID').html(items);
}
$('#DepartmentID').change(function () {
var url = '/' + "Stores/GetDistrict";
var ddlsource = "#DepartmentID";
$.getJSON(url, { DepartmentID: $(ddlsource).val() }, function (data) {
var items = '';
$("#DistrictID").empty();
$.each(data, function (i, district) {
items += "<option value='" + district.value + "'>" + district.text + "</option>";
});
$('#DistrictID').html(items);
});
});
});
});
</script>
</body>
</html>
I also include the result of the network tab:
Simply remove the global variable and directly access wasclicked:
var wasclicked = 0;
$(document).ready(function () {
document.getElementById("modalbutton").onclick = function () {
wasclicked = 1;
};
$('#modal-action-store').on('hidden.bs.modal', function () {
wasclicked = 0;
});
etc.....
what I need to do is when I click in test1 checkbox show the div in show-content the div id item 1 :
<div class="show-content">
<div id="item1">
test1
</div>
when I click in test2 checkbox show the div in show-content the div id item 2 :
<div class="show-content">
<div id="item2">
test2
</div>
jsfiddle: http://jsfiddle.net/P3zMu/271/
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).parent('li').get(0);
if ($(this).is(':checked')) {
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$("span").bind("click", function() {
$(this).remove();
var selectedText = $(this).attr('selected-item');
selectedText = selectedText.split('_');
$('li#' + selectedText[0]).find('input').prop('checked', false);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<h1> show the content </h1>
<div class="show-content">
<div id="item1">
test1
</div>
<div id="item2">
test2
</div>
</div>
First of all, you have multiple elements with the same id, and Id show never exists more than once. use class if needed.
$(".show-content [class^=item]").hide();
$('#selected_items span').each(function() {
var id = $(this).attr("selected-item").replace("_selected","");
$(".show-content ."+ id).show()
})
I've added the code above. Hope this is what your looking for.
Demo
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).parent('li').get(0);
if ($(this).is(':checked')) {
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$(".show-content [class^=item]").hide();
$('#selected_items span').each(function() {
var id = $(this).attr("selected-item").replace("_selected","");
$(".show-content ."+ id).show()
})
$("span").bind("click", function() {
$(this).remove();
var selectedText = $(this).attr('selected-item');
selectedText = selectedText.split('_');
$('li#' + selectedText[0]).find('input').prop('checked', false);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<h1> show the content </h1>
<div class="show-content">
<div class="item1">
test1
</div>
<div class="item2">
test2
</div>
</div>
Your duplicating ID's, not ideal. But will still work in this case.
Below I'm initially setting the display:none on your sections.
And then just use toggle class on them, and finding the same id inside the show-content div.
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).parent('li').get(0);
var id = $(this).closest('[id]').attr('id');
$('.show-content #' + id).toggle($(this).is(':checked'));
if ($(this).is(':checked')) {
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$("span").bind("click", function() {
$(this).remove();
var selectedText = $(this).attr('selected-item');
selectedText = selectedText.split('_');
$('li#' + selectedText[0]).find('input').prop('checked', false);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<h1> show the content </h1>
<div class="show-content">
<div id="item1" style="display:none">
test1
</div>
<div id="item2" style="display:none">
test2
</div>
</div>
Instead of multiple same id's you can use custom data attribute and then toggle those elements based on checkbox.
$('.show-content > div').hide();
$(".bill-type input[type='checkbox']").change(function() {
var id = $(this).parent('li').attr('id');
$('.show-content > div[data-target="' + id + '"]').toggle($(this).is(':checked'))
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<div class="show-content">
<div data-target="item1">test1</div>
<div data-target="item2">test2</div>
</div>
Try this
multiple same ids, not good one .so change with class name
HIDE all the show-content children before showing particular item
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).closest('li');
$('.show-content').find('div').hide();
if ($(this).is(':checked')) {
$('.show-content').find('div[class="'+$li.attr('id')+'"]').show()
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$("span").bind("click", function() {
$(this).remove();
var selectedText = $(this).attr('selected-item');
selectedText = selectedText.split('_');
$('li#' + selectedText[0]).find('input').prop('checked', false);
});
});
.test1 {
border: 1px solid red;
}
.show-content div{
display:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<div class="show-content">
<div class="item1">
test1
</div>
<div class="item2">
test2
</div>
</div>
One simple solution using data attributes and CSS:
$('[data-checked-toggle]').each(function(i) {
var thisCheckbox = $(this);
var thisTarget = $( thisCheckbox.data('checkedToggle') );
thisCheckbox.on('change', function(e) {
thisTarget.toggleClass('is-visible', thisCheckbox.is(':checked'));
}).trigger('change');
});
.show-content > div {
display: none;
}
.show-content > div.is-visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<label for="checkbox1">
<input id="checkbox1" type="checkbox" data-checked-toggle="#item1" /> test1
</label>
</p>
<p>
<label for="checkbox2">
<input id="checkbox2" type="checkbox" data-checked-toggle="#item2" /> test2
</label>
</p>
<div class="show-content">
<div id="item1">
test1
</div>
<div id="item2">
test2
</div>
</div>
Also on JSFiddle.
This way you have great control:
inside HTML you define which element is controlled by checkbox, anywhere on page
inside CSS you decide how to present the element, it does not have to be invisible - is easy when you add/remove class
Here is a sample code. i just added two id on checkbox.
<html>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" id="checkbox1" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" id="checkbox2" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<h1> show the content </h1>
<div class="show-content">
<div id="item1">
test1
</div>
<div id="item2">
test2
</div>
</div>
<script>
$(document).ready(function () {
$('#checkbox1').on('change', function () {
var checkbox1 = $('#checkbox1').is(':checked')
if (checkbox1) {
$(".show-content > #item1").hide();
} else {
$(".show-content > #item1").show();
}
});
$('#checkbox2').on('change', function () {
var checkbox2 = $('#checkbox2').is(':checked')
if (checkbox2) {
$(".show-content > #item2").hide();
} else {
$(".show-content > #item2").show();
}
});
})
</script>
I somehow can't seem to figure this one out.
I have set of radio buttons and on click of each, I am populating a dropdown (bootstrap dropdown) with different data. On click of dropdown, i select the text at top. The code works just fine till i don't select a different radio button. Once i click on the radio button and re-populate the first dropdown, the click event stops firing.....any ideas will be helpful. Here's my simplified code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<style>
body{overflow-y:scroll}input.search-text{height:30px}ul.listBig{list-style-type:none;margin:0 0 0 10%;padding:0;width:80%}ul.listSmall{list-style-type:none;margin:0;padding:0;width:26%;float:left;text-align:left}ul.listBig li{display:inline-block;width:24%;margin:0 0 20px;padding:0}ul.listSmall li{display:block;margin:0 0 8px;padding:0}ul.listSmall li a{font-family:Calibri,"Open Sans",sans-serif;font-size:1.1em;color:#e1e1e1}ul.listSmall li a:hover{text-decoration:underline}div.listBigDiv{width:200px;height:230px;margin:0 auto;box-shadow:1px 1px 3px #888;border:1px solid #AAA}div.listBigDiv img{width:200px;height:200px}div.listBigDiv a{line-height:20px;font-weight:700;color:#606b7a}div.listSection{width:100%;padding:20px 0;text-align:center;background:#efefef;border-bottom:1px solid #dbdbdb}div.listSection.light{background:#f7f7f7}div.listSection h2{font-family:Calibri,"Open Sans",sans-serif;font-size:2.5em;margin-bottom:.3em;font-weight:700}a.bttn.custom{font-size:1.3em;height:54px;font-weight:700;line-height:40px}a.bttn.custom:hover{text-decoration:none;color:#fbfbfb}p.textBig{font-family:Calibri,"Open Sans",sans-serif;font-size:1.4em;color:#e1e1e1}p.sectionDesc{font-family:Calibri,"Open Sans",sans-serif;font-size:1.3em;text-align:center;color:#393c3d;margin-top:0;margin-bottom:30px;width:60%;margin-left:20%}h1.definition{position:relative;margin-bottom:20px}div.elemContainer{position:relative;top:0}a.feedbackBox{border:1px solid #e1e1e1;padding:5px;text-decoration:none}.popupCollectionBackground{z-index:10;background:rgba(0,0,0,.8);height:100%;width:100%;position:absolute;top:0}.popupCollection{z-index:11;background:rgba(255,255,255,.99);overflow-y:scroll;height:96%;width:80%;position:absolute;top:4%;left:10%;box-sizing:border-box;border:1px solid #F86960}h2.collectionName{margin:0;text-align:center;position:relative;top:30%;font-family:Calibri;font-size:3em;color:#fff;text-shadow:2px 2px #333}ul.collectionList{list-style-type:none;margin:0 0 0 10%;padding:0;width:80%}ul.collectionList li{display:inline-block;width:32%;margin:0 0 20px;padding:0}div.listCollection{width:90%;height:290px;margin:0 auto;box-shadow:1px 1px 3px #888;border:1px solid #AAA;text-align:center}div.listCollection img{width:100%;height:250px}div.listCollection a{line-height:25px;font-weight:700;color:#606b7a}img.mediaImage{margin:0 10px 20px}a.connectText:hover{text-decoration:none!important}#popupCollectionBackgroundImage{height:40%;width:100%;margin-bottom:20px;}.btn-group .btn img,.dropdown-menu li a img{height:25px;margin-right:7px}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
// The functions to be executed on loading the document
$(function () {
$(window).trigger('scroll');
$("body").scroll(function () { $(window).trigger('scroll'); });
$(document).on('click', 'a', function (e) {
if ('#' == $(this).attr('href'))
e.preventDefault();
});
$(".dropdown-menu li a").click(function (e) {
$(this).parent().parent().select("li a").each(function () { $(this).attr("data-selected", "no"); });
$(this).attr("data-selected", "yes");
$(this).parent().parent().parent()
.find("button").html($(this).html() + ' <span class="caret"></span>');
});
$('input[name=exploreOrWeekend]:radio').change(function () {
switchExploreWeekend($('input[name=exploreOrWeekend]:radio:checked').val());
});
$(".btn-group button").each(function () {
$(this).css("min-width", $(this).width() + 40 + "px");
});
});
</script>
<script>
function switchExploreWeekend(sectionURL) {
if (sectionURL == "/explore") {
var regionButtonHtml = 'Anywhere in India <span class="caret"></span>';
$("#regionButton").html(regionButtonHtml);
$("#regionDropdown").html($("#exploreRegionHtml").html());
}
else {
var regionButtonHtml = 'Near Me... <span class="caret"></span>';
$("#regionButton").html(regionButtonHtml);
$("#regionDropdown").html($("#weekendRegionHtml").html());
}
}
$("#regionDropdown li a").click(function (e) {
alert('b');
$(this).parent().parent().select("li a").each(function () { $(this).attr("data-selected", "no"); });
$(this).attr("data-selected", "yes");
$(this).parent().parent().parent()
.find("button").html($(this).html() + ' <span class="caret"></span>');
});
</script>
</head>
<body style="margin: 0px;">
<div id="container" style="width: 100%; height: 100%;">
<div class="searchBg">
<div style="position: relative; top: 28%; width: 100%; text-align: center;">
<h1 class="definition">Discover Your Next Holiday Destination</h1>
<div class="elemContainer">
<label class="radio">
<input type="radio" name="exploreOrWeekend" checked="checked" value="/explore" />
Explore All Destinations
</label>
<label class="radio">
<input type="radio" name="exploreOrWeekend" class="second" value="/weekend-getaways" />
Find Weekend Getaways
</label>
<br />
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="regionButton" style="min-width: 220px">
Anywhere in World <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="regionDropdown">
<li>Anywhere in World</li>
<li>North America</li>
<li>Europe</li>
<li>Asia</li>
<li>Australia</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="categoryButton" style="min-width: 220px">
All Places<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="categoryDropdown">
<li>All Places</li>
<li>Beaches</li>
<li>Deserts</li>
<li>Wildlife</li>
<li>Heritage</li>
<li>Adventure</li>
</ul>
</div>
<button type="button" class="btn bttn custom btn-default" id="goButton" onclick="showPage()">
Find Destinations
</button>
</div>
</div>
</div>
<div id="exploreRegionHtml" style="display: none;">
<li>Anywhere in World</li>
<li>North America</li>
<li>Europe</li>
<li>Asia</li>
<li>Australia</li>
</div>
<div id="weekendRegionHtml" style="display: none;">
<li>Near Me...</li>
<li>London</li>
<li>Delhi</li>
<li>Sydney</li>
<li>New York</li>
</div>
</div>
</body>
</html>
Thanks for the ideas guys. As it happens, with .html() call the DOM refreshes and all events get lost. Based on your suggestions I changed to code to reattach the event handlers and it worked! Here's the code anyone who might be facing similar problems.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<style>
body{overflow-y:scroll}input.search-text{height:30px}ul.listBig{list-style-type:none;margin:0 0 0 10%;padding:0;width:80%}ul.listSmall{list-style-type:none;margin:0;padding:0;width:26%;float:left;text-align:left}ul.listBig li{display:inline-block;width:24%;margin:0 0 20px;padding:0}ul.listSmall li{display:block;margin:0 0 8px;padding:0}ul.listSmall li a{font-family:Calibri,"Open Sans",sans-serif;font-size:1.1em;color:#e1e1e1}ul.listSmall li a:hover{text-decoration:underline}div.listBigDiv{width:200px;height:230px;margin:0 auto;box-shadow:1px 1px 3px #888;border:1px solid #AAA}div.listBigDiv img{width:200px;height:200px}div.listBigDiv a{line-height:20px;font-weight:700;color:#606b7a}div.listSection{width:100%;padding:20px 0;text-align:center;background:#efefef;border-bottom:1px solid #dbdbdb}div.listSection.light{background:#f7f7f7}div.listSection h2{font-family:Calibri,"Open Sans",sans-serif;font-size:2.5em;margin-bottom:.3em;font-weight:700}a.bttn.custom{font-size:1.3em;height:54px;font-weight:700;line-height:40px}a.bttn.custom:hover{text-decoration:none;color:#fbfbfb}p.textBig{font-family:Calibri,"Open Sans",sans-serif;font-size:1.4em;color:#e1e1e1}p.sectionDesc{font-family:Calibri,"Open Sans",sans-serif;font-size:1.3em;text-align:center;color:#393c3d;margin-top:0;margin-bottom:30px;width:60%;margin-left:20%}h1.definition{position:relative;margin-bottom:20px}div.elemContainer{position:relative;top:0}a.feedbackBox{border:1px solid #e1e1e1;padding:5px;text-decoration:none}.popupCollectionBackground{z-index:10;background:rgba(0,0,0,.8);height:100%;width:100%;position:absolute;top:0}.popupCollection{z-index:11;background:rgba(255,255,255,.99);overflow-y:scroll;height:96%;width:80%;position:absolute;top:4%;left:10%;box-sizing:border-box;border:1px solid #F86960}h2.collectionName{margin:0;text-align:center;position:relative;top:30%;font-family:Calibri;font-size:3em;color:#fff;text-shadow:2px 2px #333}ul.collectionList{list-style-type:none;margin:0 0 0 10%;padding:0;width:80%}ul.collectionList li{display:inline-block;width:32%;margin:0 0 20px;padding:0}div.listCollection{width:90%;height:290px;margin:0 auto;box-shadow:1px 1px 3px #888;border:1px solid #AAA;text-align:center}div.listCollection img{width:100%;height:250px}div.listCollection a{line-height:25px;font-weight:700;color:#606b7a}img.mediaImage{margin:0 10px 20px}a.connectText:hover{text-decoration:none!important}#popupCollectionBackgroundImage{height:40%;width:100%;margin-bottom:20px;}.btn-group .btn img,.dropdown-menu li a img{height:25px;margin-right:7px}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$(window).trigger('scroll');
$("body").scroll(function () { $(window).trigger('scroll'); });
$(document).on('click', 'a', function (e) {
if ('#' == $(this).attr('href'))
e.preventDefault();
});
bindClick();
$('input[name=exploreOrWeekend]:radio').change(function () {
switchExploreWeekend($('input[name=exploreOrWeekend]:radio:checked').val());
});
$(".btn-group button").each(function () {
$(this).css("min-width", $(this).width() + 40 + "px");
});
});
function bindClick() {
//unbind all event handlers - for safety sake, usually removed by html() call
$(".dropdown-menu li a").unbind();
//bind again
$(".dropdown-menu li a").click(function (e) {
$(this).parent().parent().select("li a").each(function () { $(this).attr("data-selected", "no"); });
$(this).attr("data-selected", "yes");
$(this).parent().parent().parent()
.find("button").html($(this).html() + ' <span class="caret"></span>');
});
}
function switchExploreWeekend(sectionURL) {
if (sectionURL == "/explore") {
var regionButtonHtml = '<img src="images/filter_logos/icon-compass.png" class="filterIcon" />' +
'Anywhere in India <span class="caret"></span>';
$("#regionButton").html(regionButtonHtml);
$("#regionDropdown").html($("#exploreRegionHtml").html());
}
else {
var regionButtonHtml = '<img src="images/filter_logos/icon-compass.png" class="filterIcon" />' +
'Near Me... <span class="caret"></span>';
$("#regionButton").html(regionButtonHtml);
$("#regionDropdown").html($("#weekendRegionHtml").html());
}
bindClick();
}
</script>
</head>
<body style="margin: 0px;">
<div id="container" style="width: 100%; height: 100%;">
<div class="searchBg">
<div style="position: relative; top: 28%; width: 100%; text-align: center;">
<h1 class="definition">Discover Your Next Holiday Destination</h1>
<div class="elemContainer">
<label class="radio">
<input type="radio" name="exploreOrWeekend" checked="checked" value="/explore" />
Explore All Destinations
</label>
<label class="radio">
<input type="radio" name="exploreOrWeekend" class="second" value="/weekend-getaways" />
Find Weekend Getaways
</label>
<br />
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="regionButton" style="min-width: 220px">
Anywhere in World <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="regionDropdown">
<li>Anywhere in World</li>
<li>North America</li>
<li>Europe</li>
<li>Asia</li>
<li>Australia</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="categoryButton" style="min-width: 220px">
All Places<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="categoryDropdown">
<li>All Places</li>
<li>Beaches</li>
<li>Deserts</li>
<li>Wildlife</li>
<li>Heritage</li>
<li>Adventure</li>
</ul>
</div>
<button type="button" class="btn bttn custom btn-default" id="goButton" onclick="showPage()">
Find Destinations
</button>
</div>
</div>
</div>
<div id="exploreRegionHtml" style="display: none;">
<li>Anywhere in World</li>
<li>North America</li>
<li>Europe</li>
<li>Asia</li>
<li>Australia</li>
</div>
<div id="weekendRegionHtml" style="display: none;">
<li>Near Me...</li>
<li>London</li>
<li>Delhi</li>
<li>Sydney</li>
<li>New York</li>
</div>
</div>
</body>
</html>