Can't get a styled select form element to display correctly with the AspnetBoilerplate BSB Theme and there is no examples of one being used in the code.
I do see in the stylesheet the .bootstrap-select styles. Does someone have an example of how to use this?
Create your html with the .selectpicker class.
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
Options can be passed via data attributes or JavaScript.
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
If you have not included libraries then include them all.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/i18n/defaults-*.min.js"></script>
Related
I'm new to kendo ui frame work but I cant make it to work, I only want to used the kendo multiselect widget and it's giving 'extend error and multiselect is not a function'.
here is the code that i include.
<link href="~/Content/plugins/kendo/css/kendo.common-bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/plugins/kendo/css/kendo.bootstrap.min.css" rel="stylesheet" />
<script src="~/Content/plugins/kendo/js/kendo.core.min.js"></script>
<script src="~/Content/plugins/kendo/js/kendo.multiselect.min.js"></script>
using kendo.ui.core.min.js instead of core and multiselect fix my problem but I don't really need the other widget so I was avoiding using it.
The following page lists the required files for each widget:
http://docs.telerik.com/kendo-ui/intro/supporting/scripts-editors
Keep in mind that the file order matters.
What I want to do is get the id from a button on my view:
<button type="submit" id="stuff">
to my controller, so I can change the style with:
echo '<style type="text/css">
#stuff{
background-color: #11eb00;
}
</style>';
Is this possible in CodeIgniter, or am I doing this completely wrong?
You shouldn't need to use PHP to output any css. This would be a general misuse of the intended system.
You can just put the css style as you defined it in the html, or ideally in its own css file that is properly linked in the header.
<link rel="stylesheet" type="text/css" href="/path-to-your-stylesheet.css">
Example CSS
#wrap{margin:20px}
Code prettify wraps the whole line in .com
<span class="com">#wrap{margin:20px}</span>
Somebody has a similar issue here.
Where someone answers "Are you loading lang-css.js?".
Here's what I'm loading in the footer.
<script src="/js/google-code-prettify/lang-css.js"></script>
<script src="/js/google-code-prettify/prettify.js"></script>
I can see both of them with web inspector. I tried changing the order and loading them from the header. I'm using the latest version.
All help is greatly appreciated :)
Thanks!
The order you link to the javascript files matters. You need to call the base code (prettify.js) first followed by the css specific code (lang-css.js). You can place the script tags either in the head section or at the end of the document... both work but placing at the end of the document will speed up the page load.
<script src="/js/google-code-prettify/prettify.js"></script>
<script src="/js/google-code-prettify/lang-css.js"></script>
You will also need to ensure that you are linking the stylesheet in the head of your document.
<link rel="stylesheet" type="text/css" href="/css/prettify.css">
You also need to add the correct classes your pre tag(s). The syntax-highlighting functions contained in lang-css.js will not be called without adding the class "lang-css" to the <pre> tag.
<pre class="prettyprint lang-css linenums">
Finally, make sure you call the "prettyPrint()" function on page load.
<body onload="prettyPrint()">
So in all my failed attempts to get jQueryUI working, I have tried this example here after downloading a theme from the jQueryUI site.
and here is my code looking at that example in the link above in my asp.net mvc page.
<link type="text/css" href="<%= Url.Content("~/Scripts/jquery-ui/css/smoothness/jquery-ui-1.8.17.custom.css")%>" rel="stylesheet" />
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-ui/js/jquery-1.7.1.min.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-ui/js/jquery-ui-1.8.17.custom.min.js")%>"></script>
<script>
$('#dialog_link').click(function(){
$('#Dialog').dialog('open');
return false;
});
</script>
<p id="dialog_link">Open Dialog</p>
<div id="Dialog" title="Dialog title!">
This content shown within dialog...
</div>
After hitting F5 I would have expected to see a clickable text which when clicked would bring up a modal dialog with a [x] button to close it and get back to the main window. However what I get to see is this on page load,
where the text 'open dialog' does not respond to click events and the supposed "modal dialog" is already visible in the form of a plain string and without any formatting. So where did all the magic of jQueryUI go? Something wrong in my linking correct scripts?
Totally lost. Please help..
Edit
This exact same code works in pure html mode in a different file. when I copy this code into my asp.net mvc page within the content tags I get a javascript error at a non-descript line!!
Just take the 'open' out of your $('#Dialog').dialog('open'); and you are good to go.
Edit: Added this jsFiddle with your code as an example:
http://jsfiddle.net/DoomHamster/LhJsL/1/
Also, you don't need 'return false' when clicking an element with no default click event.
EDIT: From your comment below I suspect that you are having issues with loading jQuery and jQueryUI in the first place. Try replacing your script and css links with the following as a test to eliminate path issues:
<link type="text/css" rel="Stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
Try this
$(function()
{
$('#dialog_link').click(function(){
$('#Dialog').dialog();
return false;
});
})
I just followed the below link to set up syntaxhighlighter on my blog:
http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html
But as given in this link, i tried to use the brush plain but i am getting the error as can't find brush for : plain
Any suggestions?
I use to use GIT hub to do this work in pretty much 8 simple steps,
1) Browse to https://gist.github.com
2) Add a Gist Description (optional)
3) Add a file name with an extension (extension will be used to add syntax highlighting)
4) Add your code snippet which need to be added to your blog post
5) Click “Create Public Gist” button at the bottom
6) Click on the “embed” link and copy the script generated
This is all from Gist side. Now to Blogger,
Paste the script where you need to add the code snippet
Make sure to select the option “Interpret typed HTML” under Post Options -> Compose Settings
I found this steps in this blogspot
Remember how you added the files at the top of the HTML of your page for the essential SyntaxHighlighter CSS files and JavaScript brush files? The website tutorial you found does not add the brush plain to its list of brushes. All you have to do is add this (http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPlain.js) JavaScript file under the other brush files that look like this:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css' />
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css' />
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript' />
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript' />
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript' />
<script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushXml.js' />
Basically, just add this under your other brushes:
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript' />