Avoid Navbar in Bootstrap from collapsing

/in /by

Create a simple Bootstrap Navbar without collapsing in cell phones and tablet devices.

<!-- Simple Bootstrap Navbar without collapsing -->
<header class="navbar navbar-default container-fluid">
    <ul class="nav navbar-nav navbar-left">
        <li><a class="navbar-brand">My App</a></li>
        <li><a>Tasks</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a>12/12/99</a></li>
        <li><a href="#">@</a></li>
    </ul>
</header>

You just need to add this code to your style.css

/* Avoid Navbar from collapsing (Bootstrap override) */
.navbar-nav>li, .navbar-nav {
    float: left !important;
}

.navbar-right {
    float: right !important;
}

See a real example:

Unhide automatically one topic per week in Moodle

/in /by

automatic-unhide-moodle

We can hide and unhide manually topics in Moodle but we cannot do it automatically, maybe it will be developed in next versions but till then you can do it by yourself easily. Using Weekly format with Bootstrap default theme you can get “Current Week Class” (current), so the only thing you have to do it’s just hide every week after that one.

:not(.editing) .weeks>li.current ~ li {
    display: none;
}

.editing .weeks>li.current ~ li {
    display: inline;
}

It’s working since Moodle 2.7.1 up to 2.9.1+.

See a real example:

Furthermore, if you want to have different students in different weeks in the same course (e.g. John in the second week and Jennifer in the last one) you can use “Self enrolment” to make courses start depending on when the students want to start the course and “Cohort” to avoid “Self enrolment” access to some courses.

Do not qualify ID rules with tag names or classes

/in /by

css

If a rule has an ID selector as its key selector, don’t add the tag name to the rule.

Since IDs are unique, adding a tag name would slow down the matching process needlessly.

BAD

/* CSS */
button#backButton {…}

BAD

/* CSS */
.menu-left#newMenuIcon {…}

GOOD

/* CSS */
#backButton {…}

GOOD

/* CSS */
#newMenuIcon {…}

 

Blink and Webkit cannot scale SVG

/in , /by

svg

Chrome cannot scale SVG vertically or horizontally.

For this example we will use:

  • Two HTML Tags for images, one without size and the other with a height equal to double width
  • A div container with a CSS background-image
<!-- HTML -->
<img id="a" src="http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg">

<img src="http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg"width="50px" height="100px">

<div></div>
/* CSS */
#a {
    width: 50px;
    height: 100px;
}

div {
    width: 50px;
    height: 100px;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg);
    background-size: 50px 100px;
}

If you try the same code in Firefox it will work for the 3 cases, you will see a vertical strech for this example with height equal to double width. So, if you want to keep the same behaviour in all browsers, you should change size proportionally. Edit the SVG itself if you wish some width and/or height deformations.

See a real example: