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>
Related
good morning:
<html>
<button type="button" class="btn btn-primary">Notifications <span class="badge badge-light">4</span>
</button>
<button type="button" class="btn btn-primary">Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>
</html>
now how I implement these ?
for example like facebook when i click the notification appear a little submenu
anyone can help me ?
thanks
You can get the notifications from the database in your controller, put them in a variable, and pass it to a view.
In the view itself you can do something like this:
// $notificationsCount is the variable with number of notifications you passed to the
view in your controller
<button type="button" class="btn btn-primary">Notifications
<span class="badge badge-light"><?php echo $notificationsCount ?></span>
</button>
If you don't want to refresh the page, you could use ajax or some kind of event.
Example:
$('#someElement').on('click', function () {
//change value of the notification btn
});
I'm trying to do something like a social network, but I'm having problems with jquery, I want, by clicking the comment button, the user is taken to the comment field, but I'm not able to use $(this).
When the user click here
The code:
<button type="button" class="btn btn-default abreComentarios" >
<span class="fa fa-comments-o"></span>
</button>
The field:
The code:
<div class="comentar">
<textarea class="txtComentario form-control caixaComentario" placeholder="Seu comentário" onkeypress="comentarEnter()"></textarea>
</div>
My jquery:
$('body').on('click', '.abreComentarios', function() {
//console.log('entrou');
$(this).next('.caixaComentario').focus();
});
Remember, I'm using a foreach, so I have to use $(this)
Your next() isn't .caixaComentario but .comentar,
So use the next() but then you'll have to use find() (or children()) to focus the textarea
$('.abreComentarios').on('click', function() {
//console.log('entrou');
$(this).next('.comentar').find('.caixaComentario').focus();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-default abreComentarios">click</button>
<div class="comentar">
<textarea class="txtComentario form-control caixaComentario" placeholder="Seu comentário"></textarea>
</div>
Solved, i just did it:
1- Added a data-id with the id of the post in the button
<button type="button" class="btn btn-default abreComentarios" data-id="'.$post->id.'"><span class="fa fa-comments-o"></span></button>
2- Added the same id in the end of the name of class "caixaComentario"
<div class="comentar">
<textarea class="form-control caixaComentario'.$post->id.'" placeholder="Seu comentário" onkeypress="comentarEnter()"></textarea>
</div>
3- Call without $(this) on jQuery
$('body').on('click', '.abreComentarios', function() {
var id = $(this).data("id");
$('.caixaComentario'+id).focus();
});
and Worked :D
$(this) will be your <button>, but calling .next(".caixaComentario") will look for a sibling element to the button. If your <button> and <div class="comentar"> are siblings, the .next(".caixaComentario") will not match any elements as they aren't siblings. The would be a niece/nephew.
Try changing .next(".caixaComentario") to .next("div .caixaComentario")
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.
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>
I am using twitter bootstrap to share my post on social media, i have made a link whose popover with some buttons content, but further when i click on buttons in popover, their popover function does not work.
<div class="well text-center">
<button id="but1" title='Popover' class="btn btn-success" rel='popover' data-placement="bottom" data-toggle='popover2'>Share</button>
</div>
<div class='container hide' id='cont'>
<a onclick="Facebook()"
class="btn btn-default">
Facebook
</a>
<a onclick="twitter()"
class="btn btn-default">
Twitter
</a>
<a class="btn btn-default"
data-placement="bottom" data-toggle="popover" data-title="Login" data-container="body"
type="button" data-html="true" href="#" id="login">
Email
</a>
</div>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" placeholder="Name" class="form-control" maxlength="5">
<button type="submit" class="btn btn-primary" onclick="EmailToSomeOne();">Send</button>
</div>
</form>
</div>
and the js
$('#but1').popover({
html: true,
content: $('#cont').html()
});
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
function Facebook(){
alert('share on facebook');
}
function twitter(){
alert('share on twitter');
}
function EmailToSomeOne(){
alert('Email to send');
}
for more clearing i have created a fiddle also.
Your code works fine. Its just a jsFiddle setting issue.
In your fiddle select no wrap (head) in the dropdown on the left, click Run and it will work.
See example
When onLoad is selected your functions are defined within the closure of the $(document).ready(function() {}); only. Thats the reason it shows the error Uncaught ReferenceError: Facebook is not defined (see the console)
BTW, here's an equivalent example on plunkrenter link description here
You can simply bind the buttons with an id like
<a id="Facebook"class="btn btn-default">Facebook </a>
and access it using
$("#Facebook").on('click',function(){
alert('share on facebook');
})
EDIT:
You cannot have nested popover in bootstrap.However you can use the below two approaches
1)You can change the html inside the popover and display your email form
$('.popover-content').html($('#emailform').html())
Please refer to the fiddle attached for this appproach
https://jsfiddle.net/mohit181191/mxstLfnf/
2)You can open a modal on popover button click.
<a data-toggle="modal" data-target="#facebook"
class="btn btn-default">
Please refer to the below fiddle for this approach
http://jsfiddle.net/mohit181191/o35zqy7w/
Bootstrap not support the Nested popover
http://getbootstrap.com/javascript/#modals
Use this :
$('body').on('click',".btn-default", function(){
alert('share on facebook');
});
.btn-default change this to your button default id