<body ng-controller="ChatController">
<br>
<div class="container">
<div class="panel panel-primary" id="container">
<div class="panel-heading">Web Based Firebase Chat Application</div>
<div class="panel-body">
<p ng-repeat="m in messages">{{m.message}} - {{m.date | date:'medium'}}</p>
<div class="form-group">
<input type="text" class="form-control" placeholder="Message here..." ng-model="messageText">
</div>
<button type="submit" class="btn btn-default" ng-click="send()">Send</button>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$("#container").click(function () {
$(this).next('#container').slideToggle("slow");
}); });
</script>
What your code currently says is: "When clicking #container, find the next element #container and toggle it".
That doesn't work, there is no other #container element beside the element with the id "container".
So just remove the .next('#container') part, and clicking the container will slideToggle it.
<body ng-controller="ChatController">
<br>
<div class="container">
<div class="panel panel-primary" id="container">
<div class="panel-heading">Web Based Firebase Chat Application</div>
<div class="panel-body">
<p ng-repeat="m in messages">{{m.message}} - {{m.date | date:'medium'}}</p>
<div class="form-group">
<input type="text" class="form-control" placeholder="Message here..." ng-model="messageText">
</div>
<button type="submit" class="btn btn-default" ng-click="send()">Send</button>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$("#container").click(function () {
$(this).slideToggle("slow");
}); });
</script>
Also keep in mind, when hiding the container, you cant toggle (show it again) it, as its now completely hidden and not clickable at all.
Related
everyone, I am totally new to this and I was just wondering, is there a way to auto click a button when styling display:block?
I would really appreciate if someone can point me in the right direction.
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>
You can check the display property to trigger() the click the event:
if($('#advert').css('display') == 'block')
$('#statsContinue').trigger('click');
function closeStats(){
console.log('auto click happened');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>
You could check if the element is visible using .is(':visible') then trigger the click using click() like :
if ($('#advert').is(':visible')) {
$('#statsContinue').click();
}
function closeStats() {
alert('Clik triggered');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>
I don't understand how to select by name with Jquery the button "g_list".
<div class="col-sm-4 sezione-na">
<div class="titolo-sezione-na">Title:</div>
<div class="form-group">
<div class="col-sm-12"><button name="g_list" type="button" class="btn btn-primary btn-block">Generate list</button></div>
</div>
I wrote this Jquery code, but it doesn't work:
$("input[name='g_list']").click(function(){
alert( "ready!" );});
In your code input[name='g_list'] will be search input element with that name, instead you need to search for button so use button[name='g_list'] for that.
$("button[name='g_list']").click(function() {
//--^------ change here
alert("ready!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4 sezione-na">
<div class="titolo-sezione-na">Title:</div>
<div class="form-group">
<div class="col-sm-12">
<button name="g_list" type="button" class="btn btn-primary btn-block">Generate list</button>
</div>
</div>
When I'm trying to add dynamically a div after click on a "reply" class, it is just repeat for my first div.
I want to add that div after each div but it is just works for the first one.
Here is my code:
$(function () {
$(".repetable").hide();
$(".reply").bind("click", function () {
$(".repetable").hide();
$(".repetable").slideDown("slow")
$("#nazar").slideUp("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<!--div 1-->
<div class="comment1">
<p>YOUR COMMENT</p>
<div class="reply">
reply
</div>
</div>
<!--End div 1-->
<div class="repetable">
<form class="formnazar-user">
<input type="text" />
</form>
</div>
<!--div 2-->
<div class="comment1">
<p>YOUR COMMENT2</p>
<div class="reply">
reply
</div>
</div>
<!--End div 2-->
<div class="repetable">
<form class="formnazar-user">
<input type="text" />
</form>
</div>
</div>
If I understand correctly the problem, after .reply click the both of the .repetable did the slidedown() animation.
So, you just need to do this only on the .repetable that come after the comment. So, you need to use the parents() function,
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
like this:
$(function () {
$(".repetable").hide();
$(".reply").bind("click", function () {
// $(".repetable").hide(); - You don't need it
// You want to do this only for the next div after the sepecific comment
$(this).parents('.comment1').next().slideDown("slow");
//$(".repetable").slideDown("slow")
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<!--div 1-->
<div class="comment1">
<p>YOUR COMMENT</p>
<div class="reply">
reply
</div>
</div>
<!--End div 1-->
<div class="repetable">
<form class="formnazar-user">
<input type="text" />
</form>
</div>
<!--div 2-->
<div class="comment1">
<p>YOUR COMMENT2</p>
<div class="reply">
reply
</div>
</div>
<!--End div 2-->
<div class="repetable">
<form class="formnazar-user">
<input type="text" />
</form>
</div>
</div>
The problem here is that you select by the same class. All your "repetable" divs will be affected by your
$(".repetable").hide();
$(".repetable").slideDown("slow")
To solve this, you can make the HTML to look more like this. Note the replay input is inside the comment where it actually belongs. (or you can use a different parent to group the comment div with the comment replay input)
<div class="main">
<!--div 1-->
<div class="comment">
<p>YOUR COMMENT</p>
<div class="reply">
reply
</div>
<div class="repetable">
<form class="formnazar-user">
<input type="textbox" />
</form>
</div>
</div>
<!--End div 1-->
<!--div 2-->
<div class="comment">
<p>YOUR COMMENT2</p>
<div class="reply">
reply
</div>
<div class="repetable">
<form class="formnazar-user">
<input type="textbox" />
</form>
</div>
</div>
<!--End div 2-->
</div>
After that, you can use a js event handler like this, to dynamically select the replay input related to the replay button that the user just clicked:
$(".repetable").hide();
$(".reply").bind("click", function(e) {
var target = $(e.target);
var targetRepeatable = target.parents('.comment').find('.repetable');
targetRepeatable.hide();
targetRepeatable.slideDown("slow")
$("#nazar").slideUp("slow");
});
You can see it in action here: https://jsfiddle.net/hm1zxy5b/
Thanks
I have the following code
Html markup
<div>
<div class="col-md-6">
<button type="button" class="adddate">Add Date</button>
</div>
<div class="col-md-12 form-group">
<div class="datesaccordion panel-group">
</div>
</div>
</div>
<div>
<div class="col-md-6">
<button type="button" class="adddate">Add Date</button>
</div>
<div class="col-md-12 form-group">
<div class="datesaccordion panel-group">
</div>
</div>
</div>
<div>
<div class="col-md-6">
<button type="button" class="adddate">Add Date</button>
</div>
<div class="col-md-12 form-group">
<div class="datesaccordion panel-group">
</div>
</div>
</div>
Jquery Code
$(document.body).on("click", ".adddate", addDate);
function addDate(e) {
$(e.target).closest(".datesaccordion").append($("<p />").html("test"));
}
Here i am trying to insert the DHTML on .adddate button click. And i want to inter the DHTML in the closest .datesaccordion div from .adddate button. But the jquery code
(above mentioned) is not working.
Can anybody please tell me what i am missing??
It should be
$(document).on("click", ".adddate", addDate);
function addDate(e) {
$(this).parent().next().find(".datesaccordion").append($("<p />").html("test"));
}
Demo: Fiddle
The datesaccordion element is not a ancestor of the button, it is a descdendant of the next sibling of the buttons's parent, so you cannot use .closest() here
Try:
$(document).on("click", ".adddate", addDate);
instead of:
$(document.body).on("click", ".adddate", addDate);
as well as changing your addDate() function to this:
function addDate(e) {
$(this).parent().siblings('.col-md-12').find('.datesaccordion').append($("<p />").html("test"));
}
I am using bootstrap for my project.
It is the structure i am following to design layout-
<div class="row-fluid">
<div class="expand-this">
<div class="span8">
<div class="row-fluid">
<div class="span6 pull-left">
<b>Display Name</b>
</div>
<div class="span6 pull-right">
<input type="text"/>
</div>
</div>
</div>
</div>
<div class="hide-accordion">
<div class="span4">
<div class="block">
...some information..
</div>
</div>
</div>
<button class="button-hiding"></button>
Here you can see i am aligning two block in a row. Second span in row-fluid with span4 Is taking dynamic values.
So i am trying to hide it with button.
jQuery-
$('.hide-accordion').hide();
$(function () {
$('.button-hiding').click(function () {
$('.hide-accordion').toggle(this);
});
});
This is what working fine.
I am hiding this accordion on window load.
What i want-
I want span8 to take full width with span12 when accordion is hidden and as soon as i click on button, accordion appears. then it should be taking original span8 width.
I tried this too with jQuery-
$('.hide-accordion').hide();
$(function () {
$('.button-hiding').click(function () {
$('.hide-accordion').toggle(this);
$('.Expand-this>div .span8').removeClass('span8');
$(this).addClass('span12');
});
});
But no luck, help?
Try with this,
HTML:-
<div class="row-fluid">
<div class="span8 expand-this">
<div class="row-fluid">
<div class="span6 pull-left">
<b>Display Name</b>
</div>
<div class="span6 pull-right">
<input type="text"/>
</div>
</div>
</div>
<div class="span4 hide-accordion">
<div class="block">
...some information..
</div>
</div>
<div>
<button class="button-hiding"></button>
And Jquery:-
$(function () {
$('.hide-accordion').hide();
$(".expand-this").removeClass("span8").addClass("span12")
$('.button-hiding').click(function () {
if($(".expand-this").hasClass('span8')){
$(".expand-this").removeClass("span8").addClass("span12")
}else{
$(".expand-this").removeClass("span12").addClass("span8")
}
$('.hide-accordion').toggle();
});
});