How Do I change a link for a mobile browser only? - javascript

I'm having trouble finding a way to do this. I was told I can use JavaScript or jQuery.
Here's what I have.
Script:
<script type="text/javascript">
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
document.getElementById('mylink').href = "http://google.com/";
}
</script>
Link:
<a href="#" id="mylink">
I even tried with:
<a href="#" id="#mylink">
I'm suppose to have the link go to a website on any other browser, but if your on an iPhone go to iTunes link. If someone could help my figure this out I'd be much appreciated.

Detect mobile like this:
var isMobile = navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/);
if(isMobile) {
document.getElementById('mylink').href = "http://google.com/";
}

Using Browser detection is not recommended, it´s better to use size detection via css media queries. Bootstrap might help you alot:
http://getbootstrap.com/css/#responsive-utilities
Class visible ONLY phones: .visible-xs
Class hidden ONLY phones: .hidden-xs
Use the url to learn more.
<!--Only Phones-->
<a href="#" class="visible-xs" id="#mylink">
<!--Anything else-->
<a href="#" class="hidden-xs" id="#mylink">

With jQuery you could just use
$(document).ready(function() {
if((navigator.userAgent.match(/iPhone|iPod/))) {
$("#mylink").prop("href", <istore link>)
} else {
$("#mylink").prop("href", "http://google.com")
}
});
With you anchor tag being
I haven't tested this but should be right
Edit:
Though i put in enough basic to figure it out.

Try to combine Marks document ready part with your current code. Also you can test it on your box by selecting firefox and chrome user agents and the JavaScript is much easier to debug in a desktop browser :)

Your script tries to access a DOM element which has not been loaded yet!
<script>
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
document.getElementById('mylink').href = "http://google.com/";
}
</script>
<a href="#" id="mylink">
Solutions:
Reorder the elements: link tag, then the script tag
Recommended: Use an event such as DOMContentLoaded:
<script>
document.addEventListener("DOMContentLoaded", function () {
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
document.getElementById('mylink').href = "http://google.com/";
}
});
</script>

try this in userAgent.match('iPhone') instead of / and also where u r having this script either it should be below the a-link tag in html or the best way put it in a function and call it on onload function of body or jquery ready function both should work... Everything else good... Thanks...

Related

<A HREF=javascript:printDoc()>*Link</A> Does not call its javascript function in internet explorer

Need your help on this.
<A HREF=javascript:printDoc()>Link</A>
function printDoc()
{
window.print();
}
I am using a hyperlink to call a JavaScript function that prints the page. It works perfectly on Chrome, but not on Internet Explorer.
What can be the possible solution?
this kind of function calls is deprecated. Probably use
Link
Inline javascript in general should be avoided, you'd be better of with something like
Link
var link = document.getElementById('someButton');
link.addEventListener('click', function (e) {
e.preventDefault();
printDoc();
});
I've put in a call to preventDefault() there but realistically if your using a <a> tag for something that isn't a link you should consider a button or span

Maintain Scroll position after div.toggle (JQUERY)

How do I maintain my page scroll position after JQUERY toggle event, I have searched and researched but couldn't find any solution to remedy this problem.
<script src="Scripts/_hideShowDiv/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#adddriverpanel').hide();
$('a#adddrivertrigger').click(function () {
$('#adddriverpanel').toggle(400);
});
});
</script>
After reviewing your code, you simply need to update your html to the following:
<a id="adddrivertrigger" href="javascript:void(0);" class="auto-style2">Add Drivers</a>
The '#' you had in the link is what is taking you to the top of the page.
If you're going to use an anchor tag with an href for a click event, you need to prevent the href from firing (assuming you don't want it to). You can usually do this with adding
return false;
To your click event, but better practice for empty href attributes is to create a null javascript call as opposed to a '#'.
For giggles, here are some other things you should /not/ do with href attributes:
All of the above are either invalid javascript or pose inconsistency problems with different browsers.
Another way you could have solved it (via jQuery) is as follows:
$('a#adddrivertrigger').click(function () {
$('#adddriverpanel').toggle(400);
return false;
});

