I want to make a report button that a user can click only once. After clicking it will disappear and show a text saying "Already Reported" instead.
Can someone help me with this?
you can use jquery. Add a class "yourclass" to your button and add following script to your js file
$(document).ready(function(){
$(document).on('click', '.yourclass', function(){
$(this).after("Already Reported");
$(this).remove();
});
});
Related
I'm trying to use collapsible panels to show and hide data and am using glyph icons also to show the state. Initially on start up the glyph icons were not showing correctly (wrong states) but I found a fix for this using JS.
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
See this JSFiddle working correctly (i.e. icons show the correct state on start up and when minimizing and maximizing the individual collpasible panels)
However, I then put these 2 collapsible panels into a simple collabsible button (readmoreless) so these are only shown when the Read more button is presssed and hidden when Read less is pressed.
I added some JS for this to toggle the text on the button (from Read more to Read less) when the button is pressed.
$(document).ready(function(){
$("#readmoreless").on("hide.bs.collapse", function(){
$(".btn2").html('Read more');
});
$("#readmoreless").on("show.bs.collapse", function(){
$(".btn2").html('Read less');
});
});
However the addition of this collapsible button area now breaks the panel icon states. They both seem to be affected by clicking on the Read more/Read less button and also both are affected when collapsing/opening one of the panels. The states of both panel area icons are always the same as each other even though one might be open and one closed.
See updated broken JSFiddle here.
Has anyone got any ideas how I can make this work?
Thanks!
I've replaced the .collapse with .panel-collapse to fix the icon states and changed the way you replace your text (read more / read less) by overriding the text() function return inside the click() function of your button.
Here is what you should insert to your JS
//Change icon states
$('.panel-collapse').on('shown.bs.collapse', function () {
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
//Read more or less
$(document).ready(function () {
$(".btn2").click(function () {
$(this).text(function (i, text) {
return text === "Read more" ? "Read less" : "Read more";
})
});
});
JSFiddle
text() - function
I'm using bootbox.js along with yii2 framework to change the default confirmation popup on delete actions.
When I hit the "delete" buttons the bootbox popup appear properly but the "ok" button is preselected, so if the user hit the "enter" button the action take place.
Is it possible to change the default selected button from "ok" to "cancel"?
Thank you
There isn't anything baked into the library to do what you want, but something like this should work:
var dialog = bootbox.confirm("Please confirm action", function(result){
/* handle result */
});
dialog.on("shown.bs.modal", function() {
dialog.find('.modal-footer .btn.btn-default').focus();
});
I'm using following code for just dialog box, Its working fine.. But how can I stop from redirecting the same page while clicking?
[?]
Thanks in advance...
add the # like so :
[?]
or remove href of link and set url in some custom attribute
onclick event of link, read url from custom attribute
text
You may try this:
$(document).on('click', '.click', function(e){
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
JSFIDDLE
If you don't want to link anywhere: Don't use a link in the first place.
<span title = "this is some text">[?]</span>
(If you are creating something to click on (which triggers JS) then use a <button>).
I made a one-page website which only has text on it and buttons which only purpose is to change the text in the container. And now when I made everything I forgot what if someone wants to link to a specific "page"/text to my site. What would be the best way to do this? So when someone clicks the button, address changes for each paragraph and if someone points to that address specific paragraph would appear/specific button function would do its job.
This is a jquery code for buttons so you can understand better :
$(document).ready(function () {
$('[id*=txt]').hide();
$('[id*=home]').show();
$('#btnhome').css({'background-color':'#555', 'opacity':"0.5"});
$('.button').click(function (){
$('[id*=txt]').hide();
$('.button').css({'background':'transparent', 'opacity':'1'});
$(this).css({'background-color':'#555', 'opacity':'0.5'});
});
$('#btnhome').click(function () {
$('[id*=home]').show();
});
$('#btnabout').click(function () {
$('[id*=about]').show();
});
$('#btncontact').click(function () {
$('[id*=contact]').show();
});
You would have to add a parameter to the URL. Like http://mysite.com?page=1
Then you would have to parse out the parameter. Here's a site that will help you with that.
Finally, you would provide for the page parameter in the document.ready function. You could use a switch statement for that.
Right now, I'm using this in a Bootstrap modal to redirect to a site:
click
I want the modal to be closed once the link has been clicked, so I thought adding data-dismiss="modal" to the tag would work, however it causes the modal to close without the link being opened.
Can I combine these and make the modal close after the URL opens?
This works for me and doesn't require extra script tags:
click
in boostrap 4 :
click
Add one id to anchor tag. Then you can close the modal using that id once it get clicked.
click
<script>
$("a#sample").click(function(){
$('#myModal').modal('hide')
});
</script>
This worked for me.
<a onclick="location.href='http://www.example.com/';" data-dismiss="modal">click</a>
something like the following should do it
$('a').click(function(){
$('modal-selector').modal('hide')
})
You can use the already existing class in your element:
class="modal-close"
I added this code to whole project
$(document).on('click', '.modal-hide-continue', function (e){
$(this).closest('.modal').modal('hide');
});
and it automatically works on any element with class name modal-hide-continue inside the modal.