I have a dashboard with a left-side bar. The bar has a lot of elements in it (including inner lists, etc). Obviously, it didn't fit in such a small area. The solution was to use a slim scroll by JQuery. The problem I have encountered, though, is unavailability to scroll to the very last element inside the bar.
The bar looks like this (without scrolling)
Now take a look at how it looks when inner elements are open:
See? The very last element cannot be seen properly (although it is clickable). Unfortunately, the only way to "fix" it is perphaps use some parameters, while initializing this stuff. Now it looks like this:
$('.elemToAddScrolling').slimScroll({
height: '100%',
wheelStep: 5,
});
Basically I see that the library generates div elements - one of them is slimScrollBar - exactly what I look for. I see that it has top property, and whenever I scroll it alters. The maximum value, though, is 107px (when we reach "the end"). I use the latest version of this plugin - 1.3.8 Is there a way to customize it really?
The issue was reproduced here.
So it was clear that it was a padding issue from a parent element. Now which one? In the codepen, it was the body... In J. Doe's project, it was on an outer wrapper were he found a 44px padding.
The issue was fixed by applying a margin-top:-44px to the inner container... To move the whole thing up.
But, another way could have been to apply height: calc(100% - 44px) in the slimScroll settings! It can take it, as you can see it here.
Related
I spend couple of hours to try to get width of my div container. I read many questions and answers but none of them seem to work in my case - I always got 0. Finally I found that I can get it through scrollWidth property which wasn't even mentioned in this question and similar.
Now I have what I wanted by I still have no idea how this works.
Why all the other methods fail? Why this is named scrollWidth? I don't want to scroll anything - it's so confusing. Can I get the size of an element before I append it to a document - even scrollWidth don't work in that case. Is there any model I should follow to always get what I see on the screen? I can't see any patterns right now, I write someting, see something different on the screen, and get something even more different in the output. Every time I want to do someting it seem to be 10 different methods I can use but usually only one or two work because it depends on which methods I used earlier. When i work with 2d graphics I used to have x,y,width and height but in html I allways got those smarty CSS which seem to know better what I want to do. Sorry if this sound a little officious but I'm a little annoyed when i need to spend so much time on a trivial task like this. I use to draw graphic on canvas and it was much simpler but now I want to make a simple website so it's probably not a good idea to build it this way.
Here is my example
I understand that i get 0 size becouse those properties refer to element independently of its children and my container has 0,0 size, right? I read that if I set display: inline-block; style it will adapt size to match its children automatically - why this in not working?
The container element in fact has no width. This is why you are getting widths of zero. You can see this if you use dev tools element inspector.
The reason for it being that the container element is absolutely positioned and has no set width. Your child elements are also position: absolute and therefore they will not force the container element to 'grow' to their size.
To get the visible width of the menu, instead you could total up the widths of all the child elements (the first-level menu items). This is probably the best approach to use for the way you currently have things set up. Otherwise, I would suggest completely changing your approach with the html elements you are using, to the CSS properties you are using to position elements where it would not be required to use position: absolute.
I would advise you to open up your dev tools element inspector and start looking at how things react when you change the position from 'absolute' to 'relative'.
Understanding how to position elements and how widths/heights are affected using CSS will save you a lot of headaches - like the one you are having now :)
document.getElementById("mydiv").offsetWidth
This will return the width, including padding.
I am developing a mobile web application using jQuery and i have been requested to have each page transition into the next with an animation where the page is "split in half", then have the upper part slides up and the bottom part slides down, thus revealing the next page.
I have a small idea, but i dont seem to have the knowledge to get trough:
2 Canvas with display: none, each width width: 100%, height: 50%. - Check
Have the actual display be rendered into said canvas's - I have not the slightest of ideas.
Ajax the next page in a div below both canvas's - Check
Slide the canvas's in the respective directions - Check
Set the canvas's to display: none and restore them to their original positions - Check
Any thoughts? I'm open to use any other framework appart from jQuery, if that's the need. I am also open to change my canvas idea into something else.
EDIT:
As for clarification imagine the page to be a closet, but a vertical one so its doors (the actual page) will slide into the roof and the floor respectively (Its not the greatest of comparisons, but please bear with me) and thus let you see and interact with the content of the closet (The next page). This will go on and on until the application's workflow ends at the last screen, as there will be no back button.
I'm pretty sure I know what you want. You have multiple pages in your registration/form process and instead of having the old fadein/fadeout or sliding effects, you want the top half to slide up and the bottom half to slide down. In order to do this, I'd dump the canvas idea. I don't think that there's an easy way to do it using canvas as of right now. You could try using the html2canvas script, but it's not 100% accurate when it comes to rendering things like this.
As an alternative, I'd recommend using the following process. As a preface, make sure that every step in your form has its own container div (called something obvious like "step-wrap" or "step-container"). Then, when you begin the animation, the first thing to do is to duplicate the current step-wrap, calling it something like step-wrap-animation. Give the original wrap, step-wrap, a height of 50% and position the duplicate below the first with the same height of 50%. Both of the divs should have styling that has an overflow of hidden. Make sure, also, that you set the scrollTop of the duplicate div to scroll to the bottom so that it looks like a continuation of the first div. Everything from here should be smooth sailing.
Second, once you have everything in the first step working, start the animation process. You can do this however you want now that we have the splitting functionality figured out. Make sure that before you start splitting the two divs apart you put the next step behind the previous so that it unravels.
Essentially, what you need to do is:
Duplicate the div
Position both divs (the original and the duplicate) so that both the heights equal 50% and they look like continuations of each other
Animate the top div up, bottom div down
Here's a basic fiddle illustrating how something like this should work. Click on the rendered screen to get the animation going.
Take a look at backbone.js and marionette.js based on backbone.js.
backbone.js is MVC framework where you can define separate views. Marionette is an extension which supports regions and switching views based on whatever you want. Inside switching logic you can easily implement your transitions. Very generic answer but perhaps it will help you to get started.
I'm trying to make sortable blocks with various heights using JQuery .sortable().
But if you try to move the big block to the right then one of small boxes moves to bottom and leaves blank place.
And when I set float: right to parent div instead of float: left I can't drag the big block to the left correctly.
I understand why it happens and how the float works but I can't find a workaround.
jsFiddle sample
UPDATE:
Here is complete picture of what I'm trying to do. All I want is to be able to create this structure from blank page using only 6 sizes of width, resizable height and sortable items.
Now works I originally had an almost working model using a second wrapping div around the short items. The bug is in my FF Win 7 (seemed okay in IE9) which sees a slight height difference between the large block and the group of blocks, so a lower float "hits" one to the upper left (if it is a large block) and does not go left. When I look in Firebug, FF is showing the computed border to be not 1px, but 0.916667px, so I don't know if that is the problem (fixed now below).
See http://jsfiddle.net/tnLcg/47/. I had originally enabled the ability to sort between short holders, but I think the correct functionality would be to make such a move a swap. Perhaps http://www.eslinstructor.net/demo/swappable/swappable_home.html might be implemented to work between the short holder stacks.
EDIT--Firefox fixed: I kept the short holder border but set it to transparent (so it calculates the same as the double height box) then used relative positioning of the elements inside to adjust for that and it works in FF now for me: EDIT: Improved version (4 column) http://jsfiddle.net/tnLcg/99/.
You could try jQuery Masonry for that sort of layout (if I understood your question right).
If you want the two halves to be able to move independently, split them into 2 columns, then use the connectWith option to make them draggable between the two:
http://jsfiddle.net/ujahd/
If you want the two halves to stay grouped together, then group them into one div:
http://jsfiddle.net/W5VzD/1/
There also this tutorial if you were interested in reading up on it. Hope you found your answer.
edit: it's not jquery though.
I am working on a js player and the seek bar doesnt want to play nice. You can see two on pageload, they both work properly. Now click on either first or second div with the play img on it and a bar will appear. When you click there the bar is not precise. Its several pixels off.
this.offsetLeft is giving me 0 instead of 10 which breaks this. How do i fix it?
-edit- i still dont understand why but i decided to look again a min ago and deleted random css i pasted in. i deleted this single line and it worked. I am not sure what that block does but i know without that line it currently looks the same. player is not done yet so maybe i'll need this and revisit the question
position:relative;
The position:relative style is often used to make the element the "origin" for absolutely-positioned child elements. In other words, child elements with position:absolute calculate their positions from the relative parent's position. (instead of the window's) This way child elements follow the parent wherever it is placed.
Relative positioning also lets you use 'left', and 'top' to adjust the position of the element from its normally position.
The style can also be used to fix positioning and scrolling bugs in Internet Explorer.
It maybe too late for this issue but my experience can be useful here.
I had the same problem, i was getting 0, when i called getOffsetLeft() method.
you must add your widgets into container first and then call getOffsetLeft() method.
A requirement for a current project of mine involves "highlighting" an HTML element in the context of a page. That is, I need to provide some sort of visual effect that decreases the brightness of the surrounding page while leaving the element at full brightness.
To achieve this, I'm trying the following approach:
Determining the highest z-index value of any element on the page (using JavaScript).
Creating an element to function as a "backdrop" on top of the page. This is just a <div> with a translucent gray background image, sized to 100% of the width and height of the <body> element, with position: fixed. I set its z-index to 1 greater than the highest z-index I've found on the page, with the intent that it will overlay every other element on the page.
Change the z-index of the "highlighted" element to 1 greater than the backdrop. The intent is to allow it to sit on top of the backdrop, which in turn sits on top of the rest of the page.
I got it working on a quick test page:
http://troy.onespot.com/static/stack_overflow/z_index_test.html
but when I tried to set it up on a few actual Web pages, it didn't work in all cases. For example:
http://troy.onespot.com/static/stack_overflow/z_index.html
Here, I've inserted two "dummy" elements on a copy of a Jacksonville.com article page, both with a class of test (if you're looking at the page source, they're at lines 169 & 859).
I also added some JavaScript (using jQuery) at the very end of the page that functions as I've described above.
The first <div class="test"> does function as I'd expect it to. However, the second one does not - it seems to still be stuck beneath the "backdrop" element, despite having a higher z-index.
I think this may have something to do with stacking contexts, but after reading through the relevant W3C docs (http://www.w3.org/TR/CSS21/visuren.html#z-index & http://www.w3.org/TR/CSS21/zindex.html), I still can't fathom why this is happening. I'd appreciate anyone more familiar with z-index and stacking order than I to take a look at my examples and let me know if anything looks suspicious.
Please note that I've only tested these examples in Firefox v3.6.
Thanks very much for any help!
The problem is that the second test div is inside a bunch of other HTML elements, one of which must be creating a new stacking context (it may be the #wl-wrapper-tier-1 div). Basically, a new stacking context is created whenever an element is positioned and has a z-index other than auto, see this MDC article for more info on stacking contexts.
Ultimately this means you can't achieve your desired effect reliably with this method. I think you're probably better off composing 4 divs to surround the target element.
If the element that you're highlighting is inside a different element (stacking context) with a z-index lower than the backdrop, it will not appear higher than the backdrop, since the element's z-index only controls stacking order within that parent.
The only good solution is to clone the highlighted element and add the clone to the <body> tag.
Beware of inherited CSS styles, which would be lost.