I'm working with bootstrap, and trying to get the right classes on various elements for appropriate layout on various devices. It seems for many, I want something like control-label col-md-2. So I can go through a couple dozen elements, and change them all, but then - what if I realize I really want col-md-9? I then have to go through each element and change the classes! So what I'm trying to do is:
<label class="label-class"/>
with
.label-class {
control-label col-md-9
}
Is this possible? Every answer I've found online about combining classes relates to a different type of question. Alternately, if I'm going about this all wrong, I'm willing to learn a better way to test various layouts :)
Edit:
After some more searching, I found Can a CSS class inherit one or more other classes? - seems like maybe the answer is 'not without additional utilities' sadly.
You can achieve it, but not with CSS. You could use LESS files, and with the proper medium to parse from LESS to CSS file (and "casually" Bootstrap core is written in LESS, ;D). The specification you're looking for is: http://lesscss.org/features/#mixins-parametric-feature
Bootstrap allows you download the LESS files of its code to modifications, and then, you may use a JS compiler as said in lesscss.org/usage/#using-less-in-the-browser
If you're using PHP, there are some libraries to compile it before send it to the browser, the latest is going well with Bootstrap 3.0 and that I'm using is: http://leafo.net/lessphp/
Hope this helps, XD
If you don't want to use .less and a compiler, you could use jQuery to add classes onready:
$(document).ready(function() {
$('.label-class').addClass('control-label col-md-9');
})
You can make a whole set of these in an easy to edit function mixing up bootstrap classes(btn-1 & btn-2) add custom classes (btn-3) and even inline css (btn-4 - but don't overdo this one - it gets messy fast).
$(document).ready(function() {
$('.btn-1').addClass('btn btn-danger btn-xl');
$('.btn-2').addClass('btn btn-warning btn-xl');
$('.btn-3').addClass('btn btn-success btn-sm custom-class-1 custom-class-2');
$('.btn-4').addClass('btn btn-warning btn-xl').css('text-decoration','underline');
#Chococroc is right. Here are simple steps:
Step1: Write style.less
.label-class {
.control-label;
.col-md-9;
}
Step2: Add less.js
<link rel="stylesheet/less" href="style.less" type="text/css" />
<script src="script/less-1.3.3.min.js"></script>
Remember, js will call after including the less in page.
More information about less rules are available at: http://lesscss.org/
Related
so I have a long case study, so many images it takes forever to load. So one of the steps I'm taking is hiding all images in a section that are more than 3. I'm doing this in a simple way with show and hide jQuery, and manually adding the target ID to the div I want to show. My question I'm trying to figure out is how I can use this code to target every section, instead of one, since I can only use the target ID once. I don't want to simple copy and paste the code and change the target DIV name, as that is going to be very redundant and certainly the most amateur approach. My pen is located here:
<button class="Show">Show</button>
<button class="Hide">Hide</button>
<button class="toggle">Show & Hide</button>
<div id="target"></div>
body {padding:30px;}
#target { display:none;}
.Hide{ display:none;}
$('.Show').click(function() {
$('#target').show(200);
$('.Show').hide(0);
$('.Hide').show(0);
});
$('.Hide').click(function() {
$('#target').hide(500);
$('.Show').show(0);
$('.Hide').hide(0);
});
$('.toggle').click(function() {
$('#target').toggle('slow');
});
Thank you in advance!
I don't understand what you mean and what you want to do, but you can use it this way instead of a few different functions.
As far as I understand you want to use css classes as well?
.hide{display:none}
$("button").click(function() {
$("button").removeClass("hide");
$(this).addClass("hide")
})
I tried to be helpful in a very simple way for you, I hope it will be useful.
Good Day,
I am working through freecodecamp and am currently grappling with the quote generator problem. I have run into a bit of an issue with getting functionality for me scripting a change when clicking the button. Basically I have my own code which I'll post below, but also trying to simply copy and paste the code from them I am still unable to get functionality in my button.
I am sure it's an honest and easy mistake but hopefully that should make it all the easier to resolve :) Let me know if you have any questions and I genuinely appreciate it!
(please note I simply want to change the display message upon clicking the button)
<script>
$(document).ready(function(){
$("#getMessage").on("click", function(){
$(".message").html("New Message");
});
});
</script>
<div id="wrapper">
<button type="button" id = "getMessage" class = "btn btn- primary">Generate New Quote</button>
</div>
<div class= "text-center">
<div class = "message">
Sample
</div>
</div>
As the others have mentioned, you are most likely not adding jQuery, yet you are attempting to use it ($). To confirm this, check your console. It's probably filled with Uncaught ReferenceError: $ is not defined.
Assuming you're using CodePen as the challenege says in the objective, you can very quickly and easily include jQuery. To do so, just click the settings cog next to JS, use the Quick-add drop down, and select jQuery.
If you wish to include it manually (as you will most likely have to in future development) I recommend Drefetr's answer.
There do not appear to be any major issues with the code (with respect to the logic, the editor may have rendered your formatting a little nastily).
Can you confirm that you have included the jQuery libraries within the header of your HTML document? e.g.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
For more information: https://developers.google.com/speed/libraries/#jquery
I know bootstrap, semanticUI, foundation, etc.
My new project is a part of an old website. and we want to start implementing the new features with a normal css framework.
So, how do to implement a partial view?
lets say a with a framework css without rebuilding all the website from scratch ?
<body> <!-- regular old website css -->
<div class="old"></div>
<div class="everything-in-here-using-css-framework"></div>
</body>
is that possible? which framework support this ?
i don't fully understand but i think you can follow these steps:
make sure there are no matching conflicting class names with your framework (in foundation for example: columns, small-12, etc...)
include the framework's CSS file (you can link to a cdn just for testing)
start writing some new html elements and see how it goes.
if crashes occure (probably they will) start to change the old elements name - for instace add "old-" to every class you have.
another approach could be to move the existing project to SASS, then wrap the old CSS in a container like this
.old {
header { ... }
div { ... }
}
and put all the framework styles in something like this:
.new {
...
}
I think we'd be more helpful if you'll give more details.
is there a way to add jquery ui classes into my own css file per element, IE:
input {
ui-corner-all /* <- JQuery UI class */
}
as opposed to adding the class to every input, IE:
<input name="myinput" type="text" class="ui-corner-all" value="" />
You can check out LESS, here is a very similar question on SO Can a CSS class inherit one or more other classes?
LESS is an extension for CSS a great level of abstraction with variables, nested rules, function, operations, etc
You can use the jQuery .addClass method to add a class to elements at any time, including page load, such as:
$(function() {
$(input).addClass('ui-corner-all');
});
This would add the ui-corner-all class to every input element in the html when the page loads. If you would like to select only certain elements on the page, use a more specific selection, such as:
$(function() {
$('#myInput').addClass('ui-corner-all');
});
This will add the ui-corner-all class to all of the elements on the page that have the ID of myInput.
You might want to look into checking out Sass. This will give you the option to extend css classes to your own classes via #extend.
This is a handy Sass + Compass video
Then after you can do this
This way, you don't have to depend on javascript to add classes. It's all done through css.
Hope this helps!
You could also use a preprocessor like LESS to achieve this. You would have to save your ui.css as ui.less and then you could do something like this:
#import url(ui.less);
input {
.ui-corner-all;
}
After compilation of your less to css, it would take all the styles of the ui-corners-all class and apply them to your inputs. And that is just one of the many advantages of using a css preprocessor. It is really worth looking into and is not very hard to learn if you are familiar with css. You can find more info here: http://lesscss.org/
I have a page (http://www.gardensandhomesdirect.co.uk/newhomepage)
I want to make the center column (#content-column) 930px for this page only, which will eventually become the homepage.
The CMS used is NetSuite, and is notoriously difficult to work with.
What is the best way to do this? Is it possible with just CSS/HTML commands or JavaScript?
Since it's a CMS you probably cannot add markup easily so I'm thinking some jQuery would be a simple solution here...
$(function () {
var path = location.pathname.substring(1);
if (path) {
var regex = new RegExp('newhomepage$', 'gi');
if (regex.test(path)) $('#content-column').addClass('yourClass');
}
});
This should add "yourClass" to the element just on that page.
Then you can add to your external CSS...
.yourClass {
width: 930px !important;
}
I feel your pain
I have used Netsuite extensively and found )after many hours of hair pulling and expletives) that the best solution (for us) has been to create the home page and any unique landing pages as Hard coded Hosted pages (hosted on Netsuite) and reserve Netsuite's CMS system for item pages where you need the add to cart functionality.
Take it from me in the long run it'll save you hours of frustration :-)
Of course you can use Netsuite tags all over the place as long as you host the pages in your "site" folder
I have no experience with Netsuite so please take this as is..
I would try to add a custom style tag to the document like this:
<style>
#content-column{
width:930px !important;
}
</style>
If you only have access to the HTML of that page, then put an inline style attribute in the center column's HTML. Example:
<div id="content-column" style="width: 930px;">