Change Image with link hover a text list - javascript

I'm trying to set up a page that looks like the image below.
http://i.stack.imgur.com/GwRXf.png
I would like to have the main image replaced when I "hover" on one of the links listed nearby (a table or a list) disabling the "click" behavior.
I have tried to do this with css following this code:
http://jsfiddle.net/Kne3d/5/
I tried to change it in this way:
#gallery {
oveflow: auto;
text-align: center;
padding: 1em;
padding-top: 120px;
position: relative;
}
#gallery td {
display: inline;
padding: 0 1em;
}
#gallery img {
display: none;
position: absolute;
top: 10px;
left: 35%;
}
#gallery td:hover {
background: yellow;
}
#gallery td:hover ~ img {
display: block;
}
and:
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="gallery">
<tr>
<td width="100%">Cat 1<img src="/images/01.png"></td>
<td width="150" rowspan="6">I WANT MY IMAGES HERE</td>
</tr>
<tr>
<td>Cat 2 <img src="/images/02.png"></td>
</tr>
<tr>
<td>Cat 3 <img src="/images/03.png"></td>
</tr>
<tr>
<td>Cat 4<img src="/images/04.png">
</td>
</tr>
</table>
I'd like my images will show up on the right column...
I also tried with Javascript:
<head>
<script language="JavaScript" type="text/JavaScript">
function showT(q){
document.getElementById('ima').setAttribute('src','0'+q+'.png')
}
</script>
</head>
<body>
<table width="100%" border="0">
<tr>
<td width="80%"><p>• Image 1</p>
<p>Image 2</p>
<p>Image 3</p>
<p>Image 4</p>
<td width="20%"><img id="ima" src="images/00.png" width="150" height="150">
</td>
</tr>
</table>
</body>
but...without success: images doesn't show up :(
Any idea on how make it works?

A really simple way:
$('#nav').find('li').hover(function(){
$('#gallery').find('li').eq($(this).index()).toggle();
});
demo

Related

How to set table position beside image with css?

I want to set my table's position right of my image.
Here's my code:
<html>
<head>
<style type="text/css">
.podium { display: block; margin-left: 300; margin-top: 500; position: static; }
table { position: relative; left: 100px; }
</style>
</head>
<body>
<img src="podium.jpg" class="podium">
<table border="5px">
<tr>
<td>aaa</td>
</tr>
</table>
</body>
</html>
I've tried this, but it didn't work.
How can I make it?
Wrap image and table in a div and than You can use flex and flex-order property of Flex order.
#wrapper{ display: flex; }
#image{ order:2; width: 100px; height:100px; margin-left:15px}
#table{ order:1; }
<div id='wrapper'>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSNyNcwf4fDjX_2L4mUcJNmg92fOmWlDTYxcefggBG0VAr6MX32" class="podium" id='image'>
<table border="5px" id='table'>
<tr>
<td>aaa</td>
</tr>
</table>
</div>

Layer multiple images in one html table cell

