We Keep Coding

Dragula on drag the nested image doesn't stay styled

Codepen here:
http://codepen.io/jasonsawtelle/pen/jqbeXd
//HTML
<div id="drag_container">
<div><img src="http://placehold.it/200x200/ffcc00/ffffff"/></div>
<div><img src="http://placehold.it/200x200/99cc00/ffffff"/></div>
<div><img src="http://placehold.it/200x200/333333/ffffff"/></div>
<div><img src="http://placehold.it/200x200/ff0000/ffffff"/></div>
</div>
//SCSS
//Dragula
.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80)}.gu-hide{display:none!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20)}
// Example
#drag_container{
display: flex;
div{
img{
height: 100px;
}
}
}
//JS
dragula([document.querySelector('#drag_container')])
It's a basic setup and Dragula is working, but when I drag a div, the contained, css resized image is popping to full-size during the drag event.

I am not sure if this is the right solution. First of all, redefining rules for .gu-mirror breaks single responsibility principle of the .gu-mirror clas. It's job was not to style in a a manner specifict to the element.
One problem might be that by default, that object when dragged it's attached to body elements and it looses some styling if that style was defined based on parents (which is not the case when is's attached to body container. There is an option mirrorContainer where you can set so the dragged element won't loose its styling

You should set .gu-mirror img to width: 100px; to achieve what you want. See the CodePen for the result.
.gu-mirror is the div added by the Dragula plugin to mirror the selected element to drag somewhere else.

Display div while parent is display None

I have div that is like this
<div style: "display:none;">
<div class="displayMe">
</div>
</div>
I need to how to make the div displayMe show while keeping the parent Div hidden

you can use this:
//this class for parent div
.hide {visibility: hidden;}
//this class to the child div
.reshow {visibility: visible;}

It's not totally clear, where exactly you want to show the visible part of the hidden parent. Here's a pure CSS solution, which more or less replaces the parent with a child on screen.
As you can see, there's a drawback in this solution concerning the rest of the content on the page. However, setting display:none removes the hidden element taken space from the textflow, hence this is probably exactly what would happen, if it was possible to show elements inside none-displayed elements.
#wrapper {
position: relative;
height: 0px;
visibility: hidden;
}
#content {
position: absolute;
top: 0px;
visibility: visible;
}
<div id="wrapper">
Text in the wrapper<br/>
more text ...<br/>
... and one more line.
<div id="content">Some visible content</div>
This text is below the visible
</div>
<div>This is outside of invisible</div>

No, this is not possible. You could instead move/clone the child element and insert it somewhere else in the markup (e.g. via JavaScript).
var element = jQuery('.Inner-Div').clone();
and then append to any visible element that be appropriate.
element.appendTo('some element');
Example http://jsfiddle.net/xmo9bpot/
EDIT
Another clever way would be to hide all siblings of the chosen child element and in fact leave the parent visible
DEMO http://jsfiddle.net/xmo9bpot/1/
$(".child").siblings().hide();

No this is not possible, as container should be visible when you want to display its child,
explain your scenario so much relevant solution can be provided, or you can try following
If you have multiple divs inside parent div, and you want to display any one child div at a time using jquery/javscript, then you can arrange your divs as
<div>
<div id="div1" style="display:none;">
</div>
<div id="divq" style="display:none;>
</div>
<div id="div3" style="display:none;>
</div>
</div>
then write your javascript / jquery code as
if (YourCondition == 1)
{
$('#div1').show();
}
else if (YourCondition == 2)
{
$('#div2').show();
}
if (YourCondition == 3)
{
$('#div3').show();
}
Cheers !

.displayMe{display:block !important}

Can I make a link fill its parent without using display:block or display:inline-block?

See this JSFiddle
I want to make the .newslink links all the way to the borders of the .content divs.
I have a slideshow of different content that gets messed up either if I set the a tag around the div or if I apply display:block / display:inline-block to the a element.
Right now the links are only around the image and text because of the 15px padding in .content. You can check this by hovering your mouse over the div (near the border) compared to over the image and text area. I want each link to completely fill the surrounding div.
Is it in this case possible to accomplish without setting the a tag around the div or applying display:block / display:inline-block to the a element?

