I want to use Fotorama.io to show HTML content. But it appears that HTML is not clickable inside slider. Is there any possibility to make it work inside Fotorama?
Use .fotorama__select class on your frames to make it clickable and selectable:
<div class="fotorama">
<div class="fotorama__select">One</div>
<div class="fotorama__select"><strong>Two</strong></div>
<div class="fotorama__select"><em>Three</em></div>
</div>
http://fotorama.io/customize/html/#selectable-text
Related
I want to implement resizable div like this but in react-> http://jsfiddle.net/T4St6/82/
<div id="container">
<div id="left_panel"> left content! </div>
<div id="right_panel">
<div id="drag"></div> right content!
</div>
I tried using css property (resize-horizontal) which works fine, but it comes on the right bottom and not on right border.
Is there a way to implement without using any library?
You can use it for this purpose. react-resize-panel
I'm using ionic framework to develop an app.
I have an abstract state, with some html as "header" and an ion-nav-view. This is the template:
<div class="list">
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
</div>
</div>
<ion-nav-view name="lesson-content"></ion-nav-view>
It works fine, but the div with list class it's fixed on the top, I want it to scroll together with the content of ion-nav-view.
If I try to wrap them on ion-content, the content of ion-nav-view gets cropped.
Any ideas? Thank you guys!
You need to remove the header from the index.html and add a custom header inside the ion-view. Works for me
Is it possible to use the whole window as droparea?
Sure, I can append ngf-drop attributes to body, but then some other HTML elements lay over and I can't drop my files there… Otherwise I can not use a DIV an append those attributes an lay it over all other elements, because nothing else is clickable.
Or how can I achieve that behaviour with vanilla js / css?
If you add it to the body or a div that contains all the elements it should work, make sure the body container div is full size and include all the element. The dragover and drop event would still be called on the body or container div.
Sample: http://jsfiddle.net/w812qp1s/
<body ng-app="fileUpload" ng-controller="MyCtrl">
<div style="width:100%;height:100%" ngf-drop ngf-select ng-model="files" class="drop-box" ngf-drag-over-class="dragover" ngf-multiple="true" ngf-allow-dir="true"><div>Drop File:</div>
<div>No Drop File Div</div>
<ul>
<li ng-repeat="f in files" style="font:smaller">{{f.name}}</li>
</ul>Upload Log: <pre>{{log}}</pre>
</div>
</body>
I have multiple views like here : http://www.funnyant.com/angularjs-ui-router/
And I load them in my page like this
<div data-ui-view="content"></div> --- 75% width
<div data-ui-view="sidebar"></div> --- 25% width
Now, when the content is loaded, I want the loaded content not load inside these ui-view divs, but to replace them. Is it possible ? because if they don't replace then in my situation the float won't work and the sidebar shows bellow the content.
Help please
thanks
Using Bootstrap rows would this achieve your aim?
<div class="row">
<div class="col-md-9" ui-view="content"></div>
<div class="col-md-3" ui-view="sidebar"></div>
</div>
This is not possible and would be undesirable as it would leave you unable to change states. A simple workaround would be to add the width/float styles directly to the ui-view divs.
If you are determined to make it work you could create a custom directive wrapper like the solution provided here.
Try adding your desired sizes to the style of the containers.
<div data-ui-view="content" style="width: 75%;"></div>
<div data-ui-view="sidebar" style="width: 25%;"></div>
I am doing Angularjs project and I need to freeze a div in that depend on a condition. I tried to use ng-disabled but Its not freezing a div for me. This is the code
<div ng-repeat="item in list.items" ng-disabled="true">
Help would be really appreciated.
Edited :
<div ng-repeat="item in list.items" ng-click="goToFunction()" ng-disabled="true">
now I have another problem, As you guys suggested me I can change the css. But the problem is every div has got a ng-click So even if it is look like disabled in css it will call to the function. So how can I prevent it?
Thanks in Advanced.
if you are using bootstrap3, you can use text-muted class if the div contains text and apply styles based on a condition
<div ng-repeat="item in list.items" ng-class="{'text-muted':item.myCondition}">
the DIV element doesnt support the disabled attribute.
or you can use css to make the div element support that attribute.
<div ng-repeat="item in list.items" ng-disabled="item.myCondition">
css
div[disabled]{
color:grey;
}
You are trying to use ng-disabled in DIV which in invalid. You can achieve this by applying css class conditionally like this.
<div class="box" ng-repeat="item in items" ng-class="{'disable-mode':item%2==0,'normal-mode':item%2!=0}">
</div>
Working Demo