As the topic. I know I can use it and it works but is it good way to make my markup and css shorter? Can I use this?:
nav > ul > a
instead of this :
nav > ul > li > a
Look at the specification:
For UL:
Content model: Zero or more li and script-supporting (script, template) elements.
For OL
Content model: Zero or more li and script-supporting (script, template) elements.
So: No.
Related
In a template I have two connected lists, one of which is initially empty. The user has to choose up to three options from the left list, add them to the right list, order them (according to his/her priorities) and then send it back.
it looks like:
<ul id="sortable1" class="connectedSortable">
<li value="1">Item A</li>
<li value="2">Item B</li>
<li value="3">Item C</li>
<li value="4">Item D</li>
<li value="5">Item E</li>
<li value="6">Item F</li>
<li value="7">Item G</li>
</ul>
</div>
<ul id="sortable2" class="connectedSortable">
<!--here goes the initially empty list-->
</ul>
and in {% scripts %} block:
<script>
$( function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
} );
</script>
in models.py I have a field to store the selected info:
preferences = CommaSeparatedIntegerField()
The problem is how to POST info from the updated ul (sortable2) back to the database? I can add a hidden field preferences to the page and then fill it using jQuery, but it seems like an ugly solution. What is the right one?
If you want to POST the updated ul (sortable2) back to the database, then one of the possible solution is that the ul (sortable2) should be inside a form whose data you can submit using POST method.
Now when any of the li element is moved from the ul (sortable1) to ul(sortable2), then an input type element is also inserted in the ul (sortable2) along with the list element, where "value" attribute of the input will have to be the same as the li element in the ul (sortable1) was. Also the type of this input element will be hidden.
So now when you'll submit this form using a submit button, you'll get all the data back in your views and hence can make changes to your database accordingly.
I was wondering why the navigation menu in team sites looks different on different pages/sub-sites.
To give you an example:
How it should look site-wide:
It seems that this menu is only appearing on https://*.*******.*/_layouts/15/settings.aspx
How the main page appears:
Is there any way I could fix this so that the menu in the first image is displayed site-wide? The menu in the first image is only view-able in some sub-sites but not the main page for example.
Also is it possible to remove the 'National Statistics Office' (site name) from the navigation bar?
Code in seattle masterpage (html)
<style type="text/css">
.ms-core-listMenu-horizontalBox li.static > a{
display: none !important;
}
.ms-core-listMenu-horizontalBox li.static > ul a{
display: block !important;
}
.menu-item-text
{
display: none;
}
.additional-background ms-navedit-flyoutArrow
{
display: none;
}
</style>
You can inherit the top level navigation from the parent site if you go to site settings > Navigation > Global Navigation: use navigation items from parent site (first option, badly translated from my mother language) :)
To hide the site title, yes this is possible but through using css. Use your browser developer tools (F12), try to find a class or an identifier and hide it through css in your master page. It should look something like this:
<style type="text/css">
.ms-core-listMenu-horizontalBox li.static > a{
display: none !important;
}
.ms-core-listMenu-horizontalBox li.static > ul a{
display: block !important;
}
</style>
I'm trying to change the default color for my title, which is white at the moment.
<nav class = "top-bar" data-topbar>
<ul class = "title-area">
<li class = "name">
<h1><%= link_to "CF logo", root_path, class: "home"%></h1>
</li>
</ul>
</nav>
I tried calling
.name h1{
color:red;
}
and
.title-area .name h1{
color:red;
}
even
.home{
font-size: 1.5em;
font-color: red;
}
but none of them works. What can I do?
If your title is inside of an anchor tag <a> - you'll want something like this:
.top-bar .name a { color: #9dcf81; }
Inside Chrome, after you inspect your element, look for the plus symbol once you highlight your title with a mouse click. Consider using the !important attribute if the color doesn't stick.
p.s. - Please provide a link with a URL Shortening service (if your concerned about privacy) to your site.
Whether or not a CSS rule is used is dependent on the selectors specificity. See the MDN for details on how specificity for a CSS selector is calculated.
If you want to see which CSS statement is overriding your one (presumably one of the styles specified in the Foundation CSS library that you are using), then I would recommend a tool like firebug or chrome developer tools which allow you to inspect an element and see which rules are being taken into account and which are being overridden by more specific selectors.
You can also use important! inside a selector to override the specificity, however use this with caution. So for example:-
.name h1 {
color:red !important;
}
I would like to find the best solution for filtering a large data set in Ember as quickly and as smoothly as possible for the user.
Here is an example that does lock up briefly search on a list of 2500 names. For example try do a search starting with 'A'.
http://jsbin.com/ulukep/26/edit
(Bonus points if the solution uses https://github.com/emberjs/list-view)
The thing that is making it feel slow is not search/filter but actually rendering the results. Ember list view is a good solution, it's pretty easy to add it to your example.
Add the ember-list-view library and the required css:
<script src="http://builds.emberjs.com/list-view/list-view-latest.js"></script>
<style>
.ember-list-view {
overflow: auto;
position: relative;
}
.ember-list-item-view {
position: absolute;
}
</style>
Replace handlebars {{each}} block in your template with ember-list-view, still using view.filteredList as the content:
{{#collection Ember.ListView contentBinding="view.filteredList" height=100 rowHeight=20 width=500}}
{{name}}
{{/collection}}
Thats it. Now search starting with 'A' returns lightning fast, nothing locks up. Try it here: http://jsbin.com/ulukep/27
Foundation default tooltips look like this:
I'd like to get rid of the small top triangle on parts of my website.
To get rid of it everywhere you just have to change the $tooltip-pip-size variable value to 0 from the foundation_and_overrides.scss file (also called _settings.scss if you're not using the foundation gem with rails).
Is it possible to define a custom version of the foundation tooltip without a pip?
EDIT
The difficulty here is that when I write something like
<span data-tooltip class="has-tip tip-bottom" title="Here are my tooltip contents!">extended information</span>
Foundation javascript generates a specific element at the end of the document containing the actual tooltip:
<span data-selector="tooltip8vxaud6lxr" class="tooltip tip-bottom" style="visibility: visible; display: none; top: 78px; bottom: auto; left: 50px; right: auto; width: auto;">Here are my tooltip contents!<span class="nub"></span></span>
You see that the tip-bottom class I added to the first span got copied to the second but that is only the case for foundation specific classes like tip-left, tip-right and so on.
What I would like to do is being able to add a "no-pip" class to the first span (the only one I actually write) and be able to alter the look of the generated span containing a "nub" element.
<span data-tooltip class="has-tip tip-bottom no-pip" title="Here are my tooltip contents!">extended information</span>
Just hide it by setting display property to none
.tooltip > .nub {
display: none;
}
that little triangle is just span with class nub all what you need to do is to remove the css border from it then you 'll have your tool tip in the same location as normal without the little triangle
With foundation version 5 you can customize the tooltip template.
Just remove the <span class="nub"></span>:
$(document).foundation({
tooltip: {
tip_template : function (selector, content) {
return '<span data-selector="' + selector + '" class="'
+ Foundation.libs.tooltip.settings.tooltip_class.substring(1)
+ '">' + content + '<span class="nub"></span></span>';
}
}
});