[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 460
  • Last Modified:

adding an additional link via jquery if the browser is safari

I'm creating a basic mobile template, and would like to add an additional link to my MainNav if the browser is safari (to link to an iPhone specific app) but not have the link appear on any other devices.

Below is the MainNav and I would like  <li><a href="#">iPhone App</a></li> to be inserted after the Menu Item 3 li.

<div id="MainMenu">
  <ul>
   <li><a href="#">Menu Item 1</a></li>
   <li><a href="#">Menu Item 2</a></li>
   <li><a href="#">Menu Item 3</a></li>
  </ul>
</div>

Is this possible to do with jquery to detect the browser and then insert the link via last child? Or is there a better way to accomplish this?

Thanks in advance-
0
ndek
Asked:
ndek
  • 3
  • 2
  • 2
2 Solutions
 
SRigneyCommented:
http://api.jquery.com/jQuery.browser/#jQuery.browser1

jQuery has a .browser function that will help you with that.

I'd add a $(document).ready();
method and if it is safari insert the link where you want it.

0
 
leakim971PluritechnicianCommented:
Try :


$(document).ready(function() {
     if($.browser.webkit) {
        $("ul", "#MainMenu").append("<li><a href=\"#\">iPhone App</a></li>");
     }
});

Open in new window

0
 
ndekAuthor Commented:
Sorry for the delay, I got pulled off this project for a bit, but currently have

$(document).ready(function() {
   jQuery.each(jQuery.browser, function(i) {
        if ($.browser.safari) {
            $("#Mobile #MainMenu ul").append("<li><a href=\"#\">iPhone App</a></li>");
        }
    });
});

It is working, unfortunately it is adding the iPhone li 3 times.  I tested in mozilla and it repeats it just twice.  jQuery recommends using .support, but honestly I think the .browser option is the best for this, since they want certain links made viewable to iphone users.

In Safari I view the code and the injected html isn't appearing in the source.

Any ideas on why it is repeating?
0
Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

 
SRigneyCommented:
it's probably repeating because you are looping through each browser.  I thin you just need the if statement without the jQuery.each loop.
0
 
ndekAuthor Commented:
Removing the jQuery.each stopped the repeating thanks to all three of you.


$(document).ready(function() {
        if ($.browser.safari) {
            $("#Mobile #MainMenu ul").append("<li><a href=\"#\">iPhone App</a></li>");
        }
});
0
 
ndekAuthor Commented:
Opps realized only two commented, but thanks to you both.
0
 
leakim971PluritechnicianCommented:
Thanks for the points!
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now