Here is my html:
<div id="sidebar">
<table id="table1">
<tr>
<th>Table</th>
</tr>
<tr>
<td id="1">
<div>
<span>
Link 1
</span>
</div>
</td>
</tr>
</table>
</div>
<div id="box">
<img src="iow panorama.png" id="one"/>
<img src="iow panorama 2.png" id="two"/>
</div>
And my CSS:
#sidebar {
display: inline-block;
height: auto;
width: auto;
font-family: Garamond;
font-size: large;
}
#table1 {
border: 1px solid black;
text-align: center;
}
#table1 th {
border: 1px solid black;
}
#table1 td {
border: 1px solid black;
}
#box {
position: relative;
height: 200px;
width: 1200px;
}
#box #one,#two {
position: absolute;
top: 0px;
left: 0px;
}
#one {
visibility: hidden;
}
#two {
visibility: hidden;
}
#1 {
background-color:red;
cursor: pointer;
}
And Javascript:
$("#1").click(function(){
var z = parseInt($("#one").css("z-index"));
z =+ 10;
$("#one").css("z-index", z);
})
Now what I want to happen is the cursor to change to a pointer over the td, and when it is clicked, it triggers the javascript which makes the first image visible but not the second as they are overlayed. Also, the td isn't changing color, even though the CSS should be making it red. What I think is happening is the whole thing is failing at the table/td part of it. How can I fix it so that all of it works? (Also, how do I set the javascript to cause the z-index of the second image to decrease, so I can use another link in the table to create a kind of slideshow, with links to choose the image?)
You've got multiple issues going on here:
1 is not a valid HTML id value for many browsers. HTML 4 requirements for id values are:
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed
by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"),
colons (":"), and periods (".").
This is the cause of the red background style not applying to the td. HTML5 will eventually allow the value that you are using, but you will find many browsers not ready to support that fully.
You're images are both set to visibility: hidden;, but you never change that in your JS. Neither image will ever display, until you set it's visibility value to visible, regardless of what its z-index value is.
Depending on the operating system where your assets are hosted, you may run into issues with your the file names of your images having spaces in them. I would recommend not doing that . . . use and underscore instead of spaces, for example.
UPDATE
Actually, the issue with the id starting with a digit appears to be tied to CSS3 specifications for valid id selectors, rather than the HTML specification support. According to the CSS3 spec, the selector must be a "CSS Identifier", which . . . can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they **cannot start with a digit**, two hyphens, or a hyphen followed by a digit. (emphasis added)
It would be better to provide id for the link than providing id for td
Also as you are going to make a link ( tag)it will automatically have cursor:pointer css.
It would be even better to use rel tags to relate the link and image
I couldnt properly understand your question. However I've made a JS FIDDLE. Hope this helps you. Since you've used $("#1").click() I assume you've used jQuery and I used the same in my code too.
JSFIDDLE
html
<div id="sidebar">
<table id="table1">
<tr>
<th>Table</th>
</tr>
<tr>
<td>
Link1
</td>
<td>
Link2
</td>
</tr>
</table>
</div>
<div id="box">
<img src="http://icons.iconarchive.com/icons/artdesigner/emoticons-2/256/cant-believe-it-icon.png" id="img1"/>
<img src="http://icons.iconarchive.com/icons/artdesigner/emoticons-2/256/too-much-icon.png" id="img2"/>
</div>
js
$('a').click(function(){
imgid = $(this).attr('rel');
$('a').removeClass('active');
$(this).addClass('active');
$('img').hide();
$('#'+imgid).fadeIn('slow');
});
Hope it helps
here's a working example, id of elements shouldn't start with a number though.
<div id="sidebar">
<table id="table1">
<tr>
<th>Table</th>
</tr>
<tr>
<td id="d1">
<div>
<span>
Link 1
</span>
</div>
</td>
</tr>
</table>
$("#d1").click(function(){
$("#one").css("visibility","visible");
})
jsfiddle demo
Related
I have a collapsible table, which opens and closes when clicking on Accounting. It requires a unique layout. I have added a checkbox to my collapsible rows, which must align with the Date column. I have shifted all my titles over with a negative margin, in order to group with the checkbox. Now, I need to extend the borders, so they appear underneath the titles again(see picture below). I have created a codesandbox for your review. Can anyone advise on the best method to extend the borders, so they align with the titles? Please note: My date column uses rowspans, so I don't believe adding padding-left will resolve the issue.
Code Snippet:
<tbody>
<tr>
<td rowSpan="3" id="date">
Date
</td>
<td colSpan="4">
<label className="accounting-label" htmlFor="accounting">
Accounting
</label>
<input
type="checkbox"
name="accounting"
id="accounting"
data-toggle="toggle"
onClick={showNestedData}
></input>
</td>
</tr>
<tr className="accounting-data hide">
<td className="australia-data">
<div className="flex-au-wrapper">
<div className="au-checkbox-wrapper">
<input
type="checkbox"
id="au-checkbox"
name="subscribe"
value="newsletter"
></input>
</div>
<div>Australia</div>
</div>
</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
</tbody>
To extend table border you can give some padding,you can also you can select the one you want with :nth child
in codesandbox the bottom border already covered the checkbox and title 'Accounting'. So, if you also want to cover the Date then please add the following CSS code to yours
.accounting-data,
tr {
position : relative;
/* border-bottom: 1px solid #ccc; */
}
th, td{
border: 0;
}
tr::before {
content : "";
display: block;
position: absolute;
width: calc(100vh + 150px);
top: 0;
background: #555;
border-bottom: 1px solid #ccc;
left: 0;
}
May it helps :)
Made a table for a product listings page that has a row of 3 images, then a row of text below each image, then repeat. Rather than have the page scroll down indefinitely, I figure it would be better to use some JS/jQuery to change the values in each < td > (img & matching text) than to create a new page for every 6 products. However, my kindergarten-level JS is failing me miserably.
While I think the question I'm asking above is pretty obvious, I'm also wondering if this never should have been set up as a table in the first place. It seemed like the easiest way to keep it organized, but the few examples I've seen seem to do this with < div >'s rather than tables.
Here's a JSFiddle I was messing around with: http://jsfiddle.net/jshweky/FgVY2/
HTML:
<table id="saladGrid">
<tr class="saladPics">
<td class="s1"></td>
<td class="s2"></td>
<td class="s3"></td>
</tr>
<tr class="saladTxt">
<td class="txt">
<p>acorn squash, golden beets, pistachios</p>
</td>
<td class="txt">
<p>roasted eggplant, herbed ricotta, sumac</p>
</td>
<td class="txt">
<p>arugula, fennel, blackberries, quinoa, pickled shallots</p>
</td>
</tr>
<tr class="saladPics">
<td class="s4"></td>
<td class="s5"></td>
<td class="s6"></td>
</tr>
<tr class="saladText">
<td class="text">
<p>arugula, orange, golden beets, golden tomatoes, pistachios</p>
</td>
<td class="text">
<p>caesar</p>
</td>
<td class="text">
<p>butternut squash, lime, feta, chili</p>
</td>
</tr>
</table>
<button id="prev">Prev</button>
<button id="next">Next</button>
CSS (paraphrased):
table {
width: 100%;
height: 100%;
margin-top: 0;
padding: 0;
border: 0;
border-spacing: 0;
}
td {
margin: 0;
padding: 0;
border: 0;
text-align: center;
vertical-align: middle;
}
#saladGrid table {
margin: 0 auto;
border-spacing: 30px;
}
.saladPics td {
height: 350px;
width: 350px;
background-position: center;
background-size: 415px 400px;
background-repeat: no-repeat;
border-radius: 250px;
border: 1px black solid;
}
.saladText {
position: relative;
margin-bottom: -20px;
}
.saladPics td.s1 {
background-image: url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1989_zps38d802a7.jpg");
}
I figure it's a matter of creating new var's and writing a function to add 6 to the existing img class (e.g. s1 becomes s7, etc.) but that's just a guess and as I said, even if that's right I'm still in the embryonic stages of JS coding.
Your JavaScript to Swap the image works fine, the issue is the first part of your script. I commented it out in the fiddle and it worked fine. There are definitely better ways to do this (sliding DIVs inside a container, build elements in javascript and append them to the frames on the page - this would give you almost a pinterest style effect of loading new elements at the bottom) - it all depends on how you want to handle it but my suggestion would be to look into using jQuery to add or remove elements to the DOM.
//var s7= new image();
//img.src=url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHC9Vk1U5yC5RWMhUK9Ai2RGIDCSh-wxPt-aleQm9onxi9xbN9dA');
$(document).ready(function () {
$('#prev').click(function () {
$('.s1').css('background-image', 'url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1483_zpsc4ca87cf.jpg")');
});
});
Also, here is an alternate syntax for the .css() that will let you change more than one property of an elements at a time (you will need to use the .html() function to change the text in the following element too):
$('.s1').css({backgroundImage : 'url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1483_zpsc4ca87cf.jpg")', backgroundSize : "cover"}); });
I have the following site:
http://www.pachamber.org/www/advocacy/index.php
When a user clicks the 'General Commerce' href tag towards the bottom, it should slide out the hidden contents. All of the other tags work correctly except this one.
The function behaves unexpectedly only in IE. It looks to be fine in Chrome and FF. When debugging the function, it seems not not grab the height attribute from the div:
<div id="general" style="display: none; height: 30px; overflow: hidden">
The height attribute is showing as 1px on this line:
this.height = parseInt(this.obj.style.height);
Here is the snippit of HTML and the function call:
<table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td colspan="2" style="width: 100%;">
<div class="subheading2" style="border-bottom: thin solid gray; cursor: pointer; color: #000099" onClick="doSlideOut('general');"><a name="general"></a>General Commerce</div>
</td>
</tr>
</table>
<div id="general" style="display: none; height: 30px; overflow: hidden">
<table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td width="53%">
• <a href="gc/testimony/index.php" >Testimony & Comments</a>
</td>
<td width="47%"> </td>
</tr>
</table>
</div>
Any ideas what I am missing?
Thanks.
Beware of id and name attribute when using getElementById in Internet Explorer describes the stupid behaviour of IE which causes the problem of yours.
If there are two elements with the same value for id and name (in your case its the div with id general-commerce and the link General Commerce) IE will grab one of both of them when using getElementById.
The solution would be to change either the name-attribute of the link or the id of the div-container.
One thing I saw was and error in your script.
Errors like these break JS from running properly.
Check out one of my websites to see how to do this with jQuery (look at the links under "Our Curriculum").
$('.lgroup').on('click', function () {
if ($(this).hasClass('directLink')) {
return true
} else {
$('.links').slideUp();
$('.lgroup').removeClass('lactive');
if ($(this).next().css('display') == 'block') {
$(this).next().slideUp()
} else {
$(this).addClass('lactive').next().slideDown()
}
}
});
I'm having some trouble getting my Table and Colspans to work. I'm trying to create a grid that can be used as a calendar. Each 'table' can represent a working day period (8:30pm til 6pm).
In my design I seperated this into 38 columns, one for each 15 minute time span.
I've done this so that I can display non-overlapping events next to each other, and ones that conflict with an already 'used' cell, can be created on a new row within this table.
However, with 38 columns in my design, my colspans are not working.
My first row is set to be 19 and 19, so 50%.
My second row is set to be 38, so that's 100%.
Yet when IE is rendering this, it's displaying the first row as around a 30% / 70% split.
My HTML/CSS/Javascript is below:
<html>
<head>
<script type="text/javascript">
function setColSpan1(){
var x=document.getElementById('myTable').rows[0].cells
x[0].colSpan="1"
x[1].colSpan="37"
}
function setColSpan2(){
var x=document.getElementById('myTable').rows[0].cells
x[0].colSpan="19"
x[1].colSpan="19"
}
</script>
</head>
<body>
<style>
.column {
font-size: 1pt;
width: 100%;
background-color: red;
padding: 0px;
margin: 0px;
margin-bottom: 1px;
border: 1px solid black;
height: 10px;
}
.emptycolumn {
font-size: 1pt;
width: 100%;
background-color: blue;
padding: 0px;
margin: 0px;
margin-bottom: 1px;
border: 1px solid white;
height: 10px;
}
</style>
<table id="myTable" border="0" cellpadding="0" cellspacing="0" width="100px">
<tr>
<td colspan="19"><div id="1" class="column" onclick="alert('test');" title="lala test"></div></td>
<td colspan="19"><div id="2" class="emptycolumn"></div></td>
</tr>
<tr>
<td colspan="38"><div id="3" class="column"></div></td>
</tr>
<tr>
<td colspan="1"><div id="4" class="column"></div></td>
<td colspan="24"><div id="5" class="emptycolumn"></div></td>
<td colspan="13"><div id="6" class="column"></div></td>
</tr>
</table>
<form>
<input type="button" onclick="setColSpan1()" value="Change colspan 1">
<input type="button" onclick="setColSpan2()" value="Change colspan 2">
</form>
</body>
</html>
I started with tests originally of only 6 columns, and that seemed to work perfectly, but increasing my design to 38 has broken this.
Is my design wrong? How can I get this to work accurately? Thanks
it doesn't work because the browser can't calculate correctly width of your columns
you need to create first row with 38 columns (without colspan), then hide it and in your functions work with next row (1st in your case)
e.g.:
document.getElementById('myTable').rows[1].cells
P.S.: id attribute: Specifies a unique id for an element.
Naming rules:
Must begin with a letter A-Z or a-z
Can be followed by: letters (A-Za-z), digits (0-9), hyphens (-), and underscores (_)
In HTML, all values are case-insensitive
and specify a DOCTYPE for your document
I have something very simple but I can not make it work correctly in Webkit and Mozilla
This is my HTML
<li style="padding-bottom: 10px;" class='product'>
<span class ='handle' style="cursor:move; float:left; margin-top:40px; margin-right:8px; margin-bottom:30px; display:none;">
<%= image_tag "page/arrow.png"%>
</span>
<table >
<tr style="border:5px; solid: #444">
<td class="product_contents" style="vertical-align: top;" >
<div class="product_contents" style="width: 480px; font-size: 100%; font-weight: bold; color: #333; margin-bottom: 10px; word-wrap: break-word; overflow: auto;">
STUFF HERE
</div>
<p class="product_contents" style="width: 480px; font-size: 93%; line-height: 150%; word-wrap: break-word; overflow: auto;">
MORE STUFF HERE
</p>
</td>
</tr>
</table>
</li>
And this is my JQuery:
jQuery(function($) {
$(".product").mouseenter(
function () {
$(this).find(".handle").css('display', 'inline'); //show();
$(this).css('background-color','#fffdef');
$(this).find(".product_contents").css('width', '450px');
});
$(".product").mouseleave(
function () {
$(this).find(".handle").css('display', 'none'); //.hide();
$(this).css('background-color','#ffffff');
$(this).find(".product_contents").css('width', '480px');
});
});
Nothing fancy here at all and it works as I expect in Firefox. The image in handle appears on the left and it displaces the content to the right, the content also change colors and size to match the image. PErfect.
But in Webkit it changes the color and the size but there is no displacement. What I want to achieve is pretty basic, there is a better approach?
I can use Jquery but I can not use any plugin.
I'm not sure if I understood your problem right, but I would recommend to try jQuery's show/hide functions:
$(this).find(".handle").show();
$(this).find(".handle").hide();
This one works for me in Firefox, and fails for Conkeror (which was surprising), and fails for SRWare Iron (which is a Chrome-based browser).
The problem seems to be related to the fact that the table is inside a <li> element. For some reason, Firefox treats this table as an inline element, and the other browsers as a block element. Since it is a block element, the table is pushed to the next line, and is not displaced, because the handle is on the previous line. Changing the display style of the table to inline-table fixed the issue for me.
You can hide an element by using the CSS display property and setting it to none.
$("element").style.display = "none"; // hide element
$("element").style.display = "block"; // show element (or inline)