How to remove class if another doesn't exist - javascript

I'm currently trying to display a hidden button which only displays when a link is clicked, but i'm unsure on how to display it if the link doesn't exist.
(function ($) {
$(document).ready(function()
{
$('.wp-block-file.aligncenter a').click(function(e)
{
$('.learndash_mark_complete_button').removeClass('hidden');
});
});
})(jQuery);
<div class="wp-block-file aligncenter">Open PDF</div>
<input type="submit" value="Mark Complete" class="learndash_mark_complete_button hidden">

You can check the length of the link element to add the class to the element:
if(!$('.wp-block-file.aligncenter a').length){
$('.learndash_mark_complete_button').removeClass('hidden');
}
Demo:
if(!$('.wp-block-file.aligncenter a').length){
$('.learndash_mark_complete_button').removeClass('hidden');
}
.hidden{
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" value="Mark Complete" class="learndash_mark_complete_button hidden">

Related

how to enable and disable link by click button using jquery

<script type="text/javascript">
$(document).ready(function(){
`$('#button1').click(function(){
$("a").removeAttr('href');
}
});
});
</script>`
link`
<input id="button1" type="button" class="add" value="Click to remove the link!" />
You can add a class with pointer-events:none
$(document).ready(function() {
$('#button1').click(function() {
$("a").toggleClass('disable');
});
});
.disable {
pointer-events: none;
cursor: no-drop;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Link
<button id='button1'>Click</button>
You can just toggle the application of the pointer-events:none; style using JQuery's .toggleClass() method.
$(document).ready(function(){
$("#toggle").on("click", function(event){
$("a").toggleClass("disable");
});
});
/* When applied to an element, the element doesn't respond to mouse actions */
.disable { pointer-events:none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Example.com
<input type="button" id="toggle" value="Enable/Disable Link">
But, if you are asking how to remove the link altogether, then you would use the .remove() method:
$(document).ready(function(){
$("#btnRemove").on("click", function(){
$("a").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Example.com
<input id="btnRemove" type="button" value="Click to remove the link!">

jQuery .height() not changing

I have this code:
$(function() {
$('#team-ch').click(function() {
$('#team-camb-hert').height('auto');
});
});
Which changes the height of a div on a link click. I have put an alert inside this function and can confirm it's being ran when the link it clicked, only the height of the target div isn't changing. The target div has a height of 0 set in the CSS file to begin with but it's not being updated.
Does anyone have any idea what may be going on here?
Try this:
$(function() {
$('#team-ch').click(function() {
$('#team-camb-hert').css('height','auto');
});
});
See how changing the height of an element works:
.test{
margin:10px;
border-style:solid;
border-width:1px;
height:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="height:10px" onclick="$('.test').css('height','10px');">
<input type="button" value="height:auto" onclick="$('.test').css('height','auto');">
<input type="button" value="height:0px" onclick="$('.test').css('height','0px');">
<input type="button" value="hide" onclick="$('.test').hide();">
<input type="button" value="show" onclick="$('.test').show();">
<div class="test">test</br>test test</br>test</br>test</br></div>
you can also try this:
$(function() {
$('#team-ch').click(function() {
$('#team-camb-hert').attr('style','height:auto');
});
});
Please put your script code below the jQuery library and run again as shown below,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function() { $('#team-ch').click(function() { $('#team-camb-hert').height('auto');});});

When checkbox is checked show hidden button and hide the visible button

I am a beginner in javascript, hopefully you can help me with this problem..
I have 2 buttons in html form and 1 checkbox, 1 button should be hidden and the other is visible. My problem is how to show the hidden button and hide the visible button at the same time when the checkbox is checked..
I know how to hide/show the button flip-ch1 but I can't do it to other button.
I have a script here:
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').mouseup(function() {
$('#flip-ch1').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add</button>
<button class="btn_style" id="flip-ch1">Add</button>
</div>
Toggle them both:
<script type="text/javascript">
$(document).ready(function(){
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#ch1').toggle();
$('#flip-ch1').toggle();
});
});
</script>
Just add this line:
$('#ch1').toggle();
So, the complete js code would be:
$(document).ready(function () {
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#flip-ch1').toggle();
$('#ch1').toggle();
});
});
Do not get confused by the .hide(). It is used to hide one of the buttons only in the beginning. No need to use afterwards. The reason that you do not see any changes after toggling the checkbox, is that when first button is hidden the second one gets its place, the place does not remain empty. You can spot all this that I mentioned on inspect element of any major browser.
Try $('#radio').is(':checked') as below
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').on('change', function() {
if ($('#radio').is(':checked')) {
$('#flip-ch1').show();
$('#ch1').hide();
} else {
$('#flip-ch1').hide();
$('#ch1').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add 1</button>
<button class="btn_style" id="flip-ch1">Add 2</button>
</div>

Replacing Div content with another using jQuery

I have a div named Groupz and another div named vegasDetailz
Now i want, when i click on the button that is lying in first div , first div should disappear and the second div should take it's place for this purpose i have written the following jquery code
$(document).ready(function() {
$("button").click(function() {
$("#vegasDetailz").replaceWith("#Groupz");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
<input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz"></div>
But it is not working for me. Any ideas ?
Note: I am using php laravel 5.3
You are trying to click on $("button") but you have no button, so use $(".getstart"), since it is the id of your input.
Second your .replaceWith("#Groupz") are just trying text into the div, you have to get the element first before you can replace the entire element. Like .replaceWith($("#Groupz"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
<input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz">
</div>
<script>
$(document).ready(function() {
$(".getstart").click(function(){
$("#vegasDetailz").replaceWith($("#Groupz").html("Im an replaced"));
});
});
</script>
You can remove submitBTN getstart from the div vegasDetailz then add new one to the second div Groupz:
$(document).ready(function() {
$(".getstart").click(function(){
$(".getstart").remove();
$("#Groupz").append($("<input class='getstart' name='button' type='submit' value='Get Started'>"));
});
});
#vegasDetailz {
background-color: grey;
width:500px;
height:60px;
}
#Groupz {
width:500px;
background-color:pink;
height:60px;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
<input class="getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz">
</div>
You need to use the name as you selector then use like this input[name=button] if you want to use class as your selector then use .submitBTN.
$(document).ready(function() {
$("#Groupz").hide();
$(".submitBTN").click(function() { // you can also use input[name=button] for '.submitBTN'
$("#vegasDetailz").hide();
$("#Groupz").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
<input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz">
Hai Another div
</div>
If you just want to show & hide the div on the button click, then try this code:
<div id="vegasDetailz">
<input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz" style="display:none;">Hello</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".getstart").click(function(){
$("#vegasDetailz").css('display','none');
$("#Groupz").css('display','block');
});
});
</script>
Just make the div id named Groupz hidden by default, if you don't want to show the second div in default state.
I hope, it may be helpful to you.

toggle does not remain close, i have to click on the button for the toggle to close up

<script type="text/javascript">
$(document).ready(function(){
$("#click").click(function () {
$("#info").slideToggle('slow');
});
});
</script>
this is the html code
<h4 class="rsvpTitle">
<span class="arrow"></span>RSVP
</h4>
<div id="info" class="expandContent">
<form id="formmail method="post" action="form_handler.php">
<label class="response" for="response">Will you be joining us?</label><br>
<span style="margin-left:121px;">
<input type="radio" name="response" value="I'll be there with bells on!" id="response">I'll be there with bells on!</span>
<br>
I have this code for a toggle effect. However, the toggle does not remain close, I want the toggle to remain close until someone clicks on the button to release the toggle. any ideas? is the code well written?
u have to add display: none; to #info and e.preventDefault() to your js
examples:
http://jsbin.com/oxuqus/2/ OR
http://jsfiddle.net/kB2fc/
CSS:
#info {
display: none;
}
JS:
$(document).ready(function(){
$("#click").on("click", function(e) {
$("#info").slideToggle('slow');
e.preventDefault();
});
});
Just add this in your CSS
#info {
display : none;
}
Working Example
(jsFiddle)
Explanation
The element is not hidden at the document load event. You must hide it with display:none; in your CSS to ensure it is not visible without user interaction.
Solution
Add the following to your CSS:
#info
{
display:none;
}
NOTE
You are not closing your input and span elements ! Add the closing tags:
<input type="radio" name="response" value="I'll be there with bells on!" id="response">I'll be there with bells on!
</input>
</span>

Categories

Resources