We Keep Coding

Making a button a clickable link (With a twist)

So I have a snippet that I'm using to build some buttons.
<font color=white><button class="button"><span>Register</span></button></font>
<button class="button" onclick="window.location='http://www.google.com';"><span>SP Training</span></button>
<button class="button"><span>Assistance</span></button>
<button class="button"><span>Orders</span></button>
<button class="button"><span>KM Milsuite</span></button>
<button class="button"><span>TMT</span></button>
As you can see I have tried wrapping the whole thing in href, I have tried wrapping the span in href, I have tried wrapping just the font in href, all failed
Ok so I trekked down the java world and tried some on click (numerous variations I have found on this site) none of which work! Every button is a clickable but EVERY button simply links back to the page i'm currently working on. By no means am I an expert at all this but I expected a little give on this!
Any suggestions?

The purpose of a button is to either:
Submit a form (type="submit", the default)
Allow JavaScript to be triggered (type="button")
As you can see I have tried wrapping the whole thing in href
The HTML specification forbids that.
I have tried wrapping the span in href
The span appears to serve no purpose
Every button is a clickable but EVERY button simply links back to the page i'm currently working on
If clicking the button is reloading the current page, then it is probably a submit button inside a form with an action attribute that resolves to the current page (or no action attribute).
If you want a link then use a link and do not use a button.
If you want your link to look like a button, then use CSS to style it that way. Note that the :active pseudo-class is useful for achieving the 3d depressed effect when the link is clicked.

The span tag inside your button is catching the click action. You must take the span out of the "bubbling" chain.
The easiest way is to apply CSS and add the class to your span tags.
span.nonclickable {
pointer-events: none;
}
After that you can catch the button clicks.
A more detailed explanation can be found here: Use CSS to make a span not clickable
It is not quite clear what you want these buttons to do. Use a-tags to link to other pages and use buttons to refer to an action in javascript or a form submit.

You could try this :
<input type="button" onclick="myF()" />
<script>
function myF() {
window.open('http://www.google.com', '_blank', 'resizable=yes');
}
</script>
Hope it helps

How to click on Javascript button in Selenium with no ID (Java)?

I'm setting up a program in Java with Selenium.
At the start of the program, a Chrome extension I'm using with the program loads up with the Chrome instance.
Chrome then navigates to that page, selects all the boxes, and is supposed to click a button on the page that appears because of the extension.
So I am trying to click that button, but it's a Javascript button that comes on the page through the extension. There is no ID that I can use explicitly though.
When I inspect the element, all I see is this:
<a href="javascript:void(0);" class="selected button-task"
style="width: 140px; margin-left: 5px; height: 23px;">
<img src="websiteimage.png here" width="20px">Selected Task</a>
Unlike the other stuff I can click on, there is no type (checkboxes, button, etc) or a specific ID I can seek out. But it is important I click this button. What should I do?
I get this error when I use this:
Exception in thread "main" org.openqa.selenium.InvalidSelectorException: invalid selector:
Unable to locate an element with the xpath expression //a[contains#class,'selected'] and contains(#class, 'repost-selected button-task') and contains(text(), 'Repost Selected') because of the following error:
SyntaxError: Failed to execute 'evaluate' on 'Document':
The string '//a[contains#class,'selected'] and contains(#class, 'repost-selected button-task') and contains(text(), 'Repost Selected')' is not a valid XPath expression.
Thanks!

But it is important I click this button. What should I do?
You can click this button using following approaches :-
WebDriverWait wait = new WebDriverWait(driver,10);
using By.cssSelector() :-
wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector("a.selected.button-task"))).click();
using By.linkText() :-
wait.until(ExpectedConditions.elementToBeClickable(By.linkText("Selected Task"))).click();
using By.partialLinkText() :-
wait.until(ExpectedConditions.elementToBeClickable(By.partialLinkText("Selected Task"))).click();
using By.xpath() :-
wait.until(ExpectedConditions.elementToBeClickable(By.xpath(".//a[normalize-space()='Selected Task']"))).click();

