Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Senior Member bamme's Avatar
    Join Date
    Aug 2009
    Posts
    319
    Member #
    19662
    Liked
    1 times
    Hi, i was thinking of using either:

    http://orangoo.com/labs/greybox/examples.html -- see the google url example under website gallery, this looks like it handles input into fields correctly as you can search on google
    http://fancybox.net/home - under heading Various Examples it shows how it displays code content
    http://jquery.com/demo/thickbox/ - im unsure of the closest example but iframe content and ajax content examples maybe would be similar

    to display this page:

    http://www.winninghealthsolutions.co...rcms/login.php

    from a link within the main site's footer and have it's corresponding pages function correctly; it's a php booking system using a login feature.

    please can anyone clarify whether i am able to open this via any sort of jquery lightbox and if so which one/how?

    Thanks v much

  2.  

  3. #2
    Member
    Join Date
    May 2011
    Posts
    32
    Member #
    27678
    Liked
    3 times
    Have you considered creating your own "lightbox"? It may be much faster.

  4. #3
    Senior Member bamme's Avatar
    Join Date
    Aug 2009
    Posts
    319
    Member #
    19662
    Liked
    1 times
    to be honest, no - only because my jquery skills arent all that.. im a beginner with it really and have ok experience using plugins but never tried to code jquery from scratch.

  5. #4
    Senior Member bamme's Avatar
    Join Date
    Aug 2009
    Posts
    319
    Member #
    19662
    Liked
    1 times
    saying that, if a lightbox is a beginnerish thing to be able to try out, i could give it a go if there are some good tutorial links

  6. #5
    Member
    Join Date
    May 2011
    Posts
    32
    Member #
    27678
    Liked
    3 times
    I'd link you to my book, if I'd finished it. For right now, how much to you know about JS in particular and programming in general?

  7. #6
    Senior Member bamme's Avatar
    Join Date
    Aug 2009
    Posts
    319
    Member #
    19662
    Liked
    1 times
    Well, not a lot. Im relatively familiar with jquery and it's common plugins, and can pick bits out that i understand if previously written, and modify. but ive never written from scratch.

    my friend said "You can do a pop up quite easily with two lines of javascript...or you can create a div...make it hidden...and use javascript to make it display when you onclick...it saves all the overhead of jquery etc"

    My theme already uses jquery so the overhead of that isnt really an issue. i wondered if theres a similar lightweight way to do the above quoted, with jquery?

  8. #7
    Senior Member bamme's Avatar
    Join Date
    Aug 2009
    Posts
    319
    Member #
    19662
    Liked
    1 times
    right i know this works, with standard javascript:

    Code:
    <script>
        function loginpopup() {
    
                        loginpop=document.getElementById("loginpopup");
                        loginpop.style.display="block";
                                }
    
    </script>
    
    <style>
    #loginpopup{
        border-style:solid;
        border-color:#9999dd;
        display:none;
        height:200px;
        width:200px;
        background-color:#aaaaff;
        position:absolute;
        top:125px;
        left:550px;
        padding:10px;
        }
    </style>
    
    <div id=loginpopup>
    
    <h3>Existing Members - Login and Book</h3>
                  <p>To book sessions and workshops, please login using the form below.</p>
     
                 <form method="POST" action="booking/member_login.php?">
                        Registered email:<input type="text" name="memberemail" id="memberemail" value=""/><br>
    
                        Password:<input type="password" name="memberpass" id="memberpass" value=""/><br>
    
                        <input type="submit" value="Login" name="sendbutton"/>
                </form>
    
            <?
                $message=$_REQUEST['message'];
                echo $message;
            ?>
    
            <br><a href="forgotten.php">Forgotten your password?</a>
     
    </div>
    
    <a href=# onclick="loginpopup()"> MEMBERS LOGIN HERE</a>
    could i write similar in jquery, maybe with a smoother effect for the popup's appearance on click?

  9. #8
    Member
    Join Date
    May 2011
    Posts
    32
    Member #
    27678
    Liked
    3 times
    "could I write something similar ..." Sure. I'll forget you specified use of a particular library. (It's a very good library, don't get me wrong. Resig is really good. You, however, are better-better because it's your site and you know where you're going.)

    "smoother effect". Here's where the fun starts! Fade in? Slide in? Fade in while sliding? Both while changing background color?

    Now, that sounds like a lot of different things, but look closer. Fading is simply changing opacity (a CSS style) over time. Sliding is simply changing top and/or left, over time (two CSS styles). Changing color (CSS background-color - in JS that's style.backgroundColor) again, changing over time.

    There are two complications here, both with easy fixes. Opacity is standard in all browsers except one (guess). Changing colors generally means changing two colors at a time (light blue to white means adding more red and green). I've got code that will solve both issues and I'd be happy to post it here if you tell me what to click to post code in this forum. (Icons without tooltips should be illegal.)

    Now it's your turn. Try writing a routine that changes "style.left" over 200 pixels in two seconds. Write it so that "FPS" (frames per second) is a variable. FPS=2 is good while you're testing. FPS=30 gives a nice smooth move. In pseudo code, it's like this:

    function move_right( number_of_pixs, millis ) {
    var FPS = 2;
    loop, i = first through last frames
    setTimeout( function_to_change_style_dot_left, number_of_millis );
    }
    }

    Use functional programming for the function. In your example, don't write

    <tag id='foo' onclick='do_this()'>

    Write it this way:

    var ref = document.getElementById( 'foo' );
    ref.onclick = do_this; // no parens!

    function do_this() { code here to respond to click; }

    That code assigns a function, do_this, to the onclick property. Onclick, being an event handler, is smart enough to execute the assigned function. (See Crockford's The Good Parts for reasons to assign a function, not a string.) setTimeout() is likewise smart enough to execute the attached function when it times out.

    If you start with FPS=2 you'll have few enough frames so you can stick alert() messages in for debugging. (Guess how I know this?) If you get stuck on something, and there is a something lurking there, let me know. Once you get past that something you are able to animate your pages, no library needed.

    http://www.martinrinehart.com/martins_resume.html

  10. #9
    Senior Member bamme's Avatar
    Join Date
    Aug 2009
    Posts
    319
    Member #
    19662
    Liked
    1 times
    im really sorry but i lost you i think.. here is a guess..
    Code:
    <html>
    
    <head>
    
    <script>
    var ref = document.getElementById( 'foo' );
    ref.onclick = do_this; // no parens!
    
    function do_this() {
    
    var FPS = 2;
    loop, i = first through last frames
    setTimeout( function_to_change_style_dot_left, number_of_millis );
    
    }
    
    
    </script>
    
    </head>
    
    <body>
    
    <tag id='foo' onclick='do_this()'>
    
    </body>
    
    </html>
    this would make the thing with the tag id "foo" move right when it's clicked, using regular js?

    The thing is, really.. all i want to do, is have a popup window open up when a link is clicked, and id like to use jquery really because my theme uses it.

    i v much appreciate your explanation what a top quality tutorial style reply! would be cool to get a heads up on your book, but unfortunately at my very beginner stage i think a lot of the conceptual exemplification there is lost on me; i am at the basic level of what i see is what i understand, and i can't take enough away from thart to get to my solution - im clearly not experienced enough and this has made me a bit more lost haha.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:08 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com