Results 1 to 10 of 10

Thread: Sliding images not working in VS 2013

  1. #1

    Thread Starter
    Hyperactive Member
    Join Date
    Jun 2014
    Posts
    469

    Sliding images not working in VS 2013

    Hello

    When I use the following code in an HTML file which links to those CSS files and JS file (style.css does nothing
    here which doesn't matter in this case). the images slide as they are supposed to:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
        <script src="themes/1/js-image-slider.js" type="text/javascript"></script>
        <link href="generic.css" rel="stylesheet" type="text/css" />
        <link href="css/style.css" rel="stylesheet" />
    
    </head>
    
    <body>
        
        <div id="sliderFrame">
            <div id="slider">
    
                <img src="images/image-slider-1.jpg" />    
                <img src="images/image-slider-2.jpg" />
                <img src="images/image-slider-3.jpg" />
                <img src="images/image-slider-4.jpg" />
                <img src="images/image-slider-5.jpg" />
                <img src="images/image-slider-6.jpg" />
                <img src="images/image-slider-7.jpg" />
                <img src="images/image-slider-8.jpg" />
                <img src="images/image-slider-9.jpg" />
                <img src="images/image-slider-10.jpg" />
    
            </div>
           
        </div>
    
       </body>
    </html>
    However, when I use the same (stripped) code as follows in Visual Studio 2013:

    Code:
    <!doctype html>  
    <html lang="en">
    <head runat="server">
    
      <link href="css/style.css" rel="stylesheet" />
      <link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
      <link href="generic.css" rel="stylesheet" type="text/css" />
      <script src="themes/1/js-image-slider.js" type="text/javascript"></script>
    
           </head>
    <body>
    
       <div id="main">
        
    <header>
    .........
           
      </header>
    
        <div id="site_content">
          <div id="sidebar_container">
            
              <div class="gallery">
              
     <div id="sliderFrame">
            <div id="slider">
    
                <img src="images/image-slider-1.jpg" />    
                <img src="images/image-slider-2.jpg" />
                <img src="images/image-slider-3.jpg" />
                <img src="images/image-slider-4.jpg" />
                <img src="images/image-slider-5.jpg" />
                <img src="images/image-slider-6.jpg" />
                <img src="images/image-slider-7.jpg" />
                <img src="images/image-slider-8.jpg" />
                <img src="images/image-slider-9.jpg" />
                <img src="images/image-slider-10.jpg" />
    
                          </div>
           </div>
        </div>
                        
             </div>
    the images do not slide. Between the <header> tags are those menu items above the image:

    https://postimg.org/image/49u7y5fgl/

    What may be causing the images not to slide, please?

    Thanks!

  2. #2
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    Re: Sliding images not working in VS 2013

    Stripped as "view source"?

    What happens if you remove the <header> tag?
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  3. #3

    Thread Starter
    Hyperactive Member
    Join Date
    Jun 2014
    Posts
    469

    Re: Sliding images not working in VS 2013

    Thanks for your reply, sepator

    When I comment out everything between <header> and </header>, the images still do not slide.

    View source (F12) looks like this:

    [CODE]<!doctype html>
    <html lang="en">
    <head><title>
    home
    </title><meta name="description" content="website description" /><meta name="keywords" content="website keywords, website keywords" /><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="css/style.css" rel="stylesheet" /><link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" /><link href="generic.css" rel="stylesheet" type="text/css" />
    <script src="themes/1/js-image-slider.js" type="text/javascript"></script>

    </head>

    <body>

    <!-- date -->

    <span id="LblDate" class="labelStyle">18<sup>th</sup> September 2017</span>

    <!-- end date -->

    <div id="main">
    <header>
    <div id="logo">
    <div id="logo_text">
    <!-- class="logo_colour", allows you to change the colour of the text -->
    <h1><a href="#">Dima <span class="logo_colour">Dayoub</span></a></h1>

    <h2 class="specialh2"><a href="../Account/register.aspx">Register</a> | <a href="../Account/myLogon.aspx">Log-in</a></h2>
    </div>
    <p style="float: right; padding-top: 75px;"><img src="images/twitter32.png" alt="twitter" />&nbsp;<img src="images/facebook32.png" alt="facebook" />&nbsp;<img src="images/Google32.png" alt="google" /></p>
    </div>

    <nav>
    <ul class="sf-menu" id="nav">
    <li class="selected"><a href="index.aspx">Home</a></li>
    <li><a href="portfolio.aspx">Portfolio</a></li>
    <li><a href="blog.aspx">Blog</a></li>
    <li><a href="contact.aspx">Contact</a></li>
    </ul>
    </nav>
    </header>
    <div id="site_content">
    <div id="sidebar_container">

    <div class="gallery">

    <div id="sliderFrame">
    <div id="slider">

    <img src="images/image-slider-1.jpg" />
    <img src="images/image-slider-2.jpg" />
    <img src="images/image-slider-3.jpg" />
    <img src="images/image-slider-4.jpg" />
    <img src="images/image-slider-5.jpg" />
    <img src="images/image-slider-6.jpg" />
    <img src="images/image-slider-7.jpg" />
    <img src="images/image-slider-8.jpg" />
    <img src="images/image-slider-9.jpg" />
    <img src="images/image-slider-10.jpg" />

    </div>
    </div>
    </div>


    </div>


    <div id="content">
    <h1>Welcome to My Site!</h1>
    <p>Text here text here text here, text here text here text here text here text here text here text here text here text here text here text here
    text here text here text here text here text here text here text here text here text here text here text here text here text here text here
    text here text here text here text here text here text here text here text here text here text here text here</p>

    <h3>Photos</h3>
    <p>All the photos on this site are my own all the photos on this site are my own All the photos on this site are my own</p>
    </div>
    </div>

    </div>

    <footer>
    <p><a href="#">home</a> | <a href="portfolio.aspx">portfolio</a> | <a href="blog.aspx">blog</a> | <a href="contact.aspx">contact</a></p>
    <p>&copy; 2015 Dima Dayoub | All Rights Reserved</p>
    </footer>






    <p>&nbsp;</p>


    <!-- Visual Studio Browser Link -->
    <script type="application/json" id="__browserLink_initializationData">
    {"appName":"Internet Explorer","requestId":"7d5b90039abb4d6c80804dfae2d894f7"}
    </script>
    <script type=%2

  4. #4
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    Re: Sliding images not working in VS 2013

    Hi.
    You did not specify which slider you are using but it seems close to the menucool one.

    So the below will work.

    Code:
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
    
    <!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 runat="server">
        <title></title>
        <script src="themes/1/js-image-slider.js" type="text/javascript"></script>
        <link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="sliderFrame">
            <div id="slider">
                <img src="themes/5.jpg" alt="Caption for slide 1" />
                <img src="themes/6.jpg" />
                <a href="http://menucool.com"><img src="themes/vmax.jpg" /></a>
                <img src="themes/7.jpg" />          
            </div>
        </div>
        </form>
    </body>
    </html>
    I suggest that you check your div's . So try the above working sample and then add you div's one by one to see what is causing the problem
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  5. #5
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,532

    Re: Sliding images not working in VS 2013

    One big difference is the lack of a BODY tag in the broken code...

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  6. #6
    Frenzied Member KGComputers's Avatar
    Join Date
    Dec 2005
    Location
    Cebu, PH
    Posts
    2,020

    Re: Sliding images not working in VS 2013

    <link href="css/style.css" rel="stylesheet" />
    <link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
    <link href="generic.css" rel="stylesheet" type="text/css" />
    <script src="themes/1/js-image-slider.js" type="text/javascript"></script>
    I noticed in your stripped code above, the order of referencing the .js and .css files are not of the same order. Try changing the order of accessing those files
    same as the working sample in post #1 such as below:

    Code:
    <link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
    <script src="themes/1/js-image-slider.js" type="text/javascript"></script>
    <link href="generic.css" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="stylesheet" />
    -kgc
    CodeBank: VB.NET & C#.NET | ASP.NET
    Programming: C# | VB.NET
    Blogs: Personal | Programming
    Projects: GitHub | jsFiddle
    ___________________________________________________________________________________

    Rating someone's post is a way of saying Thanks...

  7. #7

    Thread Starter
    Hyperactive Member
    Join Date
    Jun 2014
    Posts
    469

    Re: Sliding images not working in VS 2013

    Sorry, tg, that should be:

    Code:
    <footer>
                <p><a href="#">home</a> | <a href="portfolio.aspx">portfolio</a> | <a href="blog.aspx">blog</a> | <a href="contact.aspx">contact</a></p>
                <p>&copy; 2015 Dima Dayoub | All Rights Reserved</p>
            </footer>
      </div>
      <p>&nbsp;</p>
     
       </body>
    </html>

  8. #8

    Thread Starter
    Hyperactive Member
    Join Date
    Jun 2014
    Posts
    469

    Re: Sliding images not working in VS 2013

    Thanks, kgc - copied and pasted!

  9. #9

    Thread Starter
    Hyperactive Member
    Join Date
    Jun 2014
    Posts
    469

    Re: Sliding images not working in VS 2013

    Hello sapator

    Thanks again.

    If I use the following based on your code whether I use <form> or not:

    Code:
     <%--<form id="form1" runat="server">--%>
    
                      <div id="sliderFrame">
            <div id="slider">
    
    <img src="themes/image-slider-1.jpg" width="450" height="450" alt="Caption for slide 1" />    
     <img src="themes/image-slider-2.jpg" width="450" height="450" alt="Caption for slide 2" />    
     <img src="themes/image-slider-3.jpg" width="450" height="450" alt="Caption for slide 3" />
     <img src="themes/image-slider-4.jpg" width="450" height="450" alt="Caption for slide 4" />
     <img src="themes/image-slider-5.jpg" width="450" height="450" alt="Caption for slide 5" />
     <img src="themes/image-slider-6.jpg" width="450" height="450" alt="Caption for slide 6" />
    
     <a href="http://menucool.com"><img src="themes/vmax.jpg" /></a>
    
     <img src="themes/image-slider-7.jpg" width="450" height="450" alt="Caption for slide 7" />
     <img src="themes/image-slider-8.jpg" width="450" height="450" alt="Caption for slide 8" />
     <img src="themes/image-slider-9.jpg" width="450" height="450" alt="Caption for slide 9" />
     <img src="themes/image-slider-10.jpg" width="450" height="450" alt="Caption for slide 10" />
    
      </div>
        </div>
       <%-- </form>--%>
    I get this:

    Attachment 151943

    I can see that you use <form> immediately after <body>, but I have the following immediately after <body>:

    Code:
    <div id="main">
       <header>
          <div id="logo">
            <div id="logo_text">
             
             <h1><a href="#">Dima <span class="logo_colour">Dayoub</span></a></h1>
    
               <h2 class="specialh2"><a href="../Account/register.aspx">Register</a> | <a href="../Account/myLogon.aspx">Log-in</a></h2>
            </div>
            <p style="float: right; padding-top: 75px;"><img src="images/twitter32.png" alt="twitter" />&nbsp;<img src="images/facebook32.png" alt="facebook" />&nbsp;<img src="images/Google32.png" alt="google" /></p>
          </div>
    
            <nav>
            <ul class="sf-menu" id="nav">
              <li class="selected"><a href="index.aspx">Home</a></li>
              <li><a href="portfolio.aspx">Portfolio</a></li>
              <li><a href="blog.aspx">Blog</a></li>
              <li><a href="contact.aspx">Contact</a></li>
            </ul>
          </nav>
        </header>
        <div id="site_content">
          <div id="sidebar_container">
            
              <div class="gallery">
              
                  <form id="form1" runat="server">
    
                      <div id="sliderFrame">
            <div id="slider">
    ............................
    Do I remove those that I have highlighted in bold?

    Thanks again.

    Steve
    Last edited by SteveHi; Sep 19th, 2017 at 04:40 PM.

  10. #10
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    Re: Sliding images not working in VS 2013

    I can't see the attachment but why are you removing the form?
    Is this not an asp.net application?

    If you run my example on visual studio, doesn't it work OK?
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

Posting Permissions

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



Click Here to Expand Forum to Full Width