I am trying to make a Side Nav Bar using Materialize css, if anyone can guide me, I have try to follow the documentation in the website but I couldn't manage to do it, thank you .
//html code
<ul id="slide-out" class="side-nav full">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
</ul>
</ul>
//js code
$(document).ready(function(){
$(".button-collapse").sideNav();
$('.collapsible').collapsible();
});
Note:make sure you have loaded the required js files
Related
I have a .vue file where I want to use inline styles
<img src="~static/img/info/production/pic4.jpg" class="t22" />
First text
<div class="hr t24"></div>
<h2 class="t25">Second text</h2>
<ul class="services">
<li :style="{ backgroundImage: `url('~static/img/info/production/pic5.jpg')` }" class="sq">
<div class="n">Third text</div>
</li>
</ul>
The image using tag <img> is displayed correctly, but background-image in tag <li> is not.
How do I specify the file path correctly?
EDIT: really did not expect to have to host this one but here it is: https://codesandbox.io/s/so-nuxt-background-image-bf0ly?file=/pages/index.vue
Exact structure, same (ESlinted) template, working solution. Cannot help beyond this point.
I'm not sure that it is the universal solution, but this one is working on my side
<li :style="{ backgroundImage: `url(${require('#/static/japan.jpg')})` }">
The require seems to be required here, not sure why but it works. More in the docs: https://nuxtjs.org/docs/2.x/directory-structure/assets/#images
I'm attempting to create a custom widget in Sitefinity 11. The goal is to display tabs on the page, with panels of content below each clickable tab. I am using bootstrap to accomplish this which is simple enough.
My hope was to be able to add a Sitefinity placeholder to each tab, which would allow editors to drag and drop a widget, such as a content block to that tab. But it seems that when I try to do this, the placeholder area never displays in the CMS, like it would if I had added a placeholder to a custom template.
Is this possible?
Here is a short code example:
<div class="container mt-3">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li id="tab1" class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel1">#Model.Tab1Name</a>
</li>
<li id="tab2" class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel2">#Model.Tab2Name</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="panel1" class="container tab-pane active">
#Html.SfPlaceHolder("Panel1")
<p>here is text</p>
</div>
<div id="panel2" class="container tab-pane fade">
#Html.SfPlaceHolder("Panel2")
</div>
</div>
Appreciate any help.
You cannot put a SfPlaceHolder on a widget, it must be in your layout file (page template).
What you can do is to create a custom designer for your widget and put one or more content blocks in it, e.g. one for each tab you want to have.
Then in the view, you simply render the content.
https://www.progress.com/documentation/sitefinity-cms/create-custom-designer-views-mvc
EDIT: To achieve this you need:
Controllers / MyRichTextController.cs
public string RichText
{
get;
set;
}
Views / MyRichText / DesignerView.Default.cshtml
<div class="form-group">
<sf-html-field class="kendo-content-block"
sf-images-settings="#SettingsHelpers.GetMediaSettings("Image")"
sf-videos-settings="#SettingsHelpers.GetMediaSettings("Video")"
sf-documents-settings="#SettingsHelpers.GetMediaSettings("Document")"
sf-model="properties.RichText.PropertyValue">
</sf-html-field>
</div>
Views / MyRichText / DesignerView.Default.json
{
"priority": 1,
"components": [ "sf-html-field" ]
}
Another alternative could be to create a Layout widget with the above html structure and that will allow the user to put content blocks inside the areas of the layout.
You can just copy any of the existing layout widgets and work on that. Note, that with this approach you would probably have some css rules that hide all but the first tab panel, so you will need to have some additional css rules just for the backend in order to show all the panels so that users can drag widgets to them. That would make this approach a little bit more trickier.
In my front end I have a simple index.html that I have placed a ng-view tag in it as follows:
<body>
<div data-ng-controller="MainController">
<ng-view> <ng-view/>
</div>
My routes.js file is something like this:
(function() {
angular.module('mainApp')
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when("/", {
templateUrl: "/startbootstrap-landing-page/home.html"
});
$routeProvider.when("/products", {
templateUrl: "/views/products.html"
});
$routeProvider.otherwise({ redirectTo: '/' });
}]);
})();
When I enter "mywebsite.com/index.html#/" based on the routing in routes.js it will load "/startbootstrap-landing-page/home.html" in the div tag where ng-view is placed. So everything works perfectly till here. But the problem is I have used local addressing/linking tags inside the home.html that they stop working once I load the home.html partial view inside the ng-view div tag. For example I have used something like this in my home.html partial view:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
So when I click on for example "Contact" it has to jump to the bottom of my designed page where I have used a tag such as this:
<a name="contact"></a>
.
.
.
But it does not.
The home.html page works perfectly with its local # addressing/linking when used as a standalone html file with html and body tags but its local linking functionality wont work anymore when used as a partial view loaded inside the ng-view tag. Any ideas as to why this happens? Thanks.
I think angular is taking control of the # based urls... have you tried $anchorScroll?
How to handle anchor hash linking in AngularJS
Regards
I would like to change the active pill/tab on document load. I know you can set the active pill like I have below but for other reasons I want to change it after document load. I have tried various bits of JS but nothing seems to work. Here's the HTML and JS (I have also tried replacing data-toggle="pill" with data-toggle="tab" below and still doesn't work).
<div>
<ul class="nav nav-pills pillstyle">
<li class="active tabstyle"><a data-toggle="pill" href="#apple">Apple</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#banana">Banana</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#pear">Pear</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#orange" >Orange</a></li>
</ul>
</div> <!-- nav pills close -->
<div class="tab-content">
<div id="apple" class="tab-pane fade in active"> `
.... content of tabs.
JS
$(document).ready(function(){
$('#banana').tab('show');
});
or
$(document).ready(function(){
$('#banana').pill('show');
});
You just need to change your jQuery selector to address the a element instead of the tab-pane div.
$(document).ready(function(){
$('a[href="#banana"]').tab('show');
});
If you need, you can find more detailed description about bootstrap tabs in the official documentation.
#Stu Here you go.
HTML:
Assign an ID myTab to UL element.
<ul class="nav nav-pills pillstyle" id="myTab">
JS:
$(function () {
$('#myTab a[href="#banana"]').tab('show');
});
Also refer to Bootstrap documentation on selecting different elements on load here. It will give you better understanding.
http://getbootstrap.com/2.3.2/javascript.html#tabs
Working demo: https://jsfiddle.net/tf9k9j27/
Note: Just to answer your trial and error.
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling. (From bootstrap docs. read more to get better clarity)
I have made a sidenav and its collapse button is in the navbar using the materialize framework. The collapse-button starts disappering if the screen resolution is more than 993px. This is the code
<div class="nav-wrapper">
<ul id="slide-out" class="side-nav">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
</ul>
<i class="mdi-navigation-menu"></i>
<img src="Logo.png" width="120">
<ul id="nav-mobile" class="right">
<li>
<img src="work/marker-5.png">Bangkok
</li>
</ul>
</div>
</nav>
My script is this
$(".button-collapse").sideNav({
menuWidth: 350,
closeOnClick: true
});
Is this due to any media query in the materialize framework?
If you remove the button-collapse class then the menu will remain visible on wider screens.
That it's because the materialize only use this button for phones and tablets. If you want to use it for large devise you need to add the following class to your menu item like they said in their documentation
Fullscreen HTML Structure
If you want the menu to be accessible on all screensizes you just have to add a simple helper class show-on-large to the .button-collapse
When you do it, the code will remain in this way.
<i class="mdi-navigation-menu show-on-large"></i>
also i actually change the class from "mdi-navigation-menu" to "material-icons" and use the menu icon. In this case the code is going to look like this:
<i class="material-icons show-on-large">menu</i>
This is the link of the Materialize Documentation
Hope this help you! :) In my personal opinion materializeCSS need more specific documentation for certain things.
In you materialize.css file , change the following code,
#media only screen and (min-width: 993px) {
nav a.button-collapse {
display: none;
}
}
To
#media only screen and (min-width: 993px) {
nav a.button-collapse {
display: block;
}
}