Try This:
driver.findElement(By.xpath("//a[contains#class,'selected'] and contains(#class, 'button-task') and contains(text(), 'Selected Task')")).click()

I figured out how to solve it:
WebElement extensionBox = driver.findElement(By.xpath(".//a[normalize-space()='Selected Task']"));
Actions actionsTwo = new Actions(driver);
JavascriptExecutor jseTwo = (JavascriptExecutor) driver;
actionsTwo.moveToElement(extensionBox).click();
jseTwo.executeScript("arguments[0].click()", extensionBox);
The other answers weren't working because they either wouldn't find the object on the page, or would give compile errors

How do I get a popup open with PhantomJS only knowing the popup id?

I am trying to use PhantomJS to open a popup that is normally called via a link and dump a picture of that popup. I have only found ways using id's but all of the links have the same id, same href value, and same title. The only difference between all of the links is a 3 letter code in the showpopup function that corresponds to the 3 letter link text.
How can this be done? Can I just fire the ShowPopup('XXX') function or will I need to figure out a way to actually click the link?
XXX
This link will then open up the popup:
<div class="ui-dialog-content ui-widget-content" id="XXX" style="width: auto; min-height: 25.7667px; height: auto;">...code...</div>
Which I assume I think I can just have phantomjs screen dump that div correct?

The easiest would be to simply call ShowPopup('XXX'):
page.evaluate(function(){
ShowPopup('XXX');
});
setTimeout(function(){
// do something with it
}, 1000);
You could also click the link with a specific attribute CSS selector a[onclick*="XXX"]. The [attribute*=value] selector matches the element where the attribute contains the value anywhere.

img tag within title attribute

I have read this question: How to add image tag inside title attribute of an anchor tag? and got only one answer: "imposible". However, I saw they can do it in this page: http://truyen.vnsharing.net/Nhom/GoldenSun---yurivn-net
I viewed the page's source and got:
<a href="/Truyen/Citrus-Saburo-Uta?id=7048" title='
<img width="120" height="165" src="http://truyen4.vnsharing.net/Uploads4/Etc/5-1-2013/12456468861citrus_ch01_02-03.jpg" style="float: left; padding-right: 10px" />
<div style="float: left; width: 300px">
<a class="bigChar" href="/Truyen/Citrus-Saburo-Uta">Citrus (Saburouta)</a>
<p>
Nhân vật chính Yuzuko, ngay ngày đầu tiên chuyển trường đã đụng mặt và không mấy cảm tình với Mei - hội trưởng hội học sinh ở trường mới, trong ...
</p>
</div>'>
Citrus (Saburouta)</a>
but the image was not displayed when I put those html code on my website. So how could they do that? Are they using some js script, or something like that?

As other have mentioned you cannot place HTML content inside of "title" attribute - it has to be something custom.
For pure CSS solution (that does not involve JavaScript and mouse-over events) you can place the DIV with tooltip content next to your link, set its style to "display: none" and give your anchors style like
a:hover + div {
display: block !important
}
this will select DIV adjuncted to link and make it visible, but only when you hover over link. You can make it more granular by targeting specific links instead of all of them as the code above.
Here is the demo: http://jsfiddle.net/4WZvL/

To quote the accepted answer to the question you linked to
You need to use custom tooltip look-a-like effect with IMG insdie DIV and on mouseHover event.
They use a custom tooltip look-a-like effect.

The image tag in that title attribute is encoded. Given this, you can place any string you want in the title tag of an anchor, it doesn't mean it's a good idea at all though. You can use javascript to pull the proper image url from any data attribute you set and achieve the same effect so long as you know how to use that url in a logical way. At least that way you would be following some kind of standard and not just abusing the intention of html standards to pull off some fancy tricks.
Juhana answered your question. But to extend the notion, you can easily use data attributes, id's, and classes to set hidden or otherwise referenced html elements for whatever you need. You can hide elements with css and then unhide them with javascript if the desired effect is to pop up that block with the images from the link you provided.
Someone may provide an example if you specify your exact needs and show what you have tried to solve it yourself.

