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

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!

Related

<a href> Anchor remains in URL and in page after refreshing

I have this little issue here with my page, where if I reload it while being anchored, the anchor remains and there is a problem to it. I.E
http://localhost/public/product/1#mod1
The anchor is #mod1, and while the anchor remains active after refresh, my CSS code is saying that this element:
.overlay:target
is active. Which is a very big issue, because then it doesn't allow me to explore the functionallity I have implemented on this anchor, unless I remove the #mod1 from the end of the page manually by hand. Because this CSS element makes this div visible when it should be not unless activated with the a href element.
(?)
<div id="mod{{$key}}" class="overlay">
content
</div>
Any ideas on how could I solve it? I tried catching whether the user has refreshed the page and redirecting him to an action/route/url, but the page stays blank then and URL unchanged.
You cannot use href with angularJS because it will misdirect the target link. AngularJS is a markup language for HTML, it is not HTML. Because angularJS is not HTML, we're provided a special set of directives to write angularJS values inline into HTML markup. The answer to solve your issue would be to replace the href tag in the anchor element with the angularJS directive ngHref. You can find more information about how to use ngHref and other directives at the link below. Good luck.
https://docs.angularjs.org/api/ng/directive/ngHref
Well I wanted to purely solve this without JS, but here's what I did, HTML:
<a ng-href="mod{{$key}}" class="button">(?)</a>
<div id="mod{{$key}}" class="overlay">
Then replaced the CSS of overlay:target to -> overlay:active, and implemented JS:
var curmod;
$('a.button').on('click', function(e)
{
curmod = document.getElementById($(this).attr('ng-href'));
$(curmod).addClass('active');
});
$('.popup a.close').on('click', function(e)
{
$(curmod).removeClass('active');
curmod = null;
});

How do I attach large bookmarklet code to href?

I have a bookmarklet that's about 100 lines long. Normally I'd attach the bookmarklet code to an anchor tag like so:
<a href=javascript:function(){ * TEH CODEZ *} >
This is of course so someone can click and drag the link to their bookmarks bar for simple setup of the bookmarklet.
The problem is I don't know how to do the same thing with a long bookmarklet. Right now I'm including the code directly into a DIV tag then using JS to attach the contents of the div to the href attribute of the anchor tag directly:
<div id="bookmarklet_code" class="hide">
<?php include('bookmarklet.js'); ?>
</div>
<script>
$('#bookmarklet_anchor').attr('href',$('#bookmarklet_code').html());
</script>
Sadly this doesn't work so I must still be doing something wrong. I can drag it to my bookmarks bar ok, but when I review the code, it has extra characters and doesn't work. Clearly I'm missing some fundamental information about how this is supposed to work.

jQuery toggle not hiding visible element

I'm working on a Greasemonkey script, and I have roughly the following:
Javascript:
var togglingLink = document.createElement("a");
$(togglingLink)
.attr('href', 'somelink')
.html('<div>foo</div><div style="display:none">bar</div>');
$(togglingLink).children().toggle();
// Then I insert it into the page.
Which makes this HTML:
<a href="somelink">
<div>foo</div>
<div style="display:none">bar</div>
</a>
The $().toggle() is only making the hidden div visible, it's not hiding the visible div. What am I missing here?
James' jsfiddle does work. But the same code in my Greasemonkey script isn't working.
Per bobek's answer, I also tried changing the divs into spans, and that didn't fix it for me.
I finally figured this out. I was actually running $().toggle(); prior to appending the element to the page. This is what was causing jQuery to not toggle as expected. Once I made it the $().toggle(); happened after appending, then it worked properly.
Having a <div> inside <a> is not valid in HTML < 5 and some browsers might not be able to work with it. Change your <div> to <span> and see if it works then.

using images for links with <wicket:link>

I'm trying to use an image for a link like so:
<wicket:link>
<a href="UploadPage.html">
<img src="/logo.png"/>
</a>
</wicket:link>
In the rendered HTML, the href of the <a> is correctly set to my upload page.
But curiously, Wicket adds onclick=window.location.href='/logo.png' to the <img> tag. The end result is that clicking on the logo loads the logo itself, rather than the upload page.
A simple work-around is to not use <wicket:link>, and hard-code the url to my upload page, but I'd like to know if there is a proper solution to this.
For me it helped to add empty onClick (Wicket 1.5):
<li><a class="current" href="main">
<img onClick="" src="img/icons/home.png"/>
</a></li>
after this, the link points to the page, not the image itself
Add the following in your html:
<a wicket:id="linkID"><img src="/logo.png"/></a>
Add the following in the corresponding java class:
add(new PageLink<Void>("linkID", new YourWicketPage()));
Or for more generic purposes:
add(new Link<Void>("linkID") {
#Override
public void onClick()
{
// do whatever you want when the link/image is clicked
}
);
Note that I gave the Link a Void model, since a model doesn't seem necessary to me in this case. However, it is imaginable that given a certain context a model for the link should be used.
did you already check out the answer in How to make a wicket link appear as an image?
Which wicket version do you use?
you have maybe forgotten the quote on the "onclick" :
onclick="window.location.href='/logo.png'"
Just to mention: using full url for src tag should help (http://blah/logo.png) but it's not elegent or portable solution. Perhaps it's a wicket bug. Maybe consider using div with css instead?

Invoking Link in Javascript or jQuery

I have an href taged object (graphic) on a page that I want to programatically click on. However,I can't figure out how to reference the object. Here is the tag:
<div id="getthebutton">
<div>
<a onmouseout="MM_swapImage('btn123','','http://www.comp.com/img/btn_img.png',1)" onmousedown="MM_swapImage('btn123','','http://www.comp.com/img/buttons/btn_inv.png',1)" onmouseover="MM_swapImage('btn123','','http://www.comp.com/img/buttons/btn_inv.png',1)" href="javascript:do_activity("param1", 1);">
<img id="btn123" width="180" height="60" alt="" src="http://www.comp.com/img/buttons/other_btn.png"/>
</a>
</div>
</div>
How do I click on this thing? If I read this right "btn123" is just an image file.
To programmatically click on that you would have to do something like this
$("a").click();
Of course it helps to have an event handler assigned first, but it is really that simple :)
Using parentNode will give you access to the <a> tag, but I don't know if that helps you, cause I'm not sure what exactly you are doing.
document.getElementById("btn123").parentNode
I believe in jQuery, it is parent():
$('#btn123').parent()
So you could probably do:
$('#btn123').parent().click()
First off, you should really listen to the comments (javascript: links == dark side). That being said ...
$("div#getthebutton div a").click();
In this case, the anchor has a javascript href-value. Understanding that you have no control over the source, your only other option would be to evaluate the value of the HREF:
// run the href-javascript from the parent anchor
eval($("#btn123").parent().attr("href"));
Invoking a click from the code will not invoke the javascript code. As such, you must evaluate it instead.
If you want to get the result of clicking on the image, from the code I would say your JavaScript should simply be:
do_activity("param1", 1);
That's what ultimately happens when the image is clicked by a human. This bypasses the 'click' events, so you might miss out on some side-effects, but it's what I'd try first.

Categories

Resources