Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

scrollWidth works in IE not in firefox or Opera

Status
Not open for further replies.
CassidyHunt

CassidyHunt

IS-IT--Management
Jan 7, 2004
688
US
I have an image scroller that I want to stop the scrolling when the last picture has been displayed in that direction.

Here is the code.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]

<script runat="server">

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
        Dim di As New System.IO.DirectoryInfo(Server.MapPath("Images/staticpics/"))
        Dim dt As New System.Data.DataTable
               
        dt.Columns.Add("filename")
        
        For Each fi As System.IO.FileInfo In di.GetFiles
            If fi.Extension.ToUpper = ".JPG" Then
                Dim nrow As Data.DataRow = dt.NewRow
                
                nrow("filename") = fi.Name
                
                dt.Rows.Add(nrow)
                
            End If
        Next
        
        rpPictures.DataSource = dt.DefaultView
        rpPictures.DataBind()
    End Sub
</script>

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        #clhPicture_pictures img {
            border: none;
        }
    </style>
    
    <script type="text/javascript">
                    <!--
                        var timer = null;
                        var speed = 5;        // increase to go faster
                        var images = new Array();
                        var startdisplay = 10; // Number to start processing display
                        var endpos = 0;
                        
                        function init() {
                            document.body.parentNode.onmouseup = cancelTimer;
                        }

                        function cancelTimer() {
                            if (timer != null) {
                                clearInterval(timer);
                                timer = null;
                            }
                        }

                        function leftScroll(e) {
                            var scrollDiv = document.getElementById('clhPicture_pictures');
                            var currentPos = parseInt(scrollDiv.style.left, 10);
                            
                            if(scrollDiv.offsetLeft < 0) {
                                scrollDiv.style.left = (currentPos + speed) + 'px';
                                if (timer == null) timer = setInterval('leftScroll()', 30);
                            }
                            
                        }

                        function rightScroll(e) {
                            var scrollDiv = document.getElementById('clhPicture_pictures');
                            var currentPos = parseInt(scrollDiv.style.left, 10);
                            if(scrollDiv.offsetLeft > (0 - (scrollDiv.scrollWidth - scrollDiv.offsetWidth))) {                          
                                scrollDiv.style.left = (currentPos - speed) + 'px';
                                if (timer == null) timer = setInterval('rightScroll()', 30);
                            }
                            
                            
                        }

                        function addImage(filename) {
                           images[images.length] = new image(filename,images.length);
                           
                           if(images.length == startdisplay) {
                                for(var i=0;i < startdisplay; i++) {
                                    document.getElementById('clhPicture_pictures').appendChild(images[i].tImage);                                    
                                }                                                           
                           } else {
                            if(images.length > startdisplay) {
                                document.getElementById('clhPicture_pictures').appendChild(images[images.length - 1].tImage);
                            }
                           }                       
                           
                        }
                        
                        function image(filename,index) {
                            this.Image = new Image();
                            this.Image.src = 'thumbnail.aspx?filename=' + filename + '&height=288';
                            this.tImage = new Image();
                            this.tImage.src = 'thumbnail.aspx?filename=' + filename + '&height=72';
                            this.tImage.onclick = function(){ getPicture(index); };                           
                            
                        }
                        
                        function getPicture(index) {                            
                            document.getElementById("bigPicture").innerHTML = '';
                            document.getElementById("bigPicture").appendChild(images[index].Image);
                        }
                        
                        //window.onload = init;
                    //-->
                    </script>
</head>

<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
    <div>
        <br />
        <table>
            <tr>
                <td colspan="3" align="center"><div id="bigPicture" /></td>
            </tr>
            <tr>
                <td><input type="button" value="<<" onmousedown='leftScroll()' onmouseup="cancelTimer();" /></td>
                <td>                                            
                    <div id="clhPicture_container" style="width:730px; height:72px; overflow:hidden; position:relative; border: solid 1px black;">
                        
                        <div id="clhPicture_pictures" style="height:72px; position:relative; left:0px; white-space: nowrap;">
                            <script type="text/javascript">
                            <asp:Repeater ID="rpPictures" runat="server">
                                <ItemTemplate>
                                    addImage('<%# Eval("filename") %>');
                                </ItemTemplate>
                            </asp:Repeater>
                            </script>                        
                        </div>
                    </div>
                </td>
                <td>
                    <input type="button" value=">>" onmousedown='rightScroll()' onmouseup="cancelTimer();" /> 
                    <input type="button" value="Check" onclick="alert(document.getElementById('clhPicture_pictures').clientWidth);" />                   
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

