With extjs i have a south region with a panel in there. The problem is that when you resize the south area there is no scrollbar in the panel.
This is the south area
var southDetails = Ext.create('Ext.panel.Panel', {
region: 'south',
animCollapse: false,
title: 'South Region',
height: 300,
stateful: true,
loadMask: false,
collapsible: true,
floatable: false,
collapsed: true,
hideCollapseTool: true,
split: true,
stateId: 'stateSouthDetails',
items: [ test ]
});
And the item i use here is test. This is because i want to get the scrollbar in there.
var test = Ext.create('Ext.tab.Panel', {
autoscroll: true,
height: 300,
stateful: true,
stateId: 'stateTestDetails',
items: [{
xtype: 'panel',
autoscroll: true,
autoHeight: true,
title: 'Test Panel'
}]
})
I can see that the panel is 300 height. But there is no scrollbar when i resize the southpanel.
You have to define height, minsize and maxsize within the panel (south). take a look at this working example (EXTJS 4.0). if you collapse the south region, there will be appear a scrollbar within the south region. try it :)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="ext-4.0.2a/resources/css/ext-all.css">
<script type="text/javascript" src="ext-4.0.2a/bootstrap.js"></script>
</head>
<body>
<script type="text/javascript">
var test = Ext.create('Ext.tab.Panel', {
title: 'Testpanel',
region: 'center',
html: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. '
});
Ext.require(['*']);
Ext.onReady(function() {
Ext.create('Ext.Viewport', {
layout: {
type: 'border'
},
defaults: {
collapsible: true,
split: true,
autoScroll: true
},
items: [{
region: 'center',
title: 'Center',
html: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'
},{
region: 'south',
title: 'South',
collapsible: true,
collapsed: false,
split: true,
height: 175,
minSize: 150,
maxSize: 300,
items: [test]
}]
});
});
</script>
Related
I'm using Algolia for adding search to my JAMStack website. however, my site has some sort of premium content and I want them to be searchable while remaining hidden to the users.
I can achieve similar functionality by adding the body attribute to the searchable fields and remove it from the retrieved attributes. this way Algolia will still search the body for occurrences of the query while not exposing them to the user.
But the more preferable behavior is for the user to be able to see one or two occurrences of what he searched for in the retrieved body, but not able to see the whole text of the premium content.
For example, let's say we have the following entities in our index:
[
{
title: "Hello",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
},
{
title: "Hi",
body: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit"
}
]
Now, if I query the algolia API with text "i", algolia response looks like this:
...
hits: [
{
title: "Hello",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
_highlightResults: {
body: "Lorem <em>i</em>psum dolor s<em>i</em>t amet, consectetur ad<em>i</em>p<em>i</em>sc<em>i</em>ng el<em>i</em>t, sed do e<em>i</em>usmod tempor <em>i</em>nc<em>i</em>d<em>i</em>dunt ut labore et dolore magna al<em>i</em>qua. Ut en<em>i</em>m ad m<em>i</em>n<em>i</em>m ven<em>i</em>am, qu<em>i</em>s nostrud exerc<em>i</em>tat<em>i</em>on ullamco labor<em>i</em>s n<em>i</em>s<em>i</em> ut al<em>i</em>qu<em>i</em>p ex ea commodo consequat. Du<em>i</em>s aute <em>i</em>rure dolor <em>i</em>n reprehender<em>i</em>t <em>i</em>n voluptate vel<em>i</em>t esse c<em>i</em>llum dolore eu fug<em>i</em>at nulla par<em>i</em>atur. Excepteur s<em>i</em>nt occaecat cup<em>i</em>datat non pro<em>i</em>dent, sunt <em>i</em>n culpa qu<em>i</em> off<em>i</em>c<em>i</em>a deserunt moll<em>i</em>t an<em>i</em>m <em>i</em>d est laborum."
}
},
{
title: "Hi",
body: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit",
_highlightResults: {
body: "Sed ut persp<em>i</em>c<em>i</em>at<em>i</em>s unde omn<em>i</em>s <em>i</em>ste natus error s<em>i</em>t voluptatem accusant<em>i</em>um doloremque laudant<em>i</em>um, totam rem aper<em>i</em>am, eaque <em>i</em>psa quae ab <em>i</em>llo <em>i</em>nventore ver<em>i</em>tat<em>i</em>s et quas<em>i</em> arch<em>i</em>tecto beatae v<em>i</em>tae d<em>i</em>cta sunt expl<em>i</em>cabo. Nemo en<em>i</em>m <em>i</em>psam voluptatem qu<em>i</em>a voluptas s<em>i</em>t aspernatur aut od<em>i</em>t aut fug<em>i</em>t, sed qu<em>i</em>a consequuntur magn<em>i</em> dolores eos qu<em>i</em> rat<em>i</em>one voluptatem sequ<em>i</em> nesc<em>i</em>unt. Neque porro qu<em>i</em>squam est, qu<em>i</em> dolorem <em>i</em>psum qu<em>i</em>a dolor s<em>i</em>t amet, consectetur, ad<em>i</em>p<em>i</em>sc<em>i</em> vel<em>i</em>t"
}
]
But what I want it to return, is the following:
[
{
title: "Hello",
_highlightResults: {
body: "Lorem <em>i</em>psum dolor sit amet" // only the first occurance with some context
}
},
{
title: "Hi",
_highlightResults: {
body: "Sed ut persp<em>i</em>ciatis unde" // only the first occurance with some context
}
}
]
I know something similar to this can be done using the snippets, but if you pay close attention, the body field is also removed from the hit body itself so the complete body is never sent to the client. The client can search through the premium contents while the content itself remains unexposed.
How can I achieve this using the Algolia API?
You should be able to implement such logic with snippet. You don't have to return the field to search for it. The snippet feature can control how much context is sent back with the match. You can set the limit to return only a few words to restrict the match to a single occurrence. It won't be 100% accurate though, two matches may be returned if they are closer than the given limit (which shouldn't be a problem for a real use case).
The below example only returns the name attribute for the search. The description is set in the searchableAttributes. It means that the query will use this attribute for the search. It also mean that we can use it with the snippet feature. Here the snippet is restricted to 10 words.
index.search('apple', {
attributesToRetrieve: ['name'],
attributesToSnippet: ['description:10'],
});
Note that those values are set at search time. For a client-side implementation, it means that a user will be able to alter those values. Your use case is about premium content so it's problematic. To work around the problem you have to use an API Key with those parameters burn in it. You won't be able to override them at search time.
I need to apply scroll panel inside a notification bar of prime faces, content is visible but scroll is not working.
Can anyone help me?
The code is given below have a look. Thanks.
<p:notificationBar position="top" effect="slide" style="margin-left:30px;width:500px;margin-top:51px;height:300px" styleClass="top" widgetVar="bar">
<p:scrollPanel style="width:400px;height:280px">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean blandit tortor a ipsum vehicula, in semper sapien auctor. Nulla tempor eget est non consequat. Nulla sit amet lorem justo. Cras non tellus eros. Sed ultricies orci ut quam interdum fringilla. Nam vitae massa ac mi elementum mattis vel vitae sem. Ut eros ipsum, scelerisque a erat a, eleifend luctus nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<p>
Vivamus ac ullamcorper magna. Aenean felis ante, elementum sit amet urna at, eleifend aliquet velit. Morbi a convallis magna. In nec leo vel dolor hendrerit pharetra. Cras in iaculis enim. Aenean porta sapien dignissim turpis dapibus, eu dictum velit elementum. Aliquam sollicitudin gravida luctus.
</p>
<p>
Ut vel nulla sit amet erat laoreet eleifend nec sed lacus. Quisque placerat diam vitae justo eleifend, rutrum mollis mauris fringilla. Curabitur turpis odio, euismod id lorem a, ultricies suscipit ligula. Pellentesque ut erat a leo rhoncus porta ac sed velit. Nunc at erat ligula. Fusce vehicula posuere interdum. Curabitur tempus, tortor at sollicitudin dapibus, erat ante varius nisl, id dictum erat ipsum porttitor ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla id varius enim, sed rutrum orci.
</p>
</p:scrollPanel>
</p:notificationBar>
Set the mode attribute value to native of the <p:scrollPanel>:
<p:scrollPanel mode="native"...>
Unfortunately I don't know what it is mean and what the other enabled values. But when I set it to this value the scrollPanel got working in this component.
I have this markup:
<body>
<img id="one" src="http://lorempixel.com/400/200/abstract" />
<p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla,
orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim.
Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.</p>
<img id="two" src="http://lorempixel.com/400/200/abstract" />
</body>
How can I make them to be in the beginning left-top (img id="one") and at the end right-bottom (img id="two") of the paragraph and nicely wrap around with its text?
See http://jsfiddle.net/ge15jLfg/
Thank you!
Align left for the top image and you can use divs for the bottom one. It is a bit tricky as you have to know the length of the text or play with a bit of javascript.
See here:http://jsfiddle.net/ge15jLfg/1/
<img id="one" src="http://lorempixel.com/400/200/abstract" align="left"/>
<div style="float: right; width: 0px; height: 200px"></div>
<div style="float: right; clear: right">
<img id="two" src="http://lorempixel.com/400/200/abstract"/>
</div>
<p>
Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla,
orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim.
Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.
Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla,
orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim.
Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.
Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla,
orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim.
Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.
</p>
How i can set single long html page to multiple pdf pages in nodejs?i am new to nodejs,how i can do this?i want to create pdf phantomjs with expressjs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>demo</title>
</head>
<body>
<div style="page-break-after: always;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
</div>
<div style="page-break-after: always;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
</div>
<div style="page-break-after: always;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
</div>
<div style="page-break-after: always;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
</div>
</body>
</html>
Lorem ipsum dolor sit amet, hello consectetur adipiscing elit. Vivamus lorem mauris, dictum in ornare sit amet, vulputate at nibh. Integer volutpat justo vitae enim ultrices ultrices. In quis tortor id diam tincidunt feugiat at ut odio. Donec faucibus sapien vitae ante aliquam malesuada. Nam facilisis, metus in tincidunt posuere, hello massa nisi vulputate nunc, id rutrum mi enim non risus. Phasellus ac nisl non tortor pulvinar accumsan at eget leo. Nunc neque mauris, vehicula eget malesuada a, vestibulum non urna. Proin iaculis sem vel nulla porta tristique. Donec magna diam, eleifend quis vehicula in, aliquam in dolor. In et tellus nec metus volutpat dapibus. Duis hello purus dolor, aliquet in vehicula id, adipiscing id lorem. Vivamus elementum, mauris non vulputate tempus, risus elit tincidunt nunc, et posuere velit ligula sit amet purus. Integer pellentesque ultrices sodales. Donec in arcu eu est ullamcorper tincidunt placerat at sem.
I want select everything from the beginning until first occur of hello
I try this
/^.*hello
But it returns whole text until the last hello.
So how to do it?
You can use the visual mode and then search for hello to extend it
0v/hello<cr>
should do it
Otherwise to do a "non-greedy" search you can try {-}
/^.\{-\}hello
Just make the capture non-greedy:
/^.\{-}hello
This matches "as few as possible".