Click on div with javascript or jquery - javascript

I have a clickable div and I want to some how with javascript or jquery to be able to click on it automatically.
My div is like this:
<div style="display:none;" id="button">Hello</div>
That is click able div when display changed to block I need some script to do that for me.
I need some script like, when it sees that div display changed to block then script must click on div id="button"
I have tried this but this is not for that as I searched on google
<script type="text/javascript">
$(document).ready(function(){
$('#button').trigger('click');
});
</script >

Here is an example in JS:
<div style="display:none;" id="button">Hello</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('button');
button.addEventListener('click', function() {
this.style.display = 'block';
})
if (button.style.display === 'block') {
button.click()
}
});
</script >
Update:
If you need to click on button after some javascript actions, just add there following lines:
if (button.style.display === 'block') {
button.click()
}
Update2:
In the provided page I found the method to show mentioned div:
function startChecking() {
secondsleft -= 1e3,
document.querySelector(".load_stream").innerHTML = "Please Wait.. " + Math.abs(secondsleft / 1e3) + " Seconds",
0 == secondsleft && (clearInterval(interval),
$(".reloadframe").show(),
document.querySelector(".load_stream").style.display = "none",
$("#btn_play_s").show()
//You need to place it here, after "show" div will be displayed
// and display will have value "block"
)
}
So you can replace last line with $('#btn_play_s').show().click() instead of $('#btn_play_s').show(), it will be enough.

