SitePoint Sponsor

User Tag List

Results 1 to 1 of 1

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scroll a web content slider

    I have a web content slider and i want it to scroll htm pages that are slided this my code

    Code:
    <html>
     <head>
       <title>SiteShow 1.0</title>
       <meta http-equiv="content-type" content="text/html; charset=windows-1250">
       <style>
        /* Change body background-color to change fade out color. */
        /*body.siteshow { margin:0; padding:0; background-color:#000000;}*/
        #menu
        {
        font-family:Arial;
        font-size:9pt;
        display:none;
        opacity:0.00;
        -mozopacity:0.00;
        filter:alpha(opacity=0);
        position:absolute;
        top:10px;
        left:10px;
        padding:5px;
        background-color:#000000;
        color:#FFFFFF;
        border:3px dotted #999999;
        }
        #menu a { color:#ffffff; }
        #menu a:hover { text-decoration:none; }
        #title { font-size:11pt; font-weight:bold; letter-spacing:2; }
        #slides { font-size:9pt; line-height:16pt; }
        .button { width:60px; font-size:9pt; letter-spacing:1; }
        #bottom {
        border: 1px solid red;
    }
       </style>
       
       <script type="text/javascript">
        var current_idx = 0;
        var slides = new Array();
        var menuwin;
        var show_timer;
        var menu_timer;
        var menu;
        var content;
        var loaded = true;
        // Define your "slides". 3 values for each are:
        // 1. Duration in seconds.
        // 2. Title to be used in menu.
        // 3. Source URL. Can be full URI or a relative URL.
        slides[1] = new Array(15, "Hespress", "http://www.hespress.com");
        slides[2] = new Array(15, "Hihi2", "http://www.hihi2.com");
        slides[3] = new Array(15, "Realitylapse", "http://www.realitylapse.com");
        slides[4] = new Array(15, "kooora", "http://www.kooora.com");
        slides[5] = new Array(60, "EU-MAJOR", "https://na10.salesforce.com/500?fcf=00BA0000004UFjT");
        ScrollRate = 100;
    
    function scrollDiv_init() {
        DivElmnt = document.getElementById('slides');
        ReachedMaxScroll = false;
        
        DivElmnt.scrollTop = 0;
        PreviousScrollTop  = 0;
        
        ScrollInterval = setInterval('scrollDiv()', ScrollRate);
    }
    
    function scrollDiv() {
        
        if (!ReachedMaxScroll) {
            DivElmnt.scrollTop = PreviousScrollTop;
            PreviousScrollTop++;
            
            ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight - DivElmnt.offsetHeight);
        }
        else {
            ReachedMaxScroll = (DivElmnt.scrollTop == 0)?false:true;
            
            DivElmnt.scrollTop = PreviousScrollTop;
            PreviousScrollTop--;
        }
    }
    
    function pauseDiv() {
        clearInterval(ScrollInterval);
    }
    
    function resumeDiv() {
        PreviousScrollTop = DivElmnt.scrollTop;
        ScrollInterval    = setInterval('scrollDiv()', ScrollRate);
    }
        
        
        function MenuInit()
        {
        var html = "";
        for(idx=1; idx<slides.length; idx++) {
        html += '<a href="javascript:Navigate('+idx+')">' +
        slides[idx][1] + "</a><br />\n";
        }
        document.getElementById("slides").innerHTML = html;
    
        menu.style.display = "block";
        }
        function MenuShow()
        {
        clearTimeout(menu_timer);
        opacity('menu', 0, 90, 500);
        menu_timer = setTimeout("MenuHide()", 3500);
        }
        function MenuHide()
        {
        opacity('menu', 90, 0, 500);
        }
        function Pause()
        {
        clearTimeout(show_timer);
        document.getElementById('play').style.display = "block";
        document.getElementById('pause').style.display = "none";
        }
        function Navigate(slide_idx)
        {
        clearTimeout(show_timer);
        if (current_idx == 0) {
        if (!slide_idx) { slide_idx = 1; }
        current_idx = slide_idx;
        content.src = slides[current_idx][2];
        document.getElementById('play').style.display = "none";
        document.getElementById('pause').style.display = "block";
        show_timer = setTimeout("Navigate()", slides[current_idx][0]*1000);
        return;
        }
        if (slide_idx) {
        current_idx = slide_idx;
        content.src = slides[current_idx][2];
        document.getElementById('play').style.display = "block";
        document.getElementById('pause').style.display = "none";
        return;
        }
        loaded = false;
        current_idx++;
        if ( current_idx == slides.length) { current_idx = 1; }
        opacity('content', 100, 0, 500);
        document.getElementById('play').style.display = "none";
        document.getElementById('pause').style.display = "block";
        show_timer = setTimeout("Navigate()", slides[current_idx][0]*1000);
        return;
        }
        function opacity(id, opacStart, opacEnd, millisec)
        {
        //speed for each frame
        var speed = Math.round(millisec / 100);
        var timer = 0;
        //determine the direction for the blending, if start and end are the same nothing happens
        if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
        setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
        timer++;
        }
        if (opacEnd == 0) { setTimeout("FadeOutTrigger('"+id+"')",((timer-1) * speed));; }
        //if (opacEnd == 0) { FadeOutTrigger(id); }
        } else if(opacStart < opacEnd) {
        if (opacStart == 0) { FadeInTrigger(id); }
        for(i = opacStart; i <= opacEnd; i++)
        {
        setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
        timer++;
        }
        }
        }
        //change the opacity for different browsers
        function changeOpac(opacity, id)
        {
        var object = document.getElementById(id).style;
        object.opacity = (opacity / 100);
        object.MozOpacity = (opacity / 100);
        object.KhtmlOpacity = (opacity / 100);
        object.filter = "alpha(opacity=" + opacity + ")";
        }
        function FadeOutTrigger(id)
        {
        //alert('FadeOut: '+id);
        switch(id) {
        case "menu":
        document.getElementById(id).style.display = "none";
        break;
        case "content":
        content.src = slides[current_idx][2];
        //setTimeout("opacity('content', 0, 100, 500)", 1000);
        break;
        case "element":
        var ele = document.getElementById(element); 
        window.scrollTo(ele.offsetLeft,ele.offsetTop);
        default:
        break;
        }
        }
        function FadeInTrigger(id)
        {
        //alert('FadeIn: '+id);
        switch(id) {
        case "menu":
        document.getElementById(id).style.display = "block";
        break;
        case "content":
        //opacity('content', 0, 100, 500);
        break;
        default:
        break;
        }
        }
        function FadeInContent()
        {
        if (!loaded) {
        opacity('content', 0, 100, 500);
        loaded = true;
        }
        }
        function LoadTrigger()
        {
        //self.resizeTo(1366,768);
        menu = document.getElementById('menu');
        content = document.getElementById('content');
        
        Navigate();
        MenuInit();
        MenuShow();
        
        }
        window.onload = LoadTrigger;
    
    
    
    
    
    
    
       </script>
    
     </head>
    
     <body class="siteshow" >
        <iframe id="content" name="content" style="width:100%; height:100%;" frameborder="no" scrolling="auto" src="" onmouseover="MenuShow();" onload="FadeInContent();" ></iframe>
        <div id="menu">
        <div id="title">SiteShow Menu</div>
        <div id="slides" onLoad="scrollDiv_init()" onMouseOver="pauseDiv()" onMouseOut="resumeDiv()">
        </div>
        <p>
        <input id="pause" class="button" style="display:block;" type="button" value="pause" onclick="Pause()" />
        <input id="play" class="button" style="display:none;" type="button" value="play" onclick="Navigate()" />
        </p>
        </div>
        
     </body>
    </html>

    It slides perfectly but it doesn't scroll automaticaly the pages i added a function to do it and it didn't work
    Please if anyone has any idea help me!!
    Last edited by DaveMaxwell; Aug 27, 2013 at 07:46. Reason: added html tags


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
  •