Hey so I have a div that I want to replaceWith some text after clicking on the button and then re-show the same hidden text after 5 seconds. I am stuck on the part where I need to re-show it. I hid the div with the onclick function and appended some text but after a couple seconds I would like to re-show the original text.
here is the link that I need to change text onclick and then after 5 seconds show the ORIGINAL text...
originally the text says "add to calendar", upon clicking it, it should change to "calendar updated" and then after 5 seconds change back to "add to calendar".
<div class="resSubmitAction download resDetailsButton">
<a href="javascript:void(0);">
</div>
<div class="calText"><p>add to calendar</p></div></a>
</div>
Jquery:
$(document).ready(function () {
$(".resSubmitAction").click(function () {
$(".calText > p").replaceWith("Calendar Updated");
});
});
Make use of the setTimeout function. Fiddle
$("#clickme").click(function(){
var elem = $(this);
setTimeout(function(){
elem.hide();
}, 5000);
});
In the code that you provided, the click event is not attached correctly, if you click 'add to calendar' it doesn't trigger the event.
You can use the setTimeout function to call any function after certain time delay, this is your code with the setTimeout implemented.
Fiddle
$(".calText").click(function () {
var originalText = $(".calText > p").text();
$(".calText > p").text("Calendar Updated");
setTimeout(function(){
$(".calText > p").text(originalText)
}, delayTime);
//Just a little timer I added
triggerTimer();
});
Related
In my MVC application i have a view in which i refresh the page each 10 seconds.
I have some paragraph in the view are hidden and a button which make those paragraphs not hidden.
The problem that when i click on the button to make the paragraph show when the page reload automatically in 10 seconds returns the paragraph hidden.
This is the button:
<button id="button">Display Internal Sequences</button>
This is the paragraph :
<p1 hidden style="text-align:center;font-size: 50px; padding:-25px; margin:-25px;">#Html.Label(#Model.CSLine.ModuleOrderInternalSequence > long.MinValue ? #Model.CSLine.ModuleOrderInternalSequence.ToString() : string.Empty)</p1>
This is the script to make the p not hidden:
<script>
$(document).ready(function () {
$("#button").click(function () {
$("p1").attr("hidden", false);
var show ='true';
localStorage.setItem(key, show);
});
});
</script>
This is the reload each 10 seconds:
setTimeout(function () {
window.location.reload(1);
}, 10000);
$(document).ready(function() {
var show = localStorage.getItem(key);
if (show == 'true')
{
$("p1").attr("hidden", false);
} })
The result is that the paragraph returns hidden after each reload.
I want when i click the button the paragraph became not hidden even after reload.
Thank you
Try https://jsfiddle.net/hbmk7e2L/
Note: Your page will only reload after 10 seconds in this case and will only refresh once.
If you want the page to refresh every 10 seconds, you should use setInterval instead of setTimeout.
<script>
$(document).ready(function() {
// If you want the page to refresh constantly, you should use setInterval intead of setTimeout. setTimeout fires only once.
setTimeout(function () {
window.location.reload(1);
}, 10000);
$("#button").click(function() {
$("p1").attr("hidden", false);
localStorage.setItem("show_p1", true);
});
if (localStorage.getItem("show_p1") == 'true') {
$("p1").attr("hidden", false);
}
});
</script>
<p1 hidden style="text-align:center;font-size: 50px; padding:-25px; margin:-25px;">#Html.Label(#Model.CSLine.ModuleOrderInternalSequence > long.MinValue ? #Model.CSLine.ModuleOrderInternalSequence.ToString() : string.Empty)</p1>
<button id="button">Display Internal Sequences</button>
if (show = 'true')
This is not a comparison, you are setting the value of "show" to "true". Use == to compare values.
Try using jQuery's prop() method instead of attr() like so:
$("p1").prop("hidden", false);
The jQuery documentation for prop() describes the difference between the two methods, especially for boolean attributes like hidden. Also, here is a post regarding this .prop() vs.attr()
I am facing one issue, I want to disable anchor click after one click. I have
on-click attribute set in my anchor tag. Below is my HTML
<a style="cursor:pointer;" id="someId" onclick="Myfuntion()">Verify</a>
After I click "Verify" I am changing anchors text to "Verifying..." and one more thing I am trying to disable this anchor to avoid click in between the verification logic going on.
I have tried event.preventdefault() and also added disabled attribute to anchor.
But nothing works.
Please help!
If you were using jQuery for this you could have done this more easly.
Here we add a new class to a link to show that it has been clicked already. We check this when a click is made.
<a style="cursor:pointer;" id="someId">Verify</a>
$('#someId').on('click',function(){
//Check if button has class 'disabled' and then do your function.
if(! $(this).hasClass('disabled')){
$(this).addClass('disabled');
Myfuntion();
$(this).removeClass('disabled');
}
});
Here is a demo as to how it could be done using Javascript.
//Pass the event target to the function
function Myfuntion(elem) {
//If the element has no "data-status" attribute
if (!elem.getAttribute("data-status")) {
//Set attribute "data-status=progress"
elem.setAttribute("data-status", "progress");
//Change the text of the element
elem.textContent = "Verifying...";
//The setTimeout(s) below is only for the demp purpose
//Lets say, your verification process takes 4 seconds
//When complte
setTimeout(function() {
//Remove the attribute "data-status"
elem.removeAttribute("data-status");
//Notify the use that verification is done
elem.textContent = "Verified";
//Again, this is only for demo purpose
setTimeout(function() {
//User may verify again
elem.textContent = "Verify";
}, 1000);
}, 4000);
}
return false;
}
Link to the demo
There are plenty of ways to do this; one simple approach is to just redefine the function itself:
var myFunction = function() {
alert('clicked');
// do whatever your function needs to do on first click, then:
myFunction = function() { // redefine it
// to no-op, or to another action
alert('second click');
}
}
<a onclick="myFunction()">click me</a>
I'm having some issues figuring out why my click function isn't working.
I have a JSFiddle for it here: http://jsfiddle.net/adbakke/ve9oewvh/
My html breaks down like so (condensed for posting here):
<div class="projectDisplay"></div>
<div class="flex-grid project-list">
<div id="project1" class="project">
<div class="projectImg"><img></div>
<div class="projectDesc">
<h3>title</h3>
<p>Description</p>
<span>click to close</span>
</div>
</div>
Now my JQuery gets all that HTML under "project" like so:
$('.project').click(
function() {
var newGet = $(this).html();
Then there's a bunch of functions (that all work beautifully) to add this data to <div class="projectDisplay"></div>, and replace it all if there's already something there.
Then when I want to close the project by hitting <span> click to close</span>, it works fine when I click the first item, but if I click a second before closing it does not work.
Edit: Click one image, then (before hitting close), click a second image in the project list, and then attempt to click "close project".
My close function looks like so:
$('.closeMe').click(
function() {
$('.projectDisplay').fadeOut(500);
}
);
I have tried putting it both inside and outside the scope of my click function itself. Neither will allow me to have it close upon clicking a second time to open up a different project.
What am I missing?
Update:
Updated JSFiddle base so you can tell the different sections are different.
Instead of:
$('.closeMe').click(
Which will bind the click event for all .closeMe elements present in the DOM at that moment
use:
$(document).on('click', .closeMe,
Which will bind the click event to body and then delegate it to .closeMe, meaning that it will fire for .closeMe elements added dynamically even after the initial binding.
i.e
$(document).on('click', '.closeMe',
function() {
$('.projectDisplay').fadeOut(500);
}
);
Try it at http://jsfiddle.net/L4Lmf6zy/1/
You should delegate the click event on .clickMe because you are adding the button dynamically on every opening of a project.
Working example here http://jsfiddle.net/ve9oewvh/3/
So you should use
$(document).on('click', '.closeMe',
function() {
$('.projectDisplay').fadeOut(500);
}
);
The problem is you are removing all child nodes when you click on another project and you are not rebinding the click function. You need to rebind the click event with the new HTML.
$(document).ready( function () {
// Hide the Description, Close Button and Link to Site
$('.projectDesc a, .projectDesc p, .projectDesc span').hide();
// What happens when you click the project button
$('.project').click(
function() {
var newGet = $(this).html();
if ($('.projectDisplay').is(':empty')) {
// Add the description section if empty
$(newGet).hide().appendTo('.projectDisplay').fadeIn(500);
$('.projectDisplay .projectDesc a, .projectDisplay .projectDesc p, .projectDisplay .projectDesc span').fadeIn(250);
} else {
// If description is not empty, fade out, empty and add new project description
$('.projectDisplay').fadeOut(500, function (){
$('.projectDisplay').empty().append(newGet).fadeIn(250);
$('.projectDisplay .projectDesc a, .projectDisplay .projectDesc p, .projectDisplay .projectDesc span').fadeIn(250);
$('.closeMe').click(
function() {
$('.projectDisplay').fadeOut(500);
}
);
})
};
$('html, body').animate({
// scrollTop: $(".projectDisplay").position().top
scrollTop: $(".projectDisplay").offset().top - 200
}, 750);
$('.closeMe').click(
function() {
$('.projectDisplay').fadeOut(500);
}
);
});
});
// End of Project Click Function
i have this script i copied from the internet. i want to control the accordion event(close current div and open next div) with a button
<button> Click me to open next</button>
in the div instead of the
<h3 id="section1">Section 1</h3>
.
Am new to jquery and javascript any help would be well appreciated.
this is the fiddle to my code:fiddle
From your particular fiddle. I modified it a little bit, and bind the button click onto click on <h3> tags, like you were clicking them manually. From there, for every click of button, it just clicks the next <h3>. Consider this example:
$(function () {
$("#accordion").accordion({
activate: function (event, ui) {
//alert($(ui.newHeader).attr("id"))
}
});
$('button').on('click', function(){
var current_index = $(this).parent().next('h3').index();
if(current_index != -1) { // just checks if its the last
$(this).parent().next('h3').trigger('click');
} else {
$('h3#section1').trigger('click');
}
});
});
Sample Fiddle
I have that text field:
<input type='text' id='title' name='title'>
<div id='error' class='error'></div>
When user clicks out of the text field and there is a validation problem, the div "error" appears.
What I want to do is to hide that little div when user clicks anywhere in the body.
I tried e.stopPropagation in the body click event but didn't work.
The div never appears because when I blur out of the textfield, it's considered a body click
Please let me know if you have any idea. Regards
EDIT:
I have updated the code. The code inside the body click event is supposed to hide the "error" div when anything but the text field is clicked, but can't get it to work.
$('body').click(function(event){
if ($(event.target).closest('#title').get(0) == null ) {
$("#error").hide();
}});
// Validation
$('#title').blur(function(){
var titleinput=$('#title').val();
if (titleinput.length <30 || titleinput.length >50){
$('#error').text('Your title must be between 30 and 50 characters').show();
}
});
Unfortunately, since blur and click are different events, you can't use stopPropagation. The only way I can think to do this is to fake it. You can ignore the first click that happens within a fraction of a second of the blur event.
http://jsfiddle.net/LeNDp/1
var ignoreClicks = false;
var timer;
$("body").click(function() {
if(!ignoreClicks){
$("#msg").fadeOut();
}else{
if(timer) clearTimeout(timer);
ignoreClicks = false;
}
});
$("input").blur(function(e) {
ignoreClicks = true;
$("#msg").stop(true,true).show();
if(timer) clearTimeout(timer);
timer = setTimeout(function(){ignoreClicks=false;}, 250);
});