JQuery issue with onclick slide up function - javascript

I have script for slideup and slide down function in jquery, and a button each of them.
both are working fine until i thought of giving the slide up from by letting the user click anywhere in the site.. i.e., when user clicks slide down button its slides down and when he click anywhere on the screen later the content slides up.
unfortunately its having a small problem of auto sliding down and sliding up when i hit slide down button.
the script as follow::
<div id="a" name="a">
</br>
<small><p id="date2"><?php echo $row2["date"]; ?></p></small>
<p><B><big><font color= #ba4a00> A:</font></B></big> <small><?php echo $row2["answer"]; ?></small></p>
</div>
<button id="showmoreless" class="hide">Hide Answers</button>
<button id="showmoreless" class="show">Show Answers</button>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".hide").hide();
$('[name="a"]').slideUp();
$(".show").click(function(e){
e.preventDefault();
$(this).parent().find('[name="a"]').slideDown();
$(this).hide();
$(this).parent().find(".hide").show();
});
$('[name="a"]').click(function(e){
e.stopPropagation();
});
$(window).click(function(e) {
console.log($(e.target));
if (!$(e.target).is('[name="a"]')) {
$('.show').show();
$('[name="a"]').slideUp();
}
});
});
</script>
Any help is Appreciated..

It slides back up straight away because both your event handlers are executing - by definition a click on your show element is also a click on the window.
To stop this happening you need stopPropagation
$(".hide").hide();
$('[name="a"]').slideUp();
$(".show").click(function(e){
e.preventDefault();
$(this).parent().find('[name="a"]').slideDown();
$(this).hide();
$(this).parent().find(".hide").show();
e.stopPropagation(); // <-- here
});
$('[name="a"]').click(function(e){
e.stopPropagation();
});
$(window).click(function(e) {
//console.log($(e.target));
if (!$(e.target).is('[name="a"]')) {
$('.show').show();
$('[name="a"]').slideUp();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="a" name="a">
<br>
<small><p id="date2">date here</p></small>
<p><big><font color= #ba4a00> A:</font></big> <small>answer here</small></p>
</div>
<button id="showmoreless" class="hide">Hide Answers</button>
<button id="showmoreless" class="show">Show Answers</button>

Related

can we write script for the button which is inside the popover?

I have created a popover so that if I click on the image the popover should appear.
The popover is working. what my main problem is I have inserted buttons in the popover.
so I want to write javascript or jquery code for the button when it is clicked. Can anyone help on this?
I have tried but it's not working!!!!
$(function() {
$('button').click(function() {
var x = $(this).attr('class');
alert(x);
});
});
$(function() {
$("[data-toggle=popover]").popover({
html: true,
container: 'body',
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
},
placement: "auto"
});
});
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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/3.3.7/js/bootstrap.min.js"></script>
<script src="./isobar.js">
</script>
<span>
<img src="./img/more_options_icon.png" data-toggle="popover" tabindex="5" data-trigger="focus" data-popover-content="#moreoptions">
</span>
<div id="moreoptions" class="hidden">
<div class="popover-body">
<div class="list-group">
<button type="button" class="list-group-item"><span class="gap"></span>Edit</button>
<button type="button" class="list-group-item"><span class="gap"></span>Logic Builder</button>
<button type="button" class="list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
O.k. Here is an updated version of my answer and checked and working code. A secret of a popover is to fire the correspondence function in a right time with a popover firing. So the JS code is:
function firePopover() {
$('.hidden').css('display', 'block');
var delay = 100;
setTimeout(function () {
$('button:not(.main)').unbind('click');
$('button:not(.main)').click(function () {
var x = $(this).attr('class');
alert(x);
$('.hidden').css('display', 'none');
});
}, delay);
}
Here I an using html selector
:not(.main)
to prevent binding and unbinding events to the main button. In addition, we have to pay attention on the fact that every popover rising binds a new event handler to each button. This means that after n popover risings every button will fire it's alert n times. To prevent this effect, it is possible to bind events in the first rising only, or as I did, to unbind an event from a button every popover rising. As to html code, here it is:
<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
<div class="popover-body">
<div class="list-group">
<button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
<button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
<button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>
I only added the ".main" button to accept a simulation, and each button got additional corresponding class "class-0", "class-1", "class-2" for successful demonstration. Now, when you push on the main button, other 3 buttons appear. And to the contrary, pushing on any of those 3 buttons, is following by alert firing and disappearing of all of them. I hope this will help you.
function firePopover() {
$('.hidden').css('display', 'block');
var delay = 100;
setTimeout(function () {
$('button:not(.main)').unbind('click');
$('button:not(.main)').click(function () {
var x = $(this).attr('class');
alert(x);
$('.hidden').css('display', 'none');
});
}, delay);
}
.hidden {
display: none;
}
button {
float: left;
}
.class-0 {
clear: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
<div class="popover-body">
<div class="list-group">
<button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
<button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
<button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
</div>
</div>
</div>

How to use Jquery to make a button disapear and then reapear?

I have data that when I click on Show More it shows the data and the Show More disappears. The data and a new button Show Less appears. When I click on the Show Less the data disappears again. How can I make the Show More appear back once Show Less is clicked?
My HTML Code is:
<button id="show">Show More</button>
<div id="complete">
<img src="Pictures/xerox.png" height="20%" width="20%">
</div>
<p>
<button id="hide">Show Less</button>
My Jquery Code is:
$(document).ready(function(){
$("#show").click(function(){
$(this).parent().addClass("more");
$(this).hide();
$("#complete").show();
});
$("#hide").click(function(){
$("#complete").hide();
});
});
It looks like your jQuery is telling the object making the call to hide itself when clicked:
$(this).hide();
Based on your description, I would recommend adding the following to your function that handles the Show Less function:
$('#show').show();
What I understand from the question this is what you want
<style>
#complete{
display:none;
}
#hide{
display:none;
}
</style>
<button id="show">Show More</button>
<div id="complete">
<img src="Pictures/xerox.png" height="20%" width="20%">
</div>
<p>
<button id="hide">Show Less</button>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$(this).parent().addClass("more");
$(this).hide();
$("#hide").show();
$("#complete").show();
});
$("#hide").click(function(){
$("#complete").hide();
$("#show").show();
$("#hide").hide();
});
});
</script>

