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.
Related
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();
});
Every time that the scroll bar reaches the sticky menu it shifts the menu over a few pixels. If you scroll down slowly on my website and watch the menu you can see it.
I'm using the JQuery plugin stickUp to accomplish the sticky menu. I found that the only way I could get the menu to stick to the top without jumping to the left was by putting the "buttons" class inside of another class called "menu" and setting the width of "menu" to 100%. But that just resulted in the tiny little jump you can see now.
<body>
<div id="page1">
<div id="p1content">
<h id="Name">Travis Morenz</h>
<p>Testing & Testing</p>
</div>
<div class='menu'>
<div id='buttons'>
<div>Home</div>
<div>Projects</div>
<div>About</div>
</div>
</div>
</div>
<div id="page2">
<div class='behindmenu'></div>
</div>
I tried setting up a JFiddle to make it easier to view but the sticky menu doesn't work inside of it.
The code, however, is the same. Any help would be greatly appreciated.
In your site, when you scroll down .menu stuckMenu isStuck is getting style and got position:fixed and top:0 but you have to add left:0px then div wont move.
just add left:0px to .menu stuckMenu isStuck and it will work. Please let me know if it wont help or for more explanation.
UPDATED
When you scroll down then by jquery there is class added to .menu stuckmenu and it gives position:fixed and top:0 means fixing the div at one place so you should remove the left part too by using left:0 so it will be in center of screen.(top:0 and left:0). I will update the answer as soon as i will get more clarification.
OFFTOPIC
Your content of page 2 will hide the button but if you will hover then it will look like bugs so i have a suggestion that in .menu stuckMenu class add background:white and it will look great..hope it will help. :)
In this id #p1content you have used css which is not good..to center this column you should use margin-left:auto margin-right:auto with width:80% and you column will be responsive also. Never use fix width, its not good practise.
Concerning your question why it was moving: It received some additional style. A position left of 8px.
See screenshot.
This plugin seems to change the position from relative to fixed.
Moreover it adds top- and left-properties.
It gets moved since position gets changed to position: fixed; when you scroll down and it then ignores the margin of the body, making its own margin bigger.
CSS
body {
margin: 0;
}
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
I have this structure with dynamic DIVs and all have the same class, since all are created automatically.
The problem here is that, the last of them prior to other DIV with other class, I would like to have his style as width:100% instead of width:50% as all others set by CSS.
Here's a sample:
<div class="awp_box awp_box_inner"></div>
<div class="awp_box awp_box_inner"></div>
<div class="awp_box awp_box_inner"></div>
<div class="awp_stock_container awp_sct" style="max-width: 400px !important;"></div>
So I only want to change that third DIV, which sometimes is the first and only one, other times is the second, other times is the fourth, etc...
I am usually good with CSS but this time I'm having a hard time finding a solution for this one.
Can someone please give me a hand here guiding me in the right track so I could put this working?
If I was correct in my question above then add this CSS
div.awp_box.awp_box_inner:nth-last-child(1) {
width: 100%;
}
Source: TutsPlus
Based on the comments, the following script could give you what you need.
$(document).ready(function(){
$('.awp_sct').prev().addClass('full');
});
It will add a class to the previous element of the .awp_sct.
DEMO
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?