We Keep Coding

How can I check, if all divs are fully visible inside an other div?

I have a div, called "wrapper", with responsive height and overflow-y auto (so scroll enabled). Inside this div are lots of other divs, called "box". So, for example, if there are 3 divs inside the wrapper and I see them all fully, nothing should happen. But if any of this divs inside the wrapper are not fully visible (on page load and page resize), an other div (called "button") should fadeIn.
I just found this post, but it doesn´t solve my problem:
stackoverflow post
HTML:
<div class="wrapper">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
<div class="button">
My Button
</div>
My fiddle:
HTML + CSS
How can I check, if all divs are fully visible inside an other div (on page load and page resize)?
#
UPDATE:
My problem is, that "viewport" doesnt work for me, because the script has also to check what happens outside the viewport (dynamically). The height of my divs is responsive and so not every time all of it is in the viewport ...
... but for me, I found an other solution. Now I check the height of my main div (my main content) and if this div is smaller than the "wrapper" div, I will fadeIn the "button" div.

You can try this my friend"
if ($(".wrapper div").css('visibility') === 'hidden') {
// ...
}

When hosting your HTML:
Right click on your wrapper and inspect element
Hover over the first div inside of the wrapper, and it should become highlighted
Check to see if that div is visible on the page
Continue the above steps for every div in your wrapper

This seems to solve a problem that's the same as, or very similar to, the problem you're describing:
zeusdeux/isInViewport
The "examples" folder includes various examples where DIVs react to whether or not they are contained within a defined viewport div.
EDIT: After reading comments on the question, this seems to be the best resource for reading up on the general problem and solutions (even though isInViewport looks very useful as well):
How to tell if a DOM element is visible in the current viewport?

slimScroll hidden on page load

I'm developing an application that uses the slimScroll jQuery plugin (http://rocha.la/jQuery-slimScroll) to essentially add a nice overflow to div containers.
Everything works apart from a small, almost insignificant annoyance: when the page is loaded for the first time, the plugin is initiated on the div and automatically displays the scrollbar. After hovering in then out of the container, the scrollbar is hidden.
Is there any way to make the scrollbar start in a hidden state on page load?
The developer was asked this a number of times but I can't find a solution on the website.
Any help would be much appreciated.

This code work for multiple elements that have same classes.
JS:
$(document).ready(function() {
$('.inner').slimScroll({
//your options
opacity: 0
}).mouseover(function() {
$(this).next('.slimScrollBar').css('opacity', 0.4);
});
});
for such HTML code like this.
<div id='box'>
<div class='inner'>
some paragraph
</div>
</div>
The result show here: https://jsfiddle.net/ATR616/4Lnr3fju/2/

Adding enhanced grid within a titlepane in dojo

So here goes
I have a widget that I have created which contains an enhanced grid.
I now want this widget to have a titlePane that wraps around the enhanced grid which allows me to collapse the grid to the bottom of the page on click.
so, thinking this to be a simple task i edited the template in my widget to be the following:
<div id="wrapper">
<div data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Over one year'">
<div data-dojo-attach-point="gridNode" id="grid"></div>
</div>
</div>
The behaviour I was expecting was a title pane wrapped around my enhanced grid but instead all i am getting is the grid appearing with no title pane.
Looking at the dom I can see the div for the title pane but no title pane is showing when loading the web page in the browser.
Any dojoers out there know what black magic is required for this to work?

how to get gap between tab titles on dojo tab container

Dojo tab container puts the page titles next to eachother without space in between. How to align the tab page titles to the entire width of the tab container so it appears there is equal spaces between each tab.
This is something like 'justify' alignment on paragraph where texts wraps to the full width of a line.
Thanks for help.

I do not believe there is a built-in way to control the spacing of tabs in a TabContainer. If you need to space out the tabs, you could try a solution where you apply relative css positioning to the tabs in order space them out.

You can apply CSS styling to the dijitTab class to alter the tabs of a TabContainer. Just give the TabContainer an ID and use that to access and style the tabs within it. For example:
Declare the TabContainer in HTML:
<div id="myTabs" data-dojo-type="dijit.layout.TabContainer" ... ></div>
Then use the following CSS to set a margin between tabs:
#myTabs .dijitTab {
margin-right: 16px;
}
Of course you could get more creative with the styling, but this should get you started.

how include multiple divs in one javascript toggle?

I am trying to implement a javascript toggle effect for my "small" or mobile sized version of a responsive site. I am using my own custom WordPress theme.
I'm trying to use the script from this article: http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial/comment-page-1
The tricky part is that I'm trying to include several divs, not just a single nav. If you look at the site now (which is still under construction), at:
http://66.147.244.81/~assureva/
and reduce your browser window to narrower than 540px, you'll see that I've managed to get my top navbar (smallnav), 2 "login" links, and facebook and LinkedIn icons, all to disappear, and re-appear when pressing the "main menu" button that now appears at the top, to the right of the logo. But I can't seem to add in the last part, which is the 4 links that comprise the main "nav". I've wrapped the entire area in a div (mobimenubg), but the main navbar acts like it isn't in that div, but the "smallnav", "logins" and "socialcons" divs all combine as desired in the "mobimenubg" div.
If I go ahead and set the "navbar" div to "display:none" it will disappear but it won't re-appear when I click the "main menu" button.
So I think the answer to ask the javascript to include the "mobimenubg" div AND the "navbar" div (the "navbar div is a container that includes the actual "nav") but I don't know how to write it properly.
Here's the javascript:
<script type="text/javascript">
jQuery(document).ready(function($)
{/* prepend menu icon */
$('#mobimenuwrap').prepend('<div id="menu-icon">Main Menu</div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
$("#mobimenubg").slideToggle();
$(this).toggleClass("active");
});
});
</script>
Can someone tell me how add the navbar div? Do I add another line after:
$("#mobimenubg").slideToggle();
or can I include it in the parens:
$("#mobimenubg" IN HERE?).slideToggle();
I don't know the conventions -
Help greatly appreciated!!

I've wrapped the entire area in a div (mobimenubg), but the main navbar acts like it isn't in that div,
You actually have the right code, but your HTML structure is off. The navbar div is not contained within the mobimenubg div, and that is the problem. Just make sure to nest navbar there, or otherwise I think you can also call the function on the navbar like:
$("#navbar").slideToggle();