Develop Reference

How to restrict href link to <oblique> tag

<a href="myList/doctor">
<div>
<span> The important Info
<a data-toggle="modal" data-target="#mapModal">
<a data-toggle="modal" data-target="#mapModal"
id="obliqueIcon"> <oblique
class="iconSize">i</oblique></a>
</a>
</span>
</div>
</a>
document.getElementById("obliqueIcon").onclick = function(e) {
return false; // or use e.stopPropagation() and e.preventDefault()
}
I have the above code.Here the div can be clickable but the 'i' button here should open up a model box (data-target="#mapModal") but it is not since the anchor tag contains the 'href'.
What I am trying to do is let this code should not be changed but when I click on the oblique it should open up a model box but not redirecting to the link.Is there any way to restrict it.Please suggest help.Thanks.

So there are a couple of issues with your HTML: first, there isn't an <oblique> tag (did you mean <i>?), and second, you can't nest an <a> tag within another <a>.
That said, though, the more general form of what you're asking for -- a node within a link tag that will not fire that link if clicked -- is possible; all you need to do is prevent the click event from bubbling up from that node to the anchor tag:
document.getElementById("foo").onclick = function(e) {
// open your modal here
return false; // or use e.stopPropagation() and e.preventDefault()
}
<a href="https://example.com">
This should link to the other page...
<span id="foo">but this should not</span>
</a>
Added to the answer in response to comments below: here's the same code snippet applied to your HTML:
document.getElementById("obliqueIcon").onclick = function(e) {
return false; // or use e.stopPropagation() and e.preventDefault()
}
<a href="myList/doctor">
<div>
<span> The important Info
<a data-toggle="modal" data-target="#mapModal">
<a data-toggle="modal" data-target="#mapModal"
id="obliqueIcon"> <oblique
class="iconSize">i</oblique></a>
</a>
</span>
</div>
</a>
I do not get the error message you're reporting ("Cannot set property 'onclick' of null") but at a guess it may be because you're continuing to use invalid HTML (the nested <a> tags) -- possibly that's making those nodes inaccessible in some browsers? (I'll stress that this is only a guess; I don't have a lot of experience working with invalid HTML other than by fixing it, so I don't have a solid understanding of how all browsers might handle it. I've tested Safari, Chrome and FF, all work correctly even with the invalid HTML, but if you're using a different browser perhaps that's the cause. If you see the error on my second snippet but not on my first snippet, that would confirm the guess. If you see no errors in either snippet, then you have something else going wrong in your code.)

How to add javascript to button?

this might be very basic but I am still trying to figure it out because I cannot seem to get it correct.
The button
<a class="fusion-button button-flat button-square button-xlarge button-default button-40" target="_blank"><span class="fusion-button-text fusion-button-text-left">KÖP DITT CAMPINGKORT HÄR!</span></a>
And I need to add this
Köp Camping Key Europe
Some things needs changing such in the next code but you get the idea, how can I make button work, so when they press it it open module? When I use the second code without button and only link, it works fine, module shows up.
Please help :)

Try this
<button type="button" class="fusion-button-text fusion-button-text-left"
onclick="CampingKeyEurope(' blank', 'sv')">Button Text</button>
Building off the comment by Sterling Archer, you should attach event listeners outside of your HTML, so if you are using JQuery, in your $(document).ready() function you would add your onclick event there to your button like so:
$('.fusion-button-text.fusion-button-text-left').on('click', function() {});

Try using an event listener:
<a id="btn" class="fusion-button button-flat button-square button-xlarge button-default button-40" target="_blank">
<span class="fusion-button-text fusion-button-text-left">KÖP DITT CAMPINGKORT HÄR!</span>
</a>
document.getElementById('btn').onclick = function () {
CampingKeyEurope(' blank', 'sv');
};

I suggest looking through here, Its very useful: https://www.w3schools.com/jsref/event_onclick.asp

googleweblight not executing OnClick JavaScript Function

Following JavaScript call function not working in googleweblight
<i class="fa fa-facebook"></i> Facebook ID
or
<a onclick="FBLogin()" href="#" class="btn btn-sm azm-social azm-btn azm-facebook"><i class="fa fa-facebook"></i> Facebook ID</a>
What may be issue? is it possible to fix it?
For a example
http://jsfiddle.net/zalun/Yazpj/1/ It will work,
but same link wont work in
googleweblight http://googleweblight.com/?lite_url=http://jsfiddle.net/zalun/Yazpj/1/

Javascript seems to be disabled in googleweblight, if you want to see in detail then you can look at your site by this
http://googleweblight.com/?lite_url=[your_website_URL]
example http://googleweblight.com/?lite_url=https://stackoverflow.com/
Well, you can opt out of it but in such case google will label your page in the search results to indicate to users that non-transcoded pages may take longer to load and may use more data.
You can find more details here
https://support.google.com/webmasters/answer/6211428?hl=en

Outside HTML Colorbox

I'm trying to get my webpage to use the kind of color box that is demoed on this website here.
http://www.jacklmoore.com/colorbox/example2/. (Outside HTML ajax Example).
In their code for this, they have:
$(".ajax").colorbox();
targeting:
<p>
<a class='ajax' href="../content/ajax.html" title="Homer Defined">
Outside HTML (Ajax)
</a>
</p>
My question is, I want the colorbox to display another page I have, when I click this Icon span on my page.
<span id="pause">
<i class="fa fa-pause"></i>
</span>
I've used on() to make it so when it's clicked it runs a function.
$("#pause").on("click", function() {
game.pause();
});
Where as game.pause(); will create this effect, but I'm not sure how to make it happen, because I am not using a link like the examples.

Firefox link to javascript function opens a new window when not intended

I have this problem where when I have this html in firefox it opens a new window
<a style="float:right;"
href='javascript:window.location.href="#";'onClick="javascript:addNewRecord();">
New Record</a>
I have tried self.location, window.location, #body, and #h1 as the href.
Originally I had the code as, but in firefox that did not do anything but open a fresh window, and not perform my function. The code works perfect in chrome.
<a style="float:right;" href="javascript:addNewRecord();">New Record</a>

The canonical inline way is
<a style="float:right;" href="#"
onClick="addNewRecord(); return false">New Record</a>
or better:
<a style="float:right;" href="#"
onClick="return addNewRecord()">New Record</a>
where addNewRecord returns false at the end of the function
An even better way is
window.onload=function() {
document.getElementById("addLink").onclick=addNewRecord;
}
function addNewRecord() {
...
return false;
}
plus
<style>
#addLink { float:right }
</style>
and
New Record
Since abusing the HREF on a link going nowhere just to get a pointer is frowned upon, you may consider a <span> with an onclick and a cursor:pointer. It does need more effort to make such an element accessible to for example screen readers.

try :
onClick="addNewRecord();return false"

How your code behaves depends entirely on what the addNewRecord() function does (including what it returns).
Without seeing inside that function it's hard to tell, but I'd say that what is happening is inside there.
Note that what you put in the href="" part probably is not affecting the behaviour you're seeing.

Try this
<a onclick="javascript:addNewRecord();">New Record</a>