We Keep Coding

Jquery - Stop Event of Other Class

This is what I want
Jquery:
$("body").on('click','.js-validate-url',function(){
var url = $(".url").val();
if(url==""){
// STOP WORKING OF .js-loader click
// I want if url is empty it should not alert
}else{
//OK
// and here it should work fine
// it should alert
}
});
$("body").on('click','.js-loader',function(){
alert();
});
HTML
<form>
<input class="url">
<button class="js-loader js-validate-url"></button>
</form>
<form>
<button class="js-loader"></button>
</form>
Why I am doing this
Upper class is different for all buttons
But loader class is same for all buttons it shows loader inside clicked button
I found
e.stopPopagation();
But that works if I use it in loader click callback But I want to stop when button is clicked and url is empty
Cannot check url=="" inside loader click call back cause it is same for all button i dont want to check on other buttons click too so checking for single button

I would recommend using classes to check for condition.
$("body").on('click','.js-loader',function(){
var _this = $(this)
if(_this.hasClass('js-loader') && _this.hasClass('js-validate-url')){
// if both classes js-loader, js-validate-url are present on button
alert()
}else{
alert("js-loader") // if only js-loader present on button
}
});

I'm not sure if I understand what you are trying to do, but I guess you can merge your events into a single one and use an external function only when it met a condition.
You could also use removeEventListener but I don't believe you need it for your problem.
var myFunction = function(){
alert('loader');
};
$("body").on('click','.js-validate-url',function(){
var url = $(".url").val();
if (url){ alert('validate: '+url); }
else myFunction();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="google.com" class="url"/>
<button class="js-validate-url js-loader">Bt1</button>
<button class="js-loader">Bt2</button>

This is what I did and is working fine as per my requirement
$("body").on('click','.js-validate-url',function(){
var url = $(".url").val();
if(url==""){
// STOP WORKING OF .js-loader click
// I want if url is empty it should not alert
}else{
$(this).removeClass("js-diable");
//OK
// and here it should work fine
// it should alert
}
});
$("body").on('click','.js-loader',function(){
if($(this).hasClass('js-scud-disabled')){
//NOTHING TO DO
}else{
alert();
}
});
HTML
<form>
<input class="url">
<button class="js-loader js-validate-url js-disable"></button>
</form>
<form>
<button class="js-loader"></button>
</form>

$("body").on('click','.js-loader',function(){
if($(this).hasClass('js-loader js-validate-url')){
alert();
} else {
if(url==""){
} else {
}
}
});

Click on div with javascript or jquery

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>

javascript onclick change onclick to new function

I need to be able to change the onclick event of an id so that once it has been clicked once it executes a function which changes the onclick event
Here is my code:
Javascript:
function showSearchBar()
{
document.getElementById('search_form').style.display="inline";
document.getElementById('searchForm_arrow').onclick='hideSearchBar()';
}
function hideSearchBar()
{
document.getElementById('search_form').style.display="none";
document.getElementById('searchForm_arrow').onclick='showSearchBar()';
}
and here is the HTML:
<!-- Search bar -->
<div class='search_bar'>
<img id='searchForm_arrow' src="images/icon_arrow_right.png" alt=">" title="Expand" width="10px" height="10px" onclick='showSearchBar()' />
<form id='search_form' method='POST' action='search.php'>
<input type="text" name='search_query' placeholder="Search" required>
<input type='image' src='images/icon_search.png' style='width:20px; height:20px;' alt='S' >
</form>
</div>
Thanks

Change your code in two places to reference the new functions directly, like:
document.getElementById('searchForm_arrow').onclick=hideSearchBar;

Can you try this,
function showSearchBar()
{
if(document.getElementById('search_form').style.display=='none'){
document.getElementById('search_form').style.display="inline";
}else{
document.getElementById('search_form').style.display="none";
}
}

You were nearly right. You are settingthe onclick to a string rather than a function. Try:
in showSearchBar()
document.getElementById('searchForm_arrow').onclick=hideSearchBar;
in hideSearchBar()
document.getElementById('searchForm_arrow').onclick=showSearchBar;

You do not need to create two function.
Just create one function and using if condition you can show and hide the form tag..
function showSearchBar()
{
if(document.getElementById('search_form').style.display=='none'){
document.getElementById('search_form').style.display=''; // no need to set inline
}else{
document.getElementById('search_form').style.display='none';
}
}

function searchBar(){
var x = document.getElementById('search_form').style.display;
x = (x == 'inline') ? 'none' : 'inline';
}
You can wrap up both functions into one by adding a check to the current condition of the element and applying your style based on that condition. Doesn't actually change the function but doesn't need to as there is now only one functon performing both actions.

With javascript you can check and perform opration
function SearchBarevent()
{
if(document.getElementById('search_form').style.display=='none'){
document.getElementById('search_form').style.display="inline";
}else{
document.getElementById('search_form').style.display="none";
}
}
or if you may go for jquery there is better solution toogle
Like:
$("#button_id").click(function(){
$( "#search_form" ).toggle( showOrHide );
});
Fiddle is example

Here is an option that uses jQuery:
$('#searchForm_arrow').click(function() {
$('#search_form').slideToggle();
});
http://jsfiddle.net/PuTq9/

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.