I would love to find something similar to this multilevel push-menu (with overlapping), but for a Bootstrap 3 based site.
Does anyone know about some adaptation of the same?
Whatever Codrops creates is really awesome, but never Bootstrap ready and I am not able to port it myself most of the time.
I would like this to work with AngularJS, ng-repeats, children etc...
The link: Multilevel Push Menu
This one maybe?
MultiLevelPushMenu jQuery Plugin implementation, https://github.com/adgsm/multi-level-push-menu
I have recently implemented the Coderops multi level menu in my own site under bootstrap 3. My solution might not be exactly what you need as it is a Backbone Marionette App, however there might be something there to get you started.
My HAML for getting the menu DIV nested inside the bootstrap container is
!!!
%html
%head
%title>
= "Mark2"
%meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}/
%meta{:name => "fragment", :content => '!'}
= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => false
= javascript_include_tag 'modernizr'
%body
.container
.mp-pusher#mp-pusher
%nav.mp-menu#mp-menu
.scroller#scroller
.scroller-inner
.row
.col-md-12
= yield
= requirejs_include_tag "app"
So I have the menu div inside the bootstrap container and then the rest of the site inside the scroller.
A full write up is on my personal site.
Multi Level Push Menu In Backbone Marionette And Bootstrap 3
Feel free to comment here or on my site if you want more details.
Related
I want to show PDFs in my angular application. It should be possible to show multiple pages at once and to search inside the PDF.
I tried angularjs-pdf to do so, but it lacks these features. Is there a angular wrapper for pdf.js that can do this? Or can somebody get me startet on how to implement pdf.js in my angular application without a wrapper?
Assuming this statement:
"I want to show PDFs in my angular application"
Anyone searching for this, could ought to check out ng2-pdf-viewer, for more information on this module, can check this out ng2-pdf-viewer PdfShowcase
Basically, this module could somewhat allow one to display more than one PDF in a single screen.
app.component.ts
// Declare the pdf as an empty array
pdfs = [];
// Assuming requesting PDFs from server through MVC style
getPdfs(){
this.getPdfService.getPdfs().subscribe(response => {
response.body.forEach((value, index) => {
this.pdfs.push({
id: index,
obj: window.URL.createObjectURL(value);
});
});
});
}
app.component.html
<div *ngFor="let pdf of pdfs, index as i;">
<div *ngIf="pdf[i]">
<pdf-viewer
[rotation]="0"
[original-size]="true"
[show-all]="true"
[fit-to-page]="true"
[zoom]="0"
[zoom-scale]="'page-width'"
[stick-to-page]="true"
[render-text]="false"
[external-link-target]="'blank'"
[autoresize]="true"
[show-borders]="true"
[src]="pdf.obj"
(after-load-complete)="onPdfComplete($event)"
(error)="onPdfError($event)"
style="width: 100%; height: 800px;">
</pdf-viewer>
</div>
</div>
If this library is not suitable for your use case, you may try with other libraries which uses iframe or similar strategy. Refer here is a useful source worth checking it out.
I know I'm a little bit late for this post but thought of posting here might help some folks who is looking for the same thing. Hope it helps.
From ng2-pdf viewer page, it recommends your desire "angular wrapper for pdf.js", There are a ton of built in functionality Mozilla's viewer supports; such as print, download, bookmark, fullscreen, open file, zoom, search,......
If you need to display multiple PDF files simultaneously and if you don't mind using iFrames, I recommend ng2-pdfjs-viewer. https://www.npmjs.com/package/ng2-pdfjs-viewer
I'm using Joomla 3 an I install Addthis plugin to show addthis button on the top of each article,
But I need to hide it in article list only (I'm using category blog layout), And leave it inside the article page .
I try to add this line to blog.php but nothing change:
addthis_toolbox.addthis_default_style {display: none !important;}
But nothing changed.
Can anyone give any advice .
Thanks.
I´m using 3.5.1 and AddThisPlugin-2.0.2.
Open addthis.php to notepad++ or similar and on line 57: $this->appendAddThisScript();
wrap it like this:
$app = JFactory::getApplication();
$view = $app->input->getCmd('view', '');
if ($view !== "category") {
$this->appendAddThisScript();
}
This one makes it conditional to load only if something else than category view. With CSS display: none; it is still loading all the scripts.
Okay,
I'm using a small programming test to play around with Angular and Sinatra, and I'm done logic wise, but I wanted to add a small progress bar under the play field to show the moves made.
my haml template looks like this:
.progress.progress-striped.active
.progress-bar{role: "progressbar", :"aria-valuenow" => "{{moves}}", :"aria-valuemin" => 0, :"aria-valuemax" => 9}
%span.sr-only
{{moves}} moves out of 9
I've added the Bootstrap CSS from the CDN to my project, but the bar is not working as I want to.
I only see part of it:
Tried to play around with the classes, but it's not making any difference. I've checked whether I am using the correct classes, and this is also the case. I can also the see the aria- values being properly updated on every click, so the binding works as well.
source code: https://github.com/NekoNova/tictactoe
Can someone give me a pointer as to what I am missing?
Just an alternative usage if you want to use angular-ui bootstrap you can use this library for smooth and easy usage:
%script{ type: "text/javascript", src: "//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js" }
Add the module "ui.bootstrap" to your application:
var TicTacToeApp = angular.module('TicTacToeApp', ['ui.bootstrap']);
Here is the haml expression:
%progressbar{ :max => "max", value: "dynamic"}
%span{ style: "color: white;white-space: nowrap;"}
{{dynamic}} / {{max}}
And for some demostration here is the variables which need to put in your controller:
$scope.max = 100;
$scope.dynamic = 70;
I have a DNN skin that has some nice containers. I can drop an HTML module onto the page and apply the container to it. I can put a link in the content of the HTML Module, but what I would really like to do is make the whole container/module area a link to another page - in effect as if it were a great big button. How do I do this?
Of course as soon as I posted the question I found a way, but would still be interested to know if this is the "right" way or even a "good" way.
My solution was to take a copy of the container .ascx and add an "onlick" to the outer DIV, which in turn uses JQuery to locate the first tag and to navigate to the href.
<div class="Container-1 Container-1-color1"
onclick="window.location.href = $('a:first',this).attr('href')">
Note: Use window.location.href, not JQuery .click() or .trigger('click') as this creates an infinite loop.
I then added some CSS to show that an action was available when the mouse was over the container:
.Container-1:hover
{
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
border:1px solid gray;
}
The following shows the tooltip text in the right place:
%a{:href => "http://google.com/"}
%span{:tooltip => "TEST"}
= "test"
The following shows the tooltip half a screen below (increasing distance for each element)
%div{:"ng-repeat" => "point in points"}
%a{:href => "http://google.com/"}
%span{:tooltip => "TEST"}
= "test"
It's written in HAML, so in plain HTML the last two lines look like this: <span tooltip="TEST">test</span>.
The points are fetched using Rails $Resource, but I get the same problem when I use the regular $resource.
I'm using the tooltip directive from Angular UI Bootstrap. The application is built in Ruby on Rails 4.0 and uses the angularjs-rails gem (unstable).
My best guess is that the CSS on my site is somehow too complex and that I need to find a way to reprocesses these tooltips after loading.
I needed to add this below my app = angular.module(...) line:
app.config( function ( $tooltipProvider ) {
$tooltipProvider.options({appendToBody: true});
});
I'm not sure what's going on here, but it has something to do with https://github.com/angular-ui/bootstrap/pull/254 and perhaps also https://github.com/angular-ui/bootstrap/issues/139.