Develop Reference

<img> in <a> crashes app (Javascript Windows 8 app)

Basically what the title says. I have an anchor tag <a> hooked up with the PageControl, following the tutorial. I set the anchor tag to display:block and then added an <img> inside the <a>.
However, clicking the <img> will cause the app to crash. If I click the area around the <img> (but inside the <a>), the link works. It's just the <img> that's weird.
I tried Googling the issue but couldn't find a solution. If this has been asked before, a link would be extremely helpful.
EDIT: Here's the offending code:
<a id="MainGrid" href="/pages/flow/flow.html">
<img src="/images/Documents.png" />
<br />
New Round
</a>

I'm going to go out on a limb here and check to see if you are closing your img tag properly. I've run into really random problems in html when i forgot the add a '/'
Your code should like something like this:
<a href="http://www.tutorialspoint.com" target="_self">
<img src="/images/logo.png" alt="Tutorials Point" border="0"/>
</a>

So, I figured out the problem and I'm posting it here for future reference.
The tutorial asks us to add this function:
linkClickEventHandler: function (eventInfo) {
eventInfo.preventDefault();
var link = eventInfo.target;
WinJS.Navigation.navigate(link.href, { isReal: false });
}
Apparently, the problem is the variable link is targeting the image, instead of the actual anchor tag. I just added some logic that checks if link is an anchor tag (and if not, I set link = link.parentElement; and everything works now.
Thanks to everyone who actually bothered to take the time and tried to help!

Jquery toggleClass loses the class once links is clicked or page is refreshed

When the link is not pointing to anywhere (href="#") my toggleClass works as it is suppose to. But as soon as I fill in the "href" with an URL it doesnt work anymore. I suspect it is because the page is refreshed? But I'm quite new to JS. If this is the problem how can I work around it? and if it's not, then what have I done wrong?
So this is my current javascript using jquery:
$(document).ready(function()
{
$('.button').click(function()
{
$('.buttonselected').removeClass('buttonselected');
$(this).toggleClass('buttonselected');
});
});
And this is my HTML code:
<nav>
<ul>
<li>
<a class="button" href="?page=frontpage"> HOME </a>
</li>
</ul>
</nav>
There are more links in the list, but that is irrelevant for this question.
Yes, I'm using PHP include.
Also, how can I set a link to "toggleClass" when the page loads so that it gets that class when someone first enters the website.
Thank you for the help!

You are right. The class goes away because the page is reloaded. If you need a specific link to have a specific class when the page loads, you'll need to hard code something to that link. Either manually put the class on the link with php or distinguish it in some other way so that JavaScript can find it.
If the link that should have the class is different based on which link you clicked previously, you will have to use a cookie or the localStorage object to retain that information.
Better yet, you should try to figure out a way to pass this information around that doesn't involve reloading the page. That would be ideal as, in most cases, users don't like to have a page reload on them when they're not expecting it.
EDIT:
The answer by #pszaba is great if you don't need to utilize query string variables.

You can use event.preventDefault()
$('.button').click(function( event )
{
event.preventDefault(); // default action of the event will not be triggered.
$('.buttonselected').removeClass('buttonselected');
$(this).toggleClass('buttonselected');
});
EDIT:
If you want to load your frontpage (as in your link) and give it a "buttonselected" class
than you need to use PHP.
Something like this
if( isset($_POST['page']) ){
$selectedPage = $_POST['page'];
}
View
<a class="button <?php echo ($selectedPage=='frontpage')?' buttonselected':'' ?>" href="?page=frontpage"> HOME </a>

Displaying a progressbar or error message in a fancybox

Here is what I have in my member.php for my fancybox:
<script type="text/javascript">
$(document).ready(function()
{
$("a#uploadpage").fancybox({
'titleShow' : false
});
});
</script>
.
.
.
<a id="uploadpage" href='uploadpage.php'>Change Image</a> <br/>
This works perfectly, and by perfectly I mean it opens the fancybox containing the php code in uploadpage.php. Once the user pushes the submit button in uploadpage.php to upload there image I want it to either display an error message(invalid file type or file size too big), or a progressbar if the image is a valid file type and below 1MB. How do I do this within the SAME FANCYBOX? (I have the code for the error messages and progressbar already so I just need to know how to either refresh the fancybox or how to use javascript to accomplish this.)
Thanks a lot, I greatly appreciate it.
-Matt

I don't know if this will work, I've never used fancybox the way you are trying to use it, but, here's my suggestion: you could try using a class name instead of an ID. The anchor would be <a class="uploadpage" ...> instead of the id you use now. Also, change
$("a#uploadpage").fancybox({
to
$("a.uploadpage").fancybox({
fancybox makes a new instance of the box for each invokation when using id. It tries to reuse it if you use class names instead. Also, could try marking with a rel="myuploadbox", i.e.
<a rel="myuploadbox" class="uploadpage" ...>
Fancybox uses the rel attribute to group related things together, this might keep it from closing the box on your submit. Also, wrap everything you want inside that same fancybox in a div tag with the same rel attribute (I don't know if it would be supported that way by fancybox.. give it a try).

What is the difference between these two HTML anchors?

I tried to use Link Checker to find any broken links, but the second one is not included, the displayedPage.html shows 404 error, but it will not show in the Link Checker's report. What is the difference between the two <a></a>? Why wasn't the second one being checked as a link?
<a href="showpage.go?page=mypage&room=yours">
<span>my own room</span>
</a>
second:
<a onclick="javascript:window.open('my/displayedPage.html', '',
'width=590,height=450,scrollbars=no,resizable=no'); return true;"
href="javascript:void(0)">Show Me</a>

The second one does not have an href attribute that can be checked with the link checker you are using.
Presumably, the program you are using does not understand the javascript: protocol and/or ignores any other protocols than http and ftp.

It seems that your tool ignores javascript links. The second link is not a pure html link, it's a link created by calling javascript.

The second isn't a valid link, it requires javascript in order to work, something the link checker probably isn't checking (it is doing essentially static analysis I guess).
You should always have the href set to the link you want to open and attach javascript enhanced behavior, something like:
<a onclick="window.open(this.href, '',
'width=590,height=450,scrollbars=no,resizable=no'); return true;"
href="my/displayedPage.html" target="_blank">Show Me</a>

because in second one browser just executes javascript when you click this link.
this script is opening link in new window with given params

The Link Checker doesn't know javascript

Unobtrusive Javascript: Removing links if Javascript is enabled

I'm using PopBox for magnifying thumbnails on my page.
But I want my website to work even for users which turned javascript off.
I tried to use the following HTML code:
<a href="image.jpg">
<img src="thumbnail.jpg" pbsrc="image.jpg" onclick="Pop(...);"/>
</a>
Now i need to disable the a-Tag using javascript, otherwise my PopBox won't work.
How do I do that?

Just put the onclick on the a-tag:
<img ...>
Make sure to return false either at the end of the function (here Pop) or inline like in the above example. This prevents the user from being redirected to the link by the <a>'s default behaviour.

Put the onclick event onto the link itself, and return false from the handler if you don't want the default behavior to be executed (the link to be followed)

You could give all your fallback anchor tags a particular classname, like "simple"
Using prototype, you can get an array of all tags using that class using a CSS selector, e.g.
var anchors=$$('a.simple')
Now you can iterate over that array and clear the href attributes, or install an onclick handler to override the normal behaviour, etc...
(Edited to add that the other methods listed above are much simpler, this just came from a background of doing lots of unobtrusive javascript, where your JS kicks in and goes and augments a functioning HTML page with extra stuff!)

May I suggest, in my opinion, the best solution? This is using jQuery 1.4+.
Here you have a container with all your photos. Notice the added classes.
<div id="photo-container">
<a href="image1.jpg">
<img class="popup-image" src="thumbnail1.jpg" pbsrc="image1.jpg" />
</a>
<a href="image2.jpg">
<img class="popup-image" src="thumbnail2.jpg" pbsrc="image2.jpg" />
</a>
<a href="image3.jpg">
<img class="popup-image" src="thumbnail3.jpg" pbsrc="image3.jpg"/>
</a>
</div>
An then you make a single event handler this way:
<script type="text/javascript">
$(document).ready(function(){
var container = $('#photo-container');
// let's bind our event handler
container.bind('click', function(event){
// thus we find (if any) the image the user has clicked on
var target = $(event.target).closest('img.popup-image');
// If the user has not hit any image, we do not handle the click
if (!target.length) return;
event.preventDefault(); // instead of return false;
// And here you can do what you want to your image
// which you can get from target
Pop(target.get(0));
});
});
</script>

The href attribute is not required for anchors (<a> tags), so get rid of it...
<a id="apic001" href="pic001.png"><img src="tn_pic001.png"></a>
<script type="text/javascript">
document.getElementById("apic001").removeAttribute("href");
</script>
This method will avoid library contention for onclick.
Tested in IE6/FF3/Chrome. Side benefit: You can link directly to the portion of the page containing that thumbnail, using the id as a URI fragment: http://whatever/gallery.html#apic001.
For maximum browser compatibility, add a name="apic001" attribute to the anchor tag in your markup ('name' and 'id' values must be identical).
Using jQuery, dojo, Prototype, etc. you should be able to do the removeAttribute on multiple, similar anchors without needing the id.

You should be able to mix and match the return false from Chris's idea with your own code:
<a href="image.jpg" onclick="return false;">
<img src="thumbnail.jpg" pbsrc="image.jpg" onclick="Pop(...);">
</a>
If someone has Javascript disabled, then their browser ignores the onclick statement in both elements and follows the link; if they have Javascript enabled, then their browser follows both OnClick statements -- the first one tells them not to follow the <a> link. ^_^