Simply use $('#button').click(); every where you want.
If you want to trigger this event when button display changed first you need create an event for this (because Jquery don't have on display changed event).
And then trigger it's your self:
$('#button2').on('click',function(){
$('#button')
.css('display','block')
.trigger('isVisible');
});
$('#button').bind('isVisible',function() {
alert('Clicked...!');
});
$(function(){
$('#button').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button2" value="display the button"/>
<div style="display:none;" id="button">Hello</div>

Related

Get a dynamic element to change text

I have a dynamic element in my web page like this that appear when I click on an icon:
<span class="elasticbar-item text-right text-baseline">
<button class="button primary" data-next-button="">MY TEXT</button>
</span>
But I want to change default text that come from server (where I don't have access) with a new text.
What I tried before now is represented by:
var buttonIntervalCheck = setInterval(function () {
var button = $("[data-next-button]");
if(button.length === 1) {
button.text("NEW TEXT");
clearInterval(buttonIntervalCheck);
}
}, 1000);
Example in Google Chrome
First result is when I clicked on my icon.
Second result is when I make Inspect on the button (Ctrl+Shift+I) on the button.
And I don't understand how exactly works.
How I can fix it?
Try running this on your console:
$("[data-next-button]").text("NEW TEXT");
If it works correctly, then your timing is wrong. You are probably calling button.text before the DOM has loaded. Try wrapping your code around the ready fuction:
$(function() {
var buttonIntervalCheck = setInterval(function () {
var button = $("[data-next-button]");
if(button.length === 1) {
button.text("NEW TEXT");
clearInterval(buttonIntervalCheck);
}
}, 1000);
});
You can't select a dynamic element with jquery , try with js like
document.querySelector("[data-next-button]")
In the example below there is a setTimeout() that adds the button in the HTML dynamically in 5 seconds. Then, the setInterval() changes the text of the button and close the interval. Everything worked as you expected. I don't see any error here.
var buttonIntervalCheck = setInterval(function () {
var button = $("[data-next-button]");
if(button.length === 1) {
button.text("NEW TEXT");
clearInterval(buttonIntervalCheck);
}
}, 1000);
setTimeout(function(){
$('#ss').html(`<span class="elasticbar-item text-right text-baseline">
<button class="button primary" data-next-button="">MY TEXT</button>
</span>`);
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='ss'></div>

preventDefault doesn't work with external links?

So I have the following code:
JS
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
return true;
}
$("#close-link").click(function(event) {
event.preventDefault();
var targetUrl = $("#confirm").attr("href");
});
$("#confirm").click(function(event) {
event.preventDefault();
});
$("#go").click(function(event) {
event.preventDefault();
});
HTML
<div id="overlay">
<div id="dialog">
<h3 class="top-bar">Leaving so soon?</h3>
<span class="close-button-container">[X]</span><br /><br /><br />
Example text
<br />No, take me there anyway...
</div>
</div>
<!-- ... -->
Example Link
The Problem
I tried adding a link to another site. But I wanted to add a confirmation box once this link is clicked. The #close-link is used to close the dialog and the #confirm link as seen above should open it. The #go link is inside the dialog and if clicked brings the user to the location of the #confirm link. But something went wrong... Now when I click #confirm it opens the dialog for a second and directly sends me to its href. Shouldn't event.preventDefault fix this? If so, then why doesn't it?
Add an event to overlay(event). This function needs to prevent the click so it should have the e.preventDefault()
Example Link
function overlay(event) {
event.preventDefault();
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
var href = event.target.href
//If click button close
//Hidden div, no go
//If click button go
//window.location = href
}
Explanation
Your <a> has two events binded to it. One with #confirm and one with the inline onclick=. You should choose only one :)
So, a few things;
Remove all inline event handlers
When using jQuery, make the most of it and avoid writing vanilla javascript unless there is a reason to do so.
Do not use A for any other purpose than an actual link (The close button in your case). Use a button/other tags.
Take a look the below code and see if that's what you wanted.
$("#confirm, #close-link").click(overlay);
function overlay(evt) {
evt.preventDefault();
var el = $("#overlay");
el.css({"visibility": el.css("visibility") === "visible" && "hidden" || "visible"});
if ( this.tagName === 'A' ) {
el.find("a").attr("href", this.href);
}
}
#overlay {
height: 150px;
width: 200px;
background: green;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay">
<div id="dialog">
<h3 class="top-bar">Leaving so soon?</h3>
<span class="close-button-container" id="close-link">[X]</span><br /><br /><br />
Example text
<br />No, take me there anyway...
</div>
</div>
<!-- ... -->
Example Link
If your code was called as part of an event listener callback, event.preventDefault() would work. But your code is running due to onclick which simply runs the function overlay() - attaching listeners to various elements (#close-link, #go, #confirm) using jQuery. After the listeners are attached, they start listening for events, which never come since the <a href="..."> changes the page.
Solution:
It is best to stop using on* attributes for all your codes. Take it out. Then use only event listeners for all your needs.
$('#confirm').on('click', function(event) {
event.preventDefault(); // this will work
// Do your toggle visibility and whatever else you need here.
});
There are other possible solutions that continue to use onclick calling a function, but I wouldn't recommend it.
Try attaching the click event to the #confirm element inside $(document).ready:
$(document).ready(function() {
$("#confirm").on("click", function(event) {
event.preventDefault();
});
});

show popup for a particular time after that popup close automatically

Below i mentioned my page contents
Currently it'l show only popup box for a sec only ,but i need to extend the time ihave no idea how to do that
script i used
<script type="text/javascript">
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
lightbox_close();
}
}
function lightbox_open(){
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
my button
<input type="submit" value="SUBMIT" onclick="lightbox_open();" />
poup box
<div id="light">
<h3 th:text="${result}"></h3>
hi hello
</div>
<div id="fade" onClick="lightbox_close();"></div>
You can use Window setTimeout() method for this purpose.
var t=setTimeout(lightbox_close,3000)
You'll want to use the window.setTimeout event. If you are using jQuery for example:
$(document).ready( function() {
$('#element').hide();
window.setTimeout(function() {
$('#element').show();
}, 5000);
});
You can swap the hide/show around to suit your needs.
JSFiddle: http://jsfiddle.net/NfCHG/1/

Disable image link on click

I have a image that links to a page. This is a process button which can take up to 20 seconds to run.
I want to prevent the user from pushing it more than once.
How would I write a Javascript that when the button is pushed, it would follow the hyperlink, but the link for the button would disable, and the image would change?
<script>
function buttonClicked()
{
document.getElementById('buttonImage').src = 'new-image.jpg';
document.getElementById('buttonId').disabled = true;
}
</script>
<a id="buttonId" href="next-page.html" onclick="return buttonClicked()"><img id="buttonImage" src="image1.jpg"></a>
From your question, it sounds like your "button" is the image that you click on...if that's true then you can use the following:
<a id="my_link" href="/page_to_vist_onclick"><img id="my_image"></a>
Then your javascript would be:
document.getElementById('my_link').onclick = function() {
document.getElementById('my_link').disabled = true;
document.getElementById("my_image").src='the_path_to_another_image';
};
On click, remove the href attribute from the a element.
I ended up going with the following:
$(document).ready(function() {
var isSubmitted = false;
$("#submit").click(function(e) {
if ( ! isSubmitted ) {
isSubmitted = true;
var src = $(this).attr("src").replace("gold","red");
$(this).attr("src", src);
} else {
e.preventDefault();
}
});
});
Here is a really simple one for you
in your JS
function Create(){
document.write('<INPUT disabled TYPE="button" value="Click Me!">');
}
in your HTML
<INPUT TYPE="button" value="Click Me!" onclick="Create()">
If you are ready to use jQuery, then here is another solution.
$("selectorbyclassorbyIDorbyName").click(function () {
$("selectorbyclassorbyIDorbyName").attr("disabled", true).delay(2000).attr("disabled", false);
});
select the button and by its id or text or class ... it just disables after 1st click and enables after 20 Milli sec
Works very well for post backs n place it in Master page, applies to all buttons without calling implicitly like onclientClick
you can use this.
<script>
function hideme()
{
$("#buttonImage").hide();
}
</script>
<a id="buttonId" href="next-page.html" onclick="return hideme()"><img id="buttonImage" src="image1.jpg"></a>
if you don't want to hide image please use this..
$('#buttonImage').click(function(e) {
e.preventDefault();
//do other stuff when a click happens
});
That will prevent the default behaviour of a hyperlink, which is to visit the specified href.
Let's make a jquery plugin :
$.fn.onlyoneclick=function(o){
var options=$.extend({src:"#"},o);
$(this).click(function(evt){
var $elf=$(this);
if( $elf.data("submitted") ){
evt.preventDefault();
return false;
}
$elf.attr("src", typeof(options.src) == 'function' ?
options.src($elf.attr("src"))
: options.src
).data("submitted",true);
});
}
$(".onlyoneclick").onlyoneclick({
src : function( src ){
return src.replace("gold","red");
}
})
on any button that should trigger only once :
<button ... class="onlyoneclick">tatatata... </button>
its simple...just one line of code :)
Onclick return false.

Hiding a button in Javascript

In my latest program, there is a button that displays some input popup boxes when clicked. After these boxes go away, how do I hide the button?
You can set its visibility property to hidden.
Here is a little demonstration, where one button is used to toggle the other one:
<input type="button" id="toggler" value="Toggler" onClick="action();" />
<input type="button" id="togglee" value="Togglee" />
<script>
var hidden = false;
function action() {
hidden = !hidden;
if(hidden) {
document.getElementById('togglee').style.visibility = 'hidden';
} else {
document.getElementById('togglee').style.visibility = 'visible';
}
}
</script>
visibility="hidden"
is very useful, but it will still take up space on the page. You can also use
display="none"
because that will not only hide the object, but make it so that it doesn't take up space until it is displayed. (Also keep in mind that display's opposite is "block," not "visible")
Something like this should remove it
document.getElementById('x').style.visibility='hidden';
If you are going to do alot of this dom manipulation might be worth looking at jquery
document.getElementById('btnID').style.visibility='hidden';
//Your code to make the box goes here... call it box
box.id="foo";
//Your code to remove the box goes here
document.getElementById("foo").style.display="none";
of course if you are doing a lot of stuff like this, use jQuery
If the space on that page is not disabled then put your button inside a div.
<div id="a1">
<button>Click here</button>
</div>
Using Jquery:
<script language="javascript">
$("#a1").hide();
</script>
Using JS:
<script language="javascript">
document.getElementById("a1").style.visibility = "hidden";
document.getElementById("a1").style.display = "none";
</script>
when you press the button so it should call function that will alert message. so after alert put style visible property .
you can achieve it using
function OpenAlert(){
alert("Getting the message");
document.getElementById("getMessage").style.visibility="hidden";
}
<input type="button" id="getMessage" name="GetMessage" value="GetMessage" onclick="OpenAlert()"/>
Hope this will help . Happy to help
function popAlert(){
alert("Button will be hidden on click");
document.getElementById("getMessage").style.visibility="hidden";
}
h1 {
color: #0000ff;
}
<h1>KIAAT</h1>
<b>Hiding a button in Javascript after click</b>
<br><br>
<input type="button" id="getMessage" value="Hide Button OnClick" onclick="popAlert()"/>
If you are not using jQuery I would suggest using it. If you do, you would want to do something like:
$( 'button' ).on(
'click'
function ( )
{
$( this ).hide( );
}
);
<script>
$('#btn_hide').click( function () {
$('#btn_hide').hide();
});
</script>
<input type="button" id="btn_hide"/>
this will be enough
You can use this code:
btnID.hidden = true;
var start = new Date().getTime();
while ((new Date().getTime() - start) < 1000){
} //for 1 sec delay

Categories