Roll over divs with transition delay? - javascript

I'm trying to add a transition delay to my rollover on hover divs, from reading I understand that "display:none" can't have a transition delay which is what is stopping me, it needs to be done another way.
I have tried using z-index with no success and also played with visibility but this causes separate issues as I am going to have different text and images displayed as defaut and hovered and the visibility function is affecting spacing as I believe they still occupy the space but don't show.
Here is what I have so far:
http://jsfiddle.net/hfs323h7/
Does anyone have or know a way to make it rollover with a transition delay while completely changing the div displayed? Either with pure css, jquery or javascipt?
Thanks!

You can do this by CSS with opacity.
.parentItem{ height:200px; background-color:#e7e7e7; float:left; margin-left:1px;width:33%;}
.hoveredItem{opacity:0;transition:opacity 1s;position:absolute;}
.itemDisplay{opacity:1;transition:opacity 1s;position:absolute;}
.parentItem:hover .hoveredItem {opacity:1; }
.parentItem:hover .itemDisplay{opacity:0;}
<div class="clearfix"></div>
<div class="parentItem">
<div class="itemDisplay">ok</div>
<div class="hoveredItem">hai</div>
</div>
<div class="parentItem">
<div class="itemDisplay">ok</div>
<div class="hoveredItem">hai</div>
</div>
<div class="parentItem">
<div class="itemDisplay">ok</div>
<div class="hoveredItem">hai</div>
</div>

You can achieve a fading hovering effect using jQuery,
$(document).ready(function() {
$(".parentItem").on("mouseover", function () {
$(this).find('.itemDisplay').hide();
$(this).find('.hoveredItem').fadeIn();
});
});
This is basically checking if a item is hovered and then fade's in the new item.
Here's a fiddle for your case.
JSFiddle
You can then ofcourse also check for a mouseout event,
$(".parentItem").on("mouseout", function () {
$(this).find('.hoveredItem').hide();
$(this).find('.itemDisplay').fadeIn();
});

Related

Reorganizing divs vertically with jquery

I have 5 divs going vertically down a page.
I want to be able to click any one, and have it move to be the first div in the order, the top of the "list" in a way. In a perfect world, the others would dim/decrease opacity and the clicked one would slide/animate up to the top while the others bumped down. But, that can come later. I've seen div-reordering done with CSS, but that's not continuously dynamic on the page.
I tried putting all 5 divs inside a container wrapper and doing this in css:
#wrapper { display: table; }
with this javascript (example for clicking second div):
$('#secondDiv').css("display","table-header-group");
$('#firstDiv').css("display","table-row-group");
$('#thirdDiv').css("display","table-row-group");
$('#fourthDiv').css("display","table-row-group");
$('#fifthDiv').css("display","table-row-group");
but that messed up my rounded corners on the div, my alignment, and other parts of my existing css.
This seems like it shouldn't be that hard, but I can't figure it out. Thanks for any help!
A very simple solution: move the element to the top using jQuery's prepend() to the parent element.
$("div").click(function() {
$(this).parent().prepend($(this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Div1</div>
<div>Div2</div>
<div>Div3</div>
<div>Div4</div>
<div>Div5</div>
<div>Div6</div>
<div>Div7</div>
<div>Div8</div>
<div>Div9</div>
<div>Div10</div>
$('.reorderable').click(function(){
$(this).prependTo(this.parentNode);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="reorderable">first</div>
<div class="reorderable">second</div>
<div class="reorderable">third</div>
<div class="reorderable">fourth</div>
<div class="reorderable">fifth</div>
</div>
Look at the jQuery UI tools that enable sortable displays.
Your end goal seems to be consistent with this jQuery UI feature.

How to animate the movement of inline-block items on page resize (ideally using css)?

HTML
<div class="mosaic_tile" style="background:rgb(255,0,0);">
</div>
<div class="mosaic_tile" style="background:rgb(0,255,0);">
</div>
<div class="mosaic_tile" style="background:rgb(0,0,255);">
</div>
CSS
.mosaic_tile{
width:100px;
height:100px;
display:inline-block;
}
https://jsfiddle.net/suse008b/
Notice how when the width of the page is less than the total width of the elements on a said line an element is moved to the next line. Is there anyway for me to animate the movement of the elements as they reblock?
Edit:
I found an example. Something similar to the portfolio portion of this webpage.
http://www.socialfix.com/
On the example site you mentioned they are using a javascript library called Isotope for that effect.
http://isotope.metafizzy.co/

Content behind Position: fixed is intractable

I have following setup:
<div class="wrapper">
<div class="element" id="first"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
...
</div>
so wrapper is set to overflow-x: auto and content that overflows it is horizontally scrollable. #first div has fixed position and more styling applied, but essentially it is always visible and other divs scroll behind it, like this:
issue here is that I'm using drag and drop functionality which works fine, but once I try to drop stuff on a fixed div and if it has content behind it, the drag and drop happens to that content. Basically feels like I'm interacting with stuff behind fixed div even though it is in front. I know fixed elements are out of the flow and maybe this is whats causing it? But I can't figure out how to make content behind that div stay behind it.
Well... It maybe because fixed elements are out of the flow.
You can try setting the element with id first as absolute and giving it a high z-index value. A high value of z-index will make it stay on top of other elements.
So when others scroll it will remain at that position.
Try plaing with ay pointer-events: none; in CSS

Prevent divs from wrapping, but do not add default scroll

Alright, so I'm a little puzzled about this: as you can see on the site for the Polymer Project, they have tabs that are horizontally scrollable if there are too many. I'd like to replicate this effect, but I can't figure out how to both prevent the <div> elements for tabs from wrapping as well as scrolling. Obviously, JS will need to be used here. Unless it's possible to get a custom scrollbar?
How can I do the above? A non-jQuery solution would be very much preferable.
Should be able to use plain JavaScript or jQuery to compare the calculated width of the inner div to the set width of the outer div. If #inner is wider than #outer, add a class to one of the divs to change how they're displayed. If not, remove the class.
The markup:
<div id="outer">
<div id="inner">
<div class="scroll-button"></div>
<!-- your tabs here -->
<div class="scroll-button"></div>
</div>
</div>
The styling:
#outer{
width:500px;
overflow-x:hidden;
}
#outer .scroll-buttons{
display:none;
}
#outer.has-scroll-buttons .scroll-button{
display:block;
}
Give the divs a fixed height and dynamic length. Where the length property of the div is made by counting the number of columns you want in a div.
Why the aversion to jquery?

Scrolling effect with background image fix

I am stuck with some paraallax effect.While visiting to some websites,I found this scrolling effect.
here is the link
basically What actually it is.I tried fixing the background image still my background image gets move up when ever I scroll the page.Please help me.I have tried various tutorials.Still I am not able to get anything.I want scrolling effect just like the above link.There is a small strip which keeps on moving but the background image is fixed.Please help me.
here is the link of fiddle
css
{
height:200px;
width:100%;
background-image:url('http://upload.wikimedia.org/wikipedia/commons/1/1b/View_of_Santa_Maria_del_Fiore_in_Florence.jpg');
}
#div3
{
height:400px;
width:100%;
background-color:lime;
}
html
<div id="div1">this is my first div</div>
<div id="div2">this is my second div</div>
<div id="div3">this is my third div</div>
If you want your background image to be fixed, you simply need to add the correct attribute.
Add this to #div2
background-attachment: fixed;
And this will set the image position according to the page's top left corner instead of the div's.
Parallax effects are created by manipulating multiple image using JavaScript and CSS. To get started refer Parallax effect tutorial , Some more parallax effect tutorials

Categories