We have a button setup in our application that looks something similar to the following:
<div class="button" onMouseOver="this.className='buttonHover'" onMouseOut="this.className='button'">
<h2>Button Title</h2>
</div>
I'm trying to do the same thing with an a4j:commandLink tag, but it is not working properly. here is the code I wrote:
<div class="button" onMouseOver="this.className='buttonHover'" onMouseOut="this.className='button'">
<a4j:commandLink action="#{action.method}" id="buttonId">
<h2>Button Title</h2>
</a4j:commandLink>
</div>
The HTML that this renders is incorrect, and the <h2> tag ends up outside the <a> tag. Here is what is rendered:
<div class="button" onMouseOver="this.className='buttonHover'" onMouseOut="this.className='button'">
<h2>Button Title</h2>
<a name="myForm:buttonId" id="myForm:buttonId" onClick="A4J.AJAX.Submit........" href="#"></a>
</div>
The onclick is getting rendered correctly, and the link should work, but the h2 tag needs to go inside the a tag in order for the button to render correctly on screen.
The HTML that this renders is incorrect
JSF doesn't render it that way. It's the webbrowser itself who interpreted the obtained HTML markup that way. You most likely looked in HTML DOM inspector in webbrowser's web developer toolset as available via F12, instead of straight in the raw HTML source as available via rightclick, View Source.
As to the why the webbrowser interpreted it like that; having a block level element like <h2> nested in an inline element like <a> is invalid HTML. The webbrowser basically chokes on that and pushes the block level element outside any inline element in the HTML DOM tree.
Just swap them, and the browser will be happy.
<h2>
<a4j:commandLink value="Button Title" action="#{action.method}" id="buttonId" />
</h2>
Related
Was wondering why when I clicked my button in html it wasn't responding later found out that it will only respond and redirect when I clicked the wording inside "Get Started" was wondering why. This is the code I'm using
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>RAID 2 EARN</h1>
<h2>TECHNOLOGY</h2>
<p>We make it easy!</p>
<button class="main__btn">Get Started</button>
</div>
<div class="imgmain">
<img id="main__img" src="/IMGS/picture1.svg"/>
</div>
</div>
</div>
It is because you're actually clicking the anchor tag inside of the button and the button click doesn't have any actions associated with it. The size of the hyperlink is always only the size of its content. You should change your CSS to style your hyperlink to look like a button. Typically, you can do something like this:
<a class="main__btn" href="raid2earn.html">Get Started</a>
This way you're HTML spec compliant and your hyperlink is styled to look like a button but you're using default browser patterns to complete your action.
Your anchor tag is enclosing only the 'Get Started' text instead of the button. This way, only the text becomes a link
Actually, every html element has a job.
<a> for connecting to outer files
<button> for the inside actions
And you can style everyone as you want.
But:
if you still need to use the button and put the a inside and need to be able to click the button and do the action of the a, there are many many ways, some in html, some in css, and others in javascript.
In html, the easiest solution to your issue is to flip the elements, and make the a outside the button like that:
<a href="#">
<button>Click the button now</button>
</a>
This one is just the easiest.
And there are many others in html and css and javascript.
But again, you must use every element in its own purpose.
Sure you are putting a link tag inside a button because you want a button look and feel. just style your a element the way you want your button to look like as suggested above.
Cheers
This is my PUG/JADE code is below
a(href="#card")
div.tile
h1 open card
#card
a(href="#") click to close
But this code doesn't print correctly, the .tile has print out of <a>,
you can view the printed code below.
<div class="tile">
<a href="#card">
<h1>Open card</h1>
</a>
<div id="card">
click to close
</div>
</div>
i need this code so:
<a href="#card">
<div class="tile">
<h1>Open card</h1>
<div id="card">
click to close
</div>
</div>
</a>
Links within links is invalid HTML. Jade is presumably using a HTML builder internally which will correct the syntax. You should see the same result if you hand write the HTML you think you want and view it in a browser - it will move the second a tag outside the first.
I had a similar use case, where I needed a DOM Element with a click handler inside a div which was inside an anchor tag.
I used a span for the interior clickable element, and used the JavaScript function addEventListener. Remember to use event.preventDefault() on the interior clickable element, so you do not trigger the href on the enclosing anchor tag.
I have a search engine plugin that outputs results in a basic structure:
<a href="page url">
<div class="searchResult">
<h3>Page title</h3>
<p>Page url</p>
<p>Page <meta> description</p>
</div>
</a>
The plugin is designed to integrate into an existing website so it has no default styling. However, websites are supposed to be usable even without CSS through the use of the correct, semantic HTML tags. Currently the displayed URL is indistinguishable from the description and would appear as a software glitch without additional styling.
Google uses the <cite> tag, however in HTML 5 <cite> should be used for the title of a work, not a URL so this isn't the answer.
Is there a HTML tag that is designed to show a URL other than <a>, a URL that is not clickable? What is the semantic approach for this?
If I understand you correctly, you want the url to be a link but also display as a url. To do this put the url in the a tag twice, like so:
This can then be style as desired by the destination page.
<style>
a {
color: blue;
text-decoration: underline; }
</style>
http://www.google.com/<br /><br />
Edited to add:<br /><br />
<a>http://www.google.com/</a>
The href attribute is required for default link styling.
Since adding css seems to be an issue I doubt you can use JS but if you can here's a solution that requires the css class .do-not-open to prevent links from opening.
I have used <a> tag inside <div> which is not working in IE
my code structure is like :
<div>
<a target="_top" href="address">
<button>
</button>
</a>
</div>
So It is working fine in all browsers except IE.
When I click on button it is not redirected to specified url from tag.
What you are doing is not recommended - don't wrap a button in a link. Style your link like a button or use an onclick:
<button onclick="window.open(href);">
</button>
(Addendum: Just for accessibility, don't use target on your links since it messes with people who use screen readers. Only apply a target after page load when there is javascript available. Also, people like to control where their new page opens - it's not something you should try to dictate too much.)
button tag is only allowed within a <form> tag. Since there is no form, IE is ignoring this. Other browser have a more defensive "do what I mean" parser probably ...
You might do it like this:
<input type="button" onClick="document.location='address'; return false" value="click me" />
I am using anchor tag for linking my welcome page to my main page. It is working on chrome but not in mozilla.
Code:
<div id="wel1"><h1>WELCOME TO ASSESMENT ENGINE</h1></div>
<div id="wel2">
<div id="wel3"><p id="wel4">Instruction:</p><br>
<p id="lang">Total number of questions : 5.<br><br>
Time alloted : 3 minutes.<br><br>
Each question carry 10 mark, no negative marks.</p>
</div>
<div id="wel5">
<p id="wel4">
Note:</p><br>
<p >
<ul>
<li><p>Click the 'Submit Test' button given in the bottom of this page to Submit your answers.</p></li>
<li><p>Test will be submitted automatically if the time expired.</p></li>
<li><p>Don't refresh the page.</p></li>
</ul>
</p>
</div>
<button id="bu">START THE TEST</buttton>
</div>
In this image START THE TEST button working on chrome perfectly but not on mozilla.
You have invalid close tag </buttton>
Try:-
<button id="bu">START THE TEST</button>
Demo
Although the code works if the end tag spelling error is corrected, it is illogical and forbidden in HTML5 to nest interactive elements: the a element must not have interactive content like a button element. A click on such an element could activate the outer element, or the inner element, or both. Although this might not matter in this specific case, it’s still not recommended.
Instead, you can use an image of a button an make it a link:
<img src="start.png" alt="START THE TEST" border="0">
or use a minimal form (submitting a form is different from following a link, but the differences often don’t matter, or could be an improvement):
<form action="as.html"><button type="submit">START THE TEST</button></form>
Spell mistake in the Closing button tag, Use </button> instead </buttton>