SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    youtube's ajax advanced search

    Hi,

    I want the youtube's advanced search, which when you click, a new field pop up without refreshing the page. Where can I have it or something similar ?

    To see what i mean exactly please go to www.youtube.com then click on the advanced search.

    I need all the relating codes that make the template work.

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean the pale blue box which appears? I doubt that's using Ajax.

    Just a simple show/hide script I suppose.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    Do you mean the pale blue box which appears? I doubt that's using Ajax.

    Just a simple show/hide script I suppose.
    yeah, how can I do that?

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code html4strict:
    <a id="advanced-search" href="/search">Advanced Search</a>
    <div id="advanced-search-box">
    <!-- All the form controls in here -->
    </div>

    Put this script just above the end body tag (</body>):
    Code javascript:
    <script type="text/javascript">
    var box = document.getElementById('advanced-search-box');
    box.style.display = 'none'; // < Hide on page load
    document.getElementById('advanced-search').onclick = function(){
        box.style.display = (box.style.display==='none') ? '' : 'none';
    }
    </script>
    Last edited by JimmyP; Sep 22, 2008 at 11:34. Reason: Corrected ternary operator syntax...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Jimmy,

    when I click on the link, an Error windows said URL not found. This is the code


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <script type="text/javascript">
    var box = document.getElementById('advanced-search-box');
    box.style.display = 'none'; // < Hide on page load
    document.getElementById('advanced-search').onclick = function(){
        box.style.display = (box.style.display==='none') '' : 'none';
    }
    </script>
    
    <style type="text/css"> 
    #advanced-search-box {width: 400px; height: 200px; background:url(file:///C|/Documents%20and%20Settings/CraigCosmo/Desktop/Onestar-logo-final.png);
    }
    
    </style>
    
    <body>
    <a id="advanced-search" href="/search">Advanced Search</a>
    <div id="advanced-search-box">
    <!-- All the form controls in here -->
    </div>
    </body>
    </html>

  6. #6
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Make sure you "Put this script just above the end body tag (</body>)" (in my post above)

    You've put it in the <head> which is probably why it won't work...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  7. #7
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <style type="text/css">
    
    </style>
    <body>
    <a id="advanced-search" href="/search">Advanced Search</a>
    <div id="advanced-search-box">
    <!-- All the form controls in here -->
    </div>
    <script type="text/javascript">
    var box = document.getElementById('advanced-search-box');
    box.style.display = 'none'; // < Hide on page load
    document.getElementById('advanced-search').onclick = function(){
        box.style.display = (box.style.display==='none') '' : 'none';
    }
    </script>
    </body>
    </html>
    Put above </body> still not works. Have you checked yet ?

  8. #8
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry.... Correct code is now above (#4).
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •