We Keep Coding

jQuery hover effect for ::after

I'm firing several effects when I hover over a div. The problem is that the div also has the pseudo element ::after, which populates the div with a virtual element (a play button) using the content CSS rule.
My hover effects work when I'm hovering any part of the div other than the space where the ::after element is.
Simply, I want to know if there is a way to point towards the ::after element using jQuery. I've tried to define the ::after element as a variable named "play", but have had no luck there either. This is my script:
var play = $('a.image-wrap::after');
$(".image-holder, .big-headline a, .small-headline a, play").on({mouseenter: function () {
$('.image-holder').css('background-color', color);
$('.image-holder img').css({
'mix-blend-mode': 'multiply',
opacity: .6
});
if ($(window).width() > 1115) {
$('.read').css('right', '35%');
} else {
$('.read').css('right', '0');
}
},
mouseleave: function () {
$('.image-holder').css('background-color', '');
$('.image-holder img').css({
'mix-blend-mode': '',
opacity: ''
});
$('.read').css('right', '');
}
});

What if you just add the new CSS to a style and then remove it when we're done hovering? It works pretty well:
$(".example").on("mouseenter", function () {
$("#workAround").html(".example:after {background:pink}");
}).on("mouseleave", function () {
$("#workAround").html("");
});
.example {
height:10px;
width:100px;
background:green;
margin:20px 0 20px 0;
}
.example:after {
content:'';
background:red;
height:10px;
width:100%;
display: block;
position:relative;
bottom:-10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style id="workAround"></style>
<div class="example"></div>

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.

nth child not working with within body

I'm trying to draw a 6x6 grid with divs, but when I create them with javascript and css, it doesn't show as expected.
css:
div{
width:30px;
height:30px;
margin:0px;
border:1px solid black;
float:left;
}
div:nth-child(6n+1){
clear:both;
}
javascript:
for(var i=0; i<36; i++){
document.body.appendChild(document.createElement('div'));
}
https://jsfiddle.net/kqzhorq0/
The above link demonstrates what I see in the browser.
But, when I select onload or onDomReady settings in jsfiddle, the grid shows as expected.
How can I get the grid to show properly using onload or onDomReady, and why isn't it showing properly without it?

If you can wrap your divs in a container and specify your selectors to target from within the container your code will work.
Here is a working snippet:
for(var i=0; i<36; i++){
document.getElementById("foo").appendChild(document.createElement('div'));
}
#foo div{
width:30px;
height:30px;
margin:0px;
border:1px solid black;
float:left;
}
#foo div:nth-child(6n+1){
clear:both;
}
<div id="foo"></div>
I also created an interactive demo on nth-child to help explain it further: http://xengravity.com/demo/nth-child/

The problem here, the first child of the body in the fiddle is the script element. You can inspect the html of the result panel to see the script element.
The nth-child will consider all the elements while using the index to search for an element, but using nth-of-type you can search for a particular type.
One choice is to use the :nth-of-type selector as below
div {
width:30px;
height:30px;
margin:0px;
border:1px solid black;
float:left;
}
div:nth-of-type(6n+1) {
clear:both;
}
Demo: Fiddle
Another is to insert the divs before the script like
for (var i = 0; i < 36; i++) {
document.body.insertBefore(document.createElement('div'), document.body.firstChild);
}
Demo: Fiddle
But a better solution will be use a custom container element instead of the body element
var ct = document.getElementById('container');
for (var i = 0; i < 36; i++) {
ct.appendChild(document.createElement('div'));
}
then
#container > div {
width:30px;
height:30px;
margin:0px;
border:1px solid black;
float:left;
}
#container div:nth-child(6n+1) {
clear:both;
}
Demo: Fiddle

hover overlayed text on an image bug

I have an overlayng text and navigation arrows on an image, they appear when a mouseover event is fired and hide when the mouse leaves the image.
The bug is that the overlay text is not a part of the image, so when i mouse over it, it starts flashing (because when the text hides, the mouse is positioned on the image, and that fires the mouseover event and the text shows up again)
This is my current JavaScript logic:
$('#container img').mouseover(function(){
$(this).siblings('.discr').show();
$(this).mouseout(function(){
$(this).siblings('.discr').hide();
})
})
For better understanding this is a DEMO and here is what i expect: the overlay text does not flash when the mouse is over it, it acts like when the mouse is over the image only.