Working Fiddle: http://jsfiddle.net/8tqryvu5/
Firstly, let's get rid of the Table markup as you're not marking up a table.
<div id="tableNews">
<div class="cell2">
<div id="slideshow">
<div class="content">
<a href="#" id="rightLink1" class="newsLink" target="_blank">
<div class="picDiv">
<img id="rightPic1" class="pic2" src="http://static3.businessinsider.com/image/5238c9c5ecad047f12b2751a/internet-famous-grumpy-cat-just-landed-an-endorsement-deal-with-friskies.jpg"/>
</div>
<div class="text">
<h2 id="title1">title 1</h2>
<p id="rightBoxSubText1">asdasd</p>
</div>
</a>
</div>
</div>
</div>
</div>
To achieve the effect you should apply the padding to the anchor link as this wraps both the images and text (essentially forming the border). Here's the part to take note of:
.newsLink {
display: block;
padding: 15px;
}
As it's an inline element you will need to set it to display:block in order to make it wrap the elements inside it. If you correctly apply the style to the surrounding elements then setting it to display:block will not effect the layout.
Hope that helps.

I am not 100% sure that I got right the whole thing but I think you can achieve this by using
.newsLink{position:absolute;top:0;left:0;bottom:0;right:0;background:red}
It will take the wodth of the slideshow, which is the relative element. If you want it to take the size of the .content and not more you will have to add a wrap in display block around you tag
Here is a jsfiddle: http://jsfiddle.net/8c041xy7/5/

You just need to absolute position anchor tag
.newsLink {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

How to make one element get hovered when hover on other element

I need such a scenario at where if anyone hover on a div, another div will be hovered. Just like:
HTML
<div class="box"></div>
<div class="link-box">
Touch the Grey Box and I get hovered!
</div>
CSS:
.link-box a:hover {
color: red;
}
Foddle Work
If anyone hover on the div.box, div.link-box will get hovered I mean get the red color. Is it possible? Please, don't tell it like this CSS way:
.box:hover .link-box a {
color: red;
}
My scenario is not like this. I've more complex scenario. So, it's only possible with jQuery. As I ain't good at jQuery, I can't write the script. That's why I need your help. What's the jQuery for it? May be, something like this?
$('.box').hover(function(){
$('.link-box').hover();
});
..............................................Update..................................
All the answer is related with CSS. Basically, div.link-box is such a complex div at my webpage that if anyone hover on the div.link-box many action happened, like pop-up box coming, multiple child elements of div.link-boxwill change. All happened with jQuery + CSS. And I need all the hover action of div.link-box when anyone hover on div.box. I just make here div.link-box as a link to make you understand my problem. But, basically it's not just css change. So, is it possible to bring all div.link-box hover action by hover on another div/button/link just like div.box by jQuery ?

As long as they stay in the same layout you can use the adjacent selector (+) in css.
Updated Fiddle
.link-box a:hover, .box:hover + .link-box a{
color: red;
}
The important thing to remember about the adject selector is that the two divs have to have the same parent, and the box has to immediately precede the second div.
More information on the adjacent selector
Edit:
Another option would be to wrap both divs in another div, and use the hover of the wrapper div.
This second option doesn't have the drawbacks of using the adjacent selector. As long as the anchor is anywhere inside of the wrapper, it will be styled when any part of the wrapper is hovered.
FIDDLE
Like so:
<div class='box-wrapper'>
<div class="box"></div>
<div class="link-box"> Touch the Grey Box and I get hovered!
</div>
</div>
with the following style:
.box-wrapper:hover a {
color: red;
}

Create a CSS class called "hover" (to affect you a make it .hover a)
.hover a
{
color: red;
}
Then your JQuery would read:
$('.box').hover(function(){
$(".link-box").toggleClass("hover");
});

Instead of the :hover css selector, I would use classes.
CSS:
.hover{
color:red;
}
JS:
$('.box').hover(
function(){
$('.link-box').addClass('.hover');
},
function(){
$('.link-box').removeClass('hover');
}
);

jQuery Image Flicker on Hover

I have a picture exactly on top of a Vine video. I want the picture to go away upon mouseover and reappear on mouseout. In other words, the Vine is only visible when the mouse is over the picture.
With the current code I have the image flickers in and out. I think the problem might be with the Vine behind the picture. I've tried playing with z-indexes, but no cigar.
Here's my code (I'm using span to wrap #picture)
<div class = "vine-two media">
<span><img id = "picture" class = "on-top" src = "img/kanye.jpg"></span>
<iframe id = "video" class="vine-embed adj-size"src="https://vine.co/v/bYDuAmjeH9r/embed/simple"frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>
<script>
$(document).ready(function() {
$('span').mouseover(function () {
$('#picture').hide();
}).mouseout(function () {
$('#picture').show();
});
});
</script>
</div>
CSS:
.on-top {
position: absolute;
z-index: 1000;
width: 240px;
height: 240px;
}
.adj-size{
width: 240px;
height: 240px;
}

You need to use mouseenter and mouseleave. http://api.jquery.com/mouseenter/ follow that link and you can see the difference in the example. Mouseover fires multible event, which is likely the source of the flicker.
Update:
seeing the code, I would set the iframe to hidden until it is ready to play. Flash causes overlay problems. The youtube solution is http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque which puts the flash into wmode=opaque. vine may have something as well.

Is the span-tag around the image?
If yes, I could imagine that you are hovering over the span, then the image disappears and the span becomes smaller (0x0 pixels) and the mouse cannot hover anymore over the span.
Perhaps try something like this:
<div class="completely_hovering_over_the_video" style="width:video_width;height:video_height" >
<img id="picture" src="bla.jpg">
</div>
With this code I am trying to show you a DIV that completly covers the video and has a fixed width and a fixed height. This DIV will not change it's dimensions even if the IMG becomes smaller or invisible. If you hover the DIV hide the IMG and vise versa.

When it disappears the image will register the mouseout event which will make the image show up again.
One possible solution is to try $('#picture').css('visibility','hidden'); instead of using hide(), and $('#picture').css('visibility','visible'); to show it. I think this will prevent mouseOut from triggering when the image is hidden as the image is still there, just invisible.

span can be any span on your page therefore it's a BAD way to do things,
you need to be more specific with your selectors:
$(function() { // DOM ready shorthand
$('.picture').hover(function () {
$(this).fadeToggle(); // make video underneath visible
});
// other DOM ready stuff here
});
Or follow this implementation example: DEMO
<div class="video">
<!-- video here -->
<img src="image.jpg">
</div>
.video{
position:relative;
width:400px;
height:280px;
}
.video img{
position:absolute;
top:0;
left:0;
}
$('.video').hover(function(){
$(this).find('img').fadeToggle();
});
To explain the basic trick is to point the hover event to a common video and img parent, in this case the DIV . video.
Also this will work:
$('.video').hover(function(){
$("img", this).fadeToggle();
});
Additionally if you want to prevent hysteric users to see animation buildups you can add .stop() method like:
$('.video').hover(function(){
$("img", this).stop().fadeToggle();
});
Also with the HTML I provided it can be all done using just CSS: http://jsbin.com/amiBOKu/4/edit
.video:hover > img{
display:none;
}

I'd suggest a little restructuring, as well as using hover instead of mouseover and mouseout. The reason you're seeing the flicker is because mouseout fires once the image fades, whereas hover will only fire once on mouse in and once on mouse out.
Example:
HTML:
<div class = "vine-two media">
<img class = "on-top picture" src = "http://data2.whicdn.com/images/27599232/kanye-west-announces-new-design-company-called-donda-1_large.jpg">
<iframe id = "video" class="vine-embed adj-size"src="https://vine.co/v/bYDuAmjeH9r/embed/simple"frameborder="0"></iframe><script async src="//platform.vine.co/static/scripts/embed.js" charset="utf-8"></script>
</div>
JS:
$('.media').hover(function() {
// mouse enter
$('.picture', this).hide();
}, function() {
// mouse leave
$('.picture', this).show();
});
Fiddle