Return to Question

I cannot see any image or content. I pressed F12 and no data shows. Any one can tell me what mistake I have been made? I have been looking goggle all day but could not figure it out yet.

I cannot see any image or content. I pressed F12 and no data shows. Any one can tell me what mistake I have been made? I have been looking through the google searches all day but could not figure it out yet.

I have jQury static code that works well.

I am using SPServices jqury to pull information from a list.

I have jQuery static code that works well.

I am using SPServices jQuery to pull information from a list.

<style type="text/css" media="screen">
    #slider1 {
        width: 720px; /* important to be same as image width */
        height: 300px; /* important to be same as image height */
        position: relative; /* important */
        overflow: hidden; /* important */
    }

    #slider1Content {
        width: 720px; /* important to be same as image width or wider */
        position: absolute;
        top: 0;
        margin-left: 0;
    }

    .slider1Image {
        float: left;
        position: relative;
        display: none;
    }

        .slider1Image span {
            position: absolute;
            font: 10px/15px Arial, Helvetica, sans-serif;
            padding: 10px 13px;
            width: 694px;
            background-color: #000;
            filter: alpha(opacity=80);
            -moz-opacity: 0.7;
            -khtml-opacity: 0.7;
            opacity: 0.7;
            color: #fff;
            display: none;
        }

    .clear {
        clear: both;
    }

    .slider1Image span strong {
        font-size: 14px;
    }

    .left {
        top: 0;
        left: 0;
        width: 220px !important;
        height: 280px;
    }

    .right {
        right: 0;
        bottom: 0;
        width: 350px !important;
        height: 284px;
    }

    ul {
        list-style-type: none;
    }
</style>
<!-- include extern jQuery  !-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#slider1').s3Slider({
        timeOut: 5000
    });
});
</script>

<style type="text/css" media="screen">
    #slider1 {
        width: 720px; /* important to be same as image width */
        height: 300px; /* important to be same as image height */
        position: relative; /* important */
        overflow: hidden; /* important */
    }

    #slider1Content {
        width: 720px; /* important to be same as image width or wider */
        position: absolute;
        top: 0;
        margin-left: 0;
    }

    .slider1Image {
        float: left;
        position: relative;
        display: none;
    }

        .slider1Image span {
            position: absolute;
            font: 10px/15px Arial, Helvetica, sans-serif;
            padding: 10px 13px;
            width: 694px;
            background-color: #000;
            filter: alpha(opacity=80);
            -moz-opacity: 0.7;
            -khtml-opacity: 0.7;
            opacity: 0.7;
            color: #fff;
            display: none;
        }

    .clear {
        clear: both;
    }

    .slider1Image span strong {
        font-size: 14px;
    }

    .left {
        top: 0;
        left: 0;
        width: 220px !important;
        height: 280px;
    }

    .right {
        right: 0;
        bottom: 0;
        width: 350px !important;
        height: 284px;
    }

    ul {
        list-style-type: none;
    }
</style>
<!-- include extern jQuery  !-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#slider1').s3Slider({
        timeOut: 5000
    });
});
</script>

I cannot see any image or content. I pressed F12 and no data shows. Any one can tell me what mistake I have been made? I have been looking goggle all day but could not figure it out yet.

Thank you.

Sofiul

<!-- CSS -->
    <style type="text/css" media="screen">
        #slider1 {
            width: 720px; /* important to be same as image width */
            height: 300px; /* important to be same as image height */
            position: relative; /* important */
            overflow: hidden; /* important */
        }

        #slider1Content {
            width: 720px; /* important to be same as image width or wider */
            position: absolute;
            top: 0;
            margin-left: 0;
        }

        .slider1Image {
            float: left;
            position: relative;
            display: none;
        }

            .slider1Image span {
                position: absolute;
                font: 10px/15px Arial, Helvetica, sans-serif;
                padding: 10px 13px;
                width: 694px;
                background-color: #000;
                filter: alpha(opacity=80);
                -moz-opacity: 0.7;
                -khtml-opacity: 0.7;
                opacity: 0.7;
                color: #fff;
                display: none;
            }

        .clear {
            clear: both;
        }

        .slider1Image span strong {
            font-size: 14px;
        }

        .left {
            top: 0;
            left: 0;
            width: 220px !important;
            height: 280px;
        }

        .right {
            right: 0;
            bottom: 0;
            width: 350px !important;
            height: 284px;
        }

        ul {
            list-style-type: none;
        }
    </style>
    <!-- include extern jQuery  !-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="/js/s3Slider.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#slider1').s3Slider({
            timeOut: 5000
        });
    });
    </script>

