We Keep Coding

Lazyload plugin against a background-image div is causing the content contained within the div to flicker when loading the image

I have a small but annoying issue. I'm using the Lazyload plugin for JQuery (Mika Tuupola - here) and I'm having an issue whereby using the fadeIn effect on a div background-image attribute causes the inner content to flicker when the image finally loads. It essentially reloads the content when the image loads. How do I avoid this?
My html extract:
<div class="wrap" id="wrap">
<div class="bg-image" data-original="images/image_1.jpg">
<h1>Some title here</h1>
</div>
<div class="bg-image" data-original="images/image_1.jpg">
<h1>Some other title here</h1>
</div>
<div class="bg-image" data-original="images/image_1.jpg">
<h1>another title here</h1>
</div>
</div>
My JS usage of Lazyload is against the container element because I have the structure above repeated several times (loading the same image):
$("div.bg-image").lazyload({
container: $("#wrap"),
threshold: 200,
effect: "fadeIn"
});
For the most part it works well but the flicker is off putting somewhat. Hopefully that's enough detail, I'll see if I can get a a sample fiddle going (you may have to bear with me on that ...)

I'm the creator of another lazy load plugin for jQuery. You can't solve the problem this way. The problem is, that, when the outer div fades, the content will always will fade too. There is nothing you can do to prevent this.
A possible solution is to put the background in another div in the back of the content boxes. So it will be visible as background, but it not really is. So there is an extra element for the background, which can be faded alone. Then the content will not fade too.
Here is a quick example of what I mean:
$(".bg").lazy({
threshold : 0,
effect : "fadeIn",
effectTime : 500
});
.wrap > div {
width: 500px;
height: 250px;
position: relative;
}
.bg {
width: 500px;
height: 250px;
position: absolute;
z-index: -1;
}
h1 {
text-align: center;
line-height: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.lazy/1.7.3/jquery.lazy.min.js"></script>
<div class="wrap" id="wrap">
<div>
<div class="bg" data-src="http://dummyimage.com/500x250/ff00a2/ff00a2&text=1"></div>
<h1>Some title here</h1>
</div>
<div>
<div class="bg" data-src="http://dummyimage.com/500x250/0099ff/0099ff&text=2"></div>
<h1>Some other title here</h1>
</div>
<div>
<div class="bg" data-src="http://dummyimage.com/500x250/45d104/45d104&text=3"></div>
<h1>another title here</h1>
</div>
</div>

Content padding with Snap.js

I just got one maybe simple question. I use snap.js to create a slidable menu, but how do I add padding to the contant?
Here is the source: http://runnable.com/UoqMXucPORNzAAIH/how-to-create-a-mobile-shelf-using-snap-js-for-javascript
Source project on GitHub: https://github.com/jakiestfu/Snap.js/
Here is the code for the content:
<div id="content" class="snap-content">
<div id="toolbar">
<h1>Default</h1>
</div>
<!-- Here goes the content I guess, but there is no padding -->
</div>
I need to have all content in the #content to make it slidable with a finger. But I can't get the content to have padding so it looks bad, in my opinion.. If I add padding to #content the menu also gets it. Then i tried to add a new <div> named #main and placed it under #toolbar but then the padding is acting like margin for some reason. #main had 100% width and padding of 10px. The #toolbar displayed like 100% but showed 100% + 10px (left) + 10px (right) so it adds the scroll and look awful.
How have others solved this?
As you can see in this JSFiddle there is no padding: http://jsfiddle.net/TorchMan/MexXY/
Thanks in advance.

you can move all of your contents you mean to new element,
for example:
<div id="content" class="snap-content">
<div id="toolbar">
<h1>Default</h1>
</div>
<div id="content-wrapper">
<!-- Here goes the content I guess, but there is no padding -->
</div>
</div>
and add style
#content-wrapper{
padding:10px;
}
http://jsfiddle.net/MexXY/21/

positioning content after div transform

