MyGeekProject

I am going through the rebranding of our corporate website and wanted to stay away from flash as much as possible to make things universal. I was looking for a very easy rotator and found one with a cool Javascript overlay. Here is the original person who I started with and then modified the code.

http://www.lawnydesigns.com/2009/07/how-to-add-jquery-image-slider-to-your.html

Here is my final code which works great as well. I used the same JS files.

HEAD INFORMATION

1
2
3
4
5
6
7
8
9
10
11

<!-- JavaScripts-->
<script type="text/javascript" src="includes/jquery.js"></script>
<script type="text/javascript" src="includes/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#s3slider').s3Slider({
            timeOut: 5000
        });
    });
</script>
</head>

BODY

50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

<!-- begin photo slider -->
<div id="s3slider">
     <ul id="s3sliderContent">
          <li class="s3sliderImage">
               <img src="images/splash-1.jpg" />
               <span class="right"><strong>Right test</strong>
               <br />Consectetuer adipiscing elit.</span>
          </li>
          <li class="s3sliderImage">
               <img src="images/splash-3.jpg" />
               <span class="bottom"><strong>Bottom</strong>
               <br />Consectetuer adipiscing elit.</span>
          </li>
          <li class="s3sliderImage">
               <img src="images/splash-0.jpg" />
               <span class="left"><strong>Left test</strong>
               <br />Consectetuer adipiscing elit.</span>
          </li>
          <li class="s3sliderImage">
               <img src="images/splash-2.jpg" />
               <span class="top"><strong>Top test</strong>
               <br />Consectetuer adipiscing elit.</span>
          </li>
          <div class="clear s3sliderImage"></div>
     </ul>
</div>
<!-- end photo slider -->

Notice that the span left, right, top, bottom – This is how it appears, this is all pretty cool, you have to play with the CSS a bit to make it look perfect. Here is my CSS.

/* slider CSS */
#s3slider { 
   width: 820px; /* important to be same as image width */ 
   height: 350px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}
 
#s3sliderContent {
   width: 820px; /* important to be same as image width or wider */
   height: 350px;
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}
 
.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}
 
.s3sliderImage span {
   position: absolute;
	font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 724px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
	-khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
 
   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image 
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}
 
.s3sliderImage span strong {
    font-size: 14px;
}
 
.clear {
   clear: both;
}
 
.top {
	top: 0;
	left: 0;
}
.bottom {
	bottom: 0;
    left: 0;
    height: 40px;
}
.left {
	top: 0;
    left: 0;
	width: 110px !important;
	height: 330px;
}
.right {
	right: 0;
	bottom: 0;
	width: 130px !important;
	height: 332px;
}

Again, something simple is not always so simple. So we covered how do we get data from the database using Web Services and asynchronous callbacks but what if we needed to pass in like a User ID or something else that we are storing securely in the session?

We would need to pull down that session variable into our client side code so that we could send it back asynchronously in order to return the correct data set.

This is also handy for passing into Flash Vars.

Ok, so all that complicated mess for a one liner I know…

var UserID = ‘<%=Session(“UserID”)%>’;

I can then use that Javascript variable to pass it into an asynch web services call or use it as Flash vars etc.

In my recent post Asynchronous DataBinding with ASP.NET I eluded to the fact of connecting to Sql Server with .NET.  Since sometimes I have spent time looking for the simplest things when working on a project I figured I would take a moment and walk you through setting up Sql Server Connection strings in ASP.NET.

Step 1:  Define your connection string in your web.config file.

1. Open web.config in your web project
2. Locate the following section <appSettings/>
3. REPLACE <appSettings/> with the following

<appSettings>

<add key=”connString” value=”server=YOURSERVER\YOURSQLSERVERINSTANCE;uid=SQLSERVERUSERID;pwd=SQLSERVERPASSWORD;database=DATABASENAME”/>

</appSettings>

Ok, so now you have a setting in your web.config file with the name of “connString” that you can access from anywhere in your application and if it changes you just change it one time and it is a global change.  You can also define multiple database connection strings here so you can reference multiple db’s.

Step 2: Reference the Connection String from your code behind file

1. You need to import the System.Configuration.ConfigurationManager library, do that as follows

VB.NET

Imports System.Configuration.ConfigurationManager
Imports System.Data
Imports System.Data.SqlClient

C#.NET

using System.Configuration.ConfigurationManager;
using System.Data;
using System.Data.SqlClient;

Step 3: Establish as Sql Connection {so we are just going to declare a new SqlConnection that can be used by a DataAdapter, DataReader, etc.}

VB.NET

Dim con as New SqlConnection(AppSettings(“connString”))

C#.NET

SqlConnection con = new SqlConnection(AppSettings(“connString”));

Ok great, now we can use this Sql Connection throughout our application to interact with our sql server.

I will do another post that shows the advantages of connecting through TCP/IP instead of named pipes and the slight differences that we use in order to make that connection string work.