I'm trying to figure out how to modify the CSS when a WebPart is added.
The Idea is to span the background of the added Web Part across all columns, let's say the Web Part is added in the left column on a 2 column page. The background would span across all the CanvasZone row. Not just the column where the Web Part is added.
UPDATE:
Here is my code in the render method. I'm working with the HelloWebPart to have something really simple
public render(): void {
this.domElement.innerHTML = `
<div class="${ styles.helloWorld }">
<div class="${ styles.container }">
<div class="${ styles.row }">
<div class="${ styles.column }">
<span class="${ styles.title }">Welcome to SharePoint!</span>
<p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>
<p class="${ styles.description }">${escape(this.properties.description)}</p>
<a href="https://aka.ms/spfx" class="${ styles.button }">
<span class="${ styles.label }">Learn some more</span>
</a>
</div>
</div>
</div>
</div>`;
jQuery(function(){
jQuery('.helloWorld_385074c7').closest('div.CanvasZone').css({
'background-color': 'green'
});
});
}
You may try to use jQuery to modify the background, for example:
jQuery(function(){
jQuery('.pnpsp_85e6a47f').closest('div.CanvasZone').css({
'background-color': 'green'
});
Related
Im using NodeJS with React and I have a problem. I didnt find a npm module or a code that allowed me to create a pagination for a list of results.
I have a variable called "jobs", that contains a list of job ads.
In my render function I call:
{this.state.jobs.map(this.renderClass)}
that map every job with a function.
This function is renderClass, that contains the render of:
<section key={c.id} className="panel panel-featured-left panel-featured-primary">
<Link to={'/job/'+c.id}>
<div className="panel-body">
<div className="widget-summary">
<div className="widget-summary-col widget-summary-col-icon">
<div className="summary-icon">
<img src={image} className="img-responsive" />
</div>
</div>
<div className="widget-summary-col">
<div className="summary">
<h4 className="title">{c.company}</h4>
<div className="info">
<strong className="amount"></strong><br/>
<p><i className="fa fa-map-marker"></i> {c.location}</p>
<p><i className="fa fa-suitcase"></i> {c.position}</p>
</div>
</div>
<div className="summary-footer">
<a className="text-muted text-uppercase"><i className="fa fa-calendar"></i> {day}/{month}/{year}</a>
</div>
</div>
</div>
</div>
</Link>
</section>
In this way I have a huge list of jobs, but I would a paging.
How can I do this?
Thanks
I would save the page in a state,
and do something like that (say each page has 10 jobs ) -
{this.state.jobs.slice(this.state.page * 10, this.state.page * 10 + 10)
.map(this.renderClass)}
I suggest your need to build a component for handling pagination. Some thing like that:
<Pagiantion
listLenght = {111}
selectedPage = {1}
itemPerPage = {10}
....
/>
I found the best component handling it, react-pagination-custom.
It allow you custom everything (number buttons, wrap container, spread,..). Its document is well, demo is also clear.
I am making a website with node.js and I am new ,I want to learn a method if there is.I list cars using ul and when I click on a car name i want to show car's details. How can I do it.
html
<template name="vehicles">
<section id="vehicles" class="container">
<div class="row">
<div class="col-md-12">
<h2 class="title wow fadeInDown" data-wow-offset="200">Vehicle Models - <span class="subtitle">Our rental fleet at a glance</span></h2>
</div>
<!-- Vehicle nav start -->
<div class="col-md-3 vehicle-nav-row wow fadeInUp" data-wow-offset="100">
<div id="vehicle-nav-container">
<ul class="vehicle-nav">
{{#each showcarnames}}
<li class="active">{{aracmarka}}<span class="active"> </span></li>
{{/each}}
</ul>
</div>
<div class="vehicle-nav-control">
<a class="vehicle-nav-scroll" data-direction="up" href="#"><i class="fa fa-chevron-up"></i></a>
<a class="vehicle-nav-scroll" data-direction="down" href="#"><i class="fa fa-chevron-down"></i></a>
</div>
</div>
<!-- Vehicle nav end -->
<!-- Vehicle 1 data start -->
<div class="vehicle-data" id="vehicle-1">
<div class="col-md-6 wow fadeIn" data-wow-offset="100">
<div class="vehicle-img">
<img class="img-responsive" src="img/vehicle1.jpg" alt="Vehicle">
</div>
</div>
<div class="col-md-3 wow fadeInUp" data-wow-offset="200">
<div class="vehicle-price">$ 37.40 <span class="info">rent per day</span></div>
<table class="table vehicle-features">
<tr>
<td>Marka</td>
<td>{{carmark}}</td>
</tr>
<tr>
<td>Model</td>
<td>{{carmodel}}</td>
</tr>
</table>
<span class="glyphicon glyphicon-calendar"></span> Reserve now
</div>
</div>
js
Template.vehicles.helpers({
showcarnames: function() {
return cars.find();
}
});
I would approach this problem using Session. You could target the data using a click event:
Template.vehicles.events({
'click .vehicle-nav li': function(){
Session.set('selected-vehicle', this._id); // or however you id the docs in your app.
}
});
then create an event helper that gets the selected doc and returns it to the template.
Template.vehicles.helpers({
getSelectedVehicle: function() {
var selectedId = Session.get('selected-vehicle');
return cars.findOne(selectedId);
},
});
Session is a great and simple tool to manage user state, like what vehicle they have selected.
Finally, you would then need to get the values in your template somewhere
<!-- html-->
{{#if getSelectedVehicle}}
{{#with getSelectedVehicle}}
<!-- mark up, when using with you can access doc atts directly. -->
{{/with}}
{{else}}
<!-- tell the user to make a selection -->
{{/if}}
using with in this context can lead to more readable markup. But there are other ways to achieve the same result.
To recap, at a high level, You are targeting the users interactions with the UI, to set a global variable as a way to simplify managing state. Be sure to check out Session in the meteor docs, its very simple and powerful. (the above code is not tested, but hopefully conveys the idea)
Hi please need help how to render my multinode tree picker value (http://screencast.com/t/NTu1NqXsTmBz) to show it on its parent node named PORTFOLIO ..
i want the multinode picker value should be placed between the Portfolio and About section (http://screencast.com/t/F0Dnnv9a) but I don't know how yet i tried render it and still not work ..
here is the finish template : screencast.com/t/ar1zeZ43Pf6J
Node tree picker code:
#if (Model.Content.HasValue("mntp_pickContent"))
{
var bannerListValue = Model.Content.GetPropertyValue<string>("mntp_pickContent");
<div id="container" class="container-portfolio">
#foreach (var item in bannerListValue.Split(','))
{
var page = Umbraco.Content(item);
<div class="col-md-4 element branding">
<div class="portfolio-item flip ">
<div class="flip-content">
<div class="front">
<img width="360" height="249" src="#page.Url" class="attachment-project-thumb wp-post-image" alt="background4" />
</div>
<div class="back">
<div class="back-content">
<h4>#page.contentTitle</h4>
<div class="txt-project">
<p>#page.contentsubTitle</p>
</div>
<i class="fa fa-plus"></i> More
</div>
</div>
</div>
</div>
<!-- flip container -->
</div>
}
</div>
}
Parent Node Portfolio.cshtml
#{ if (Model.Content.HasValue("port_backImage"))
{
var bgport = Umbraco.TypedMedia(Model.Content.GetPropertyValue<string>("port_backImage"));
<section class="section-wrap section-portfolio" style="background-image: url(#bgport.Url)" id="portfolio">
<div class="container">
<div class="container-wrap row portfolio">
<div class="container-wrap-title col-md-6">
<h2>#Model.Content.GetPropertyValue("pageTitle")</h2>
<h6>#Model.Content.GetPropertyValue("subTitleText")</h6>
</div>
<div class="container-wrap-subnav col-md-6">
<ul class="subnavigation" id="filters">
<li class="active">show all</li>
#foreach (var portMenu in Model.Content.Children)
{
<li>#portMenu.Name</li>
}
</ul>
</div>
</div>
</div>
</section>
}
}
This all depends on the Templating Engine you are using.
If you are using MVC, then you need to add your MNTP logic to a partial view.
See the following link:
https://our.umbraco.org/documentation/Reference/Templating/Mvc/partial-views
If you are using WebForms, then you will need to add your logic to a Razor file OR alternatively a UserControl (.ascx) file. See the following links:
https://our.umbraco.org/documentation/reference/templating/macros/
https://our.umbraco.org/documentation/reference/templating/macros/Razor/
http://umbraco.com/help-and-support/video-tutorials/introduction-to-umbraco/developer-introduction/using-net-user-controls
<template name="menu">
<div class="ui grid">
<div class="two wide column"></div>
<div class="twelve wide column">
<div class="ui red menu">
<a class="{{active}} item" id="home">
<i class="home icon"></i> Péng you
</a>
<a class="item" id="message">
<i class="mail icon"></i> Message
</a>
<a class="item" id="friend">
<i class="user icon"></i> Find Friend
</a>
<div class="right red menu">
<a class="active item">
<i class="sign in icon"></i> Log In
</a>
</div>
</div>
</div>
<div class="two wide column"></div>
</div>
Template.menu.helpers({
'active': function (e, tmpt) {
var active = Session.get('activeMake');
return active
}
});
Template.menu.events({
'click #home': function (e, tmpt) {
event.preventDefault();
var activeAttribute = "active";
Session.set('activeMake', activeAttribute);
}
});
now, I can give active. but, I can't delete active when user cluck other menu.
and i think there is much better way to do this. (ex: without session or ID attribute)
please help me....
its an old question, iam having same trouble, this works but is not the perfect way. In my case i got like 5 elements so it work fast, but in other app i got like 300 buttons and works a litle slow in cordova app, specially olds tablets.
Template.yourtTemplateName.events({
'click .commonClass': function (e, t) {
$(".commonClass").each(function () {
console.log(this);
$(this).removeClass('active')
});
$(e.target).addClass('active')
},
});
I'm using bootstrap and attempting to use the panel component for rendering lookup items. It renders perfectly fine, but this was all hand coded.
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
Item Number 1
</div>
<div class="panel-body">Image Carousel Goes Here</div>
<div class="panel-footer">
<table>
<tr>
<td>Field</td>
<td>Value</td>
</tr>
<!-- etc. -->
</table>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
Item Number 1
</div>
<div class="panel-body">Image Carousel Goes Here</div>
<div class="panel-footer">
<table>
<tr>
<td>Field</td>
<td>Value</td>
</tr>
<!-- etc. -->
</table>
</div>
</div>
</div>
</div>
A JSFiddle is here.
I'm wondering how it'd be possible to do something like:
<div class="row">
#(foreach Item item in items)
{
#RenderItemView(item);
}
</div>
where I could dump all of the "div.col-md-4 ... slash div" code into another cshtml file and use it as a component and just pass the model to it?
I know that I could do this, but would prefer to make this a reusable component.
<div class="row">
#foreach(Item item in items)
{
// instead of using a component, setting the panel-heading off item.Number,
// panel-body by a foreach on item.ImageUrls, etc.
}
</div>
Basically, the subcomponent will be a partial view, I think, but what is the normal way of passing a model to it and it rendering at that spot (basically, like #RenderBody works on layout)
You could create a partial view which holds this content:
#model IEnumerable<ItemType>
<div class="row">
#foreach(var item in Model)
{
// instead of using a component, setting the panel-heading off item.Number,
// panel-body by a foreach on item.ImageUrls, etc.
}
</div>
Save the partial view in the Views/Shared folder, so that it's available everywhere. Then to use it:
#{Html.RenderPartial("YourPartialView", Model.Items);}