Im trying to right align the Title on top of the last Div. As per the below image , the text should be on top of "Hello 5 / 4 / 3". When we resize the window button will float which is working and the text should be always be on top of the last button.
Unsure why the wrapper div is adding extra space to the right of the button and not aligning to the edge of the right most div. Extra space is coming even if the Title is not there , any insights about Div width calculation would be great.
I tried calculating the number of buttons in the top row using javascript and added offset to the title , but it seems tedious and not aligning at certain resolution.
http://jsbin.com/nonexegiqa/embed?html,css,console,output
HTML
<div class="wrapper">
<div class="title">Title</div>
<div class="clear"/>
<div class="btn">Hello 1</div>
<div class="btn">Hello 2</div>
<div class="btn">Hello 3</div>
<div class="btn">Hello 4</div>
<div class="btn">Hello 5</div>
<div class="btn">Hello 6</div>
<div class="clear"/>
</div>
CSS
.wrapper{
border:solid gray 1px;
}
.btn{
width:96px;
height:46px;
float:left;
border:solid gray 1px;
margin-left : 11px;
margin-bottom : 11px;
text-align:center;
}
.title{
float:right;
}
.clear{
clear:both;
}
You need to find count of .btn in first row when page resizing, Then set position of .title to last .btn in first row.
$(window).on("resize", function(){
var parWidth = $(".wrapper").innerWidth();
var chiWidth = $(".wrapper .btn").first().outerWidth(true);
var childCount = 0;
while(parWidth >= chiWidth){
parWidth -= chiWidth;
childCount ++;
}
var left = $(".btn:eq("+(childCount-1)+")").position().left;
$(".title").css("margin-left", left);
});
To better understanding, i create demo but because you can't change demo page size in here, i create it in JSFiddle.
yes, display:flex may be very helpful. As a work around you could set the width of the .wrapper to 70vw, or something similar. The .wrapper div width is creating the "extra space."
Related
I have seven boxes. First I want to scroll box1 normally. When box2 reaches the top of the viewport it should be fixed same as in the example. I have to animate (animations may be show/hide etc) some views when I scroll on box2 again and again (Maybe for two window height or X pixel height). After the completion of animations, I need to remove the fixed positioning and start scrolling the remaining boxes normally. Any help?
[ I may use the same fixed positioning for box4 or box5 again while scrolling ]
Example http://jsfiddle.net/z0yv9gox/
Here is by code
var winHit = $(window).height();
var winWid = $(window).width();
$('.box').css({'height':winHit+'px','width':winWid+'px'});
$(window).scroll(function(){
if ($(this).scrollTop() > winHit) {
$('.box2').addClass('fixed');
}
else{
$('.box2').removeClass('fixed');
}
});
.box{height:200px;}
.box1{background:#333}
.box2{background:#ccffff;}
.box3{background:#999}
.box4{background:#ffcccc}
.box5{background:#666}
.box6{background:#999}
.box7{background:#333}
.fixed{position:fixed; top:0; left:0; z-index:2; width:100%;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>
Thanks in advance.
So if I am understanding you correctly I think you will want to put the box you want to fix inside of another div and relatively position that div and give it the height of how far you want your fixed box to travel (In my example I give it 300vh in css but if you want to add this height by javascript like in your above example you can). Then you will want to fix your box once the window gets to the top of your relatively positioned parent box. That way when you travel the required distance you can add another class the gives your fixed box an absolute position again this time placed on the bottom of your relatively positioned parent box. You will need 2 if statements for this and also you will need to calculate the height of your parent box and your fixed box. Then once the top of the window hits the top of your fixed box holder you add the fixed class and when the scroll position hits the fixed box holders height minus your fixed box's height you can add another class sticking it to the bottom of that div. If I am misunderstanding your question please let me know in the comments below.
Ok so I know that may have been kind of confusing so here it is in action along with a fiddle I worked up.
Fiddle Demo
$(window).on('scroll', function(){
var windowTop = $(window).scrollTop();
$('.fixed-box-holder').each(function(){
var boxTop = $(this).offset().top;
var boxHolderHeight = $(this).height();
var fixedBox = $(this).children('.fixed-box');
var boxHeight = fixedBox.height();
var boxStop = boxHolderHeight - boxHeight;
if (windowTop >= boxTop) {
fixedBox.addClass('fixed');
}else{
fixedBox.removeClass('fixed');
}
if(windowTop >= boxTop + boxStop){
fixedBox.addClass('scrolled');
}else{
fixedBox.removeClass('scrolled');
}
});
});
body{margin:0;}
.box{
height:100vh;
color:#fff;
}
.fixed-box-holder{
position:relative;
height:300vh;
}
.fixed-box{
position:absolute;
top:0;
left:0;
width:100%;
background:blue;
}
.fixed{
position:fixed;
z-index:1;
}
.scrolled{
position:absolute;
top:auto;
bottom:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" style="background:#333;">First Box</div>
<div class="fixed-box-holder">
<div class="box fixed-box">Fixed Box</div>
</div>
<div class="box" style="background:#444;">Second Box</div>
<div class="box" style="background:#555;">Third Box</div>
<div class="box" style="background:#666;">Fourth Box</div>
<div class="fixed-box-holder">
<div class="box fixed-box">Fixed Box</div>
</div>
<div class="box" style="background:#777;">Fifth Box</div>
<div class="box" style="background:#888;">Sixth Box</div>
<div class="box" style="background:#999;">Seventh Box</div>
PS on slower machines you may have some issues with smoothness as this will be a lot of calculations on the fly especially if you are going to be adding animations as well so just keep that in mind.
What I want to accomplish is after calling jQuery $().hide(), the animation to hide a child div on a current page and then show a new div in its place.
When I call the .hide(), the parent div resizes and I do not want that.
The parent has two divs in it, a text filled div, and the div in question so when I call the hide, only the text-only div remains. I want the height to remain the same because the new content is going to be the same height.
Here is what I have:
<div class="adminContent"> //Wrapper div, this should not change in height of 668px
<div class="adminTitle"> // Text only div, remains after .hide is called
Admin > Manage Class Roster
</div>
<div class="resetBody" id="manageClassBody1"> // Div that is being hidden/replaced
... // div contents
</div>
CSS
.adminContent {
background: #F7F7F7;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
min-height: 668px;
}
How should I have it so that its height is static after I hide the child div? Thanks!
EDIT: I want to do an in place swap of the two divs with an animation to switch between the two. I looked at the replaceWith() provided by jQuery but I'm not sure how to use it for my needs.
I would suggest using the animation features of JQuery to accomplish your task.
I created a sample JSBin for you.
Example:
$(document).on("click", "#togglebtn", function() {
var divs = $('.resetBody, .resetBody2');
var hiddenDiv = divs.filter(":not(:visible)");
var visibleDiv = divs.filter(":visible");
visibleDiv.fadeToggle({
complete: function() {
hiddenDiv.fadeToggle();
}
});
});
.adminContent {
background-color: lightgreen;
padding: 10px;
}
.resetBody {
background-color: #880000
}
.resetBody2 {
background-color: lightblue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="adminContent">//Wrapper div, this should not change in height of 668px
<div class="adminTitle">much text wow! much text wow! much text wow! much text wow! much text wow!
Admin > Manage Class Roster
</div>
<div class="resetBody">Div 1
<br/>Div 1
<br/>Div 1
<br/>Div 1
<br/>Div 1
<br/>Div 1
<br/>
</div>
<div class="resetBody2" style="display:none">Div 2 is taller
<br/>Div 2
<br/>Div 2
<br/>Div 2
<br/>Div 2
<br/>Div 2
<br/>Div 2
<br/>
</div>
</div>
<div style="margin-top:10px;">
<button id="togglebtn">Toggle</button>
</div>
I have a parent div and 2 child divs (child-left and child-right). child-right div will contain 1 or 2 icons depending on dynamic page requirement. The child-left div contains the title and also used as a handle to drag operation. I do not want to set a width px or % (like the 90% I have below). How do I set the child-left div to take the rest of available space after what is occupied by child-right.
<div id="parent">
<div id="child-left" style="width:90%">
This is my title
</div>
<div id="child-right">
<i class="fa fa-cog"></i>
</div>
</div>
Thanks!
The following should help you:
HTML:
<div id="parent">
<div id="child-right">Hey</div>
<div id="child-left">This is my title</div>
</div>
CSS:
#child-left {
border: 3px solid gray;
background-color:blue;
margin-left:0px;
overflow:hidden;
}
#child-right {
float:right;
border-style:solid;
}
#parent {
overflow:hidden;
}
DEMO JSFiddle
Consider this JSFiddle
When I mouseenter on Span1 , a blue bar should appear below the Span1 (same for Span2 and Span3)
But even I mouseenter on Span1 or Span2 or Span3 , blue bar appears only under Span2.
CSS
div.demo {
display:table;
width:100%;
}
div.demo div {
display:table-cell;
text-align:center;
}
.under {
width:100px;
height:2px;
background-color:blue;
margin:0px auto;
display:block;
}
HTML
<div class="demo">
<div id='span1'>Span 1</div>
<div id='span2'>Span 2</div>
<div id='span3'>Span 3</div>
</div>
<div class="demo">
<div><span id='Span1'></span></div>
<div><span id='Span2'></span></div>
<div><span id='Span3'></span></div>
</div>
JS
$(document).ready(function(){
$('#span1').mouseenter(function(){
$('#Span1').addClass('under');
});
$('#span2').mouseenter(function(){
$('#Span2').addClass('under');
});
$('#span3').mouseenter(function(){
$('#Span3').addClass('under');
});
$('#span1').mouseleave(function(){
$('#Span1').removeClass('under');
});
$('#span2').mouseleave(function(){
$('#Span2').removeClass('under');
});
$('#span3').mouseleave(function(){
$('#Span3').removeClass('under');
});
});
You have no width on the cells before the hover
Working JSFiddle here: http://jsfiddle.net/F2smc/5/
div.demo div {
display:table-cell;
text-align:center;
width: 33%; // <<< Added this
}
Basically the other 2 cells are zero width so the second row collapses to something very narrow in the middle so it looks like it is only under option 2.
Better example: http://jsfiddle.net/F2smc/29/
You can get the same effect, without specifying an exact % width, by simply adding this CSS instead for the spans (so they do not collapse within their parent divs):
div.demo span
{
width:100%;
}
If you put unique colors on the divs it will become really obvious what is going on. 100% on the div does not mean the divs will use it like in a table. Basically any change that applies a width to the underlining divs/spans will work. Suggest you use Chrome in F12 debug mode to view this type of work as it clearly shows the original elements were all 0 width.
PS. Is really is a bad idea to use ids that vary only in case
On a separate note:
You would not normally hardwire events for each different id in JQuery when they all do roughly the same thing. If you change your ids to be really unique (not just by case) you can do something like:
$(document).ready(function () {
$('.menu').hover(function () {
$('#' + this.id + '-l').addClass('under');
}, function () {
$('span').removeClass('under');
});
});
Which takes the id of the current hovered item, appends something unique then updates the matching item by id.
Working demo: http://jsfiddle.net/F2smc/30/
That should clean things up while retaining your original structure.
For testing i have given text-decoration,you replace that with background-color..
HTML
<div class="demo">
<div id='one' class="hover">Span 1</div>
<div id='two' class="hover">Span 2</div>
<div id='three' class="hover">Span 3</div>
</div>
<div class="demo">
<div><span id='Span1'></span></div>
<div><span id='Span2'></span></div>
<div><span id='Span3'></span></div>
</div>
CSS
div.demo {
display:table;
width:100%;
}
div.demo div {
display:table-cell;
text-align:center;
}
.under {
width:auto;
height:1px;
text-decoration:underline;
margin:0px auto;
display:block;
}
JQuery
$(document).ready(function(){
$('.hover').hover(function(){
var id=$(this).attr("id");
$('#'+id).addClass('under');
},function(){
$('.hover').removeClass('under');
});
});
Working DEMO
Try this
I have editted your html and css
<div class="demo">
<div id='span1'>Span 1</div>
<div id='span2'>Span 2</div>
<div id='span3'>Span 3</div>
</div>
<div class="demo">
<span id='Span1'></span>
<span id='Span2'></span>
<span id='Span3'></span>
</div>
and add this to your css
div.demo span {
display:table-cell;
width:100px;
}
or
Try this
Working DEMO
without changing any html and css
just add width:100px; to
div.demo div {
display:table-cell;
text-align:center;
width:100px;
}
Hope this helps,thank you
I'm struggling to find the right Jquery to show/hide a div at a height that is parallel to the trigger button. I attempted to offset the show/hide div to the right, but because the footnotes appear in different left/right positioning, each would be different. Instead, I will need to place the divs inside of another div along the right.
My hope is to add hyperlinked footnotes to some text, so that readers will not have to search for the footnotes, but also won't be overwhelmed with too much text. I would prefer to have more than one footnote open at a time, but if it needs to be one at a time to properly display, so be it.
EDIT:
#rohan-kumar helped with this code
$('.a_footnote').on('click',function(e){
e.preventDefault();
var divId=$(this).data('divid');
console.log(divId);
$('#'+divId).toggle();
});
So here's the way it stands: http://jsfiddle.net/6n28t/21/
However, my primary problem remains -- how can I make the footnote appear at the same height as the trigger? These will be long pieces of text and I want the footnotes to appear at the same height as the corresponding mark. How can I made [2] appear farther down on the page?
So, basically combining the other answers leads to this Fiddle
Html is the same as what you have in your fiddle.
CSS
.wrapp{
border:1px solid red;
height:100%;
}
.clear{
clear:both;
}
.footnotes div {
position: relative;
display: none;
}
JavaScript
$('.a_footnote').on('click',function(e){
e.preventDefault();
var divId=$(this).data('divid');
var height = $(this).position().top;
console.log(divId);
$(".footnotes div").hide();
$('#'+divId).toggle().css("top", height - 10);
});
You don't need the floats, I am assuming that you would want this text to appear inline in your paragraphs. You need to position the notes absolutely and then set the top/left according to the position of your clicked element + width of element + offset.
jsFiddle Demo
HTML:
<div class="content">
<p> Lorem ipsum ([1]).</p>
<p> Lorem ipsum ([2]).</p>
</div>
<div class="footnotes">
<div class="footnote1">1. Foo Bar</div>
<div class="footnote2">2. Foo Bar</div>
</div>
CSS
.footnotes > div { display: none; position: absolute; border: solid 1px red; }
JavaScript
$('.footnote').on('click', function(e) {
e.preventDefault();
var $note = $('.' + this.id);
var $position = $(this).position();
$('.footnotes > div').hide();
$note.css({
top : $position.top,
left: $position.left + $(this).width() + 5
}).show(); })
Try this,
HTML
<div class="wrapp">
<div class="content" style="float:left;">
<div> Lorem ipsum (<a class="a_footnote" href='javascript:;' data-divid="footnote1">[1]</a>).</div>
</div>
<div class="footnotes" style="float:right">
<div id="footnote1">1. Foo Bar</div>
</div>
<div class="clear"></div>
</div>
CSS
.wrapp{
border:1px solid red;
height:50px;
}
.clear{
clear:both;
}
SCRIPT
$('.a_footnote').on('click',function(e){
e.preventDefault();
var divId=$(this).data('divid');
console.log(divId);
$('#'+divId).toggle();
});
If you want the div.footnotes will be hidden initially, then you need to add a css like
div.footnotes {display:none;}
Fiddle http://jsfiddle.net/6n28t/7