i'm trying to remove the light gray line that's next to the darker gray line:
After searching the rechart library through and through i decided to try and hide it with a css file.
this is the code :
.recharts-layer.recharts-cartesian-axis-tick line{
display: hidden;
}
I've also tried :
.recharts-cartesian-axis-tick-line{
display:hidden !important;
}
and still doesn't work.
it's important to note that the css file is linked and when trying to style something else it works.
this is what i see when i inspect and pick the element in the dev tools :
any help will be appreciated!
What you need to do is remove the tickLine from YAxis.
Something like that:
<LineChart>
...
<YAxis tickLine={false} />
...
</LineChart>
You can check more about it in docs API.
I want to add a custom cursor to my html picture gallery, where there I get a 'previous' or 'next' custom cursor over the left or right sides of the images.
I have tried adding a custom cursor through html and css (also tried built in cursors).
I had code that worked for this, but lost it in a hard drive crash. I think the previous effort was in css.
I've spent ~8hrs research trying to rebuild this, now resorting to trial & error & error & ...
img.pad {
float: right;
padding: 2px;
}
.lmap {
cursor: cell, url(larrow.png)
}
.rmap {
cursor: progress, url(rarrow.png), auto
}
<img usemap="#imap" class="pad" src="img_0001.jpg" width="850" height="638" title="img_0001.jpg">
<p>
<map name="imap"><area shape="rect" class="lmap" coords="0,0,340,637" cursor= copy href="P001.html" >
<area shape="rect" class="rmap" coords="510,0,849,637" href="P003.html"></map>
I get no err msg & nothing beyond the (default) finger when hovering over the linked portions of the image.
The linkage works (even with bad cursor code), but I would like to get the cursor part running again.
I know the code is butchered, but I have tried many versions, arrgh! I really want the png images, per the css section.
Try:
.lmap {
cursor: url(larrow.png), cell;
}
.rmap {
cursor: url(rarrow.png), progress;
}
The url declaration should be first, while the other values are used as a fallback in case the url doesn't work. It doesn't make any sense to have the url as a fallback to a native value, as a browser will never choose to fallback to url value.
More info on cursor CSS here.
I have a chart:
<telerik:RadHtmlChart ID="chrtInvestmentAmount" runat="server" Transitions="true" DataSourceID="SqlDataSource1" Height="256px" Skin="Glow" Width="1024px" RenderMode="Auto">
<PlotArea>
<Series>
<telerik:ColumnSeries DataFieldY="InvestmentsAmount" Name="כמות משקיעים"/>
</Series>
<XAxis DataLabelsField="Month">
<TitleAppearance Text="חודש" />
</XAxis>
<YAxis>
<TitleAppearance Text="כמות משקיעים" />
</YAxis>
</PlotArea>
</telerik:RadHtmlChart>
Now in my body tag I have set the direction of the page to rtl, and when i do that the whole chart gets messed up, the text gets cut off a little and all in all it just doesent look good:
for some reason it just gets all messed up. Isn't there some small piece of code which can fix this?
And while im asking, another problem i have is after setting the chart type (bars,lines and so on...) it does not update it and i also notice no line of code is added to the HTML. I dont know if something needs to be added, either way i cant change the chart type. Is there some kind of code which can change the chart type?
Thanks.
RadHtmlChart renders with markup (SVG or VML) so some CSS properties can affect it and break it. To avoid such issues you can have them reset for the charts. For example:
<telerik:RadHtmlChart CssClass="resetChart" ID="chrtInvestmentAmount" runat="server" Transitions="true" DataSourceID="SqlDataSource1" Height="256px" Skin="Glow" Width="1024px" RenderMode="Auto" >
and something like this in the CSS:
.resetChart
{
direction: ltr;
float: none;
text-align: left;
}
as for the chart type - this depends on the type of series you add to the chart. In your case you ahve a ColumnSeries, to add a different type of chart you need a different type of series. This does not happen with just a click on the design time wizard, its first page only preselects the types of charts you can add in the other tabs like the Series tab: http://www.telerik.com/help/aspnet-ajax/htmlchart-design-time-using-visual-designer.html.
A simple solution to my question was just putting the charts in a table, and not touching anything with the css and the problem was solved.
I am working on a project for a mobile bidding system. I am designing the front end of it and ran into a problem with the two buttons that I am using. There are two buttons: 1) raise bid; 2) bid.
Now that being said here is my code
<input class="btnraise" type="image" src="bidraise.png" onclick="raiseBid();"/>
<input class="btnbid" type="image" src="mobilebid.png" onclick="Bid();"/
That works fine. Except the CEO wanted the buttons to kind of wrap around each other. The raise button is a triangle with a concave bottom where a round circle bid button fits up almost touching the concave bottom of the triangle. (not sure if this makes sense) Almost like a golf ball sitting on a tee upside down. This is the CSS I am using to make them almost touch:
.btnbid{
width:250px;
position:relative;
top:-79px;
}
.btnraise{
width:230px;
}
Anyway, I need to make these buttons change (like they are indented) when they are pressed. So I did this:
<input class="btnraise" type="image" src="bidraise-up.png" onmousedown="this.src='bidraise-down.png'" onmouseup="this.src='bidraise-up.png'" onclick="raiseBid();"/>
<input class="btnbid" type="image" src="mobilebid-up.png" onmousedown="this.src='mobilebid-down.png'" onmouseup="this.src='mobilebid-up.png'" onclick="Bid();"/>
That worked just fine on a PC..... But It doesn't work well on a mobile device. The device I have access to is a 3rd or 4th gen iPod Touch. It doesn't change because there is no mouse... I didn't think that one through did I?
So I googled around and found some things that might work. Things like changing the input type from image to button but then they don't line up right. I lose the round bid image sitting inside the concave part of the triangle. So I was thinking that if I just added both events inside of the onclick event then it would work, so I tried this:
<input class="btnbid" type="image" src="mobilebid-up.png" onclick="this.src='mobilebid-down.png'; Bid();this.src='mobilebid-up.png';"/>
This didn't change the image for the mobile. Any ideas? Do I need to take a different approach to this or is there something different for effects on a mobile site?
Answer:
This is what I did:
1) Added id="btnbid"
2) Added ontouchstart event
3) Added ontouchend event
<input id="btnbid" class="btnbid" type="image" src="mobilebid-up.png" ontouchstart="touchStart()" ontouchend="touchEnd()"/>
Then I put this in the script tag:
var btnbid = document.getElementById('btnbid');
btnbid.addEventListener('touchstart', toucchStart, false);
btnbid.addEventListener('touchend', touchEnd, false);
function touchStart( event ) {
document.getElementById("btnbid").src="mobilebid-down.png";
return false;
}
function touchEnd( event ) {
document.getElementById("btnbid").src="mobilebid-up.png";
return false;
}
This gave me the desired effect!!!
You should try onTouch() instead of onclick
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>