views:

74

answers:

3

I am just starting out learning some HTML and Java coding (read: I know practically nothing about this stuff) and would like to have my index.html page open an HTML file when it loads. Essentially I am looking for a kind of Modal Pop-Up. I have been researching jQuery and its various plugins (i.e., LightBox, prettyPhoto, Boxy, etc.), but haven't been able to find any instructions that I can understand, given my extremely limited knowledge of programming language.

So far I understand that I need to have jQuery.js on my fileserver, as well as the plugin files themselves, but I have no idea what kind of coding I need to add into any preexisting files to activate a specific HTML file in a Modal Dialog box when the page loads. Can anyone help me with this?

Again, the simpler the answer, the better--because I don't know squat.

I humble myself before the programming wizards of our time...

A: 
$(document).load(funtion(){
       $( ".selector" ).dialog({ modal: true });
});
stackunderflow
A: 

Here is a method I like to do, I've re-factored it a bit so it'll open on load by triggering a click. You'll also have to download the fancybox plugin (which is awesome). Then you just add the iframe class to whatever link and it'll load the link the modal window. You can change it to an id if you like, it was originally used on multiple links etc.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" ></script>
    <script type="text/javascript" src="/scripts/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
    <script type="text/javascript" src="/scripts/fancybox/jquery.easing-1.3.pack.js"></script>

<script type="text/javascript">                    
            $(document).ready(function() {

             $(".iframe").fancybox({ 
                'transitionIn'  :   'elastic',
                'transitionOut' :   'elastic',
                'speedIn'   :   600, 
                'speedOut'  :   200, 
                'overlayShow'   :   true,
                'autoScale' :   true,
                'width'     :   '90%',
                'height'    :   '90%',
                'overlayOpacity':   0.8,
                'centerOnScroll':   true,
                'showCloseButton':  true,

                });
                $(".iframe").trigger('click');
            });

</script>

The example:

<!DOCTYPE HTML>
<head>
<title>title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" ></script>
    <script type="text/javascript" src="/scripts/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
    <script type="text/javascript" src="/scripts/fancybox/jquery.easing-1.3.pack.js"></script>

<script type="text/javascript">        

            $(document).ready(function() {
                $(".iframe").fancybox({ 
                'transitionIn'  :   'elastic',
                'transitionOut' :   'elastic',
                'speedIn'   :   600, 
                'speedOut'  :   200, 
                'overlayShow'   :   true,
                'autoScale' :   true,
                'width'     :   '90%',
                'height'    :   '90%',
                'overlayOpacity':   0.8,
                'centerOnScroll':   true,
                'showCloseButton':  true

                });


                $(".iframe").trigger('click');
            });

</script>
<style type="text/css">
    .iframe {display:none;}
</style>
</head>
<html>
     <body>
         <a href="www.google.com" class="iframe">Text</a>
     </body>
</html>

That's an example. From here the only thing that you'll really have to make sure of is uploading the fancybox javascript file to the right folder. Do you have a link for the page so that we can see the page and error check it for you?

