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();
})
})
Related
I use disqus in my news site for comments, i put disqus div as display:none, i want that the user have to do click in a button for show and hide this div.
I did a script in jQuery doing toggle in this button, and I can hide and show the div, but when it shows, does not focus on the div, but this is where the button.
This is not useful since pressing the button should take the user to the section where comment, but does not.
script:
$(document).ready(function(){
$('.gn-icon-bubble').attr("href","#foot").click(function(){
$('.disqus_thread').toggle('swing');
});
});
.gn-icon-bubble is the button and as you know, .disqus-thread is the div's class; #foot is my anchor, are in the main page's footer, but still don't works.
I've tried using anchors, but gives the same, still focus comments. I really appreciate your help.
Use Event Delegation for dynamically change element ,use preventDefault to stop default action
$(document).ready(function(){
$('.gn-icon-bubble').attr("href","#foot");
$(document).on("click", ".gn-icon-bubble[href=#foot]" , function(event){
// event.preventDefault(); If you want to stop default anchor tag click action
$('.disqus_thread').toggle('swing');
});
});
Try this:
$('.gn-icon-bubble').click(function() {
$('.disqus_thread').toggle('swing',function() {
$('#foot').focus();
});
return false;
});
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/
I have the following code:
<script>
$('#advert').live('change', function () {
if ($(this).is(':checked')) {
$(":text").show();
} else {
$(":text").hide();
}
});
</script>
This code shows and hides text fields when the checkbox is checked. It works perfectly but I want the text field to be hidden when the page opens.
Hide the text fields on document ready.
The document ready event, says "When I'm finished loading, execute this code". So on page load it fires .hide() on your text fields. It's very powerful!
$(document).ready( function () {
$(":text").hide();
});
Another approach is to set the style to "display: none;" on each of these. Then they start out hidden
<script>
$(function() {
$('#advert').live('change', function(){
if($(this).is(':checked')){
$(":text").show();
} else {
$(":text").hide();
}
}).trigger('change');
});
</script>
This will also handle the case when the user clicks the box, goes to another page, clicks the back button, and has the box checked by the browser automatically.
give your text fields a class of maybe .text
and then use css like so:
.text{
display: none;
}
or jquery like so:
$(document).ready( function () {
$(":text").hide();
});
Exchange
.show();
and
.hide();
I have found a tutorial on some dropdown menu using jquery. It works fine but I want to adjust it just a little. Instead of hiding the menu using hovering, I want to have the same button that showed the menu, to hide it when it is being pressed again. So the same button has to both hide and show the dropdown menu.
The script that im using:
$(document).ready(function () {
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").click(function () { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function () {
}, function () {
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function () {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function () { //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
Use jQuery's .toggle() http://api.jquery.com/toggle/
$("#yourbutton").click(function() {
$("#yourmenu").toggle();
});
You can save yourself from adding a CSS rule by using jQuery's .toggle method.
$('#yourMenu').toggle()
This will hide it if it's visible, and show it if it's hidden. You can add a number or 'fast', 'slow' as a parameter to make it animate.
jQuery.toggle() function will do this work for you:
$("#button").on('click', function() {
$("#menu").toggle();
});
Yes, toggleClass can be used. Or you can also define your own toggle function in javascript.
you can toggle between the classes or do any other function you want to.
function tog(elemen){
if(elemen.className == "show") {
hide drpdwn
elemen.className="hide";
} else {
make dropdwn visible
elemen.className="show";
}
}
I have this js code, which display and hide some content on a page after click on a button. I've added second script (slickbox2), which do the same with another content by clicking on 2nd button. The problem I need to resolve is when 1st content is displayed and I click on 2nd button, I want to hide the 1st content. Thank you!
jQuery(document).ready(function() {
//hides the slickbox as soon as the DOM is ready
jQuery('#slickbox').hide();
// toggles the slickbox on clicking the noted link
jQuery('#slick-toggle').click(function() {
jQuery('#slickbox').toggle(400);
return false;
});
jQuery('#slickbox2').hide();
// toggles the slickbox on clicking the noted link
jQuery('#slick-toggle2').click(function() {
jQuery('#slickbox2').toggle(400);
return false;
});
});
Changed a few points.
$(document).ready(function(){
$('[id*=slickbox]').hide(); //hide your slickboxs
$('#slick-toggle').click(function(){
$('#slickbox').show();
$('#slickbox2').hide();
});
$('#slick-toggle2').click(function(){
$('#slickbox').hide();
$('#slickbox2').show();
});
});
BTW You can use $ in place of jQuery in all of your code:
jQuery('#slick-toggle2').click(function() {
jQuery('#slickbox2').toggle(400);
$('#slickbox1').toggle(400);
return false;
});
First of all you need to give class to all slickboxes e.g. slickbox then your Javascript would be like
<script type="text/javascript">
jQuery(document).ready(function() {
$('.slickbox').hide(); //hides all elements with class slickbox
$('.slickbox').click(function(){
$('.slickbox').hide();
$(this).toggle(400);
})
});
</script>
You can use hide() function to always hide the first content when clicking on the second button
jQuery('#slick-toggle2').click(function() {
jQuery('#slickbox').hide(400);
jQuery('#slickbox2').toggle(400);
return false;
});
Don't use toggle or the content will appear if it was hidden