Bit of a weird problem that I'm finding inexplicable - would appreciate any assistance! Unfortunately I can't provide a link to the development site in question, as I don't have permission to release the password, so I'll try to describe the issue in as much detail as possible.
Basically, I have a Superfish menu set up using the standard structure, abridged code as follows:
<ul class="sf-menu top-level">
<li class="level-1"><a class="level-1" href="/menu/">Menu Title</a>
<ul>
<li class="level-2"><a class="level-2" href="/sub-menu/">Sub-Menu Link</a></li>
<li class="level-2"><a class="level-2" href="/sub-menu/">Sub-Menu Link</a></li>
</ul>
</li>
<li class="level-1"><a class="level-1" href="/link/">Link Title</a></li>
<li class="level-1"><a class="level-1" href="/link/">Link Title</a></li>
</ul>
Menu is all working correctly as it should. However, the sfHover class - in addition to being applied to li's with child ul elements - is also being applied to li's WITHOUT child ul on click, which is resulting in styling being applied to these items without sub-menus that I don't want. I've checked the demo version of Superfish, and this anomaly also applies, so it seems to be a 'bug' with the default code, but I can't figure out how to fix it.
http://users.tpg.com.au/j_birch/plugins/superfish/#examples
Basically, I want sfHover (i.e. the class defined in sfDefaults as hoverClass) to be applied only to the items that actually have sub-menus. This is working correctly on hover, but on click applies the class across the board, which looks really weird for a split second before the new page loads in my case, as the styling applied to sfHover is very obviously only designed for items that have some sub-menu content.
I really hope that made sense, and would be incredibly grateful for anyone who can shed some light on this or suggest a workaround, as I'm tearing my hair out!
Related
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
In my project I have a component with three ul lists. Also I have some kind of data array with items, each item has some properties. My aim is to:
Distribute items in basic array into three lists
Make it possible to drag&drop items between lists and accordingly update items data, since each item has a property which tells us which list the item belongs
Instead of copy-pasting a lot of code, I tried to reproduce the incorrect behaviour in jsfiddle by using simple example here:
https://jsfiddle.net/89pL26d2/4/
The thing is, when you drag&drop, you got exactly 2 items dragged, instead of one.
However, when I switched from computed properties to watch, I got the desired behaviour and everything worked just fine.
I figure out which line causes the error: the line when I update item property telling me which list the item should belong to after drag is finished. But I can't figure out why it causes this
I know that it's not the best way to work with HTML directly, but I'm okay with that for now.
Generally, whenever I see an issue in Vue, especially related to lists, where the wrong item is updated or something like that, it comes down to Vue trying to be smart but getting it wrong because it doesn't have the best information. This is almost always solved by using a key.
It is recommended to provide a key with v-for whenever possible,
unless the iterated DOM content is simple, or you are intentionally
relying on the default behavior for performance gains.
Key.
<div id="app">
<div>
<ul id="listA" data-list="A" class="connectedSortable">
<li v-for="item in listAFiltered" :key="item.id" :data-id="item.id">{{ item.title }}</li>
</ul>
<ul id="listB" data-list="B" class="connectedSortable">
<li v-for="item in listBFiltered" :key="item.id" :data-id="item.id">{{ item.title }}</li>
</ul>
</div>
</div>
Adding a key fixes your issue.
I am editing product template on my Bigcommerce website and i am stuck at related products section.
Panel called "SideProductRelated.html" (inside Panels directory) is in charge for that section but the items themselves are being pulled by "%%SNIPPET_SideProductsRelated%%".
Aka, the code looks like this:
<div class="Block SideRelatedProducts Moveable Panel" style="display:%%GLOBAL_HideRelatedProductsPanel%%" id="SideProductRelated">
<h2>%%LNG_RelatedProducts%%</h2>
<div class="BlockContent">
<ul class="ProductList">
%%SNIPPET_SideProductsRelated%% <-- this is calling the items
</ul>
</div>
</div>
But, i searched and searched, and i cant find that snippet anywhere...
Anybody knows where that little dude hidden himself?
Thanks!
Even though the Panel SideProductRelated calls for %%SNIPPET_SideProductsRelated%%, you are looking for the SideRelatedProducts snippet which would be found in Snippets/SideRelatedProducts.html.
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
One of my most common operations in textmate is to encapsulate a block of text in a <div>.
How can i create a keyboard shortcut for this? I do not really feel like learning anything complex, so simple solutions would work best - thanks!
Maybe I didn't understand your question, but what about the "Wrap Selection in Open/Close Tag" (Ctl-Shift-W) from the HTML bundle? Having a block of text selected then overtyping the default <p> with <div> does the work. See http://manual.macromates.com/en/bundles#html
But the following snippet :
${0:${TM_SELECTED_TEXT/\A(.)<\/div>\z|./(?1:$1:$0<\/div>)/m}}
does the same thing without even typing the tag ...
HTH
This might slightly off topic, but you might be interested in using Zen coding for Textmate, which allows you produce lots of HTML with a few key strokes.
You write:
div#page>div.logo+ul#navigation>li*5>a
You get:
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
(disclaimer: the example code is from the above mentioned site)
Besides that it adds features for easy navigation of editable parts of HTML, for easy wrapping of content using the same syntax as above. This last past would allow you to wrap any text (content) in whatever HTML you would like.
Happy coding :)