I have content in a div that I am trying to scale according to a user's preferences. I am using Louis Remi's transform.js to do this.
However, when I do, it pushes the content either way above the top of the div (cutting off content on scale in) or way far down the container (leaving a lot of white space on scale out).
I was wondering if there was anyway that I can push content so that it would affix itself to the top of the div?
Here is a jsfiddle example. Right now it is at a .50 scale which shows content being in the middle of the screen leaving a lot of space on top of and bottom of div.
HTML
<div id="reportContainer">
<div id="zoomMe">
<div id="content1" class="fillerBox"> </div>
<div id="content2" class="fillerBox"> </div>
<div id="content3" class="fillerBox"> </div>
<div id="content4" class="fillerBox"> </div>
<div id="content5" class="fillerBox"> </div>
</div>
</div>
CSS
#reportContainer { margin: 0;padding:15px;overflow-y:scroll;overflow-x:hidden; border:2px solid black;}
.fillerBox { background-color:#ccc;border:1px dashed #000;height:1500px;width:910px;margin:0 auto;margin-bottom:30px; }
JS
$(document).ready(function() {
$("#reportContainer").height($(window).height()-50);
$("#zoomMe").css('transform', 'scale(.50)' );
});

A nice person on one of my other questions actually answered this, but since someone up-voted my question I guess I will put it here as well.
There is a great CSS option to append a transformed element. This is what I ended up doing thanks to the help of a fellow stackoverflow'r.
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
transform-origin: top center;

Extend Sidebar Height to equate Content Height Using Javascript

I've a simple javascript function which is meant to increase my sidebar div's height to make it equal to the height of the content div. this is how I am doing this....
Javascript:
<script type="text/javascript">
function absar(){
document.getElementById("sidebar").style.height = document.getElementById("content").clientHeight;
}</script>
HTML:
<body onLoad="absar()">
<div id="sidebar" style="border:1px solid red">Few content</div>
<div id="content" style="border:1px solid red">
some content <br>
some content <br>
some content <br>
some content <br>
some content <br>
</div>
</body>
This code will make the height of sidebar equal to the height of content div. ** OK**
But when I paste same code in wordpress(where I've same id values content & sidebar) just after the body tag and provide onload="absar()" to body it does nothing, exactly nothing.
At this point when I've designed almost whole layout I can't go with a new solution like Faux Columns or table etc. .

At last a stupid css trick worked and worked perfectly,....
for my sidebar div I set
padding-bottom: 5000px;
margin-bottom: -5000px;
and for the container which contained sidebar and content divs. I set
overflow: hidden;
and it worked perfectly - Just like the way I wanted, Please tell If you know any drawbacks of this trick,... I'll be posting here if I found some,
Below is the example code,
HTML
<div class="main">
<div class="sidebar">Few Sidebar Widgets</div>
<div id="content">
Bang Bang Content <br>
Bang Bang Content <br>
Bang Bang Content <br>
</div> <!-- End of Content -->
</div> <!-- End of Main -->
CSS
#main{
overflow:hidden;
}
#sidebar{
padding-bottom: 5000px;
margin-bottom: -5000px;
}

Further to #Absar 's answer, can I just add my adaptation?
I did this:
.container {
overflow: hidden;
....
}
#sidebar {
margin-bottom: -101%;
padding-bottom: 101%;
....
}
I did the "101%" thing to cater for the (ultra rare) possibility that somebody may be viewing the site on a huge screen with a height more than 5000px!
Great answer though, Absar. It worked perfectly for me.

For several reasons, this should be solved by using proper CSS and HTML markup, not by Javascript. The main reason is the separation between your site logic and your presentation layer. CSS is just for visual layout, and simple presentation issues should be solved in the CSS domain. This seems to be the case of your question.
I suggest you have a look at this CSS-tricks article. It is both enlightening and thorough.
Hope it helps.

ajax loading content but my div won't expand to fit it

I have a page that static data in it will push a div down to make it longer. But when I use ajax loaded content then the div will stay as big it originally was and it looks like my new content will just overlap it...
I have a setup like this
<div id="wrap">
<div id="main-content">
<div id="content-fill">
<div id="files_left_pane">static content</div>
<div id="files_right_pane">ajax content</div>
</div>
</div>
</div>
#content-fill {border:1px solid #BDBDBD; width:919px;}
#files_left_pane {float:left; border-right:1px solid #BDBDBD; width:100px;}
#files_right_pane {float:right; widht:819px}
the height of the right pane is controlled by the height of the left pane since there is static content in there, mainly my navigation menu.
any advice?

as far as I test it when you add content then the div start from the left side. This happens because you didn't set width. for example add width:200px for #files_right_pane and check the results.
live example: http://jsbin.com/udori5

Set Your div position as relative
<div id="files_right_pane" style="position: relative;">ajax content</div>

Easiest fix is add float:left to content-fill