Is there a way to create and image slide like this http://viavoxproduction.com/ with bootstrap? If so I don't even know where to start.
Bootstrap javascript comes with a number of pre-created animations you can use. It might not make what you are looking to do perfectly, but it is at least a place to start.
Specifically, the bootstrap carousel has recently been updated to be much better.
http://getbootstrap.com/javascript/#carousel
Also, make sure you load your JS libraries, first with jquery (which in example below I pull from google's AJAX library which hosts these online), then boostrap js (min version for speed), then your custom code. For example at the bottom of your html page add:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
Good Luck!
Related
am pre rendering my pages via angular universal and it's all working fine. Except that when the page is initially loaded, it appears all broken for a couple of seconds before the styles are loaded.
On checking the page source, i could see multiple <style ng-transition> tags in the <head> which i assume is added by the pre rendering engine. Am not sure why it does not appear properly. Any leads?
Could not find any documentation in angular for the above mentioned style tags or could not find any resources online.
Thanks
I want to know how to use Semantic-UI to codeigniter 3.x as frontend framework.
I want to use LESS and not css. thanks
First, it is important to understand that LESS is a CSS pre-compiler that extends the CSS language with features that allows creation of CSS that is more maintainable, themeable and extendable. But ultimately it creates CSS files that are used exactly the same as any other CSS file in a website.
In CodeIgniter you use Semantic-UI created assets the same way as any other CSS (or javascript) files by using a <link> tag.
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>
The CSS classes are used in "view" files exactly the same way any other CSS defined class. For instance, the following would put a button styled by Semantic-UI into a CodeIgniter "view" file.
<button class="ui button">Follow</button>
So, the short answer to your question is that you use Semantic-UI in CodeIgniter the same way any other frontend framework that produces CSS and Javascript.
How to use the tools required to customize Semantic-UI is way beyond the scope of what is a "good" question on Stackoverflow.
If you want to customize and build your own version of the UI, you have a steep learning curve ahead. You can start your learning on Semantic-UI's Getting Started page and on the Learn Semantic website.
I have done Semantic UI integration on my CodeIgniter based application starter: https://github.com/ivantcholakov/starter-public-edition-4
For compilation of your own visual themes you need to install locally on your development machine node.js, less.js, postcss/cssnano, they should be able to start from command line.
See the configuration file platform/common/config/less_compile.php there you can define by example your own visual theme. Also, have a look at the already created themes, you will see how to add your common Semantic UI customizations and your theme-specific styles.
add css link in your header and js in your footer
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css">
<script type="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
I wanna use the www.modernizr.com project for my site and run into a little question.
A comment in the very beginning of the modernizr.js tells me:
Modernizr tests which native CSS3 and HTML5 features are available in
the current UA and makes the results available to you in two ways:
as properties on a global Modernizr object, and as classes on the
html element. This information allows you to progressively enhance
your pages with a granular level of control over the experience.
So what means "as classes on the html element" ?
I tested it and just use the header element (which is HTML5) in my document and manipulate it via css.
After that i opened it with IE6 and ......YEA it shows correct!
So:
I thought header is and "element" of html not a class of html!? So is this comment in the modenizr.js correct?
Hope you understand my little (or maybe hard to understand) question :)
Regards
What modernizr does is, depending on what your browser support, add classes to the <html> element to let you know (mostly via CSS or even JS) what exactly seems to work properly.
That means, that if my browser doesn't support javascript, I'll get something like this if I inspect the DOM (using, for example, Chrome's profiler)
<html class="no-js ...">...</html>
Hope this helps.
While we are in dev and doing daily builds, we would like to display the current version number on the footer of the pages in our MVC3 app. Makes it easier for the QA to log bugs.
I'm not sure how to do this. The footer is in the shared _layout.cshtml page.
I would like to use (Assembly.GetExecutingAssembly().GetName().Version.ToString()) to display it. I thought about using ViewData but still not sure how to format the HTML to get it to display.
Since you just need it in dev, you could simply do
<footer>
#System.Reflection.Assembly.GetExecutingAssembly().GetName().Version
</footer>
This used to work back in the day (i think).
Now it indeed does not, so use this instead (from the answer linked in the comment):
#typeof(YourApplicationNamespace.MvcApplication).Assembly.GetName().Version
I am using the code below which works fine for me:
<footer>
#ViewContext.Controller.GetType().Assembly.GetName().Version
<footer>
To change the version, you can change this line in the AssemblyInfo.cs file of your project:
[assembly: AssemblyVersion("1.0.0.0")]
I am using the latest SyntaxHighlighter within my app and for some reason the toolbars do not show in IE, Firefox or Chrome. The code highlights without issue, but I want to have toolbars. What makes things worse is that the toolbar demo on the official website is not working either.
Am I missing something obvious? Below are the code nuggets.
<script src="Scripts/syntaxhighlighter/scripts/shBrushCSharp.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="Scripts/syntaxhighlighter/styles/shCoreDefault.css" />
<script type="text/javascript">
// Highlight code
SyntaxHighlighter.all();
</script>
<pre class="brush: csharp; ruler: true; title: 'Test'; toolbar: true;">
public static bool HelloWorld()
{
// Return
return false;
}
</pre>
I've been trying to figure this one out myself. I won't claim to be 100% correct here, but from what I can tell, this is the answer:
Toolbar was changed in update from version 2 to version 3.
Toolbar no longer includes the icons and whatnot.
The default toolbar is now the simple '?'.
This pretty much sucks, if it's true. The pop-up toolbar w/ icons is one of the things that made me choose SH over the other options.
This is what I'm guessing comparing the included CSS files in the latest package to the CSS available on sites that have a version with the "proper" toolbar enabled.
Here's a link to one I was snooping in: ramymostafa.com
While I would like the toolbar myself, it seems that one of the toolbars features - copy & paste - have been included without the need for a toolbar item:
If you double click anywhere on the code, the entire code view is replaces with a pre-selected view from which users can copy with a simple Ctrl/Cmd-C. Clicking anywhere else returns the view to the original state.
http://alexgorbatchev.com/SyntaxHighlighter/whatsnew.html#copytoclipboard
I would still like the pop out feature, but less buttons is a good thing, I guess?
the same problem here. looks like there is no toolbar in v3.
i use v2 again: http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_2.1.382
if you copy the css and js around, don't forget to include the images in folder styles
The toolbar can be easily be showing simply go to the plugin configuration, on the Highlighter Version set to VERSION 2X. This way the toolbar will be shown again!
I confirm that in Version 3 the toolbar does not show.