We Keep Coding

Bootstrap navbar overlapping content when using affix

I want
A site banner with a navbar below
The banner to disappear when scrolling down, but the navbar to
remain fixed
I found this jsfiddle which provides the above solution:
http://jsfiddle.net/DTcHh/541/
Two main points of code:
//js
$('#topnavbar').affix({
offset: {
top: $('#banner').height()
}
});
//css
#topnavbar.affix {
position: fixed;
top: 0;
width: 100%;
}
My problem now is when you scroll down to the point where the 'affix' happens. If you look carefully at that point it kinda jumps, and now the navbar is overlapping the first 4 lines in the paragraph
Any ideas how to get rid of that overlap?

You need to displace the fixed .navbar element by adding padding-top to the body element equal to the height of the fixed element.
You can listen to the affix.bs.affix/affix-top.bs.affix events and then determine whether the padding should be equal to the element's height or removed:
Updated Example - the jump you were seeing no longer occurs.
$('#topnavbar').on('affix.bs.affix affix-top.bs.affix', function (e) {
var padding = e.type === 'affix' ? $(this).height() : '';
$('body').css('padding-top', padding);
});

Add "z-index:10;" to your topnavbar.affix class in css.
position: fixed;
top: 0;
width: 100%;
z-index:10;

How to add text to Fancy Box Loader

When clicking on a link I need to load a huge pdf on FancyBox overlay. Until the pdf is loaded I'm displaying a FancyBox loader. The problem is I need to add a text like "Please Wait...etc" in the FancyBox loader. Can any one help?
This is My Code:
<p>
<a class="fancypdf" href="hugepdf.pdf">Click
Here To View The PDF</a>
</p>
<script type="text/javascript">
$(document).ready(function() {
$(".fancypdf").click(function(event) {
$.fancybox.open(this.href, {
type : "iframe"
});
$.fancybox.showLoading();
$("iframe.fancybox-iframe").load(function() {
$.fancybox.hideLoading();
content: {
text: 'Loading...',}
});
event.preventDefault();
});
});
</script>
P.S.
You can modify following fiddle.
DEMO

Please have a look at below modifications:
Updated Fiddle Link: http://jsfiddle.net/PudLq/619/
1) added CSS class as:
#fancybox-loading{
background-repeat: no-repeat;
background-position: center -108px;
text-align: center;
}
#fancybox-loading div{
margin: auto;
}
.overrideLoading{
background: none !important;
color: white;
width: 92px !important;
}
2) after showing loading animation; altering the loading div HTML as per our need as follows:
$.fancybox.showLoading();
$('#fancybox-loading').append("<div class='overrideLoading'>Please Wait...</div>");
3) On hiding the animation; As suggested by "rockmandew" there is absolutely no need of reverting our HTML/CSS changes. On calling $.fancybox.showLoading() again directly; default loading animation will be shown to user. I have tested it and added one more link in fiddle to show default loading animation. Please click on "Show Default loading" to see that effect.
I hope this will help you.

I didn't have a chance to tweak the resulting positioning being a little off-center, but this may be a more simple solution:
http://jsfiddle.net/PudLq/621/
Simply add your text to an :after pseudo element with a content: rule and modify the styles of the loading wrapper to accomodate.
here's the CSS I added:
#fancybox-loading {
background: #000;
padding: 5px;
border-radius: 6px;}
#fancybox-loading:after {
content:"Please wait...";
display:inline-block;
color:#fff;}
#fancybox-loading div {margin:auto;}

Here is a forked version of your Fiddle.
I've basically span with the text "Please Wait". Then I've applied some CSS to that to position it as you did with #fancybox-loading .
Here is the new javascript code -
$(".on").click(function () {
var target = $('#target');
var overlay = $('#overlay');
overlay.width(target.width()).height(target.height()).css({
'left': target.position().left,
'top': target.position().top
}).fadeIn(200);
$.fancybox.showLoading();
$('#fancybox-loading').css({
'left': (target.width() - $('#fancybox-loading').width()) / 2,
'top': (target.height() - $('#fancybox-loading').height()) / 2,
'margin': 0
});
var labelWidth = 80;
$('body').append($('<span>', {
'class': 'waitText'
}).text("Please Wait").css({
'width': labelWidth,
'left': (target.width() - labelWidth) / 2,
'top': ((target.height() - $('#fancybox-loading').height()) / 2) + $('#fancybox-loading').height()
}));
});
$(".off").click(function () {
$('#overlay').fadeOut(200);
$.fancybox.hideLoading();
$('.waitText').remove();
});
And my new CSS -
.waitText {
position: fixed;
margin: auto;
color: white;
text-align: center;
}

