Has anybody worked with Angular-Slick? I'm trying to use this directive so I can get a carousel that displays multiple images/cards. Everything works fine but I can't get to customize the CSS width of the images. I set the variableWidth to true, but nothing. I also removed the slides-to-show option so variableWidth can work, but no results — I still get the default width by Slick. Here is the code below:
<slick infinite="true" slides-to-show="4" slides-to-scroll="4"
init-onload="true" data="popularCourses" variableWidth="true" arrows="true">
<div class="homepage-course-box" ui-sref="courses.show({id: popCourse.id})" ng-repeat="popCourse in popularCourses">
<div class="row" style="margin:0;">
<div class="course-img"
ui-sref="courses.show({id: popCourse.id})"
ng-style="{'background-image':'url({{popCourse.banner_url}})'}"></div>
<div class="author-avatar" ng-style="{'background-image':'url({{popCourse.author.avatar}})'}"></div>
</div>
<div class="row" style="margin:0;">
<a ui-sref="courses.show({id: popCourse.id})" class="homepage-course-title">{{popCourse.title}}</a>
</div>
<div class="row homepage-course-last-row">
<p class="author-name">{{popCourse.author.full_name}}</p>
<p class="course-duration">{{popCourse.duration | secondsToHHMM | date: "H'H' mm'M'"}}</p>
</div>
</div>
</div>
</slick>
From the code, I'm using ng-repeat so it displays all the images, I'm suspecting is interfering with the width, I may be wrong.
So far I like this angular directive, but it will be awesome if I can set my own custom CSS width. Please can anybody help with this! Your help will be appreciated!
Html is not case sensitive so angular requires dashes in attribute names on directives. So instead of variableWidth put variable-width.
Related
As I am displaying the notes on my note taking app, which is a grid, if I have a short note then there is empty space left. How can fill it up by pushing the cards below to go up and stick to card on the top. I am using bootstrap's grid layout for displaying the cards:- See here
I also have the screenshot of how the cards are looking currently.
You can see that there is a gap between the cards and I want to fill it up
Also here is the template of a single card
let cardTemplate = `<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">${title.value}</h5>
<p class="card-text">
${content.value}
</p>
Show More
Delete
Edit
</div>
</div>
</div>`;
and i am putting this card in a div whenever a button is clicked
<!--displaying notes-->
<div class="row"></div>
I have not done any css on the div since I like the looks as it is.
Thanks for reading my query!
I think what you're looking for is masonry. It's a grid property that allows that exact behavior that you are looking for. It can be done with grid-template-rows:masonry;. Here is a link that would tell you exactly how you can do it.
Try adding class h-100 inside<div class="card h-100">** or h-50 or h-25,which makes an element or div as tall with height utilities. it is readily available in bootstrap.
refer this link for getting more information about pre-defined sizes classes in bootstrap
I Forked an NBA 2K Random Team picker from another user and was tweaking it to my needs. I am stumped on something probably simple for one of you. Thanks in advance.
When the "Randomize" button is clicked, the team "name" and "logo" display. I added a "roster" url to display as well but I want that url to be clickable in to a new tab/window. I can't seem to figure it out.
https://codepen.io/nick-c/pen/dNwMaZ
Below is just the html. I couldn't manage to post all the script and css.
<div class='container'>
<div class='title'>
<img src='http://fluidesign.co.uk/wp content/uploads/2016/12/NBA_2K17_logo.png'/>
</div>
<div class='team home'>
<h3>Home</h3>
<div class='logo'></div>
<div class='name'>?</div>
<div class='roster'>Click for Rosters</div>
<div class='random'>Randomize</div>
</div>
<div class='team away'>
<h3>Away</h3>
<div class='logo'></div>
<div class='name'>?</div>
<div class='random'>Randomize</div>
</div>
<div class='vs'>vs</div>
<div class='clear'></div>
</div>
You didn't "manage to post all the script and css"? Where's the difference in pasting it into a codepen or pasting it into the code snipped tool here on StackOverflow? Anyway...
You are currently just setting the link as a text in the line:
$(".home .roster").text(teams[index].roster);
But what you want to do is add it as a link:
$(".home .roster").html('Webpage URL');
Easy, huh? ;) See a working fork of your codepen here: https://codepen.io/anon/pen/xgmEOm
i think you want this
example
Noob here sorry. I'm trying to remove an ancestor when my WP loop returns an empty message with a specific class. Firefox is displaying as intended, removing the desired DOM, but Chrome is removing the targeted element and no ancestors.
Basic HTML markup:
<div id="content" class="container site-content">
<div id="primary" class="main-content">
<div id="main-box-1" class="main-box border-top">
<div class="main-box-inside">
<p class="no-modules-msg">No posts match your criteria. Please choose different options.</p>
</div>
</div>
<div id="main-box-2" class="main-box border-top ">
<h3 class="main-box-title">More Stuff</h3>
<div class="main-box-inside">
</div>
</div>
</div>
</div>
And my script:
(function($) {
$("document.body").ready(function() {
$("p.no-modules-msg")
.closest(".main-box")
.remove(".main-box")
})
})(jQuery);
It's working correctly in fiddle, but not on the live site...
https://jsfiddle.net/y90gtt6t/
The reason it's not working on your site, is because the documentation is quite clear, only the document has a ready handler
jQuery(document).ready(function($) {
$("p.no-modules-msg").closest(".main-box").remove()
});
Your use of "document.body" actually looks for an element like <document class="body"></document>, which it hopefully never finds.
So I have an ng-repeat container div inside which I have a bunch of images.
For each image, there is a div next to it. I want only the div of the final image to be visible and I achieve this using $last. This works like a charm.
Now I have a filter button in the page also, and when this button is clicked some of these images get hidden. This show/hide is done using ng-show on the image tag.
What I want is that when the filter button is clicked and some of the images are hidden, I want the div next to the final visible image to get shown. Seems like $last is not aware of the ng-show/hide value. How can I handle it so that the div next to the last visible image is still shown?
<div class='container' ng-repeat="image in album">
<div class='wrapper' ng-show="getFilterValue(image.imageId)">
<div><img src='{{image.src}}'></div>
<div class='embellish-end' ng-class='{'hidden':!$last}'>The End</div>
</div>
</div>
Any help is greatly appreciated!
Instead of using ng-show you could filter the ng-repeat using angular's built in ng-repeat filter. If your getFilterValue function returns a boolean this should work for you. Then your $last should know what is truly last based on what meets the filter criteria.
<div class='container' ng-repeat="image in album | filter:getFilterValue(image.imageId)">
<div class='wrapper'>
<div><img src='{{image.src}}'></div>
<div class='embellish-end' ng-class='{'hidden':!$last}'>The End</div>
</div>
</div>
Try putting the ng-show on the image rather than the whole div wrapper:
<div class='container' ng-repeat="image in album">
<div class='wrapper'>
<div ng-show="getFilterValue(image.imageId)"><img src='{{image.src}}'></div>
<div class='embellish-end' ng-class='{'hidden':!$last}'>The End</div>
</div>
</div>
Unrelated: use ng-src rather than src when using angularized image sources to avoid browser errors.
I am using this: http://angular-ui.github.io/ui-utils/ and to be more specific this:https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md
however it does not seem to work. Here is an example:
<div ng-scroll-viewport style="height:240px;" class="chat-messages">
<div class="chat-message" ng-scroll="chat in chats">
<div ng-class="$index % 2 == 0? 'sender pull-right' : 'sender pull-left'">
<div class="icon">
<img src="{{chat.img}}" class="img-circle" alt="">
</div>
<div class="time">
{{chat.time}}
</div>
</div>
<div ng-class="$index % 2 == 0? 'chat-message-body on-left' : 'chat-message-body'">
<span class="arrow"></span>
<div class="sender">{{chat.name}}</div>
<div class="text">
{{chat.msg}}
</div>
</div>
</div>
</div>
But All I get in HTML is this :
<div class="chat">
<div class="chat-messages" style="height:240px;" ng-scroll-viewport="">
<!--
ngScroll: chat in chats
-->
</div>
If I replace ng-scroll with ng-repeat, it works perfectly. But chats need scroll bars, so... How can I get one? :)
The documentation of ngScroll directive had also tricked me into simply replacing ng-repeat by ng-scroll. Unfortunately, it turned out not as simple as that, see also the small, working example at http://plnkr.co/edit/fWhe4vBL6pevcuLutGC4 .
Note that
"datasource" (or whatever object you want to iterate over for the contents of the scroll list) must implement a method "get(index,count,success)" that calls success(results), see hXXps://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md#data-source
The array must have exactly count elements. Otherwise, no scroll window/bar will ever show, which can be very irritating!
Although UI.Utils says it has no external dependencies, ui.scroll has actually a dependency on either ui.scroll.jqlite, or jQuery. So make sure to list both ui.scroll and ui.scroll.jqlite in your module definition which contains the controller with datasource object (and load their .js files, or load ui-utils.js which contains both), see https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md#dependencies
Be careful when your server is sending some Content Security Policies (CSP). Maybe turn them off while trying to get ng-scroll to work first, then re-apply CSP and tune the policies accordingly for ui.scroll to work.
One way of getting a scroll is to use CSS, set overflow-y to scroll and you will get scroll bar.
If you need to scroll to the bottom, play with anchorScroll
http://docs.angularjs.org/api/ng.$anchorScroll.