-
Sep 18th, 2017, 08:48 AM
#1
Thread Starter
Hyperactive Member
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!
-
Sep 18th, 2017, 09:32 AM
#2
Re: Sliding images not working in VS 2013
Stripped as "view source"?
What happens if you remove the <header> tag?
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Sep 18th, 2017, 09:59 AM
#3
Thread Starter
Hyperactive Member
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" /> <img src="images/facebook32.png" alt="facebook" /> <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>© 2015 Dima Dayoub | All Rights Reserved</p>
</footer>
<p> </p>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Internet Explorer","requestId":"7d5b90039abb4d6c80804dfae2d894f7"}
</script>
<script type=%2
-
Sep 19th, 2017, 05:59 AM
#4
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
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Sep 19th, 2017, 06:22 AM
#5
Re: Sliding images not working in VS 2013
One big difference is the lack of a BODY tag in the broken code...
-tg
-
Sep 19th, 2017, 09:26 AM
#6
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
-
Sep 19th, 2017, 03:58 PM
#7
Thread Starter
Hyperactive Member
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>© 2015 Dima Dayoub | All Rights Reserved</p>
</footer>
</div>
<p> </p>
</body>
</html>
-
Sep 19th, 2017, 04:01 PM
#8
Thread Starter
Hyperactive Member
Re: Sliding images not working in VS 2013
Thanks, kgc - copied and pasted!
-
Sep 19th, 2017, 04:36 PM
#9
Thread Starter
Hyperactive Member
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" /> <img src="images/facebook32.png" alt="facebook" /> <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.
-
Sep 20th, 2017, 03:03 AM
#10
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|