Develop Reference

Needing Help Tweaking The Ability to Customize Message Body

I've been sitting on this for two weeks and feel really stumped. I'm pretty much an extreme noob who is teaching myself coding so I can create an interactive game with Twine (Sugarcube). Everything in this code is perfect and I've customized it since to my liking BUT I have one glaring issue. Whenever you click on an email, it expands to the same one message body. It doesn't change, no matter which message preview you click.
My request is for anyone that can help me or point me in the direction on how to tweak the "EmailFull" div class (if that's what needs to be tweaked) so that it changes every time you click a different message. I will be forever grateful because I feel like no matter if I create a new div class, rearrange the order, or create a new JS function, it doesn't pan out right.
Here's the full code on CodePen: https://codepen.io/Lance-Jernigan/pen/yJbXOK
HTML:
<div class="EmailsWrapper">
<div class="EmailFull">
<p>My name is Mark Cohan, and I'm the founder and CEO of Appalo. Appalo is one of the best mobile developer companies in Singapore.</p>
<p>We have an app out right now. You can check it out in the appstore. However, I'm looking to take this app to the next level.</p>
<p>I really would be excited to work together. Please do let me know</p>
</div>
<div class="EmailTitle">
<p class="EmailTime">11:12 AM</p>
<h1>Sergey Zolkin</h1>
<h2>New Project Inquiry</h2>
<p class="EmailPreview">Hi Matt! Are you available for...</p>
</div>
</div>
<div class="Email">
<div class="EmailTitle">
<p class="EmailTime">8:13 AM</p>
<h1>Slack</h1>
<h2>Notiications from the team..</h2>
<p class="EmailPreview">Hi Matt, You have a new message...</p>
</div>
</div>
<div class="EmailTitle">
<p class="EmailTime">7:24 AM</p>
<h1>Clark from Invision</h1>
<h2>Weekly digest: How to design...</h2>
<p class="EmailPreview">Plus why product thinking is the...</p>
</div>
CSS:
.EmailsWrapper {
height: 100%;
margin: auto;
position: relative;
background: linear-gradient(to bottom, #313a5a 0%,#424a6b 100%);
}
.EmailFull {
position: absolute;
top: 115px;
background: #f2f2f2;
height: 100%;
padding: 0px 25px;
color: rgba(0, 0, 0, .6);
max-height: 0px;
overflow: hidden;
transition: all .3s;
}
.EmailFull.active {
max-height: 453px;
overflow: scroll;
}
.EmailFull p {
line-height: 1.6em;
}
.Email {
box-sizing: border-box;
border-radius: 3px;
background: rgba(255, 255, 255, .1);
padding: 5px;
width: 100%;
max-width: 90%;
max-height: 100px;
overflow: hidden;
margin: 3px auto;
transition: all .3s;
display: flex;
flex-wrap: wrap;
cursor: pointer;
position: relative;
opacity: 1;
}
.Email.active {
margin-top: -76px;
padding: 10px 0px;
background: #21294a;
color: #fff;
z-index: 15;
max-width: 100%;
cursor: initial;
border-radius: 0px;
}
.Email.deactive {
max-height: 0px;
padding: 0px;
margin: 0px auto;
opacity: 0;
}
JS:
$(function() {
$(".Email").on("click", function() {
$(this).addClass("active")
$(".Email").not(".active").addClass("deactive")
$(".hamburger").addClass("active");
$(".EmailFull").addClass("active");
$(".headerLabel h1").text("MESSAGE");
})
$(".hamburgerWrapper").on("click", function() {
$(".Email.active").removeClass("active")
$(".Email.deactive").removeClass("deactive")
$(".hamburger").removeClass("active");
$(".EmailFull").removeClass("active");
$(".headerLabel h1").text("INBOX");
})
})

You are not setting the content of .EmailFull properly. I slightly modified your javascript code to include this
$(".EmailFull").html($('<div />').html($(".EmailPreview", this).text()));
// Inspired by https://dribbble.com/shots/2810563-Messages-UI-UX-Animation
$(function() {
$(".Email").on("click", function() {
$(this).addClass("active")
$(".Email").not(".active").addClass("deactive")
$(".hamburger").addClass("active");
$(".EmailFull").addClass("active");
$(".EmailFull").html($('<div />').html($(".EmailPreview", this).text()));
$(".headerLabel h1").text("MESSAGE");
})
$(".hamburgerWrapper").on("click", function() {
$(".Email.active").removeClass("active")
$(".Email.deactive").removeClass("deactive")
$(".hamburger").removeClass("active");
$(".EmailFull").removeClass("active");
$(".headerLabel h1").text("INBOX");
})
})
body {
background: #732bde;
padding-top: 50px;
font-family: Helvetica;
}
body * {
box-sizing: border-box;
}
.wrapper {
width: 320px;
height: 568px;
background: #fff;
margin: auto;
position: relative;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 8);
}
.statusBar {
height: 20px;
width: 100%;
background: #21294a;
position: absolute;
top: 0px;
display: flex;
justify-content: space-between;
z-index: 10;
}
.signal {
margin: 5px 5px;
padding: 0px;
display: flex;
width: 50px;
}
.signal > span {
display: inline-block;
border-radius: 5px;
width: 5px;
height: 5px;
border: solid 1px #fff;
margin: 0px 1px;
}
.signal > span.active {
background: #fff;
z-index: 3;
}
.clock p {
color: #fff;
font-weight: 100;
font-size: 10px;
padding: 0px;
margin: 0px;
}
.battery {
margin: 3px 5px;
width: 50px;
}
.battery span {
display: block;
height: 7px;
width: 17px;
border-radius: 1px;
background: #fff;
position: relative;
float: right;
}
.battery span:after {
content: " ";
display: inline-block;
width: 3px;
height: 4px;
background: #fff;
border-radius: 4px;
position: absolute;
right: -2px;
top: 1px;
}
.header {
padding: 5px 15px 15px 15px;
width: 100%;
background: #21294a;
position: absolute;
top: 20px;
display: flex;
justify-content: space-between;
align-items: flex-end;
z-index: 10;
border-bottom: solid 1px #424a63;
}
.header:after {
content: " ";
display: block;
height: 4px;
width: 85%;
background: linear-gradient(to right, #5a6ab8 0%,#4bafcd 100%);
position: absolute;
bottom: -4px;
left: 0px;
right: 0px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, .2);
}
.hamburgerWrapper {
margin: 0px;
padding: 0px;
width: 50px;
}
.hamburger {
width: 13px;
}
.hamburger.active {
cursor: pointer;
}
.hamburger span {
display: block;
margin: 2px auto;
height: 2px;
width: 100%;
background: #467797;
border-radius: 9px;
opacity: 1;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.hamburger.active span:nth-child(1) {
transform: rotate(-45deg) translate(-4px, -2px);
width: 75%;
}
.hamburger.active span:nth-child(3) {
transform: rotate(45deg) translate(-3px, 2px);
width: 75%;
}
.headerLabel h1 {
color: #fff;
font-size: 15px;
font-weight: 100;
line-height: 1em;
padding: 0px;
margin: 0px;
}
.headerMenu {
width: 50px;
text-align: right;
}
.headerMenu h2 {
color: #467797;
font-size: 12px;
font-weight: 600;
line-height: 1em;
padding: 0px;
margin: 0px;
}
.EmailsWrapper {
height: 100%;
margin: auto;
position: relative;
background: linear-gradient(to bottom, #313a5a 0%,#424a6b 100%);
}
.EmailFull {
position: absolute;
top: 115px;
background: #f2f2f2;
height: 100%;
padding: 0px 25px;
color: rgba(0, 0, 0, .6);
max-height: 0px;
overflow: hidden;
transition: all .3s;
}
.EmailFull.active {
max-height: 453px;
overflow: scroll;
}
.EmailFull p {
line-height: 1.6em;
}
.EmailSearch {
width: 90%;
margin: auto;
padding: 65px 0px 20px 0px;
}
.EmailSearch input {
width: 100%;
font-size: 12px;
font-weight: 100;
color: rgba(255, 255, 255, .5);
outline: none;
background: transparent;
border: none;
padding: 15px 0px;
border-bottom: solid 1px rgba(255, 255, 255, .1);
}
.EmailSearch input::-webkit-input-placeholder {
color: rgba(255, 255, 255, .5);
font-weight: 100;
}
.Email {
box-sizing: border-box;
border-radius: 3px;
background: rgba(255, 255, 255, .1);
padding: 5px;
width: 100%;
max-width: 90%;
max-height: 100px;
overflow: hidden;
margin: 3px auto;
transition: all .3s;
display: flex;
flex-wrap: wrap;
cursor: pointer;
position: relative;
opacity: 1;
}
.Email.light {
background: rgba(255, 255, 255, .4);
}
.Email.active {
margin-top: -76px;
padding: 10px 0px;
background: #21294a;
color: #fff;
z-index: 15;
max-width: 100%;
cursor: initial;
border-radius: 0px;
}
.Email.deactive {
max-height: 0px;
padding: 0px;
margin: 0px auto;
opacity: 0;
}
.Email .ImgWrapper {
width: 20%;
display: flex;
justify-content: center;
align-items: center;
}
.Email .img {
width: 40px;
height: 40px;
background: #fff;
border-radius: 100%;
position: relative;
}
.Email .img.notif:before {
content: " ";
display: block;
width: 12px;
height: 12px;
background: #5bc3e4;
border-radius: 100%;
border: 2px solid #868b9d;
position: absolute;
top: -2px;
left: -2px;
opacity: 1;
transition: all .3s;
}
.Email.active .img.notif:before {
opacity: 0;
}
.EmailTitle {
width: 80%;
position: relative;
color: #fff;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.EmailTitle .EmailTime {
position: absolute;
top: 0px;
right: 0px;
font-size: 12px;
font-weight: 100;
margin: 0px;
padding: 5px;
}
.EmailTitle h1 {
margin: 0px;
padding: 0px;
font-size: 15px;
line-height: 1em;
font-weight: 500;
width: 100%;
}
.EmailTitle h2 {
margin: 0px;
padding: 3px 0px;
font-size: 12px;
line-height: 1em;
font-weight: 300;
}
.EmailTitle p.EmailPreview {
margin: 5px 0px;
max-height: 25px;
padding: 0px;
font-size: 12px;
font-weight: 100;
opacity: .8;
overflow: hidden;
transition: all .3s;
}
.Email.active .EmailTitle p.EmailPreview {
max-height: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="statusBar">
<div class="signal">
<span class="active"></span>
<span class="active"></span>
<span class="active"></span>
<span></span>
<span></span>
</div>
<div class="clock">
<p>10:15 AM</p>
</div>
<div class="battery">
<span></span>
</div>
</div>
<div class="header">
<div class="hamburgerWrapper">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="headerLabel">
<h1>INBOX</h1>
</div>
<div class="headerMenu">
<h2>EDIT</h2>
</div>
</div>
<div class="EmailsWrapper">
<div class="EmailFull">
<p>My name is Mark Cohan, and I'm the founder and CEO of Appalo. Appalo is one of the best mobile developer companies in Singapore.</p>
<p>We have an app out right now. You can check it out in the appstore. However, I'm looking to take this app to the next level.</p>
<p>I really would be excited to work together. Please do let me know</p>
</div>
<div class="EmailSearch">
<input type="text" placeholder="Search Messages" />
</div>
<div class="Email light">
<div class="ImgWrapper">
<div class="img notif">
</div>
</div>
<div class="EmailTitle">
<p class="EmailTime">11:12 AM</p>
<h1>Sergey Zolkin</h1>
<h2>New Project Inquiry</h2>
<p class="EmailPreview">Hi Matt! Are you available for...</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<div class="img">
</div>
</div>
<div class="EmailTitle">
<p class="EmailTime">8:13 AM</p>
<h1>Slack</h1>
<h2>Notiications from the team..</h2>
<p class="EmailPreview">Hi Matt, You have a new message...</p>
</div>
</div>
<div class="Email light">
<div class="ImgWrapper">
<div class="img notif">
</div>
</div>
<div class="EmailTitle">
<p class="EmailTime">7:24 AM</p>
<h1>Clark from Invision</h1>
<h2>Weekly digest: How to design...</h2>
<p class="EmailPreview">Plus why product thinking is the...</p>
</div>
</div>
</div>
</div>

Since we do not know, where your content data (email body text) is comming from and in which element(s) it will be stored, you can basically change the html of your EmailFull class every time an email is clicked.
$(".EmailFull").html('<p>Some other mail text here.<p>');

two circles should follow the cursor – one small and one big (with delay)

I have seen this tendency on some websites now, where the default cursor is replaced with a new cursor – in many cases circles
These cursors are interactive – with interactive i mean when hovering an a-tag it changes size and color.
On this website: https://en.leviev-group.com/ you can see the effect on the cursor that I want.
I have tried to make a Pen, but it isn't working properly: https://codepen.io/anon/pen/VQwdBv?q=cursor&limit=all&type=type-pens
<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>
I would like the circle in the middle to be the cursor and the big circle around to follow the cursor with delay.
When hovering a-tags it should wrap around the a-tag, similar to the example on the website. If possible made with javascript and css
How is this possible?

You are almost good, simply make both element behave the same and by adding the transition on the small one you will make it slower and create the follow effect.
$('body').mouseover(function() {
$(this).css({
cursor: 'none'
});
});
$(document).on('mousemove', function(e) {
$('#circle-big').css({
left: e.pageX,
top: e.pageY
});
$('#circle').css({
left: e.pageX,
top: e.pageY
});
});
#circle-big {
display: block;
position: absolute;
margin-top: -30px;
margin-left: -30px;
width: 60px;
height: 60px;
z-index: -1;
text-align: center;
border: 2px solid red;
border-radius: 50%;
}
#circle {
display: block;
position: absolute;
margin: auto;
transition: all 1s linear;
width: 15px;
height: 15px;
margin-top: -7.5px;
margin-left: -7.5px;
z-index: -1;
background-color: rgba(255, 0, 0, 0.5);
border-radius: 50%;
box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}
a {
font-size: 26px;
text-align: center;
margin: 100px auto;
display: block;
}
a:hover {
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>
<a>link</a>
Or change the transition if you want the bigger one to follow the small one:
$('body').mouseover(function() {
$(this).css({
cursor: 'none'
});
});
$(document).on('mousemove', function(e) {
$('#circle-big').css({
left: e.pageX,
top: e.pageY
});
$('#circle').css({
left: e.pageX,
top: e.pageY
});
});
#circle-big {
display: block;
position: absolute;
margin-top: -30px;
margin-left: -30px;
transition: all 1s linear;
width: 60px;
height: 60px;
z-index: -1;
text-align: center;
border: 2px solid red;
border-radius: 50%;
}
#circle {
display: block;
position: absolute;
margin: auto;
width: 15px;
height: 15px;
margin-top: -7.5px;
margin-left: -7.5px;
z-index: -1;
background-color: rgba(255, 0, 0, 0.5);
border-radius: 50%;
box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}
a {
font-size: 26px;
text-align: center;
margin: 100px auto;
display: block;
}
a:hover {
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>
<a>link</a>
UPDATE
You may consider event on links tag if you want to change the cursor when hovering links.
Here is a simple example:
$('body').mouseover(function() {
$(this).css({
cursor: 'none'
});
});
$(document).on('mousemove', function(e) {
$('#circle-big').css({
left: e.pageX,
top: e.pageY
});
$('#circle').css({
left: e.pageX,
top: e.pageY
});
});
$('a').mouseover(function() {
$('#cursor').addClass('on-link');
})
$('a').mouseout(function() {
$('#cursor').removeClass('on-link');
})
#circle-big {
display: block;
position: absolute;
margin-top: -30px;
margin-left: -30px;
transition: all 1s linear;
width: 60px;
height: 60px;
z-index: -1;
text-align: center;
border: 2px solid red;
border-radius: 50%;
}
#circle {
display: block;
position: absolute;
margin: auto;
width: 15px;
height: 15px;
margin-top: -7.5px;
margin-left: -7.5px;
background-color: rgba(255, 0, 0, 0.5);
border-radius: 50%;
z-index: -1;
box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}
#cursor.on-link #circle-big {
border: 2px solid blue;
}
a {
font-size: 26px;
text-align: center;
margin: 100px auto;
display: block;
}
a:hover {
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>
<a>link</a>

Meteor Interaction with JQuery or Animation in General

So basically, I'm building an app in Meteor, and I have the left navbar in a position: fixed; and left : -300px and want to slide it over to left : 300px, but have no idea about how to animate a transition in Meteor (somewhat the slide transition in jquery). I understand the basic JQuery aspect of thing, but for some reason, it doesnt seem to work when I put it under the if Meteor.isClient aspect of the script. Keep in mind, Im am fairly new to Meteor, inclusive javascript code would be much appreciated.
My current code is as follows.
HTML
<body>
<div class='topmenu'>
<div class='menubutton'>
<span class="icon-bar1"></span>
<span class="icon-bar2"></span>
<span class="icon-bar3"></span>
<!--Needs to be fixed so that we only need to use one icon-bar class!!!-->
</div>
<div class='BanditDiv'>
<h1 class='BanditName'>Bandit</h1>
</div>
</div>
<div class='leftnav'>
<div class='sitenav'>
<a class='internalnav' href="#">Home</a>
<a class='internalnav' href="#">Musicians</a>
<a class='internalnav' href="#">Recording Space</a>
</div>
</div>
<div class='main'>
</div>
</body>
CSS
body{
margin: 0px 0px 0px 0px;
}
.navitem:hover{
background-color: #000066;
}
.main{
background-color: rgb(128,128,128);
height: 200vh;
width: 100vw;
margin: 0px 0px 0px 0px;
overflow-x:hidden;
}
.topmenu{
position: fixed;
z-index: 10;
top: 0px;
width: 100vw;
height: 50px;
background: white;
border-bottom: 2px lightgray solid;
}
.BanditDiv{
position: fixed;
top: 0px;
height: 50px;
width: 30vw;
margin-left: 35vw;
float: center;
}
.BanditName{
text-align: center;
font: 400 25px/1.3 'Berkshire Swash', Helvetica, sans-serif;
color: #000066;
}
.menubutton{
position: fixed;
top: 5px;
left: 5px;
height: 40px;
width: 40px;
border: 1px #cccccc solid;
background-color: white;
border-radius: 5px;
}
.menubutton:focus{
outline: 0;
}
.icon-bar1 {
position: fixed;
top: 15px;
left: 10px;
margin: 0px 0px 0px 0px;
display: block;
width: 30px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.icon-bar2 {
position: fixed;
top: 25px;
left: 10px;
margin: 0px 0px 0px 0px;
display: block;
width: 30px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.icon-bar3 {
position: fixed;
top: 35px;
left: 10px;
margin: 0px 0px 0px 0px;
display: block;
width: 30px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.leftnav{
position: fixed;
top: 0px;
left: -300px;
width: 300px;
height: 100vh;
z-index: 9001;
background-color: yellow;
}

So this is what I came up with for the solution that seemed to work.
I created an angular module inside the Meteor.isClient and that seemed to work well.
if (Meteor.isClient) {
angular.module('sidebar',['angular-meteor']);
angular.module('sidebar').controller('SidebarCtrl', ['$scope',
function ($scope) {
function Menu (callback){
$('.menubutton').on('click', function (){
$('.leftnav').css({"box-shadow" : "2px 2px 2px #888888"});
$('.leftnav').animate({left : "0px"}, 500, function(){
$('.main').click(function() {
$('.leftnav').animate({left: "-302px"}, 500);
$('.leftnav').css({"box-shadow" : "none"});
});
$('.leftnav').click(function(event){
event.stopPropagation();
});
});
});
}
Menu();
}]);
}

Issue with div floating on top of carousel

I'm using jCarousel and there's a weird bug on my page and I can't figure it out! Essentially, I'm trying to overlay a <div> on top of my carousel.
When I place the <div> on top, this weird gap pops up on top of the carousel! I don't know where it's coming from. Is it in the JavaScript?
The black box, I can format later. Just need to know why the white space is appearing.
JsFiddle from the bug
HTML
<div class="carousel-wrapper">
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li>
<img src="http://placekitten.com/850/500" width="850" height="500" alt="">
</li>
<li>
<img src="http://placekitten.com/850/500" width="850" height="500" alt="">
</li>
<li>
<img src="http://placekitten.com/850/500" width="850" height="500" alt="">
</li>
</ul>
</div>
‹
›
<p class="jcarousel-pagination"></p>
</div>
</div>
CSS
#login-carousel-wrapper {
width: 850px;
height: 500px;
margin: 0px auto;
}
#login-carousel-area {
background-color: #000;
z-index: 999;
width: 200px;
height: 200px;
position: relative;
top: 200px;
left: 100px;
}
#body-wrapper {
width: 970px;
height: 100%;
margin: 0px auto;
text-align: top;
}
.carousel-wrapper {
max-width: 850px;
/*padding: 0 20px 40px 20px;*/
margin: auto;
}
.jcarousel-wrapper {
margin: 20px auto;
position: relative;
border: 10px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.jcarousel-wrapper .photo-credits {
position: absolute;
right: 15px;
bottom: 0;
font-size: 13px;
color: #fff;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
opacity: .66;
}
.jcarousel-wrapper .photo-credits a {
color: #fff;
}
/** Carousel **/
.jcarousel {
position: relative;
overflow: hidden;
width: 850px;
height: 500px;
}
.jcarousel ul {
width: 20000em;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.jcarousel li {
float: left;
}
/** Carousel Controls **/
.jcarousel-control-prev, .jcarousel-control-next {
position: absolute;
top: 200px;
width: 30px;
height: 30px;
text-align: center;
background: #4E443C;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 24px/27px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.jcarousel-control-prev {
left: -50px;
}
.jcarousel-control-next {
right: -50px;
}
.jcarousel-control-prev:hover span, .jcarousel-control-next:hover span {
display: block;
}
.jcarousel-control-prev.inactive, .jcarousel-control-next.inactive {
opacity: .5;
cursor: default;
}
/** Carousel Pagination **/
.jcarousel-pagination {
position: absolute;
bottom: 0;
left: 15px;
}
.jcarousel-pagination a {
text-decoration: none;
display: inline-block;
font-size: 11px;
line-height: 14px;
min-width: 14px;
background: #fff;
color: #4E443C;
border-radius: 14px;
padding: 3px;
text-align: center;
margin-right: 2px;
opacity: .75;
}
.jcarousel-pagination a.active {
background: #4E443C;
color: #fff;
opacity: 1;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}

Live Demo
If you are talking about the 20px white line in the top, that comes from .jcarousel-wrapper's margin: 20px auto;.
Just change 20px to 0px or add a new line overwriting margin-top if you want to keep the bottom margin:
.jcarousel-wrapper {
margin: 20px auto;
margin-top: 0px;
}

Jquery Image Slider not behaving

I liked the look of this image slider:
http://coolcarousels.frebsite.nl/c/58/coolcarousel.html
and wanted to implement it. I copied and pasted the javascript, css, and html.
Here's the site: http://violetoeuvre.com/slider.html
html:
<script>
$(function() {
$('#carousel').carouFredSel({
width: 800,
items: 3,
scroll: 1,
auto: {
duration: 1250,
timeoutDuration: 2500
},
prev: '#prev',
next: '#next',
pagination: '#pager'
});
});
</script>
</div>
<div>
<div id="wrapper">
<div id="carousel">
<img src="img_slider/1.jpg" />
<img src="img_slider/2.jpg" />
<img src="img_slider/3.jpg" />
<img src="img_slider/4.jpg" />
<img src="img_slider/5.jpg" />
<img src="img_slider/6.jpg" />
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
<div id="pager"></div>
</div>
</div>
CSS:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #ff00ff;
min-height: 700px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 100px;
width: 800px;
height: 127px;
padding: 10px;
margin: -75px 0 0 -410px;
position: absolute;
left: 50%;
top: 50%;
}
.caroufredsel_wrapper {
border-radius: 90px;
}
#carousel img {
width: 201px;
height: 127px;
margin: 0 5px;
float: left;
}
#prev, #next {
background: transparent url( img/carousel_control.png ) no-repeat 0 0;
text-indent: -999px;
display: block;
overflow: hidden;
width: 15px;
height: 21px;
position: absolute;
top: 65px;
}
#prev {
background-position: 0 0;
left: 30px;
}
#prev:hover {
left: 29px;
}
#next {
background-position: -18px 0;
right: 30px;
}
#next:hover {
right: 29px;
}
#pager {
text-align: center;
margin: 0 auto;
padding-top: 20px;
}
#pager a {
background: transparent url(img/arrow1.png) no-repeat -2px -32px;
text-decoration: none;
text-indent: -999px;
display: inline-block;
overflow: hidden;
width: 8px;
height: 8px;
margin: 0 5px 0 0;
}
#pager a.selected {
background: transparent url(img/arrow2.png) no-repeat -12px -32px;
text-decoration: underline;
}
I downloaded the javascript zip file, and I'm sure that's what's missing in the code to make everything behave properly. I'm new to this, and I just don't know where to fit that part in. In the script? In another referenced file? (Tried these).
Thanks in advance.
Claire

You can try to include jQuery Library as well :
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
include before the slider script, you can add in the header in your case

Slap me if I am wrong but I dont see any jQuery on your page :3