http://www.jujubox.co.uk/blog/index.php http://www.jujubox.co.uk/blog/index.php?entry=entry081028-111927
to start with this you will need to add the css code:



.overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.9;
opacity:.90;
filter: alpha(opacity=90);
}

.lBox_content
{
display: none;
position: absolute;
background-color:#fff;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
border: 1px solid red;
z-index:1008;
overflow: auto;
}


this sets up the styles for the lightbox black page and the white box in the centre of the screen.

now to get it working all you have to do is put in the html code:

this pice of html is the code to enable the style changes on the link clicked event:

<div onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Click</div>


now put in the lightbox divs and the overlay div;


<div id="light" class="lBox_content">
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">CLOSE</a>
</div>
<div id="fade" class="overlay"></div>


The link 'CLOSE' will change the styles back to display:none thus closing the lightbox.

please see this simple demo

enjoy :)



]]> http://www.jujubox.co.uk/blog/index.php?entry=entry081027-155632
a.) send variable data
b.) remotely host content
c.) send text as well as html
d.) authenticate with an smtp server



Firstly we need to set the imports and declare the constants:

'imports
Imports System.Net.Mail
Imports System.Net
Imports System.IO
Imports System

'declare constants
'mail server address
Const mailserver As String = "mail.mailserver.com"
'mail server username
Const username As String = "username"
'mail server password
Const password As String = "password"
'email hmtl file as url
Const webmailfile As String = "http://path.to.html/email.html"
'email text only browsers file as url
Const rtfmailfile As String = "http://path.to.text/email.txt"

now that this is done you will need to create the main email sub routine:


Shared Sub EmailWebPage(ByVal email As String, ByVal name As String)
'create the mail message
Dim mail As New MailMessage()
'set the addresses
mail.From = New MailAddress("fromaddress@mailserver.com")
'monitoring address as bcc
mail.Bcc.Add("monitoring@mailserver.com")
mail.To.Add(email)
'set the content
mail.Subject = "Subject of Email"
'create multipart views from files
Dim htmlView As AlternateView = AlternateView.CreateAlternateViewFromString(ScreenScrapeHtml(webmailfile, name), Nothing, "text/html")
Dim txtView As AlternateView = AlternateView.CreateAlternateViewFromString(ScreenScrapeText(rtfmailfile, name), Nothing, "text/plain")
'mail views¬
mail.AlternateViews.Add(htmlView)
mail.AlternateViews.Add(txtView)
'send the message using user credentials
Dim smtp As New SmtpClient(mailserver)
smtp.Credentials = New NetworkCredential(username, password)
smtp.Send(mail)
End Sub 'emailWebPage


next thing to do is retrieve the html and text files from the urls declared in the constants:


Shared Function ScreenScrapeHtml(ByVal url As String, ByVal name As String) As String
'get webpage from url
Dim objRequest As WebRequest = System.Net.HttpWebRequest.Create(url)
'create stream from webpage
Dim sr As New StreamReader(objRequest.GetResponse().GetResponseStream())
'convert stream to string and replace variables
Dim result As String = sr.ReadToEnd().Replace("@name@", name)
'close stream
sr.Close()
'return webpage as string to html view
Return result
End Function 'ScreenScrapeHtml

Shared Function ScreenScrapeText(ByVal url As String, ByVal name As String) As String
'get textfile from url
Dim objRequest As WebRequest = System.Net.HttpWebRequest.Create(url)
'create stream for text file
Dim sr As New StreamReader(objRequest.GetResponse().GetResponseStream())
'convert stream to string and replace variables
Dim result As String = sr.ReadToEnd().Replace("@name@", name)
'close stream
sr.Close()
'return textfile as string to text view
Return result
End Function 'ScreenScrapeText


note: where you are replacing @name@ in the streams the @name@ must be inserted as a string in the web files otherwise it will not be replaced with a variable name at runtime.

now to run the email you just need to call EmailWebPage(user@mailserver.com, user's name)

hope this makes sense :)





]]> http://www.jujubox.co.uk/blog/index.php?entry=entry081027-103920
see demo hannah's site

on a webpage if you create a div with a width of 200px and a height of 200px and you want 3 pages you create a background image of 600px wide and 200px high.



then add the css code:




.page {width:200px;height:200px;background:url(background.jpg);}


then add the jquery code:

<script type="text/javascript">
$(function(){
$('#link1')
.css( {backgroundPosition: "0 0"} ) .click(function(){ $('#page').stop().animate({backgroundPosition: '(0 0)'}, 1000) })
$('#link2')
.css( {backgroundPosition: "0 0"} ) .click(function(){ $('#page').stop().animate({backgroundPosition:"(-200px 0)"}, 1000)
})
$('#link3')
.css( {backgroundPosition: "0 0"} ) .click(function(){ $('#page').stop().animate({backgroundPosition:"(-400px 0)"}, 1000)
})
});
</script>

See Demo

for this to work you will need the latest version of jQuery and the bgposition plugin

jquery
plugin

enjoy! :)

]]>