Is it possible to make a whole table as link?
I have a table which displays some statistical data, I wish to add up an additional functionality to this table so that .. when a user clicks on any part of the table, webpage should guide him/her to new page.
It's not really possible. However, it can be easily emulated with JavaScript. You just need to asign an onclick event handler to the table and make it change the document.location property:
var myTable = document.getElementById("my-table");
myTable.onclick = function(){
document.location.href = "http://example.com";
}
You can also provide and adequate cursor with some CSS:
table#my-table{
cursor: pointer;
}
put a around your table
The biggerLink plugin for jQuery does pretty much what Álvaro G. Vicario suggested and it has a few extra niceties such as title attribute handling and :hover handling.
Related
How can I make a switchable table with buttons to lead to different view of another table? Something like this:
As you can see, once you click on the buttons it takes you to another table list.
Here is a base: http://jsbin.com/agavid/136/edit
Need something similar to this.
You can create several different tables and use a simple JS/jQuery script to show and hide the tables based on which button is pressed.
Essentially you would show all tables at start (for progressive enhancement), then hide all of them except the first one. Then when a button is clicked, hide all the tables and show only the one associated with that button.
Here's a demo of what I'm talking about. http://jsfiddle.net/7Ywbn/2/
(function () {
var tables = $("table");
//Grabs all the tables
tables.hide().first().show();
//Hides all the tables except first
$("a.button").on("click", function () {
//Adds eventListner to buttons
tables.hide();
//Hides all the tables
var tableTarget = $(this).data("table");
//Gets data# of button
$("table#" + tableTarget).show();
//Shows the table with an id equal to data attr of the button
})
})();
Hope I understood your question correctly.
here is a suggestion
wrap each table in a <div id="table1"> <div id="table2"> etc.. and hide them all by default. here is some help on that: hiding div using js
and then only show the <div> for the table associated with the button the user has clicked on. you can do this using javascript, jquery as a couple examples.
you may need to start looking into learning some basic javascript/jquery if you don't already know any, you are going to need it.
good luck.
You could create multiple divisions within the same file and hide all the divisions except the primary you want to display during the initial page load. then use "onClick='showNextDiv();" inside the buttons themselves.
A sample of the javascript would be:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script language="JavaScript" type="text/javascript">
jQuery.noConflict()
function showNextDiv() {
document.getElementById('DivName').style.display = "block";
document.getElementById('FirstDiv').style.display = "none";
}
</script>
All this is saying that when someone clicks on a button this script runs and displays the 'DivName' div. That's what "block" means. It also turns off the division "FirstDiv" by using the "none".
You can add as many "block" and/or "none" statements to the script. If you have 6 divisions you would want to display one and turn off 5.
I hope this is helpful. I'm not an expert at this but it works fine for me.
I would like to make a simple drop down menu when you click your choice from the list, it acts as a link.
Sorry for title being so ambiguous, I just do not have any idea what to call this.
The easiest way is to create a select list with attributes representing the links, then use JavaScript to jump to a link when it's clicked.
But a more accessible way would be to create a list of links, then use JavaScript to construct a select list from them. This way, the links would still work if JavaScript was turned off.
With jQuery, something like:
Link 1
Link 2
And your script is:
var $sel = $("<select/>")
.appendTo("body")
.change(function() {
document.location.href = $sel.val();
})
$("a").each(function() {
$("<option/>")
.appendTo($sel)
.val(this.href)
.html(this.innerHTML)
});
Do you mean that when you select an option from a drop-down, the browser goes to a different URL?
If so, here's a good page that describes how to accomplish that: http://www.davesite.com/webstation/js/theory1jump.shtml
The reason I want to use the together is that I want to hide the content like display: none does, without leaving any whitespace as visibility: hidden does.
At the same time I want the hidden content not to be copied when the user copies the entire table from the webpage, not because it is sensitive information but because the user hid the field and therefore doesn't want it copied. visibility: hidden doesn't copy but display: none does, so I have quite a dilemma.
Anyone know a solution?
Edit:
What I ended up doing was just what was suggested, save the information as Javascript (as it is not sensitive information anyways) and create/remove dynamically with Javascript.
I do not think giving the element visibility: hidden prevents the user copying the information in the table, although this may be browser specific behavior. Have a look at the test I've set up: http://jsfiddle.net/a9JhV/
The results from Firefox 3.6.8 on Windows 7 is
Copy ME! Don't copy me :( Copy ME! Copy ME!
Copy ME! Don't copy me :( Copy ME! Copy ME!
Which doesn't work as expected.
I've cooked up some code, it took the quite a bit work of cook up... have a look here: http://jsfiddle.net/a9JhV/7/
It uses jQuery to hide and show the table columns - actually removes them from the DOM, not just play around with their visibility and whatnot. Whee!
Why not remove the node from the page? You could accomplish this by using:
<script type = 'text/javascript' language = 'JavaScript'>
document.getElementById('yourDivId').innerHTML = '';
//OR
document.removeChild(getElementById('yourDivId')); //(I think this is right...document might need to be replaced by the div's parent)
</script>
You should remove the "hidden" DOM object using javascript and then recreate it again if user wants it back. Data from deleted records can be stored in session storage or hidden inputs for example.
If you want elements HIDDEN from the source, place them in a separate text file and load it using an ajax-like call... this will prevent the html from being in the source.
If you place a clear image OVER the content they also will not be able to highlight it easily (and by using javascript you can likely disable their ability to do a ctrl+a)
hope that helps!
It's a good idea to create an object to represent the table:
var myTable = function(tableName){
// If you want to assign columns dynamically you could create this.addColumn();
this.Columns = new Array(
new Array("row1","row2","row3","row4"),
new Array("row1","row2","row3","row4")
);
this.reBuild = function(){
for (col in this.Columns){
for(row in this.Columns[col]){
// put the cell in the table
}
}
};
};
I didn't test this code, it should just illustrate the gist of storing and building a table.
I want to find and replace functionality in contentEditable div. I want to add one toolbar in which one find and replace button placed. when one press this button then one popup window open and ask for keyword to search when keyword is given then it will find only in given div id not whole document and highlight it.
Is this jquery plugin what you are looking for?
You can call it like this:
jQuery(function()
{
var options =
{
exact:"exact",
keys:"lorem ispum"
}
$("#myDiv").SearchHighlight(options);
});
I want to store some additional data on an html page and on demand by the client use this data to show different things using JS. how should i store this data? in Invisible divs, or something else?
is there some standard way?
I'd argue that if you're using JS to display it, you should store it in some sort of JS data structure (depending on what you want to do). If you just want to swap one element for another though, invisible [insert type of element here] can work well too.
I don't think there is a standard way; I would store them in JavaScript source code.
One of:
Hidden input fields (if you want to submit it back to the server); or
Hidden elements on the page (hidden by CSS).
Each has applications.
If you use (1) to, say, identify something about the form submission you should never rely on it on the server (like anything that comes from the client). (2) is most useful for things like "rich" tool tips, dialog boxes and other content that isn't normally visible on the page. Usually the content is either made visible or cloned as appropriate, possibly being modified in the process.
If I need to put some information in the html that will be used by the javascript then I use
<input id="someuniqueid" type="hidden" value="..." />
Invisible divs is generally the way to go. If you know what needs to be shown first, you can improve user experience by only loading that initially, then using an AJAX call to load the remaining elements on the page.
You need to store any sort of data to be structured as HTML in an HTML structure. I would say to properly build out the data or content you intend to display as proper HTML showing on the page. Ensure that everything is complete, semantic, and accessible. Then ensure that the CSS presents the data properly. When you are finished add an inline style of "display:none;" to the top container you wish to have dynamically appear. That inline style can be read by text readers so they will not read it until the display style proper upon the element changes.
Then use JavaScript to change the style of the container when you are ready:
var blockit = function () {
var container = document.getElementById("containerid");
container.style.display = "block";
};
For small amounts of additional data you can use HTML5 "data-*" attribute
<div id="mydiv" data-rowindex="45">
then access theese fields with jQuery data methods
$("#mydiv").data("rowindex")
or select item by attribute value
$('div[data-rowindex="45"]')
attach additional data to element
$( "body" ).data( "bar", { myType: "test", count: 40 } );