I have a table of basketball stats and I have an image of a basketball court that will later contain a shot chart. It is initially hidden. I want the image to only appear when the user clicks a button. And the image should appear on top of the of table. (Most of the table will be behind the image)
I can't seem to manipulate the CSS or Jquery position to allow that to happen. Part of the problem is that I want the table itself to be centered (margin: 0px auto;)
I started a JSFiddle here: https://jsfiddle.net/Thread7/f7g9dtxt/ to work it out. If you click "Show Court" you will see what happens now. The image is at the bottom and to the left. Instead of the top and middle.
Code Below:
<button id='showimg'>
Show Court
</button>
<table class='mytable'>
<tr><th>Name</th><th>FGA</th><th>FGM</th><th>Rebounds</th><th>Fouls</th> </tr>
<tr><td>Michael Jordan</td><td>5</td><td>10</td><td>12</td><td>3</td></tr>
<tr><td>LeBron James</td><td>3</td><td>7</td><td>5</td><td>4</td></tr>
<tr><td>Kobe Bryant</td><td>1</td><td>8</td><td>7</td><td>3</td></tr>
<tr><td>Magic Johnson</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
<tr><td>Draymond Green</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
<tr><td>Zach Randolph</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
</table>
<img src='http://exchangedownloads.smarttech.com/public/content/2c/2c4cb6ee-579f-4404-b573-c554ba6bf7f4/previews/medium/0001.png' class='myimg' id='court'>
CSS:
.mytable {
margin: 0px auto;
}
.mytable td {
text-align: left;
border: solid;
padding: 5px;
margin: 0px;
}
.myimg {
display: none;
margin: 0px auto;
}
JQuery:
$("#showimg").click(function(e) {
$("#court").show();
});
You should wrap your table in element with relative position, than place the image (also in container with absolute position). That way you have better control over those elements. Check it out:
$("#showimg").click(function(e) {
$(".myimg").toggle();
});
.mytable {
margin: 0px auto;
}
.mytable td {
text-align: left;
border: solid;
padding: 5px;
margin: 0px;
}
.myimg {
display: none;
position: absolute;
top: 0;
width: 100%;
text-align: center;
}
.table_container {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='showimg'>
Show/Hide Court
</button>
<div class="table_container">
<table class='mytable'>
<tr>
<td>Michael</td>
<td>Jordan</td>
<td>5</td>
<td>10</td>
</tr>
<tr>
<td>LeBron</td>
<td>James</td>
<td>3</td>
<td>7</td>
</tr>
<tr>
<td>Kobe</td>
<td>Bryant</td>
<td>1</td>
<td>8</td>
</tr>
<tr>
<td>Magic</td>
<td>Johnson</td>
<td>6</td>
<td>11</td>
</tr>
</table>
<div class="myimg">
<img src='http://exchangedownloads.smarttech.com/public/content/2c/2c4cb6ee-579f-4404-b573-c554ba6bf7f4/previews/medium/0001.png' id='court' />
</div>
</div>
Also at updated fiddle
Try this: https://jsfiddle.net/f7g9dtxt/3/
$('.yourImage').toggle();
$("#showimg").click(function(e) {
$('.yourImage').toggle();
});
.mytable td {
text-align: left;
border: solid;
padding: 2px;
margin: 0px;
}
.mytable {
position: absolute;
z-index: 0;
}
.yourImage {
position: absolute;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='showimg'>
Show Court
</button>
<table class='mytable'>
<tr><td>Michael</td><td>Jordan</td><td>5</td><td>10</td></tr>
<tr><td>LeBron</td><td>James</td><td>3</td><td>7</td></tr>
<tr><td>Kobe</td><td>Bryant</td><td>1</td><td>8</td></tr>
<tr><td>Magic</td><td>Johnson</td><td>6</td><td>11</td></tr>
</table>
<span class="yourImage">
Put an img tag here!
</span>
Related
I am using the jquery library to create a custom scrollbar - https://codepen.io/dragospaulpop/pen/asBcI
I created a simply example but the critical needed is to make the table fill to the rest of the page (without activating the standard browser scrollbar).
My code is:
<head>
<meta charset="UTF-8">
<title>CSS Only Fixed Table Headers</title>
<link rel='stylesheet' href='https://rawgit.com/dragospaulpop/cdnjs/master/ajax/libs/jQuery.custom.content.scroller/3.1.11/jquery.mCustomScrollbar.css'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://rawgit.com/dragospaulpop/cdnjs/master/ajax/libs/jQuery.custom.content.scroller/3.1.11/jquery.mCustomScrollbar.concat.min.js'></script>
</head>
<body>
<div style="width:100%;height:300px;background:red"></div>
<table class="fixed_headers">
<thead>
<tr>
<th>Name</th><th>Color</th><th>Description</th>
</tr>
</thead>
<tbody id="myBody">
</tbody>
</table>
<script>
$(window).load(function(){
$("#myBody").append(" <tr> <td>Apple</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Pear</td><td>Green</td><td>These are green.</td> </tr> <tr> <td>Grape</td><td>Purple / Green</td><td>These are purple and green.</td> </tr> <tr> <td>Orange</td><td>Orange</td><td>These are orange.</td> </tr> <tr> <td>Banana</td><td>Yellow</td><td>These are yellow.</td> </tr> <tr> <td>Kiwi</td><td>Green</td><td>These are green.</td> </tr> <tr> <td>Plum</td><td>Purple</td><td>These are Purple</td> </tr> <tr> <td>Watermelon</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Tomato</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Cherry</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Cantelope</td><td>Orange</td><td>These are orange inside.</td> </tr> <tr> <td>Honeydew</td><td>Green</td><td>These are green inside.</td> </tr> <tr> <td>Papaya</td><td>Green</td><td>These are green.</td></tr><tr><td>Raspberry</td><td>Red</td><td>These are red.</td></tr><tr><td>Blueberry</td><td>Blue</td><td>These are blue.</td></tr><tr><td>Mango</td><td>Orange</td><td>These are orange.</td></tr><tr><td>Passion Fruit</td><td>Green</td><td>These are green.</td></tr>");
$("tbody").mCustomScrollbar({
theme:"light-3",
scrollButtons:{
enable:false
},
mouseWheel:{ preventDefault: true },
scrollbarPosition: 'inside',
autoExpandScrollbar:true,
theme: 'dark'
});
});
</script>
<style>
tbody {
height: 150px;
overflow: hidden;
/*replace with auto to use default scroll*/
/*overflow: auto;*/
}
.fixed_headers {
table-layout: fixed;
border-collapse: collapse;
display: block;
width: 100%;
}
.fixed_headers th {
text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
padding: 5px;
text-align: left;
box-sizing: border-box;
display: inline-block;
width: 33.33%;
}
.fixed_headers tr {
display: block;
width: 100%;
}
.fixed_headers thead {
background-color: #333;
color: #FDFDFD;
display: block;
width: 100%;
}
.fixed_headers tbody {
display: block;
width: 100%;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #DDD;
}
</style>
</body>
I want to make the table's height: page_height-red_div_height (the size of page could be changed so it could be as percent). So the perfect solution is that red_div has always the same height but the height of the table is not const (could change by the windows size).
I tried to change the css by removing height: 150px; from the tbody and put there height: 100%; but the result was wrong - the standard browser scrollbar was activated instead of the custom scrollbar. Then I tried to change css of .fixed_headers tbody but it does not work as well.
How is it possible to solve this issue?
I appear to be having an issue where I would like to place a dropdown 'expandable' option within my table. I've attempted to do this with Javascript, but it always seems to just add information to the right hand column.
I'm not great at HTML/CSS and am very open to any advice on cleaning up my webpage.
I don't want it to seem like I am just asking for someone to do it for me, I have attempted to do it many times but to no avail.
The idea is to have my table have a little 'v' in the right corner of each cell in 'My Modules' which, when clicked, displays more information about the 'module' within the table. (This is what each entry looks like in my table):
Here's some code that will get you started, you can start by adding a click event to an element with the class .expand. When this is clicked then you can toggle a hidden paragraph. I'll let you experiment with this...
I'd advise working on the user experience a little, but the basic mechanics are there.
$( document ).ready(function() {
$(".expand").click( function () {
// Show .description if hidden, hide if currently showing
$(this).closest("td").find(".description").toggle();
// A little bit of styling to show the user the content has been expanded
if ( $(this).hasClass("blue-text") ) {
$(this).removeClass("blue-text");
} else {
$(this).addClass("blue-text");
}
});
});
.description {
display:none;
}
.blue-text {
color: blue;
}
table {
font-family: arial, sans-serif;
width: 100%;
background-color: rgba(0, 0, 0, 0);
padding-top: 50px
}
td,
th {
border: 1px solid rgb(200, 200, 200);
text-align: center;
padding: 8px;
}
th {
font-weight: normal;
background-color: rgba(222, 222, 222, 0.6)
}
.modules th {}
tr:hover {
background-color: rgba(20, 91, 130, 0.3)
}
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Module ID</th>
<th width="70%">Module</th>
<th>Credits</th>
<th>Semester</th>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">
<p>Introduction to CS <span class="expand">▼</span></p>
<p class="description">
Some extra info here.
</p>
</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">
<p>Introduction to Uni <span class="expand">▼</span></p>
<p class="description">
Some extra info here.
</p>
</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to German</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
</table>
Another web developer wanted to freeze the left-most column and allow scrolling of the table. He found this code and implemented into his client's site. The code does its job and works as expected.
However he added some #media queries to make the table a bit more responsive. When doing so it screwed up the table. It left the left column to not be aligned with the rest of the table.
#media screen and (max-width: 699px) and (min-width: 520px) {
.exportTable th{
min-width: 170px !important;
}
.exportTable td{
min-width:170px !important;
max-width:170px !important;
}
}
So I added the function call inside a window.resize().
$(document).ready(function () {
app_handle_listing_horisontal_scroll($('#exportTable-listing'));
app_handle_listing_horisontal_scroll($('#exportTable-listing2'));
$(window).resize(function() {
app_handle_listing_horisontal_scroll($('#exportTable-listing'));
app_handle_listing_horisontal_scroll($('#exportTable-listing2'));
});
});
The code was called upon resize of the window however, the outerHeight and outerWidth grew exponentially, causing a serious issue.
The issue happens when you set the height:
$(this).css('height', current_row_height);
and the width/margin:
$(this).css('position','absolute')
.css('margin-left','-'+table_collumns_margin[index]+'px')
.css('width',table_collumns_width[index])
Here is a fiddle.
Simply grab the window and resize back and forth, the table cell's height/width will exponentially grow, causing a serious issue.
This fiddle demonstrates how when you hit the #media queries that the left column will be misaligned. (it's important when viewing this fiddle to get the #media query to be hit.)
How can I resolve these issues?
In my opinion, adding javascript to the equation makes it overly complex. I believe what you want can be accomplished with CSS alone.
How this works, if the browser has a max-width of 500px, then remove the sticky column. If not, show the sticky column.
Unless you need to support browsers older than IE 9, then try this on for size:
https://jsfiddle.net/BmLpV/284/
CSS:
.zui-table {
border: none;
border-right: solid 1px #DDEFEF;
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-table tbody td {
border-bottom: solid 1px #DDEFEF;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-wrapper {
position: relative;
}
.zui-scroller {
margin-left: 141px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 300px;
}
.zui-table .zui-sticky-col {
border-left: solid 1px #DDEFEF;
border-right: solid 1px #DDEFEF;
left: 0;
position: absolute;
top: auto;
width: 120px;
}
#media (max-width: 500px) {
.zui-table .zui-sticky-col {
border-left: solid 1px #DDEFEF;
border-right: solid 1px #DDEFEF;
position: relative;
top: auto;
width: auto;
}
.zui-scroller {
margin-left: 0;
}
}
HTML:
<div class="zui-wrapper">
<div class="zui-scroller">
<table class="zui-table">
<thead>
<tr>
<th class="zui-sticky-col">Name</th>
<th>Number</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>Prior to NBA/Country</th>
</tr>
</thead>
<tbody>
<tr>
<td class="zui-sticky-col">DeMarcus Cousins</td>
<td>15</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
<td>Kentucky/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Isaiah Thomas</td>
<td>22</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
<td>Washington/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Ben McLemore</td>
<td>16</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
<td>Kansas/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Marcus Thornton</td>
<td>23</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
<td>Louisiana State/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Jason Thompson</td>
<td>34</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
<td>Rider/USA</td>
</tr>
</tbody>
</table>
</div>
</div>
Edit: To support dynamic heights, you could do something like this:
$(function(){
$('.zui-table tr').each(function(i, row) {
var height = $('.zui-sticky-col').eq(i).outerHeight() - $('.zui-sticky-col').eq(i).height();
$('.zui-sticky-col').eq(i).height($(row).height() - height);
});
})
For better performance, you could only access the element once:
$(function(){
$('.zui-table tr').each(function(i, row) {
var el = $('.zui-sticky-col').eq(i);
var height = el.outerHeight() - el.height();
el.height($(row).height() - height);
});
})
https://jsfiddle.net/BmLpV/289/
I have a header bar with left-aligned items, center items and right-aligned items. In the center, I have multiple items and a search input field. When the search field gets focus, I'm making it wider by animating the width. Right now, because the items are centered, it's animating both left and right to center the content. How can I change this so it keeps the alignment and expands the width to the right?
I'm not using Bootstrap.
I'm currently using a table for the header bar content. I'm open to changing that, but if there's a way to do it with the current design, that would be preferred.
Here's a JSFiddle...click in the search field to see what's happening: https://jsfiddle.net/L60g0j64/1/
EDIT: I've updated it with the suggested solution below. My only issue is that the red container surrounding the input should expand also.
HTML/CSS/JS Snippet
$('#search').focus(function() {
$(this).val("");
$('#hidden_content').css('display','inline');
$(this).animate({width: '180px'}, 200);
});
$('#search').blur(function() {
$(this).val('Search');
$('#hidden_content').css('display','none');
$(this).animate({width: '120px'}, 200);
});
.header-navbar {
cursor: pointer;
white-space: nowrap;
background-color: #1f2127;
color: #cbcbcb;
min-width: 0;
text-overflow: ellipsis;
z-index: 299;
top: 0px;
left: 0px;
width: 100%;
height: 32px;
float: none;
position: fixed;
border-spacing: 0px;
}
td.cell-center {
text-align: center;
}
.cell-center table {
margin: 0 auto;
}
.header-table {
height: 32px;
border: none;
border-spacing: 0px;
}
td.header_rtd {
padding-right:12px;
}
td.header_ltd {
padding-left:12px;
}
.search-wrapper {
max-width: 124px;
background-color: red;
padding:4px;
}
.hidden_content{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="header-navbar" id="header" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<table class="header-table" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class='header_rtd'>left1</td>
<td class='header_rtd'>left2</td>
</tr>
</table>
</td>
<td width=100% class='cell-center'>
<table class="header-table" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class='header_rtd'>center</td>
<td class='header_rtd'>center</td>
<td><div class="search-wrapper">
<input class="search" id="search" style="width: 120px;" type="text" size="60" value="Search"/>
<div class='hidden_content' id='hidden_content'>
hidden content
</div>
</div></td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="header-table" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class='header_ltd'>right1</td>
<td class='header_ltd'>right2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
One quick solution would be to give the parent element a max-width equal to the initial width of the element. In doing so, the element will still be centered relative to the initial width because the input element's animated width will not effect the width of the parent element.
Updated Example
.search-wrapper {
max-width: 124px;
}
As a side note, you don't need jQuery/JS to animate the width, you can simply use a CSS transition along with the :focus pseudo-class.
Updated Example
.search-wrapper input.search {
transition: 1s width ease;
width: 120px;
}
.search-wrapper input.search:focus {
width: 180px;
}
I have a drop Down Menu, which when clicked upon, pushes the content below it to make space for its items.
However I would like for the drop down to overlap the contents below without pushing it down.
I tried a couple of things but they didnt work including z-index:1; on the drop down list.
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
This is the drop down. This forms one row of the table in which i have placed the contents of the webpage.
When i click on My Account label, the ul drops down and the height of the table's row increases and pushes the row below it down.
I would like for the drop down to overlap the next row contents. How should i do that?
Some more code below and above it
<div class="container">
<!-- this is where the webpages starts from. The below table is where the main contents are -->
<table border="0" cellpadding="2" style="width: 100%; ">
<tr style="background-color: #95D0CA;">
<!-- contains header of page -->
<td colspan="2">
</td>
</tr>
<tr style=" position: relative; z-index:1;">
<td colspan="2" valign="top">
<!-- THIS IS WHERE I HAVE ADDED A NEW TABLE TO CONTAIN THE MENU ITEMS. THE DROP DOWN IS A (td) OF THIS TABLE -->
<table border="0" cellspacing="2" cellpadding="2" class="templateBody" style="width: 100%;">
<tr >
<td>
<!-- other menu items -->
</td>
<!-- DROP DOWN -->
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- NOW the Row which gets pushed down appears -->
<tr>
<td colspan="2" valign="top" style="width: 100%">
<div class="contentBody">
</div>
</td>
</tr>
</table>
</div>
I will show some snaps of how it looks. This might guide you guys to understand my problem.
Below an image of before drop down expands:
!(http://imgur.com/QauRGVc)
image after drop down expands:
!(http://imgur.com/VMlcCbp)
I have tried using jsFiddle as many of you suggested, but it wasnt showing my code as it is. So that was not serving the purpose. I hope this edit helps.
Please Help me. And do let me know if you need additional codes.
** Thank You in Advance :)**
**Edit**
Adding CSS and JAVA SCRIPT CODES
CSS CODE for the code i have provided
.navigationLink a
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.navigationLink label
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.reportMenu
{
text-decoration: none;
color: #216961;
font-weight: bold;
font-size: 15px;
display: block;
padding: 10px 5px 10px 5px;
text-align: center;
cursor: pointer;
}
.reportItems
{
color: white;
text-decoration: none;
font-weight: 400;
font-size: 15px;
padding: 10px;
background-color: #95D0CA;
text-align: center;
}
.container
{
width: 1000px;
background-color: whitesmoke;
padding: 10px;
margin: 50px auto;
position: relative;
}
.templateBody
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width: auto;
}
.templateBody td
{
text-align:center;
}
.contentBody
{
background-color: whitesmoke;
margin: 10px 0px 10px 0px;
width: 100%;
position: relative;
clear: both;
}
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}
.reportUL li
{
background-color: #95D0CA;
}
JQUERY CODE
$(document).ready(function()
{
$(".img, #img").show();
$("#loginWindow").hide();
$("#loginSlide").show();
$(".reportItems").hide();
$(".reportItems1").hide();
$("#loginSlide").click(function()
{
$("#loginWindow").slideToggle(200);
});
$(".toDate").datepicker();
$(".fromDate").datepicker();
$( "#accordion" ).accordion({
collapsible: true
});
$(".reportDiv").hover(function()
{
$(".reportItems").slideToggle(150);
});
$(".accountDiv").hover(function()
{
$(".reportItems1").slideToggle(150);
});
$(".mainLinks, .reportMenu, .reportItems, .reportMenu1, .reportItems1 ").hover(function()
{
$(this).css({"text-shadow":"0px 0px 5px #FFFFFF"});
}, function(){
$(this).css("text-shadow","none");
});
});
Take a look at following fiddles.
These are some nice drop down menu's you can build
Fidde 1
Fiddle 2
I just need to add the following CSS properties to the class reportUL of the the
un-ordered list (ul) i used to add the drop down menu:
the property required to overlap the drop down on the contents below is:
position: absolute;
and to make it show above / on top of the below content i used:
z-index: 1;
the complete and correct CSS for the class is:
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}