• About Me
  • MSBI
  • Projects
  • webdevelopment
  • Joomla Training
  • WordPress Training
  • Contact Us

PHP MySQL

~ Share Knowledge

PHP MySQL

Category Archives: Bootstrapless

Bootstrapless

Bootstrap scrollspy affix

08 Friday Jan 2016

Posted by maheshkanna in Angularjs, Bootstrapless

≈ Leave a comment


Understanding Bootstrap’s Affix and ScrollSpy plugins

 

Advertisements

Share this:

  • Twitter
  • LinkedIn
  • Facebook
  • Pinterest

Like this:

Like Loading...

Bootstrap horizontal scrolling tabs

06 Friday Nov 2015

Posted by maheshkanna in Bootstrapless

≈ Leave a comment


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(){

});
});

Share this:

  • Twitter
  • LinkedIn
  • Facebook
  • Pinterest

Like this:

Like Loading...

Changing placeholder text when window resizes with jQuery

11 Tuesday Aug 2015

Posted by maheshkanna in Bootstrapless, Javascript, Jquery

≈ Leave a comment

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');

Share this:

  • Twitter
  • LinkedIn
  • Facebook
  • Pinterest

Like this:

Like Loading...

Blog Stats

  • 68,964 hits

Recent Posts

  • How to handle the ENTER keypressed to trigger an onBlur() event?
  • AngularJs call one method of controller in another controller .
  • Angular js sample projects
  • Bootstrap scrollspy affix
  • Bootstrap horizontal scrolling tabs

Calendar

April 2018
M T W T F S S
« Aug    
 1
2345678
9101112131415
16171819202122
23242526272829
30  

Recent Comments

fohardnoR on Very simple add, edit, delete,…
importanceofseoforsm… on wordpress training in hyd…
TecCrowd on AngularJs call one method of c…
capsaqq on Change Your WordPress Login…
Amamdou on How to remove FaLang traductio…
Teodoro Bocchieri on Show / Hide Content in jo…
Omniture Login on omniture tutorial
maheshkanna on Show / Hide Content in jo…
Sheri Donaho on Show / Hide Content in jo…
myanmar business lis… on Change Your WordPress Login…

Categories

  • Addons (3)
  • Angularjs (5)
  • Bootstrapless (3)
  • CSS3 (7)
  • Drupal (4)
  • GoogleApps (2)
  • Health (2)
  • HTML (27)
  • Javascript (13)
  • Joomla (21)
  • Jquery (10)
  • JSON (2)
  • LESS (2)
  • Magento (5)
  • Materials (1)
  • MySql (3)
  • omniture (1)
  • OOPS in php (2)
  • php (162)
  • React js (1)
  • Reactjs (1)
  • Responsive webdesign (2)
  • Sass (2)
  • Seo (3)
  • Smoothies (13)
    • Health (7)
    • Nutrition (7)
  • Web development training (6)
  • wordpress (18)
  • XHTML (5)

Blogs I Follow

  • Richard Gendal Brown
  • www.impratima.in
  • Magento Tips and Fundamental Solutions
  • Magento-4U
  • ITechonology
  • Don Charisma
  • rubenlacasa.es
  • PHP MySQL

Top Rated Poste

RSS

  • RSS - Posts
  • RSS - Comments
I Voted
Advertisements

Blog at WordPress.com.

Richard Gendal Brown

Thoughts on the future of finance

www.impratima.in

Frontend Web Developer & Designer .......

Magento Tips and Fundamental Solutions

Magento Technical and Fundamental Tips

Magento-4U

Lets share magento e-commerce experience ...

ITechonology

Information Techonology

Don Charisma

because anything is possible with Charisma

rubenlacasa.es

PHP MySQL

Share Knowledge

%d bloggers like this: