This question already has answers here:
Display A Popup Only Once Per User
(7 answers)
Closed 7 years ago.
I found some ways to make javascript/jquery popup windows. But, there were some problems, first of all, I am not very good with these two languages, just beginner.
If there is any ready code, for opening POPUP window on website load, but only once per browser session. It would be very nice, if someone could help me with this.
I need simple popup, with just some text in it, but design for popup box something good looking, not like original browser popup (like in image), of course, with closing button.
http://i.stack.imgur.com/xNWxf.png
Thanks a lot
I know I shouldn't really do this and provide you with the answer without you trying to attempt it first because you won't be learning that way.
But I'm feeling nice today, so I'm providing you of a way of doing a pop up on first load and not loading the pop again until the session been destroyed.
You need to set the session, when you load the page by doing the following:
sessionStorage.setItem('firstVisit', '1');
Then you just need to check for the session like this:
If there is no session called firstVisit then show message box
if (!sessionStorage.getItem('firstVisit') === "1")
{
$(".message").show();
}
EXAMPLE
HTML
<div class="message">
<div class="message_pad">
<div id="message"></div>
<div class="message_leave">
</div>
</div>
</div>
JavaScript/JQuery
// Save data to sessionStorage
sessionStorage.setItem('firstVisit', '1');
/* Fix size on document ready.*/
$(function()
{
if (!sessionStorage.getItem('firstVisit') === "1")
{
$(".message").show();
}
//Close element.
$(".message").click(function()
{
$(this).hide();
});
$(".message").css({
'height': $(document).height()+'px'
});
$(".message_pad").css({
'left': ($(document).width()/2 - 500/2)+'px'
});
});
/*
* Fix size on resize.
*/
$(window).resize(function(){
$(".message").css({
'height': $(document).height()+'px'
});
$(".message_pad").css({
'left': ($(document).width()/2 - 500/2)+'px'
});
});
JSFIDDLE
Take a look at jQuery modals - by following their example, you will create a hidden HTML element in your page (styled however you wish).
Then, within your $(document).ready() event, .show() the modal. The ready event only fires once after the webpage has finished loading.
There are many other ways to show custom modal popups within many other libraries; do some research since this is generally a trivial matter.
Related
Point
The code I have here is from my "operating system" I'm trying to create inside a browser by putting iframes in AppWindows with PHP code as the backend or the (main program process).
Now in every GUI system you have the ability to move windows, stack one on top of each others and such, but I'm not able to do efficiently in HTML using jQuery & jQuery-UI.
I'm using draggable() and some tricks I've found on StackOverflow to be able to bring the div AppWindow on top.
The problem
The code for bringing the **AppWindow** on top works fine but the problem is the iframe inside that window gets reset, because what this code is doing is that it stacks the current div as the first div above all the others inside the parent container.
If you notice the AppWindow 1 iframe blinks when you click on that window, I don't want that.
Code (jQuery)
$(function() {
// Don't know what I'm doing with iframe here...
$('.AppWindow iframe').click(function(){
$(this).parent().child.parent().append(this);
});
$('.AppWindow').click(function(){
$(this).parent().append($(this));
});
$('.AppWindow').draggable({handle:".DragHandle"});
});
Conclusion
If there is a way of preventing this from happening feel free to write an answer below. If you have a better way such as "JavaScript OS UI Framework" or something like that you're even more free to write below.I want something like **os.js** or **windows93.net** type of thing. All I need is a working taskbar, working window and a way to easily embed a PHP page inside that window that will mimic the work of the application.
I don't think it's possible. Take a look at here.
But
why do you reorder windows by change their positions in the dom in the first place? You could simply work with z-index. A basic example where you just set an active class of the targeted frame.
$(function() {
$('.AppWindow').draggable({
handle:".DragHandle",
drag: function(event, ui){
updateActiveWindow(event.target);
}
});
$('.AppWindow').on('click', function(){
updateActiveWindow(this);
});
function updateActiveWindow(el) {
$('.AppWindow').removeClass('active');
$(el).addClass('active');
}
});
with following css changes
.AppWindow.ui-draggable-dragging,
.AppWindow.active {
z-index: 1;
}
Edit: optimized the js a bit so that the window turns active once you start dragging.
This question already has answers here:
How to scroll to top of page with JavaScript/jQuery?
(28 answers)
Closed 8 years ago.
SOLVED
add this to the html:
<body onload="location.href='#menu'">
Its the only solution and not a duplicate of the scroll question....pff.
I have edited this question in hopes that the SO community would revisit it. None of the solutions in the supposed duplicate question work or I am using them incorrectly. I posted my code with two of the solutions to show that I am trying. Please help!
Super basic javaScript question I can't find.....I'm learning from trial, mostly error, and StackOverflow.
When I refresh I want to return to the top of the page (F5 or browser reload or any other way the page can be reset). I believe this was the 'old' way browsers worked but when I refresh I stay in the same place on the page. I'm testing in Chrome. Of course I would like this behavior in all browsers.
In this case I am building a single page app. Most mobile users will never use the refresh/reload as it is buried in the hamburger, but I would like to handle this event by going back to the home state. In this case the <div data-role="page" id="menu">.
I am using jquery but I want to make sure and learn javascript.
I thank you all.
code:
document.ready = init;
function init(){
var button = $('#facultyButton')
,facList = $('#facultyList')
,search = $('#facSearch')
,monikerBox = $('.monikerBox')
,events = $('#events')
,ajaxString = "http://stage.webscope.com/veith/dev/ajax.pl?"
,html = "";
//executed on init
console.log('page init');
$('html').scrollTop(0);
//events
$(window).on('load',function(){
$('html, body').scrollTop(0);
});
button.click(function(){
var value = "a";
The window's load event only runs once right after the page is done loading. So this way you can be sure that after the page loads no matter what reason (first view or refresh) it will run.
$(window).on('load', function(){
$('html, body').scrollTop(0);
});
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Handle URL anchor change event in js
How to do awesome refreshless page changes like GitHub
In my app I'm using this very simple code to add a hashtag:
<a href='#test'> <input type='submit'></input>
I would like the page to refresh when I press the back button. For now, it only goes from www.mysite.com/#test to www.mysite.com.
I saw different questions on this topic, but I didn't find how to accomplish that.
Thank you for your help.
A simple way would be to wait for the hash change event to occur and then react to it. Whenever the # changes, the function will be called and if the hash is empty, the page is going to be reloaded.
window.addEventListener('hashchange', function() {
console.log(window.location.hash);
if('' === window.location.hash) {
console.log('reload');
//window.location.reload();
}
});
http://jsfiddle.net/kcKLE/1/
I'd suggest using a library like jQuery for the event-binding stuff, since addEventListener doesn't work in any browser. (Hello IE)
https://developer.mozilla.org/en/docs/DOM/element.addEventListener
If you need something fancier, there is also a history api around.
https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
I just found how to accomplish that. I'm using the onhashchange functionality. Here is my code:
document.body.setAttribute("onhashchange", "update()");
function update() {
if('' === window.location.hash) {
window.location.reload();
}
};
So when I press the back button the hash disappears and the page reloads.
Thank you for the hints everybody.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Best way to detect when user leaves a web page
How can I call a javascript or jQuery function when back button of browser is clicked?
I have seen some solutions but none of them worked for me.
Can anybody show me some example code?
In jQuery try this :
$(window).unload( function ()
{
// put your code here
});
In javascript :
window.onbeforeunload = function () {
// put your code here
}
<body onUnload="yourFunction();>
<!-- ... -->
</body>
You can use history.replaceState() (see browser support) to modify the previous URL you visited to the current page with an added parameter of your choosing like for instance redirect=<URL of previous actual previous page> (you can maybe get this URL from the referer?), then detect the parameter in document ready and perform the required actions.
This is just an untested theory, I might elaborate later on when I get to test it.
I've searched and searched and tried and tried but I can't find an answer to my question - any help greatly appreciated.
I trying to get a Jquery modal popup of any description (I really don't mind which one I use) to launch automatically when called from Java.
I can get the popups to work, get them to work on pageload but I need it to be able to launch from a bit of Java script.
I'll explain...currently I have a from that uses some Java to check any entry as it typed against a database. If the entry is not present, a second form opens on a new page to enable the individual to make an entry.
This all works perfectly the only thing I'd like to change is to have the second form open in a nice popup such as fancybox/colorbox/lytebox etc.
Currently I have this bit of Java
function findValue(li) {
if( li == null ) return window.location = "http://www.gotosecondform.com"
All a want to do is be able to call a nice popup iframe rather than go to the web address.
Could anybody help and explain the best way to do this? - I suspect it's quite simple but I just can't find anything on the net that isn't based on page load and clickable links.
I'm not fussed in regard to which Lightbox spin off I use.
Thanks in advance and all example greatly appreciated.
Chris
I assume by Java you mean Javascript. Java and Javascript is not related. As to your question, is this what you are looking for? I've used jquery UI
http://jqueryui.com/demos/dialog/
First, initialize the modal, but don't open it
$( ".selector" ).dialog({ autoOpen: false }); //add any other options you want
To open it in your method
function findValue(li) {
//if( li == null ) return window.location = "http://www.gotosecondform.com"
$( ".selector" ).dialog("open")
}
That's it!
EDIT - Made it work with an iframe
Well, you could wrap it in an iframe and put it in there if you want.
Your HTML
<div class='selector'>
<iframe src='' id='iframe'></iframe>
</div>
Your new JS
function findValue(li) {
if( li == null ) {
$('#iframe').attr('src, 'http://www.gotosecondform.com');
$( ".selector" ).dialog("open")
}
}
There you go, iframe in a JQUI dialog. Of course, you'll need to style it appropriately. But this should give you the base