I was creating a dropdown with jquery, HTML and CSS. I want to close the dropdown when the user clicks outside of dropdown. But it's not working fine.
JS
function _drpdntest() {
$(".drpdn-click").click(function(){
var _drpdn_container = $(this).attr("data-drpdn-click");
var _drpdn_content = $('[data-drpdn-content="'+_drpdn_container+'"]');
_drpdn_content.toggleClass("drpdn-show");
_drpdn_content.siblings().removeClass("drpdn-show");
$(document).click(function(event){
_drpdn_content.removeClass("drpdn-show");
});
$(this, _drpdn_content).click(function(event){
event.stopPropagation();
});
});
}
// Run Component Function
$(document).ready(function(){
_drpdntest();
});
HTML
<button class="drpdn-click" data-drpdn-click="main">CLICK</button>
<div class="drpdn-content drpdn-body" data-drpdn-content="main">
Main
</div>
CSS
.drpdn-content {
z-index: 1000;
position: absolute;
display:none;
overflow: hidden;
}
.drpdn-content.drpdn-show {
display: block;
}
This is because you have not added stopPropagation() for button click. Due to which on button click it is triggering document click.
Also $(this, _drpdn_content) should be $(_drpdn_content, this) or simply remove this while adding stopPropagation.
Here second parameter provides context in which selector search will get performed, in short second parameter is parent and you are saying to search all childs matching with selector provided in first parameter.
function _drpdntest() {
$(".drpdn-click").click(function(e) {
var _drpdn_container = $(this).attr("data-drpdn-click");
var _drpdn_content = $('[data-drpdn-content="' + _drpdn_container + '"]');
_drpdn_content.siblings().removeClass("drpdn-show");
_drpdn_content.addClass("drpdn-show");
$(_drpdn_content).click(function(event) {
event.stopPropagation();
});
$(document).click(function() {
_drpdn_content.removeClass("drpdn-show");
});
e.stopPropagation();
});
}
// Run Component Function
$(document).ready(function() {
_drpdntest();
});
.drpdn-content {
z-index: 1000;
position: absolute;
display: none;
overflow: hidden;
}
.drpdn-content.drpdn-show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="drpdn-click" data-drpdn-click="main">CLICK</button>
<div class="drpdn-content drpdn-body" data-drpdn-content="main">
Main
</div>
This should be what you want, based on what you said in the comment
It now shows on the first click, and it doesn't hide when you click on the option.
function _drpdntest() {
$(".drpdn-click").click(function() {
var $this = $(this)
var _drpdn_container = $(this).attr("data-drpdn-click");
var _drpdn_content = $('[data-drpdn-content="' + _drpdn_container + '"]');
_drpdn_content.toggleClass("drpdn-show");
$(document).click(function(event) {
if (event.target != $this[0] && event.target != _drpdn_content[0]) {
_drpdn_content.removeClass("drpdn-show");
}
});
$(this, _drpdn_content).click(function(event) {
event.stopPropagation();
});
});
}
// Run Component Function
$(document).ready(function() {
_drpdntest();
});
.drpdn-content {
z-index: 1000;
position: absolute;
display: none;
overflow: hidden;
}
.drpdn-content.drpdn-show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="drpdn-click" data-drpdn-click="main">CLICK</button>
<div class="drpdn-content drpdn-body" data-drpdn-content="main">
Main
</div>
Related
I have some html code with below structure. when I click on tag a with "moreCases" class,div with class "container-cases" is become show and when I click on "lessCases" div with class "container-cases" is become hide but tag a with "moreCases" do n't become show.how I can solve it?
HTML:
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>
JavaScript:
$(document).ready(function () {
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show').addClass('hide');
});
});
$(".lessCases").each(function () {
var less = $(this);
less.click(function () {
less.parent().removeClass('show').addClass('hide');
less.prev(".moreCases").removeClass('hide').addClass('show');
});
});
});
You have to target the parent() before using prev():
less.parent().prev(".moreCases").removeClass('hide').addClass('show');
$(document).ready(function () {
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show').addClass('hide');
});
});
$(".lessCases").each(function () {
var less = $(this);
less.click(function () {
less.parent().removeClass('show').addClass('hide');
less.parent().prev(".moreCases").removeClass('hide').addClass('show');
});
});
});
.hide{
display: none;
}
.show{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>
Remove the last .addClass('hide')
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show');
});
});
Working example
There is no need to iterate over the .moreCases & .lessCases instead you can simply add the click event to it. Beside since the click is on an a tag , prevent the default behavior by adding e.preventDefault
$(document).ready(function() {
$(".moreCases").click(function(e) {
$(this).next().removeClass('hide').addClass('show');
$(this).removeClass('show').addClass('hide');
});
$(".lessCases").click(function(e) {
e.preventDefault();
$(this).parent().removeClass('show').addClass('hide');
$(this).parent().prev(".moreCases").removeClass('hide').addClass('show');
});
});
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>
$(document).on('click', '.tbtn', function(e) {
$('#loading-image').show();
if(error){
$('loading-image').hide();
else{
val = $('.barbtn input:checked').val();
draw_summary($.parseJSON(data['summary']),val);
draw_barchart($.parseJSON(data['barchart']),val);
draw_scatter($.parseJSON(data['table']),val);
$('#loading-image').show();
}
});
Here i have drawing charts using d3...charts are coming correctly but i need to set loading image when i onclick the button...this code is not working
how to set loading image when onclick the button?
You just need to set CSS for it. Otherwise you are following right path. Please check below snippet.
$(document).on('click', '.tbtn-hide', function(e) {
$('#loading-image').hide(); //hide loader
});
$(document).on('click', '.tbtn-show', function(e) {
$('#loading-image').show(); //show loader
});
#loading-image
{
background: white url("http://smallenvelop.com/demo/simple-pre-loader/images/loader-64x/Preloader_1.gif") no-repeat scroll center center;;
height: 80%;
left: 0;
position: fixed;
top: 10;
width: 100%;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="tbtn-hide">Hide</button>
<button class="tbtn-show">show</button>
<div id="loading-image" style="display:none">
</div>
$(document).on('click', '.tbtn', function(e) {
$('#loading-image').show();
$.ajax({
success:function(result){
val = $('.barbtn input:checked').val();
draw_summary($.parseJSON(data['summary']),val);
draw_barchart($.parseJSON(data['barchart']),val);
draw_scatter($.parseJSON(data['table']),val);
$('#loading-image').hide();
}
});
});
I'm trying to make a to-do list with an edit button, that when clicked, will make added items editable, but am having trouble. I have the button created and everything, but when I click it nothing happens. Any advice would be greatly appreciated!
JavaScript
function editItem(){
var parent = $(this).parent();
if (!parent.hasClass('edit')) {
parent.addClass('edit');
}else if (parent.hasClass('edit')) {
var editTask = $(this).prev('input[type="text"]').val();
var editLabel = parent.find('label');
editLabel.html(editTask);
parent.removeClass('edit');
}
$(function(){
$(document).on('click', 'edit', editItem)
});
Looks like you are targeting <edit>, you are supposed to use .edit:
$(function(){
$(document).on('click', '.edit', editItem);
});
Working Snippet
$(function () {
function addItem () {
// append to the list
$("#todo-items").append('<li><span>' + $("#todo").val() + '</span> <small>Edit • Delete</small></li>');
// clear the text
$("#todo").val("");
}
$("#todo").keydown(function (e) {
// if enter key pressed
if (e.which == 13)
addItem();
});
// on clicking the add button
$("#add").click(addItem);
// delegate the events to dynamically generated elements
// for the edit button
$(document).on("click", 'a[href="#edit"]', function () {
// make the span editable and focus it
$(this).closest("li").find("span").prop("contenteditable", true).focus();
return false;
});
// for the delete button
$(document).on("click", 'a[href="#delete"]', function () {
// remove the list item
$(this).closest("li").fadeOut(function () {
$(this).remove();
});
return false;
});
});
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; text-decoration: none;}
input, li {padding: 3px;}
#todo-items small {display: inline-block; margin-left: 10px; padding: 2px; vertical-align: bottom;}
#todo-items span:focus {background-color: #ccf;}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<input type="text" id="todo" />
<input type="button" value="Add" id="add" />
<ul id="todo-items"></ul>
I have a issue here. I'm trying to do the slideUp and slideDown equivalent in CSS3 transitions but also want when document is clicked the div element slides up.
Here is the code
http://jsfiddle.net/RK8FZ/2/
HTML
<div id="main">
<div id="search-content">
<input type="search" placeholder="Search"/>
<input type="submit" />
</div>
<section class="wrapper">
<span id="toggle-search">Search</span>
</section>
</div>
Here is the CSS code
#main #search-content { position: relative; max-height: 0; overflow: hidden; transition: all .3s linear; background: #FFF; opacity: 0;}
#main #search-content.open { max-height: 200px; opacity: 1; }
Here is the jquery code
function toggleSearch() {
$('#toggle-search').on('click', function(event){
$('#search-content').toggleClass('open').find('input[type="search"]').focus();
$(this).text( $(this).text() === "Search" ? "Close" : "Search" );
})
$('#search-content').on ('click', function(e) {
e.stopPropagation();
});
$(document).on('click', function() {
if( $('#search-content').hasClass('open') ) {
$('#search-content').removeClass('open');
}
});
}
Can anyone figure this thing out? What it is happening is that it triggers the open and the close at the same instante.
Working DEMO
I guess this is what you need
$(function () {
toggleSearch();
})
function toggleSearch() {
$('#toggle-search').on('click', function (event) {
event.stopPropagation();
$('#search-content').toggleClass('open').find('input[type="search"]').focus();
$(this).text($(this).text() === "Search" ? "Close" : "Search");
})
}
$(document).on('click', function (e) {
$('#toggle-search').text('Close');
$('#search-content').removeClass('open');
});
$('#search-content').on('click', function (e) {
e.stopPropagation();
});
$(document).on('click', function () {
if ($(this).addClass('search-open')) {
$('#search-content').removeClass('open');
}
});
What are you checking in if condition? If you wan to check if search-open class exists then you can use
if ($(.search-open').length > 0)
How do I convert an unordered list in this format
<ul class="selectdropdown">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
</ul>
into a dropdown in this format
<select>
<option value="one.html" target="_blank">one</option>
<option value="two.html" target="_blank">two</option>
<option value="three.html" target="_blank">three</option>
<option value="four.html" target="_blank">four</option>
<option value="five.html" target="_blank">five</option>
<option value="six.html" target="_blank">six</option>
<option value="seven.html" target="_blank">seven</option>
</select>
using jQuery?
Edit: When selecting an entry from the select/dropdown the link should open in a new window or tab automatically. I also want to able to style it like: http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/
$(function() {
$('ul.selectdropdown').each(function() {
var $select = $('<select />');
$(this).find('a').each(function() {
var $option = $('<option />');
$option.attr('value', $(this).attr('href')).html($(this).html());
$select.append($option);
});
$(this).replaceWith($select);
});
});
EDIT
As with any jQuery code you want to run on page load, you have to wrap it inside $(document).ready(function() { ... }); block, or inside it's shorter version $(function() { ... });. I updated the function to show this.
EDIT
There was a bug in my code also, tried to take href from the li element.
$('ul.selectdropdown').each(function() {
var select = $(document.createElement('select')).insertBefore($(this).hide());
$('>li a', this).each(function() {
var a = $(this).click(function() {
if ($(this).attr('target')==='_blank') {
window.open(this.href);
}
else {
window.location.href = this.href;
}
}),
option = $(document.createElement('option')).appendTo(select).val(this.href).html($(this).html()).click(function() {
a.click();
});
});
});
In reply to your last comment, I modified it a little bit but haven't tested it. Let me know.
$('ul.selectdropdown').each(function() {
var list = $(this), select = $(document.createElement('select')).insertBefore($(this).hide());
$('>li a', this).each(function() {
var target = $(this).attr('target'),
option = $(document.createElement('option'))
.appendTo(select)
.val(this.href)
.html($(this).html())
.click(function(){
if(target==='_blank') {
window.open($(this).val());
}
else {
window.location.href = $(this).val();
}
});
});
list.remove();
});
This solution is working also in IE and working with selected item (in anchor tag).
$('ul.selectdropdown').each(function(){
var list=$(this),
select=$(document.createElement('select')).insertBefore($(this).hide()).change(function(){
window.location.href=$(this).val();
});
$('>li a', this).each(function(){
var option=$(document.createElement('option'))
.appendTo(select)
.val(this.href)
.html($(this).html());
if($(this).attr('class') === 'selected'){
option.attr('selected','selected');
}
});
list.remove();
});
Thank you all for posting the codes. My scenario is similar but my situation is for Responsiveness that for x-size it would switch to a dropdown list, then if not x-size, using csswatch to check for the "display" properties of an element that has certain amount of width set to it (eg: 740px). Thought I share this solution for anyone who is interested. This is what I have combined with Tatu' codes. Instead of replacing the html, I created then hide the new html then only add them when necessary:
var $list = $('ul.list');
(listFunc = function(display){
//Less than x-size turns it into a dropdown list
if(display == 'block'){
$list.hide();
if($('.sels').length){
$('.sels').show();
} else {
var $select = $('<select class="sels" />');
$list.find('a').each(function() {
var $option = $('<option />');
$option.attr('value', $(this).attr('href')).html($(this).html());
$select.append($option);
});
$select.insertAfter($list);
$('.sels').on('change', function(){
window.location = this.value;
});
}
} else {
$('.sels').hide();
$list.show();
}
})(element.css('display'));
element.csswatch({
props: 'display'
}).on('css-change', function (event, change) {
return listFunc(change.display);
});
I have recently created a solution where the ul transformed, mimics nearly completely the select.
It has in adition a search for the options of the select and supports the active state. Just add a class with name active and that option will be selected.
It handles the keyboard navigation.
Take a look at the code here: GitHub Code
And a live example here: Code Example
The unordered list must be in the form:
<ul id="...">
<li>...</li>
<li>...</li>
<li><a class="active" href="...">...</a></li>
...
</ul>
To convert the ul to select just call:
$(window).on("load resize", function() {
ulToSelect($("ul#id"), 767);
});
Where #id is an id for the unordered list and 767 is the minimum width of the window for the convertion to take place. This is very useful if you want the convertion to take place only for mobile or tablet.
I found this gorgeous CodePen from #nuckecy for anyone interested:
https://codepen.io/nuckecy/pen/ErPqQm
$(".select").click(function() {
var is_open = $(this).hasClass("open");
if (is_open) {
$(this).removeClass("open");
} else {
$(this).addClass("open");
}
});
$(".select li").click(function() {
var selected_value = $(this).html();
var first_li = $(".select li:first-child").html();
$(".select li:first-child").html(selected_value);
$(this).html(first_li);
});
$(document).mouseup(function(event) {
var target = event.target;
var select = $(".select");
if (!select.is(target) && select.has(target).length === 0) {
select.removeClass("open");
}
});
His default CSS rules:
.select li {
display: none;
cursor: pointer;
padding: 5px 10px;
border-top: 1px solid black;
min-width: 150px;
}
.select li:first-child {
display: block;
border-top: 0px;
}
.select {
border: 1px solid black;
display: inline-block;
padding: 0;
border-radius: 4px;
position: relative;
}
.select li:hover {
background-color: #ddd;
}
.select li:first-child:hover {
background-color: transparent;
}
.select.open li {
display: block;
}
.select span:before {
position: absolute;
top: 5px;
right: 15px;
content: "\2193";
}
.select.open span:before {
content: "\2191";
}