i try to make an jQuery function for hide/show a form based on the user's choice!
Here is my code that you will understand better.
…
<p id="joinChoice" class="parent">
<span class="overlay"></span>
<span class="overlay"></span>
<span class="overlay"></span>
</p>
…
<div class="joinForm">
<div id="noneForm"></div>
<div id="mastercardForm"></div>
<div id="visaForm"></div>
<div id="discoverForm"></div>
</div>
The span#overlay in is a simple checkbox image replacement !
I just need a function for hide/view each form for selected Card type !
For the #joinChoice i've already make this :
$('#joinChoice a').click(function(){
$(this).addClass('on')
.siblings().removeClass('on');
});
Could you help me more please
Something like this?
HTML
<p id="joinChoice" class="parent">
<span class="overlay">Mastercard</span>
<span class="overlay">Visa</span>
<span class="overlay">Discover</span>
</p>
<div class="joinForm">
<div id="noneForm">noneForm</div>
<div id="mastercardForm">mastercardForm</div>
<div id="visaForm">visaForm</div>
<div id="discoverForm">discoverForm</div>
</div>
CSS
.joinForm div {
display: none;
}
.on {
color: red;
background: yellow;
}
jQuery
$('#joinChoice a').click(function(){
$('#joinChoice a').removeClass('on'); /* remove class from all siblings */
$(this).addClass('on'); /* add class to active sibling */
$('.joinForm div').hide(); /* hide all other forms */
var subElement = '#' + $(this).attr("id") + 'Form';
$( subElement ).show(); /* show active form */
});
And a demo
Update
I was missing an important line:
e.preventDefault();
That prevents the page to reload when clicking on the <a>s.
The HTML:
<p id="joinChoice" class="parent">
<span class="overlay"></span>
<span class="overlay"></span>
<span class="overlay"></span>
</p>
The Javascript:
$('#joinChoice a').click(function (e) {
// prevents the click event to propagate up the DOM tree
// And thus, prevents the page to reload, in that case..
e.preventDefault();
var $this = $(e.target);
// Reset others
var $links = $this.siblings();
$links.removeClass('on');
$links.each(function(linkEl) {
$( '#'+$(linkEl).data('form-id') ).hide();
});
// Activate user choice..
$this.addClass('on')
$('#'+$this.data('form-id')).show();
});
Related
,hello Gentlemann please
1° How can i disable the click Behavior onclick through the css class please?
2° I can't use ID in the HTML Element because i'm not able to insert any ID in the code, so i need to use the Class the make the magic happen.
3° In all my Tries, none of them still works.
Element and CSS Class that i need to disable if clicked:
<label class="inner all disabled reserved my_numbers">
<span class="p5_effect_tooltip_b top">
<span class="numero">999999<br><small>pending<br>payment</small></span>
<span class="p5_custom_tooltip_b">Pre-Reserved: Jim</span>
</span>
</label>
Class: label.inner.all.disabled.reserved.my_numbers
1° First Try:
jQuery(document).ready(function() {
$("#inner.all.disabled.reserved").click(function() {
return false;
});
});
2° Second Try:
$(document).ready(function() {
$(".label.inner.all.disabled.reserved").click(function() {
$("label").off("click");
});
});
3° Third Try:
$(document).ready(function() {
$("#inner.all.disabled.reserved").click(function() {
return false;
});
});
4° Try:
$('#inner.all.disabled.reserved.my_numbers').disabled = true
I find it best to use the Event. You can use .preventDefault() to stop the event action.
Example:
$(function() {
function preventClick(e) {
e.preventDefault();
console.log(e.target.nodeName + " Click Prevented");
return false;
}
$("label.inner.all.disabled.reserved").click(preventClick).children().click(preventClick);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="inner all disabled reserved my_numbers">
<span class="p5_effect_tooltip_b top">
<span class="numero">999999<br><small>pending<br>payment</small></span>
<span class="p5_custom_tooltip_b">Pre-Reserved: Jim</span>
</span>
</label>
I specially registered the console.log() so that you could see that the click can be done only once.
Was it necessary?
$(".inner.all.disabled.reserved").click(function(){
console.log('This message will not show!');
}).off('click');
.inner.all.disabled.reserved:hover {
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="inner all disabled reserved my_numbers">
<span class="p5_effect_tooltip_b top">
<span class="numero">999999<br><small>pending<br>payment</small></span>
<span class="p5_custom_tooltip_b">Pre-Reserved: Jim</span>
</span>
</label>
im working on a project which there is multiple menu selection on tab which i need to onclick on each tab menu will display different type of menuFood. As my jquery not working on the function with onclick and the tab will add class "on" and the display of the table will be different. Kindly advice
html：
<div class="tab" data-type="wx" data-desc="整合">
<span data-type="wx" class="on">整合</span>
<span data-type="sx">第一球</span>
<span data-type="qsm">第二球</span>
<span data-type="zsm">第三球</span>
<span data-type="hsm">第四球</span>
<span data-type="em">第五球</span>
</div>
jquery：
<script type="text/javascript">
$(document).ready(function(){
$('.tab span').each(function(){
if($($(this))[0].href==String(window.location))
$(this).parent().addClass('on');
});
})
</script>
You can use jQuery.on() to handle the clicked element:
var $spans = $('.tab span');
$spans.on('click', function() {
var $el = $(this);
$spans.removeClass('on');
$el.addClass('on');
// Your logic to use type
console.log('Clicked:', $el.data('type'));
});
.on {color: red;}
.tab span {cursor: pointer; margin: 10px;}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab" data-type="wx" data-desc="整合">
<span data-type="wx" class="on">整合</span>
<span data-type="sx">第一球</span>
<span data-type="qsm">第二球</span>
<span data-type="zsm">第三球</span>
<span data-type="hsm">第四球</span>
<span data-type="em">第五球</span>
</div>
$(document).ready(function(){
// to preselect the span from the hash whenever u refresh the page.
$('span[data-type="'+location.hash.substr(1)+'"]').addClass('on')
$('.tab span').click(function(){
$(this).siblings().removeClass('on');
$(this).addClass('on')
location.hash = $(this).data('type')
})
})
I'm not sure the best way to word this, so hopefully this makes sense.
Currently, on my page, all my elements fadeIn on click. What I would like is for a few select elements in an id (#seqFade below) to fade in on their own when that parent fadeIn class is clicked.
I've figured out how to make both of these effects work on separate pages, but I can't figure out how to have them both occur on the same page / combine the two.
Here is more or less how my page is designed, and below is what I have so far for code.
HTML
<div id="content">
<div class="fadeIn">
<p>Hello</p>
</div>
<div class="fadeIn" id="seqFade">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="fadeIn">
Bye.
</div>
</div>
SCRIPT
$(document).ready(function(){
//hides all fadeIns
$('.fadeIn').hide();
$(document).on('click',function() {
if('#seqFade') {
//sequential fadeIn function (works)
$('span').each(function(i) {
$(this).delay(i*300).fadeIn('slow');
});
}
//fadeIn on click (works)
$('.fadeIn:hidden:first').fadeIn('slow');
})
.click();
Thank you so much in advance.
JSfiddle of full page //
JSFiddle of both effects working
Try this, just add a class on hidden at the beginning for the spans
$(document).ready(function() {
var timeOuts = new Array();
var eT=200;
function myFadeIn(jqObj) {
jqObj.fadeIn('slow');
}
function clearAllTimeouts() {
for (key in timeOuts) {
clearTimeout(timeOuts[key]);
}
}
$(document).on('click',function() {
$('#seqFade span').hide().each(function(index) {
timeOuts[index] = setTimeout(myFadeIn, index*eT, $(this));
});
});
});
http://jsfiddle.net/h67vk02w/2/
HTML
<div id="content">
<div class="fadeIn">
<p>Hello</p>
</div>
<div class="fadeIn" id="seqFade">
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
<span>.</span>
<span>.</span>
<span>.</span>
</div>
<div class="fadeIn" id="bye">
Bye.
</div>
Javascript
$(function() {
$('.fadeIn').find('span').toggle();
$('#hello, #bye').toggle();
$(document).click(function() {
$('#hello').fadeIn('slow');
$('span').each(function(i) {
$(this).delay(i*300).fadeIn('slow', function() {
$(document).unbind('click')
.bind('click', () => $('#bye').delay(300).fadeIn('slow'));
});
});
});
});
JSFiddle: http://jsfiddle.net/6mLgu3om/3/
Or like that?
Use the classes for this (add some fade/noFade classes to elements). ID must be unique. And after that just check if the element has that class like this. Now you have basically unlimited options to do this. Just add more classes / check and do something.
$(".class_of_element").hasClass("your_class")
i have some menu in my website with same element , i want to use slideDown in jQuery to slidedown only clicked menu
but now when i clicked one menu all menu get slidedown
HTML
<div id="sidebar-right" >
<div class="sidebar-menu">
<span class="sidebar-post">Last Posts</span>
<span class="sidebar-post-slide">+</span>
<div style="margin-top:-35px"></div>
<div class="sidebar-text">
Some content
</div>
</div>
<!-- S2 -->
<div class="sidebar-menu">
<span class="sidebar-post">Last Comments</span>
<span class="sidebar-post-slide">+</span>
<div class="sidebar-text">
Some content
</div>
</div>
<!-- End S2 -->
</div>
and jQuery side
$(function() {
$('.sidebar-post-slide').click(function () {
if ( $('.sidebar-text').is( ":hidden" ) ) {
$('.sidebar-text').slideDown(800);
} else {
$('.sidebar-text').hide(800);
}
});
});
You need to slidedown the sibling sidebar-text element, not all sidebar-text elements
$(function() {
$('.sidebar-post-slide').click(function () {
//find the sibling sidebar-text element and complete any queued animations
var $stext = $(this).siblings('.sidebar-text').stop(true, true);
if ( $stext.is( ":hidden" ) ) {
$stext.slideDown(800);
} else {
$stext.hide(800);
}
});
});
Demo: Fiddle
Another option is to use the method closest(). But in your case Arun's anwser is better.
I am using the javascript function for multiple hide show divs in custom tumblr theme.. my The problem is as the class name is same, if i click on a single div, by default all the div gets show or hide.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$(".toggleme").click(function () {
$(".toparea3").slideToggle("slow");
return false;
});
});
</script>
<a class="toggleme" href="#"><img src="http://www.abc.com/images/share.png"></a>
<div class="toparea3" style="display:none;">
<div class="share-bar clearfix" style=" margin-top:3px;margin-left: -2px;width: 380px;height: 50px;">
<div class="share-bar-buttons">
<div class="share-bar-facebook">
<iframe src="http://www.facebook.com/plugins/like.php?href={URLEncodedPermalink}&layout=button_count&show_faces=false&width=110&action=like&font=lucida+grande&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>
</div>
</div>
<div style="margin-left:80px;margin-top: 15px;" class="share-bar-twitter">
<a href="http://twitter.com/share" class="twitter-share-button"
data-url="{Permalink}"
{block:Twitter}data-via="{TwitterUsername}"{/block:Twitter}
data-related="stylehatch:Premium Tumblr Themes by #newezra"></a>
</div>
<div style="float: right;margin-top:-25px;" class="share-bar-shorturl">
<div class="linktumb">
http://www.tumblr.com/xdrs2sf
</div>
</div>
</div>
</div>
Assuming you have multiple "toggleme" buttons, if they're all in the format where you have a toggleme button and then a toparea3, you could do something like this:
$('.toggleme').click(function(){
$(this).next().slideToggle('slow');
return false;
});
The "next" function gets the next element in the DOM, which is the element you want to expand.
Edit: (nevermind the .children)
try using the .closest selector, or the .next selector someone else suggested. Just remember to provide the selector .toparea3 to make sure that only that class opens, not just any closest/next element.
$(document).ready(function() {
$(".toggleme").click(function () {
$(this).closest(".toparea3").slideToggle("slow");
return false;
});
});
I would recommend the following:
Place the 'a' and the corresponding 'div' in a parent 'div'. Something like this:
<div>
<a class='toggleMe' />
<div class='toparea3 />
</div>
Then you can update your inner selector to be:
$('.toggleMe').click(function(evt){
evt.preventDefault();
var parent = $(this).closest('div');
$(".toparea3", parent).slideToggle("slow");
}
My Recommendation is to give the div an id, and make the anchor element's href point to it:
<script>
$(document).ready(function() {
$(".toggleme").click(function () {
$(this.hash).slideToggle("slow");
return false;
});
});
</script>
<a class="toggleme" href="#toparea3_1"><img src="http://www.abc.com/images/share.png"></a>
<div id="toparea3_1" class="toparea3" style="display:none;"></div>
This since the hash is given in the form #toparea3_1 that is a valid jQuery selector that selects on ID, and can be used directly.