I have a button that I should show a message in front of it so i'm using the following jq code:
<script type="text/javascript">
$("#msg").html(data);
var pos = $("#answer2ticker").offset();
$("#msg").offset({top: pos.top, left: pos.left});
$("#msg").show();
</script>
<div class="alert alert-danger" id="msg" style="position: absolute;" hidden="hidden" onclick="$(this).hide();"> </div>
THE PROBLEM:
the message shows the first time normally, but when I hide it and try to show it again, I have to click on show twice.
so hiding is normal, but showing has to be called twice.
Why dont you just use jQuery toggle function?
$( document ).ready(function() {
var data = "test";
$("#msg").html(data);
$("#answer2ticker").click(function() {
$('#msg').toggle();
});
});
Example: http://jsfiddle.net/acidrat/LbEVL/1/
Related
This is my code:
<div class="titfx">
<div class="clk1">CLICKME</div>
</div>
<div class="here" style="display:none;">info for here</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('.clk1').on("click", function(event) {
//first code
var here = $(this).parent(".titfx").next(".here");
here.toggle();
//second code
if (!here.is(event.target) && here.has(event.target).length === 0) {
here.hide();
}
});
});
</script>
What the first part of javascript code does: When the word "CLICKME" is clicked, then the hidden div with text "info for here" shows.
What the second part of javascript code should do: When any part of the screen that is not class="here" is clicked on, then the text "info for here" should hide. The second part of my code is unable to achieve that. I'm not sure what I'm doing wrong. Please help me fix this issue.
you need to bind two event listeners to achieve this, one for the "clk1" element, and one for the whole page.
when fires document click event, just hide the text,
when fires ".clk1" click element, you need to stop propagation first and then write the toggle behaviour.
this is my solution
$(document).ready(function() {
$('.clk1').on("click", function(event) {
//first code
event.stopPropagation();
$(".here").toggle();
});
//second code
$(document).on("click", function(event){
$(".here").hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="titfx">
<div class="clk1">CLICKME</div>
</div>
<div class="here" style="display:none;">info for here</div>
Here is a potential solution. The first click binding works for the toggle logic. However, for your second scenario, you said you want it to close them if they click any where on the page, other than the two areas. In that regard, you are concerned with the click events for the body, not just the two areas.
The second logic binds to the body, and checks to see if the clicked element is a child of the .clk1 or the .here. If it is not a child of either one, it will hide the .here.
The css was added to force the page size to be larger than just the html provided so you could actually click on something not them, :)
$(document).ready(function() {
$('.clk1').on("click", function(event) {
var here = $(this).parent(".titfx").next(".here");
here.toggle();
});
$(document.body).on('click', function(event){
var clickedElement = $(event.target);
if (!clickedElement.closest('.clk1').length
&& !clickedElement.closest('.here').length) {
$('.here').hide();
}
});
});
body {
min-width: 800px;
min-height: 600px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="titfx">
<div class="clk1">CLICKME</div>
</div>
<div class="here" style="display:none;">info for here</div>
In Bootstrap v4 how do I show alerts through JavaScript? My goal is to have the alert hidden when the page loads then when a AJAX call completes turn the alert on to display a message.
I see in the documentation how close the alert but no where how to display it:
https://getbootstrap.com/docs/4.0/components/alerts/#methods
I have the following fiddle where I show the alert first (not what I want) then press a button to close it. A second button is there to turn it back on but no clue what to pass to it to make it work. I figure if I can make this sample work I can then figure out how to make it work with the alert not displayed on the page load
https://jsfiddle.net/jhf2e5h6/
<div class="row">
<div class="col-sm-12">
<div id="divInfo" class="alert alert-success show fade ">
<div class="alert-heading"> :</div> <p></p>
</div>
</div>
</div>
<button id="close">Close</button>
<button id="show">Show</button>
<script type="text/javascript">
$(function () {
$('#close').on('click', function () {
$('#divInfo').alert('close');
});
$('#Show').on('click', function () {
$('#divInfo').alert('?????');
});
//
});
</script>
Method .alert destroys the DOM. So no possibility to go back. Have a look to documentation :
https://getbootstrap.com/docs/4.0/components/alerts/#methods
You should try to use removeClass/addClass.
$('#close').on('click', function () {
$('#divInfo').removeClass('show');
});
$('#show').on('click', function () {
$('#divInfo').addClass('show');
});
And you have mistake on 'Show', you should try 'show'.
Bootstrap 4 has .d-none, which does display: none. This comes in handy if your alert contains a dismiss button.
So add .d-none to your .alert element (e.g. on page load), and do the following:
// Show the alert
$('.alert').removeClass('d-none').addClass('show');
// Hide the alert
$('.alert').addClass('d-none').removeClass('show');
close removes it from the DOM so it can't be re-shown.
You can instead toggle the invisible class...
https://www.codeply.com/go/mbshAxZQMH
$(function () {
$('#close').on('click', function () {
$('#divInfo').addClass('invisible');
});
$('#show').on('click', function () {
$('#divInfo').removeClass('invisible');
});
});
I prefer to dynamically create alert content
<div id="alert"></div>
<script type="text/javscript">
function showAlert(obj){
var html = '<div class="alert alert-' + obj.class + ' alert-dismissible" role="alert">'+
' <strong>' + obj.message + '</strong>'+
' <button class="close" type="button" data-dismiss="alert" aria-label="Close">'+
' <span aria-hidden="true">×</span>'+
' </button>'
' </div>';
$('#alert').append(html);
}
$('#Show').on('click', function () {
showAlert({message: 'Hello word!', class:"danger"});
});
I just want to show a div when someone click "add" button. If he clicks that "add" button again, needs to hide the current one and show another div. It also needs to show the approved div list on top area. If someone clicks the top area approved div, need to load the div again.
I try to hide and show on click but no luck. (I'm bit new to jquery and I know this is pretty basic code.)
Here is the fiddle Fiddle
$('.add-box').click(function() {
$('.test-div-2').show();
});
$('.add-box').click(function() {
$('.test-div-1').hide();
});
.test-div-1,
.test-div-2,
.test-div-3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-div-1">1</div>
<div class="test-div-2">2</div>
<div class="test-div-3">3</div>
<a class="add-box">Add</a>
Do below things:-
1.Add jQuery library before your script code.
2.Wrap your code inside $(document).ready(function(){..}); (needed when script code is added above the HTML. if script code is added at the bottom of the page then wrapping is not needed).
3.Do show(),hide() in single click itself.
$(document).ready(function(){
$('.add-box').click(function() {
$('.test-div-2').show();
$('.test-div-1').hide();
});
});
.test-div-1,
.test-div-2,
.test-div-3{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-div-1">1</div>
<div class="test-div-2">2</div>
<div class="test-div-3">3</div>
<a class="add-box">Add</a>
Fiddle example:- https://jsfiddle.net/rrj1818a/
Note:-
If you want to show one-by-one then do like below:-
https://jsfiddle.net/87re6avo/
<div class="test-div active">1</div>
<div class="test-div">2</div>
<div class="test-div">3</div>
<a class="add-box">Add</a>
$('.add-box').click(function(e) {
e.preventDefault();
var $current = $('.test-div.active');
var $next = $current.next();
$current.removeClass('active');
if(!$next.length) {
$next = $('.test-div').first();
}
$next.addClass('active');
});
I have a page that can have a variable number of <div> the idea is people can click the + symbol which is an <img> then the div that is linked to the img tag will display.
I currently have:
PHP/HTML
$plus = '<img src="images/plus.png" class="clickme" width="20px" height="20px">';
$table .= '<div>'.$plus.'</div>';
$hidden .= '<div class"diary">-Content-</div>';
JS
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$( ".clickme" ).click(function() {
$( ".diary" ).slideToggle( "slow", function() {
});
});
});
</script>
This obviously opens all divs and not just the one that is clicked on. I have looked at other similar questions on here and have tried a number of variations such as:
$(document).ready(function(){
$(".clickme").click(function(){
$(this).next(".diary").toggle();
});
});
However, when I try these it just stops working altogether. i.e. none of the divs slide up or down. I see the examples work on JS Fiddle but as soon as i apply it to my page I get nothing.
I am possibly doing something really dumb for it not to work but can't see what.
thanks for any help.
The HTML output should look like
<div>
<div>
<table>
<img class="clickme">
</table>
</div>
<div class="diary">
<table> content </table>
</div>
<div>
(based on tht HTML provided)
Best way would be to add an attribute with matching indexes to both elements
<div>test toggle
<div class="clickme" data-index="1">click me</div>
<div class="toggle" id="obj_1">toggled field</div>
</div>
and then in the JQuery:
$(function () {
$(".clickme").click(function () {
//get number from clicked element's attribute
var index =$(this).attr('data-index');
//select element with id that matches index and toggle
$('#obj_'+index).toggle();
});
})
After looking at your code, i can see that the slideToggle call is maded on .diary class which is probably applied on each of your elements.
I suggest you to put your diary div inside the $plus div then use jquery children or simply give your .diary divs a unique id and use the id attribute for your
toggle.
EDIT:
Here is a simple html output:
<div class="clickme">
<div class="diary">CONTENT HERE</div>
</div>
Add this in the CSS:
.clickme {
background: url('images/plus.png') no-repeat top left;
min-width: 20px;
min-height: 20px;
cursor: pointer;
}
Script tag:
<script>
$(function() {
$(".clickme").click(function() {
$(this).children().slideToggle("slow");
});
});
</script>
Note that i'd let the diary class for your usage and styling purpose but it's not used anywhere.
Im currently doing an onclick event, where the user is redirected to a new site.
Unfortunly, when I click on the input located in class side , it fires the event, while im acually looking for it to not do the event while clicking / typing in the input field.
Q: How can I make the jQuery code not fire when clicking on the input field?
<div id="<?echo $ar['url'];?>" class="mobile-no-margin upgradeable full-mobile col-sm-12" style=" background-size: 100% 100%; background-image: url(test">
<div class="side">
<input type="input" name="<? echo $ar['input'];?>" class="col-sm-12">
</div>
</div>
jQuery code:
<script type="text/javascript">
$(".upgradeable").on('click',function(e) {
id = $(this).attr('id');
url(id);
});
</script>
Use
$(".upgradeable").on('click',function(e) {
var target = $( e.target );
if ( !target.is( ".side" ) ) {
id = $(this).attr('id');
url(id);
}
});
$('.yourelement).click(function(event){
event.preventDefault(); // Stop the click
});
https://api.jquery.com/event.preventdefault/