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.

Changing div css with button click doesn't work

I have this piece of html/css and I need to change div style with js button click so my div becomes visible and clickable. I seem to do everything right but it doesn't work for some reason.
When I click that button, simply nothing happens, can anyone help?
<button type="button" id="letsgo" onclick="letitGo()">Process</button>
<div id="textualdiv">blah blah blah</div>
A script below them:
<script>
function letitGo()
{
document.getElementById("textualdiv").style.opacity="1";
document.getElementById("textualdiv").style.pointer-events="auto";
}
</script>
And div style in a separate CSS file:
#textualdiv {
z-index:10;
background-color:white;
margin-bottom:0%;
width:70%;
text-align:center;
height:50%;
min-width:500px;
top: 10%;
display: block;
margin: 0 auto !important;
padding:0;
position:relative;
opacity:0;
pointer-events: none;
border-style:solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

The CSS pointer-events attribute is elem.style.pointerEvents in JavaScript
Use this instead
function letitGo()
{
document.getElementById("textualdiv").style.opacity="1";
document.getElementById("textualdiv").style.pointerEvents="auto";
}
JSFiddle - http://jsfiddle.net/dbxcsv9h/

Exactly, like Elipzer respond you before me. The right answer is:
function letitGo()
{
document.getElementById("textualdiv").style.opacity="1";
document.getElementById("textualdiv").style.pointerEvents="auto";
}
Remember that when you wanna change a CSS property using Javascript you need to type the name of that property using camelCase.
Hope it helps you!

Shift down / up position fixed elements in HTML

I'm working on a HTML framework that most of it's pages constructed from two section. first section (TopPanel) is a sliding panel that could slide down or up (with jQuery as well). second section is the Main part of page that could contain any sort of HTML document.
<!doctype html>
<html>
<head>
<!--Meta scripts & more-->
</head>
<body>
<div class="TopPanel">
<!--Panel's Contents-->
</div>
<div class="Main">
<!--Some standard HTML docs here-->
</div>
</body>
</html>
When the TopPanel is sliding down, all elements of the Main section must move down. But it's possible to exist some position:fixed element in the Main section. so it's clear that they won't move unless we gave them some margin-top: [$('.TopPanel').height()] px;. But it's not what I'm looking after!
I'm looking for a way to shift down and shift up all content of the Main section with a smooth effect and without changing of all elements attributes.

Have you thought about using a CSS transform:translateY(20px) on the body tag? If you are using fixed position on the other element, it shouldn't actually affect it although I haven't tested that.
You can then use transitions to get the smooth movement you are after.
body{
padding:10px;
overflow:hidden;
background:#fff;
height:100%;
transition:all .2s;
}
body.active{
transform: translateY(60px);
}
Example:
http://codepen.io/EightArmsHQ/pen/gpwPPo
Lookout for this kind of stuff though : Positions fixed doesn't work when using -webkit-transform

JSFIDDEL version
(UPDATED) Try this:
$('.main').click(function(){
$('.main').toggleClass('toggle');
})
.main{
width:20%;
height: 10%;
background-color: rgba(100,100,100,0.7);
text-align: center;
position: fixed;
top: 12%;
transition:all 1.0s
}
.top{
width: 20%;
height: 10%;
text-align: center;
background-color: rgba(300,50,50,0.7);
position: absolute;
}
.toggle{
transform: translateY(100px);
transition:all 1.0s
}
<div class="content">
<div class="top">
Top
</div>
<div class="main">
Main
</div>
</div>
It would need some tweaking but it still does what you are looking for.

I think you are looking for is maybe this:
I have used JQuery UI 1.9.2 for making the toggle ease effect. For more i have created the Fiddle
JQuery
$("button").click(function(){
$(".topPanel").toggleClass("height", 300);
$(".main").toggleClass("top", 300);
});
CSS
body { margin:0; }
.topPanel
{
width:100%;
height:50px;
background:#333;
}
.main
{
top:50px;
bottom:0px;
width:100%;
position:absolute;
background:#ddd;
}
.height { height:100px; }
.top { top:100px; }
p { font-weight:bold; }
HTML
<div class="topPanel">
</div>
<div class="main">
<center><button>Click Me!</button></center>
<p>Hey look at me, i am moving along when you click button!</p>
</div>

Display only one list item at the center of the <div> with overflow:hidden