You can try something like this:
JavaScript version
$('#container').mouseover(function () {
var $controls = $(this).find('.discr');
$controls.show();
$(this).mouseout(function () {
$controls.hide();
})
})
Example http://jsfiddle.net/b6hjm3t1/
Pure CSS version without JavaScript
You can have the same results just with CSS without the using JavaScript just by adding to the CSS:
#container:hover .discr {
display:block;
}
Example: http://jsfiddle.net/t6hf0fqg/

I think that this does what you're looking for. I've modified the code a little bit:
http://jsfiddle.net/jfkk78cn/1/
$( "#container" )
.mouseover(function() {
$(this).find('.discr').show();
})
.mouseout(function() {
$(this).find('.discr').hide();
});

Here is a CSS only solution for the same effect.
The important part is the you can do #container:hover .discr which will target the .discr elements when the #container is hovered.
img {
width:200px;
height:200px;
display:block;
}
#container {
float:left;
position:relative;
border:2px solid green;
}
.discr {
position:absolute;
color:red;
background:rgba(0, 0, 0, 0.2);
bottom:0px;
width:100%;
text-align:center;
display:none;
}
/*ADDED THIS RULE*/
#container:hover .discr{
display:block;
}
.next {
left:185px;
}
.next, .prev {
bottom:50%;
width:15px;
border-radius:9px;
}
<div id='container'>
<img src='http://goo.gl/Rwf5SG' />
<div class='discr prev'><</div>
<div class='discr next'>></div>
<div class='discr'>lorem ipsum</div>
</div>

Change div color on mouse over

I have a line of text (a link) within a div. I'd like the div color to change on mouse over the link. I tried various things without success. You can see my current code here: http://jsfiddle.net/Grek/D3TzM/ Note that I'm not necessarily looking for a jquery solution. Tks for your help
CSS
.source-title-box a{
color:#467FD9;
display:inline-block;
}
.source-title-box a:hover{
color:#666666;
}
.source-title-box hover{background:#cb2326;}
JS:
$('a').hover(function(){
$(this).parent().toggleClass('hover');
});​

you can select below a pseudo class like :hover. No need for javascript at all for this.
http://jsfiddle.net/7bFKq/
.source-title-box:hover{
background-color:#467FD9;
}
.source-title-box:hover a{
color:#FFFFFF;
}
​
If you must do it with a hover on a, you will need javascript.
http://jsfiddle.net/7wwdb/
$('a').hover(function(){
// .closest will get you to the div regardless of what might
// be in between. With .parent you get to the absolute parent, which
// in your case is a span
$(this).closest('.source-title-box').toggleClass('hover');
});​
css is basically the same, just :hover to .hover
.source-title-box.hover{
background-color:#467FD9;
}
.source-title-box.hover a{
color:#FFFFFF;
}

jsFiddle DEMO
Just look for the closest div, the immidiate .parent() was a <span> tag (which aren't automatically block elements by nature, unless you make them that way).
$('.activity-title a').on('mouseover', function () {
$(this).closest('div').toggleClass('hover');
});
$('.activity-title a').on('mouseout', function () {
$(this).closest('div').toggleClass('hover');
});

Changes this:
.source-title-box a
{
color:#467FD9;
display:block;
text-decoration:none;
}
to:
.source-title-box a
{
color:#467FD9;
display:block;
text-decoration:none;
padding:15px;
}
And this:
.source-title-box
{
color: #000;
background: #fff;
padding: 15px;
width: 200px;
position: relative;
margin-top:10px;
border: 1px dotted #666;
}
to:
.source-title-box
{
color:#000;
background:#fff;
width:230px;
position:relative;
margin-top:10px;
border:1px dotted #666;
}
DEMO
No JS required.

Keep the JavaScript you have, and add this CSS class:
.hover {
background-color: #f00;
}
http://jsfiddle.net/RLjvB/

Greg,
There are 2 points:
1) The jquery .hover() function expects two handlers as argument.
One for handlerin (mouse over) and one for handlerout (on mouse out). Giving only one argument uses the argument as an In-Out handler, i.e the same handler for both mouse events.
2) Make sure that the script that you have written (js) is included at the bottom of the page. ie, just before closing the "body" tag.
This is because : the html element may not be loading when the script executes.
...Your HTML Code...
<script>
$('a').hover(function(){
$(this).parent().toggleClass('hover');
});​
</script>
</body>
Hope this helps.