I have following DIV which shows some controls:
<div id="buttonrow" class="buttonrow">
<div class="Add" title="Add">
<div class="AddButton">
<input id="images" name="images" title="Add Photos" multiple="multiple" type="file">
</div>
<div class="AddText">
Add
</div>
</div>
<div class="Upload" title="Upload">
<div class="UploadButton">
<button id="start" type="submit" title="Upload Photos">
</button>
</div>
<div class="UploadText">
Upload
</div>
</div>
<div class="Clear" title="Clear">
<div class="ClearButton">
<button id="reset" type="reset" title="Clear Photos">
</button>
</div>
<div class="ClearText">
Clear
</div>
</div>
<div class="Delete" title="Delete">
<div class="DeleteButton">
<button id="delete" type="button" title="Delete Photos">
</button>
</div>
<div class="DeleteText">
Delete
</div>
</div>
<div id="SelectAll">
<input title="Select All Images" id="selectAllCB" type="checkbox">
</div>
<div id="dragandrophandler">
Drag & Drop Your Photos Here
</div>
<div id="ImagesCount">
</div>
<div id="Loading" class="Loading">
<img alt="loading" src="../customcontrol/progress.gif">
<div>
Loading...</div>
</div>
</div>
I need to know how can I disable this entire DIV using Javascript/JQuery function?
EDIT: To disable DIV means user should not be able to interact with DIV controls. They must be in read-only state (non-clickable). I dont want to hide DIV!
in Javascript, you can use:
<script lnaguage="javascript">
document.getElementById('buttonrow').style.display='none';
</script>
use:
$("#buttonrow *").attr("disabled", "disabled").off('click');
Try this with .prop():
$("#buttonrow :input").prop("disabled", true);
:input will select all input elems including text, textarea, button, select etc.
$("button, input",$("#buttonrow")).attr("disabled", "disabled");
Can you please try this:
$("#buttonrow").each(function()
{
$(this).prop('disbaled',true);
});
Hope this helps..
$('#buttonrow').on('click', function(){
$(this).css({ 'opacity': 0.7 });
return false;
})
Related
I use this function part to show hidden div, it is working properly, but it appears suddenly, not nice, I want it to scroll down gently, what can I add to the code?
function show() {
document.getElementById("show").style.display = 'block';
}
<div>
<button type="button" class="btn btn-primary" onclick="show();">Show</button>
</div>
<div id="show" style="background-color:#ccc;display:none;">
<p>Hello!</p>
</div>
There are several ways to do this... using your existing code (and vanilla js) I would use a combination of max-height and transition to get the text to "scroll down":
function show() {
document.getElementById("show").style.maxHeight = '50px';
}
<div>
<button type="button" class="btn btn-primary" onclick="show();">Show</button>
</div>
<div id="show" style="background-color:#ccc;max-height:0;transition:all 0.5s;overflow:hidden">
<p>Hello!</p>
</div>
If you are using jQuery, you can use .slideDown("slow");
https://www.w3schools.com/jquery/jquery_slide.asp
$(document).ready(function(){
$("#thebtn").click(function(){
$("#show").slideDown("slow");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button type="button" class="btn btn-primary" id="thebtn">Show</button>
</div>
<div id="show" style="background-color:#ccc;display:none;">
<p>Hello!</p>
</div>
You can use Jquery. I use this:
$("#show").fadeIn(1000);
$("#show").fadeOut(1000);
$(document).ready(function(){
$("#thebtn").click(function(){
$("#show").fadeIn(1000);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button type="button" class="btn btn-primary" id="thebtn">Show</button>
</div>
<div id="show" style="background-color:#ccc;display:none;">
<p>Hello!</p>
</div>
I want to animate whole bunch of cards in with javascript and hide them when they press a button a data filter. what would be the best way in doing this?
I was thinking of using hide() and show() but zooms the content out and looks bad, I would like to do more of a sorting fade in and out but want to clear the grid and fade items in nicely.
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-group">
<button class="button category-button" data-filter="all" type="button">
All
</button>
<button class="button category-button" data-filter="attraction" type="button">
attraction
</button>
<button class="button category-button" data-filter="bar-pub" type="button">
bar-pub
</button>
<button class="button category-button" data-filter="theater" type="button">
theater
</button>
</div>
<div class="grid-container">
<div class="grid-x grid-padding-x small-up-2 medium-up-3">
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a row of cards.</h4>
<p>This row of cards is embedded in an X-Y Block Grid.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
</div>
</div>
I think this is what you're after?
This assumes each card is a type of category like your filter buttons.
Notice the new data-type added to the cards and the typo on theatre.
To achieve the fade effect, we use jQuery's fadeOut() and fadeIn() methods. You can view more information about jQuery effects here.
//when a button is clicked
$('.button-group button').on('click', function(){
//store the category of the clicked button
var category = $(this).attr('data-filter');
//Loop through all `.card` elements
$('.card').each(function(){
//If the current card in this loop has the same category as the button and it's not the 'all' button then hide it, otherwise fade all cards back in.
if($(this).attr('data-type') != category && category != 'all') {
$(this).fadeOut();
} else {
$(this).fadeIn()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>
<div class="button-group">
<button class="button category-button" data-filter="all" type="button">
All
</button>
<button class="button category-button" data-filter="attraction" type="button">
attraction
</button>
<button class="button category-button" data-filter="bar-pub" type="button">
bar-pub
</button>
<button class="button category-button" data-filter="theatre" type="button">
theater
</button>
</div>
<div class="grid-container">
<div class="grid-x grid-padding-x small-up-2 medium-up-3">
<div class="cell">
<div data-type="bar-pub" class="card">
<img src="https://placehold.it/100x100">
<div class="card-section">
<h4>I'm the bar/pub type</h4>
<p>This row of cards is embedded in an X-Y Block Grid.</p>
</div>
</div>
</div>
<div class="cell">
<div data-type="attraction" class="card">
<img src="https://placehold.it/100x100">
<div class="card-section">
<h4>I'm the attraction type</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
<div class="cell">
<div data-type="theatre" class="card">
<img src="https://placehold.it/100x100">
<div class="card-section">
<h4>I'm the theatre type</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
</div>
</div>
You'll wanna apply the data attributes set on your buttons to the corresponding card and from there just query the card based on its' value:
$(function() {
$('.category-button').on('click', function() {
const filter = this.dataset.filter;
const $filteredCard = $(`.card[data-filter="${filter}"]`);
if (filter === 'all') {
$('.card').stop().fadeIn();
} else {
$filteredCard.stop().fadeIn();
$('.card').not($filteredCard).stop().fadeOut();
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-group">
<button class="button category-button" data-filter="all" type="button">
All
</button>
<button class="button category-button" data-filter="attraction" type="button">
attraction
</button>
<button class="button category-button" data-filter="bar-pub" type="button">
bar-pub
</button>
<button class="button category-button" data-filter="theater" type="button">
theater
</button>
</div>
<div class="grid-container">
<div class="grid-x grid-padding-x small-up-2 medium-up-3">
<div class="cell">
<div class="card" data-filter="attraction">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a row of cards.</h4>
<p>This row of cards is embedded in an X-Y Block Grid.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card" data-filter="bar-pub">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card" data-filter="theater">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
</div>
</div>
I am trying to find clicked button value.here is my htmlcode,I am not able to get but always getting first one.
<div id="addSentiment" class="dialogs">
<div id="1" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> ki#n.com
</div>
<div id="cat_1" class="text">category : Scheduling
<br>
</div>
<div id="op_1" class="text">ddd word/phrase : providing solutions
<br>
</div>
<div id="feature_1" class="text">ddd word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="1" name="hd">
</div>
<div class="tools"> <a id="edit_1" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="2" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tc#n.com
</div>
<div id="cat_2" class="text">category : Scheduling
<br>
</div>
<div id="op_2" class="text">dddd : providing solutions
<br>
</div>
<div id="feature_2" class="text">ddddddde : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="2" name="hd">
</div>
<div class="tools"> <a id="edit_2" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="3" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tn#nn.com
</div>
<div id="cat_3" class="text">category : Scheduling
<br>
</div>
<div id="op_3" class="text">Opinion word/phrase : providing solutions
<br>
</div>
<div id="feature_3" class="text">Feature word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="3" name="hd">
</div>
<div class="tools"> <a id="edit_3" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
</div>
I tried following code in jquery
$(".dialogs .itemdiv .tools").live("click",function(e){
e.preventDefault();
alert('clicked on edit');
var n = $('.dialogs .itemdiv .tools a').attr('id');
alert(n);
});
I use live here because I am getting above html by using append method in jquery.
live is deprecated in later versions of jQuery - but to solve your issue you need to use an instance of this
$("#addSentiment").on("click", ".dialogs .itemdiv .tools", function(e){
e.preventDefault();
alert('clicked on edit');
var n = $("a", this).attr('id');
alert(n);
});
jQuery selectors catch the first match of their content.
To catch the n-th match, you need to use the n-th child selector, like this:
$(".dialogs .itemdiv .tools:nth-child(2)")
I am not familiar with the live method, but you should be able to do something like the following:
function addHandlers() {
$(".dialogs .itemdiv .tools a").each(function() {
$(this).click(function() {
alert('clicked on edit');
);
});
}
function yourAppendFunction() {
//your append code
//add call to a function that will create your event handlers
addHandlers();
}
The .each method runs through each and every item that fits the selection criteria, and then we use the this keyword within the function to reference what we are working on. Putting it in a function that we don't call until after you append the items ensures the html exists when you try to add the handlers you need.
API references:
each method: http://api.jquery.com/each/
click method: http://api.jquery.com/click/
I'm not exactly sure what it is that i need, so the following explanation may not be clear - please let me know if not.
I want to slideToggle a specific clicked div, the code i currently have of course slideToggle's all instances of the div with a class of .open-statement, but i want to only toggle the one instance of this class that appears inside the parent div .agenda-content. There will be numerous instances of .open-statement on the page eventually, but only one of them should toggle (the one that's inside the current clicked div).
HTML
<div class="agenda-content">
<div class="row stance-row">
<div class="col-xs-3 no_padding">
1
</div>
<div class="col-xs-2">
Obamacare
<button class="btn btn-orange">Remove Stance</button>
</div>
<div class="col-xs-2">
Add jQuery UI here
</div>
<div class="col-xs-2">
34
</div>
<div class="col-xs-2 no_padding">
Wayne Rooney
</div>
</div>
<div class="row no-row-style">
<div class="open-statement">
<div class="col-xs-4 col-xs-offset-1">
<div class="your-statement">
<textarea placeholder="Please write your statement"></textarea>
<button class="btn btn-orange">Edit</button>
</div>
</div>
<div class="col-xs-7 no_padding">
<div class="statement-actions">
<button class="btn btn-alert">Deactivate</button>
<button class="btn btn-lt-secondary">View Debates</button>
<button class="btn btn-orange">Unsupport</button>
</div>
</div>
</div>
</div>
<div class="row stance-row">
<div class="col-xs-3 no_padding">
2
</div>
<div class="col-xs-2">
Raise Minimum Wage
<button class="btn btn-orange">Take a Stance</button>
</div>
<div class="col-xs-2">
Add jQuery UI here
</div>
<div class="col-xs-2">
34
</div>
<div class="col-xs-2 no_padding">
Stephen King
</div>
</div>
<div class="row no-row-style">
<div class="open-statement">
<div class="col-xs-4 col-xs-offset-1">
<div class="your-statement">
<textarea placeholder="Please write your statement"></textarea>
<button class="btn btn-orange">Edit</button>
</div>
</div>
<div class="col-xs-7 no_padding">
<div class="statement-actions">
<button class="btn btn-alert">Deactivate</button>
<button class="btn btn-lt-secondary">View Debates</button>
<button class="btn btn-orange">Unsupport</button>
</div>
</div>
</div>
</div>
</div>
jQuery
$(document).ready(function () {
$(".stance-row").click(function () {
$(".agenda-content").find(".open-statement").slideToggle();
});
});
.agenda-content is the parent of all .open-statement. You need to be more specific. Use .next and .find() :
$(document).ready(function () {
$(".stance-row").click(function () {
$(this).next().find(".open-statement").slideToggle();
});
});
You are almost there, you just need to change your code to get respective next item.
$(document).ready(function () {
$(".stance-row").click(function () {
$(this).next("div.row").find(".open-statement").slideToggle();
});
});
DEMO : http://jsfiddle.net/6GMj7/
Cheers,
Ashok
Use this:
$(this).closest(".agenda-content").find(".open-statement").slideToggle();
I am trying to target all buttons, that are children of a div with the class 'actions'.
I want my function to take the values from onclick, filter out letters and special chars, and add the numbers to an array.
The function works, when i try to target the buttons OUTSIDE the div, but not when i try to target .actions button.
Anyone have any ideas?
Fiddle: http://jsfiddle.net/Teilmann/wN79n/5/
html:
<div class="actions">
<button onclick="addToCart(1337, 'something');" />
</div>
<div class="actions">
<button onclick="addToCart(1338, 'something');" />
</div>
<div class="actions">
<button onclick="addToCart(1339, 'something');" />
</div>
js:
var products = new Array();
jQuery('.actions button').each(function(){
var id = jQuery(this).getAttribute('onclick');
products.push(id.replace(/[^0-9]/g, ''));
});
alert(products);
Your html is incorrect <button/> it needs to be <button></button> and getAttribute has to be .attr()
HTML
<button onclick="str1" ></button> <!--changed html here from <button/>-->
<button onclick="2" ></button> <!--changed html here from <button/>-->
<button onclick="addToCart(1234, 'something');" ></button> <!--changed html here from <button/>-->
<div class="actions">
<button onclick="addToCart(1337, 'something');" />
</div>
<div class="actions">
<button onclick="addToCart(1338, 'something');" />
</div>
<div class="actions">
<button onclick="addToCart(1339, 'something');" />
</div>
jQuery
var products = new Array();
jQuery('.actions button').each(function(){
var id = jQuery(this).attr('onclick');
products.push(id.replace(/[^0-9]/g, ''));
});
alert(products);
DEMO
If you don't close the button with </button> the html will automatically generate this markup
<button onclick="str1"></button>
<button onclick="2"></button>
<button onclick="addToCart(1234, 'something');">
<div class="actions"></div>
</button>
<button onclick="addToCart(1337, 'something');">
<div class="actions"></div>
</button>
<button onclick="addToCart(1338, 'something');">
<div class="actions"></div>
</button>
<button onclick="addToCart(1339, 'something');"></button>