I'm using mapbox-gl-js on a craftcms website.
This is a script block inside a Twig template.
I'm rendering markers with data via a geoJSON with some properties ->
"properties": {
...
"phoneNumber": locationPhone[k],
"faxNumber": locationFax[k],
...
}
On click, markers displays an Info-box with some data from the geoJSON via setHTML
new mapboxgl.Popup()
.setHTML(`
...
<li class="phoneNumber">
<span class="green">Tel.</span> <span class="display-phone">${myCustomLayers.properties.phoneNumber}</span>
</li>
So at this point, we have (php?) variables in a setHTML in a script tag in a Twig template.
How could I set a condition around
<li class="phoneNumber">
</li>
so this 'li' would only be displayed if locationPhone[k] or ${myCustomLayers.properties.phoneNumber} is set ?
I've gone so far with limited knowledge, I fear I've done it wrong and can't check for this property now.
Edit : If anybody needs this, those variables provided by ARCGIS are geoJson objects, they can be accessed like this :
if (myCustomLayers.properties.faxNumber === undefined) {
document.getElementsByClassName("faxNumber")[0].style.display = "none";
}
if (myCustomLayers.properties.phoneNumber === undefined) {
document.getElementsByClassName("phoneNumber")[0].style.display = "none";
}
console.log(myCustomLayers.properties.phoneNumber)
Finally sorted it out. Thanks
Related
Not sure if this is possible, but I've a link with data-attributes 'data-form-recipient' set by Json objects :
<a class="callback-form" href="#location-form" id="contact-us-recipient" data-form-recipient="${myCustomLayers.properties.locationRecipient}">
When trying to get the data from this with JS, It looks all good and gives me the email addresses I want ->
var elem = document.getElementById('contact-us-recipient');
var recipient= elem.getAttribute('data-form-recipient');
console.log(recipient)
Thing is, I need to access it with Twig because this is for a Freeform dynamicNotification (Craft 3), in this context :
{% set form = craft.freeform.form("contactLocation", {
dynamicNotification: { recipients: [
recipient
], template: "locationContactTmp" }
}) %}
Where 'recipient' must be my data-form-recipient value. Is this possible and how?
Thanks
I'm using slick carousel, and once a div is active I want to open the corresponding description.
Problem I'm having is with this code:
if ($('div').hasClass('active')) {
var title = $(this).attr('title');
$('ul li').removeClass('open');
$(title).addClass('open');
}
What I'm trying to achieve:
Once a div gets class 'active', I want to take its title value, and use it as a id link to list element I want to display(add class to).
Here is a FIDDLE.
Use event handling, not class monitoring.
The slick carousel API has events for this, I believe you want to use the afterChange event to act on the active element after it has been made visible.
Check out the docs and examples, especially the section titled "Events" on Slick page: http://kenwheeler.github.io/slick/
And I think you don't want to use title attribute for this because that is for tooltips. I recommend data-* attributes instead. And element IDs should generally start with a letter and not a number (was required in HTML4 and makes life easier when mapping IDs to JavaScript variables; though if you are using HTML5 I think this requirement is no longer in effect).
HTML
<div id="carousel">
<div data-content-id="content1">
Selector 1 </div>
<div data-content-id="content2">
Selector 2 </div>
<div data-content-id="content3">
Selector 3 </div>
</div>
<ul class="content">
<li id="content1">Content 1</li>
<li id="content2">Content 2</li>
<li id="content3">Content 3</li>
</ul>
JavaScript
$('#carousel').on('afterChange', function(event, slick, currentSlide) {
// get the associated content id
var contentId = $(slick.$slides.get(currentSlide)).data("content-id");
if(contentId && contentId.length)
{
var $content = $("#" + contentId);
$(".content>li").removeClass("open"); // hide other content
$content.addClass("open"); // show target content, or whatever...
}
});
I have found a solution:
$('.slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
var contentId= $(slick.$slides.get(currentSlide)).data('content');
if(contentId)
{
$(".content li").removeClass('open');
$('#' + contentId).addClass('open');
}
});
Working fiddle
Im working with an Alloy UI pagination component in Liferay 6.2 and i was trying to customize the prev and nextc controls, i have something like this :
<div id="myDataTable"></div>
<div id="pagination" class="aui-pagination aui-pagination-centered">
<ul class="aui-pagination-content">
<li>Prev</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>Next</li>
</ul>
</div>
Where myDataTable is ...a DataTable component
and then the YUI code:
new Y.Pagination({
contentBox: '#pagination .aui-pagination-content',
circular:false,
page: 1,
strings: {
prev:'«',
next: '»',
},
on: {
changeRequest: function(event) {
if (event.state.page === 1) {
dataTable.set('data', data1);
} else if (event.state.page === 2) {
dataTable.set('data', data2);
} else if (event.state.page === 3) {
dataTable.set('data', data3);
}
}
},
total:3
}).render();
What i want to do is to hide all the pages in the pagination and just have the prev and next controls with a background image, i have noticed that you can change the controls by changing the strings on the YUI code but it only allows ASCII characters and i need to include images or a way to insert css code there. Any help will be really appreciated.
Probably you can do this using CSS. The left navigation button will be first child and the right button will be the last child of pagination-content class. After calling the render method you can set the innerHTML of the navigation buttons through JS
Y.one('.pagination-content .pagination-control:first-child').setHTML('<div>Content of left navigation button</div>');
Y.one('.pagination-content .pagination-control:last-child).setHTML('<div>Content of right navigation button</div>');
My question is similar to that one:
Dijit Menu (bar) with link
I'm using Dijit Menu as in following listing:
<div data-dojo-type="dijit/Menu">
<div id="menuItem" data-dojo-type="dijit/MenuItem">
urlLink
</div>
</div>
But link is not working as it blocked by dojo.stopEvent in _onClick().
The question is:
How to remove dojo.stopEvent and make link inside <div id="menuItem" data-dojo-type="dijit/MenuItem"> work properly?
The issue:
I need to put inside <div id=menuItem"> some code, which has to receive onClick event.
P.S. Originally this is XPages code.
Well I fell in same problem, saw this post and the related other, but wasn't satisfied with the "onclick" solution :
it didn't work (for me) with keyboard navigation
it imposes to a add script element (onclick=...) in the declarative zone which is not what I expect for unobtrusive JavaScript
Finaly I digged further in dojo and decided to directly use the href attribute of first sub-node in the handler. My script section (derived from dijit menus tutorial) is then :
<script>
require([
"dojo/dom",
"dojo/parser",
"dojo/dom-attr",
"dojo/query",
"dijit/registry",
"dijit/WidgetSet", // for registry.byClass
"dijit/Menu",
"dijit/MenuItem",
"dijit/MenuBar",
"dijit/MenuBarItem",
"dijit/PopupMenuBarItem",
"dojo/domReady!"
], function(dom, parser, domattr, query, registry){
// a menu item selection handler
var onItemSelect = function(event){
dom.byId("lastSelected").innerHTML = this.get("label");
var achild = query("a", this.domNode)[0];
if (achild != null) {
var href = domattr.get(achild, "href");
if ((href != null) && (href != '') && (href != '#')) {
window.location.href = href;
}
}
};
parser.parse();
var setClickHandler = function(item){
item.on("click", onItemSelect);
};
registry.byClass("dijit.MenuItem").forEach(setClickHandler);
registry.byClass("dijit.MenuBarItem").forEach(setClickHandler);
});
</script>
That way I don't have to change anything in a menu of type
<ul><li>...</li></ul>
that works with JavaScript disabled, and links work fine with mouse and keyboard navigation when JavaScript is enabled. Simply don't forget the "class='claro'" in body element ....
What about this:
<div data-dojo-type="dijit/Menu">
<div id="menuItem" data-dojo-type="dijit/MenuItem"
onclick="window.location('http://url.com')">
urlLink
</div>
</div>
Working jsfiddle:
http://jsfiddle.net/KuyYX/
I'm new to Orchard and have watched both the Pluralsight "Orchard Fundamentals" and "Advanced Orchard" tutorials. Its a great platform, but I'm having a hard time wrapping my head around a couple of things.
I'd like to create a blog showcase banner on the home page only that rotates blog posts on the site. I have the HTML sliced up and functioning on an HTML template. The banner looks like this:
http://arerra.com/news-slideshow.jpg
So far I have done the following:
I've created a Blog called "Articles" and have placed a single post in there for testing.
Added a Layer called "ArticleList" where I have placed a Widget for "Recent Blog Posts"
I've created a custom layout for the home page called "Layout-Url-HomePage.cshtml" in my theme.
In my Theme "Views" folder, I have created a file called "Widget.Wrapper.cshtml" with only #Display(Model.Child) in it to remove the <article><header/><footer /><article> tags globally from the widgets.
Added a file in "Views > Parts > Blogs.RecentBlogPosts.cshtml" to control the layout of my shape. The code is the following:
#using Orchard.ContentManagement;
#{
IEnumerable<object> blogPosts = Model.ContentItems.ContentItems;
}
#if (blogPosts != null) {
<div class="container news-slider">
<ul class="slide-images">
#foreach (dynamic post in blogPosts) {
string title = post.Title;
ContentItem item = post.ContentItem;
<img src="/Themes/MountainWestHoops/Content/img/placeholder-700x380.jpg" alt="#title" class="active" />
}
</ul>
#foreach (dynamic post in blogPosts) {
string title = post.Title;
string body = post.Body;
ContentItem item = post.ContentItem;
<div class="featured-story threeD active">
<h1>#title</h1>
<p>#body #Html.ItemDisplayLink("READ MORE", item)</p>
</div>
}
<aside>
<ul class="tabs">
#foreach (dynamic post in blogPosts) {
string title = post.Title;
string url = post.Url;
ContentItem item = post.ContentItem;
<li><h3>#title</h3></li>
}
</ul>
<div class="ad-three-day-trial">
<img src="/Themes/Content/img/placeholder-260x190.gif" />
</div>
</aside>
</div>
}
My HTML is rendering properly, but none of the values that I have specified are showing up.
I am using the "Shape Tracer" module to see what template is being used. What is funny, is that the #Html.ItemDisplayLink("READ MORE", item) is rendering the article's URL, and if I replace the "READ MORE" with the string title, the title renders properly.
What am I doing wrong here that is causing strings to not display? Am I missing a larger point and misunderstanding the fundamentals? The tutorials seems to say that you can simply move around parts, but in this case, I need to have very specific markup for this slider to work.
Seems like your source was http://weblogs.asp.net/bleroy/archive/2011/03/27/taking-over-list-rendering-in-orchard.aspx
That is a rather old post, and the way the title is handled has changed since then.
The DisplayLink works because the only correct property here is post.ContentItem, which is what that API takes. post.Title and post.Body on the other hand are very likely null, which is why you see nothing. To access the title, you can use post.ContentItem.TitlePart.Title and to get the body, post.ContentItem.BodyPart.Text.