We Keep Coding

How to increase margin-right value only for Chrome in JavaScript?

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 :
Chrome :

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>

Try this, for detecting if chrome and adding margin.
$(document).ready(function(){
var isChrome = !!window.chrome;
if(isChrome) {
$(".element").css("margin-right", "30px");
}
});

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.

Jquery toggle bug on window resize with media query

I have an issue with the toggle button when window resizes. The issue is that I clicked on the toggle which shows up a list of items and i left it open, however when I resize the window the toggle is still left open despite the fact that I put display:none;on the media query.
HTML CODE:
<section id="nextprevsection">
<h2 id="nextprev">View more projects?</h2>
<ol class="select">
<li>Previous Project</li>
<li>Next Project</li>
<li>Back to work</li>
</ol>
</section>
CSS:
.nextprev{
display:none;
}
#nextprev{
display:none;
font-size:16px;
width:200px;
background:url(../img/work/downarrow.png) right no-repeat #333;
color:#FFF;
cursor:pointer;
padding:10px;
margin:auto;
margin-top:-150px;
}
ol.select {
display: none;
background:#666;
width:220px;
margin:auto;
padding:0px;
list-style-type:none;
}
.select{
display:none;
}
.select a{
color:#FFF;
text-decoration:none;
}
ol.select > li:hover {
background: #aaa;
}
JQUERY CODE:
//next previous
var nav = $('#nextprev');
var selection = $('.select');
var select = selection.find('li');
if ($(window).width() >= 768) {
nav.removeClass('active');
selection.css("opacity","none");
}
else{
nav.addClass('active');
}
nav.click(function(event) {
if (nav.hasClass('active')) {
nav.removeClass('active');
selection.stop().slideToggle(200);
} else {
nav.addClass('active');
selection.stop().slideToggle(200);
}
event.preventDefault();
});
select.click(function(event) {
// updated code to select the current language
$(".select").css("display","none");
select.removeClass('active');
$(this).addClass('active');
});
</script>
MEDIA QUERIES CODE:
#media screen and (max-width: 768px){
/*Next and previous*/
#nextandprev{
display:none;
}
.select{
display:block;
}
#nextprev{
display:block;
}
#nextprevsection{
height:200px;
margin-bottom:100px;
}
}

Well, a screen re-size isn't necessarily going to invoke your code that detects the screen size. One option you have is setting a short timer that periodically checks the screen size and invokes your code.
But that's the lame answer. Try $(window).resize(function(){});
http://api.jquery.com/resize/
Basically it wraps the window.onresize event (which I honestly didn't know existed til recently, stupid DOM!!) and let's you do your own thing with it :)

How to make resizable, scrollable sidebar like Facebook's "Chat/Event Ticker"?

I am trying to design a collapsible/hide-able sidebar for my web application, in the vain of Facebook's Chat/Event Ticker. It needs to have two separate sections, separated vertically, and both independently scrollable.
I have tried to implement this using jakiestfu's Snap.js plugin.
https://github.com/jakiestfu/Snap.js/
While this works great, it moves the content on my page out of view, and breaks my position: fixed header elements due to CSS transform: tranlate3d().
Since there's no good fix the these CSS issues, I was wondering if anyone knew of a solution to mimic functionality of the Facebook Chat/Event Ticker sidebar.

I've done something similar using CSS3 resizing on the fixed sidebar (mine was on the left) and adjusting the main page's margin-left when the sidebar size changed. You could likely do something similar on the sidebar first, then split the sidebar in two the same way.
var sizeme = 200,
sizeItBro = function () {
if ($("#sidebar").width() != sizeme) {
sizeme = $("#sidebar").width() + 40;
$("#main").css("margin-left", sizeme + "px").text(sizeme + " pixels of margin.");
}
};
window.setInterval(sizeItBro, 150);
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body {
margin:0;
padding:0;
}
#main {
margin-left:200px;
min-height:100%;
padding:20px;
}
#sidebar {
position:fixed;
top:0;
bottom:0;
left:0;
background:#ffa;
width:200px;
min-width:100px;
max-width:500px;
resize:horizontal;
overflow:auto;
border-right:2px ridge #fe9;
padding:20px;
}
#tophalf {
background:#fe9;
height:300px;
min-height:100px;
max-height:500px;
resize:vertical;
overflow:auto;
border-bottom:2px ridge #fe9;
margin:-20px -20px 20px;
padding:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">Main Content</div>
<div id="sidebar">
<div id="tophalf">Sidebar A</div>
<p>Sidebar B</p>
</div>

