On my WordPress site, I have a notification bar at the top that is displayed to unregistered users. When user clicks a close button, the notification div is simply hidden with display: none;.
The problem is that whenever the user refreshes the page or goes to a different page, it reappears.
My question is, what is the best way to keep this bar always hidden once user clicks the close button? What is good practice in this scenario?
One possible solution is to use local storage:
html
<div>test</div>
<input type="button" value="hide" />
js
$(":button").on("click", function(){
$("div").toggle();
localStorage.setItem("hide", $("div").is(":visible"));
});
localStorage.hide == "false" ? $("div").hide() : $("div").show();
fiddle
Related
I'm designing a particular page where wherever I click I want to go back to the homepage.
All of the page in enclosed in a section:
<section id="test-page-1" ui-sref="project.home">
</section>
The problem is that I have 3 particular buttons in this page and are not working as they should, instead they are also redirecting me to the Home page.
Z-index didn't solve the problem as from what I read it only works on a visual perspective rather than functionality. I'd really like it if I can still use the ui-sref="project.home" in the whole section as it is. Any ideas please ?
In the functions associated with you button clicks, stop the event propagation.
$scope.buttonFunctioanlity = function (e) {
e.stopPropagation();
};
<button ng-click="buttonFunctioanlity($event)">Click Me</button>
You know what ui-sref is right?
Changing your application state and redirecting to different url (Home in your case)
not really understood your problem, but remember you can add ng-click together with ui-sref to do some function before redirecting (might help your logic)
like
<section id="test-page-1"
ng-click="doSomething(someParams)"
ui-sref="project.home"></section>
and controller
$scope.doSomething = function(someParams) {
// bla-bla-blaaa
}
On my website there is a contactform on the bottom of the page. When it is filled in and a user pressed the submitbutton, the page reloads but shows the top of the page. What do I need to adjust so when a user pushed the submitbutton, the page reloads and goes to the bottom of the page?
Thanks!
You have a few options:
Set the hashtag
You can use jQuery and use .scrollTop()
Or native with window.scrollBy(0,9999);
Submit the for through Ajax so you don't have to refresh the page.
Put a named anchor to where you want to go after form sending:
<a name="afterform"><h1>Example: a heading</h1></a>
And then add that as a hash to the form action:
<form action="yourpage.html#afterform" ...
i've basically got a login form, it pops up in a css box asking the user to login. i was having the problem that once the user clicked submit they were being taken to the login window within the css box so made the submit button open a blank/new window.
The problem i have now though is the parent window stays open with the users login details. For security i'd really like to get rid of this, so is there a way i can close the parent window on the launch of the new one? Or even set it so that the page refreshes after the submit button is pressed to clear the css box?
Thanks
Here's what i've got so far:
<form action="login.php" method="post" target="_blank" >
<form action="login.php" method="post" target="_top" >
This will send the form to the parent window, which should completely remove the login box, and reload the parent page as well.
you can also use js
<script type="text/javascript">
function add_tab2(){
var newTab = gBrowser.addTab('http://www.google.com');
newTab.label = "MyTab";
newTab.id = "MyTab";
gBrowser.selectedTab = newTab;
aDoc = document.getElementById("MyTab");
// do something with aDoc here
window.close();
}
</script>
I am developing an application using Springs 2.0.
I have a requirement that when user clicks on a submit button on a form, a poup should be displayed showing a "select" box for selecting a predefined reasons and a "Textarea" to accept comment. (These dropdown options are picked from context so can not use static HTML page.)
These 2 values should also be stored in the database along with the other data fields in the parent form.
My problem is: if I use "window.open" then the parent form data does not get carried to child window as it is not "submitted". Also can not submit the form as it will not display popup window.
I tried searching for solution on sites, but could not find solution suitable for me.
Any help would be really appreicated.
Thanks.
Use a div as a popup instead of a new window. Or use JQuery. Example, messi popup under usage
Edit
If you just want something very basic,
<div id="modal" style="border:3px solid black; background-color:#9999ff; padding:25px; font-size:150%; text-align:center; display:none;">
This is a modal popup!<br><br>
<input type="button" value="OK" onClick="Popup.hide('modal')">
</div>
Show Modal Popup
<br>
Show Modal Popup With A Custom Screen
http://www.javascripttoolbox.com
You can use jQuery modal. Here is a similar example which accepts input in a modal http://jqueryui.com/demos/dialog/modal-form.html.
Resolved it using window.showModalDialog and normal java script. Here are the details.
Firstly I defined 2 hidden fields on parent page. When popup window is opened and submitted, the values entered in the dropdown and text area are assigned to those.
var handle = window.showModalDialog(htmlURL,this,urlProp);
when submitted,
document.getElementById("hiddenRejectionComment").value = handle.rejectionComment;
document.getElementById("hiddenRejectionReason").value = handle.rejectionReason;
Simple, wasn't it?
In my form there are some radio buttons - when the radio is selected - the div appears, when another one is selected - the div hides. After submitting a form if there are some errors, page reloads and the div should still show (if the radio was selected). The solution below works only for checkboxes - how to make it work for radio's? https://stackoverflow.com/a/8406409/1137417
Here is my code:
$(function(){
$('#Q07_03, #Q07_07, #Q08_03').hide();
// checkboxes
$('#Q07_03').toggle($('#Q07_02').is(':checked'));
$('#Q07_02').click(function() {
$('#Q07_03').toggle(); });
$('#Q07_07').toggle($('#Q07_06').is(':checked'));
$('#Q07_06').click(function() {
$('#Q07_07').toggle(); });
// here code for radio ?
// #Q08_03 is the div to be displayed;
// #Q08_02 is the one that should be selected
})
Why don't you use ajax to submit the form? You will not face these kind of issues. Well to answer your question you can try this.
//I don't know how many radio buttons are there on the page and what there names are
//you can accordingly change the radio button selector to check if it is checked or not
$(document).ready(function() {
if($("input:radio:first").is(":checked"))
$('divToShowHide').show()
else
$('divToShowHide').hide()
});