I want to add several new tags/subpages/sub-contents (I don't know what it is called) like this one:
http://www.rle.mit.edu/gg/publications/#1456759349089-640f1dcb-938f
【publications】is a page in which there are 【2016】,【2015】,...
When I hit 2016, the relative contents show up.
How can I do this?
Thanks.
from looking at the demo you've given, you're talking about an accordian. Try this plugin https://wordpress.org/plugins/tabby-responsive-tabs
If you wanna do it yourselve, copy this into your file:
<script>
function pshow(id){
document.getElementById(id).style.display="block !important";
}
function phide(id){
document.getElementById(id).style.display="none !important";
}
</script>
Show p1
Hide p1
<p class="hide" id="p1">This is p1</p>
Add this under design> customize css
.hide{display:none !important;}
I wonder if someone can guide me on how to remove the url label that appears at the bottom of the page when you hover over an anchor (I wonder if it's even posible). I've googled a lot and didn't find any answers.
Suppose I have
<a href="www.somepage.com" title="The Page">Link< /a>
in the bottom of the page there will appear a tooltip/label showing "www.somepage.com".
Please see here for an example
Thanks in advance!
You can use either Javascript or JQuery.
For example, you can set to A attribute "href=#" and add an attribute url=www.somepage.com something like this:
Link
If you click over this nothing happen.
Now, you need to apply with javascript or JQuery click event. The next example is using JQuery and Javascript:
At the bottom of page's body:
<script>
$('#link').click(function() {
var url = $(this).attr('url');
window.location.href=url;
});
</script>
I have a dynamic generated ImageButtons in a ListView, In ItemDataBound if an image have no link i need to make it disabled, i have tried the following,
img.Enabled = False
img.DescriptionUrl = "javascript:void(0);"
img.PostBackUrl = "javascript:void(0);"
img.CssClass = "imageButtonClass"
img.Style.Add(HtmlTextWriterStyle.Cursor, "pointer")
CSS:
.imageButtonClass
{
cursor:pointer;
}
That's made the targeted images disabled in all browsers , however, The cursor changed to pointer in IE only. Not in Firefox and Chrome!
Any suggestions?
Be sure you have declared a doctype. That is the source of most cross-browser inconsistency issues.
Most new pages should be using the HTML 5 doctype as follows:
<!DOCTYPE html>
It might also help if you compare your example with this working one: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor. As you can see, this works fine in FireFox. Note the doctype declaration at the top of the page.
Is it possible to hide the time-slots in "agendaWeek" View? I'm using Primefaces <p:schedule> which based on the FullCalendar. I only add AllDay-Events to this specfic schedule, so my client decided to hide the time-slots.
I hope there is a way.
Best regards
Can't you just use the basicDay and basicWeek views? Rather than agendaWeek/agendaDay? Those two views don't show the time-slots..... Saves messing around with the CSS etc!
customize the header template it will save you tons of css altering.
<p:schedule id="mySechedule"
rightHeaderTemplate="month, basicWeek, basicDay"
value="#{myBean.eventModel}"/>
not sure if that's what you mean
but to hide the first column in schedule try this css selector (remove formID\3A if you got prependId = "false" in your form that contains the scheduler )
#formID\3A scheduleID th.fc-agenda-axis{
display:none
}
or run this js code (tested on primefaces showcase)
jQuery("th.fc-agenda-axis").hide()
Update
This is how to hide the time slots (what the OP was really looking for)
#formID\3A scheduleID table.fc-agenda-slots{
display:none
}
To hide the Month-Button, simply use this Code.
<style type="text/css">
.fc-button-month{ display: none; }
</style>
For Week-Button use CSS Selector .fc-button-agendaWeek and for the Day-Button: .fc-button-agendaDay
Regards!
I have this a and I don't know that I need to insert into the "onmouseover" so that the cursor will change to finger pointer like a regular link:
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a>
I read somewhere that I need to put:
onmouseover="cursor: hand (a pointing hand)"
But it's not working for me.
Plus I'm not sure if this is considered JavaScript, CSS, or just plain HTML.
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover="" style="cursor: pointer;"> A </a>
It's css.
Or in a style sheet:
a.menu_links { cursor: pointer; }
You can do this in CSS:
a.menu_links {
cursor: pointer;
}
This is actually the default behavior for links. You must have either somehow overridden it elsewhere in your CSS, or there's no href attribute in there (it's missing from your example).
I like using this one if I only have one link on the page:
onMouseOver="this.style.cursor='pointer'"
in css write
a.menu_links:hover{ cursor:pointer}
Here is something cool if you want to go the extra mile with this. in the url, you can use a link or save an image png and use the path. for example:
url('assets/imgs/theGoods.png');
below is the code:
.cursor{
cursor:url(http://www.icon100.com/up/3772/128/425-hand-pointer.png), auto;
}
So this will only work under the size 128 X 128, any bigger and the image wont load. But you can practically use any image you want! This would be consider pure css3, and some html. all you got to do in html is
<div class='cursor'></div>
and only in that div, that cursor will show. So I usually add it to the body tag.
I think the "best answer" above, albeit programmatically accurate, does not actually answer the question posed. the question asks how to change the pointer in the mouseover event. I see posts about how one may have an error somewhere is not answering the question. In the accepted answer, the mouseover event is blank (onmouseover="") and the style option, instead, is included. Baffling why this was done.
There may be nothing wrong with the inquirer's link. consider the following html:
<a id=test_link onclick="alert('kinda neat);">Click ME!</a>
When a user mouse's over this link, the pointer will not change to a hand...instead, the pointer will behave like it's hovering over normal text. One might not want this...and so, the mouse pointer needs to be told to change.
the answer being sought for is this (which was posted by another):
<a id=test_link onclick="alert('Nice!');"
onmouseover="this.style.cursor='pointer';">Click ME!</a>
However, this is ... a nightmare if you have lots of these, or use this kind of thing all over the place and decide to make some kind of a change or run into a bug. better to make a CSS class for it:
a.lendhand {
cursor: pointer;
}
then:
<a class=lendhand onclick="alert('hand is lent!');">Click ME!</a>
there are many other ways which would be, arguably, better than this method. DIVs, BUTTONs, IMGs, etc might prove more useful. I see no harm in using <a>...</a>, though.
jarett.
Add an href attribute to make it a valid link & return false; in the event handler to prevent it from causing a navigation;
A
(Or make displayData() return false and ..="return displayData(..)
Solution via pure CSS
as mentioned in answer marked as the best
is not suitable for this situation.
The example in this topic does not have normal static href attribute,
it is calling of JS only, so it will not do anything without JS.
So it is good to switch on pointer with JS only.
So, solution
onMouseOver="this.style.cursor='pointer'"
as mentioned above (but I can not comment there) is the best one in this case.
(But yes, generaly, for normal links not demanding JS, it is better to work with pure CSS without JS.)
<! –– add this code in your class called menu_links -->
<style>
.menu_links{
cursor: pointer;
}
</style>
In the above code [cursor:pointer] is used to access the hand like cursor that appears when you hover over a link.
And if you use [cursor: default] it will show the usual arrow cursor that appears.
To know more about cursors and their appearance click the below link:
https://www.w3schools.com/cssref/pr_class_cursor.asp
div{cursor: pointer; color:blue}
p{cursor: text; color:red;}
<div> im Pointer cursor </div>
<p> im Txst cursor </p>