Bootstrap scrollspy affix

Understanding Bootstrap’s Affix and ScrollSpy plugins

 

Advertisements

Bootstrap horizontal scrolling tabs

http://www.bootply.com/l2ChB4vYmC

HTML:

• Home
• Profile
• Messages
• Settings
• Tab4
• Tab5
• Tab6
• Tab7
• Tab8
• Tab9
• Tab10
• Tab11
• Tab12
• Tab13
• Tab14
• Tab15
• Tab16
• Tab17

</div>

CSS:

.wrapper {
position:relative;
margin:0 auto;
overflow:hidden;
padding:5px;
height:50px;
}

.list {
position:absolute;
left:0px;
top:0px;
min-width:3000px;
margin-left:12px;
margin-top:0px;
}

.list li{
display:table-cell;
position:relative;
text-align:center;
cursor:grab;
cursor:-webkit-grab;
color:#efefef;
vertical-align:middle;
}

.scroller {
text-align:center;
cursor:pointer;
display:none;
padding:7px;
padding-top:11px;
white-space:no-wrap;
vertical-align:middle;
background-color:#fff;
}

.scroller-right{
float:right;
}

.scroller-left {
float:left;
}

 

JAVASCRIPT:

var hidWidth;
var scrollBarWidths = 40;

var widthOfList = function(){
var itemsWidth = 0;
$(‘.list li’).each(function(){
var itemWidth = $(this).outerWidth();
itemsWidth+=itemWidth;
});
return itemsWidth;
};

var widthOfHidden = function(){
return (($(‘.wrapper’).outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
};

var getLeftPosi = function(){
return $(‘.list’).position().left;
};

var reAdjust = function(){
if (($(‘.wrapper’).outerWidth()) < widthOfList()) {
$(‘.scroller-right’).show();
}
else {
$(‘.scroller-right’).hide();
}

if (getLeftPosi()<0) {
$(‘.scroller-left’).show();
}
else {
$(‘.item’).animate({left:”-=”+getLeftPosi()+”px”},’slow’);
$(‘.scroller-left’).hide();
}
}

reAdjust();

$(window).on(‘resize’,function(e){
reAdjust();
});

$(‘.scroller-right’).click(function() {

$(‘.scroller-left’).fadeIn(‘slow’);
$(‘.scroller-right’).fadeOut(‘slow’);

$(‘.list’).animate({left:”+=”+widthOfHidden()+”px”},’slow’,function(){

});
});

$(‘.scroller-left’).click(function() {

$(‘.scroller-right’).fadeIn(‘slow’);
$(‘.scroller-left’).fadeOut(‘slow’);

$(‘.list’).animate({left:”-=”+getLeftPosi()+”px”},’slow’,function(){

});
});

Changing placeholder text when window resizes with jQuery

Tags

Changing placeholder text when window resizes with jQuery

<input type="text" placeholder="Search Microsoft Partner Network" class="my_textarea'">


Placeholder : Search Microsoft Partner Network

Using below code changing the resolution 680 below screen size:

Output :

Placeholder : Reply...

$('.my_textarea').each(function() { $(this).data('placeholder', $(this).attr('placeholder')); }); function changePlaceholder() { if( $(window).width() < 680 ){ $('.my_textarea').attr('placeholder','Reply...'); } else { $('.my_textarea').each(function() { $(this).attr('placeholder', $(this).data('placeholder'));

});

}

}

$(window).resize( changePlaceholder ).trigger('resize');