Is there a way to change Ant.Design's List Grid? It fills in Items from left to right. I'd like items to roll from top to bottom first, then left to right. How would I do this?
This is common problem with the grid layout. Only solution is to use css tricks (column count) like following
<Row style={{ minHeight: "800px",lineHeight:"0",columnCount:"2" }}>
{
Object.keys(GalleryImages).map(imageKey => {
return (
<Col span={24}>
<img src={GalleryImages[imageKey]} alt={imageKey} height="100%" width="100%" />
</Col>
)
})
}
</Row>
I hope this would help.
Related
I want some piece of code to delete the element dropped on the red div.I need the code to do the following:
Create the clicked element on "Canvas" div.
let the user drag the element
finally let the user delete the element by dropping it to red div.
I hope I will get the best solution from here. here is the code:
function makeResizable(x)
{
x = $(x);
x.resizable();
}
function makeDraggable(x)
{
x = $(x);
x.draggable();
}
function createPredefine(){
$element = $(' <img src="img/5.jpg" alt="" height="45" width="110"
onDblClick="makeResizable(this)" />');
$("#canvas").append($element);
$element.draggable();
}
$(document).ready(function(e) {
$( "#deleting_div" ).droppable({
drop: function( event, ui ) {
$(this).children().remove();
alert("trigger");
}
});
});
Create
Components
    <img src="img/5.jpg" alt="" height="45" width="110"
onClick="createPredefine()"/>        <img
src="img/6.jpg" alt="" height="60" width="80" onClick="createCircle()"/>
<br /><br >
</div>
</td>
<td>
<div id="canvas" style="background-
color:#FFF;width:800px;height:700px;">
<div id="deleting_div" style="background-
color:red;widhth:50px;height:50px;"></div>
<h2>             
       
           
    Draw Here</h2></div>
</td>
</tr>
</table>
</BODY>
</HTML>
You can't place a within a canvas (see Placing a <div> within a <canvas>)
Canvas is like a painting, rather than a collection of Lego bricks - what you put on the canvas is flat and permanent. The DOM is more like the collection of Lego bricks; you can pick one up and move it (and everything attached to it will move).
The closest you could get to moving something with a painting would probably just smudge the paint :)
What would probably be the most effective approach for what you are trying to do is create a "virtual" painting/canvas that is built of DOM objects and then "draw" that onto your canvas (see https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas)
I am trying use dropdown inside popover but it close everytime popover. I tried using different visible property on state but still same.
<div>
<Dropdown
visible={visibleDropdown}
onVisibleChange={(visible)=>this.onDropdownVisibleChange(visible)}
overlay={
<Menu>
<Menu.Item key="0">
1st menu item
</Menu.Item>
<Menu.Item key="1">
2nd menu item
</Menu.Item>
<Menu.Divider />
<Menu.Item key="3">3d menu item</Menu.Item>
</Menu>
} trigger={['click']}>
<a className="ant-dropdown-link" href="#">
Click me <Icon type="down" />
</a>
</Dropdown>
</div>
This does not work am i missing something?
I played around a bit, and here is a working solution:
http://codepen.io/JesperWe/pen/QvMNjJ
Just using getPopupContainer doesn't solve it, you have to play with the visible state a bit. Looking at the most important parts from the Codepen:
onVisibleChange = ( visible ) => {
this.setState( { visible: true } )
};
closeDropdown = () => {
this.setState( { visible: false } )
};
...
const menu = (
<Menu onSelect={this.closeDropdown}>
<Menu.Item>
One
</Menu.Item>
<Menu.Item>
Two
</Menu.Item>
</Menu>
);
return (
<Dropdown overlay={menu} trigger={[ 'click' ]} getPopupContainer={this.getContainer}>
<Button onClick={this.onVisibleChange}>Dropdown</Button>
</Dropdown>
);
....
<Popover visible={this.state.visible}
onVisibleChange={this.onVisibleChange}
placement="right"
getPopupContainer={this.getContainer}
trigger="click" content={this.renderContent()}>
<Button icon="filter">click me</Button>
</Popover>
The trick is having onVisibleChange always set the state to true, and then closing the popover explicitly from the Dropdown overlay.
I have a simple webview tag on my xml file, like this:
<WebView src="{{ content }}"/>
I've tried set the background-color to 'transparent' in the css file, also using inline css, but I can't get the webview background set to transparent.
More info about the project:
- nativescript version: 2.2.1
- I have a list of ticket's movements (like incidences about a particular case) on a support system app. This movements usually are html emails (with images, styles and so)... that's because I'm using a webview instead of an htmlview. As you can see in the image, the webview's background is white.
There's my xml snippet:
<!-- Repeat ticket's movs-->
<Repeater items="{{ movs }}">
<Repeater.itemTemplate>
<StackLayout>
<StackLayout class="{{ movClass }}" visibility="{{ id != -1 ? 'visible' : 'collapsed' }}">
<Label class="date" text="{{name + ' #' + dateValue}}"/>
<WebView src="{{ content }}"/>
</StackLayout>
</StackLayout>
</Repeater.itemTemplate>
</Repeater>
In the js file, I fetch the movements from an url and populate the array.
If you need more info, please tell me and I upload it.
Thanks!
BACKGROUND-NOT-TRANSPARENT-WEBVIEW
To make WebView with transparent background color you could use native code. For Android you could use setBackgroundColor method for Android to make background color transparent. For iOS you should use UIColor.clearColor() to remove the webView background color. You could review the below attached sample code. In regard to that you should also add tns-platform-declarations plugin in your project, that would allow you to use some native methods in your typescript code.
main-page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
<GridLayout rows="* 70 70" columns="*" backgroundColor="green" >
<WebView row="0" loaded="wvloaded" id="wv" class="webviewStyle" src="
<html style='background-color: transparent;'>
<body style='background-color: transparent;'>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>" />
<Label row="1" text="{{email}}" textWrap="true" />
<Label row="2" text="{{password}}" textWrap="true" />
</GridLayout>
</Page>
main-page.ts
import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { HelloWorldModel } from "./main-view-model";
import {WebView} from "tns-core-modules/ui/web-view";
import {isIOS, isAndroid} from "tns-core-modules/platform"
var Observable = require("data/observable").Observable;
var user = new Observable({
email: "user#domain.com",
password: "password"
});
// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {
// Get the event sender
var page = <Page>args.object;
page.bindingContext = user;
}
export function wvloaded(args:EventData){
var newwv:WebView =<WebView> args.object;
if(isAndroid){
newwv.android.setBackgroundColor(0x00000000);//android.graphics.Color.TRANSPARENT);//
newwv.android.setLayerType(android.view.View.LAYER_TYPE_SOFTWARE, null);
}
if(isIOS){
newwv.ios.backgroundColor = UIColor.clearColor;
newwv.ios.opaque=false;
}
}
Suppose I have two very similar images I want to display in succession (say first is a photo and the second one the same photo with some area highlighted). I'd like to avoid a transition animation and just have the second image replace the first image. Is this possible with reveal.js?
Setting data-transition="none" doesn't work very well because the previous slide still retains its animation.
Reveal.js does not have any direct method by itself for doing of what is being asked. However, it can be done using a div container and the fragment feature of reveal.js. The container includes the images, which are absolutely positioned within it, and because of that it has to have fix dimensions.
The following piece of html displays the first image and on the next slide the second image on top of the first one.
<section>
<h1>Slide 1</h1>
<div style="position:relative; width:640px; height:480px; margin:0 auto;">
<img class="fragment" width="640" height="480" src="img1.jpg" style="position:absolute;top:0;left:0;" />
<img class="fragment" width="640" height="480" src="img2.jpg" style="position:absolute;top:0;left:0;" />
</div>
</section>
While this piece of html displays the first image and on the next slide the first image fades out and the second image fades in instead.
<section>
<h1>Slide 2</h1>
<div style="position:relative; width:640px; height:480px; margin:0 auto;">
<img class="fragment fade-out" data-fragment-index="0" width="640" height="480" src="img1.jpg" style="position:absolute;top:0;left:0;" />
<img class="fragment fade-in" data-fragment-index="0" width="640" height="480" src="img2.jpg" style="position:absolute;top:0;left:0;" />
</div>
</section>
reveal.js 4.0 introduces a new r-stack class that makes it easier to stack elements on top of each other.
<div class="r-stack">
<img class="fragment" src="https://placekitten.com/450/300" width="450" height="300">
<img class="fragment" src="https://placekitten.com/300/450" width="300" height="450">
<img class="fragment" src="https://placekitten.com/400/400" width="400" height="400">
</div>
The above example fades in images on top of each other. If you want to only show one image at a time you'll need to use slightly different fragment settings.
<div class="r-stack">
<img class="fragment current-visible" src="...">
<img class="fragment current-visible" src="...">
<img class="fragment" src="...">
</div>
You can see examples of how this works in the reveal.js docs https://revealjs.com/layout/#stack
Another possible solution would be to use Javascript. With this code you can not only replace images, but any content.
It is important to apply the classes content-target and content-source. It is also important to use the display: none; style.
The html could look like:
<section>
<h3>Headline</h3>
<div class="content-target"></div>
<div style="display: none;">
<div class="content-source fragment" data-fragment-index="0">
<img src="path/to/image.jpg" />
<p>Some text</p>
</div>
<div class="content-source fragment" data-fragment-index="1">
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<div class="content-source fragment" data-fragment-index="2">
<img src="path/to/another/image.jpg" />
</div>
</div>
</section>
Now we add a function fadeContent() and call it every time fragmentshown or fragmenthidden is triggered.
function fadeContent($el, back=false) {
// If we go back, choose previous element, otherwise current element
$new = (back ? $el.prev() : $el);
if($new.length == 0) {
$text = $el.parent().siblings('.content-target');
$text.fadeOut(200);
} else {
$text = $new.parent().siblings('.content-target');
$text.hide(0, function() {
$text.html($new.html());
$text.fadeIn(300);
});
}
}
Reveal.addEventListener('fragmentshown', function(event) {
// Get first fragment which has "content-source" class
var $el = $($(event.fragments).filter(function() {
return $(this).hasClass('content-source')
})[0]);
// Show content
if ($el.hasClass('content-source'))
fadeContent($el);
});
Reveal.addEventListener('fragmenthidden', function(event) {
// Get first fragment which has "content-source" class
var $el = $($(event.fragments).filter(function() {
return $(this).hasClass('content-source')
})[0]);
// Hide element
if ($el.hasClass('content-source'))
fadeContent($el, back=true);
});
Since we have just extended the fragment functionality, we can still use the data-fragment-index attribute and change the order.
The solution can easily be optimized/customized.
You can specify two transitions, for entering and for leaving, thus the following works but has a glitch (image flicker when appearing) :
<section data-transition="slide none">
<img src="timeline2.a.svg">
</section>
<section data-transition="none">
<img src="timeline2.b.svg">
</section>
<section data-transition="none side">
<img src="timeline2.c.svg">
</section>
Otherwise this may also be a solution, this is a bit different from what you want but is not bad :
<section data-transition="slide fade-out">
<img src="timeline2.a.svg">
</section>
<section data-transition="fade-in fade-out">
<img src="timeline2.b.svg">
</section>
<section data-transition="fade-in side">
<img src="timeline2.c.svg">
</section>
Suppose, you are using data-background for displaying your photos, then you need to use data-background-transition="none" for the desired effect.
I have a sharepoint siteActions on the left hand side and My links tab on the right hand side. One is in td tag and other one is on div tag.
I cannot understand the code. Could any one showm me how to update the same. The following is the code in my master Page.
<SharePoint:SiteActions runat="server" AccessKey="<%$Resources:wss,tb_SiteActions_AK%>" id="SiteActionsMenuMain"
PrefixHtml="<div><div>"
SuffixHtml="</div></div>"
MenuNotVisibleHtml=" "><CustomTemplate>
<SharePoint:FeatureMenuTemplate runat="server"
FeatureScope="Site"
Location="Microsoft.SharePoint.StandardMenu"
GroupId="SiteActions"
UseShortId="true"
>
<SharePoint:MenuItemTemplate runat="server" id="MenuItem_Create"
Text="<%$Resources:wss,viewlsts_pagetitle_create%>"
Description="<%$Resources:wss,siteactions_createdescription%>"
ImageUrl="/_layouts/images/Actionscreate.gif"
MenuGroupId="100"
Sequence="100"
UseShortId="true"
ClientOnClickNavigateUrl="~site/_layouts/create.aspx"
PermissionsString="ManageLists, ManageSubwebs"
PermissionMode="Any" />
<SharePoint:MenuItemTemplate runat="server" id="MenuItem_EditPage"
Text="<%$Resources:wss,siteactions_editpage%>"
Description="<%$Resources:wss,siteactions_editpagedescription%>"
ImageUrl="/_layouts/images/ActionsEditPage.gif"
MenuGroupId="100"
Sequence="200"
ClientOnClickNavigateUrl="javascript:MSOLayout_ChangeLayoutMode(false);"
/>
<SharePoint:MenuItemTemplate runat="server" id="MenuItem_Settings"
Text="<%$Resources:wss,settings_pagetitle%>"
Description="<%$Resources:wss,siteactions_sitesettingsdescription%>"
ImageUrl="/_layouts/images/ActionsSettings.gif"
MenuGroupId="100"
Sequence="300"
UseShortId="true"
ClientOnClickNavigateUrl="~site/_layouts/settings.aspx"
PermissionsString="EnumeratePermissions,ManageWeb,ManageSubwebs,AddAndCustomizePages,ApplyThemeAndBorder,ManageAlerts,ManageLists,ViewUsageData"
PermissionMode="Any" />
</SharePoint:FeatureMenuTemplate>
</CustomTemplate></SharePoint:SiteActions>
<div class="sharepointLogin">
<!--Authentication for Authors only-->
<table summary="site links" cellpadding="0" cellspacing="0" >
<tr>
<td class="ms-globallinks hide" style="left: 0px; top: 0px; width: 69px">
<SharePoint:DelegateControl ControlId="GlobalSiteLink1" Scope="Farm" runat="server"/></td>
<td class="ms-globallinks">
<SharePoint:DelegateControl ControlId="GlobalSiteLink2" Scope="Farm" runat="server"/></td>
<td class="ms-globallinks">
<wssuc:Welcome id="explitLogout" runat="server"/></td>
</tr>
</table>
</div>
How do I put it togather is the same line..?
<SharePoint:MenuItemTemplate runat="server" id="<ID Menu Item"
Text="<Text to appear on Menu Item"
Description="<Descriprion Text>"
ImageUrl="<<URL Of image to be displayed at left of the menu>>"
MenuGroupId="<<Menu Group ID to group similar items>>"
Sequence="<<order in which te menu item should apear in its group>>"
UseShortId="true"
ClientOnClickNavigateUrl="<<Navigation URL>>"
PermissionsString=" <<Group name to which the menu item should be visible eg. EnumeratePermissions,ManageWeb,ManageSubwebs,AddAndCustomizePages,ApplyThemeAndBorder,ManageAlerts,ManageLists,ViewUsageData>>"
PermissionMode="Any" />