javascript:void(0) too long (shorter way)

I know this is a dumb question
but is there a shorter way of writing
javascript:void(0) for anchor links?
example :
Click me
I don't like to use "#" because clicking the link brings me to the top of the page
Even due there is an answer allready selected,
i wanted to contribute my opinion on this.
using an href with a javascript:; javascript:void(0); javascript:return false; is bad practice search engine's will try to crawl your href and will find a broken link.
that being said, i do understand that sometimes you do need a link that follows nowhere, but executes something on the page.
i would have done it this way:
<script>
var elm = document.getElementById('myElement');
elm.style.cursor = 'pointer';
elm.onclick = function() {
// do something...
};
</script>
<span id="myElement">Click Here</span>
this way, you html code stays clean and nice.
please dont look at this as "Good Coding", since you allways need to keep a version for browsers with javascript disabled (yes, yes, i know that 99% will have it enabled ),
But if evil must be done, may it be the less evil possible at least.
A shorter version is:
<a href="javascript:;" ...>
Try this
Click me
Another way to do that:
<style type="text/css">
.pointer{
cursor:pointer;
}
</style>
<a class="pointer" onclick="functionHere()"> Click me </a>
function a() {};
<a href="javascript:a();">
<a href="javascript://">
<a href="don't_load" onclick="doit();return false;">

window.location problem

I am facing on strange problem in ie6.
When i am using window.location to redirect page through javascript it works fine in all browser except ie6.
It works in ie 6 if i place just like below:
demo
but its not working for below code.
<a href="javascript:void(0);" onclick="javascript:redirect();>demo</a>
function redirect()
{
window.location('http://www.demo.com');"
}
can you please figure out that whats problem here.
Thanks.
Avinash
The javascript: protocol is only used if you have Javascript code in an URL. If you put it in an event handler it becomes a label instead.
The location member is not a function, it's an object. Set the href property to change the location.
You have an extra quotation mark after the code line in the function, which is probably causing a syntax error.
<a href="javascript:void(0);" onclick="redirect();>demo</a>
<script type="text/javascript">
function redirect() {
window.location.href = 'http://www.demo.com';
}
</script>
How about doing this:
<a href="#" onclick="redirect(); return false;">
demo
</a>
If you want the page to redirect to demo.html when the user clicks a link, dare I suggest you use the universal, crossbrowser demo?
Try:
window.location.href = 'http://www.demo.com';
in the function.
Try:
window.event.returnValue = false;
document.location.href='http://www.demo.com';

Javascript: open new page in same window

Is there an easy way to modify this code so that the target URL opens in the SAME window?
click here``
<script type="text/javascript">
window.open ('YourNewPage.htm','_self',false)
</script>
see reference:
http://www.w3schools.com/jsref/met_win_open.asp
The second parameter of window.open() is a string representing the name of the target window.
Set it to: "_self".
click here
Sidenote:
The following question gives an overview of an arguably better way to bind event handlers to HTML links.
What's the best way to replace links with js functions?
Go;
try this it worked for me in ie 7 and ie 8
$(this).click(function (j) {
var href = ($(this).attr('href'));
window.location = href;
return true;
Here's what worked for me:
<button name="redirect" onClick="redirect()">button name</button>
<script type="text/javascript">
function redirect(){
var url = "http://www.google.com";
window.open(url, '_top');
}
</script>
I'd take that a slightly different way if I were you. Change the text link when the page loads, not on the click. I'll give the example in jQuery, but it could easily be done in vanilla javascript (though, jQuery is nicer)
$(function() {
$('a[href$="url="]') // all links whose href ends in "url="
.each(function(i, el) {
this.href += escape(document.location.href);
})
;
});
and write your HTML like this:
...
the benefits of this are that people can see what they're clicking on (the href is already set), and it removes the javascript from your HTML.
All this said, it looks like you're using PHP... why not add it in server-side?
So by adding the URL at the the end of the href, Each link will open in the same window? You could also probably use _BLANK within the HTML to do the same thing.
try
<a href="#"
onclick="location='http://example.com/submit.php?url='+escape(location)"
>click here</a>

Categories

Resources