w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
Javascript - Hide other divs when one is clicked, but no double click
You can change your code to this: var divState = {}; function showhide(id) { if (document.getElementById) { var divid = document.getElementById(id); divState[id] = true;//I changed this line //close others for (var div in divState){ if (divState[div] && div != id){ document.getElementById(div).style.display = 'none'; divState[div] = false; } } divid.style.display = 'block';//I changed this line } }

Categories : Javascript

jQuery Click on Div to Hide Divs and Add/Remove Classes
The only problem I'm seeing is when the page loads both the items are displayed. It can be fixed using $(document).ready(function(){ $("#cliente").click(function(){ $("#login-staff").hide(); $("#login-cliente").show(); $("#staff").removeClass("active-login-switch"); $("#cliente").addClass("active-login-switch"); }).click(); $("#staff").click(function(){ $("#login-cliente").hide(); $("#login-staff").show(); $("#cliente").removeClass("active-login-switch"); $("#staff").addClass("active-login-switch"); }); }); Demo: Fiddle

Categories : Jquery

Show/hide divs on click, but prevent the script from executing if same link is clicked a second time
A simple way to go about this: add a class to the one you just clicked, and then disallow a second click if that link is active. Codepen $('.show_hide section').click(function() { if ($(this).hasClass('active')) return false; //use if you want to allow a click after switching sections $('.active').removeClass('active'); $(this).addClass('active'); });

Categories : Jquery

jquery swap nested divs content in container
attach the following function to the click event of your button : function handler() { $('.element').each(function(){ var temp = $(this).find('.nameP').text(); $(this).find('.nameP').text($(this).find('.nameE').text()); $(this).find('.nameE').text(temp); }); }

Categories : Jquery

jQuery toggle divs and hide divs
In your jQuery code I found code with #div, but could not find div with id div in HTML code. # will only be used with id of the HTML control Whereas div is the selector used for HTML controls

Categories : PHP

click events and css attributes not attaching to divs, possibly because divs are "mostly padding"
Regarding the close button, if you hover "_tlh_dropdown_input_container" in the inspector, you can see that it overlaps the bottom part of the X button. That's why the hover/click event on the X is not caught below the middle of it. Regarding the down arrow, just wrap it with another DIV on which you'll add the events. You can achieve minimal HTML by using a single DIV and adding the arrow to it using CSS :before or :after.

Categories : Javascript

How to checked or unchecked all parent and child nodes separately by button click
This is all you need. Tested and works well private void ChangeNodesSelection(TreeNodeCollection node,bool doCheck) { foreach (TreeNode n in node) { n.Checked = doCheck; if (n.Nodes.Count > 0) { ChangeNodesSelection(n.Nodes,doCheck); } } } private void UncheckParentNodes(TreeNodeCollection node) { foreach (TreeNode n in node) { if (n.Parent == null && n.Nodes.Count == 0) n.Checked = false; } }

Categories : C#

Javascript Swap Image on .this Click
As you have tagged jQuery . Will give a jQuery solution.. $('.test3 a').on('click', function(e) { e.preventDefault(); var $img = $(this).find('img'); $img.attr('src', function(_,s) { return s.indexOf('thumbs_up_green') > -1 ? '../images/thumbs_up.png' : '../images/thumbs_up_green.png' }); }); Just swapping out the src attribute of the image based in the condition.

Categories : Javascript

bootstrap 3 glyphicon swap state on click
A coworker of mine just had this problem and pointed me to this question. Here's the solution I gave him: HTML: <div class="panel-group move-down" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <h4 class="panel-title"> Collapsible Group Item #1 <i class="indicator glyphicon glyphicon-chevron-down pull-right"></i> </h4> </a> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> ... </div>

Categories : Twitter

Swap button with image when user click
One way would be to have two elements, the button and the image. make the button visible and the animated image hidden (with display: none so that it doesn't occupy any space in the page). Then, when the button is clicked, hide the button and show the image. If you use display: none then provided the button and the image are the same size and rendered adjacent in the DOM they will consume the same place and not affect your layout. So very roughly: var animation = $('#the-image'); var button = $('#the-button'); button.on('click', function(){ button.hide(); animation.show(); });

Categories : Jquery

how show and hide div with time and click option to hide included?
This should do what you're looking for. $('#div').fadeIn(); timerId = setTimeout(function(){ $('#div').fadeOut(); }, 5000); $('#div').click(function(){ $(this).fadeOut(); clearTimeout(timerId); });

Categories : Jquery

Temporarily swap image in button's background after click
See if the following does what you are looking for. The code assumes that R.drawable.img is the original background. When Button is clicked, the background changes to R.drawable.img_hovered for 0.5 seconds. Then it reverts back to R.drawable.img: Button.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Button.setBackground(getResources().getDrawable( R.drawable.img_hovered)); new Handler().postDelayed(new Runnable() { public void run() { Button.setBackground(getResources().getDrawable(R.drawable.img)); // Button Click Code Here } }, 500L); // 0.5 Seconds } });

Categories : Java

jQuery click on button will show the div and again click on any area of the page will hide the div?
add this to your script inside document.ready function. jQuery("body").click(function(e){ //or jQuery(document) if(e.target.className !== "profile") { jQuery('div.account-info-box').hide(); } }); final code.(updated) <script type="text/javascript"> jQuery(document).ready(function() { jQuery('div.account-info-box').hide(); jQuery('a.profile').click(function(event){ event.preventDefault(); jQuery('div.account-info-box').show(); }); jQuery("body").click(function(e){ //or jQuery(document) if(e.target.className !== "profile") { jQuery('div.account-info-box').hide(); } }); }); </script>

Categories : Jquery

How to show/hide divs
JQuery is great at doing his sort of thing. This looks like a good place to start: http://papermashup.com/simple-jquery-showhide-div/

Categories : HTML

Hide empty divs
If it were me, I'd setup the options first, then evaluate to see whether or not to display. <?php // Get all stored options $socials = array(); foreach ( array( 'twitter', 'facebook', 'linkedin' ) as $option ){ $setting = of_get_option('fab_social_'.$option.'_url'); if ( $setting != '' ) $socials[ $option ] = $setting; } ?> <div class="eight columns"> <?php if ( count( $socials ) > 0 ) { /* check are any social options set, don't display unless >0 */ ?> <div class="social"> <ul> <?php // Loop through options foreach ( $socials as $option=>$setting ){ print('<li><a href="'.$setting.'"><img src="'.of_get_option('fab_social_'.$option.'_icon').'" alt="Follow us on '.ucfirst($option).'"></a></li>')); } ?>

Categories : PHP

jquery hide right click menu after click on button
You should add and event handler for click events on dropdown-menu panel buttons, like this: function showMenu(menuClass) { var menu = $(menuClass); $('#demo-container').bind("contextmenu", function (event) { event.preventDefault(); menu.appendTo("body").css({ top: event.pageY + "px", left: event.pageX + "px" }).show(); }) } $(document).ready(function(){ var page = $(this); page.on("click",'.dropdown-menu button', function (event){ var button = $(this); button.closest('.dropdown-menu').hide(); }); })

Categories : Jquery

Hide all DIVs with the same class and display others
Try <div class="buttons"> <ul> <li> <span class="en lan" target="en">English</span> </li> <li> <span class="es lan" target="es">Español</span> </li> <li> <span class="de lan" target="de">Deutch</span> </li> </ul> </div> <div id="container"> <div class="en"> Content EN </div> <div class="es hidden"> Content ES </div> <div class="de hidden"> Content DE 1 </div> <div class="de hidden"> Content DE 2 </div> </div> then var $lans = $('#container > div'); $( "span.lan" ).click(funct

Categories : Jquery

Using Jquery to show/hide Divs
Your closing tags was messed up <div id="personalinfo"> <a1><a class="first">A</a><a>nalytical Skills</a></a1><br/> <a2><a class="first">T</a><a>est1</a></a2><br/> </div> Demo: Fiddle

Categories : Jquery

Using Ajax to hide/show certain divs
Using Jquery this would work: (document).ready(function() { doIt(); $('#yourDropdown').change(doIt); //This is triggered on the change of the dropdown list function doIt() { switch ($("#yourDropdown").val()) { case "addition" : $("#addition").show(); $('#otherDiv').hide(); break; case "ConvertFToC": and so on.... } }); }) <select id="yourDropdown"> <option value="addition">addition</option> and so on... </select> <div id="addition" > <p> Input variable a : <asp:TextBox runat="server" ID="varA"></asp:TextBox><br /><br /> Input variable c : <asp:TextBox runat="server"

Categories : Asp Net

Animate DIVs hide and show
Fiddle: http://jsfiddle.net/eUUpJ/5/ I see you've added jQuery to the fiddle, so I took the liberty of achieving this using jQuery: $('.box').click(function () { var $main = $('#main'), $mid = $('#mid'), $this = $(this); $this.fadeOut(function () { $this.appendTo($main).show(); $mid.insertAfter($main.children()[$mid.index() + 1]); }); }); EDIT: check this updated fiddle: http://jsfiddle.net/eUUpJ/11/ It's a bit hackish, but works for the current example.

Categories : Javascript

jquery - hide various divs when clicking outside
try following: $(document).mouseup(function (e) { var container = $(".bubble_table"); if (container.has(e.target).length === 0) { container.hide(); } }); i hope it helps.

Categories : Jquery

Show/hide divs using IDs and hashes
You can try this : $('.menu a').on('click', function(){ $( $(this).attr('href') ).toggle(); // prop() can be used }); fiddle : http://jsfiddle.net/FsCHV/

Categories : Javascript

Toggle Show / Hide Divs
Start by fixing the markup, a DIV can not be a direct child of an UL. <ul id="list"> <li> <a href="#" class="togglelink">America</a> <div class="toggle" style="display: block;"> <p>America - USA - the States</p> </div> </li> <li> <a href="#" class="togglelink">Brazil</a> <div class="toggle" style="display: block;"> <p>Brazil - Federative Republic of Brazil</p> </div> </li> </ul> Then do: $(document).ready(function () { $('.toggle').hide(); $('a.togglelink').on('click', function (e) { e.preventDefault(); var elem = $(this).next('.toggle') $('.toggle').not(elem).h

Categories : Jquery

hide all divs onload jQuery
Try with .hide() like $(document).ready(function(){ $('div[id^="dialog-"]').hide(); }); This will select all the divs those ids will starts with "dialog-"

Categories : Jquery

How to show/hide DIVs with jQuery
You could write you selector to hide all child div's of midRight, then show the div with the passed ID. No need to cast to a String, since that is what you are passing: function showPage(showdiv){ $('#midRight > div').hide() $(showdiv).show(); }

Categories : Javascript

Hide / Show Multiple Divs
You have not posted any source, but if you are using jQuery, you can simply do: $(".commonclass").hide(); Provided that all 3 divs have the "commonclass" class.

Categories : Javascript

Hide and show divs with text
This are the most used techniques: target element using .index() and .eq() <div id="clickables"> <div>CLICK 1</div> <div>CLICK 2</div> </div> <div id="togglables"> <div>text 1</div> <div>text 2</div> </div> $(function(){ $("#clickables div").click(function(){ var idx = $(this).index(); $('#togglables div').eq( idx ).slideToggle(); }); }); Pros: you can keep a really clean HTML markup, no need to assign additional classes or ID Cons: don't put other elements inside the parents otherwise you might mess the index count target element using .next() or other jQuery traversal methods <div id="menu"> <div class="clickable">CLICK 1</div> <d

Categories : Javascript

Show / Hide Multiple divs with out using a numerical value
You can add custom data attribute like data-value like this - Html : (same for other options) <option data-value='6' value="apatient6">6</option> Js : $(document).ready(function () { $('.formbox').hide(); $('#additional').change(function () { $('.formbox').hide(); for (i = 1; i <= parseInt($('option:selected',this).data('value')); i++) { $('#workshop' + i).show(); } }); }); Demo --> http://jsfiddle.net/PayBt/8/

Categories : Jquery

Show and Hide divs using setInterval more Block
I can only see a modification on the conditional statement assigning nextId. the question mark operator works for a single condition. therefore, replace this code var nextId = (id == "block1") ? "block2": "block1"; with var nextId=""; if(id == "block1") nextId="block2"; else if(id == "block2") nextId="block3"; else if(id == "block3") nextId="block4"; else if(id == "block4") nextId="block1"; but for larger number of blocks you should figure someother way than if statements.

Categories : Jquery

Hide dynamically generated Divs with jquery
try this : $(".show_hide").click(function(i){ $(".post").eq(i).slideToggle(); }); OR $(".show_hide").click(function(){ $(".post",this).slideToggle(); });

Categories : Jquery

Hide/show DIVs one at a time, despite having the same class
$('.hide-button').click( function() { $(this).parent().find('.content').toggle(); }); Here it is working with your example.

Categories : Jquery

Hide/show sibling-divs instead of using multiple ID's?
Yes you can use .siblings() to access the element relative to the one that was clicked. This removes the need for any unique IDs, it works based on the classes. jsFiddle demo $(document).ready(function () { $(this).on('click',".box, .box div", function (e) { e.stopPropagation(); var drop = $(this).siblings('.dropdown'); if (drop.is(":hidden")) { $('.title_active').removeClass("title_active") .siblings('.dropdown').hide(); drop.show(); $(this).addClass("title_active"); $(this).parent().addClass("ms_active"); } else { drop.hide(); $(this).removeClass("title_active"); } }); });

Categories : Jquery

Show/Hide additional divs with link.
You can use the ':eq()' selector in jQuery. :eq() allows you to select items based on their index in the matched set. So :eq(0) is the first element and :eq(3) is the 4th. This is an example on fiddle. And here is the code from the example: // If the div isn't the 1st, 2nd, or 3rd in the set of matched divs, hide it $('div:not(:eq(0), :eq(1), :eq(2))').hide(); $(function () { $('#view-more-less').click(function () { $('div:not(:eq(0), :eq(1), :eq(2))').toggle(); }) }); Another approach is to wrap all divs except the first 3 in another container and hide that container with javascript. Here's a fiddle for that approach. $('#view-more-less').click( function() { $('div.more-container').toggle(); }); On a side note, element id's must be unique. So you shouldn't us

Categories : Jquery

Show/hide divs based on select value
You can use :lt() selector. You need not iterate over the elements in the first place. This will select the divs based on the index of the div. var showDiv = function (goal) { $('.myDIV').hide(); $('.myDIV:lt(' + goal + ')').show(); }; $('#mySelect').change(function () { showDiv($(this).val()) }).change(); Check Fiddle

Categories : Jquery

Want to toggle a divs with two different selectors - one for show one for hide
Change to this: $("#up1").click(function (e) { e.stopPropagation(); $("#cat_content1").stop().hide("slow"); $("#up1").stop().hide("slow"); val = 100; $("#box1").stop().animate({ width: '100%', height: val }, "slow"); $("#cat_title1").stop().show("slow"); }); e.stopPropagation() will prevent the event from bubbling up to the parent div and the parent div's click handler won't be triggered.

Categories : Jquery

jQuery show/hide toggle DIVs
slideToggle() jquery's method $('.nav-toggle').click(function(){ //get collapse content selector var collapse_content_selector = $(this).attr('href'); //make the collapse content to be shown or hide var toggle_switch = $(this); $(collapse_content_selector).slideToggle(function(){ if($(this).css('display')=='none'){}else{ } }); });

Categories : Javascript

Javascript Skip hide/show divs
$(document).ready(function(){ $(".content-box-front").click(function(){ $(".full-content-back").fadeIn("slow"); $(".full-content-front").fadeIn("slow"); $(".content-box-front").fadeOut("slow"); $(".content-box-back").fadeOut("slow"); }); }); $(document).ready(function(){ $(".full-content-front").click(function(){ $(".full-content-back").fadeOut("slow"); $(".full-content-front").fadeOut("slow"); $(".content-box-front").fadeIn("slow"); $(".content-box-back").fadeIn("slow"); }); }); this should help put the name of the divs in where full-content.... is

Categories : Javascript

JQuery show/hide divs in order
I've changed the IDs to classes since there seems to be multiple elements with the same value $('.one').each(function(){ var $this = $(this) var $oths = $this.children('div').not('.a').hide(); $this.children('.a').hover(function () { $oths.each(function(idx){ var $item = $(this); clearTimeout($item.data('hideTimer')) var timer = setTimeout(function(){ $item.show(); }, (idx + 1) * 200); $item.data('showTimer', timer); }) }, function () { hideOthers($oths) }); $oths.hover(function(){ $oths.each(function(idx){ clearTimeout($(this).data('hideTimer')) }) }, function(){ hideOthers($oths) }) }) function hideOthers($oths){

Categories : Jquery

fadeIn a div with a click, but then click anywhere to hide an element
You could do it like that: http://jsfiddle.net/Tks5L/1/ $(document).ready(function () { $('.info1').css('outline',0).attr('tabindex', -1).on('focusout', function () { $(this).hide(); }); var container = $('#info_area'); $('#contentart span').click(function () { var active = $(container.find('div')[$(this).prevAll('span').length]); active.siblings().hide(); active.fadeIn("slow").focus(); }); });

Categories : Jquery

Javascript to show/hide specific divs in a group
do you use jQuery already, if not: use it - then you can do the following: $('.group').removeClass('hide').not('#sectiontoshow').addClass('hide'); in your function the code should be used like this: function show(group, sectiontoshow) { $('.' + group).removeClass('hide').not('#' + sectiontoshow).addClass('hide'); }

Categories : Javascript



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.