I have the flowing html and jquery code on my development site. It works but seems clunky. I am looking for an easier cleaner way to make the function fade in divs and fade out divs.
$(document).ready(function() {
$("#sup1").click(function() {
$("#sup").show(300);
$("#select").hide(300);
$("#con").hide(300);
});
$("#con1").click(function() {
$("#con").show(300);
$("#conselect").show(300);
$("#select").hide(300);
$("#sup").hide(300);
});
$("#con2").click(function() {
$("#conform").show(300);
$("#select").hide(300);
$("#conselect").hide(300);
$("#sup").hide(300);
});
$(".back").click(function() {
$("#select").show(300);
$("#sup").hide(300);
$("#con").hide(300);
$("#conform").hide(300);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="select" class="lin">
<div>
I am Cool
I am Lame
</div>
</div>
<div id="sup" style="display:none">FORM GOES HERE
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
<div id="con" style="display:none">
<div id="conselect" style="display:block">
Learn More
Enroll Now
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
<div id="conform" style="display:none">FORM GOES HERE
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
</div>
Try this code:
$(document).ready(function() {
$(".js-trigger").click(function() {
const $t = $(this);
const href = $t.attr('href');
$(".js-trigger-target").hide(300);
$(href).show(300);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="anchor3" class="js-trigger-target">
<div>
I am Cool
I am Lame
</div>
</div>
<div id="anchor1" style="display:none" class="js-trigger-target">FORM GOES HERE
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
<div id="anchor2" style="display:none" class="js-trigger-target">
<div id="conselect" style="display:block">
Learn More
Enroll Now
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
<div style="display:none" class="js-trigger-target">FORM GOES HERE
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
</div>
Looking at what you have is sufficient enough for what you are trying to achieve. No need to over engineer the simple things. That said, if you must make it a bit cleaner ...it would improve your readability to use named functions over all the anonymous inline functions, see below:
function onCon1Clicked() {
$("#sup").show(300);
$("#select").hide(300);
$("#con").hide(300);
}
function onCon2Clicked() {
$("#conform").show(300);
$("#select").hide(300);
$("#conselect").hide(300);
$("#sup").hide(300);
}
function onBackClicked() {
$("#select").show(300);
$("#sup").hide(300);
$("#con").hide(300);
$("#conform").hide(300);
}
$(document).ready(function() {
// Click on sup1.
$("#sup1").click();
// Assign click handlers.
$("#con1").click(onCon1Clicked);
$("#con2").click(onCon2Clicked);
$(".back").click(onBackClicked);
});
Related
I have multiple div which has the same class and I want to display only one div per click which belongs to the parent div. I want to hide and show div "post-reply-box".
HTML
<div class="comet-avatar">
<img src="images/resources/comet-3.jpg" alt="">
</div>
<div class="we-comment">
<div class="coment-head">
<h5>Olivia</h5>
<span>16 days ago</span>
<a class="we-reply" href="javascript:void(0)" title="Reply"><i class="fa fa-reply"></i></a>
<ins>280</ins>
</span>
</div>
<p>i like lexus cars, lexus cars are most beautiful with the awesome features, but this car is really outstanding than lexus</p> </div>
<div class="comnt comnt-reply">
<div class="post-reply-box" style="padding:10px; display: none;">
<form method="post">
<textarea placeholder="You are Replying..."></textarea>
<button class="replyButton" type="submit">send</button>
<button class="cancelButton">cancel</button>
</form>
</div>
</div>
jQuery
$(document).ready(function(){
$(".fa-reply").on("click",function(){
$(".post-reply-box").css("display","block");
});
});
$(document).ready(function(){
$(".cancelButton").on("click",function(){
$(".post-reply-box").css("display","none");
});
});
The issue in your code is because you're using a class selector which retrieves all the .post-reply-box elements in the DOM, not just the one relevant to the button which was clicked.
To fix this use DOM traversal to relate the elements to each other. In this specific example use closest() to get the .we-comment related to the button, then next() to get the .comnt-reply container, then find().
In addition there some other issues which need to be addressed:
There's no need to duplicate document.ready handlers. Put all the logic in a single one.
Use show() and hide() instead of css() to set the display state of the element.
Use a CSS file instead of inline style elements to set style rules.
Attach the event handler to the a element, not the child i, and call preventDefault() on the event that's raised.
Add the type="button" attribute to the Cancel button so that clicking it does not submit the form.
With all that said, try this:
jQuery($ => { // updated document.ready handler
$(".we-reply").on("click", e => {
e.preventDefault()
$('.post-reply-box').hide(); // hide all
$(e.target).closest('.we-comment').next('.comnt-reply').find(".post-reply-box").show(); // show relevant
});
$(".cancelButton").on("click", function() {
$(".post-reply-box").hide();
});
});
.post-reply-box {
padding: 10px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="comet-avatar">
<img src="images/resources/comet-3.jpg" alt="">
</div>
<div class="we-comment">
<div class="coment-head">
<h5>Olivia</h5>
<span>16 days ago</span>
<a class="we-reply" href="javascript:void(0)" title="Reply"><i class="fa fa-reply"></i> Reply</a>
<span class="like-comment" data-toggle="tooltip" title="like">
<i class="ti-heart"></i>
<ins>280</ins>
</span>
</div>
<p>i like lexus cars, lexus cars are most beautiful with the awesome features, but this car is really outstanding than lexus</p>
</div>
<div class="comnt comnt-reply">
<div class="post-reply-box">
<form method="post">
<textarea placeholder="You are Replying..."></textarea>
<button class="replyButton" type="submit">send</button>
<button class="cancelButton" type="button">cancel</button>
</form>
</div>
</div>
<div class="comet-avatar">
<img src="images/resources/comet-3.jpg" alt="">
</div>
<div class="we-comment">
<div class="coment-head">
<h5>Olivia</h5>
<span>16 days ago</span>
<a class="we-reply" href="javascript:void(0)" title="Reply"><i class="fa fa-reply"></i> Reply</a>
<span class="like-comment" data-toggle="tooltip" title="like">
<i class="ti-heart"></i>
<ins>280</ins>
</span>
</div>
<p>i like lexus cars, lexus cars are most beautiful with the awesome features, but this car is really outstanding than lexus</p>
</div>
<div class="comnt comnt-reply">
<div class="post-reply-box">
<form method="post">
<textarea placeholder="You are Replying..."></textarea>
<button class="replyButton" type="submit">send</button>
<button class="cancelButton" type="button">cancel</button>
</form>
</div>
</div>
I ADDED TEXT RESIZER A BUT IT IS WORKING ON LAST ID , PLZ HELP ME TO FIX IT
<span class="category category--full">%s</span>
<h2 class="title title--full">%s</h2>
<div class="meta meta--full">
<img class="meta__avatar" src="%s" alt="%s" />
<span class="meta__author">%s</span>
<span class="meta__date"><i class="fa fa-calendar-o"></i>%s</span>
<span class="meta__reading-time"><i class="fa fa-clock-o"></i> %s</span>
<span class="meta__misc meta__misc--seperator"></span>
<span class="meta__misc"><div class="fb-like" data-href="http://hypnos.cosmicgirl.xyz?id=%s" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div></span><br><br><br>
<nav class="article-nav">
<button><i class="fa fa-angle-left"></i> <span>Previous</span></button>
<button><span>Next</span> <i class="fa fa-angle-right"></i></button>
</nav>
</div>
<div id="wrapper">
<div id="controls">
A
A
A
</div>
%s
</div>
<p>lorem link by <span>%s</span> </p>
<center><p> <div class="fb-comments" data-href="http://hypnos.cosmicgirl.xyz?id=%s" data-width="450" data-numposts="5"></div></p> </center> </article>',$myrow["title"],$myrow["titled"],$myrow["pic"],$myrow["title"],$myrow["author"],$myrow["date"],$myrow["time"],$myrow["id"],$myrow["text"],$myrow["link"],$myrow["author_d"],$myrow["id"]); }
?>
HERE IS JS CODE:
$(document).ready(function(){
$("#small").click(function(event){
event.preventDefault();
$("h1").animate({"font-size":"24px"});
$("h2").animate({"font-size":"16px"});
$("p").animate({"font-size":"12px", "line-height":"16px"});
});
$("#medium").click(function(event){
event.preventDefault();
$("h1").animate({"font-size":"36px"});
$("h2").animate({"font-size":"24px"});
$("p").animate({"font-size":"14px", "line-height":"20px"});
});
$("#large").click(function(event){
event.preventDefault();
$("h1").animate({"font-size":"48px"});
$("h2").animate({"font-size":"35px"});
$("p").animate({"font-size":"30px", "line-height":"40px"});
});
$( "a" ).click(function() {
$("a").removeClass("selected");
$(this).addClass("selected");
});
});
Why don't you write is as following, this is more reliable code:
$("a").click(function(e){
e.preventDefault();
$("a").removeClass("selected");
$(this).addClass("selected");
var type = $(this).attr('id');
if(type=="small"){
//Your code for small text
}
else if(type=="medium"){
//Your code for medium text
}
else if(type=="large"){
//Your code for large text
}
});
With my inexperience in jQuery, I'm finding the simplest tasks difficult.
What I attempt to do is show/hide certain messages when a certain icon is clicked. This is my HTML:
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small" value="measure">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large" value="locate">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large">
LOCATE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small" value="inform">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small">
INFORM
</div>
</div>
<div id="measure" style="display:none" class="pov_description">
<p> Message MESSAGE</p>
</div>
<div id="locate" class="pov_description">
<p> Message LOCATE</p>
</div>
<div id="inform" style="display:none" class="pov_description">
<p> Message INFORM</p>
</div>
</div>
</div>
My JavaScript code that changes the pov icon/title classes works and is currently here:
$('.pov_icon_small , .pov_icon_large').on('click', function () {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$('.pov_title_large').not($(this).next('div[class^="pov_title_"]')).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
$(this).next('div[class^="pov_title_"]').toggleClass("pov_title_small").toggleClass("pov_title_large");
});
What I aim to do, is display a certain message (e.g. Message Measure) when the a certain icon pov_icon_small value="measure" is clicked while keeping the others hidden. When the user clicks another icon; that respective message will be displayed and the others will be hidden :
$(document).ready(function(){
$('input[.pov_icon_small]').click(function(){
if($(this).attr("value")=="measure"){
$(".pov_description").not("#measure").hide();
$("#measure").show();
}
if($(this).attr("value")=="locate"){
$(".pov_description").not("#locate").hide();
$("#locate").show();
}
if($(this).attr("value")=="inform"){
$(".pov_description").not("#inform").hide();
$("#inform").show();
}
});
The message-linking JS code doesn't seem to work. Am I doing a small error here? Or should I be preparing the code in a completely different way?
Theres two issues, first your CSS selector input[.pov_icon_small] is not valid. The second is that you are attaching the click function to pov_icon_small which do not have enough height or width for a user to click. I've adjusted the HTML so this binds to the pov_title_small class instead.
You'll want to attach your click function to items have a value, then pass that value as the selector. For pov_title_small I've changed the attribute value to data-value, then the click function uses that to select the ID you want to display. Here is the code:
HTML:
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small" data-value="measure">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large" data-value="locate">
LOCATE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small" data-value="inform">
INFORM
</div>
</div>
<div id="measure" style="display:none" class="pov_description">
<p> Message MESSAGE</p>
</div>
<div id="locate" style="display: none;" class="pov_description">
<p> Message LOCATE</p>
</div>
<div id="inform" style="display:none" class="pov_description">
<p> Message INFORM</p>
</div>
Javascript:
$(document).ready(function(){
$('[data-value]').bind('click', function(){
$('.pov_description').hide();
$('#'+$(this).attr('data-value')).show();
});
});
You can see it working in this JS Fiddle: http://jsfiddle.net/h97fg75s/
1st : you just need to get a value and convert it to id ..
2nd: like #juvian mentioned $('input[.pov_icon_small]') is not a valid selector
3rd .pov_icon_small its a div not an input so you can use $('div.pov_icon_small') instead
4th: .pov_icon_small doesn't have any value attribute .. .pov_title_small and .pov_title_large those has the value attribute
$(document).ready(function(){
$('div.pov_title_small , div.pov_title_large').click(function(){
var ThisValue = $.trim($(this).attr('value'));
$(".pov_description").not("#"+ThisValue).hide();
$("#"+ThisValue).slideToggle()
});
});
Working Demo
if you need to control it from .pov_icon you have 2 ways
1st: put a value attribute in .pov_icon_small/large
2nd: you can use
$('div.pov_icon_small , div.pov_icon_large').click
and
var ThisValue = $.trim($(this).next('div[class^="pov_title_"]').attr('value'));
I'm incorporating jquery into an html file and have had some trouble getting a button to produce some action when I click on it. I've successfully managed to produce an alert for the event whereby I click on a div, but the button is a different matter.
<script type = "text/javascript">
alert("I am an alert box!");
$("div").click(function(){
alert("test1");
});
$(".btn-green").click(function(){
alert("test2");
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="page-content-wrapper">
<div class="page-content">
<!-- BEGIN PAGE HEADER-->
<div class="row">
<div class="col-md-12">
<!-- BEGIN PAGE TITLE & BREADCRUMB-->
<h3 class="page-title">
Verification & Validation Tools <small>statistics and more</small>
</h3>
<ul class="page-breadcrumb breadcrumb">
<li>
<i class="fa fa-home"></i>
Home
<i class="fa fa-angle-right"></i>
</li>
<li>
Users
</li>
<li class="pull-right">
<div id="dashboard-report-range" class="dashboard-date-range tooltips" data-placement="top" data-original-title="Change overview date range">
<i class="fa fa-calendar"></i>
<span>
</span>
<i class="fa fa-angle-down"></i>
</div>
</li>
</ul>
<!-- END PAGE TITLE & BREADCRUMB-->
</div>
</div>
<!-- END PAGE HEADER-->
<form class="form-horizontal" method="post" action="validateuser" >
<div class="validate">
<div class="form-group">
<label class="col-md-2 control-label">Email Address to Activate</label>
<div class="col-md-5"><input class="form-control" type="text" name="emailAddress"></input></div>
<button type="submit" class="btn-green"><i class="fa fa-check"></i> Validate</button>
</div>
</div>
</form>
</div>
I think the problem may be that the document it is not fully loaded when you add those event listeners. Try to use:
$(function() {
$("div").click(function(){
alert("test1");
});
$(".btn-green").click(function(){
alert("test2");
});
});
Which is a shortcut for
$(document).ready(function() {
...
});
You're running the code before anything exists on the page
Use the jQuery ready wrapper https://api.jquery.com/ready/
<script>
$(function() {
// put your code here
})
</script>
wrap your javascript code inside . your code maybe attach event before
DOM load .
$(document).ready(function(){
// code here
});
or add your code at end of page
Wrap the script code inside document.ready function like:
$(document).ready(function(){
alert("I am an alert box!");
$("div").click(function(){
alert("test1");
});
$(".btn-green").click(function(){
alert("test2");
});
});
i want to slideUp the current div that is open(that doesn't work), but when i open another div, the div before must slideup (that works). Maybe anyone can help me.
Here is a jsfiddle with the problem: http://jsfiddle.net/Evolutio/xbsm734f/
my jQuery code looks like this:
$(document).ready(function(){
$('.faq_desc').hide();
$('.faq li.faq_head').click(function(e){
var $i = $('ul.faq i.fa');
$i.removeClass('fa-caret-up').addClass('fa-caret-down');
$(this).find('i.fa').removeClass('fa-caret-down').addClass('fa-caret-up');
if($(this).siblings().hasClass('slided_down')==false) {
$('ul.faq .slided_down').removeClass('slided_down');
}
var $faq_desc = $(this).find('.faq_desc');
if($faq_desc.hasClass('slided_down')) {
$faq_desc.removeClass('slided_down').slideUp();
} else {
$faq_desc.addClass('slided_down').slideDown();
}
$(this).siblings().find('.faq_desc').slideUp();
e.preventDefault();
});
});
my html:
<ul class="faq">
<p> </p>
<li class="faq_head">
<h4 class="ff_os_b">asdaasdasd <i class="fa fa-caret-down"></i></h4>
<div class="faq_desc fs_14 lh_14" style="display: none;">
<p>asdasdasdadasdasdasdasdassdasd</p>
</div>
</li>
<p> </p>
<li class="faq_head">
<h4 class="ff_os_b">asdadasdasdasdasd <i class="fa fa-caret-down"></i></h4>
<div class="faq_desc fs_14 lh_14" style="display: none;">
<p>asdsadadasdasdasdasdadasd</p>
</div>
</li>
<p> </p>
<li class="faq_head">
<h4 class="ff_os_b">asdasdasdasdsa <i class="fa fa-caret-down"></i></h4>
<div class="faq_desc fs_14 lh_14" style="display: none;">
<p>dadsadadaassdasdasdasd</p>
</div>
</li>
<p> </p>
<li class="faq_head">
<h4 class="ff_os_b">asdasdasdasdasdasasdasdasdasdas <i class="fa fa-caret-down"></i></h4>
<div class="faq_desc fs_14 lh_14" style="display: none;">
<p>dasdasdadasdsadsadasdsadasdasd</p>
</div>
</li>
</ul>
You can use .slideToggle()
$(document).ready(function(){
$('.faq_desc').hide();
$('.faq li.faq_head').click(function(e){
$(this).siblings().find('.faq_desc').slideUp().removeClass('slided_down');
$(this).find('.faq_desc').slideToggle().toggleClass('slided_down');
e.preventDefault();
});
});
DEMO
Update
$(document).ready(function(){
$('.faq_desc').hide();
$('.faq li.faq_head').click(function(e){
var $i = $('ul.faq i.fa');
$i.not($(this).find('i.fa')).removeClass('fa-caret-up').addClass('fa-caret-down');
$(this).find('i.fa').toggleClass('fa-caret-down fa-caret-up')
$(this).siblings().find('.faq_desc').slideUp().removeClass('slided_down');
$(this).find('.faq_desc').slideToggle().toggleClass('slided_down');
e.preventDefault();
});
});
DEMO