HTML Anchor tag issue - javascript

I have a piece of code like below
<div>
<ul>
<li>Test1</li>
-------
-------
-------
<li>Test46</li>
</div>
It displays the html page with 46 links. The issue is when i scroll down and select the 46th or the ones just above this the page is going back to the top again. why is it happening so and is there any way to prevent it ?

href is blank thats why its going at top. You can use this instead of keeping blank:
Test46

href="" contains the URL "" which is a relative URL that resolves to "the URL of the current page".
When you click on the link, the browser follows it and goes to the current page.
As is normal (absent of any specific directive otherwise), when it goes to a page, it starts at the top.
If you don't want to link to the page: Why are you using a link in the first place?
If you just want something to dangle JavaScript from, use a button instead.
<button type="button">Test46</button>
You can style it to remove the default background colour and border, and set the colour scheme to match that of a link if you want it to look like a link.

An empty string in the href attribute <a href=""> means in modern browsers to go to the current page. This will basically just reload the current page, and as such it will go to the top.
One way to prevent from going to the top is to use href="javascript:void(0)", as mentioned by #Manwal or you can simply remove the href attribute completely (note in that case it will not show up as a clickable hyper-link).

Related

Android WebView: how to scroll to an <a name=here> position

I'm loading a self-created HTML page into a WebView in an Android app.
The HTML page contains a tag like <a name="here"></a> somewhere in the middle.
After loading that page, I'd like to be able to programmatically scroll to that position, as if I had clicked on a here link.
I tried with loadURL and with loadDataWithBaseURL, with every possible parameter combinations that I could think of, without success.
Note 1: I want to be able to scroll to that position after the page has been already displayed.
Note 2: I cannot use scrollTo(x,y) because I don't know the y position of that <a name="here"> anchor within the page. If I could figure out the y position in the page of that <a name> tag, that would also solve the problem, but I don't know how to find that y value either.
(P.S. I'm loading the self-created HTML page by calling loadDataWithBaseURL(null, _html, null, null, null); where _html is the string with my HTML page)
1) Inside <script></script> part of your HTML page, create a Javascript function to programmatically click a link on the same page:
function myFunction(){
document.getElementById('myLink').click();
}
2) Instruct your HTML to run your Javascript function once the page is 100% loaded adding an onload event handler to your body HTML tag, this way:
<body onload="myFunction();">
3) Inside the body area of your HTML, anywhere, create an empty link just to have the functionality of a click to the anchor you want (as you suggested, the reference to your anchor is #here:
4) Finally create an anchor at the desired position inside HTML:
<a name="here">HERE</a>
That's it. When the page is loaded it will go to the desired position.
If you want to try this before use... https://jsfiddle.net/vapx8rzk
Answering my own question, thanks to the above suggestions I found that calling "scrollIntoView()" works for me, like this:
Instead of <a name="here"></a>, I use an "id" attribute, like e.g.: <span id="here">
I call webView.loadURL("javascript:document.getElementById(\"here\").scrollIntoView()");

Current menu item

I've been trying every single tutorial I found online and none seems to work for me.
I've got these buttons:
<a href='faq.php'><div class='button'>
<div class='button_top'>
</div>
<div class='button_bot'>
FAQ
</div></a>
http://jsfiddle.net/6G8bk/
and I'd like that the top of the button would stay highlighted if the page url is same as href of the button.
Ty for any answers in advance!
Here's the fixed jsfiddle with jquery I tried but still won't work: http://jsfiddle.net/6G8bk/4/
A few things:
In your jQuery, you're trying to select all <a> elements that have a parent class of button, and according to your HTML you do not have (the button class is a child of the <a> element).
The page's URL won't work in JSFiddle because it will get the JSFiddle link, which will be different from the one on your website.
Since you want button_top to be visible on hover, you'll need to use JavaScript. As fas as I know, you can't manipulate another element on hover with pure CSS.
Here is a working Fiddle of what I think you want. I've left comments in the code that might help you.
http://jsfiddle.net/6G8bk/6/
You can retrieve the current url page by using $_SERVER["SCRIPT_NAME"] and comparing it to each element of the menu.
If it match, you put another class in the menu element with CSS rules to have the layout you want.

iframe top window status change

I have a link in Iframe and am redirecting users to final destination say x.com through an intermediate php script. However I want the users to see the final destination link in their status bar when they mouseover the link.
I have tried everything to change the window.status(in desperation) but nothing works. I have tried so far :
<a onmouseover='window.top.status="x.com";return true;'....
<a onmouseover='window.parent.status="x.com";return true;'....
<a onmouseover='parent.window.status="x.com";return true;'....
This has been disabled in most modern (and even not so modern) browsers: https://developer.mozilla.org/en-US/docs/Web/API/window.status
If you want to do this, you can create a function onload to create the link element, and change it on mousedown. There is a good example here: How to change window.status by onmouseover of a createElement()
Alternatively, you can skip the status all together and use a tooltip or something else to let users know where they will be forwarded.
It's better you to have the desired href inside tag. So users will see the needed string in status bar. Then change href on click to go to the needed php script.

What does href expression do?

