?
Solved

adding an additional link via jquery if the browser is safari

Posted on 2010-08-24
7
Medium Priority
?
457 Views
Last Modified: 2013-12-07
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
Comment
Question by:ndek
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 15

Expert Comment

by:SRigney
ID: 33511862
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
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 600 total points
ID: 33517315
Try :


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

Open in new window

0
 

Author Comment

by:ndek
ID: 33533380
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
Docker-Compose to Simplify Multi-Container Builds

Our veteran DevOps Author takes you through how to build a multi-container environment, managed with a single utility in order to simplify your deployments.

 
LVL 15

Accepted Solution

by:
SRigney earned 900 total points
ID: 33534289
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
 

Author Comment

by:ndek
ID: 33534907
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
 

Author Closing Comment

by:ndek
ID: 33534925
Opps realized only two commented, but thanks to you both.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33535506
Thanks for the points!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month13 days, 11 hours left to enroll

800 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question