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
Related
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.
Is there any way to make the link in this setTimeout alert clickable? I'm just trying to give visitors to my website 5% OFF link after spending 30 seconds on my website but I need the link to be clickable if possible.
<script type = "text/javascript">
setTimeout(function(){alert("Get 5% OFF at: mysite.com/5-OFF ")},30000);
</script>
I don't have to accomplish this by setTimeout but I don't know of any other way. Any help or suggestions much appreciated. Here I seem to always get the best.
Use a UI Widget from one of the many widget libraries for this. Modern websites should not use the javascript alert anywhere , but perhaps for testing(maybe).
Unfortunately you can only display text in the alert function. If you want to put in a URL, you can do it by using jQuery UI's dialog or Twitter Bootstrap's modal window (for example).
EDITED TO INCLUDE ANSWER TO YOUR QUESTION
Something along the lines of:
setTimeout(function() { $( "ELEMENT" ).dialog( "open" ); }, 30000);
I've been looking everywhere for SOME sort of information on if I can do this, and if so, HOW?
I was supposed to make a PowerPoint for an eCommerce assignment, and instead asked to make a webpage since I prefer to write HTML than work with PowerPoint. I was talking to the person beside me and eventually he bet me I couldn't get my site to look and work like a PowerPoint, so I took him up on it. So is there any way possible I can go from one page to the next by pressing, let's say the right arrow? Any help is appreciated!
Use Impress js: http://bartaz.github.io/impress.js/
It is a jquery plugin for powerpoint-like slide presentations (and offers much more)
There are many possibilities to make a website look like a PowerPoint application.
With jQuery (which is my favourite JavaScript library) it's easy to identify key strokes.
$(document).keypress(function(e) {
if(e.which == 39){
//Right arrow key, now trigger an event or a function. Could be for example: loading new data into a div with ajax or sliding your content so that the next screen is shown.
}
});
See this page to identify Char Codes: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
jQuery also offers the animate method (https://api.jquery.com/animate/) that can be used to make smooth animations, slides, and what not. With knowledge in HTML,CSS and jQuery you can quite easily make an application similar to PowerPoint.
Cheers.
This is fairly simple with standard javascript (I.E. no need to download a library).
Assuming that each page has its own URL you should be able to add an "onkeypress" event onto the body that performs actions based on the particular key pressed using event.keyCode.
E.g.
<script>
function navigate( event ) {
if ( event.keyCode == 39 ) {
// right arrow pressed
window.location.href = "the url of your next page";
}
if ( event.keyCode == 37 ) {
// left arrow pressed
window.location.href = "the url of your previous page";
}
}
</script>
<body onkeypress="navigate( event )">
...
There are more elegant solutions, but this should get you started.
Once you have the principle basically working you can find out what the keyCodes are with a console.log( event.keyCode );, or look them up online (there are plenty of reference sites out there)
I am looking at having a alert style box show up when a user tries to leave the page but I what I wanted to do is have a share link in the alert style box
I have read this ticket javascript before leaving the page and now am unsure if this is possible.
I realise this will run
$(window).bind('beforeunload', function(){
alert("hi");
});
Now I know you cannot add links to an alert window so am trying to get round this another way but cant think of how i would display a alert/popup before going to another page that has a link in
Can anyone suggest anything - is there a plugin that might do this?
Its better you not do even if u do a hack as if you find a bug and use it to do it one they they will fix it and you will be again at same point. This is a security risk suppose i want to close a tab and in code you opne new popups or do malicious things???? So browserts dont allow it. If user wants to go they are allowed u can use standard
window.onbeforeunload = function() { return 'You have unsaved changes!'; }
if you like So try this. istead of custom things.
DEMO
You cannot add links to an alert window. What you could do is use a jQuery Plugin like http://jqueryui.com/dialog/#default and call it within beforeunload function.
HTML
<div id="dialog" title="My Link">
My Link
</div>
jQuery
$(window).bind('beforeunload', function(){
$( "#dialog" ).dialog();
});
OR if don't want to use jQuery you could use a window.open
eg: http://www.quirksmode.org/js/popup.html
I have already searched SO for similar questions, and none of the methods worked for me.
I have a shadowbox which opens on the click of an as so:
Open
This works fine and my forms work best with this method (ie I can close my forms easily using
window.parent.Shadowbox.close();
Problem.. I have a page which ajax's in data, and I wanted to load a shadowbox for these "future" elements, I thought of doing this by using the jquery delegate function.
// Open our form manually
$('body').delegate("#video-form-edit", "click", function(e){
e.preventDefault();
var url = $(this).attr('href'); // Our URL
Shadowbox.open({
content: url,
player: "iframe",
height: 400,
width: 510
});
});
// If I want to close ^ this ^ shadowbox, how do i do it?
// window.parent.Shadowbox.close(); // Doesnt work
The problem is that I can't close the form that is opened using the delegate method using the above "externally" loaded shadow box,
Is their a better way of doing this? How do I close a shadowbox loaded using the delegate methods.
EDIT
I keep getting error Cannot call method 'close' of undefined.
EDIT 2
Right well, since no answer, I've found I can use:
parent.window.location = parent.window.location.href;
To redirect to the parent window, Although this is not what Im looking for, it could be a solution for someone.
Duh.. I can't believe no one got it!, 18 Hours later..
I needed to Change the ID to a class
Change $('body').delegate("#video-form-edit", "click", function(e){
To ----->$('body').delegate(".video-form-edit", "click", function(e){
And also in my ahref.
Now everything works as normal in all my shadowbox, for all elements now or future.