scrollWidth in IE gives me the width of the div so I know where to stop it. Firefox gives me the width of the div as it is displayed, 730.

Any suggestions? I have tried clientWidth, offsetWidth and just Width. They all give me the 730 number in both browsers. That is how I came to scrollWidth and found it worked in IE and not anywhere else.

Any help would be appreciated.

Cassidy
 
Sort by date Sort by votes
I think my issue is the div within a div. That page says it should work but I still only get 730 across the board. I wonder if I load that div into cache then take it. Probably have the same result.

Thanks

Cassidy
 
Upvote 0 Downvote
I finally got it for both IE 6 and 7, Firefox, and Opera.

Here is what I did:

Code: 
// JScript File

var timer = null;
var speed = 5;        // increase to go faster
var images = new Array();
var startdisplay = 10; // Number to start processing display
var endpos = 0;                        
var loading = 0;
var margin = 10;

function init() {
    document.body.parentNode.onmouseup = cancelTimer;                            
}

function cancelTimer() {
    if (timer != null) {
        clearInterval(timer);
        timer = null;
    }
}

function leftScroll(e) {
    var scrollDiv = document.getElementById('clhPicture_pictures');
    var currentPos = parseInt(scrollDiv.style.left, 10);
    
    if(scrollDiv.offsetLeft < 0) {
        if((0 - (currentPos + speed)) > 0) { scrollDiv.style.left = (currentPos + speed) + 'px'; }
            else { scrollDiv.style.left = '0px'; }
        if (timer == null) timer = setInterval('leftScroll()', 30);
    }
    
}

function rightScroll(e) {
    var scrollDiv = document.getElementById('clhPicture_pictures');
    var currentPos = parseInt(scrollDiv.style.left, 10);                                                   
        if((0 - endpos + 730) < (currentPos - speed)) {
        scrollDiv.style.left = (currentPos - speed) + 'px';
        } else { scrollDiv.style.left = (0 - endpos + 730) + 'px'; }
        if (timer == null) timer = setInterval('rightScroll()', 30);                      
 }

function addImage(filename, caption) {
   images[images.length] = new image(filename,images.length,caption);                                                                             
}

function image(filename,index, caption) {
    this.Image = new Image();
    this.Image.src = 'thumbnail.aspx?filename=' + filename + '&height=288';
    this.Caption = caption;
    this.tImage = new Image();
    this.tImage.src = 'thumbnail.aspx?filename=' + filename + '&height=72';
    this.tImage.onclick = function(){ getPicture(index); };                                                                               
    this.tImage.onload = function() { setWidth(this, index); };  
    this.tImage.onmouseover = function() { this.style.opacity = .5; this.style.filter = 'alpha(opacity=50)'; };
    this.tImage.onmouseout = function() { this.style.opacity = 1; this.style.filter = 'alpha(opacity=100)'; };
    if(index != 0) {
        this.tImage.style.marginLeft = margin + 'px';                                                     
    }
}

function getPicture(index) {                            
    document.getElementById("bigPicture").innerHTML = '';
    document.getElementById("bigPicture").appendChild(images[index].Image);
    document.getElementById("picturecaption").innerHTML = images[index].Caption;                            
}                     


function setWidth(_this, index) {
    endpos = endpos + _this.width + margin;
    document.getElementById("clhPicture_pictures").appendChild(_this); 
    
    if(index == 0) { getPicture(index); }                           
}

window.onload = init;

In order to make it work I had to call a function from the onload event to update the a size variable instead of trying to read scrollWidth.

Cassidy
 
Upvote 0 Downvote
onload event on the image, cool trick [wink]

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
176
gmmastros
gmmastros
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
682
xwb
xwb
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
573
rogerte
rogerte
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
1K
ggriffit
ggriffit
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
386
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top