I was just wondering can you put a image inside the check box to make it more colorful?
I have searched a lot about this, but didn't find anything that could help me
Edit: I have done so when the check box is "checked" a menu pops up.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel=stylesheet href="css.css" type="text/css" />
<link rel="icon" href="favicon.ico" type="image/icon"/>
<title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT4??4=" crossorigin="anonymous"></script>
<script>
$(function() {
$(".box a").on("click",function() {
$("#toggle-nav").prop('checked', false)
});
});
</script>
<body>
<!-- start header -->
<header id="head">
<div class="something">
<nav id="menu">
<input type="checkbox" id="toggle-nav"/>
<label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label>
<div class="box">
<ul>
<li><i class="icon-home"></i> Play</li>
<li><i class="icon-file-alt"></i> about</li>
<li><i class="icon-copy"></i> XXXXXX</li>
<li><i class="icon-envelope"></i> contacts</li>
</ul>
</div>
</nav>
</div>
Thank you :)
You can use Background image css property.
Deom: http://jsfiddle.net/kEHGN/1/
input[type="checkbox"] + label{
background-image: url('img1.png');
height: 16px;
width: 17px;
display:inline-block;
padding: 0 0 0 0px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
input[type="checkbox"]:checked + label{
background-image: url( background-image: url('img2.png');
height: 16px;
width: 17px;
display:inline-block;
padding: 0 0 0 0px;
}
Related
I hope someone can help me, I would like the scroll of the navbar to change the image of the logo.
I am a novice but stubborn I tried online to look for something similar but for my purpose, I could not find anything.
I just want to change the logo image on the scroll.
$(document).scroll(function() {
if ($(this).scrollTop() >= 30) {
$(" .brand-logo").html("<img src='img/edizioni-white.png'>");
} else {
$(".brand-logo").html("<img src='img/edizioni-black.png'>");
}
});
nav {
position: fixed;
top: 0;
left: 0;
height: 84px;
width: 100%;
background-color: #fff;
padding: 20px 18px;
transition: background-color 0.4s ease-out;
}
nav#navbar {
height: 95px;
}
nav.scroll {
background-color: #000 !important;
height: 95px;
transition: background-color 1000ms;
color: #fff !important;
}
a.color-font-menu {
color: black;
font-size: 20px;
}
nav.scroll a {
color: white;
}
.brand-logo img {
height: auto;
width: 130px!important;
margin-top: -20px;
}
.box {
height: 500px;
margin-top: 100px;
}
.box.orange {
margin-top: 200px;
}
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<!--Import materialize.css-->
<link href="../materialize/core/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection" />
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- Let browser know website is optimized for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<!--JavaScript at end of body for optimized loading -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="../materialize/core/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- scrolling change logo -->
<script type="text/javascript" src="js/script.js"></script>
<nav id="navbar">
<div class "container">
<a href="#!" class="brand-logo">
<img src="img/edizioni-black.png">
</a>
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down ">
<li><a class="color-font-menu" href="#">Home</a></li>
<li><a class="color-font-menu" href="#">Blog</a></li>
<li><a class="color-font-menu" href="#">Video</a></li>
<li><a class="color-font-menu" href="#">About</a></li>
<li><a class="color-font-menu" href="#">Contact</a></li>
<li><a class="color-font-menu" href="#">Chi siamo</a></li>
</ul>
</div>
<!-- end container -->
</nav>
<ul class="sidenav " id="mobile-demo">
<li>Home</li>
<li>Blog</li>
<li>Video</li>
<li>About</li>
<li>Contact</li>
<li>Chi siamo</li>
</ul>
<div class="container">
<div class="box orange"></div>
<div class="box purple"></div>
<div class="box blue"></div>
<div class="box orange"></div>
<div class="box blue"></div>
</div>
What about trying this jQuery approach?
I've made a clean snippet that shows how you can change your image based on scroll with jQuery.
This should be able to help you out.
$(document).ready(function() {
$(window).on("scroll", function() {
if($(this).scrollTop() >= 30){
// set to new image
$(".brand-logo img").attr("src","http://placekitten.com/300/300");
} else {
//back to default
$(".brand-logo img").attr("src","http://placekitten.com/200/200");
}
})
})
nav {
position: fixed;
}
.brand-logo img {
height: 200px;
width: 200px;
}
.filler {
background: pink;
height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<a href="#!" class="brand-logo">
<img src="http://placekitten.com/200/200">
</a>
</nav>
<div class="filler"></div>
In questo modo funziona.
<script> $(document).scroll(function() {
if ($(this).scrollTop() >=30) {
$("#navbar .brand-logo").html("<img src='img/edizioni-white.png'>");
} else {
$("#navbar .brand-logo").html("<img src='img/edizioni-black.png'>");
}
});
</script>
Hey I am building a website using html, css, bootstrap, and javascript.
And for some reason my input won't completely center. I HAVE NO CLUE WHY!!! I think it might have to do with bootstrap.
<DOCTYPE html!>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
body {
font-family: futura;
}
#inp {
margin:auto;
}
.jumbotron {
margin: auto;
text-align: center;
}
img {
width: 150px;
height: 150px;
border-radius: 50%;
}
</style>
</head>
<body>
<ul class="nav nav-tabs">
<li role="presentation">Home</li>
<li role="presentation" class="active">Profile</li>
<li role="presentation">Hangawts <span class="badge">0</span></li>
</ul>
<div class="jumbotron">
<h1>Welcome To Your Profile!</h1><br>
<h3>Your Current Profile Picture:</h3><br><br>
<img src="http://placehold.it/350x150"><br><br><br>
<input id="inp" type="file" accept="image/*">
</div>
</body>
</html>
Setting the width of input[type="file"] element to 83.5px, left to calc() with parameter 50vw - 41.75px, ::-webkit-file-upload-button padding and margin to 0 returns expected results at chrome, chromium and firefox.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
body {
font-family: futura;
}
#inp {
width: 83.5px;
position: relative;
padding: 0;
margin: 0;
left: calc(50vw - 41.75px);
}
::-webkit-file-upload-button {
padding: 0;
margin: 0;
display: block;
}
.jumbotron {
margin: auto;
text-align: center;
}
img {
width: 150px;
height: 150px;
border-radius: 50%;
}
</style>
</head>
<body>
<ul class="nav nav-tabs">
<li role="presentation">Home
</li>
<li role="presentation" class="active">Profile
</li>
<li role="presentation">Hangawts <span class="badge">0</span>
</li>
</ul>
<div class="jumbotron">
<h1>Welcome To Your Profile!</h1>
<br>
<h3>Your Current Profile Picture:</h3>
<br>
<br>
<img src="http://placehold.it/350x150">
<br>
<br>
<br>
<input id="inp" type="file" accept="image/*">
</div>
</body>
</html>
I have a header that fades from transparent to blue once you start scrolling. Once you reach the top of the page again the header returns to transparent.
But right now it just jumps back to being transparent. Might be obvious - but what can I do to make the blue fade nicely to transparent as well?
function checkScroll() {
var startY = $('.navbar').height() * 1; //The point where the navbar changes in px
if ($(window).scrollTop() > startY) {
$('.navbar').addClass("navbar-inverse");
} else {
$('.navbar').removeClass("navbar-inverse");
}
}
if ($('.navbar').length > 0) {
$(window).on("scroll load resize", function () {
checkScroll();
});
}
body {
height:1000px;
}
.btn-gs {
background: blue;
border: 2px solid blue;
padding: 5px 23px !important;
border-radius: 25px;
font-weight: 500;
letter-spacing: 1px;
margin-top: 25px;
color: #fff !important;
text-transform: uppercase;
}
.navbar-alt {
height: 80px;
}
.navbar-brand-alt {
padding: 0;
}
.navbar-signup {
margin-top: 3px;
margin-left: 10px;
}
.navbar-right-alt {
position: static !important;
padding-top: 20px !important;
a {
color: #fff !important;
font-size: 16px !important;
&:hover {
color: darken(#brand-primary,10%) !important;
background-color: transparent !important;
}
}
}
.navbar.navbar-inverse {
background: transparent;
transition: all .5s linear;
border: none !important;
}
.navbar.navbar-inverse.scrolled {
background: #32404E;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-alt navbar-fixed-top scrolled">
<div class="row">
<div class="col-md-offset-1 col-md-3">
<div class="navbar-header">
<a href="#Url.Action("Index", "Home", new { area = String.Empty })" class="navbar-brand navbar-brand-alt">
<img src="#" />
</a>
</div>
</div>
<div class="col-md-offset-2 col-md-5">
<div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
<ul class="nav navbar-nav navbar-right navbar-signup">
<li>
<a href="#" class="btn-gs">
<i class="fa fa-phone"></i>
Contact Us
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-right-alt">
<li>
Back
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
Looks like the problem here is that the CSS transition property is included in the class that you're adding/removing as you reach the top of the page ("navbar-inverse"). The transition will work when you add the class, but removing it will give the abrupt change in transparency you're seeing.
Instead, try putting the transition in a separate ".navbar" class, and removing it from "navbar-inverse", like so:
.navbar{
transition: all .5s linear;
}
function checkScroll() {
var startY = $('.navbar').height() * 1; //The point where the navbar changes in px
if ($(window).scrollTop() > startY) {
$('.navbar').addClass("navbar-inverse");
} else {
$('.navbar').removeClass("navbar-inverse");
}
}
if ($('.navbar').length > 0) {
$(window).on("scroll load resize", function () {
checkScroll();
});
}
body {
height:1000px;
}
.btn-gs {
background: blue;
border: 2px solid blue;
padding: 5px 23px !important;
border-radius: 25px;
font-weight: 500;
letter-spacing: 1px;
margin-top: 25px;
color: #fff !important;
text-transform: uppercase;
}
.navbar-alt {
height: 80px;
}
.navbar-brand-alt {
padding: 0;
}
.navbar-signup {
margin-top: 3px;
margin-left: 10px;
}
.navbar-right-alt {
position: static !important;
padding-top: 20px !important;
a {
color: #fff !important;
font-size: 16px !important;
&:hover {
color: darken(#brand-primary,10%) !important;
background-color: transparent !important;
}
}
}
.navbar{
transition: all .5s linear;
}
.navbar.navbar-inverse {
background: transparent;
border: none !important;
}
.navbar.navbar-inverse.scrolled {
background: #32404E;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-alt navbar-fixed-top scrolled">
<div class="row">
<div class="col-md-offset-1 col-md-3">
<div class="navbar-header">
<a href="#Url.Action("Index", "Home", new { area = String.Empty })" class="navbar-brand navbar-brand-alt">
<img src="#" />
</a>
</div>
</div>
<div class="col-md-offset-2 col-md-5">
<div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
<ul class="nav navbar-nav navbar-right navbar-signup">
<li>
<a href="#" class="btn-gs">
<i class="fa fa-phone"></i>
Contact Us
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-right-alt">
<li>
Back
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
You can the jQueryUI animated addClass() removeClass();
function checkScroll() {
var startY = $('.navbar').height() * 1; //The point where the navbar changes in px
if ($(window).scrollTop() > startY) {
$('.navbar').addClass("navbar-inverse", 1000, "easeInBack");
} else {
$('.navbar').removeClass("navbar-inverse", 1000, "easeInBack");
}
}
if ($('.navbar').length > 0) {
$(window).on("scroll load resize", function () {
checkScroll();
});
}
body {
height:1000px;
}
.btn-gs {
background: blue;
border: 2px solid blue;
padding: 5px 23px !important;
border-radius: 25px;
font-weight: 500;
letter-spacing: 1px;
margin-top: 25px;
color: #fff !important;
text-transform: uppercase;
}
.navbar-alt {
height: 80px;
}
.navbar-brand-alt {
padding: 0;
}
.navbar-signup {
margin-top: 3px;
margin-left: 10px;
}
.navbar-right-alt {
position: static !important;
padding-top: 20px !important;
a {
color: #fff !important;
font-size: 16px !important;
&:hover {
color: darken(#brand-primary,10%) !important;
background-color: transparent !important;
}
}
}
.navbar.navbar-inverse {
background: transparent;
border: none !important;
}
.navbar.navbar-inverse.scrolled {
background: #32404E;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-alt navbar-fixed-top scrolled">
<div class="row">
<div class="col-md-offset-1 col-md-3">
<div class="navbar-header">
<a href="#Url.Action("Index", "Home", new { area = String.Empty })" class="navbar-brand navbar-brand-alt">
<img src="#" />
</a>
</div>
</div>
<div class="col-md-offset-2 col-md-5">
<div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
<ul class="nav navbar-nav navbar-right navbar-signup">
<li>
<a href="#" class="btn-gs">
<i class="fa fa-phone"></i>
Contact Us
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-right-alt">
<li>
Back
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
Is there a way for me to use jquery mobile script without conflicting it on my bootstrap 3? My issue are my links is not working when I used Jquery mobile script but whenever I remove the script my links are working fine. I use Jquery mobile for my pop up feature. I'm a newbie on jquery and bootstrap web development, I apologize if my question seems too newbie.. Any help in my case is highly appreciated.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
</head>
<style>
body {
padding: 20px 50px 150px;
font-size: 20px;
text-align: center;
}
.jumbotron {
margin-bottom: 40px !important;
height: 350px !important;
background-repeat: no-repeat;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
}
#picbg
{
background: url('board.jpeg') no-repeat center center;
}
#container
{
margin: 0 auto;
width: 850px;
background: #fff;
}
</style>
<style>
.centered-pills { text-align:center; }
.centered-pills ul.nav-pills { display:inline-block; }
.centered-pills li { display:inline; }
.centered-pills a { float:left; }
* html .centered-pills ul.nav-pills { display:inline; }
*+html .centered-pills ul.nav-pills { display:inline; }
</style>
<body>
<div class="container">
<div class="jumbotron" id="picbg">
<h1><font face = "brush script mt" color="#fff">My Page</font><h1></div>
</div>
<div class="row">
<div class="span12 centered-pills">
<ul class="nav nav-pills" role="tablist">
<li class="active"><span class="glyphicon glyphicon-home"></span><h2><b>Home</b></h2></li>
<li><span class="glyphicon glyphicon-envelope"></span><h2><b>Contact Me</b></h2></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-user"></span><h2><b>Profile</b></h2> </a>
<ul class="dropdown-menu" role="menu">
<li><h2><b>Web</b></h2></li>
<li><h2><b>Author</b></h2></li>
<li>About</b></h2></a></li>
</ul>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div data-role="popup" id="myPopup" class="ui-content" data-overlay-theme="a" data-theme="d" data-corners="false">
<img class="popphoto" src="image1.png" style="width:600px;height:756px;" alt="">
</div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</body>
</html>
I have change logo image in a single navigation page. It means, for example, there are 2 tabs in the page like Home and Contact.
This is a single page navigation with vertical alignment tabs and above to that there will be logo. When I scroll to bottom it will move to the contact tab and background color of that page also changes. At this time I have change the image too.
Below is the CSS file
/* ----anchor---- */
a, a:link{
color:#6db0da;
text-decoration:none;
}
a:hover, a:active{
color:#6db0da;
text-decoration:underline;
}
.story { height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; box-shadow: 0 0 50px rgba(0,0,0,0.8);}
#home { background: #00617b; }
#contact { background: #46AA27; }
#container {
width: 945px;
margin: 0 auto;
display: block;
overflow: hidden;
z-index: 55;
height: 100%;
}
nav{
width: 250px;
height: 100%;
float: left;
display: block;
overflow: hidden;
text-align: center;
position: fixed;
z-index:500;
}
nav #nav-logo{
font-family: "BebasNeueRegular", Arial, Helvetica, sans-serif;
font-size:43px;
text-transform:uppercase;
text-align:center;
color:#FFF;
text-decoration:none;
display:block;
font-weight:normal;
text-shadow: #2B0D09 0px 1px 0px;
background:url(../images/Home.png) no-repeat center;
height: 250px;
width: 250px;
}
below is the html page
<!DOCTYPE HTML>
<html class="no-js" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Single Page Navigation</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="top"></section>
<section id="home" class="story">
<div id="container">
<nav><div class="active" id="nav-logo"></div>
<ul id="nav">
<li class="active" id="nav-1">Home</li>
<li id="nav-2">Contact</li>
</ul>
<div class="bg_bottom"></div>
</nav>
<div id="content">
<div id="loader" class="loader"></div>
<div id="ps_container" class="ps_container"> <span class="ribbon"></span>
<div class="ps_image_wrapper">
<img src="images/1.jpg" alt=""/>
</div>
<div class="ps_next"></div>
<div class="ps_prev"></div>
<ul class="ps_nav">
<li class="selected">Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
<li>Image 4</li>
<li>Image 5</li>
<li class="ps_preview">
<div class="ps_preview_wrapper">
</div>
<span></span>
</li>
</ul>
</div>
</div>
</div>
</section>
<section id="contact" class="story">
<div id="container">
<div id="content">
Test
</div>
</div>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/jquery.tweet.js" charset="utf-8"></script>
<script src="js/jquery.slideshow.js"></script>
<script src="js/jquery.nav.js"></script>
<script src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script src="js/form.js" type="text/javascript"></script>
</body>
</html>
I have to make that nav-logo CSS style to generic to change the image on moving from one table to another.
$("yourtablename").mouseenter(function ( ) {
$("#nav-logo").css({"background-image":"url(yourimageurl)"});
})
something like this