2

I need some help to achieve my website. I have a div animated in JS that slides into the screen from right to left (with a button and by a margin-right action). It works fine in Firefox but not in Chrome : with the same value on margin-right, I see the div entirely in FF when showed, but not in GG, I only see a part of it.

The same problem appears for hiding the div; the value isn't high enough so there's still a visible part. I set a higher value for Chrome with "-webkit-margin-end" in my CSS, that helped for hidding, but when showed the problem remains. I guess I have to add a Chrome option in my script, so the "margin-right" value (or the "-webkit-margin-end" value ?) could be increased too when animated, but I actually can't find any answer to my request.

That's probably because I'm not good enough to apply it to my code, and that's why a bit help would really be appreciated.
Furthermore, is there a way to slide on page load ? I'd like the div 'open' when the user enters the website.

Here's a piece of my code :

/* CSS */


/* div */
#texte {
background-color:#FFFFFF;
border-left:0.5px solid #000000;
color:#000000;
font-size:0.9vw;
font-weight:normal;
font-family:"Proza Libre", sans-serif;
top:0;
bottom:0;
right:0;
margin-right:-125px;
-webkit-margin-end:-350px;
width:19.4%;
padding:1vw 0.6vw 1vw 1vw;
float:right;
position:fixed;
display:block;
z-index:1000;
overflow-x:hidden;
overflow-y:auto;
}


/* button */
#plus {
bottom:2.5vw;
right:2.5vw;
position:fixed;
color:#000000;
text-align:center;
font-family:serif;
font-size: 2.5vw;
font-weight:normal;
line-height:2.5vw;
text-decoration:none;
cursor:pointer;
z-index:1000;
border: 0.8px solid #000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width:2.5vw;
height:2.5vw;
}


/* SCRIPT */


jQuery.easing.def = 'easeOutBounce';

$('#plus').click(function() {
if($(this).css("margin-right") == "125px")  {
$('#texte').animate({"margin-right": '-=125'}, 'slow');
$('#plus').animate({"margin-right": '-=125'}, 'slow');
}
else {
$('#texte').animate({"margin-right": '+=125'}, 'slow');
$('#plus').animate({"margin-right": '+=125'}, 'slow');
}

});

Firefox :

enter image description here

Chrome :

enter image description here

goto
  • 7,908
  • 10
  • 48
  • 58
Marjorie Ober
  • 55
  • 5
  • Furthermore, is there a way to slide on page load ? I'd like the div 'open' when the user enters the website. Thank you so much ! – Marjorie Ober Jan 26 '17 at 17:48

3 Answers3

0

Try this, for detecting if chrome and adding margin.

$(document).ready(function(){
  var isChrome = !!window.chrome;

  if(isChrome) {
    $(".element").css("margin-right", "30px");
  }
});
oompahlumpa
  • 495
  • 2
  • 10
0

Rather than finding an ad-hoc solution for each browser-specific bug maybe you can try finding a way to make your code work the same way for every browser.

I would avoid manipulating the margins. Instead I suggest having one main DIV with a fixed width and then have another DIV inside with the paddings you need. Then do the animation with the right attribute.

Check this snippet and see if this demo works for you.

function togglePanel() {
  if (parseInt($('#main').css('right')) == 0) {
    // get the current width (+ horizontal padding) (+ the border size * 2)
    width = $('#main').width() + parseInt($('#main').css('padding-left')) + parseInt($('#main').css('padding-right')) + 2;
    $('#main').animate({"right": -width}, 'slow');
  } else {
    $('#main').animate({"right": 0}, 'slow');
  }
}

$('#toggleMain').on('click', function() {
  togglePanel();
});

$(document).ready(function() {
  togglePanel();
});
* {box-sizing: border-box;}

#main {
  background:blue;
  position:absolute;
  padding:10px;
  right:-222px;
  top:0px;
  bottom:0px;
  width:200px;
  border:1px solid red;
  }

#inner {
  width:100%;
  padding:10px;
  border:1px solid green;
  background:orange;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main"><div id="inner">Here goes the text<br/>and more text</div></div>
<button id="toggleMain">Toggle</button>
Marc Compte
  • 4,579
  • 2
  • 16
  • 22
  • Just a hint: when possible, use the latest jquery version which is 3.x. The 2.x versions are just for "still supporting IE8" if I remember correctly. – Gunnar Jan 27 '17 at 11:34
  • @Gunnar Thank you, I just picked it from the snippet interface dropdown menu. There is nothing beyond 2.2.1 there and it seems to work fine. I could add it myself but since there was no talk about version in OPs question I didn't pay much attention to it, but thanks for the hint. – Marc Compte Jan 27 '17 at 11:42
  • i see, thank you, i didn't work with stackoverflow code snippets so far. – Gunnar Jan 27 '17 at 11:45
0

Browser detection is no good practice, see for example Is jQuery $.browser Deprecated?

A better way is to provide general cross browser solutions.

You could for example use normalize.css and then apply your own css. This maybe makes the css "resets" you need, so your own css looks good/equal in all browsers.

Community
  • 1
  • 1
Gunnar
  • 383
  • 4
  • 18