Ok so when the user types in 'snow shark' into the textbox 'movie' and presses search, the poster should pop up. It won't in the div that I put the img in. Why is this?
Code:
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="movie" style="width: 400px; height: 20px; font-size: 120%; font-family: Verdana">
<div id="search" style="text-align: center; width: 100px; height: 25px; position: absolute; left: 450px; top: 8.5px; cursor: pointer; background-color: #3366FF; color: white"> Search </div>
<p id="donthavemovie"></p>
<div id="movie_poster_div" style="width: 200px; height: 300px; position: absolute; top: 300px; left: 20px; background-color: red"> <img id="movie_poster" style="max-width: 100%; max-height: 100%" src=""> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#movie_poster_div').hide();
})
$('#search').click(function() {
$snowshark = $('#movie_poster').attr('src','http://ecx.images-amazon.com/images/I/81lqmCozYwL._SL1500_.jpg');
if($('#movie').val() == 'snow shark') {
$snowshark.fadeIn('slow');
}
})
</script>
</body>
</html>
I can't get what you mean by 'pop up', the following code can display img correctly:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="movie" style="width: 400px; height: 20px; font-size: 120%; font-family: Verdana">
<div id="search" style="text-align: center; width: 100px; height: 25px; position: absolute; left: 450px; top: 8.5px; cursor: pointer; background-color: #3366FF; color: white"> Search </div>
<p id="donthavemovie"></p>
<div id="movie_poster_div" style="width: 200px; height: 300px; position: absolute; top: 300px; left: 20px; background-color: red"> <img id="movie_poster" style="max-width: 100%; max-height: 100%" src=""> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#movie_poster_div').hide();
})
$('#search').click(function() {
$('#movie_poster').attr('src', 'http://ecx.images-amazon.com/images/I/81lqmCozYwL._SL1500_.jpg');
if($('#movie').val() == 'snow shark') {
$('#movie_poster_div').fadeIn('slow');
}
})
</script>
</body>
</html>
Related
I am trying to make a project and I want button to create a div when it is clicked.But on my second click; system creates the div on top of another.
#Car-adder-div{
width: 250px;
height: 300px;
border: 2px solid #d3d3d3;
position: absolute;
left: 10px;
}
#Car-name-text{
font-family: sans-serif;
font-size: 18px;
position: absolute;
left: 98px;
}
#Car-name{
position: absolute;
top: 40px;
left: 40px;
border-radius: 15px;
border: 2px solid lightgray;
}
#Car-price-text{
font-family: sans-serif;
font-size: 18px;
position: absolute;
left: 98px;
top: 90px;
}
#Car-price{
position: absolute;
top: 130px;
left: 40px;
border-radius: 15px;
border: 2px solid lightgray;
}
#Submit-button{
background-color: black;
color: white;
border-radius: 15px;
width: 100px;
font-family: sans-serif;
position: absolute;
top: 180px;
left: 70px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='Auto_gallery_page.css'>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<div id="Car-adder-div">
<!--Name input-->
<h1 id="Car-name-text">Name</h1>
<input id="Car-name" type="text">
<!--Car price input-->
<h1 id="Car-price-text">Price</h1>
<input id="Car-price" type="text">
<!--Submit button-->
<input id="Submit-button" type="button" onclick="Addcar();" value="Add a car">
</div>
<script>
function Addcar(){
var car_name=$("#Car-name").val();
var car_price=$("#Car-price").val();
var car_div=document.createElement("div");
car_div.style.position="absolute";
car_div.style.width="320px";
car_div.style.height="80px";
car_div.style.left="300px";
car_div.style.top="20px";
car_div.style.top+=car_div.style.top;
car_div.style.border="2px solid #d3d3d3";
document.body.appendChild(car_div);
}
</script>
</body>
</html>
You are absolute positioning the new divs with the exact same absolute co-ordinates for each of them. Use relative positioning instead for the created divs, and instead of setting the width/height via the style attribute, set a class on the new divs and apply styles via a stylesheet.
I fetched an html file using fetch api and took the div components and embedded them into another html file. The css is not being applied after the process is complete. Nor is the javascript file being called. I checked the file paths and they are correct. Does the css and javascript tags not transfer over when they are fetched using the fetch api?
***Main script.js***
let testSide = document.querySelector('#test-sidebar')
let htmlUrl = './TextBox/index.html'
fetch(htmlUrl)
.then((result)=>{
return result.text()
}).then((html)=>{
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html')
var doDo = doc.querySelector('.parent-container')
testSide.appendChild(doDo)
}).catch((error)=>{
console.log(error)
})
***Main HTML File***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>To Do</title>
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="test-sidebar">
</div>
<script src="script.js"></script>
</body>
</html>
***Second Html File***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Notbox</title>
<link rel="stylesheet" href="style.css">
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="parent-container">
<!---Select items------>
<div class="container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<ul class="list" id="list">
</ul>
</div>
<button type="button" class="create-text-box">Create Text Box</button>
</div>
</div>
<!--Display notebox-->
<div class="notebox-container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<textarea class="list" id="noteList" ></textarea>
</div>
<button type="button" class="copy-text">Copy Text</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
***CSS of second html file***
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
position: relative;
width: 100%;
height: 100vh;
font-family: 'Titillium Web', sans-serif;
}
/*------------------------container-----------------------*/
.parent-container{
position: relative;
width: 100%;
height: 540px;
max-height: 5400px;
}
/*------------------------container-----------------------*/
.container{
position: absolute;
top: 0;
left: 10px;
width: 400px;
margin: 0 auto;
box-shadow: 5px 5px 8px rgb(171, 178, 185);
border-radius: 15px 15px 0 0;
}
/*--------------------------header-----------------------*/
.header{
position: relative;
width: 100%;
height: 150px;
background-color: #2E86C1;
border-radius: 15px 15px 0 0;
}
/*---------------------------content------------------------*/
.content{
position: relative;
width: 100%;
height: 390px;
max-height: 390px;
background-color: #EAEDED;
overflow: hidden;
}
.content::-webkit-scrollbar{
display: none;
}
.content ul{
padding: 0;
margin: 0;
}
.items-content{
position: relative;
width: 100%;
height: calc(100% - 35px);
max-height: calc(100% - 35px);
overflow: auto;
border-bottom: 1px solid #D6DBDF;
}
.item{
position: relative;
border-bottom: 1px solid #EBEDEF;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 45px;
min-height: 45px;
background-color: white;
display: flex;
align-items: center;
cursor: pointer
}
.item:hover{
background-color: #EAECEE
}
.item p{
position: absolute;
padding-left: 35px;
height: 45px;
line-height: 45px;
width: 100%;
white-space: nowrap;
}
/*--------------------------Create Text Box--------------------------*/
.create-text-box{
position: absolute;
border: none;
outline: none;
width: 100%;
height: 35px;
bottom: 0;
left: 0;
background-color: #21618C;
color: white;
cursor: pointer
}
/*For note box*/
/*------------------------notbox container-----------------------*/
.notebox-container{
position: absolute;
top: 0;
right: 10px;
width: 400px;
margin: 0 auto;
box-shadow: 5px 5px 8px rgb(171, 178, 185);
border-radius: 15px 15px 0 0;
}
/*--------------------------header-----------------------*/
.notebox-container .header{
position: relative;
width: 100%;
height: 150px;
background-color: #2E86C1;
border-radius: 15px 15px 0 0;
}
/*---------------------------content------------------------*/
.notebox-container .content{
position: relative;
width: 100%;
height: 390px;
max-height: 390px;
background-color: #EAEDED;
overflow: hidden;
}
#noteList
{
resize: none;
font-size: 15px;
font: serif;
color: #28B463;
text-align: center;
/*font-weight: bold;*/
border: none;
height: calc(100% - 35px);
width: 100%;
}
.notebox-container .content::-webkit-scrollbar{
display: none;
}
.notebox-container .content ul{
padding: 0;
margin: 0;
}
.notebox-container .items-content{
position: relative;
width: 100%;
height: calc(100% - 35px);
max-height: calc(100% - 35px);
overflow: auto;
border-bottom: 1px solid white;
}
.notebox-container .item{
position: relative;
border-bottom: 1px solid white;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 45px;
min-height: 45px;
background-color: white;
display: flex;
align-items: center;
}
.notebox-container .item p{
position: absolute;
padding-left: 35px;
height: 45px;
line-height: 45px;
width: 100%;
white-space: nowrap;
text-align: center;
}
/*--------------------------Create Text Box--------------------------*/
.notebox-container .copy-text{
position: absolute;
border: none;
outline: none;
width: 100%;
height: 35px;
bottom: 0;
left: 0;
background-color: #21618C;
color: white;
cursor: pointer
}
.notebox-container #remove{
color: #28B463;
}
The issue I believe is due to the use of href
href linking is the method for including an external style sheet on your web pages. It is intended to link your page with your style sheet. Whereas importing allows you to import one style sheet into another.
Use:
<style>
#import url(YOUR/FILE/PATH)
</style>
Its good practice to place css files in a subfolder located within the main folder your html is stored. This subfolder is labelled static
e.g. main folder
main folder
index.html
static
style.css
<style>
#import url("static/style.css")
</style>
Try replacing your fetch code with this:
fetch(htmlUrl)
.then((result)=>{
return result.text()
})
.then((html)=>{
var doc = document.createRange().createContextualFragment(template);
testSide.appendChild(doc);
}).catch((error)=>{
console.log(error)
})
createContextualFragment renders the Second Html File and load all its scripts
Load .css from Main Html file will work fine.
var doDo = doc.querySelector('.parent-container') here you load only parent-container div element. No css found on here. so if you want to load css from Second Html file then you should write/load css and javascript inner side of parent-container div. ex:
<div class="parent-container">
<link rel="stylesheet" href='style.css'> <!---change here[2]------>
--------
-------
If you try this on local machine you may face this error
Fetch API cannot load file:///C:/....*.html. URL scheme "file" is not supported.
Try in on Localhost or on an online server. you may not found this problem.
Main HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="test-sidebar">
</div>
<script>
let testSide = document.querySelector('#test-sidebar');
let htmlUrl = 'index.html';
fetch(htmlUrl)
.then((result) => {
return result.text()
}).then((html) => {
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html')
var doDo = doc.querySelector('.parent-container')
console.log('doc', doDo)
testSide.appendChild(doDo)
}).catch((error) => {
console.log(error)
})
</script>
<link rel="stylesheet" href='style.css'> <!---change here[1]------>
</body>
</html>
Second Html File
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Notbox</title>
<link rel="stylesheet" href="style.css"> <!-- change here[2] -->
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="parent-container">
<link rel="stylesheet" href="style.css"> <!---change here[2]------>
<!---Select items------>
<div class="container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<ul class="list" id="list">
</ul>
</div>
<button type="button" class="create-text-box">Create Text Box</button>
</div>
</div>
<!--Display notebox-->
<div class="notebox-container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<textarea class="list" id="noteList" ></textarea>
</div>
<button type="button" class="copy-text">Copy Text</button>
</div>
</div>
</div>
</body>
</html>
Output:
I'm not sure if I'm unable to find the right term to search or if there isn't much out there relating to this, but I was wondering if someone could help me figure out how to wrap or align images/elements around a circular shape.
I'm not sure if it's possible to do it purely with HTML and CSS or if JS is needed, but I'm open to all suggestions.
Here's an example in photoshop of what I'm looking for. I only show 4 here, but I will need the ability to add more circles as needed and still remain consistent. It could go onto another column though, if necessary.
for context, this is going to be some type of navigation menu.
Here's what I have code wise:
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;500;700;900&display=swap');
/*Colours:*/
:root {
--dark: #16161a;
--off-dark: #242629;
--off-white: #fffffe;
--purple: #7f5af0;
--off-blue: #94a1b2;
}
body {
color: var(--off-white);
font-family: 'Roboto', sans-serif;
}
.create-icon-size {
font-size: 1.5rem;
}
.circle-wrap {
position: relative;
top: 50%;
left: 50%;
width: 320px;
height: 320px;
border: 5px solid var(--off-dark);
border-radius: 160px;
transform: translate(-50%, -50%);
}
.icon-background {
background-color: var(--purple);
color: var(--off-dark);
position: relative;
border-radius: 25px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
<html lang="en" class="html">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://kit.fontawesome.com/fcb91982ab.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div class="circle-wrap">
<div id="head" class="icon-background">
<span class="fas fa-meh-blank create-icon-size"></span>
</div>
<div id="body" class="icon-background">
<span class="fas fa-child create-icon-size"></span>
</div>
<div id="legs" class="icon-background">
<span class="fas fa-capsules create-icon-size"></span>
</div>
<div id="feet" class="icon-background">
<span class="fas fa-shoe-prints create-icon-size"></span>
</div>
</div>
</body>
</html>
make .icon-background to absolute, and set it with top bottom right left values.
.main {
position: relative;
width: 400px;
}
.big-img {
height: 400px;
width: 400px;
border-radius: 100%;
}
.sm-img {
position: absolute;
height: 80px;
width: 80px;
border-radius: 100%;
border: 5px solid #fff;
}
.one {
top: 0;
right: 0;
}
.two {
top: 100px;
right: -50px;
}
.three {
bottom: 100px;
right: -50px;
}
.four {
bottom: 0;
right: 0;
}
<div class="main">
<img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="big-img" alt="image-1">
<img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="sm-img one" alt="image-1">
<img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="sm-img two" alt="image-1">
<img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="sm-img three" alt="image-1">
<img src="https://images.unsplash.com/photo-1525268499284-86ec700c826d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80" class="sm-img four" alt="image-1">
</div>
/*Colours:*/
:root {
--dark: #16161a;
--off-dark: #242629;
--off-white: #fffffe;
--purple: #7f5af0;
--off-blue: #94a1b2;
}
body {
color: var(--off-white);
font-family: 'Roboto', sans-serif;
}
.main{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.create-icon-size {
font-size: 1.5rem;
}
.circle-wrap {
position: relative;
width: 320px;
height: 320px;
border: 5px solid var(--off-dark);
border-radius: 160px;
}
.icon-background {
background-color: var(--purple);
color: var(--off-dark);
position: absolute;
border-radius: 25px;
width: 50px;
height: 50px;
}
#head{
top:0;
right: 25px;
}
#body{
top: 80px;
right: -25px;
}
#legs{
bottom: 80px;
right: -25px;
}
#feet{
bottom:0;
right: 25px;
<div class="main"><div class="circle-wrap">
<div id="head" class="icon-background">
<span class="fas fa-meh-blank create-icon-size"></span>
</div>
<div id="body" class="icon-background">
<span class="fas fa-child create-icon-size"></span>
</div>
<div id="legs" class="icon-background">
<span class="fas fa-capsules create-icon-size"></span>
</div>
<div id="feet" class="icon-background">
<span class="fas fa-shoe-prints create-icon-size"></span>
</div>
</div></div>
I want to show my own description over 'mousemove' event which will move along with my mouse pointer when I move my mouse over an image.
But it is not working
Below is the html code
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<div>
<img src="images/wolwerine.jpg" alt="Wolverine" hovermytext="She is doubting my capabilities." class="wolverineClass" id="wolverineId" />
</div>
<div class="wolverineHoverText">
</div>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
Below is the custom.css code
.wolverineHoverText{
height: 40px;
width: 300px;
position: absolute;
padding: 40px 80px;
border: 1px solid #106c90;
background: #da8808;
display: none;
color: #ffffff;
font-size: 20px;
top:20px;
left:20px;
}
img{
height: 600px;
width: 900px;
opacity: 0.5;
}
Below is the custom.js code
$(document).ready(function(){
$('.wolverineClass').mousemove(function(y){
var x = $(this).attr('hovermytext');
$('#wolverineHoverText').text(x).show();
$('#wolverineHoverText').css('top',y.clientY+10).css('left',y.clientX+10);
}).mouseout(function(){
$('#wolverineHoverText').hide();
});
});
Here is a link for that https://www.youtube.com/watch?v=_GrWaN05-Vs&index=51&list=PL6B08BAA57B5C7810
I am a beginner in jquery.
Please comment below for any query.
Here's a working solution. Hope it helps!
$(document).ready(function(){
$('.wolverineClass').mousemove(function(y){
var x = $(this).attr('hovermytext');
$('#wolverineHoverText').text(x);
$('#wolverineHoverText').css('top',y.clientY+10).css('left',y.clientX+10).show();
}).mouseout(function(){
$('#wolverineHoverText').hide();
});
});
.wolverineHoverText{
height: 40px;
width: 300px;
position: absolute;
padding: 40px 80px;
border: 1px solid #106c90;
background: #da8808;
display: none;
color: #ffffff;
font-size: 20px;
top:20px;
left:20px;
}
img{
height: 150px;
width: 400px;
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div>
<img src="images/wolwerine.jpg" alt="Wolverine" hovermytext="She is doubting my capabilities." class="wolverineClass" id="wolverineId" />
</div>
<div id="wolverineHoverText" style="display:none"></div>
I am trying to use the jquery jscrollpane plugin http://jscrollpane.kelvinluck.com/ in my website. I followed the instructions, but the scroll bar does nothing. I am probably overlooking something simple, but I have been trying for hours and cant figure out what I am doing wrong. I included the following in the header:
<link type="text/css" rel="stylesheet" href="CSS/style.css">
<link type="text/css" rel="stylesheet" href="CSS/jscrollpane.css">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Amaranth">
<script src="script/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="script/jquery.jscrollpane.js" type="text/javascript"></script>
<script src="script/jquery.mousewheel.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(document).ready(function() {
var element = $('.scroll-pane').jScrollPane({
showArrows: true,
verticalDragMaxHeight: 16,
horizontalDragMaxWidth: 0,
contentWidth: '0px'
});
var api = element.data('jsp');
api.reinitialise();
});
});
</script>
The following CSS:
.scroll-pane {
width: 100%;
height: 100%;
overflow: auto;
margin-bottom: 8px;
}
.jspContainer {
overflow: hidden;
position: relative;
}
.jspPane {
position: absolute;
}
.jspVerticalBar {
position: absolute;
top: 0;
right: 0;
width: 12px;
height: 100%;
}
.jspCap {
display: none;
}
.jspHorizontalBar .jspCap {
float: left;
}
.jspTrack {
background: url(../images/scroll_bar.png);
position: relative;
}
.jspDrag {
background: url(../images/scroll_drag.png) no-repeat;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspArrow {
text-indent: -20000px;
display: block;
cursor: pointer;
padding: 0;
margin: 0;
}
.jspArrowUp {
width: 12px;
height: 14px;
background-image: url(../images/scroll_up.png);
}
.jspArrowDown {
background-image: url(../images/scroll_down.png);
}
.jspArrow.jspDisabled {
cursor: default;
}
.jspVerticalBar .jspArrow {
height: 14px;
}
.jspVerticalBar .jspArrow:focus {
outline: none;
}
.jspCorner {
background: #eeeef4;
float: left;
height: 100%;
}
And this is my HTML:
<div class="daily_special">
<div class="pane">
<div class="scroll-pane jspScrollable" style="overflow: hidden; padding: 0px; width: 240px;" tabindex="0">
<div class="jspContainer" style="width: 240px; height: 220px;">
<div class="jspPane" style="padding: 0px; top: 0px; width: 224px;">
<div style=" width: 210px;">
<h3>Weekly Specials</h3>
<a><img src="images/weekly_special_home.jpg"></a>
Today is the day we release our Spring/Summer menu!! Come down to FSB and try some of our delicious new additions! Cheers!
<span> </span>
</div>
</div>
<div class="jspVerticalBar">
<div class="jspCap jspCapTop"></div>
<a class="jspArrow jspArrowUp jspDisabled"></a>
<div class="jspTrack" style="height: 192px;">
<div class="jspDrag" style="height: 16px; top: 0px;">
<div class="jspDragTop"></div>
<div class="jspDragBottom"></div>
</div>
</div>
<a class="jspArrow jspArrowDown"></a>
<div class="jspCap jspCapBottom"></div>
</div>
</div>
</div>
> view our full MENU </div>
</div>
I would greatly appreciate any suggestions.