Following vijayP's answers:
JsFiddle: http://jsfiddle.net/rockmandew/kmfeppec/
I modified his CSS class of "overrideLoading":
.overrideLoading{
background: none !important;
color: white;
position: absolute;
top: 42px;
}
As you can see I added a "position:absolute" and a "top" position - you can modify this to however you need it to appear.
Next I altered his jQuery, which I modified to actually append a new element:
$('#fancybox-loading div').append("<div class='overrideLoading'>Please Wait...</div>");
As you can see, that reduced your required jQuery to one line.
Finally, I removed the last part of the function, which was removing the class. Since this is no longer required, you can just keep the FancyBox "hideLoading" call.
For learning purposes, I removed the following from the last function:
$('#fancybox-loading div').removeClass("overrideLoading");
$('#fancybox-loading div').text("");
Again, here is the JsFiddle: http://jsfiddle.net/rockmandew/kmfeppec/
First Update:
I saw that the first user to answer, updated his answer and while works, I would suggest shying away from "!important" tags as much as possible. I too refined my answer and developed a solution that didn't use any !important tags.
What was originally: $('#fancybox-loading div').append("Please Wait..."); was now changed to:
$('#target ~ #overlay').append("<div class='overrideLoading'>Please Wait...</div>");
I noticed an earlier comment from you, which specified that you wanted to target specific loading overlays - what this function does is it: Selects every '#overlay' element that is preceded by a '#target' element - you can insert whatever target you want.
I removed all instances of the "!important" tag - this is just best/standard practice.
.overrideLoading{
color: white;
position: absolute;
top: 86px;
left: 16px;
}
Updated JsFiddle: https://jsfiddle.net/rockmandew/kmfeppec/7/

Auto height grid

