0

What I want is to detect whether the user is using chrome, and then change the margin-bottom of that class, to something different?

This is the div:

<div id="titleAreaBox" class="ms-noList ms-table">

And this ic the class I am using:

#titleAreaBox{
    margin-left:0px;
    height:0px; 
    margin-bottom:-31px;    
}

So I want to be able to change the margin-bottom:-31px element of this class, if the browser is chrome....is this possible in javascript?

Callum Holden
  • 41
  • 1
  • 7
  • Is jQuery acceptable? – crush Jun 11 '13 at 19:21
  • Yes i can use jquery also – Callum Holden Jun 11 '13 at 19:22
  • Detect if Chrome: http://stackoverflow.com/questions/6339480/how-to-detect-if-a-browser-is-chrome-using-jquery – crush Jun 11 '13 at 19:23
  • 4
    What is the reason behind wanting to change the margin on Chrome only? Browser-specific detection is generally frowned upon. – ajp15243 Jun 11 '13 at 19:24
  • The only reason is that i am positioning a navigation bar at the top of the page, it looks good on all other browsers...just not chrome – Callum Holden Jun 11 '13 at 19:26
  • 3
    @CallumHolden I think what ajp15243 is trying to say is that if it's not working in all browsers, then there is probably something wrong with your CSS, unless you are attempting to do something very elaborate. – crush Jun 11 '13 at 19:27
  • 1
    @crush Yeah, pretty much :). If the navigation bar doesn't look correct in Chrome, then it's likely that the markup/CSS can be done better. You should open a question with the markup and CSS (and perhaps a [jsfiddle](http://jsfiddle.net/) or equivalent as well), asking why it looks different in Chrome than the other browsers in which you've tested this (specify which browsers!). – ajp15243 Jun 11 '13 at 19:30
  • You can detect Chrome with `if(window.chrome){...}`, but I'd suggested you to rather post a question about the layout problem than doing any hacks... – Teemu Jun 11 '13 at 19:31
  • right ok then thanks for the suggestions....I am using sharepoint which is a CMS. And in sharepoint i am editing a pre-defined template, which already has class's in, I am editing the navigation bar css code....and boy there have been a hell of a lot of problems with it – Callum Holden Jun 11 '13 at 19:34

2 Answers2

0
var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') >= 0;
if(isChrome) document.getElementById('titleAreaBox').style.marginBottom = '-31px';

Not tested, but it should work.

Niccolò Campolungo
  • 11,824
  • 4
  • 32
  • 39
  • Didn't downvote, however, I can well imagine a browser claiming to be "based on chrome". Not that it never happened before. – John Dvorak Jun 11 '13 at 19:31
  • The detection part is working....but it is just not changing the style on the element – Callum Holden Jun 11 '13 at 19:40
  • Yes it is working, it seems not to you because your class already has margin bottom set to -31px. See [this fiddle](http://jsfiddle.net/Nfg9r/) and try to comment/uncomment the line with `if(isChrome) ...`, you see it works! – Niccolò Campolungo Jun 11 '13 at 20:01
0

I would look into this http://www.quirksmode.org/js/detect.html

It's a very long piece of code, but it seems to cover all browsers, and you can just copy and paste it.

pandavenger
  • 1,017
  • 7
  • 20