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/
Related
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>
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>
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>
Hey, it's all about Jquery. I am using two Div and a button, at a time only one div is shown. Suppose these are div:
<div id="first"></div>
<div id="second"></div>
And button is:
<input type="button" value="show first" onClick="called a javascript();"/>
Only single div is shown i.e. first
<script>
$(document).ready( function() {
$("#second").hide();
});
</script>
Now on clicking button, I want to hide first div, show second and the value of button is changed to show second and if clicked again it revert back to previous state.
Thanks in advance
Heres' the FIDDLE. Hope it helps.
html
<div id="first" style="display:none;">first</div>
<div id="second">second</div>
<input id="btn" type="button" value="show first" />
script
$('#btn').on('click', function () {
var $this = $(this);
if ($this.val() === 'show first') {
$('#first').show();
$('#second').hide();
$this.val('show second');
} else {
$('#first').hide();
$('#second').show();
$this.val('show first');
}
});
What you are looking for is the toggle function from jquery
Here's an example on fiddle
$(".toggleMe").click(function() {
$(".toggleMe").toggle();
});
I have a rather simple question for once. I have delete buttons that open modal pop ups to confirm or deny deletion. I would like these modal pop ups to fade in on click and fade out on cancel. I've tried a few different things already, no luck so far. I just need a simple solution. Thanks in advance. Here's my code
<style>
div.delModal
{
position:absolute;
border:solid 1px black;
padding:8px;
background-color:white;
width:160px;
text-align:right
}
</style>
<script>
function showModal(id) {
document.getElementById(id).style.display = 'block';
//$(this).fadeIn('slow');
}
function hideModal(id) {
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
<input type ="button" value="delete" onclick="showModal('delAll1')">
<div class="delModal" style="display:none" id="delAll1">
<img src="images/warning.png" /> Are you sure you want to delete vessel and the corresponding tanks?<br />
<input type="button" value="Cancel" class="hide" onclick="hideModal('delAll1')"/>
<input type="button" value="Delete" onclick="delVesselAll(1)" id="delete"/>
</div>
</body>
Use .fadeIn() and .fadeOut() on your id parameter ("delAll1") not on this.
function showModal(id) {
$("#" + id).fadeIn('slow');
}
function hideModal(id) {
$("#" + id).fadeOut('slow');
}
By using, $("#" + id) you can select an element by its id, that's "#" + id.
See it here.
Note: Change from onLoad to no wrap (head) under framework on the left sidebar to fix the scope issue.
I wasn't satisfied with your first two comments so I made a new fiddle:
http://jsfiddle.net/dkmkX/
$(document).ready(function () {
$('.deleteButton').each(function (i) {
var whichModal = i; //use this index, a data attribute on the modal, or $(this).parent().parent() to find delete the actual item from the page
var deleteModal = $(this).parent().find('.deleteModal');
$(this).click(function (e) {
deleteModal.fadeIn('slow');
});
$(this).parent().find('.modalDelete').click(function (e) {
deleteModal.fadeOut('slow');
});
$(this).parent().find('.modalCancel').click(function (e) {
deleteModal.fadeOut('slow');
});
});
}); //ready
This will let you add multiple delete buttons each with their own modals.
There's a comment in the JS about how to find out which modal has been pressed, since this solution is ID independent.
Use fadeIn() on the right selector('#'+id), this in the current context would be the global object.
function showModal(id) {
$('#'+id).fadeIn();
//$(this).fadeIn('slow');
}
function hideModal(id) {
$('#'+id).fadeOut();
}
DEMO
Why do not use id for each button like this
<input type ="button" value="show" id="show">
<div class="delModal" style="display:none" id="delAll1">
<img src="images/warning.png" /> Are you sure you want to delete vessel and the corresponding tanks?<br />
<input type="button" value="Cancel" class="hide" id="delete"/>
<input type="button" value="Delete" onclick="delVesselAll(1)" id="delete"/>
</div>
And the jquery like this
$("#show").click(function() {
$("#delAll1").fadeIn();
});
$("#delete").click(function() {
$("#delAll1").fadeOut();
});