to save space, I would like to consolidate the username and logut buttons at the top of web template into one link. The username would be visible and when you hover over it as in stack overflow or click as in gmail or fb, you have option to logout or do other account related things. Ideally, would like to do this in css or javascript without jquery overhead.
Can anyone recommend simple javascript or other technique as I am very inexperienced in javascript. Don't need complicated full blown drop down menu. It should be something like below, but below is unpredictable...shows menu when page loads etc. Thx.
<html>
<head>
<script>
showMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'block';
}
hideMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'none';
}
</script>
</head>
<body>
<table>
<tr>
<td onmouseover="showMenu()" >username</td>
</tr>
</table>
<div id="box1" onmouseout="hideMenu()">
Logout<br>
</div>
</body>
</html>
UPDATE- this should fix the "jumping" problem:
<html>
<head>
<style type="text/css">
.username {
width: 100px;
border: 1px solid #ff0000;
padding: 3px;
text-align: center;
position: relative;
display: inline-block;
}
#box1 {
display: none;
text-align: center;
position: absolute;
background-color: #ccc;
}
</style>
<script>
showMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'block';
}
hideMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'none';
}
</script>
</head>
<body>
<table>
<tr>
<td colspan=3 align="left">
<img src=":">
</td>
<td colspan=6 valign="bottom" align="right">Menu1 Menu2 Menu3 Menu4 Menu5 Menu6 Menu7
<div class="username" onmouseover="showMenu();" onmouseout="hideMenu();">Username
<span id="box1">
Logout
</span>
</div>
</td>
</tr>
<tr>
<td colspan=9>
<hr color="red">
</td>
</tr>
</table>
</body>
</html>
The problem is that absolute positioning doesn't work the same inside of a span than as it does a div. So I had to change the "username" span to a div and use absolute position for the "box1" span. You could even change the "box1" span to a div as well so it occupies the whole width possible of the "username" div. Let me know how this one goes!
Here is the version where it jumps up. If you put position: absolute; in the style tag the menu extends one more cell to the right past the other columns...
.username {
}
#box1 {
display: none;
}
</style>
<script>
showMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'block';
}
hideMenu = function() {
var div = document.getElementById('box1');
div.style.display = 'none';
}
</script>
</head>
<body>
<table><tr>
<td colspan=3 align="left"><img src=":"></td>
<td colspan=6 valign="bottom" align="right">Menu1 Menu2 Menu3 Menu4 Menu5
Menu6 Menu7 <span class="username" onmouseover="showMenu();"
onmouseout="hideMenu();">Username<span id="box1">
Logout
</span>
</span></b></td></tr>
<tr><td colspan=9><hr color = "red"></td></tr>
</table>
</body>
</html>
Related
I have been trying to create a next and back buttons that go through the images one by one that are in the table.
But the next button, it only brings the first image and stops.
How can the same button "next" have the function of going through all the images?
<p id = "slider"></p>
<div id="galDiv">
<style>
table, th, td {
border: 1px solid black;}
</style>
<table>
<tr>
<td id="1"><img src="gallery/a.jpg" style="width:100px;height:100px;"></td>
<td id="2"><img src="gallery/k.jpg" style="width:100px;height:100px;"></td>
<td id="3"><img src="gallery/2.jpg" style="width:100px;height:100px;" ></td>
<td id="4"><img src="gallery/3.jpg" style="width:100px;height:100px;" ></td>
</tr>
</table>
</div>
<button id="nxt">NEXT</button>
<script>
document.getElementById("nxt").onclick = function()
{myFunction()};
function myFunction() {
var div = document.getElementById('galDiv');
var nextSibling = div.nextSibling;
while(nextSibling && nextSibling.nodeType != 1) {
nextSibling = nextSibling.nextSibling }
}
</script>
How can also create a back button ?
If you are trying to create a facebook like image viewer, you shouldn't use table element.
In order to create such thing you should create a div with container fixed side ,within this div you should have a div with floating images and then your button should change the right position of the inner div.
Or you could use a jquery library such as http://www.jacklmoore.com/colorbox
Your code does nothing. The next sibling to #galDiv is the <button>.
Is this what you wanted?
document.getElementById("nxt").onclick = myFunction;
function myFunction() {
var picture = [
"firstPicture",
"secondPicture",
"thirdPicture",
"fourthPicture"
];
var place = {
"firstPicture": 0,
"secondPicture": 1,
"thirdPicture": 2,
"fourthPicture": 3
};
var table = document.querySelector('table');
if (!table.className) {
table.className = "firstPicture";
}
var nextPicture = (place[table.className] + 1) % 4;
table.className = picture[nextPicture];
}
img[src="gallery/a.jpg"] {
border: 5px solid red;
}
img[src="gallery/k.jpg"] {
border: 5px solid green;
}
img[src="gallery/2.jpg"] {
border: 5px solid blue;
}
img[src="gallery/3.jpg"] {
border: 5px solid black;
}
table {
border-collapse: collapse;
position: absolute;
padding: none;
border: none;
}
#galDiv {
width: 113px;
height: 113px;
overflow: hidden;
position: relative;
}
.firstPicture {
left: 0;
}
.secondPicture {
left: -112px;
}
.thirdPicture {
left: -224px;
}
.fourthPicture {
left: -336px;
}
<p id = "slider"></p>
<div id="galDiv">
<table>
<tr>
<td id="1"><img src="gallery/a.jpg" style="width:100px;height:100px;"></td>
<td id="2"><img src="gallery/k.jpg" style="width:100px;height:100px;"></td>
<td id="3"><img src="gallery/2.jpg" style="width:100px;height:100px;" ></td>
<td id="4"><img src="gallery/3.jpg" style="width:100px;height:100px;" ></td>
</tr>
</table>
</div>
<button id="nxt">NEXT</button>
I added the curimg attribute to the slider. Read the script for yourself. You'll need to add in modulus arithmetic to round around the table entries. As for the 'prev' function. Figure out the same thing with a -1 when selecting the tdnode.
Don't forget to set the curimg attribute after you append the child.
Good luck!
<p id = "slider" curimg='1'></p>
<div id="galDiv">
<style>
table, th, td {
border: 1px solid black;}
</style>
<table>
<tr>
<td id="1"><img src="gallery/a.jpg" style="width:100px;height:100px;"></td>
<td id="2"><img src="gallery/k.jpg" style="width:100px;height:100px;"></td>
<td id="3"><img src="gallery/2.jpg" style="width:100px;height:100px;" ></td>
<td id="4"><img src="gallery/3.jpg" style="width:100px;height:100px;" ></td>
</tr>
</table>
</div>
<button id="nxt">NEXT</button>
<script>
document.getElementById("nxt").onclick = function()
{myFunction()};
function myFunction() {
//Get the slider, parse the int of the 'curimg' attribute
cid = document.getElementById('slider');
current_image = parseInt( cid.getAttribute('curimg') );
//Get the td of that id+1
tdnode = document.getElementById(current_image + 1);
//Clone the image childNode into the slider.
cid.appendChild( td.childNodes[0].cloneNode() );
}
</script>
The code (below) seems to compile without any errors, but the "changebackground" function isn't working. it does nothing when you click on it.
I don't think there is a problem with Syntax, but cant be sure. There are no errors, just no response when i click on the cell.
"MyClick" works, bu t"ChangeBackground" doesn't.
Any thoughts??
<html><body>
<head>
<style>
table,th
{
border:1px solid black
font-size: 15px;
font-family: Arial;
font-weight: bold;
empty-cells: show;
}
</style>
<style>
td
{
font-size: 10px;
font-weight: normal;
font-family: Arial;
border:1px solid black;
empty-cells: show;
align = "middle;"
}
</style>
<style>
p
{
font-size: 18px;
font-weight: bold;
font-family: Arial;
}
</style>
<style>
a.1{ text-decoration:none;color:WindowText}
</style>
<style>
#header{ display:block;top:0px;left:0px;width:100%;height: 112px;position:fixed;background-color: #ffffff;border:1px solid #888;}
</style>
<style>
#content{ margin:113px 0px 0px 0px;display:block;border:1px solid #888;}
</style>
<script type="text/javascript"> function myClick(args) { window.clipboardData.setData('text',args.toString()); }</script>
<script type="text/javascript"> function changeBackground() {document.getElementById(cellID).style.borderColor = "2px solid red"; }</script>
</head>
<p> Scanned Samples </p> <table></table></div> <p> Rack: 202771 - _SMEYER_IND_AC_2D-02 </p>
<table>
<thead>
<tr>
<font size = "10"> </font>
<th> </th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
</tr>
</thead>
<td> <font size = "2"><b>A</b></td>
<td><a class = "1" href = "#abcd"onclick="javascript:myClick('202772')"><center>A1<br>0<br>(202772)</center></td>
<td id = "Cell9"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202780') "; javascript:changeBackground('Cell9')"> <center> A2<br>0<br>(202780)</center> </td>
<td id = "Cell17"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202788') "; javascript:changeBackground('Cell17')"> <center> A3<br>0<br>(202788)</center> </td>
<td id = "Cell25"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202796') "; javascript:changeBackground('Cell25')"> <center> A4<br>0<br>(202796)</center> </td>
<td id = "Cell33"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202804') "; javascript:changeBackground('Cell33')"> <center> A5<br>0<br>(202804)</center> </td>
<td id = "Cell41"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202812') "; javascript:changeBackground('Cell41')"> <center> A6<br>0<br>(202812)</center> </td>
<td id = "Cell49"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202820') "; javascript:changeBackground('Cell49')"> <center> A7<br>0<br>(202820)</center> </td>
</tr>
</table>
</body></html>
You're calling changeBackground with parameters when the function definition didn't have it. Here's an example
javascript:changeBackground('Cell9')"
Here is your function definition
function changeBackground() {
document.getElementById(cellID).style.borderColor = "2px solid red";
}
Try changing that to
function changeBackground(cellID) {
document.getElementById(cellID).style.borderColor = "2px solid red";
}
Also, this is pretty bad form too. You should prefer stylesheets over style tags, and you have a bunch of them. Same thing with the script tags. Please place them in an external JavaScript file.
Also, you are using inline javascript too often like this example
onclick=" javascript:myClick('202812') "; javascript:changeBackground('Cell41')"
This makes the HTML really difficult to read. You should instead use event listeners and place them in your JavaScript file.
Also, the center and font tags are not supported in HTML5.
I have a list of things with links to click for more information which use anchor tags to move down the page. Since there is quite a bit of additional information I have it hidden in expandable/collapsable sections.
So far all I've managed to come up with is an expand collapse on the section itself. I know basically nothing about Javascript so what I have include is some stuff I pieced together from some other sites and research.
I would like for the 'click more' anchor tag link to expand the section automatically when clicked, but something that also collapses it similar to what I have now.
Here is the js I managed to pull together
<script type="text/javascript">
function toggle_visibility(tbid,lnkid) {
if (document.all) {
document.getElementById(tbid). style.display = document.getElementById(tbid).style.display == "block" ? "none" : "block";
}
else {
document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "table" ? "none" : "table";
}
document.getElementById(lnkid).value = document.getElementById(lnkid).value == "[-] Collapse" ? "[+] Expand" : "[-] Collapse";
}
</script>
<style type="text/css">
.hangingIndent {
text-indent: -24px;
padding-left: 24px;
}
#tbl1 {display:none;}
#lnk1 {
border:none;
background:none;
width:85px;
}
</style>
And here is an example of the body
<body style="background-color: #FFFFFF; margin: 20;">
<p style="font-family: Calibri, sans-serif; font-size: 12pt; padding:0px 20px;" class="hangingIndent">
<input type="checkbox">
<strong>Item one</strong><br />
<em>For more information about Item one click here!</em>
</p>
<br />
<table width="800px" border="0" align="center" cellpadding="4" cellspacing="0">
<tr height="1">
<td bgcolor="#333333" colspan="3"></td>
</tr>
<tr bgcolor="#EEEEEE" height="15">
<td>
<strong><a id="Item1">Item one</a></strong>
</td>
<td bgcolor="#EEEEEE" align="right">
<input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');">
</td>
</tr>
<tr>
<td colspan="3">
<table width="100%" border="0" cellpadding="4" cellspacing="0" id="tbl1">
<tr>
<td colspan="3">
<p style="font-family: Calibri, sans-serif; font-size: 12pt; padding:0px 20px;">Lots of extra information about Item one</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
</body>
Thanks for your help!
jquery may be your best route, and in particular the slideToggle or show and hide functions.
In addition, have a peek at jQuery ui accordion
A jquery accordion may be your best route
to hide elements:
document.getElementById(idOfElement).style.display="none"
to show them:
document.getElementById(idOfElement).style.display="block"
lets make a function
function toggleElementDisplay(elementID){
element = document.getElementById(elementID);
if(element.getPropertyValue("display") == "block"){
element.style.display="none";
} else {
element.style.display="block";
}
}
To use it do it like this
<body>
<div id="click" onClick="toggleElementDisplay('stuff');">Toggle</div>
<div id="stuff">Hello</div>
<script>
function toggleElementDisplay(elementID) {
var element = document.getElementById(elementID),
style = window.getComputedStyle(element),
display = style.getPropertyValue("display");
if (display == "block") {
element.style.display = "none";
} else {
element.style.display = "block";
}
}
</script>
</body>
Here is a demo to help
I'm trying to get the thumbnail images on my page to "animate" into position when clicked. So far it isn't working but I don't know why or how. Can someone provide insight into this? I'm trying to do it with the "clicky" function. Basically, I need the small thumbnail to "grow" into the right size in the right location on the page (essentially the middle-top of the page.
Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Farm Animals</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.10.2.js">
</script>
<script>
$('#cluster').hover(function(){
$(this).closest('cluster').css('display', 'block');
$(this).closest('cluster').css({ opacity: 1 });
},
function(){
$(this).closest('cluster').css('display', 'none');
$(this).closest('cluster').css({ opacity: 0.5 });
});
function hilite(a)
{
a.mouseOver(function(){$("#cluster").fadeTo("slow",.5);
}
</script>
<script type="text/javascript">
function imgFade()
{
$('#cluster, #launch, #gas').fadeTo(0, .3);
}
$(document).ready(function () {
$("#cluster, #launch, #gas")
.mouseover(function () {
$(this).fadeTo("slow", 1);
})
.mouseout(function () {
$(this).fadeTo("slow", .3);
});
});
function clicky(something)
{
var t = $(something);
t.animate({right:"150px",top:"150px"},2000);
}
function showImage(clickImg)
{
var dest = document.getElementById("dest");
dest.src=clickImg.src;
dest.alt=clickImg.alt;
var descr = document.getElementById("descr")
if (clickImg.alt == "cluster")
{
descr.innerHTML = holsteinDescr;
}
if (clickImg.alt == "gas")
{
descr.innerHTML = herefordDescr;
}
if (clickImg.alt == "launch")
descr.innerHTML = pigDescr;
}
function hilite()
{
$("#cluster").fadeIn("slow");
}
function lolite(x)
{
x.style.borderWidth = "0px";
}
</script>
<style type="text/css">
.clickable { cursor:pointer; height:50px; width:50px}
.thumbTD { width:60px; height:60px }
caption { font-size:18pt; }
table { border:0px }
#dest { width:400px; height:400px }
#descr { width:420px }
#leftColumn { vertical-align:top }
</style>
</head>
<body onload="imgFade()">
<table>
<caption>Select image on left for more information.</caption>
<tr>
<td id="leftColumn">
<table id ="ta">
<tr>
<td class="thumbTD">
<img id="cluster" class="clickable" onmouseover="hilite(this);" onmouseout="lolite
(this);" onclick="showImage(this);clicky=(this)" src="cluster.png" alt="holstein"/>
</td>
</tr>
<tr>
<td class="thumbTD">
<img id="gas" class="clickable" onmouseover="hilite(this);" onmouseout="lolite(this);"
onclick="showImage(this)" src="gas.png" alt="hereford" />
</td>
</tr>
<tr>
<td class="thumbTD">
<img id="launch" class="clickable" onmouseover="hilite(this);" onmouseout="lolite
(this);" onclick="showImage(this)" src="launch.jpg" alt="pig" />
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td><img id="dest" src="blank.jpg" alt="blank" /></td>
</tr>
<tr>
<td id="descr" > </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
First, you have two functions named hilite in the global space. Change one of their names.
Second, in one of them, you have the code:
a.mouseOver(function(){$("#cluster").fadeTo("slow",.5);
You need to close the function. Also, its mouseover, not mouseOver. In addition, you are often calling it with a non jquery object. To fix these issues, use:
$(a).mouseover(function(){$("#cluster").fadeTo("slow",0.5);});
You may have additional issues. It might be easier if you provided full links to the images sot that I can test your code.
Here is my code. I have tried everything I can think of. I have tried using just div ID's and have now tried classes. Nothing seems to work. I just want the number 2 not to be visible if there is no entry beside it. It doesn't matter if it is in a table or not.
Thanks.
<style type="text/css">
<!--
.leftone {
float: left;
height: auto;
width: auto;
}
.rightone {
float: left;
height: auto;
width: auto;
}
.lefttwo {
float: left;
height: auto;
width: auto;
}
.righttwo {
float: left;
height: auto;
width: auto;
}
-->
</style>
<table width="400" border="0" cellpadding="0" cellspacing="3" id="tableONE">
<tr>
<td width="200" height="50"><div class="leftone">1.)</div></td>
<td width="200" height="50"><div class="rightone">The Number One</div></td>
</tr>
<tr>
<td width="200" height="50"><div class="lefttwo">2.)</div></td>
<td width="200" height="50"><div class="righttwo"></div></td>
</tr>
</table>
<p> </p>
<script type="text/javascript">
<!--
function shownumbers() {
var myNum1 = '[.rightone]';
if(myNum1 != ''){
document.getElementById('.leftone').style.display = "block";
}
else if(myNum1 == ''){
document.getElementById('.leftone').style.display = "none";
}
var myNum2 = '[.righttwo]';
if(myNum2 != ''){
document.getElementById('.lefttwo').style.display = "block";
}
else if(myNum2 == ''){
document.getElementById('.lefttwo').style.display = "none";
}
}
//-->
</script>
You cannot use getElementById with classes. Also, you don't need the '.' or '#' when using these methods in javascript. Below should do what you are asking. Although if there is only ever 1 item of class 'rightone' and 'leftone' you should use ID's.
var myNum1 = document.getElementsByClassName('rightone')[0].innerHTML;
if(myNum1 != ''){
document.getElementsByClassName('leftone')[0].style.display = 'block';
} else if(myNum1 == ''){
document.getElementsByClassName('leftone')[0].style.display = 'none';
}
A more elegant solution would be:
HTML:
<table width="400" border="0" cellpadding="0" cellspacing="3" id="tableONE">
<tr>
<td><div class="left">1.)</div></td>
<td><div class="right">The Number One</div></td>
</tr>
<tr>
<td><div class="left">2.)</div></td>
<td><div class="right"></div></td>
</tr>
</table>
JS:
var right = document.getElementsByClassName('right');
for(var i=0;i<right.length;i++){
if(!right[i].innerHTML){
right[i].parentNode.parentNode.getElementsByClassName('left')[0].style.display = 'none';
} else {
right[i].parentNode.parentNode.getElementsByClassName('left')[0].style.display = 'right';
}
}
Kinda similar to Jason's, but I spent the time so I'mma post it. ;)
JSFiddle: http://jsfiddle.net/H3UNH/1/
HTML:
<table id="tableONE">
<tr>
<td width=50>1.)</td>
<td >The Number One</td>
</tr>
<tr>
<td>2.)</td>
<td></td>
</tr>
</table>
(I do still like the width attribute for cells in tables; it can be moved to CSS but this is one of those exceptions for me where the markup and presentation can have a tiny bit of overlap. Move everything else to CSS. Your mileage may vary.)
CSS:
td { padding: 3px; text-align:left; height: 50px;}
JavaScript:
function shownumbers() {
var rows = document.getElementsByTagName('tr');
for(var i=0,len=rows.length;i<len;i++) {
var _this = rows[i];
var rowCells = _this.getElementsByTagName('td');
if(rowCells[1].innerHTML == "") {
_this.style.display = "none";
}
}
}
shownumbers();
(for the purpose of the demo, I just separately call shownumbers. If you want it to be automatic, make it self-invoking. Otherwise call it from wherever it makes sense)
I think the more important lesson here isn't the JavaScript, actually. ;) I understand that not everyone is writing perfect JavaScript (heck, mine's not perfect either). But you really need to understand the purpose of CSS and classes in general to write good maintainable markup and presentation for the web! I hope that doesn't sound too condescending or anything; it wasn't meant to be.
By using the :empty selector.
var els = document.querySelectorAll('td div:empty'),
i = els.length,
el;
for(;i--; ) {
el = els[i];
do {
el = el.parentNode;
} while ( el.nodeName != 'TR' )
el.style.display = 'none';
}
Fiddle: http://jsfiddle.net/uAUt8/