You are not logged in. Please login or register.
I am using the following...
http://manos.malihu.gr/jquery-custom-content-scroller/
to try to create a better looking site, instead of the scrollbar. However I cannot figure out what I am doing wrong, and why it will not work when inside Monstra. (It works perfectly, and without a problem outside of Monstra.)
@korey.badgley
here is only monstra cms and not wordpress is your site friend Mano
malihu | web design web design Event based jQuery element resize
The script does not use any kind of timer(s) to detect size changes. It uses the resize event on (invincible) iframe(s) which makes it perform much better than other solutions which use timers to poll element size. The script detects size changes made from JS, CSS, animations etc. and it works on any element able to contain other elements (e.g. div, p, li etc.).
Page scroll to id
Page scroll to id is an easy-to-use jQuery plugin that enables animated page scrolling to specific id within the document. The plugin replaces the default browser behaviour of “jumping” to page sections when links with href value containing hash (#) are clicked, by smoothly animating the page to those sections. You can use it for simple back-to-top links or complex, single-page website navigation and features include: adjustable animation speed, advanced animation easings, vertical and/or horizontal scrolling, ready-to-use classes for links highlighting etc.
jQuery custom content scroller
Highly customizable custom scrollbar jQuery plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via jQuery mousewheel plugin), keyboard and touch support, ready-to-use themes and customization via CSS, RTL direction support, option parameters for full control of scrollbar functionality, methods for triggering actions like scroll-to, update, destroy etc., user-defined callbacks and more.
jQuery thumbnail scroller
A thumbnail/image scroller that can be used as standalone or alongside lightboxes, gallery scripts etc. Features include: scrolling by cursor movement, buttons and/or touch, vertical and/or horizontal scrolling, customization via CSS and option parameters, methods for triggering events like scroll-to, update, destroy etc., user-defined callbacks functions and more.
i believe that he just gave a link to the actual plugin not to his website 
RomanArt is right.... This is just a jquery plugin that works on non-wp sites. Is there something I'm missing to make a jquery plugin work?
they asked u to use this code:
so put this one instead cause monstra has jquery connected already
add it in here footer.chunk.php and then add this one under the JS
Alright, I have tried that... and still have no luck. The only difference from when I tried was....
I put....the script (in the footer) in a snippet (If I remember right, that is what it is called, much like the included Google Analytics), then pasted that portion into the footer.chunk.php
Would that cause an issue?
I did some tests ... I noticed that when I add the code in morfy disappears the content itself and monstra
when I made a simple template worked without any problem
ok i found the problem!
the bootstrap problem breaks the Jquery Custom Scrollbar!
test template bootstrap
Bootstrap 101 Template
Hello, world!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales est ac nulla consectetur vehicula. Vivamus at dolor rutrum, auctor nunc ut, dapibus turpis. Fusce metus nunc, maximus eget pulvinar sed, tincidunt vel lacus. Cras dapibus odio vel dui feugiat, vel tincidunt velit convallis. Pellentesque posuere venenatis justo, sit amet tristique lorem lobortis at. Vivamus sit amet eros leo. Nunc venenatis arcu mattis imperdiet pulvinar. Donec eu elit ornare, elementum nunc rutrum, fringilla leo. Sed imperdiet eu ipsum nec pulvinar. Vivamus ut hendrerit massa. Sed sed suscipit sapien. Proin velit leo, tincidunt ac dui sed, pretium tempor augue.
Cras et odio id ligula accumsan ullamcorper ac quis arcu. Nullam mattis libero massa, non hendrerit felis aliquet rhoncus. Vestibulum sit amet justo malesuada, blandit dolor ac, tristique justo. Ut orci mauris, semper vel orci et, efficitur eleifend lacus. Curabitur dapibus tincidunt massa ac congue. Donec egestas ipsum facilisis finibus convallis. Nullam eros lectus, luctus et ligula finibus, euismod vestibulum lorem. Sed mattis pulvinar eros, faucibus faucibus sapien volutpat sed. Nam blandit efficitur quam, id feugiat sapien ornare ut. Vestibulum vestibulum, enim sit amet aliquam lobortis, turpis turpis placerat ipsum, non posuere orci velit vitae augue.
Etiam at imperdiet magna. Pellentesque imperdiet tristique turpis eu eleifend. Vivamus a quam eu lacus viverra interdum sed et tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla interdum mi hendrerit sapien interdum, ut fringilla arcu convallis. Ut leo neque, luctus non venenatis quis, condimentum sit amet massa. Phasellus ut aliquet lorem. Sed et auctor nisl. Cras consequat tellus sed sem ultricies rhoncus. Mauris auctor placerat erat id rhoncus. Nunc dignissim suscipit nisl, a hendrerit lacus consectetur quis.
Nullam efficitur dapibus scelerisque. Sed commodo odio ornare elementum lobortis. Sed ut purus turpis. Cras in dapibus mi. Donec rutrum, eros auctor consectetur ornare, lectus orci congue nulla, quis lacinia ex metus eget mi. Suspendisse lobortis at ex vel hendrerit. Nulla porta est est, et convallis libero euismod ac. Nunc venenatis tortor vel bibendum rhoncus. Maecenas consequat scelerisque ante, sit amet fermentum urna. Vestibulum hendrerit semper aliquam. Mauris varius, risus sed pharetra ultricies, nulla dui viverra mi, ut elementum dui diam quis nibh. Donec pellentesque odio mi, porttitor efficitur augue molestie nec.
Integer et erat pellentesque, posuere massa ut, facilisis leo. Quisque vitae euismod risus, non rhoncus diam. Phasellus leo dolor, gravida at nisl id, suscipit porttitor mauris. Pellentesque tincidunt lacinia nunc sit amet ultrices. Sed a lacinia ex. Praesent sagittis mollis tempus. Praesent volutpat justo luctus, iaculis nunc eu, aliquet arcu. Nam et accumsan libero, quis lobortis lacus. Nullam interdum, turpis ut gravida pretium, lectus risus scelerisque justo, ut volutpat orci tellus eget lectus. Fusce nec pellentesque ante. Quisque congue ligula diam, a lobortis tortor porta ut.
Vestibulum malesuada diam facilisis quam pharetra, semper posuere neque volutpat. Nam massa libero, ornare a volutpat sed, sollicitudin sed risus. Integer gravida tempor augue quis pellentesque. Vivamus in nunc eu dolor hendrerit placerat nec eu nisl. Donec nec fermentum mi. Quisque efficitur vitae urna eget porttitor. Nunc non semper sem. Maecenas a sollicitudin orci. Morbi gravida eros eu neque sollicitudin sagittis. Quisque congue diam sit amet nunc dictum, at iaculis massa varius. Pellentesque viverra lorem vel porta aliquet. Nunc aliquam turpis quis ex tempus fringilla. Mauris laoreet diam eu justo sagittis, non aliquet purus viverra. Suspendisse potenti. Vestibulum ullamcorper eros ipsum, ac ultricies mi feugiat in.
Nunc tortor tellus, sollicitudin id felis vitae, condimentum accumsan lacus. Pellentesque suscipit porta justo, quis fermentum massa varius ornare. In nulla nulla, lobortis sed lectus vel, viverra maximus augue. Vivamus imperdiet sit amet diam ac scelerisque. Nunc nunc libero, mattis quis gravida nec, maximus vitae turpis. In hac habitasse platea dictumst. Fusce hendrerit dui at arcu tincidunt finibus. Etiam aliquet eget nisl eu pretium. Proin leo nisl, condimentum id justo nec, blandit pulvinar sapien. Pellentesque sodales risus eget quam porttitor mattis. Aenean rutrum tortor augue, eu accumsan dolor mattis a. Maecenas quis hendrerit lectus.
Vivamus feugiat mollis arcu, non dictum purus ultricies id. Morbi volutpat quam et leo tristique, vitae ornare tortor fringilla. Duis ac augue ut dui malesuada iaculis. Phasellus mollis orci sodales pretium elementum. Etiam varius nunc justo, et varius orci aliquet id. Cras sollicitudin felis sed dictum efficitur. Phasellus bibendum dolor vitae aliquet vehicula. Suspendisse potenti. Vivamus felis purus, viverra rutrum libero ac, tempus hendrerit lectus. Duis arcu enim, consequat a diam sit amet, iaculis vestibulum ante. Curabitur eget justo vitae nibh aliquam vulputate.
Praesent gravida in risus faucibus fermentum. Suspendisse a libero blandit, scelerisque lacus et, iaculis orci. Mauris dapibus, tortor feugiat congue rhoncus, erat ipsum vulputate urna, et mattis quam magna quis tortor. Aenean vehicula massa erat, et varius lacus dignissim sit amet. Ut scelerisque aliquam erat, non egestas est bibendum sagittis. Aliquam vulputate eros mauris, nec accumsan elit fermentum non. Proin at velit elit. Duis convallis nisl ac odio facilisis, ut sollicitudin nulla ornare. Vestibulum sagittis massa et vestibulum mattis. In consectetur odio nec ante congue, sit amet maximus mauris lacinia. In eleifend euismod mauris ac sollicitudin. Cras accumsan nulla sed varius commodo. Mauris suscipit ipsum ultrices efficitur tincidunt. Nulla ac consequat tortor.
Integer quis ligula tempor nulla maximus mattis. Sed elementum ligula neque, ac consequat sem rutrum vitae. Etiam a sagittis nibh. Maecenas metus velit, placerat eu ex eget, laoreet sollicitudin diam. Nunc vehicula a mi nec eleifend. Duis sed ligula ac lectus tincidunt aliquet at ac lectus. Morbi id elit vitae sapien condimentum fringilla et ut libero. Fusce massa mauris, dapibus et maximus sit amet, laoreet gravida metus.
Vivamus non nulla accumsan, pulvinar magna ut, iaculis magna. Quisque egestas ac sapien a condimentum. Phasellus nulla nibh, efficitur nec lorem ac, eleifend blandit ligula. Proin interdum, leo id condimentum euismod, mi nisl pellentesque massa, a varius lectus nisi non nulla. Morbi porttitor accumsan congue. Phasellus vel commodo augue. Maecenas purus tortor, imperdiet quis sagittis nec, viverra ut nisl. Fusce quis mauris nulla. Nam a libero varius, sollicitudin lorem vel, vulputate massa. Etiam et nunc volutpat, sollicitudin neque sit amet, accumsan mi. Sed viverra diam ut massa mollis dignissim.
Sed odio ante, malesuada sit amet turpis laoreet, lobortis suscipit mi. In facilisis mollis libero vitae tincidunt. Donec a neque nec justo iaculis commodo. Aliquam erat volutpat. Duis sit amet nibh vitae metus aliquet semper. Etiam quis ex in eros commodo scelerisque ut eget augue. Aliquam erat volutpat. Donec bibendum purus nec dictum accumsan. Cras iaculis eget eros ac dictum.
Donec at tellus odio. Pellentesque aliquam ultricies dignissim. Vestibulum eget hendrerit purus. Fusce lorem diam, mollis quis cursus eu, cursus at metus. Morbi euismod odio sit amet tellus molestie gravida. Integer lobortis nulla sit amet ullamcorper semper. Nulla a molestie mauris. Morbi malesuada facilisis enim, in pulvinar elit tempor vitae. Nunc cursus purus vel tortor consequat, ut condimentum quam vulputate. Praesent tincidunt leo in pulvinar malesuada. Quisque diam leo, mattis sed odio vel, vehicula rhoncus libero. Aenean lobortis ipsum condimentum sem accumsan, dignissim pretium neque tincidunt. Etiam vulputate, lectus et interdum porttitor, risus urna accumsan nunc, vitae ullamcorper ipsum enim id dolor. Donec nec quam quis mauris pretium egestas quis nec enim. Suspendisse semper aliquet est sit amet lobortis.
Nunc rutrum, lectus non maximus vehicula, eros enim iaculis lectus, eu pharetra dui ipsum in massa. Aliquam erat volutpat. Praesent mi diam, feugiat in libero vitae, egestas tincidunt sapien. Mauris nec massa convallis, dictum mi a, dignissim augue. Sed a nisi fringilla, congue libero in, ultricies dui. Cras sed varius lacus, eu rhoncus velit. Proin eget lobortis nisl. Donec rhoncus ultrices tincidunt. Cras venenatis porttitor odio, et pharetra leo molestie in. Fusce non dui felis. Phasellus auctor sem lorem, imperdiet vehicula dui vestibulum vel. Quisque vel enim et lacus euismod mattis. Quisque pretium, dui a auctor egestas, dui metus mollis eros, id faucibus risus diam eget neque.
Duis ut velit lacinia, pulvinar urna eu, condimentum massa. Aenean auctor purus velit, et fringilla ligula cursus sit amet. Vestibulum elementum justo nec vulputate feugiat. Pellentesque mollis consequat nunc sit amet posuere. Proin rhoncus eget nibh in vehicula. Maecenas consequat egestas nibh, nec rutrum mi malesuada ac. Ut facilisis ligula et odio lobortis ullamcorper vitae ac ipsum. Nunc eget leo interdum, aliquet orci sit amet, consectetur neque. Sed in dui ante.
Could you explain the solution in more detail?
Ok... so here is my code..... (Using PHP calls to get full path in some instances..)
Getting CMS working - Home
This does NOT work.... (Not sure what I'm doing wrong....Is Bootstrap Mandatory?)
Good morning friend Manos,
yes mandatory bootstrap monstra end morfy made with bootstrap!
I do not know to tell you more information why breaks Jquery Custom Scrollbar when he is together with bootstrap
xxwebplus, this still does not work. I used your exact code, posted...and it did not work. The normal scrollbar for browsers should not be there, and instead be replaced with the jquery scrollbar.
@mano
we can talk more directly;
well it works just fine for me on default monstra, u had to add style.css as well, their documentation suck
u can download my default theme and see how i did it, actually it was really easy/fast/ just copy pasting lol
Download Default.zip
but u will need to find our which classes in "style.css" u have to remove cause there are a lot of styles u do not need
i clear the file style.css removed all useless crap for this specific scrolling:
body{
background-color: #222;
color: #eee;
font-size: 14px;
margin: 0;
padding: 0;
min-width: 480px;
}
.content{
overflow: auto;
position: relative;
padding: 20px;
background: #333;
margin: 10px;
width: 740px;
max-width: 97%;
height: 400px;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.content.hidden{ display: none; }
.content.light{
background-color: #ddd;
color: #333;
}
.content hr{
margin-bottom: -10px;
border-top: 1px solid rgba(0,0,0,0.7);
}
.content.light hr{
border-bottom: 1px solid rgba(255,255,255,0.6);
border-top: 1px solid rgba(0,0,0,0.1);
}
.content p{ margin: 30px 0; }
.content p:last-child{ margin-bottom: 5px; }
.content p:nth-child(odd), .content.light p:nth-child(odd){
background: #444;
background: rgba(255,255,255,0.1);
padding: 5px 10px;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}
.content p:nth-child(3n+3){
color: #bbb;
background: none;
padding: 0;
}
.content.light p:nth-child(odd){
background: #fff;
background: rgba(255,255,255,0.8);
}
.content.light p:nth-child(3n+3){ color: #666; }
.content p.full:nth-child(odd), .content p.half:nth-child(odd),
.content p.full:nth-child(3n+3), .content p.half:nth-child(3n+3){
background: none;
padding: 0;
}
.content h2{
font-size: 200%;
line-height: 130%;
}
.content h2:first-child{ margin-top: 5px; }
.content:nth-child(odd) h2{
font-family: "Oswald", sans-serif;
font-weight: 300;
font-style: normal;
}
hr + .content:nth-child(odd) h2{
font-family: "Lobster Two", "Georgia", serif;
font-weight: 700;
font-style: italic;
}
.content.light h2{ color: inherit; }
.content img{
margin: 0;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
padding: 3px;
background: rgba(0,0,0,0.2);
}
.content.light img{ background: rgba(255,255,255,0.4); }
.content input[type='text'], .content textarea{
border: none;
background: transparent;
background-color: #bbb;
background-color: rgba(255,255,255,0.6);
min-height: 20px;
padding: 5px;
-moz-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
-webkit-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
width: 50%;
font-size: inherit;
font-family: inherit;
color: #222;
}
.content textarea{
min-height: 80px;
width: 70%;
}
.content .half img{
max-width: 48%;
margin: 0 0 2% 2%;
}
.content .half img:nth-child(odd){ margin: 0 2% 2% 0; }
.showcase .content{
float: left;
width: 340px;
height: 300px;
}Gonna try your .zip Roman... I'll let you know if it works, and if so, then that will be perfect!
Ok..... Update..... It did work, however it does not do the entire page, only does the small area?
OH WAIT, I see what your doing... however I need it to be on the full page, (
) so I was trying to do the JS way of this, but it seems that only the HTML way of initializing it works?