I'm trying out a vertical ticker that displays a few text list items one after the other, but I need some help in positioning them.
You'll see a web ticker with two items. To display only one item at a time, I have to set 'overflow:hidden' in #tickerContainer.
However, the text in the ticker is not being positioned at the center of the ticker(As you see it is sitting at the bottom).
Also, when I remove 'overflow:hidden' from #tickerContainer, which is the whole ticker moving away from the top of the page?
Please help me fix this.
http://jsfiddle.net/nodovitt/NYhY4/2/
<div id="tickerContainer">
<ul id="ticker" class="js-hidden">
<li class="news-item">Item Number 1</li>
<li class="news-item">Item Number 2</li>
</ul>
</div>
The jQuery function:
<script>
function tick() {
$('#ticker li:first').slideUp(1000, function () {
$(this).appendTo($('#ticker')).slideDown(1000);
});
}
setInterval(function () {
tick()
}, 2000);
</script>
The CSS:
#tickerContainer {
background-color:white;
border-radius:15px;
text-align:center;
margin:10px;
box-shadow:0 0 8px black;
color:#2B7CD8;
font-size:50px;
width:500px;
height:100px;
overflow:hidden;
}
.news-item {
font-family:Times New Roman;
font-style:oblique;
}
#ticker li {
list-style-type:none;
}

You haven't put any specifications on your ticker id. So something like this http://jsfiddle.net/NYhY4/10/
#ticker {
padding:0px;
margin:0px;
padding-top:20px;
height:55px;
overflow:hidden;
}

Here is my answer as requested by OP
Add this css to your #ticker
#ticker {
margin: 0;
padding: 0;
line-height: 100px;
}
NOTE The line-height will always have to be the height of the #tickerContainer
You can see it here http://jsfiddle.net/NYhY4/3/

#ticker li {
list-style-type:none;
position: relative;
bottom:20px;
}

I didn't like the current item being hidden by seemingly "nothing" (the blank part of li box above the text) so I used this approach:
Remove the margins from the '#ticker'
set '#ticker' padding-top (.5em worked best for me)
set '#ticker li' padding-bottom to push the next item out of view (I used '1em' to be safe but '.5em' worked too)
The words didn't look perfectly centered so
set '#ticker li' line-height to '1em'
#ticker {
margin: 0;
padding-top: .5em;
}
#ticker li{
line-height: 1em;
padding-bottom: 1em;
list-style-type: none;
}
http://jsfiddle.net/JvuKU/2/
Note This depends on the font-size of the '#tickerContainer'. If you change the height or font-size of the '#tickerContainer', just adjust the values of '#ticker' padding-top and '#ticker li' padding-bottom.

horizontal content

My question is how to make dynamic content to be shown horizontally. It means no vertical scrolling, only horizontal. I have tried -webkit-column-count but it only creates X columns, but not horizontal scrolling. Any suggestions?

You can use the CSS
white-space: nowrap;
But then you'll have to be careful about putting line breaks in where you want them otherwise you'll end up with one really long line of text. http://jsfiddle.net/Nbkj2/1/

This is a pretty open-ended question, as I'm sure there's a lot of ways to answer this, but maybe this will point you in a useful direction: http://www.sitepoint.com/side-scrolling-site-layout-with-css-and-jquery/
To summarize the article, you break your content into a series of full-screen pages. Each page is a div with CSS to take up the whole screen, with height/width properties and float:left; to make them all stack up sideways. To prevent the pages from wrapping you make the body of the document as wide as all the pages you've made: body { width:10000px; }
Then the author puts some javascript handlers on links to scroll the page sideways to each panel of content.

Depends what element and what you mean by horizontal. Here's two examples of what I think you mean.
div {
Width:20%;
Display:inline-block; //won't work for ie 8 and below
}
body {
width: 150%;
}

Something like this demo (HTML add CSS only)
DEMO: http://jsfiddle.net/enve/ea88y/
FROM: http://www.visibilityinherit.com/code/horizontal-website.php
HTML
<ul>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
<li>FIVE</li>
</ul>
<div id="wrap">
<div id="one"><p>ONE</p></div>
<div id="two"><p>TWO</p></div>
<div id="three"><p>THREE</p></div>
<div id="four"><p>FOUR</p></div>
<div id="five"><p>FIVE</p></div>
</div>
</body>
</html>​
CSS
* {
margin:0;
padding:0;
}
html {
height:100%;
overflow-x:scroll;
}
body {
height:100%;
}
#wrap {
min-height:100%;
width:500%;
overflow:hidden;
}
#one, #two, #three, #four, #five {
width:20%;
float:left;
}
ul {
position:fixed;
width:100%;
height:40px;
line-height:40px;
text-align:center;
background:#ccc;
}
li {
display:inline;
margin:0 50px;
}
p {
margin:50px;
text-align:center;
}
* html ul {position:absolute;left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');}
* html {background:url(fake.jpg)}
* html #full {height:100%;}​