Currently Trying to Insert a Calendar Token for an Add to Calendar link, within a button. However, the token ignores the styles of the parent it's placed within, so it's blue and underlined. I want to correct these styles that are coming in with the token, but nothing I do works. I tried putting an extra <span> around the token (which was posted as a previous solution to this problem), but when the token renders its <a> tag, the styles from the <span> don't effect it.
How do you avoid this issue with token's that bring in links? Gotta be an easy solution for this right?
You can wrap the calendar link text in a span within the calendar token to change the color.
Related
I see these lines of code in some professional developer's project:
<a href="###">
...
</a>
What is the use of three # instead of one?
That's usually written when you want your anchor tag to not change the href. For instance if you want to attach an event on it later on.
It doesn't matter how many # you are using. The href='#' will make the page jump to the top of the page if clicked.
My preferred way is doing <a href="javascript:void(0);". That way the click does absolutely nothing, instead of jumping the page up.
The first thing about "anchor tags"...
This use of ### in particular is to create a links that don't go anywhere, and to do that the href attribute must have a value. Please read the href W3C spec page for more info about that.
Browsers render default styles for elements and will change the default style of an anchor tag that doesn't have the href property. Instead, it will be considered like regular text. It even changes the browser's behavior with regard to the element. The status bar (bottom of the screen) will not be displayed when hovering an anchor without the href property. It is most optimal, then, to use a placeholder href value on an anchor to ensure it is treated as a hyperlink.
I've often seen <a href="#">, and <a href="##"> , a hashtag - # within a hyperlink specifies an html element id to which the window should be scrolled.
href="#some_id" would scroll to an element on the current page such as <div id="some_id">.
href="//example.com/#some_id" would go to example.com and scroll to the id on that page.
href="#" doesn't specify an id name, but does have a corresponding location - the top of the page. Clicking an anchor with href="#" will move the scroll position to the top.
So, when you use <a href="###"> this create a links but it doesn't go anywhere. You can use it from "##","###" and more of hashtag to create a links like a "Hyperlinks" but they take you nowhere.
My Conclusion:
So, what is the use of it?
You use it when you need a hyperlink that doesn't go anywhere. It's just to tell the browsers to change the style to an anchor tag.
Check this JSFiddle demo
As Bhuiyan's answer said, it is a variation on the href="#" trick...
Goal
So, to explain that trick. The trick is to work around the fact that Anchor tags are only rendered as links if they have a target to link to (see this example). The goal is to create a link that looks like a link, but doesn't actually go anywhere.
How it works
The href="#" idiom is taking advantage of the fact that anchors can specify a specific element as a target by using the href="#{other element identifier}]" notation. When you do this the browser will not redirect or reload the page, but instead scroll to that element. So when you specify href="#" you are essentially telling the browser that this is a link, but since there is no valid target element please don't do anything when it is clicked.
Note: It would work just as effectively to say href="#mybogusid" but then you would see #mybogusid appended to the url. Gross.
TL;DR of it all: <a href="###"> is just a way to make the browser render the anchor tag like a link, but not navigate anywhere on click.
I think this is same as Go to link that person just used three "###" instead of one "#". we can use more # if we want.
It was very useful when i had button and js click event. With '#' it scrolled to top every time i pressed the button, but with '###' it stayed in place as needed!
I am not a HTML/CSS expert but I am in charge of developing and maintaining a website for my employer.
I have set of link in the middle of my webpage that I want to have a specific CSS applied to without affecting any of the other links, and really the only change I want to make is to move the title popup to the right. Basically, the pointing hand hover mouse icon blocks the text in the title, so I want to move the popup to the right of the pointer, so that it can be read completely during a hover.
I've seen a few different ways to manipulate the title popup but they are either way too complex for what I need, way too simple in that they affect all <a> tags on the page, or do not explain how to do what I want which is just move the popup to the right a little bit.
You can manually style any element of the page by using 'inline styling' which will not effect any of the other elements on the page.
You do this in the HTML rather than the Style sheet, for example say your style sheet has:
.tinybutton {margin:0;padding;0:}
Which would use the element in HTML as:
<a class="tinybutton" href="#"> </a>
Now let's pretend you want to move the button slightly right without editing the CSS you then use the inline styling like so:
<a class="tinybutton" style="margin-left:10px" href="#"> </a>
So in other words just add style=" " with the styling options you require to the element that you want to edit without effecting the CSS.
Now that you have answered your own question, I know that the titles you are trying to move are tool-tips generated by the browser.
Not only can those not be moved, these tooltips are browser dependent and looks different on each browser. I have no idea which one you are using but it is not Chrome because we made sure that the tooltip does not overlap the mouse cursor.
The other possibility, like the jQuery plugin you mentioned, is to write Javascript that renders each title in its own invisible HTML element. Then it makes those tooltips appear on by adding an a :hover style or mouse-event-handler.
Having done further research on this, I found several questions in StackExchange that indicate that a title cannot be modified. So given this:
<a title='stuff here' href='#'>Click me!</a>
it is not possible to manipulate the "stuff here" section using jscript, css, etc. The only option is to use a jQuery plugin or something along those lines, and that has proven to be beyond my ability to troubleshoot.
For the time being, I simply added spaces to the front of the title to push the text out, like this:
<a title=' stuff here' href='#'>Click me!</a>
The problem that i'm having is that I've specified some rollover buttons, and some div id's to control my image positions. however when i make a new div called Text and put some in, this also seems to trigger my rollover buttons? like its using code from the div above it, even though I've used the <div> tags:
http://jsfiddle.net/bq5MR/2/
Your example doesn't display the images.
You haven't closed your <a> tags which may result in the effect area being larger than you expect.
http://validator.w3.org/ - a free HTML validator which can help pinpoint invalid HTML and potential issues.
You're not closing your second 'a' tag. Try closing it and see if that fixes the problem.
Probably a silly questions, but I'd like to have a hyperlink withing another hyperlink, much like a
<a href="#somewhere">
This is the hyperlink,
and this is the other one
</a>
Aside from that it's not compliant and all, is there a way of doing this?
*Edit: the outer hyperlink is used by a carousel, and won't take the browser somewhere.
Lets think about this. What is the browser suppose to do?
Go to the first hyperlink, or the second one, or both?
If you want the first one, then the second hyperlink is not required.
If you want the second one, then close the first one before and reopen if necessary after closing the second.
If both then write some Javascript to get it to open a new window. for the second hyperlink before loading the first hyperlink.
Anchor tags, just like inline or block level elements, layer up on top of each other when nested such that attributes can be set for different subsets of information or visual space within them. This may be useful if you have a large anchor element functioning as a large button, but want to insert a link to a different location within that button.
Have you tried implementing it? See this jsFiddle proving that nested inline elements work, both with span and anchor tags. Note that the nested element overrides the clickable area subset within the parent element, just as you'd expect it to if you were listening for a hover event.
Disclaimer: While technically this can be done, that doesn't mean that it should be done. Nesting links in particular can result in user confusion and be misleading about what content is pointing to what locations.
You can't nest it, but you can do something I did below..
<a href="somewhere">
This is the hyperlink,</a>
and this is the other one
May be you solution:
<form action="http://myhomepage.ru/" method="get">
second link within
<button>first link</button>
</form>
I've read various posts on this subject and think I understand the usual points of failure. I find that my two product thumbnail images, under the "This Click'n'Pick Set Consists Of The Following 2 Products" heading, are clickable, but do not take me to the named <div> element further down the page. Instead, they cause navigation to http://www.premierrange.co.uk/#bundle_product_anchor_448, for example. I see this both in Chrome (18.0.1025.33 beta) and Firefox (10.0.1) on Linux.
http://www.premierrange.co.uk/index.php?main_page=clicknpick&groups_id=2&chosen_0=243&chosen_1=448
So for example there's an anchor targeting '#bundle_product_anchor_243':
<a href="#bundle_product_anchor_243" title="Click here to jump to the 70cm Truly Curved Black Glass Curved Cooker Hood H77-7B">
<img src="http://www.premierrange.co.uk/thumbnailer.php?filename=images/H77-700.jpg&height=100" alt="70cm Truly Curved Black Glass Curved Cooker Hood H77-7B">
</a>
This targets the <div> further down the page:
<div class="productSeparator" id="bundle_product_anchor_243">
<h1>Product number 1 in this bundle of 2 products</h1>
</div>
I've also tried making the <h1> inside the target <div> be the target instead, in case the target must be an inline element rather than a div, but nothing seems to work.
The <div> containing the badly behaving <a> is completely closed by the time the <div> containing the target element appears in the document. I don't think there's a problem with the target element not being defined at the point in time the <a> is parsed by the browser.
Manually adding "#bundle_product_anchor_448" to the URL does work.
I am aware that the page fails HTML validation on a large number of points, due to a large number of factors that I'm not going to be able to address easily. I'd have thought this basic 'jump to a named element' functionality should work regardless. The page is completely functional other than this little navigation quirk.
Anyone got any clues?
Try removing <base href="http://www.premierrange.co.uk/"></base> from the page header.
The <base> tag specifies the base URL or target for all relative URLs (the ones that don't say http://www.example.com/...) on your page. Without it, your link should function as intended though you may have to fix other links to accommodate this change.
While using the <base> tag in your application, the best approach would be to just use absolute URL's before the hash, with the absolute URL pointing to the same page you're in.
So, assuming that you are on the 'http://example.com/products/curved-glass' page, instead of
<a href="#bundle_product_anchor_243">...
you would need to include the absolute current URL before the hash:
<a href="http://example.com/products/curved-glass#bundle_product_anchor_243">...
Finding out the current URL is a trivial task in most of the environments, and this method also avoids the removal of your <base> tag, action which might have negative consequences in other areas of your application.