<table border="0">
<tr>
    <td valign="top">
        <!--  Outer wrapper for presentation only, this can be anything you like -->
        <div id="slider1">
            <ul id="slider1Content">
                <li class="slider1Image">
                    <a href="1.aspx"><img src="6.png" alt="6" />
                    <span class="left"><strong>News A</strong><br /><br />News A description </span></a>
                </li>
                <li class="slider1Image">
                    <a href="2.aspx"><img src="5.png" alt="5" />
                    <span class="left"><strong>News B </strong><br /><br />News A description</span></a>
                </li>
                
                <div class="clear slider1Image"></div>
            </ul>
        </div>                            
<!-- End outer wrapper -->
    </td>
</tr>
</table>

<br />

<!-- CSS -->
    <style type="text/css" media="screen">
        #slider1 {
            width: 720px; /* important to be same as image width */
            height: 300px; /* important to be same as image height */
            position: relative; /* important */
            overflow: hidden; /* important */
        }

        #slider1Content {
            width: 720px; /* important to be same as image width or wider */
            position: absolute;
            top: 0;
            margin-left: 0;
        }

        .slider1Image {
            float: left;
            position: relative;
            display: none;
        }

            .slider1Image span {
                position: absolute;
                font: 10px/15px Arial, Helvetica, sans-serif;
                padding: 10px 13px;
                width: 694px;
                background-color: #000;
                filter: alpha(opacity=80);
                -moz-opacity: 0.7;
                -khtml-opacity: 0.7;
                opacity: 0.7;
                color: #fff;
                display: none;
            }

        .clear {
            clear: both;
        }

        .slider1Image span strong {
            font-size: 14px;
        }

        .left {
            top: 0;
            left: 0;
            width: 220px !important;
            height: 280px;
        }

        .right {
            right: 0;
            bottom: 0;
            width: 350px !important;
            height: 284px;
        }

        ul {
            list-style-type: none;
        }
    </style>
    <!-- include extern jQuery  !-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="/js/s3Slider.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#slider1').s3Slider({
            timeOut: 5000
        });
    });
    </script>

<table id="KTable" border=1 width="90%" align="center">
           <tr>
                <td valign="top">
                    <div id='slider1'>
                        <ul id='slider1Content'>
                        
                        </ul>
                        <div class='clear slider1Image'></div>
                    </div>
                </td>
           </tr>        
    </table> 

<SCRIPT type=text/javascript>
getSliderNewsListData() ;

function getSliderNewsListData()
{                     
        var method = "GetListItems";                 
        var webURL =  $().SPServices.SPGetCurrentSite(); 
        var list = "Pages";                      
        var fieldsToRead = "<ViewFields>"+"<FieldRef Name='Name' />" +"</ViewFields>";
        var query = "<Query><OrderBy><FieldRef Name='Modified'  Ascending='False' /></OrderBy></Query>";                       

        $().SPServices
        ({
                    operation: method,
                    async: false, 
                    webURL: webURL,
                    listName: list,
                    CAMLViewFields: "<ViewFields Properties='True' />",
                    CAMLQuery: query,    
                            CAMLRowLimit: 6,                                                                                 
                    completefunc: function (xData, Status)
                     {
                         $(xData.responseXML).SPFilterNode("z:row").each(function() 
                         {
                              var title = $(this).attr("ows_Title");
                              var byLine = $(this).attr("ows_ArticleByLine");
                              var uRL = $(this).attr("ows_LinkFilename");
                              
                              var liHtml = "<li class='slider1Image'>" +
                                            "<a href='"+webURL+uRL+ "'><img src=/Icon/"+CAMLRowLimit+".png' alt='"+CAMLRowLimit+"' />" +
                                            "<span class='left'><strong>"+title+"</strong><br /><br />"+byLine+"</span></a>" +
                                            "</li>";
                              
                               $("#slider1Content").append(liHtml);
                           });
                   }
       });
       }; 

      </script>

I cannot see any image or content. I pressed F12 and no data shows. Any one can tell me what mistake I have been made? I have been looking goggle all day but could not figure it out yet.