I have a product grid on my e-shop (http://shop.rukahore.sk/). Every product div is 222px x 222px, but I want it to have auto height.
I tried something like this - http://patterntap.com/code/stacking-columns-layout-masonry ,
but I had to add min-height and it didn't look good because some of the images were smaller or bigger and wrapping div was still 222px, which I don't want to happen due to hover effect, etc.
Can someone provide advice regarding this?

Well, for using the display shown in that page you need to use the plugin
<!-- Requires Masonry | visit http://masonry.desandro.com/ to download -->
If you don't want to add more plugins... Well, what makes you lose the height is the float css property. You should use other thing to make the grid, see for example how they do it in www.camarasdecolores.com.
To add the Masonry plugin:
Add an id to your container:
<div id="masonryContainer" class="hp-products allposts" style="position: relative; height: 2008px;">
Add the init js code in a script
$(window).load(function(){
$('#masonryContainer').masonry({
itemSelector: '.hp-product',
columnWidth: 60
});
});
change some css:
#masonryContainer { width: 0 auto; }
.hp-product {
width: 180px; float: left;
}
.hp-product-img {
}
.hp-product-img img {
max-width: 100%;
height: auto;
}
//Void the following ones
.hp-products {
}
.allposts {
}
.allposts .hp-product {
}

Loss of CSS class after style update

I am applying a class (rShift) to a DIV that acts as a menu tab. The class gives it a :hover behaviour. On clicking the DIV, I bring in a menu on to the screen. On collapsing the menu, I loose the class and the :hover behaviour too.
I am using jQuery UI and have even tried .addClass('') to apply the lost class, but it did not work.
See it at: http://pastebin.com/hdb8Y2Ke | http://bharath.lohray.com/ftree/
When the page is initially loaded, you can see a tab at the top left corner of the page, just under the search box. On hovering the mouse it jumps out a few pixels. On clicking, the menu appears. On clicking the tab again, the menu collapses and the jump out effect is lost :-(.
What am I doing wrong?

The class is being added, but on click, you are applying an inline style to the leftmenutab directly via jquery. This style (left) overrides any styles you have in your style sheets.
I would remove the inline styles you are applying via jquery and add the styles you want to your css.
Create styles like this:
.leftMenuTab[data-state="expanded"] { left: 100px; }
.leftMenuTab[data-state="collapsed"] { left: 0; }
and remove these lines from your javascript:
$(".leftMenuTab").css("left", "+=100px");
$(".leftMenuTab").css("left", "-=100px");
Alternatively, add and remove classes from your leftMenuTab and leftMenu on click and style them through CSS. Something like this:
HTML:
<div class="leftMenu">Hello Menu</div>
<div class="leftMenuTab" data-state="collapsed">
<span class="charIcon"></span>
</div>
JS:
$('.leftMenuTab').click(function(e) {
$('.leftMenuTab,.leftMenu').toggleClass('expanded');
}
CSS:
.leftMenuTab .charIcon:after{
content:'>>';
}
.leftMenuTab.expanded .charIcon:after{
content:'<<';
}
.leftMenuTab {
background-color: #FFFFFF;
border-color: #000000;
cursor: pointer;
float: left;
padding-right: 5px;
position: absolute;
text-align: right;
top: 45px;
width: 30px;
z-index: 2;
left: -10px;
}
.leftMenuTab:hover {left:0;}
.leftMenuTab.expanded { left:100px;}

After you modify the style of the element, the style left: 0px; is left in the DIV, this neglated the effect of the hover.
This is the relevant code:
$('.leftMenuTab').click(function(e) {
temp = $(this);
if ($('.leftMenuTab').attr('data-state') == "collapsed") {
$(".charIcon", this).html("«");
$('.leftMenuTab').attr('data-state', 'expanded');
$(".leftMenu").css("left", "+=110px");
$(".leftMenuTab").css("left", "+=100px");
} else {
$(".charIcon", this).html("»");
$('.leftMenuTab').attr('data-state', 'collapsed');
$(".leftMenu").css("left", "-=110px");
$(".leftMenuTab").css("left", "-=100px");
$(this).addClass("rShift");
}
});
The quickest fix is to erase the left style instead of modyfing it (and you don't need to add the class again):
$('.leftMenuTab').click(function(e) {
temp = $(this);
if ($('.leftMenuTab').attr('data-state') == "collapsed") {
$(".charIcon", this).html("«");
$('.leftMenuTab').attr('data-state', 'expanded');
$(".leftMenu").css("left", "+=110px");
$(".leftMenuTab").css("left", "+=100px");
} else {
$(".charIcon", this).html("»");
$('.leftMenuTab').attr('data-state', 'collapsed');
$(".leftMenu").css("left", ""); //set to empty string
$(".leftMenuTab").css("left", ""); //set to empty string
//$(this).addClass("rShift"); //Not needed
}
});
Note: this was tested with a local copy from your web.

How do I include an element's margin in the hot-spot for jQuery's hover() event?

jQuery(".my_container").hover(function(){
//do code
}, function(){
//do code
});
.my_container { width: 100px; height: 100px; margin: 50px; }
The code above doesn't react to mouse over of margin (margin isn't a part of element?) - how can I change that?

You could use a 50px transparent border instead - the margin isn't really supposed to be mouseable...

Include a pseudo element, e.g.
.my_container:before {
content:'';
position:absolute;
top:-50px;
bottom:-50px;
left:-50px;
right:-50px;
}
This adds an extra 50px to the existing element's clickable area.
If you only want to add this on touch screen devices, you could do this:
.touchevents .my_container:before {
...
}
This requires something like Modernizer to insert the appropriate feature-based CSS class.
Update
As per #Jaladh's comments, you may also need to apply position:relative to the container element, since position:absolute above will be relative to the first ancestor with a position attribute:
.my_container {
position:relative;
}

Perhaps use a 2nd wrapper element with padding on the outer element and existing background and padding styles on the inner element:
<div class="my_container">
<div class="my_container_inner">
<!-- etc. -->
</div>
</div>
jQuery(".my_container").hover(function(){
//do code
}, function(){
//do code
});
.my_container { padding: 50px; }
.my_container_inner { width: 100px; height: 100px; /* etc. */ }

Building upon #Dunc's solution, you can alternatively use pseudo element to mimic your container and let actual container behave like margins. This will look like:
.my_container {
width: calc(100px + (2 * 50px));
height: calc(100px + (2* 50px));
position: relative;
}
.my_container::before {
content: '';
position: absolute;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
}
Also make sure to move all other properties (like background color, border, etc.) you had in my_container to my_container::before because before is acting like our container here.
This is essentially helpful if your containers are grid items and you want gaps in-between them to be hoverable, because otherwise using psuedo element to add margins won't work appropriately in that case.

Change the margin to padding and it'll be hoverable.