I'm really new to Jquery so I really need a some help from you guys.
I have created a button, when clicked a pop up menu will appear. Now I have created a script, what it does is when that button is clicked the sideshow on the site background will be hidden (this is to make the pop up menu much smoother), my question is after a user closes down the pop up menu, how can I reshow the hidden slideshow again , I believe it has something to do with this code onHide: function()
<script>
jQuery(document).ready(function(){
jQuery('.menubutton').click(function(){
jQuery("#slideshow").css({"display":"none"});
});
});
</script>
To show and hide alternatively use .toggle()
jQuery("#slideshow").toggle()
Demo: Fiddle
To Hide an element use .hide()
jQuery("#slideshow").hide()
To Display a hidden an element use .show()
jQuery("#slideshow").show()
I believe jQuery.toggle() is what you are after:
jQuery(document).ready(function () {
jQuery('.menubutton').click(function () {
jQuery('#slideshow').toggle();
});
});
Fiddle: http://jsfiddle.net/QGdLw/1/
Related
I have a block of repeating images, each with a caption underneath. I am using slideToggle to show and hide the caption for each image when the image is clicked.
$('.imageholder').click(function() {
$(this).next().slideToggle("fast");
});
A working fiddle showing my method is here.
This works as it should but I want to prevent multiple captions from being visible simultaneously. As a user clicks an image, any open captions should close. In my example, you will see it is possible to open all captions. This is what I want to prevent.
Would appreciate a nudge in the right direction. Thanks.
Just do something like this?
$('.imageholder').click(function() {
$('.description').slideUp();
$(this).next().slideToggle("fast");
});
You should try hiding the other visible elements:
$('.imageholder').click(function() {
$('.description:visible').not($(this).next()).slideToggle("fast");
$(this).next().slideToggle("fast");
});
slideUp() all descriptions that aren't the current one, then slideToggle() the current one.
$('.imageholder').click(function() {
var $desc = $(this).next();
$('.description').not($desc).slideUp('fast');
$(this).next().slideToggle("fast");
});
I have created a page where I have showing multiple boxes, and each box have three vertical dots on top right corner, when you click on those three dots it will open sub menu, for which I have used slidetoggle and what I wanted is when user click on the dots from one box it should show at once place only but right now its showing on all boxes, the jQuery I have written is not working as expected.
Here is the JSfiddle demo
For slide toggle I have the following JQuery:
$('.popout_info > a').click(function () {
$(".popout_info").next().slideToggle(200);
});
Can anyone please suggest how to handle this, if I assign ID to each DIV then in this case the boxes are going to be in unlimited numbers, may be something which can be handled dynamically?
Thanks in advance!
You have to change your jQuery function to achieve that as:
jQuery
$('.popout_info > a').click(function() {
$('.popout_list').slideUp(200);
var nextPopup = $(this).parent(".popout_info").siblings('.popout_list');
if (!($(nextPopup).is(':visible'))) {
$(nextPopup).slideToggle(200);
}
});
Here's your updated JSFiddle
I have made some amendments to hide any other open popup if one popup opens to disallow redundancy.
You are selecting every popup window. Try using :
$('.popout_list').slideUp(200);
$(this).closest('.doctor_wrapper').find('.popout_list').slideToggle(400);
You can use the following code to achieve this.
JS
$('.popout_info > a').click(function () {
$(this).parent().parent().find(".popout_info").next().slideToggle(200);
});
Or try this link
https://jsfiddle.net/wo1b58wj/7/
I used:
$('.popout_info > a').click(function () {
$(this).parent().next().slideToggle(200);
});
and it worked for me.
Side note: it's hard to click on those three dots because the box resize on mouse enter/leave
I use Jquery toggle method to view a div when a button is clicked
$("button").click(function(){
$("#divId").toggle();
});
Works fine but the initial value is set to be viewed or as the css property display:block so when the page initially loads the div is viewed and I have to click the button to close it.
what other answers suggested is that I change the css property but I do not want that as that will hide the div and if the user had their javascript not working for any reason, that would not be good.
So I want to hide the div initially with javascript and then comes Jquery's toggle method working normally. I tried document.getElementById(divId).style.dsplay="none" and put it right before the toggle method, but that makes the toggle not work and just hides the div.
You may set initial value to hide the div by this way:
$(document).ready(function(){
$("#divId").hide();
$("button").click(function(){
$("#divId").toggle();
});
});
After you click the button. it will toggle to open the page.
Try this to hide div on page load:
$(document).ready(function(){
$("#divId").hide(); //or .toggle()
});
[UPDATE]
Or if you have more advanced logic on click event and you want it to also run on load:
$(document).ready(function(){
$("button").trigger('click');
});
I have two button start and stop. on page load stop button hide and start button show.
when i click start button this button hide and stop button show.
i am using .hide() method.
Jquery Code:
$(window).load(function ()
{
$('#stop').hide();
});
It's working but issue is when page load this (stop button) will show for a second(like a blink) and then hide. i want to hide completely mean i don't want to show stop button when page load.
Hide it once only the button has loaded, not the whole window.
$("#stop").load(function() {
$(this).hide();
});
Otherwise you can always use CSS to hide it with display:none;
Maybe use CSS :
#stop { display: none; }
It is because you have used the load event handler, So till all the resources of the page is loaded the script is not executed.
One possible solution is to use a css rule, with the id selector to hide the element like
#stop{display: none;}
$(document).ready(function () {
$("#btnStop").click(function (e) {
e.preventDefault();
$(this).hide();
$("#btnPlay").show();
})
$("#btnPlay").click(function (e) {
e.preventDefault();
$(this).hide();
$("#btnStop").show();
})
})
I know there are a few questions related, but I wanted to ask the question more clearly. I took the time to duplicate my issue on jsfiddle (link at bottom).
I have a jquery event:
$(document).ready(function () {
$('.ui.contact.selection.dropdown').on("click", function () {
$(this).dropdown()
;
})
});
The dropdown menu is located inside of a modal, which isn't actually present until THAT div is clicked, with
$('.item.contact').on("click", function () {
$('.ui.modal')
.modal('show')
;
})
The problem is that when I load the modal, and then click the dropdown menu, the menu takes two clicks before it fires. I am guessing this is because the dropdown isn't available on page load. The first click loads it, the second click fires it? I'm not sure but would appreciate assistance!
Please see the jsfiddle
Try setting the show option when you create the dropdown:
$(this).dropdown('show', true)
Fiddle: http://jsfiddle.net/o8r0fzfg/8/
I tried the code below and it works!
$(document).ready(function () {
$('.ui.contact.selection.dropdown').dropdown();
//CONTACT MODAL
$('.item.contact').on("click", function () {
$('.ui.modal').modal('show');
});
});
I believe the "dropdown" should be fired on pre-loading.
Looking at the documentation for semantic, it seems that the first .dropdown will create the object, and the second will cause the toggle to fire (by default). If you want to make it a toggle operation, try the following:
$(document).ready(function () {
...
$('.ui.contact.selection.dropdown').dropdown();
$('.ui.contact.selection.dropdown').on("click", function () {
$(this).behavour("toggle");
});
});
This event will handle not only open, but also close.
JSFiddle