Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    922
    Thanks
    302
    Thanked 3 Times in 3 Posts

    Question Javascript popupbox

    Hello

    I really dont know what is it called but if you go to this site

    Code:
    http://www.shopstyle.com/browse/dresses?feat=53873241
    and click on the BRANDS link on the left, it will pop up a box with textbox inside it.

    Can we do something like that in javascript?

    Please help


    Many thanks
    Attached Thumbnails Attached Thumbnails Javascript popupbox-javascriptbox.jpg  

  • #2
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    This really will depend on what you want to do with the text box when you have it. If you look at the page in question, you will see that it used Ajax to populate the contents of the box. If you have a large number of possibilities to fill the box (depending say on the context of the page), then this is the way to go.

    For simpler pages, with few possibilities, then you can create a number of divs which you fill with whatever text you wish. These are given a class, and by default the class styling would be display: none;. Each div is given an ID, and when a link (such as 'BRAND' in the example) is clicked, the onclick function would set the display to 'block', and the onblur function would restore it to 'none'.

    You can also populate the boxes with text you have generated dynamically, using the div's innerHTML property.

    John

  • Users who have thanked Actinia for this post:

    phantom007 (07-15-2009)

  • #3
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    Check this website it contains lots of stuff like this:
    http://www.dhtmlgoodies.com/index.ht...galleryScripts

    what you are looking for the window component

  • Users who have thanked ckeyrouz for this post:

    phantom007 (07-15-2009)

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,916
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Here’s how to create basic inline popups: http://dhtmlpopups.webarticles.org

    Of course, if you wanna load a new page within that popup using AJAX then you’d also generate that box with JS and not have an empty element hard coded in the HTML as it wouldn’t make any sense for users without JS.

  • Users who have thanked VIPStephan for this post:

    phantom007 (07-15-2009)

  • #5
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    922
    Thanks
    302
    Thanked 3 Times in 3 Posts
    But, how do I make it a modal dialog which would dim out the page content.

  • #6
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    If you need to disable the body I might suggest something that I did not try but you might think of creating a floating div that has the same dimensions of your form and give it a higher z index.

    Give it a gray background and set it as transparent.

  • Users who have thanked ckeyrouz for this post:

    phantom007 (07-15-2009)

  • #7
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    922
    Thanks
    302
    Thanked 3 Times in 3 Posts
    Is there anyway I can float a div in middle of the page, no matter whereever the code for the DIV is placed?

  • #8
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    yes sure you can.
    Give him the right coordinate like z position and y position and give him a z index as the highest .

  • Users who have thanked ckeyrouz for this post:

    phantom007 (07-15-2009)

  • #9
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    922
    Thanks
    302
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by ckeyrouz View Post
    yes sure you can.
    Give him the right coordinate like z position and y position and give him a z index as the highest .
    and how will it know the screen size?

  • #10
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    Check this link it contains lots of information on height and width and dimensions of the screen.

    http://www.howtocreate.co.uk/tutoria.../browserwindow

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,916
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts

  • #12
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Quote Originally Posted by cancer10 View Post
    Is there anyway I can float a div in middle of the page, no matter whereever the code for the DIV is placed?
    here's a modal popup thing I made a while ago.
    http://stirfrydesign.110mb.com/index.htm

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
            <title>LIGHTBOX EXAMPLE</title>
            <style type="text/css">
                    .back{
                            display: none;
                            position: absolute;
                            top: 0%;
                            left: 0%;
                            width: 100%;
                            height: 100%;
                            background-image: url(javascript/CBbg1.gif);
                            z-index:1001;
                            -moz-opacity: 0.99;
                            opacity:.99;
                            filter: alpha(opacity=99);
                    }
    
    .back2{
                            display: none;
                            position: absolute;
                            top: 0%;
                            left: 0%;
                            width: 100%;
                            height: 100%;
                            background-image: url(javascript/CBbg2.gif);
                            z-index:1001;
                            -moz-opacity: 0.99;
                            opacity:.99;
                            filter: alpha(opacity=99);
                    }
                    .box {
                            display: none;
                            position: absolute;
                            top: 25%;
                            left: 25%;
                            width: 50%;
                            height: 50%;
                            padding: 2px;
                            border: 2px solid black;
                            background-color: white;
                            z-index:1002;
                            overflow: auto;
                    }
    
    
    IMG.box {
        display: block;
        margin-left: auto;
        margin-right: auto ;
    margin-top: 5%;
        margin-bottom: 5%;}
    
    
    </style>  <script type="text/javascript">
    
    
    var screenH=screen.availHeight;
    var screenW=screen.availWidth;
    
    var HorizontalPos=screenH;
    
    var yy=0;
    var ypos=0;
    var step=20;
    var opac=1;
    var elm=null;
    
    
    function startit(){
    setTimeout('floaterbegin()',400)
    
            }
    
    function floaterbegin(){yy=0;
    document.getElementById('Box').style.display='block';
    document.getElementById('Box').style.visibility="visible";floater();}
            
    function floater(){
    
    document.getElementById('Box').style.top=screenH*.62;
    document.getElementById('Box').style.left=screenW*.45-(yy/2);
    document.getElementById('Box').style.height=yy*.2;
    document.getElementById('Box').style.width=yy;
    if (yy<HorizontalPos){yy+=step;setTimeout('floater()',1)}
    else{setTimeout('beginGrowHeight()',400)}
    
    }
            function beginGrowHeight(){yy=parseInt(document.getElementById('Box').style.height);ypos=parseInt(document.getElementById('Box').style.top);GrowHeight();}
    
    function GrowHeight(){
    
    
    document.getElementById('Box').style.height=yy;
    document.getElementById('Box').style.top=ypos;
    if (yy<HorizontalPos*.8){yy+=step;ypos-=step;setTimeout('GrowHeight()',1)}
    
    }
    
    function fadeout(){
    //alert(elm)
    opac-=.05
    document.getElementById(elm).style.opacity=opac;
    if (opac>0){setTimeout("fadeout()",1)}
    }
    
    
    
    
    
    
    var i=0;
    var flicker=0;
    function FadeOpen(){
    flicker++;
    flicker%=2;
    
    if (flicker==0){document.getElementById("Back").className='back'}
    if (flicker==1){document.getElementById("Back").className='back2'}
    document.getElementById('Box').style.display='none';
    document.getElementById('Back').style.display='block';
    i+=.1;
    document.getElementById('Box').style.opacity=i;
    document.getElementById('Back').style.opacity=i;
     
    if(i<=.9){setTimeout("FadeOpen()",30)}else{
    document.getElementById('Box').style.opacity=1;
    document.getElementById('Back').style.opacity=1}
    }
    
    
    
    function FadeClosed(){
    i-=.1;
    document.getElementById('Box').style.opacity=i;
    document.getElementById('Back').style.opacity=i;
     
    if(i>=.1){setTimeout("FadeClosed()",30)}else{
    document.getElementById('Box').style.opacity=0;
    document.getElementById('Back').style.opacity=0
    document.getElementById('Box').style.display='none';
    document.getElementById('Back').style.display='none';}
    }
    
    </script>
        </head>
        <body spellcheck="false">
    
            <p><img height="100px" width="100px" alt="stirfrydesign" src="javascript/spotlightLogo.jpg" onclick="javascript:i=0;FadeOpen();startit();" /></p>
            <p>&nbsp;</p>
            <div id="Box" class="box"><img height="100%" width="100%" src="javascript/spotlightLogo.jpg" onclick="javascript:i=1;FadeClosed();opac=1;elm=this.id;fadeout();" alt="stirfrydesign" /></div>
            <div id="Back" class="back">&nbsp;</div>
        </body>
    </html>


  •  

    Posting Permissions

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