Full calendar how to wrap fc-list-heading and fc-list-item into single div?
Need output like this
<div>
<tr>fc-list-heading</tr>
</div>
<div>
<tr>fc-list-item</tr>
<tr>fc-list-item</tr>
</div>
I have done this in following way:
eventAfterAllRender: function (view) {
if (view.name == 'listUpcoming' || view.name == 'listPast') {
let tableSubHeaders = $(".fc-list-heading");
tableSubHeaders.each(function () {
jQuery(this).nextUntil(".fc-list-heading").wrapAll("<tr class='fc-list-item-parent'></tr>");
});
}
}
Related
I want to display a specific number of components around a component. How can I do that? :)
With this implementation, I draw 8 Patrat component
{Array.from(Array(8)).map((item, index) =>
(<Patrat key={index}/>)
)}
I want to display these 8 Patrat around a circle which is also a component.
After Understanding the issue and what you want here is the final solution
You can also create function which can dynamically create position and pass it to the Child components
Here is complete code resource link (Click Here)
Also your can experiment with some comment line in code link given above
You could create a recursive loop where you create a new Patrat component with the recursive call as children to it.
Example
function Patrat({ children }) {
return (
<div
style={{
paddingLeft: 10,
backgroundColor: "#" + Math.floor(Math.random() * 16777215).toString(16)
}}
>
{children}
</div>
);
}
function App() {
const content = (function patratLoop(num) {
if (num === 0) {
return <div> Foo </div>;
}
return <Patrat>{patratLoop(--num)}</Patrat>;
})(8);
return content;
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
You could make the circle responsible for positioning the elements, then have Patrats as children of circle (Circle > div.circle_element_position > Patrat) or if Patrats will change depending on the parent component, you could use same logic but use renderProps for Patrats (Circle > div.circle_element_position > props.renderPatrat(index))
It would look more or less like this:
function Partat() {
return <div>1</div>
}
function calculatePositions(numberOfPatrats) {
//your implementation
}
function Circle ({numberOfPatrats}) {
let positions = calculatePositions(numberOfPatrats);
return <div className="circle">
{positions.map(
(position, index) => <div style={position} key={index}><Partat /></div>
)}
</div>
}
To place Parats on the positions you want you just need to implement calculatePositions, which will be similar to what you had in your jsfiddle example.
I have got a list and I want to apply a different style to each item depending on it's Id. Below is my attempt to do that but unfortunately something is wrong. Any help will be very appreciated.
#foreach (var item in Model)
{
#if (#item.Id==0)
{
var css = "background-color:Aqua";
}
else if (#item.Id==1)
{
var css = "background-color:Red";
}
else
{
var css = "background-color:Green";
}
<div style="#css" class="box">
#item.Info
</div>
<div>
#item.Name
</div>
}
Your if condition is already in a code block(foreach code..). So no need of # . Also define the css varibale outside of your if-else blocks
#foreach (var item in Model)
{
var css="background-color:Green";
#if (#item.Id==0)
{
css = "background-color:Aqua";
}
else if (#item.Id==1)
{
css = "background-color:Red";
}
<div style="#css" class="box"> #item.Info </div>
<div> #item.Name </div>
}
Another solution is creating a css class name string inside your loop using your item.Id or item.Code(if that exists) and using that in your markup. With this approach, you may completely eliminate the if condition checking in your razor code, thus making this a much cleaner solution than the previous one.
#foreach (var item in Model)
{
<div class="box myClass-#item.Id">
#item.Name
</div>
<div> #item.Name </div>
}
And in your css class add the css classes as needed
.myClass-0
{
background-color:aqua;
}
.myClass-1
{
background-color:red;
}
.myClass-2
{
background-color:green;
}
Id's might change, so i recommend using some other properties like Code/Name etc.
First of all try setting a default style and bring var css out of the if block, then set the value according to your needs.
But you can also try a helper for that:
#helper styler(int id, String value){
var bg = "background-color:white" // as default
if(id == 1){
bg = "Another color";
}
else if (id == 2) {
// continue setting values
}
<span style="#bg">#value</span>
}
However, this is not really necessary as you can set the style inside of the for loop, but this approach reduce some code duplication.
I have the next div:
<div class="div-class" style="width:158px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;" title=<%=myDesc%>
How can I show the tooltip only when ellipsis is active?
I find this function
function isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
But I didn't know how to use it knowing I use jsp and struts
Try something like this:
Working DEMO
Working DEMO - with tooltip
$(function() {
$('div').each(function(i) {
if (isEllipsisActive(this))
//Enable tooltip
else
//Disable tooltip
});
});
function isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
For anyone using qtip (being quite popular).
First, add a class to each of your overflowing elements.
<span class="ellipsis-text">Some very long text that will overflow</span>
Then, use the jQuery selector to select multiple such elements, and apply the qTip plugin (or any other tooltip that comes to mind) on to your elements as such:
$('.ellipsis-text').each(function() {
if (this.offsetWidth < this.scrollWidth) {
$(this).qtip({
content: {
text: $(this).text()
},
position: {
at: 'bottom center',
my: 'top center'
},
style: {
classes: 'qtip-bootstrap', //Any style you want
}
});
}
});
I have a function which shows/hides divs on a page. Within these revealed divs is an image and the 'close' button. I'm trying to get this to zoom animate up/down.
I've got a reasonable zoom function but the problem is the zooms all happen on page load, when I need them to be triggered on the div reveal. Any suggestions on what I need to do to achieve it with the code I have (or suggest better ways) would be appreciated.
Thanks
HTML
<div class="box1" id="box1ID" style="display:none;">
<div class="page_image_wrapper">
<!--<img src="images/1.png" width="1080" height="1920">-->
<div id="zoom-box">
<img src="images/13.png" width="1080" height="1920" />
</div>
</div>
<div class="close_box">
<a href="#" name="1" onclick="conceal('box1ID');">
<img src="images/transparent.png" width="100" height="100">
</a>
</div>
</div>
Show/Conceal function
function conceal(boxId) {
if(document.getElementById(boxId).style.display=='block') {
document.getElementById(boxId).style.display='none';
}
return false;
}
function show(boxId) {
if(document.getElementById(boxId).style.display=='none') {
document.getElementById(boxId).style.display='block';
}
return false;
}
Zoom-box function:
$(document).ready(function () {
$('#zoom-box').animate({
width:'1080px',
height:'1920px',
top:'0',
left:'0',
'font-size':'50px',
'line-height':'300px'
}, 1000);
});
Wrap your zoom in a function and call it after the div is revealed. I've gone ahead and used jQuery for the show and conceal functions as well since you're already using it for the zoom.
$(document).ready(function () {
function zoomIn() {
$('#zoom-box').animate({
width:'1080px',
height:'1920px',
top:'0',
left:'0',
'font-size':'50px',
'line-height':'300px'
}, 1000);
}
function conceal(boxId) {
$('#' + boxId).hide();
// You could potentially create a zoomOut function and call it here to 'reset' the zoom
// zoomOut();
}
function show(boxId) {
$('#' + boxId).show();
// Call your zoom function here
zoomIn();
}
});
As noted in the comment, you could also create a zoomOut function to 'reset' the zoom and call it in the conceal function.
I spend two hours to realized that if I put a Action inside of a block, it does not show the partial view.
<div>
#if (ViewBag.Tab == "summary")
{
Html.Action("Summary");
}
else { ... }
</div>
But if I do the following it works, but if not what I want:
<div>
#if (ViewBag.Tab == "summary")
{ <div>
Html.Action("Summary");
</div>
}
else { ... }
</div>
Is there a way to show the partial view using the first option?
Neither of your examples would work properly. Html.Action returns an MvcHtmlString. You need to prefix it with an #:
#if (ViewBag.Tab == "summary")
{
#Html.Action("Summary"); // prefix with # works fine.
}