That HTML isn't valid, and although it might be possible it doesn't mean you should do it. Some browsers probably won't display the image correctly.
Use one of the thousands of Javascript tooltip plugins instead. Here's loads for jQuery: https://www.google.co.uk/search?q=jquery+tooltip+plugin

Show/Hide On Click

I have one area of space and two body's of text to show. I have two "hyperlinks" above this area and would like to use those to show/hide the text below. Upon first loading the page, nothing will be showing except for the two links. When you click one link it shows the body of text. When you click the other link it will hide the previous body of text and show the new text. There are only two hyperlinks, but I would like for the user to be able to toggle back and forth at their convenience. Is this possible? Previously I was using javascript to unhide the text because they were in two different areas. I am not too experienced with writing code. I have found some other answers on this topic useful but most of them use buttons and on click listeners. Is there a way to do this using a hyperlink? Code examples are very much appreciated!

You could define a class in CSS that says "Don't show the text in here" then use JS from the hyperlink click to switch the class of the element?
so your html will contain:
<a onclick="showText('text1','text2')" href="javascript:void(0);">Show Text 1</a>
<div id="text1" class="hide"> text1 </div>
<a onclick="showText('text2','text1')" href="javascript:void(0);">Show Text 2</a>
<div id="text2" class="hide"> text2 </div>
Your CSS would contain:
div.hide { display:none; [your properties]; }
div.show { [your properties]; }
and the your JS would look something like this:
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
Does this help at all?

<a id="myLink" href="javascript:void(0)" onclick="javascript:myLinkButtonClick();"> </a>
in javascript you can do this if you use jQuery:
function myLinkButtonClick()
{
$("#myDiv").hide();
}
or
function myLinkButtonClick()
{
$("#myDiv").show();
}
Alternatively you can do .toggle
function myLinkButtonClick()
{
$("#myDiv").toggle();
}

Many will agree that using anchor tags to execute Javascript (and do nothing else) is a little on the messy side, since, among other things, it generates a hash tag in the address bar which can confuse users. That isn't to say that they don't have their place in JS execution.
It is very possible to achieve this however. Here is one possible solution:
Link1
Link2
<div id="div1">Text1</div>
<div id="div2" style="display:none;">Text2</div>
<script>
var currentDiv = document.getElementById("div1");
function show(divID) {
var div = document.getElementById(divID);
currentDiv.style.display = "none";
div.style.display = "block";
currentDiv = div;
}
</script>
The script tag defines a variable and a function: currentDiv, which references the currently displayed div element and a show function, which is used for hiding the currently displayed div and showing a new one.
The anchor tags at the top, when clicked, call the show function, replacing the currently shown element with the one the anchor tag specifies.
In order to get elements to show/hide, the code changes the element's CSS display attribute. A value of block shows the div element, and a value of none hides it. The second div has its display property set to none when the page loads. Javascript will change this attribute when a link is clicked.
No, you do not need JQuery to do this, but it can help.

There's a nice jQuery script that does something along these lines, have a look to see if it's any good for you:
http://api.jquery.com/slideToggle/

This is possible, but a more user friendly way of doing this would be with something like jquery tabs. It's very easy to do it with jquery UI's tab feature, it's all HTML markup with a script that just runs .tabs(); as the function on the ID of the tab element.
Here is a link: Jquery Tabs

Tabs would be the best way to do this. There's plenty of tutorials around for jQuery tabs - here's a fairly basic one which outlines the concepts pretty well, and here's a more advanced one (which goes into using CSS to generate rounded corners on tabs).