Can I create a link that has another link in html.
For example, I want to call an html form and the target will be the sidebar frame.
At the same time, the board frame will also go back to the previous page.
I don't think you would be able to do this in plain HTML, but you could probably use JavaScript to accomplish what you're after.
as steve mentioned you need a bit of javascript:
<iframe id="frame1"></iframe>
<a href="" onclick="update();return false;" >DoubleActionLink</a>
<script>
function update() {
window.open("http://www.stackoverflow.com");
parent.document.getElementById('frame1').src="http://www.w3c.org";
}
</script>
btw, you said
I want to call an html form
html form means you'll submit something to web server...so you aren't asking for pure html solution. Isn't ?
The w3 specification about links clearly states that this is forbidden ..
12.2.2 Nested links are illegal
Links and anchors defined by the A
element must not be nested; an A
element must not contain any other A
elements.
But you can handle the click event through javascript and do additional actions when clicked..
Use target="_top" and set the href to the URL of a <frameset> document which loads all the frames you want by default.
Better yet, don't use frames. They are more trouble than they are worth.
Related
This seems like a very basic HTML question, but I cannot find an answer here or elsewhere that actually works.
What I want to do is jump to an id link on the same document without reloading the document.
Here's my setup. The document is http://www.example.com/mydocument.htm/.
<head>
.
<base href="http://www.example.com">
.
.
</head>
<body>
<!-- Jump from ... -->
<div>
Jump to here.
</div>
<!-- Jump to ... -->
<div id="myid">
<Do stuff>
<Do more stuff>
</div>
</body>
This syntax, according to everything I have read on this site and elsewhere, is supposed to result in a jump within the current document without a page reload.
Doesn't work. My browsers (Firefox, Chrome) automatically stick the base href in front of the bookmark, viz: http://www.example.com/#myid, which opens my home page.
Not what I want.
If I change the href from "#myid" to /mydocument.htm#myid, then the jump completes, but the page reloads. Ditto if I use the absolute address: http://www.example.com/mydocument.htm/#myid.
I'm stuck. Any guidance?
The <base> element instructs the browser to append the URL in the href to all relative URLs on the page. So having:
<base href="http://www.example.com" />
Means that for :
here.
The href is handled as :
http://www.example.com/#myid
Instead of
<current_page>/#myid
You almost certainly don't need that <base> element in the head section, especially based on your further point that using the full URL (which also has http://www.example.com in it) works, meaning your page is already at http://www.example.com and thus doesn't need to make it explicit with <base>.
Alternatively (and I don't actually recommend this, because your use of base seems incorrect), you could change the href of your link to be the current page plus the id hash, like:
here.
As the browser will render the URL (when applying the base href) to :
http://www.example.com/mydocument.htm/#myid
and thus not try to leave the current page as it will treat it the same as if the base weren't set. (Note that this would only work when you have the base href set to the URL of the actual page's base, and as I mentioned earlier, that would make the base element unnecessary).
https://jsfiddle.net/ouLmvd3g/
If you are considering a javascript solution, since the <base> is apparently never necessary, I would recommend an event listener that removes the base element from the DOM rather than your suggested :
a fix using an event listener to remove the base URL for local links
A simple solution would be:
window.onload=function(){
var baseElement = document.getElementsByTagName("base")[0];
baseElement.parentNode.removeChild(baseElement);
}
https://jsfiddle.net/vLa0zgmc/
You could even add a bit of logic to check if the base element's href matches the current page's actual URL base, and only remove when it does. Something like:
var baseElements = document.getElementsByTagName("base");
if (baseElements.length > 0) {
var baseElement = baseElements[0];
var current_url = window.location.toString();
var base_url = baseElement.getAttribute("href");
// If the base url and current url overlap, remove base:
if (current_url.indexOf(base_url) === 0) {
baseElement.parentNode.removeChild(baseElement);
}
}
Example here : https://jsfiddle.net/gLeper25/2/
Thanks to all who responded.
In the end it turns out I was asking the wrong questions. What I needed was a means of jumping to an anchor on the same document without the document reloading. Unfortunately I got fixated on the problem with <base> interfering with the normal <a href....> process.
The actual answer was to use onClick instead, and the code was provided by #Davide Bubz in "Make anchor links refer to the current page when using <base>", and it's simple and elegant, using document.location.hash instead of <a href...>:
Anchor
where "test" is the ID identifying the item to be jumped to.
Several responders pointed to this thread as answering my issues, but I was not smart enough to understand its import until I had read it for the third time. Had I been smarter, I would have saved 6-1/2 hours of wasting my time on trying to fix the <base> problem.
Anyway, problem solved. Thanks to all and especially to Mr. Bubz.
I created multiple buttons, for each created button I want to save some information in an attribute so that I can use it when the button is clicked.
Is there any attribute in HTML button that I can store information to use it at some point?
You can create your own using the new data-* custom data attributes (see w3c specs). What comes at the * is up to you (as long as it is valid HTML of course):
<button id="x123"
data-some-attr="I like this"
data-what-about-this="I like it too"
/>
See the data-attributes, for example here you can find more info.
Example from linked page:
<li class="user" data-name="John Resig" data-city="Boston" data-lang="js" data-food="Bacon">...</li>
HTML5 introduced the data- attribute just for this. So if you were to store a button number, you would call it data-callNum or something similar.
You can read more up on it here: http://www.w3schools.com/tags/att_global_data.asp
As a warning with JS, you can't just use the usual . to access the member, due to the - which will be interpreted as a minus operation. So instead of button.data-attr you have to do button.getAttribute('data-attr').
This code works fine in Chrome, but does not work in Firefox. If the <button> tag is removed it will work in Firefox.
Is there something I can do to make this work in Firefox?
<button>
#Html.ActionLink("Continue","Index","AlternateName")
</button>
Oh no, <a> is invalid inside <button>. That's invalid markup according to the HTML specification. And when you write broken markup all you get is undefined behavior which in addition could vary between user agents, which by the way is what you are observing.
So to make this work, simply fix your markup. You cannot expect a browser to correctly interpret something that is invalid, unless of course you write your own browser.
I don't know what is your scenario but I guess you will have to remove the anchor from this button. If you don't have control over the generated markup (because for example you are using some third party component which spits this invalid markup) as a last resort you could use javascript/jquery to manipulate the DOM after it is created to move the anchor out of this button so that you don't end up with something so broken.
Instead of wrapping the action link in a button tag and formatting the button tag in the style sheet I added a css class to the actionLink like this.
#Html.ActionLink("Add Address", "Create", "Address", null, new { #class = "actionLinkButton" })
Add Button inside Hyperlink tag in mvc, write the Controller and action methods
for passing any parameters:
I am trying to simulate the click event of an anchor tag using watij on mac. I found the tag
<a name="myLink" href="" onClick=""></a>
My code is
Tag link = spec.jquery("a[name=myLink]").click();
But it does not seem to work. Please help.
Thanks & Regards,
Ankur Agrawal
You might try altering your reference to the link. Ex., referencing it by id or class, as shown here:
Hello
-
Tag link = spec.jquery("a.my_link").click();
Additionally, although I am not familiar with Watij, at this point in the code, are you positive that the <a> element has finished loading? You need to verify that all elements in the DOM have loaded before you simulate actions against them.
Today I was working on a tab navigation for a webpage. I tried the Sliding Doors approach which worked fine. Then I realized that I must include an option to delete a tab (usually a small X in the right corner of each tab).
I wanted to use a nested anchor, which didn't work because it is not allowed. Then I saw the tab- navigation at Pageflakes, which was actually working (including nested hyperlinks). Why?
Nested links are illegal
They must be doing some really crazy stuff with JavaScript to get it to work (notice how neither the parent nor the nested anchor tags have a name or href attribute - all functionality is done through the class name and JS).
Here is what the html looks like:
<a class="page_tab page_tab">
<div class="page_title" title="Click to rename this page.">Click & Type Page Name</div>
<a class="delete_page" title="Click to delete this page" style="display: block;">X</a>
</a>
Actually, the code I had pasted previously was the generated DOM, after all JS manipulation. If you don't have the Firebug extension for Firefox, you should get it now.
Edit: Deleted the old post, it was no longer useful. Firebug is, so this one is staying :)
I suspect that working or not working nested links might depend if your browser renders page in strict mode (e.g. XHTML DTD, application/xml+html MIMEtype), or in "quirks" mode.
In spite of nested tags are illegal but writing them using JS will work!, try this:
$('<a>', {
href: 'http://google.com',
html: '<a>i am nested anchor </a>I am top Anchor'
}).appendTo($('body'))