I'm looking to do a fluid reponsive equal height column, with an 'overlay' on click.
To get the responsive equal height thing working, I've made the 'overlay' the actual base content (so it sizes the columns), and am attempting to then put the initial state in the overlay.
This works fine on FF and Chrome, but not IE10 or 11 (haven't tested earlier).
On IE, doing position: absolute; right: 0; left: 0; top: 0; bottom: 0 inside a TD doesn't seem to make the overlay cover the whole TD, rather just the size of the content inside it.
http://codepen.io/anon/pen/dooJjb
Any ideas?
Bonus Points:
What my designer originally wanted was for the header to slide up, and the paragraphs to slide up from the bottom - don't really think this is possible without a lot of JS?
I've not checked your example in IE but I know there are serveral ways you could get this working on all browsers.
I always avoid before & after with layout as they have some cross browser issues, this may not be your current show stopper but either way before & after are not really for layout IMHO.
I did something similar a few months ago:
[ [box,box,box] [overlay,overlay,overlay] ] : The two holders have position absolute, top & left = 0, the overlay holder z-index:1.
[ [box,overlay] [box,overlay] [box,overlay] ] : The boxes are relative and the overlays are positioned absolute. All overlay dimensions are defined and given a z-index of 1.
The key is to keep it clean you really don't need more than 3 levels deep in this scenario you just need to position, and set the layers right.
Animating paragraphs would be clean, with jQuery but I'd prefer to us another animation lib like GSAP. But if you must natively and if you can afford to skip the animation with IE8 then you will basically set CSS3 transitions and use something like .classList to toggle the class http://jsfiddle.net/davidThomas/Tpz86/
function classToggle() {
this.classList.toggle('class1');
this.classList.toggle('class2');
}
document.querySelector('#div').addEventListener('click', classToggle);
Related
I'm trying to create an off canvas mobile menu for a website I'm working on which will replace an old buggy version. I've settled on https://github.com/mobify/pikabu as it does everything I need but I'm having a little trouble with it calculating the wrong height.
You can see the issue at: http://verypc.very-dev.co.uk/
You'll need to shrink the menu down, then hit the 'hamburger' at the top left. The menu slides out but you'll notice that you can still scroll the body of the page. The extra height is coming from pikabu and an inline style that it calculates.
My initial thought is that this is something within my CSS that's possibly causing the extra height but I haven't been able to track it down successfully.
I'm trying to avoid editing Pikabu itself but it's not a huge problem to do so if necessary.
Any help would be great!
this appears to be a 'feature' of pikabu.. (if you step through the Pikabu.prototype.setHeights function you can see the value being returned for windowHeight is incorrect)
line 514: var windowHeight = this.device.isNewChrome ? window.outerHeight : $(window).height();
window.outerHeight on chrome includes the height of the browser toolbar, address bar etc (~95px)
you will probably need to either remove this line so that it just supplies window.outerHeight or do some better device sniffing so that this only triggers on mobile
I was fiddling around with Firebug.
In the css when you turn off header { position: fixed; } it seems to pop into the right place (main.css).
I would not use position: fixed/absolute at all in CSS. If you remove those, including the top: 0, right: 0 and height: 50px tags, you clean up your code. It seems to work properly too.
I've created an example here : http://jsfiddle.net/Ninjanoel/9GEGU/
Basically, I'd like to affix something to the right, in this case, the red box, I want it to appear to just pin itself to the top as it should once the correct amount of page scroll has occurred, but everytime it 'affixes', it jumps to the left, overlapping the content I already have on the left.
It's great that bootstrap has such a volume of documentation, but unfortunately I think I'm missing something regarding this. Please help.
var offsetFn = function() {
return $('#sidebar').position().top;
}
$(document).ready(function(e) {
$('#sidebar').affix({
offset: {top: offsetFn}
});
});
is a code snippet I found on Stack overflow to not have to guess the top offset value, but even if I give it a simple value, when the div becomes affixed it jumps left.
Note about the fiddle : it doesn't appear to be working very well, at least the version on my hdd jumps left, but it is the code i'm using basically, and the small window size may complicate things, green and red boxes are suppose to be vertical columns
Create inner div for sidebar. Affix is setting position: fixed to column therefore making it not working.
Edit: see http://jsfiddle.net/9GEGU/2/ and your function is needless, only causing weird behaviour in FF, so remove {offset: {top: offsetFn}}. It will look the same but scrolling will be smoother.
Also set width of span5 (290px) to the #sidebar because when element has position: fixed it is removed from document flow and isn't limited by parent's width.
I have a set of divs with position = absolute, and they can be positioned across the screen.
If the content of any div doesn't fit on the screen, the browser wraps the text into multiple lines and attempt to fit inside the window.
However, I dont want the browser to do that, It should instead hide the content.
http://jsbin.com/welcome/35835/edit/
Edit:
you may think of it as a div on a page with absolute positioning. and
1) the user can drag the div around
2) user can manually change the width of the div( there is a stretch box widget, which the user can use)..
So the problem is when the user is dragging the div around near the edges of the screen, the text should hide and not wrap if it goes out of the window. Hope this explains better
As shown in the example, block 2 shown is what I want.
So, lets say the width of the div is 100px, and the left position of the CSS style is (screen width - 50), then the rest of the text should hide.
Solution 1: white-space:nowrap. Cant use this, since this is a flexible width UI where user can change the width of the div if they want.
Solution 2: If I set the width of the div, explicitly to a number, it works fine.
But not a optimal solution, as then here I will always have to calculate the width for all divs at the time of rendering.
Is there a more optimal solution, which can make the browser not try to fit the text into the screen.
Hard to tell what you're asking. But I think you can use
{
height: 1.2em;
overflow: hidden;
}
To hide the content that is longer than the one line you support
http://jsfiddle.net/MXXDC/2/
If you put them all inside a huge (e.g. 5k px * 5k px absolute positioned div you should see the expected effect: http://jsbin.com/welcome/35862/edit
Is this what you want? (second item)
I wrapped the inner text in a very long div and applied overflow:hidden to it's parent.
I am not sure the exact use case of the widget so I am not 100% sure on what it can have and not have. I have an idea, maybe it will be useful - setting width to a % might help, something like this
.block2{
left: 50%;
top: 100px;
width: 100%;
}
you can set this in the css to avoid calculation with js, but like I said I am not sure of how this is used so this might not work but it might give you some ideas
I have a fixed width element that I want to essentially shoot off the screen either to the left or to the right, I want it to be seen visually though hence the use of animate. However its not working out as planned with my current attempts.
What it currently seems to be doing is jumping to the opposite side of the screen then panning across in the direction I want. However what I want it to do is from where it sits go across the screen
$('.element').animate({'marginLeft':($(document).width())+'px'},1000, function(){$('#dashboardWidgetContainer').hide().html('')});
that is what I am attempting to use to achieve my desired goal
a sample of the layout would be
<div id="container">
<div class="element"></div>
</div>
set it a fixed position first
go:
$el = $('.element');
$el.css({
position: 'fixed',
top: $el.offset().top,
left: $el.offset().left
}).animate({left:'100%'}, 1000);
Are you trying to achieve something like this:
http://jsfiddle.net/t2FxV/
If it is jumping across the screen it probably has to do with margin changing from auto to 0, like in this example: http://jsfiddle.net/Paulpro/t2FxV/1/.
Make sure you set the marginLeft to the current position before animating:
$('#element').css('marginLeft', $('#element').position().left).animate({'marginLeft':($(document).width())+'px'},1000, function(){$('#container').hide().html('')});
http://jsfiddle.net/Paulpro/pakCP/
Your script works fine as jdavies pointed out (post deleted?), you might need to change the dashboardWidgetContainer to a selector for an element that exists. One thing you should note is that if you don't plan on reinserting the element into the page you should replace .hide().html('') with .remove() as it's much cleaner to remove the element from the DOM altogether than leave it sitting out there with display: none; and no contents.
$('#element').css('marginLeft', $('#element').position().left).animate({'marginLeft':($(document).width())+'px'},1000, function(){$('#container').remove()});
We have a script used to edit certain files inline. Basically, each file is broken down into sections, and hovering over a section will bring up a set of tools (just a div with image buttons) that you can use to edit that particular section. We have the parent elements (sections) set as position: relative, and the set of tools set as position:absolute which are set to the right side of the section. This all works fine, especially since many of these are rather small.
However, we do have many of these sections which can become quite large, reaching lengths of two screens or even more. In these cases we would like for the tools to sort of flow with the user's scrolling, so say if the user is looking at the vertical-middle of the section, the buttons will rest at the vertical middle as well, however, if the vertical center of the user's screen scrolls past the section but the user is still hovering over the section, we would like for the tools to remain within their parent element and not be able to pop out.
We already have a script to move an element with the user's scroll if it goes out of the screen, so I was thinking I could modify that a bit to do that, I'm just not sure how to bound the element by it's parent.
TL;DR: How would I create an element that attempts to be vertically centered in the user's window, but cannot leave it's parent element.
Keeping it vertically aligned but only displayed when the section is hovered wouldn't do the trick?
This sounds like a manual positioning. You could use jquery to get the size of the browserwindow, get the scroll offset of the parent and calculate the top of the tools acording to screensize and scrolloffset value of the parent.
I don't thin css can handle this alone.
You could also just use one toolbox for all sections and pass the parent element as parameter.
Best wishes
Here's a quick implementation I came up with based on Andreas's suggestion
$(window).scroll(function(){
var a = $(window).scrollTop() + ($(window).height() * .35);
var b = $("#movedelement");
var c = $(window).scrollTop() + ($(window).height() * .48);
if (a < (b.parent().offset().top + 8))
b.css({position: "absolute", top: "1em" });
else if (c > (b.parent().offset().top + b.parent().height() - 8))
b.css({position: "absolute", top: b.parent().height() - 100 });
else
b.css({position: "fixed", top: "35%" });
}
Tweak some numbers around for the element height. Dirty, but works.