Results 1 to 2 of 2

Thread: JQuery Slider + jQuery Popup = Problems

  1. #1
    Join Date
    Jul 2009
    Posts
    17

    JQuery Slider + jQuery Popup = Problems

    Hi there,

    I found a simple jQuery Slider script which makes pictures scrolls one by one inside a small container. I wish to integrate this into another jQuery script which displays things in a CSS popup with everything becoming gray behind it.

    Both scripts work, but when I put the jQuery Slider inside the jQuery popup, the slider doesn't work in the sense that the elements it is supposed to make scroll are invisible. The reason is that their width and height is 0 (I don't know why!).

    DEMO SLIDER ALONE : http://balthy.com/version%20NORMAL.html

    DEMO SLIDER INSIDE POPUP : http://balthy.com/version POPUP.html


    The code of my page is :

    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" /> 
        <script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script> 
        <script src="easySlider1.7.js" type="text/javascript" charset="utf-8"></script> 
        <style type="text/css"> 
            /* jQuery Popup Stuff */ 
            function Show_Popup_tem(action, userid) { 
                $('#popup').fadeIn(10); 
                $('#window_tem').fadeIn(10); 
            } 
            function Close_Popup_tem() { 
                $('#popup').fadeOut(100); 
                $('#window_tem').fadeOut(100); 
            } 
         
            /* easySlider1.7 Stuff */ 
            $(document).ready(function () { 
                $("#slider").easySlider(); 
            }); 
        </style>   
         
        <script language="JavaScript" type="text/javascript"> 
            /* jQuery Popup Stuff */ 
            function Show_Popup_tem(action, userid) { 
                $('#popup').fadeIn(10); 
                $('#window_tem').fadeIn(10); 
            } 
            function Close_Popup_tem() { 
                $('#popup').fadeOut(100); 
                $('#window_tem').fadeOut(100); 
            } 
         
            /* easySlider1.7 Stuff */ 
            $(document).ready(function () { 
                $("#slider").easySlider(); 
            }); 
        </script> 
    </head> 
             
    <body> 
        <div id="popup" style="display: none;"></div> 
        <div id="window_tem" style="display: none;"> 
            <a href="#" onclick="Close_Popup_tem();">close</a> 
            <div id="slider"> 
            <ul> 
                <li>content here...</li> 
                <li>content here...</li> 
                <li>content here...</li> 
            </ul> 
            </div> 
        </div> 
        <a href="#" onClick="Show_Popup_tem();" >Popup    </a> 
    </body> 
    </html>

  2. #2
    Join Date
    Jul 2009
    Posts
    17
    And the code of the Slider JS Script (easyslider.js) is :

    Code:
    (function($) { 
     
            $.fn.easySlider = function(options){ 
               
            // default configuration properties 
            var defaults = {             
                prevId:         'prevBtn', 
                prevText:         'Previous', 
                nextId:         'nextBtn',     
                nextText:         'Next', 
                controlsShow:    true, 
                controlsBefore:    '', 
                controlsAfter:    '',     
                controlsFade:    true, 
                firstId:         'firstBtn', 
                firstText:         'First', 
                firstShow:        false, 
                lastId:         'lastBtn',     
                lastText:         'Last', 
                lastShow:        false,                 
                vertical:        false, 
                speed:             800, 
                auto:            true, 
                pause:            2000, 
                continuous:        false,  
                numeric:         false, 
                numericId:         'controls' 
            };  
             
            var options = $.extend(defaults, options);   
                     
            this.each(function() {   
                var obj = $(this);                  
                var s = $("li", obj).length; 
                var w = $("li", obj).width();  
                var h = $("li", obj).height();  
                var clickable = true; 
                obj.width(w);  
                obj.height(h);  
                obj.css("overflow","hidden"); 
                var ts = s-1; 
                var t = 0; 
                $("ul", obj).css('width',s*w);             
                 
                if(options.continuous){ 
                    $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px")); 
                    $("ul", obj).append($("ul li:nth-child(2)", obj).clone()); 
                    $("ul", obj).css('width',(s+1)*w); 
                };                 
                 
                if(!options.vertical) $("li", obj).css('float','left'); 
                                     
                if(options.controlsShow){ 
                    var html = options.controlsBefore;                 
                    if(options.numeric){ 
                        html += '<ol id="'+ options.numericId +'"></ol>'; 
                    } else { 
                        if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>'; 
                        html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>'; 
                        html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>'; 
                        if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';                 
                    }; 
                     
                    html += options.controlsAfter;                         
                    $(obj).after(html);                                         
                }; 
                 
                if(options.numeric){                                     
                    for(var i=0;i<s;i++){                         
                        $(document.createElement("li")) 
                            .attr('id',options.numericId + (i+1)) 
                            .html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>') 
                            .appendTo($("#"+ options.numericId)) 
                            .click(function(){                             
                                animate($("a",$(this)).attr('rel'),true); 
                            });                                                  
                    };                             
                } else { 
                    $("a","#"+options.nextId).click(function(){         
                        animate("next",true); 
                    }); 
                    $("a","#"+options.prevId).click(function(){         
                        animate("prev",true);                 
                    });     
                    $("a","#"+options.firstId).click(function(){         
                        animate("first",true); 
                    });                 
                    $("a","#"+options.lastId).click(function(){         
                        animate("last",true);                 
                    });                 
                }; 
                 
                function setCurrent(i){ 
                    i = parseInt(i)+1; 
                    $("li", "#" + options.numericId).removeClass("current"); 
                    $("li#" + options.numericId + i).addClass("current"); 
                }; 
                 
                function adjust(){ 
                    if(t>ts) t=0;         
                    if(t<0) t=ts;     
                    if(!options.vertical) { 
                        $("ul",obj).css("margin-left",(t*w*-1)); 
                    } else { 
                        $("ul",obj).css("margin-left",(t*h*-1)); 
                    } 
                    clickable = true; 
                    if(options.numeric) setCurrent(t); 
                }; 
                 
                function animate(dir,clicked){ 
                    if (clickable){ 
                        clickable = false; 
                        var ot = t;                 
                        switch(dir){ 
                            case "next": 
                                t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;                         
                                break;  
                            case "prev": 
                                t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1; 
                                break;  
                            case "first": 
                                t = 0; 
                                break;  
                            case "last": 
                                t = ts; 
                                break;  
                            default: 
                                t = dir; 
                                break;  
                        };     
                        var diff = Math.abs(ot-t); 
                        var speed = diff*options.speed;                         
                        if(!options.vertical) { 
                            p = (t*w*-1); 
                            $("ul",obj).animate( 
                                { marginLeft: p },  
                                { queue:false, duration:speed, complete:adjust } 
                            );                 
                        } else { 
                            p = (t*h*-1); 
                            $("ul",obj).animate( 
                                { marginTop: p },  
                                { queue:false, duration:speed, complete:adjust } 
                            );                     
                        }; 
                         
                        if(!options.continuous && options.controlsFade){                     
                            if(t==ts){ 
                                $("a","#"+options.nextId).hide(); 
                                $("a","#"+options.lastId).hide(); 
                            } else { 
                                $("a","#"+options.nextId).show(); 
                                $("a","#"+options.lastId).show();                     
                            }; 
                            if(t==0){ 
                                $("a","#"+options.prevId).hide(); 
                                $("a","#"+options.firstId).hide(); 
                            } else { 
                                $("a","#"+options.prevId).show(); 
                                $("a","#"+options.firstId).show(); 
                            };                     
                        };                 
                         
                        if(clicked) clearTimeout(timeout); 
                        if(options.auto && dir=="next" && !clicked){; 
                            timeout = setTimeout(function(){ 
                                animate("next",false); 
                            },diff*options.speed+options.pause); 
                        }; 
                 
                    }; 
                     
                }; 
                // init 
                var timeout; 
                if(options.auto){; 
                    timeout = setTimeout(function(){ 
                        animate("next",false); 
                    },options.pause); 
                };         
                 
                if(options.numeric) setCurrent(0); 
             
                if(!options.continuous && options.controlsFade){                     
                    $("a","#"+options.prevId).hide(); 
                    $("a","#"+options.firstId).hide();                 
                };                 
                 
            }); 
               
            }; 
     
            })(jQuery);

Similar Threads

  1. Firefox Display Problems (Reward Offered For Solution)
    By isaac2450 in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 24 Apr 2008, 10:26 AM
  2. posting hidden form data to a popup window
    By simora in forum Client & Server Side Scripting (PHP, ASP, JavaScript)
    Replies: 0
    Last Post: 26 May 2007, 03:47 AM

Posting Permissions

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