Is it possible to make a link that would normally go to an id:
<a href="http://example.com/page#someid">
instead go to a class:
<a href="http://example.com/page.someclass">
Would the page scroll wildly up and down, trying to reach all the elements with that class, or would it just do nothing?
It would do nothing, except look for a file called "page.someclass" at the server and most probably yield a 404. Please refer to the URL spec because you're wildly confusing CSS selectors with the 'hash' part of the URL.
Why don't just try it?
JS FIDDLE DEMO
If you are using a class als anchor link, your browser tries to open it as url, like in the example named above index.content. Because he is not able to find it, you will receive an 404 not found or 403 forbidden error.
Related
With this simple anchor link & anchor target - originally defined by Tim Berners-Lee as a HTML Fragment Identifier - is there a way to stop a false JavaScript error from appearing in Aurelia?
HTML:
In Page Link
...
<a name="in-page-link">The link scrolls/jumps here</a>
JavaScript Router Error #1 (Not a real error):
Error: Route not found: /in-page-link
That's a false positive error. Of course it's not found! It's an in page link! It isn't a route! That JS "error" isn't a real error.
Is there a way to suppress that error, without having to over-engineer a JavaScript solution - to measure scroll heights & adjust the page offset - simply get around the flawed Node.js design paradigm, where routers break a basic HTML feature to create regex paths AKA: routes? Why do I need to invent a JS fix for something a framework broke? If you break it, you fix it, right?
I've tried using Aurelia's router-ignore idea, but it doesn't work for links which start with hash tags. This similar SO answer doesn't work (& the 2nd line of the OP question was incorrect): How do I keep on the same page by clicking on internal anchor links, using Aurelia?
Is there a router configuration BYPASS feature, which won't try to re-route the URL to another location?
I've tried using nav: false in the router configuration, but it wants a moduleId. There isn't a moduleId for an in page link target.
With a basic router configuration JSON block like this...
{
name: 'no_redirect',
route: ['in-page-link'],
nav: false
}
... how do I stop either the first JavaScript error (up above) or this additional JavaScript error from appearing, considering in page links won't have nor need to use these: moduleId, redirect, navigation nor viewPort? It's just an in page link.
JavaScript Router Error #2:
Uncaught (in promise) Error: Invalid Route Config for "in-page-link": You must specify a "moduleId:", "redirect:", "navigationStrategy:", or "viewPorts:".
I'm trying to make this HTML link work, without having Aurelia throw false JavaScript errors into the console.log. Is there an easy way to do that?
In Page Link
...
<a name="in-page-link">The link scrolls/jumps here</a>
I figured out a solution for my problem!
I tried getting it to work with anchor links & router-ignore, but neither of those worked out for the site that I'm building. Perhaps it's using an older version of Aurelia, which doesn't have that router-ignore feature yet? Maybe. I don't know. I didn't check.
There is an open bug for my 1st JavaScript error on GitHub. It also has an interesting router configuration in it, which would address my 2nd JavaScript error.
I've discovered a faster & simpler work-around, which other Aurelia developers might like!
I reached out to Rob Eisenberg, who was kind enough to point me to his discord.aurelia.io site. While searching it, I found an interesting work-around idea! After exploring it & the related code examples, I was able to get the 1st false JavaScript error to disappear... without having to over-engineer any browser pixel measuring logic! I really didn't want to have to write any JS scrollbar math again, using clientOffset values. Here is a good example of measuring the scrollbar height.
I have repeatedly written code like that in the past, but I wanted to avoid having to reinvent that wheel... yet again! I really wanted to figure out another way to fix this basic snag, without having to write any custom scrollbar math logic because it felt like I was writing too much code to fix a bug in the underlying framework. Other frameworks, besides Aurelia also suffer from hijacking the '#' in the URL to create routes. It appears to be a recurring issue in the Node.js community.
This fast work-around for Aurelia is super small, fast & easy to implement. Perhaps someone will enjoy this!
Change <a href="#in-page-link"> to <div class="link" click.trigger="jumpDown()">.
Add a method into the behind-the-scenes matching JavaScript file, which sets a boolean:
jumpDown () {
this.linkClicked = true;
}
Change <a name="in-page-link"> to <button class="btn" focus.bind="linkClicked">.
Use CSS to style the link, plus add a cursor: pointer; property & hide any button styles, as desired.
So the final code would look like this:
HTML:
<div class="link" click.trigger="jumpDown()">In Page Link</div>
...
<button class="btn" focus.bind="linkClicked">The link scrolls/jumps here</button>
JavaScript:
jumpDown () {
this.linkClicked = true;
}
CSS:
.btn {
/* Style as desired. */
}
.link {
color: #0000FF;
cursor: pointer;
text-decoration: underline;
}
Then the original JavaScript error #1 vanishes! The link click still works! No additional router configuration is needed! Web developers look like web rockstars! The quality assurance team is happy! Problem solved!
I'm pretty new to Gatsby/React and web development in general, so this may be a very simple fix, but I can't figure out what the problem could be.
I'm currently working on my header and making links to each of the pages on my website and am having some trouble with the "activeStyle" attribute. So before describing specifics here is a simplified version of what I am trying to do:
<Link to="/" activeStyle={{color: 'gold'}}>Home</Link>
When I place this link on a page other than home it will still highlight the link gold even though it isn't actually the active page. However, if I use the same exact code but instead link to the /about page, it will work correctly and the link will only be gold if I am on the about page. Am I missing something?
I attempted to set the link to="/index", but Gatsby through an error at me saying that "/index" does not exist and gave a list of the pages on my site, one of which was "/". I honestly can't think of what's going on with this.
Thanks!
Link doesnt have activeStyle prop. Instead of using Link you should use NavLink. It has the following props:
<NavLink>
activeClassName: string
activeStyle: object // seems you are looking for this one
exact: bool
strict: bool
isActive: func
location: object
react-router v4 doc might be useful for you
I just have created primitive html page. Here it is: example
And here is its markup:
www.google.com
<br/>
http://www.google.com
As you can see it contains two links. The first one's href doesn't have 'http'-prefix and when I click this link browser redirects me to non-existing page https://fiddle.jshell.net/_display/www.google.com. The second one's href has this prefix and browser produces correct url http://www.google.com/. Is it possible to use hrefs such as www.something.com, without http(s) prefixes?
It's possible, and indeed you're doing it right now. It just doesn't do what you think it does.
Consider what the browser does when you link to this:
href="index.html"
What then would it do when you link to this?:
href="index.com"
Or this?:
href="www.html"
Or?:
href="www.index.com.html"
The browser doesn't know what you meant, it only knows what you told it. Without the prefix, it's going to follow the standard for the current HTTP address. The prefix is what tells it that it needs to start at a new root address entirely.
Note that you don't need the http: part, you can do this:
href="//www.google.com"
The browser will use whatever the current protocol is (http, https, etc.) but the // tells it that this is a new root address.
You can omit the protocol by using // in front of the path. Here is an example:
Google
By using //, you can tell the browser that this is actually a new (full) link, and not a relative one (relative to your current link).
I've created a little function in React project that could help you:
const getClickableLink = link => {
return link.startsWith("http://") || link.startsWith("https://") ?
link
: `http://${link}`;
};
And you can implement it like this:
const link = "google.com";
<a href={getClickableLink(link)}>{link}</a>
Omitting the the protocol by just using // in front of the path is a very bad idea in term of SEO.
Ok, most of the modern browsers will work fine. On the other hand, most of the robots will get in trouble scanning your site. Masjestic will not count the flow from those links. Audit tools, like SEMrush, will not be able to perform their jobs
If the url() function in CSS is called without any parameters, does it send a request to the page's URL?
I am building an angular app and I have the following, rather naive code in my partial:
<div style="background-image: url({{scope.image_url}});">
{{scope.message_text}}
</div>
When the app loaded, I noticed that there was a call being made to my page's URL causing my server-side handlers to fire some analytics events incorrectly.
From my observation, I saw this behavior on Chrome & Firefox. However, I am not able to locate any documentation which states the behavior of the url() function when no argument is passed.
Please let me know if this is the correct behavior or if I am missing something.
As described by W3, the url() function expects a string as a parameter. Here in your case $scope.image_url was resolved to an empty string, which is a legal Relative URL, so browser will try to resolve this to a full URL, which in your case is base_url + ''.
You can verify that by change $scope.image_url = '1', then you can see one request to http://yourdomain/1.
To prevent this I would suggest you to create a fallback directive to show a default image if you don't have a image for this record, see this stackoverflow answer for more details
I think he's resolving your empty bind as url(undefined).. So He'll try to resolve the URL http://<domain>/path/to/your/page/undefined .
Do you initialize scope.image_url on page load?
To prevent this, I suggest to bind the entire style attribute, and not only the url() ... If there is no "empty" url(), I think it won't load a random request... Or if the background is only static, use CSS classes instead of style attribute...
I want to open a page on click of a link. Below is the link.
<a href='#' onClick=window.open('\\122.96.212.765\spread\form\5.0\tx1\NA\show\SPREAD_Show_ _33_PM\index_VIN_Test_ZASF91A.htm','_self') >CLICK HERE</a>.
But when i click the above link 404 error is displayed on the page as the URL is changing as below:
http://localhost:8080/122.96.212.765spreadform%05.SPREAD_Show_ _33_PMindex_VIN_Test_ZASF91A.htm
Please suggest, do i need to add ay extra code so that onclick even will work.
can try changing your \'s to /'s
As Geoff said, changing your backslash characters with forward slashes should solve your issue. I'm going to assume that because you tagged the question with spring and spring-mvc that you are trying to make this request to a Spring controller with a #RequestMapping matching the URL.
Your request is 404'ing because the actual request is being made to the incorrect URL because your backslash characters are causing issues with either parsing the URL, or generating the request URL. Because the request URL is malformed, it isn't getting picked up by your Spring Controller.
Fix your onclick URL and it should work.
The url used in your code,
"\\122.96.212.765\spread\form\5.0\tx1\NA\show\SPREAD_Show_ _33_PM\index_VIN_Test_ZASF91A.htm",
is syntactically incorrect.
The url does not have 'Scheme' part ("http:", "ftp:", etc.) and strange delimiter '\' are used instead of "/".
If valid url line "http://www.cnn.com/" is used, your code will work.
Try following:
<a href="#" onClick=window.open('http://www.cnn.com/','_self') >CLICK HERE</a>