I use the slick carousel on a regular basis and today I am experiencing an issue thats making me feel like I'm going insane.
When I apply the .slick() method to the parent element all the slides appear to the left of the page, the page extends horizontially by a lot and then when you attempt to slide it just jumps all over the place.
I have created a codepen to show the issue I'm having which you can see here https://codepen.io/harrietmcmahon/pen/pLWMbX?editors=1111
I've got
<div class="js--sc">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Applying .slick to js--sc
I've tried this with additional settings and without, I even tried just copying another codepen where it works, and it broke on that too!
Would really appreciate if someone could point out what I'm missing, or if anyone has experienced this issue?
Thank you
You just need to include the Slick CSS
https://cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css
https://cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick-theme.css
Related
I run into an issue with Vuejs 2.x version (latest). While rendering a list of item inside a loop, if I make changes to the items then the normal components are not destroyed but the dynamic components will always be destroyed:
I have put a short sample code here:
https://gist.github.com/yellow1912/fc1c053e07c1ca136148484cf7f79d1a
I have also put a codepen here:
https://codepen.io/raineng/pen/zYGOXYY?editors=1111
<nl-test inline-template>
<div>
<div v-on:click="increase"> increase here please </div><br><br>
<div v-on:click="decrease"> decrease here please </div>
<ul>
<li v-for="(value, key) in getItems()" :key="key">
printing
<component :is="getItem()" :key="key"></component>
<nl-test inline-template>
<div>
this is a test here
</div>
</nl-test>
</li>
</ul>
</div>
</nl-test>
To see what I mean, open the console tab on codepen, click the add item and you will see that the dynamic component items are destroyed and re-created everytime.
I found out why, I need to use keep-alive:
https://v2.vuejs.org/v2/guide/components-dynamic-async.html
To quote:
When switching between these components though, you’ll sometimes want
to maintain their state or avoid re-rendering for performance reasons
Recreating dynamic components is normally useful behavior, but in this
case, we’d really like those tab component instances to be cached once
they’re created for the first time. To solve this problem, we can wrap
our dynamic component with a element
Wasted 2 days on this issue and then I found the answer just a moment after posting this on StackOverflow. Hope it helps someone.
I am using Materialize and the sidenav is creating multiple overlays upon clicking the sidenav.
<div id="sidenav-overlay" style="opacity: 1;" class=""></div>
<div id="sidenav-overlay" style="opacity: 1;" class=""></div>
<div id="sidenav-overlay" style="opacity: 1;" class=""></div>
I found a fix here and replaced the sideNav.js file from here. But it still doesn't do any good.
Has anyone been stuck in a similar situation and found a solution?
The reason there are multiple overlays appearing behind your SideNav is because materialize's $('.button-collapse').sideNav() is being run multiple times on the same element.
A quick fix for this is to remove all previous click() events from your element before re-initializing materialize's sideNav, like so:
$(".button-collapse").off('click').sideNav({ --yourOptions-- });
Note: I am not sure what other functionality the ".sideNav()" call may be adding here, there may be a better/more specific way to remove the previous init.
what language you are programming??
I spent something like with asp.net, the mistake was declaring this:
$(".button-collapse").sideNav();
In MasterPage and ChildPages. Now declaring only MasterPage and the issue was solved.
hopefully help you in something,
Regards
For those who are using the Materialize Framework on Drupal, make sure you do not accidentally side-load another copy of Materialize / Velocity JS through Grunt or other task managers. That would cause the overlay to stack up like crazy.
This is what I tried when I faced similar issue:
#sidenav-overlay{ opacity: 0;}
#sidenav-overlay {background-color: transparent;}
I am wondering if it is necessary to put navbar content into the container/container-fluid, for example:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid"> etc...
If that is a must then there is no proper way to place navbar within some column elements(col-*) since containers can not be nested.
Can anyone confirm this?
Thank you very much.
Containers can be nested, it's just not recommended. But if the layout you're going for requires putting the navbar within some .cols, just try it! Then come back asking for help if it's not working the way you want...
Is there an easy durandal way to clear the view and put a loading or please wait... on the screen so the user gets some feedback to know that it is working until the ajax content loads?
Right now when I click on a something that navigates to a child route and that child route loads a module that has to do a lot of stuff in activate(), it does not switch the nav or clear the screen or give any feedback to the user that it is working and I see them clicking many times over and over and getting frustrated, then just about when they want to give up, the page loads in fine.
I would like to make this default functionality for my app and not have to do something special in every module or on every page, is that possible?
Thanks.
Have you tried to use router.isNavigating? Original Durandal template contains a spinner like this:
<div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
<i class="icon-spinner icon-2x icon-spin"></i>
</div>
A large percentage of the time, what you're looking for can be obtained very simply via:
<div data-bind="compose:ActiveVm">
<div class="text-center" style="margin : 75px">
<i class="fa fa-spinner fa-spin"></i>
</div>
</div>
The inner div can be any arbitrary markup which will display while the viewmodel is going through activation.
Note that this currently only displays the placeholder content the first time this dom section is composed. If you have a section of your application which is being updated via an observable viewmodel + compose approach, you could use the approach here:
Durandal: Showing a 'LOADING...' during composition
For anyone visiting from the future, this issue might be worth checking out in case native support for this is desired:
https://github.com/BlueSpire/Durandal/issues/414
I ran into this issue while building my online design portfolio. It seems complex to me, but I know there is a way to do it, so I am frustrated that I can't find a solution. Please help!
My design calls for the use of media queries to optimize my site for mobile, tablets, and desktops/laptops. The mobile version has a single column of thumbnails. When each thumbnail is clicked, a hidden div is revealed below it via jQuery slideToggle, pushing down the other project thumbnails.
That is how the mobile version works and it works great. The problem is the tablet and dektop/laptop versions. For those versions, I want the the thumbnails to display in a grid pattern. Two side-by-side on tablets and three side-by-side on desktop/laptops with infinite rows for all versions. I can make them display in a grid with HTML, but the problem comes when a thumbnail is clicked and it reveals the div below it via slideToggle. Since I'm using media queries, the order of the HTML is still the same as the mobile version and the hidden divs are directly below each thumbnail in the code. Thus, revealing the hidden div pushes down all the other thumbnails, including the thumbnails in the same row as the thumbnail that is being clicked (if they come after it in the code). The last div in each row does what I want it to; the next row is pushed down when the hidden div is revealed. I want the hidden div to display below the row it is in and push down the thumbnails that are in the rows below.
And obviously I want to stick with media queries to avoid creating separate HTML, if possible.
Repeating HTML for the thumbnails and hidden divs:
<div class="body">
<div class="thumb"></div>
<div class="projectWrapper"></div>
<div class="thumb"></div>
<div class="projectWrapper"></div>
<div class="thumb"></div>
<div class="projectWrapper"></div>
<div class="thumb"></div>
<div class="projectWrapper"></div>
<div class="thumb"></div>
</div>
I created a jsfiddle to demonstrate the problem: http://jsfiddle.net/EuHyc/13/
Please note that the divs are hidden using jQuery. Hiding them with CSS was not allowing my content within the hidden div to display properly when revealed. Also, I had to use display:inline-block because float:left does not force the hidden div to appear below it in the layout.
I hope I adequately explained the problem. Thanks in advance for any help! I sincerely appreciate it!