Actually, I am working with ajax to display the dynamic elements.
I am setting up a a div on a button click using javascript, this div contains form elements, after this form gets submitted i need to hide this div, so that it's no longer seen on UI.
The problem I am facing is, once I hide the div, its working fine, but when I reload the page the div is occurring again.
The wanted to make the div hidden permanently once I click on the button.
You will need to store the state of the div being hidden inside of localStorage.
Example:
const divHidden = localStorage.getItem('divHidden') === 'yes';
// if (!divHidden) show div
// Then when the div is being hidden:
localStorage.setItem('divHidden', 'yes');
You can also listen for the storage event on window to update any other tabs of your web application:
window.addEventListener('storage', () => {
if (localStorage.getItem('divHidden') === 'yes') {
// ...
}
});
Related
Problem:
I'm trying to implement a dropdown form from a button. However, I'm having issues with the form not staying visible even after the condition is met. I'm new to javascript and css, so bear with me if it's a silly error. Thanks in advance.
What I want to do:
The form will be hidden by default.
When a user hovers over an image button, the form should be shown and hidden after the mouseleave.
If the user clicks the button, then the form should stay visible so that the user can enter the data and sumbit it.
Observation:
The objectives #1 and #2 from above are working as expected.
As opposed to objective #3, the form automatically hides even after the button click.
Unsuccessful Methods:
Using .show() instead of .css("display","block")
Using form:hover to set display:block.
Using setTimeout(hide_function,500) hides the form after 500ms regardless of the button click.
Code:
Here's the link to my jsfiddle that you can use to test it out.
References:
For button click detection.
For changing display property.
Just change data attr:
$('#dropbtn').click(function() {
$(this).data('clicked', 'yes');
$('#loginForm').css('display', 'block');
});
https://jsfiddle.net/d3h8gvek/3/#run //fixed result
i have modified your code little bit please check with the fiddle
$('#dropbtn').click(function() {
$(this).data('clicked', 'yes');
$('#loginForm').addClass('activate');
});
https://jsfiddle.net/d3h8gvek/7/
I'm trying to show a textarea element when I click on an input element. The goal is to show the textarea, but when I click anywhere else, the textarea disappears.If I click anywhere on the textarea, it stays visible.
I saw a similar example of one on stackoverflow --> Link to similar question
The method was to add an addEventListener to the html tag by using document.documentElement, so basically the whole page, but I was wondering if there was an alternative? And is it safe to add an addEventListener to an entire page?
The code to addEventListener to entire page:
document.documentElement.addEventListener('click',clickhandler,false);
I'm not trying to be picky either, but I would like to avoid using a timeout on the element
Besides the code above, I first tried using the click event, and everything works fine, but when I click anywhere else the textarea doesn't disappear.
I then tried the focus/blur events, but when the input loses focus, the textarea disappears.
I was thinking of an if conditional for the click function... but I'm not sure how that would work without adding a click event to the entire page...
JSFiddle : http://jsfiddle.net/LghXS/
HTML\
<input type="text" id="email">
<textarea id="suggestion"></textarea>
CSS
textarea{
display:none;
}
JS
var textarea = document.getElementById('suggestion');
var input = document.getElementById('email');
// Using the Click Event
input.addEventListener('click',function(){
var display = textarea.style.display;
if(display === '' || display === 'none'){
textarea.style.display='inline-block';
}else{
textarea.style.display='none';
}
});
// Using the Focus and Blur
/*
input.addEventListener('focus',function(){
textarea.style.display='inline-block';
input.addEventListener('blur',function(){
textarea.style.display='none';
});
});
*/
Sooo, any ideas?
I am working on an application using html and jquery. It has 4 buttons that are used to perform various tasks when i click them. what i want now is to show user the state of the button when mouse hover over it. For example for an ON/OFF button if mouse hover over the button it shows user that button is currently OFF or ON.
one way to do this is to use an alert() but with that each time i go to button it will show an alert which i dont want i just want a simple text etc to be displayed on top of the button when mouse hover over it.
anyone can help me how can i do it ?
Change the text of the button on button hover by using jQuery .hover():
$('button').hover(function(){
$(this).text('ON');
},function(){
$(this).text('OFF');
});
Demo Fiddle
Presuming you already know how to get the state of the button, let's assume you assign that state to a variable named... well, state. :)
Then it's pretty straightforward from there:
$("button").hover(function() { // You may choose a different selector for your buttons
var curButton = this,
$curButton = $(this);
curButton.oldHTML = $curButton.html(); // Cache old button label
$curButton.html(state); // Change button label to reflect state
}, function() {
var curButton = this,
$curButton = $(this);
$curButton.html(curButton.oldHTML); // Restore old HTML
});
I'm updating the user posts via this code:
var auto_refresh = setInterval(function()
{
$('.contenido-publicaciones')
.load("refresh_p.php?search_user="+search_user).fadeIn();
}, 2500 ); //Which is working.
1: <div class="contenido-publicaciones">, all the <div class="this-is-a-post"> div's from refresh.p.php load here every 2,5 seconds.
2: I have a textarea tag inside for each <div class="this-is-a-post"> that refreshes from refresh_p.php.
3: When <div class="contenido-publicaciones"> refreshes, it also refresh the textarea and prevent the user for typing.
4: All of the textareas have the class b_green
I want to clearInterval(auto_refresh) when the user clicks a textarea with the class b_green so another user can send a comment to that post.
I've tried the following:
$(".b_green").click(function(){
clearInterval(auto_refresh);
}); // Didn't work, <div class="contenido-publicaciones"> keep refreshing.
$("textarea").click(function(){
clearInterval(auto_refresh);
}); // Works only when i click a textarea that i have on the top of the page to send posts, but doesn't work when i click a textarea with the class b_green.
$(this).click(function(){
clearInterval(auto_refresh);
}); //This works if i click on b_green textareas, but stop the Interval on every click that the user does on the page, I only want to stop on b_green textareas click.
Is there any error on my code? Any help would be appreciated.
The clicks do not fire because at the time you are binding them there are no textareas or the ones that there are are latter replaced with new ones. These new textareas do not have the onclick handler attached.
You could do either of these:
Add onclick="clearInterval(auto_refresh);" to the code of the textarea that backend sends and get something like:
<textarea onclick="clearInterval(auto_refresh);"></textarea>
Use on to bind the click handler to a higher element that remains on the page like so:
$(".contenido-publicaciones").on('click', 'textarea', function(){
clearInterval(auto_refresh);
});
As I understood your loaded content contains all nodes which you are trying to handle by click.
If so . There is an issue. Because each time you get update you loose click handlers, because DOM has changed. as + you probably have memory leak here from previous "unreachable" handlers
I have modal popup with an overlay written in html / js, everything works fine but if a user tabs enough they can get to the underlying form fields / buttons. Is there any good way of preventing this?
This is a rough idea but I'm hoping to inspire ideas rather than tell you exactly how to do it. I'll use a combination of pseudocode and pseudo-jquery-code:
function showMymodaldExample() {
//Show modal dialog (mymodal) code goes here
//
//Then we bind an event
$(document).bind('mymodal.keydown', function(e) {
if ( currently focussed element is not a child of mymodal ) {
set the focus previous element
}
});
}
And then remember to unbind mymodal.keydown when you destroy/hide the dialog