I want to fade in and out different <div> on my site. The div´s together are all one form. In every <div> I have a "go further" and a "go back" button. A go further button triggers this script:
document.getElementById("addnewjob_sitetwo").onclick = function(){
// Fade out all content
$('#newjobcontent-siteone').fadeOut(200);
function cutnewjobsitetwo(){
//Cut all content out
$('#newjobcontent-sitetwo').fadeIn(200);
$('#newjobcontent-siteone').css("display", "none");
}
setTimeout(cutnewjobsitetwo, 201);
};
And that works. Now, if I am on <div> three and i want to go back to <div> two I have a problem.
I modified the script from above like that:
document.getElementById("addnewjob_sitetwo").onclick = function(){
// Fade out all content
$('#newjobcontent-siteone').fadeOut(200);
$('#newjobcontent-sitethree').fadeOut(200);
function cutnewjobsitetwo(){
//Cut all content out
$('#newjobcontent-sitetwo').fadeIn(200);
$('#newjobcontent-siteone').css("display", "none");
$('#newjobcontent-sitethree').css("display", "none");
}
setTimeout(cutnewjobsitetwo, 201);
};
And that doesn´t work. The button does nothing if it gets clicked. Can anyone tell me why? I mean, the <div> of the first site gets faded out while it isn´t there, but is that realy the problem? - And I have to say, I`m a beginner...
Thank you
EDIT:
Here are some pictures. I hope it helps to understand what i want to do: Site one,Site two,Site three
So, the "weiter"-button on "Site one" triggers the same script as the "zurück"-button on "Site three". It fades out <div> one and three and fades in <div> two.
EDIT 2:
Here is the code of the buttons:
<button type="button" class="btn btn-default" name="addnewjob_sitetwo" id="addnewjob_sitetwo">
<span class="glyphicon glyphicon-new-window" style="font-size: 20px"></span> weiter
</button>
This is the first and here the second:
<button type="button" class="btn btn-default" name="addnewjob_sitetwo" id="addnewjob_sitetwo" style="font-size: 20px">
<span class="glyphicon glyphicon-new-window" style="font-size: 20px"></span> zurück
</button>
The code you have uploaded there for the third <div> seems to be set for the second with id
"addnewjob_sitetwo" instead of "addnewjob_sitethree"
Changing:
document.getElementById("addnewjob_sitetwo").onclick
To:
document.getElementById("addnewjob_sitethree").onclick
should do the trick.
Related
I have the following HTML Code. Clicking on the Buy now for 200 will show the below pop up with Buy now, ok and close
<button class="btn-standard buyButton currency-coins">Buy Now for 200</button>
<div class="dialog-body">
<button class>
span class="btn-text">Ok</span>
<span class="btn-subtext"></span>
</button>
<button class>
<span class="btn-text">Ok</span>
<span class="btn-subtext"></span>
</button>
</div>
I want to automatize the process, and I did something like this in javascript but it didn't work for the last step, click on OK.
So below is my code.
$("button:contains('Buy Now')").on('click', function(){
$("span:contains('Ok')").click();}); //alert("hello") is working, but click on OK button didn't
----------------------------
$("button:contains('Buy Now')").click(); // is doing nothing for Ok button click.
You want to trigger the click event of the span on the click of the 'Buy Now' button, if I understood correctly.
The code you have should work. All you need to do is create a function to do something about the click event of the span.
$("button:contains('Buy Now')").on('click', function() {
$("span:contains('Ok')").trigger('click');
return false;
});
$("span:contains('Ok')").on('click', function() {
//do something here
alert("This works");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class>
Buy Now
</button>
<div class="dialog-body">
<button class>
<span class="btn-text">Ok</span>
<span class="btn-subtext"></span>
</button>
<button class>
<span class="btn-text">Cancel</span>
<span class="btn-subtext"></span>
</button>
</div>
Wanted to have cleave.js to format text input on the fly.
I have 2 text inputs
HTML text input and
also a pop over text input whenever search icon is clicked.
The issue is on popover text input where cleave text formating is not
working.
I believe it could be related to the element hasn't exist somehow? I have try to listen to listener but no luck so far. .on('shown.bs.popover)
My code as as per below
https://jsfiddle.net/fairul82/y3kf92oq/
Libraries used : cleave,js , bootstrap popover , jquery
HTML
<div class="container">
<h3>Bootstrap 3 Popover HTML Example</h3>
<input type="text" class="input-element"><br>
<ul class="list-unstyled">
<li><a data-placement="bottom" data-toggle="popover" data-
container="body" data-placement="left" type="button" data-html="true"
href="#" id="login"><span class="glyphicon glyphicon-search" style="margin:3px 0 0 0"></span></a></li>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<h1>
My Content
</h1>
<input type="text" class="input-element"><br>
</div>
</form>
</div>
//JS
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
$("[data-toggle=popover]").on('shown.bs.popover', function() {
// alert('called back');
const cleave = new Cleave('.input-element', {
numeral: true,
numeralThousandsGroupStyle: 'thousand'
});
});
const cleave = new Cleave('.input-element', {
numeral: true,
numeralThousandsGroupStyle: 'thousand'
});
Here is solution https://jsfiddle.net/ztkv8w60/19/
According to authority document https://github.com/nosir/cleave.js, it has a note .input-element here is a unique DOM element. If you want to apply Cleave for multiple elements, you need to give different css selectors and apply to each of them.
It is tricky question, because the bootstrap popover creates the same element as your specific div when the icon gets a click. Therefore there are two the same element, you have to point it out which element is in a popover.
I am having trouble expending and collapsing text on a button click. I was able to make so when you click the button, text collapse, but I also need to make so you can expand it back. I need to make it so first it is hidden, and when you click button it expends and you can collapse it again after that. Here is my code
$(document).ready(function() {
$('#btnSlideUp').click(function() {
$('#p1').slideUp(1000);
});
$('#btnSlideDown').click(function() {
$('#p1').slideDown(1000);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button id="btnSlideUp" class="btn btn-outline-success"><h1 class="jumbotron-heading">Expand</h1></button>
<p class="lead text-muted" id="p1">Below this post you can find different articles, tips&tricks about how to find the job. You can try to contact us, and we will greatly try to answer all of your questions. You can click on "Start finding a job" and we will take you through the basics
of finding a job, from the beginning till the end if you have absolutely no excperience.</p>
<p>
<a href="contactus.html"><button type="button" class="btn btn-
outline-primary btn-lg">Contact Us</button></a>
<a href="path.html"><button type="button" class="btn btn-outline
secondary btn-lg">Start finding a job</button></a>
</p>
</div>
The issue is that you bind two handlers to the click event on the button. When the button is clicked, both are triggered but you only see the initial one (slideUp).
$('#btnSlideDown') refers to an element that doesn't exist (at least not in your example).
The easiest way to resolve this is to use jQuery's slideToggle() method to handle the click event.
$(document).ready(function() {
$('#btnSlideUp').click(function() {
$('#p1').slideToggle(1000);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button id="btnSlideUp" class="btn btn-outline-success"><h1 class="jumbotron-heading">Expand</h1></button>
<p class="lead text-muted" id="p1">Below this post you can find different articles, tips&tricks about how to find the job. You can try to contact us, and we will greatly try to answer all of your questions. You can click on "Start finding a job" and we will take you through the basics
of finding a job, from the beginning till the end if you have absolutely no excperience.</p>
<p>
<a href="contactus.html"><button type="button" class="btn btn-
outline-primary btn-lg">Contact Us</button></a>
<a href="path.html"><button type="button" class="btn btn-outline
secondary btn-lg">Start finding a job</button></a>
</p>
</div>
You can use jQuery's toggle method instead:
$(document).ready(function(){
$('#btnSlideUp').click(function(){
$('#p1').toggle(1000);
});
});
Try This.
$(document).ready(function() {
$('#btnSlideUp').click(function() {
$('#p1').slideToggle(1000);
});
You can read the full documentation here
Use jquery .slideToggle() function.
$(document).ready(function() {
$('#btnSlideUp').click(function() {
$('#p1').slideToggle(1000);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button id="btnSlideUp" class="btn btn-outline-success"><h1 class="jumbotron-heading">Expand</h1></button>
<p class="lead text-muted" id="p1">Below this post you can find different articles, tips&tricks about how to find the job. You can try to contact us, and we will greatly try to answer all of your questions. You can click on "Start finding a job" and we will take you through the basics
of finding a job, from the beginning till the end if you have absolutely no excperience.</p>
<p>
<a href="contactus.html"><button type="button" class="btn btn-
outline-primary btn-lg">Contact Us</button></a>
<a href="path.html"><button type="button" class="btn btn-outline
secondary btn-lg">Start finding a job</button></a>
</p>
</div>
Use a boolean
var isDown=true;
$('#btnSlideUp').click(function() {
if(isDown){
$('#p1').slideUp(1000);
isDown=false;
}else
{
$('#p1').slideDown(1000);
isDown=true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button id="btnSlideUp" class="btn btn-outline-success"><h1 class="jumbotron-heading">Expand</h1></button>
<p class="lead text-muted" id="p1">Below this post you can find different articles, tips&tricks about how to find the job. You can try to contact us, and we will greatly try to answer all of your questions. You can click on "Start finding a job" and we will take you through the basics
of finding a job, from the beginning till the end if you have absolutely no excperience.</p>
<p>
<a href="contactus.html"><button type="button" class="btn btn-
outline-primary btn-lg">Contact Us</button></a>
<a href="path.html"><button type="button" class="btn btn-outline
secondary btn-lg">Start finding a job</button></a>
</p>
</div>
So I am using the following jQuery snippet to make a loading animation run (created in CSS) when a file is selected in an input field and then an upload button is clicked.
The form has 3 input fields with 3 upload buttons and is quite flexible. For e.g if a user selects a file in the first input field but clicks on the second upload button the loading animation should run around the first input field only. Another example is that if a user selects a file in the first input field and the second input field but clicks on the third upload button then the loading animation should run in the first and second input fields only.
$(document).ready(function() {
$(document).on("click", ".UploadBtn", function() {
$(".p").each(function(file) {
if ($(this).val()) {
$(this).next(".loader").show();
$(this).next(".loader").find(".spinner").show();
$(this).next(".loader").find(".UploadBtn").hide();
}
});
});
});
The code fails to run in the IF statement function. If i change the code (mentioned below) it will make the animation run but it ends up making the loading animation run in all 3 selection fields even if only one file was selected. This is not what is required but does tell me that the part of the code which has the IF statement breaks down in the code above;
$(document).ready(function() {
$(document).on("click", ".UploadBtn", function() {
$(".p").each(function(file) {
if ($(this).val()) {
$(".loader").show();
$(".spinner").show();
$(".UploadBtn").hide();
}
})
});
});
I am a beginner level coder and I have spent hours trying to fix this issue but nothing worked. Your help is greatly appreciated!
HTML snippet added as per recommendation
(It also has some Python code which was done by my friend) form.photo1, 2 and 3 have class = "p" ;
<div class="mtl mbl">
{{ form.photo1 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">
<div class="mtl mbl">
{{ form.photo2 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">
<div class="mtl mbl">
{{ form.photo3 }}
</div>
<div class="loader">
<div class="spinner"></div>
loading</div>
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">
I'm trying to refresh one ID of my page within the click of a button.
I've tried several ways but none of them work. Although I've created the button to refresh it, it keep the submission of the page (triggering the validation event). So, each time I click that button, he tries to submit the form, validation the inputs instead refresh that div.
Here's my code right now:
function refreshCaptcha() {
$("#captcha_code").attr('src','./inc/captcha.php');
}
<div class="form-group">
<div class="col-xs-4">
<button class="btn btn-sm btn-warning" id="refreshcap" name="refreshcap" onclick="refreshCaptcha();">
<i class="fa fa-refresh push-5-r"></i>
<img id="captcha_code" src="inc/captcha.php" />
</button>
</div>
<div class="col-xs-8">
<div class="form-material floating">
<input class="form-control" type="text" id="cap" name="cap">
<label for="cap">Captcha</label>
</div>
</div>
</div>
Can someone help me trying to get what's wrong?
Thanks.
Assuming that your button is inside the form,
add type in your button
which will stop button from submitting your form
<button type="button" class="btn btn-sm btn-warning" id="refreshcap" name="refreshcap" onclick="refreshCaptcha();">
<i class="fa fa-refresh push-5-r"></i>
<img id="captcha_code" src="inc/captcha.php" />
</button>
other than that you can use javascript return false; in your function end
with js
<script>
$(document).ready(function() {
$("#refreshcap").on("click",function(event){
event.preventDefault();
$("#captcha_code").attr('src','./inc/captcha.php');
});
});
</script>
with this you wont need to call on click event this will do it for you, no matter type is button or submit
I think your JS function should return false; in order to not submit the form.
<script>
function refreshCaptcha() {
$("#captcha_code").attr('src','./inc/captcha.php');
return false;
}
</script>