Remove specific lines on button click

If I have the following:
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<input type="submit" value="Submit" />
How to make (div test1 and test3) removed upon clicking on the submit button?
Try this:
var button = document.querySelector('input[type="submit"]');
button.onclick = function(event) {
event.preventDefault();
var ids = ['test1','test3'];
var count = ids.length;
while(count--) {
document.getElementById(ids[count]).remove();
}
};
<div id="test1">test1</div>
<div id="test2">test2</div>
<div id="test3">test3</div>
<div id="test4">test4</div>
<input type="submit" value="Submit" />
Using jQuery, you should have something like this jsFiddle :
$(document).ready(function(){
$('#submit-btn').click(function(e){
e.preventDefault();
$('#test1, #test3').remove();
})
});
You could try with JQuery hide accordian, here's an example:
Put this in your head tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#1, #3").hide();
});
$("#show").click(function(){
$("#1, #3").show();
});
});
</script>
And this n your body tag:
<div id="1">If you click on the "Hide" button, I will disappear.</div>
<div id="2">If you click on the "Hide" button, I will disappear.</div>
<div id="3">If you click on the "Hide" button, I will disappear.</div>
<div id="4">If you click on the "Hide" button, I will disappear.</div>
<button id="hide">Hide</button>
<button id="show">Show</button>

show and hide element on mouse over jquery

I want to show the buttons on hover and hide them when moused out, i tried the following code but doesnt work.
<div class="mybooks">
<div class="divbutton">
<input class="btnsubmit" type="button" value="Edit" id="edit_trivia">
<input class="btnsubmit" type="button" value="Delete" id="delete_trivia">
</div>
</div>
".$Tri_IMAGE."
".$Tri_CAPTION."
</div>";
}
?>
</div>
<!--close accordion-->
</div>
<script>
$( ".mybooks" ).mouseenter(function() {
$('.divbutton').show();
});
$( ".mybooks" ).mouseleave(function() {
$('.divbutton').hide();
});
</script>
Just hide the div first
//hide the div here
var $btn = $('.divbutton').hide()
$(".mybooks").mouseenter(function () {
$btn.show();
});
$(".mybooks").mouseleave(function () {
$btn.hide();
});
Demo: Fiddle
Or use a css rule to hide it
.divbutton {
display:none
}
Demo: Fiddle
This fiddle shows the buttons hiding (display: none;) when you hover over them. The thing is, you can't have them reappear once they're gone. There is nothing to hover over...
<div class="divButtons">
<input class="btnsubmit" type="button" value="Edit" id="edit_trivia" />
<input class="btnsubmit" type="button" value="Delete" id="delete_trivia" />
</div>
JavaScript:
$('#edit_trivia').hover(function(){
$(this).css('display', 'none');
});
$('#delete_trivia').hover(function(){
$(this).css('display', 'none');
});
You should put your javascript code in this function:
$( document ).ready(function() {
//your code
});
Your code: http://jsfiddle.net/VGJ5u/

JQuery Is not working properly on mouseenter and mouseleave

Hi I am making an effect that is when Mouse Enter in div one button shows in that div and when user mouse leave that area again button hide.
It works but the problem is that I have used div many times so I have used class for div definition.
So when Mouse enter in one div other div also affected.
Code :
jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#container").mouseenter(function(){
$(":button").show();
});
$("#container").mouseleave(function(){
$(":button").hide();
});
});
</script>
jsp code :
<div id="container">
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=3">
<img src="product_images/Tulips1760331818.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">Nokia Lumia 925</div></div>
<div class="mainitemlistprice"><div align="center">38000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=5">
<img src="product_images/Jellyfish456319058.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">HCL Me</div></div>
<div class="mainitemlistprice"><div align="center">40000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
</div>
I have try to put Jquery on class="mainitemlist" but It's not working.
So I have added in id="container".
Anyone have idea, why it's not working ???
You can do this:
$(document).ready(function () {
$(".mainitemlist").mouseenter(function () {
$(this).find(":button").show();
}).mouseleave(function () {
$(this).find(":button").hide();
});
});
Demo: Fiddle
When you used the class mainitemlist you were not using the function scope properly using $(this) and hence it showing all the button on mouseenter, since you used the code:
$(":button").show();
UPDATE
$(document).ready(function () {
$(document).on('mouseenter', '.mainitemlist', function () {
$(this).find(":button").show();
}).on('mouseleave', '.mainitemlist', function () {
$(this).find(":button").hide();
});
});
try:
$(document).ready(function(){
$("#container").mouseenter(function(){
$("#container button").show();
});
$("#container").mouseleave(function(){
$("#container button").hide();
});
});
check out this fiddle.
b.t.w, you have 2 divs with the id of container. this is probably a mistake, and if not, it's bad practice.
hope that helps.
$("#container").mouseenter(function(){
$(this).find('#yourbutton').show();
});
$("#container").mouseleave(function(){
$(this).find('#yourbutton').hide();
});

Categories

Resources