When the user clicks on (or moves their mouse over) my tables' column headers, I will use JavaScript to popup a lengthier description of the data in that column.
However, in order to entice the user to move the mouse over (or click on) the column headers, I need to make them "look clickable". I think I've seen this done before using a HTML link that doesn't actually link anywhere, something like
Age
From a semantic markup point of view this seems like a bad approach, because the element isn't actually a link, I just want to make it look like a link, so that the user knows something will happen when they click on it.
Is there a better approach?
Thanks,
Don
One option is to use the CSS "cursor" property to make the cursor turn into the "hand" pointer that is typically used for links:
.myHeaderClass{
cursor: pointer;
}
If your page applies special styling to links (e.g. a different color) you could also do the same for these headers, of course.
Related
When i tab (via tabulator) through the elements of my page, im jumping on each single sort-by-column element in the table header (which by click sorts the datatable e.g. asc/desc by the column).
Is there any way to prevent this? I dont want to jump on the sort-elements inside the header, when i press tab.
for testing ->
http://www.primefaces.org:8080/showcase/ui/data/datatable/sort.xhtml?jfwid=96c2f
just press tab and you will jump through the headers.
I need this for a page where the user tabs through all input elements - for workflow optimization. Jumping through all the sort-elements of all tables on this page is a big time waster.
Sortable table headers are focusable for a reason: accessibility. This is important and in some cases and countries even required. Not something you want to throw out of the window.
If you want to optimize the user experience, why not set the focus to the first field the user is supposed to deal with? PrimeFaces offers a validation aware Focus component which can help you with this task. That's the route I would take.
See also:
https://www.primefaces.org/showcase/ui/misc/focus.xhtml
https://primefaces.github.io/primefaces/10_0_0/#/components/focus
If you really, really want to disable focussing of sortable table headers, you could use a bit of JavaScript to set the tabindex of the sortable headers to -1 to prevent them from being focusable:
$("th.ui-sortable-column").attr("tabindex", "-1");
But, again, I would go for the focus option.
See also:
Make an HTML element non-focusable
I had made my own gridview .Now I want to make every row in gridview clickable.
For example: when user click on row.Then another page is displayed with more information.
my first way
<div onclick=""></div>
my second way
<div> this contain images and labels</div>
I want to know which is more efficient way.
If I use "onclick" this will postback whole page.And
then all input field send back to server.
I think this will slow down the server.
I want to know which way is better and faster
I don't think these are the optimizations you should be concerned about..
Anyway, I think ab anchor is more clear, can be shared and requires less code on your side.
However, if your issue is having an event handler and not going to an element, you should register to the onclick
This seems simple enough but I can't quite think of how to actually do it...
In IBM Web Content Management (WCM) version 7 I have a Presentation Template (PT) which calls a Menu Component to display some content items.
I also have some (static) links on the sidebar which I want to basically just change the menu component that is being used, and that's it.
So for example...
In the PT:
[Component name="Main Page"]
When I click on a link, I want the exact same PT to be displayed except I want it to use:
[Component name="Next Page"]
Basically, Main Page and Next Page are showing the same content items, they just have different filters on them (so they appear to be different pages). The "Main Page" shows "everything" and then if you click on a link it's suppose to only show a subset of that.
I can't quite figure out how to connect the link to the PT to change it. I've thought about using JavaScript or JSP to simply rewrite the HTML, but even then I'm not sure how I set it up to say that: "if the link has been clicked, rewrite the HTML" because I'm not sure what to even point the link to, or pass through the link.
I thought about creating different content items with different PTs to link to, but there are about a dozen links (and therefore a dozen different Menu Components that I want to use), so I thought it might be better in the long run to just use 1 dynamic PT (in case the number of links grows).
It is only that one component that needs to be changed in order to display how I need for every link though.
Any ideas how to go about doing this?
So this is how I resolved this:
I created a component reference element in the content items called "menuComp" and then I set that to point to the appropriate Menu Component for each particular page.
In the presentation template, I removed the component reference and changed it to an [Element] tag which used key="menuComp".
I have a site on which I use several divs with one class, which are displayed, and severals divs with an other class which are hidden.
I would then like to have two buttons, which I can use to toggle between which one of the two classes are displayed, with the button for the currently displayed class beeing inactive.
When the button is clicked I would like it to take effect all through the site, so the correct class is also displayed or hidden on other pages on the site.
To simplify:
So if I click button A, class A is displayed all through the site, and button B is hidden. If I then click button B, class B is displayed all through the site, and button A is hidden.
Any ideas to an easy solution for this?
Since new UK legislation requires you to tell the users of the website about all cookies the website stores on their machine, I would recomend you use a session variable, you could use $_SESSION['class']="class1"; using PHP or you could use Session["class"] = "class1"; in C#, you could then check that session variable using an if statement by doing:
if($_SESSION['class'] == "class1")
{
// show class 1
}
else
{
// Show class 2
}
Te above code will work in C# by replacing the $_SESSION['class'] with Session["class"] To show or hide a div, you could either do it server side by adding the different styles in problematically or you could use javascript, though I'm not sure how you'd gain access to session variables via JavaScript since they are server side. JQuery would be a good library to use for showing/hiding DIVs though.
I'd probably store the current state in a cookie if it were me. Then just display/hide as it fits the users current state.
I've got a select list and I want people to be directed to id tags once they choose their respective options.
I know that I'm going to have to use some kind of onClick() but what is the JavaScript that I should use to forward to the anchor of the value?
See this answer: Programmatically scroll to an Anchor Tag
Basically...
onclick="document.getElementById('targetID').scrollIntoView(true);"
or
window.location.href = '#targetName';
However, it looks like at least some versions of IE don't recognize clicks on <options>, so you'll have to place the onclick code on the <select> instead. If you make the value of each option the #anchor you're going to (and remember, set the id of the anchors as well as the name), you should be able to get the value of the clicked option and then scroll to it. This will take a lot less code as well since you write one scrolling function in one click event, and then maintain the data of the option values.