Micharch54
This is really helpful but unfortunately I'm gonna need the steps a little more spelled out for me. Where do I put this code? Where do I add the URL I want to have opened in the Modal Dialog? What are the steps? Again, I'm an über-novice. Think "beyond beginner."
Dr.Fishtable
Okay, The <script> tags should always go in the head of the document. So, <head><script blah blah></script> </head> I'll edit this so that you can pretty much copy and paste it into your head. But I'll explain it as best I can. We're using jquery to initialize the fancybox plugin. It's just an extension of jquery which is just a javascript library. The options you see ("width") allow you to change the look and feel of the window.
Micharch54
From there we simply have the $(document).ready function making sure that as soon as the DOM is ready it'll trigger a click on the link with the class="iframe" tag. So for your link it'll be <a href="http://www.google.com" class="iframe">Text</a> That's all the link needs. Now the (".iframe") is what tells it to look for a class in jquery ".name" means class and ("#name") equals id. You'll want to note this since an id will only be recognized once on a page. For more information on this go to http://www.w3schools.org. Whatever link you put in the <a> tag will be what is loaded into the
Micharch54
Frame. I have it set to class, which is fine as long as you don't put multiple links with the same class, I'm not sure what will happen but I suspect it'll flash through several pages really quick... but who knows without testing. One thing to note, you'll need to get the fancybox plugin and make sure the link points to it. If you create a scripts folder on your server and just put the folder in there it'll work. You can find it here http://fancybox.net/ . It's one of the better modal boxes I've found in terms of functionality. As long as the link to the fancybox.js file is correct
Micharch54
this'll work since it's linking to jquery through google (yay for caching). Anyways. I hope that helps.
Micharch54
I've fixed it so that you can copy and paste it in the head of the file and then just put the fancybox in the right folder i.e. a scripts folder in your web root.
Micharch54
This is loading a frame on the left-hand side of the page, but what I am wanting is a pop-up dialog.
Dr.Fishtable
Hey Micharch, the coding you gave me isn't bringing up any kind of modal dialog. Please help!
Dr.Fishtable
Did you get the fancybox plugin from the website? You'll need that. You should also check that your dtd is correct, I recommend just going with <!DOCTYPE HTML> it's html5 but none HTML5 browsers still handle it well without going into quirks mode. An Example)
Micharch54
Stupid button. lol. <!DOCTYPE HTML>
Micharch54
I just edited the main window, this was too hard to continue in comments. But if you can include a link I'll look at your source code
Micharch54
Howdy, so here is a link to the page in question. It appears not to be working. Please excuse the messy code contained within. http://www.acrosports.org/index-test.asp
Dr.Fishtable
Okay I believe it was with my script. You'll notice I moved the function inside the document.ready function as well as added a tad bit of css to hide the link on your page. You appear to have everything working well on your page, all of the files were loading correctly etc. Try making that change and I'll look at it more in a bit and see what could be wrong.
Micharch54
Have a look again. No dialog is coming up, just looks like the regular page. Am I missing something?
Dr.Fishtable
Found the error, .ready(function) { should be .ready(function() {
Micharch54
Oh and one more thing lol something important I forgot to include, the stylesheet
Micharch54
Put this in the head as well, above the scripts <link rel="stylesheet" href="/scripts/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
Micharch54
Yay! It worked! I'd just bump the width option from 90% to 70% for a better look though. It's up to you.
Micharch54
Awesome! Now what if I want to do an image gallery that rotates automatically?
Dr.Fishtable
Same general principle, but you'll do this:/* HTML */<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a><a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a> <a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a> <a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""/></a> /* This will create two galleries */ $("a.grouped_elements").fancybox();
Micharch54
So replace the $(".iframe").fancybox({ 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 600, 'speedOut' : 200, 'overlayShow' : true, 'autoScale' : true, 'width' : '90%', 'height' : '90%', 'overlayOpacity': 0.8, 'centerOnScroll': true, 'showCloseButton': true });
Micharch54
With $("a.grouped_elements").fancybox(); and add the images with the class and group them with the rel="groupname". things in the same group will have the same rel tag property, and anything you want to be included in the gallery will have the class="grouped_elements" property
Micharch54
Dude, that's frigging awesome. Oh, and Happy Monday. There is one last thing I need in relation to this issue: I want to have the images scroll automatically (i.e., switch from one to the next, perhaps after some specified time interval?) Where might I be able to do that?
Dr.Fishtable
Add this:$(document).read(function(){function autoscroll(){ $.fancybox.next}setInterval( "autoscroll()", 10000 );}});This should automatically scroll to the next one ever 10 seconds (I've not tested this but I'd imagine it'll work alright). The other option is to add it as an option onComplete: function(){ setInterval( $.fancybox.next, 10000 );}One or both of those should work...
Micharch54
Awesome! That works great. Is it possible to add a "Pause" button for End Users to temporarily pause the autoscroll interval?
Dr.Fishtable
Yes it's technically possible but we'd have to change some css in the fancybox.css file and add an image and then we could do an onclick function. It's going to require a fairly significant change to the underlying jQuery and everything I'd imagine. I'll look at it but no promises on this one. Sorry.
Micharch54
+1  A: 

You can achive modal window with out jquery. use the following code

function modalWin()
{ if(window.showModalDialog){ window.showModalDialog("xpopupex.htm","name", "dialogWidth:255px;dialogHeight:250px"); } else { window.open('xpopupex.htm','name', 'height=255,width=250,toolbar=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=no ,modal=yes'); } }

Sujith