I'm trying to add a new class for the element created by the angular bootstrap UI directive. Neither options="" or ng-class="" managed to add a new class for the element:
<p class="stat" popover-placement="left" popover-title="'Help title" popover="This is the content of the popover" options="{popoverClass: 'popover my-class'}" ng-class="{'my-class': 1==1}"><span class="number">?</span></p>
This adds a new element when clicked from an angular bootstrap template.
Is there a way to customize directive elements with new classes without putting them into a container or changing the template?
Thank you!
Related
I normally create a React component in Rails server rendered pages using the standard react_component helper in react-rails, e.g.
react_component("thing/MyComponent", { company_id: #company.id })
This will create the component at app/javascript/components/thing/MyComponent.js
Now I have a requirement to create the component dynamically as the user interacts with the ERB page by clicking on a link.
How would I create the same React component from a vanilla javascript method embedded on the page?
Here's an outline of what I am after:
<script>
function showThing(id) {
// What code do i need to put here to create a new thing/MyComponent component in the #target div?
// This solution can use jQuery that is available here
}
</script>
<a onClick="showThing(10)">Click</a>
<div id="target"/>
Any help is appreciated. Thanks
I'm developing a software in which all the select elements are using the select2 library.
In the footer there is this code to do that:
$('select').select2();
Now I'm developing a new screen that some selects will use select2 and others don't so I created the class ".noSelect2" for the ones that aren't supposed to have select2.
When I put this code, it only destroys the first select:
$('.noSelect2').select2('destroy')
What can I do to destroy all the elements?
The problem with using a class to target something with Select2 is that Select2, in the past, copied classes to the container elements so you could apply CSS there. As a result, using the class to target the <select> also resulted in targeting the <div> or other container element, and that would trigger an error.
The easy solution is to add select in front of your class selector, so it only targets the <select> elements.
$('select.noSelect2').select2('destroy')
In 4.0.0 there is a known bug with calling select2('anything') in that it isn't consistent when selecting multiple instances. This should be fixed by the next release (4.0.1) of Select2.
I have created a Custom widget in Sitefinity. I want to add a rich Textbox in the widget.
For detail see below images.
Add a rad editor control to your designer .ascx file
<telerik:RadEditor runat="server" ID="RadEditor1" Height="400px" Width="680px" SkinID="MinimalSetOfTools">
</telerik:RadEditor>
You may also need to add telerik web ui refference on the top of the .ascx file in case is not added
<%# Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
if you want to add RadEditor, you needs to perform following steps.
1)In .ascx file add the namespace as shown
<%# Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
2)And replace your textbox with following code.
<telerik:RadEditor runat="server" ID="Mytext" Height="400px" Width="680px" SkinID="MinimalSetOfTools" CssClass="sfTxt">
</telerik:RadEditor>
3)you need to make some changes in the .js file of your widget as well because RadEditor has its own methods to get or set its html. You can use get_html() and set_html() instead of using val() in its .js file
Could you provide me step by step how to create Bootstrap 3 Menu Navigation Bar and Breadcrumb using MVCSiteMap MVC5?
I've got problem when change this code to Bootstrap model
#model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
#using System.Web.Mvc.Html
#using MvcSiteMapProvider.Web.Html.Models
<ul id="menu" class="nav navbar-nav">
#foreach (var node in Model.Nodes)
{
<li>
#Html.DisplayFor(m => node)
#if (node.Children.Any())
{
#Html.DisplayFor(m => node.Children)
}
</li>
}
</ul>
what I want is, there is BootstrapMenuHelperModel that read mvcSiteMapNode transform into navigation menu.
You are likely having issues because you have only solved part of the CSS problem. There are 3 different templates that are used by the Menu and 2 of them are also used by other HTML helpers. For that reason, it might be a good idea to create named templates (as in the example answer below) to create separate templates for each HTML helper (Menu, SiteMapPath, SiteMap, etc). For each level of nodes, the Menu recursively calls the SiteMapNodeListHelper, which might not be producing the HTML that Bootstrap is expecting (depending on which of the nav options you are using).
See this answer for a starting point, and then you can modify the HTML and class attributes from there.
Keep in mind you can also use custom attributes to supply additional data (such as CSS class names) based on the node selected, or you can use the IsCurrentNode and IsInCurrentPath properties of the SiteMapNodeModel to determine if the current node is active, if needed.
Here is a tutorial how to style your Sitemap:
Tutorial
Install Bootstrap and apply the classes to the tutorial:
Nav Bootstrap
In JQuery Mobile, I have a navigation bar like the following:
<div id="nav_bar" data-role="navbar">
<ul>
<li><a>video</a></li>
<li><a>music</a></li>
<li><a>picture</a></li>
</ul>
</div>
Say now I want the nav bar to display "some content" only. This is my code:
$("#nav_bar ul").html("<li><a>some content</a></li>");
But the built-in JQuery Mobile style is not applied to it. How can I do this?
Thanks in advance.
When a page is opened, a script runs to add all the necessary classes. Replacing an item does not rerun the script.
I don't think you can do this without adding in the class manually by either specifying the classes in the text/using a variable or the following:
$("#nav_bar ul").html('<li><a>some content</a></li>').children('li').addClass('class-one class-two');
$("#nav_bar ul").html("<li><a>some content</a></li>");
.html() method destroys ul element and its contents then adds new content.
You should use .append() instead.
$("#nav_bar ul").append("<li><a>some content</a></li>");
If you actually want to replace the original content.
Target the div and use .html() method
$("#nav_bar").html("<ul><li><a>some content</a></li></ul>");