I have seen the following href used in webpages from time to time. However, I don't understand what this is trying to do or the technique. Can someone elaborate please?
An <a> element is invalid HTML unless it has either an href or name attribute.
If you want it to render correctly as a link (ie underlined, hand pointer, etc), then it will only do so if it has a href attribute.
Code like this is therefore sometimes used as a way of making a link, but without having to provide an actual URL in the href attribute. The developer obviously wanted the link itself not to do anything, and this was the easiest way he knew.
He probably has some javascript event code elsewhere which is triggered when the link is clicked, and that will be what he wants to actually happen, but he wants it to look like a normal <a> tag link.
Some developers use href='#' for the same purpose, but this causes the browser to jump to the top of the page, which may not be wanted. And he couldn't simply leave the href blank, because href='' is a link back to the current page (ie it causes a page refresh).
There are ways around these things. Using an empty bit of Javascript code in the href is one of them, and although it isn't the best solution, it does work.
basically instead of using the link to move pages (or anchors), using this method launches a javascript function(s)
<script>
function doSomething() {
alert("hello")
}
</script>
click me
clicking the link will fire the alert.
There are several mechanisms to avoid a link to reach its destination. The one from the question is not much intuitive.
A cleaner option is to use href="#no" where #no is a non-defined anchor in the document.
You can use a more semantic name such as #disable, or #action to increase readability.
Benefits of the approach:
Avoids the "moving to the top" effect of the empty href="#"
Avoids the use of javascript
Drawbacks:
You must be sure the anchor name is not used in the document.
The URL changes to include the (non-existing) anchor as fragment and a new browser history entry is created. This means that clicking the "back" button after clicking the link won't behave as expected.
Since the <a> element is not acting as a link, the best option in these cases is not using an <a> element but a <div> and provide the desired link-like style.
is just shorthand for:
It's used to write js codes inside of href instead of event listeners like onclick and avoiding # links in href to make a tags valid for HTML.
Interesting fact
I had a research on how to use javascript: inside of href attribute and got the result that I can write multiple lines in it!
<a href="
javascript:
a = 4;
console.log(a++);
a += 2;
console.log(a++);
if(a < 6){
console.log('a is lower than 6');
}
else
console.log('a is greater than 6');
function log(s){
console.log(s);
}
log('function implementation working too');
">Click here</a>
Tested in chrome Version 68.0.3440.106 (Official Build) (64-bit)
Tested in Firefox Quantum 61.0.1 (64-bit)
It is a way of making a link do absolutely nothing when clicked (unless Javascript events are bound to it).
It is a way of running Javascript instead of following a link:
link
When there isn't actually javascript to run (like your example) it does nothing.
Refer to this:
Link to the website opened in different tab
Link to the div in the page(look at the chaneged url)
Nothing happens if there is no javaScript to render
javascript: tells the browser going to write javascript code
Old thread but thought I'd just add that the reason developers use this construct is not to create a dead link, but because javascript URLs for some reason do not pass references to the active html element correctly.
e.g. handler_function(this.id) works as onClick but not as a javascript URL.
Thus it's a choice between writing pedantically standards-compliant code that involves you in having to manually adjust the call for each hyperlink, or slightly non-standard code which can be written once and used everywhere.
Since it is a styling issue, instead of polluting the HTML with non valid syntax, you could/should use a W3 valid workaround:
Format the HTML properly, without href, following the W3 accessibility guide lines for buttons.
Use CSS to fix the initial goal of applying a clickable UX effect on a control.
Here's a live example for you to try the UX.
HTML
<a role="button" aria-pressed="false">Underlined + Pointer</a>
<a role="button" aria-pressed="false" class="btn">Pointer</a>
CSS
a[role="button"]:not([href]):not(.btn) { text-decoration: underline; }
a[role="button"]:not([href]) { cursor: pointer; }
I was searching for a solution that does not refresh pages but opens menu items on Ipads and phones.
I tried it on also mobile, It works well
Dr
1. Use that java script to Clear an HTML row Or Delete a row using the id set to a span and use JQuery to set a function to that span's click event.
2. Dynamically set the div html to a string variable and replace {id} with a 1 or 2 etc. cell of a larger div table and rows
<div class="table-cell">
<span id="clearRow{id}">
Clear
</span>
</div>
<div class="table-cell">
<span id="deleteRow{id}">
Delete
</span>
</div>
//JQuery - Clear row
$("#clearRow" + idNum).click(function(){
$("someIDOrWildcardSelector" + idNum).val("");
$("someIDOrWildcardSelector" + idNum).val("");
$("someIDOrWildcardSelector" + idNum).val("");
});
//JQuery to remove / delete an html row
$("#deleteRow" + idNum).click(function(){
//depending upon levels of parent / child use 1 to many .parent().parent().parent()
$(this).parent().remove();
});

how return to top button works

I have looked around many places return to top button .when i click on that that takes me to top of the page.
some time some links taking me to particular place how does this works
is this html tack ticks or javascript..can i do this without page loading ?
<a name="top">Top of the page</a>
...
return to top
Note: HTML5 recommends using id="top" rather than name="top"
return to top
The #top bit refers to the id of an element that resides at the top of your page. In most cases this will be something like #header where you have:
<div id="header"></div>
at the top of the page. I'd suggest not using name as I believe the attribute is now deprecated.
Of course, to make it a little more fancy you could use something like:
http://webdesignerwall.com/tutorials/animated-scroll-to-top
If you require to jump to a particular portion of the page by default during page than read on:
Just append the id of the tag with URL.
Eg:
<div id='myID'>Some content</div>
Now if your URL ends with #myID than it shall jump to that portion automatically.
Lastly you can use javascript too:
<a href="#" onclick="document.getElementById('someId').scrollIntoView(); return false</a>
but assuming all modern browsers can do some id it is less needed nowadays

Categories