Create a dimmed background on-click

Hopefully not too vague. All I want to do is make the entire page go dim after clicking a link. I would imagine having div style="height:100%; width=100%;" with a high z-index. to cover the webpage. My question is toggling this div. I'm not sure what I should even use to accomplish this.

Demos using jQuery or using bog-standard Javascript, both showing how you can toggle the element.
HTML You didn't say how you want to toggle this. Using a button?
<button onclick="dim();">Dim</button>
<div id="dimmer"></div>
but bear in mind the dimmer will go over the button
CSS
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /* important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:9999; /* may not be necessary */
}
N.B. Use position: fixed as 100% height is only the window height and if your document is larger, using position: absolute doesn't dim the whole document - you can scroll to see there are contents visible.
Javascript
function dim(bool)
{
if (typeof bool=='undefined') bool=true; // so you can shorten dim(true) to dim()
document.getElementById('dimmer').style.display=(bool?'block':'none');
}
dim(true); // on
dim(false); // off

You can do it with a simple JavaScript
Demo
HTML
Click me
<div id="toggle_div"></div>
Hello World
JavaScript
function dim_div() {
document.getElementById("toggle_div").style.display="block";
}
CSS
#toggle_div {
background-color: rgba(255, 255, 255, .6);
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 999;
}

HTML
<div id="initial_opacity_zero"></div>
<button id="button_to_adjust_opacity" onclick="func_onclick();"></button>
CSS
div#initial_opacity_zero{
opacity:0;
display:block;
position:fixed;
top:0px; right:0px; bottom:0px; left:0px;
}
JavaScript:
function func_onclick(){
document.getElementById("initial_opacity_zero").style.opacity="0.6";
}

How to make sure my css overlay is on top at any site?

I have a bookmark that calls script and lays a css overlay over the webpage. There is a top bar with a button to close it and the rest is simply a div with a semi-transparent background. Pick a random site and it looks fine, but for example, Google's top bar covers it as well as the search and buttons cover the overlay. Another example is reddit's header.
I make these divs and the button:
var overlayBackground = document.createElement('div'); //main overlay that covers the page
overlayBackground.setAttribute('id', "overlay_background");
document.body.appendChild(overlayBackground);
var topBar = document.createElement('div');
topBar.setAttribute('id', "top_bar");
overlayBackground.appendChild(topBar);
function cancelStuff(){
overlayBackground.removeChild(topBar);
document.body.removeChild(overlayBackground);
}
topBar.innerHTML = "<button id= \"cancel_stuff\" onclick=\"cancelStuff()\">Click To Cancel</button>";
And here is the css:
#cancel_stuff{
zIndex:2147483647;
font-weight:bold;
font-size:2em;
border:none;
width:100%;
height:50px;
color:#FF9900;
background-color:#336688;
}
#cancel_stuff:hover{
cursor: pointer;
color:#336688;
background-color:#FF9900;
}
#top_bar{
zIndex:2147483647;
box-shadow:0px 3px 10px 2px black;
position:fixed;
top:0px;
width:100%;
height:50px;
}
#overlay_background{
float:left;
zIndex:2147483647;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background:rgba(240, 240, 240,0.8);
}

You're looking for the z-index property, not the zIndex property. Try it again with this change and see if it works.
Google uses a z-index of 990 for their top bar, so this should work fine.