I have a simple HTML table with a grid of images. But now I'd like one cell to be able to contain multiple layered images as some of them are partially transparent. Making all of the images position: absolute makes the whole table combine into one square though.
This the structure I have now; In this example, the stone images should be on the sand images that are now (wrongly) above them. (And the coin image should be on the stone image)
.field {
border: none;
border-spacing: 0px;
}
.field tr, .field td {
border: none;
padding: 0px;
vertical-align: top;
}
.field img {
display: block;
width: 32px;
height: 32px;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
<table class="field">
<tr>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
<img src="https://image.ibb.co/eFMUiT/coin.png">
</td>
</tr>
<tr>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
</tr>
</table>
This question Layering images inside a table-cell is similar but isn't quite the same and didn't get any satisfactory answers for this problem.
Clarification:
If I simply set the enclosing elements of the images to position: relative and the images to position: absolute all the images end up in the top left corner of the screen. I have a grid of many cells of which each may have multiple layered images!
The previous answer, setting position: relative; on the table cells is completely correct.
The problem, for your example, is when you set position: absolute; on an element it doesn't take up space. So with no other content, your table cells all collapse to size 0, and the images appear to stack since they are all relatively positioned to the same (0, 0) origin.
You also need to give the table cells size:
width: 32px;
height: 32px;
Full example:
.field {
border: none;
border-spacing: 0px;
}
.field tr, .field td {
border: none;
padding: 0px;
vertical-align: top;
position: relative;
width: 32px;
height: 32px;
}
.field img {
position: absolute;
display: block;
width: 32px;
height: 32px;
}
<table class="field">
<tr>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
<img src="https://image.ibb.co/eFMUiT/coin.png">
</td>
</tr>
<tr>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
</tr>
</table>
using position relative in a td element can help you to set your images in a position absolute
table td {
position:relative;
}
.absolute-img {
position: absolute;
top: 73px;
left: 50px;
}
<table>
<tr>
<td>
<img src="https://picsum.photos/200/300">
</td>
<td>
<img src="https://picsum.photos/200/300">
<img src="https://picsum.photos/200/300">
</td>
<td>
<img src="https://picsum.photos/200/300" class="absolute-img">
<img src="https://picsum.photos/200/300">
<img src="https://picsum.photos/200/300">
</td>
</tr>
</table>
By telling the browser how big elements have to be things can be put in their correct locations.
Define the height on the tr element of 32 pixels.
Define the width on the td element of 32 pixels.
We now have rows of the correct height and boxes of the correct width.
Set the td element to position: relative
Set the img element to position absolute.
It will be absolutely positioned to the td element you made relative.
Set the img element to top: 0px; bottom 0px;
.field {
border: none;
border-spacing: 0px;
}
.field tr, .field td {
border: none;
padding: 0px;
vertical-align: top;
}
.field td {
position: relative;
width: 32px;
}
.field tr {
height: 32px;
}
.field img {
display: block;
position: absolute;
top: 0px;
left: 0px;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
<table class="field">
<tr>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
<img src="https://image.ibb.co/eFMUiT/coin.png">
</td>
</tr>
<tr>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
</tr>
</table>
Since you know how big the imgs are, set their respective height and width to the td, then position absolute on the imgs to take them out of the flow, position:relative on the td so the imgs be raltive to them, and don't go outside.
.field {
border: none;
border-spacing: 0px;
}
.field tr,
.field td {
border: none;
padding: 0px;
vertical-align: top;
}
.field td {
width: 32px;
height: 32px;
position: relative;
}
.field img {
position: absolute;
display: block;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
<table class="field">
<tr>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
<img src="https://image.ibb.co/eFMUiT/coin.png">
</td>
</tr>
<tr>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
<td>
<img src="https://image.ibb.co/hTXDA8/land.png">
<img src="https://image.ibb.co/hgT9iT/rock_1.png">
</td>
</tr>
</table>

Column resizing in HTML table

I have two tables. One for header and other for the body. I created it this way so that header will remain fixed if the body overflows.
(function() {
var target = $("#target");
$("#source").scroll(function() {
target.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
});
})();
.scroll-example {
display: block;
margin-right: 20px;
width: 100%;
}
td {
border: 1px solid black;
min-width: 100px;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td:hover i {
display: block;
float: right;
visibility: visible;
}
i {
display: none;
visibility: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="overflow: hidden;width: 400px;">
<table id="target" class="scroll-example" style="overflow: hidden;">
<tr>
<td class="col1">HHHHHHHHHHHHH</td>
<td class="col2">HHHHHHHHHHH</td>
<td class="col3">HHHHHHHHHHH</td>
<td class="col4">HHHHHHHHHHH</td>
<td class="col5">HHHHHHHHHHH</td>
<td class="col6">HHHHHHHHHHH</td>
<td class="col7" width="20px" style="border-color: white;"></td>
</tr>
</table>
<table id="source" class="scroll-example" style="overflow: scroll;height: 50px;">
<tr>
<td class="col1"><i class="fa fa-pencil"></i>AAAAAAAAAAA</td>
<td class="col2"><i class="fa fa-pencil" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-pencil" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td>
</tr>
</table>
</div>
Now I am looking for resizing the columns dynamically. So when the user resizes the top table column it should resize the corresponding bottom cell column.
I tried td{resize: horizontal;} but it is not working and I guess that is because of td{min-width:100px;max-width:100px;}.
Is there a way to achieve the column resizing in this table?
I am a beginner with CSS and jQuery. It would be of great help if you could put an example code. Thanks you.
Sample:
I have dragged 'Account Name' column and when I release it, the column width is set.
Ive searched a lot for my own table widget. You need 2 Tables in each of them a colgroup with col´s they have to match your table column count. Ive created a fiddle i hope it´s clear enough. The two col´s of the Tables needs to be synced on your jquery resize functionality.
.head{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
.body{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
<table class="head">
<colgroup>
<col width="100px"> <!-- Our resized column -->
<col>
<col>
</colgroup>
<tbody>
<tr>
<td>#</td>
<td>From</td>
<td>Subject</td>
</tr>
</tbody>
</table>
<table class="body">
<colgroup>
<col width="100px"> <!-- Our resized column -->
<col>
<col>
</colgroup>
<tbody>
<tr>
<td>00001</td>
<td>Mister Exmple</td>
<td>Problems with sharing</td>
</tr>
<tr>
<td>00002</td>
<td>Mister Example 02</td>
<td>Ouh is this a subject?</td>
</tr>
<tr>
<td>00003</td>
<td>Mistr Default</td>
<td>Yo whats up</td>
</tr>
</tbody>
</table>

Disabling the scroll ability in JSFiddle

Is there a way to fully disable scrolling in JSFiddle.
I've tried:
position: fixed;
and
overflow: hidden;
however I can still scrolldown when I embed the results in my site. I wondered if anyone had any tips on how to fully fix something and have no scrolling abilities.
My current HTML and CSS:
.hidden {
visibility: collapse;
}
html,
body {
height: fit;
background: #e2dede;
margin: 10px;
}
div {
width: fit;
overflow: hidden;
}
td + td {
border-left: 1px solid #eee;
}
th {
border-bottom: 1px solid #fff;
background: #333333;
color: #fff;
padding: 5px 5px;
font-family: "raleway";
font-size: 14px;
}
td {
border-bottom: 1px solid #eee;
background: #e2dede;
color: #000;
padding: 5px 5px;
font-family: "raleway";
font-size: 13px
}
<table class="tablesorter">
<table>
<thead>
<th>Name</th>
<th>Release Date</th>
</thead>
<tbody>
<tr>
<td>Peter Parker</td>
<td>11/07/2015</td>
</tr>
<tr>
<td>John Hood</td>
<td>11/07/2015</td>
</tr>
<tr>
<td>Clark Kent</td>
<td>12/07/2015</td>
</tr>
<tr>
<td>Bruce Almighty</td>
<td>13/07/2015</td>
</tr>
<tr>
<td>Bruce Evans</td>
<td>14/07/2015</td>
</tr>
</tbody>
</table>
When you embed a JSFiddle demo on your site, JSFiddle adds a "Result" bar across the top to add a link to allow editing the demo in JSFiddle. Because of that bar and a nested iframe set to the same height as the outer frame, a scroll bar shows up (demo).
<iframe height="300" width="100%" src="http://jsfiddle.net/5sadgev6/embedded/result,html,css" allowfullscreen="allowfullscreen" frameborder="0">
<div id="wrapper">
<div id="head">
<h1><a title="Edit in JSFiddle" href="/5sadgev6/light/" target="new">Edit in JSFiddle</a></h1>
<div id="actions" class="">
...
</div>
</div>
<div id="tabs" style="height: 298px;">
<div class="tCont result active" id="result">
<iframe style="height: 300px;" src="//fiddle.jshell.net/5sadgev6/show/light/" sandbox="allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
</div>
...
</div>
</div>
</iframe>
Look at the height settings added by JSFiddle in the above HTML.
So essentially, you can't prevent the embedded JSFiddle iframe from scrolling since it's the iframe within the embedded iframe that has a set height.
If you don't like the scroll:
Submit an issue to jsfiddle: https://github.com/jsfiddle/jsfiddle-issues
Don't use an embedded jsFiddle on your site.
Make a Stylish style that sets the iframe embedded within the iframe height to auto - this would only work on your browser, but would apply to the sites you specify.

Overlapping Two DIVS Horizontally

Hi I have two divs within a table cell (making a Timeline) and I need them to overlap rather then come under each-other.
The position attribute of all DIVs inside the cell has to remain the same (because of a drag/drop JQUERY plugin I used)
Link to Fiddle
Link to Updated Fiddle
<tr style="border:1px; height:30px;">
<td style="border:1px solid black; position:static">
<div style="margin-left:0;width:50px;display:inline;position:relative">
<div style="background-color: green; position:absolute">
Div1
</div>
</div>
<div style="margin-left:0px;width:20px;display: inline; position:relative">
<div style="background-color: red; position:absolute">
Div2
</div>
</div>
</td>
<td>
</td>
</tr>
I need both DIVs to be start relavtive from the edge of the cell.
Thanks
As far as I can tell you just need to push the red <div> down a bit. And since you've positioned it absolutely, it's easily done with top:
<div style="background-color: red; position:absolute; top:10px;">
Check this update on your jsFiddle
They're going to be stacked like this, you should also be able to float the divs and set z-index explicitly to stack them.
http://jsfiddle.net/ianfc89/JDff9/13/
HTML
<body onload="REDIPS.drag.init()">
<script>
REDIPS.drag.dropMode = 'multiple';
</script>
<div id="drag" class="containDiv">
<table class="tableWhole">
<tbody>
<tr>
<td class="tableCell">
<div style="position:relative">
<div id="A125_Contain" class="drag progressContainer" >
<div id="A125" style="cursor: move; background-color: red; width: 500px; height: 20px; ">A125</div>
</div>
<div id="B125_Contain" class="drag progressContainer" >
<div id="B125" style="cursor: move; background-color: green; width: 100px; height: 20px; ">A125</div>
</div>
<div>
</td>
<td class="tableCell"></td>
<td class="tableCell"></td>
<td class="tableCell"></td>
<td class="tableCell"></td>
<td class="tableCell"></td>
</tr>
<tbody>
</table>
</div>
Styles
.containDiv {
}
.tableWhole {
width:1000px;
table-layout:fixed;
}
.tableCell {
width:300px;
height:60px;
border:1px solid black;
}
.progressContainer
{
display:inline; border-bottom-style: none; position: relative; top: 0px; left: 0px; width: 100px; height: 20px;
}

Categories