Less.js : how to avoid multiple prefix in less file definition ? - javascript

For example, I have a html fragment definition as below:
<div class="login">
<div class="header">...</div>
<div class="content">...</div>
</div>
.......
<div class="home">
<div class="header">...</div>
<div class="content">...</div>
</div>
I have a less file called login.less, with content as below:
.login {
....
}
.login .header {
....
}
.login .content {
....
}
As you can see above, every time I add a class under "login" div, I have to write something like .login .class, I have to add .login before them. Is there any method in less.js to define a base class name so that I don't need to add .login everytimes?

Using less you can do as #Harry commented on your question, just nest his children's, on this way, you avoid to repeat the parent selector:
.login {
.header {
// Code
}
.content {
// Code
}
}

Related

How to change one HTML file to another without changing link?

I have an html file(a webpage). I want when I press a button on it, the page should be replaced by another html file (with its own css, javascript functions etc) without being redirected to some other link.
For example, if link in first case is abc.com/def it should be same after too.
Using this code, I am able to change webpage look, but not getting how to change look (and also manage to load css and js functions) from another file.
<script type="text/javascript">
document.body.addEventListener('click',function(){
document.write("THIS IS NEW TEXT")
},
false);
</script>
You need to look into frameworks like AngularJS, Specially Routing of Angular. They provide such features built-in for web applications. However, you can do it the hard way, using javascript, like you are doing it right now. Add CSS and change whole body HTML using javascript if you don't want to learn any new framework or libraries.
You want to use PJAX,
Here's a link for an example.
As discuss by others, you should use a Framework to do this..
But this is a complete solution you can inspire of:
let layouts = {}
let current = null
// Display the new page by deleting current, and replacing by the good one
let displayLayout = (layout_id) => {
let parentNode = current.parentNode
parentNode.removeChild(current)
current = layouts[layout_id]
parentNode.appendChild(current)
loadEvents(current)
}
// Load event for HTML DOM you just created
let loadEvents = (layout_el) => {
Array.from(layout_el.getElementsByClassName('go-to-layout')).forEach(el => {
el.addEventListener('click', e => {
e.preventDefault()
displayLayout(e.currentTarget.dataset.layout)
})
})
}
// On init I get all the existing layout, but you can build you own dictionary an other way.
Array.from(document.getElementsByClassName('layout')).forEach(l => {
layouts[l.id] = l
if (l.classList.contains('active')) {
loadEvents(l)
current = l
}
else {
l.parentNode.removeChild(l);
}
})
/* Global CSS */
body, html, .layout {
height: 100%;
margin: 0;
}
* {
color: #FFF
}
.layout {
display: flex;
}
.nav, .page {
}
.nav {
width: 150px;
background: #555;
}
/* Special CSS for one layout */
#layout1 {
background: red;
}
#layout2 {
background: blue;
}
<div id="layout1" class="layout active">
<div class="nav">
Page 2
</div>
<div class="page">
This is page 1
</div>
</div>
<div id="layout2" class="layout">
<div class="nav">
Page 1
</div>
<div class="page">
This is page 2
</div>
<style>.page { font-size: 2em }</style>
</div>

Dynamic image is not loaded via :src

I am working on a simple Vue app, using vue-cli and webpack for that purpose.
So basicly i have 2 components, a parent and a child component ~
like this:
<template>
<div class="triPeaks__wrapper">
<div class="triPeaks">
<tri-tower class="tower"></tri-tower>
<tri-tower class="tower"></tri-tower>
<tri-tower class="tower"></tri-tower>
</div>
<div class="triPeaks__line">
<tower-line :towerLine="towerLineCards" />
</div>
<tri-pack />
</div>
</template>
the towerLineCards is the important thing there, it is a prop that is passed to the tower-line component, it is basicly a array with 10 elements, it is a array with 10 numbers that are shuffled, so it can be something like that:
[1,5,2,6,8,9,16,25,40,32]
this array is create via beforeMount on the lifecycle.
On the child component:
<template>
<div class="towerLine-wrapper">
<div class="towerLine">
<img v-for="index in 10" :key="index" class="towerLine__image" :src="getImage(index)" alt="">
</div>
</div>
</template>
<script>
export default {
props: {
towerLine: {
type: Array,
required: true
}
},
method: {
getImage (index) {
return '#/assets/images/cards/1.png'
}
}
}
</script>
<style lang="scss">
.towerLine {
display: flex;
position: relative;
top: -90px;
left: -40px;
&__image {
width: 80px;
height: 100px;
&:not(:first-child) {
margin-left: 3px;
}
}
}
</style>
the issue is with the :src image that i am returning via the getImage(), this way it is not working. If i change to just src it works just fine, i did this way just to test, because the number in the path should be dynamic when i got this to work.
What is wrong with this approach? any help?
Thanks
Firstly, you should use a computed property instead of a method for getImage().
And to solve the other problem, you could add require(YOUR_IMAGE_PATH) when you call your specific image or put it inside /static/your_image.png instead of #/assets/images/cards/1.png.

How to add a class to a div on click, and remove the class by clicking elsewhere on the page

I would like to expand a div, filters, when filtertoggle is clicked. I would like to do this by adding the class on to filters. Then, when the user clicks anywhere else on the page, I would like to remove the on class, thereby closing filters.
Here is the code I have attempted:
jQuery(document).ready(function($) {
$('body').click(function(evt) {
if (evt.target.attr('class').includes('filtertoggle')) {
$(this).toggleClass('on');
$('.filters').slideToggle(200);
return;
} else {
$(this).element.className = element.className.replace(/\bon\b/g, "");
return;
});
As it stands, filters does not open.
Your logic has a couple of issues. Firstly, evt.target is an Element object, not a jQuery object, so it has not attr() method. You need to wrap it in a jQuery object to make that work. Then you can use hasClass() to check what class is on the target.
Also a jQuery object has no element property, so element.className will cause a syntax error. You can just use removeClass() in that case. Try this:
$('body').click(function(evt) {
if ($(evt.target).hasClass('filtertoggle')) {
$('.filtertoggle').addClass('on');
$('.filters').slideToggle(200);
} else {
$('.filtertoggle').removeClass('on');
$('.filters').slideUp(200);
}
});
body, html { height: 100%; }
.on { color: #C00; }
.filters { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtertoggle">
FilterToggle
</div>
<div class="filters">
Filters...
</div>
You should also note that it may be possible to achieve this in CSS alone, depending on how your HTML is structured. You can use the :focus selector to do it, like this:
body, html { height: 100%; }
.filtertoggle { outline: 0; }
.filters {
opacity: 0;
transition: opacity 0.3s;
}
.filtertoggle:focus { color: #C00; }
.filtertoggle:focus + .filters { opacity: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtertoggle" tabindex="1">
FilterToggle
</div>
<div class="filters">
Filters...
</div>

How to restrict the scope of dynamic HTML CSS in Angular 4 [duplicate]

I would like to apply a CSS file to a concrete DIV in my page. This is the page structure:
<link rel="stylesheet" href="style.css" />
...
<body>
<div id="pagina-page" data-role="page">
...
<div id="applyCSS">
(all the elements here must follow a concrete CSS rules)
</div>
...
</body>
I tried to apply the rules of the CSS file editing it like this (the CSS file is so large):
#applyCSS * { (For all the elements inside "applyCSS" DIV:)
.ui-bar-a {
...
...
}
.ui-bar-a .ui-link-inherit {
...
}
...
}
But that solution doesn't work. So, how can I do that?
#applyCSS > * {
/* Your style */
}
Check this JSfiddle
It will style all children and grandchildren, but will exclude loosely flying text in the div itself and only target wrapped (by tags) content.
You could try:
#applyCSS .ui-bar-a {property:value}
#applyCSS .ui-bar-a .ui-link-inherit {property:value}
Etc, etc... Is that what you're looking for?
.yourWrapperClass * {
/* your styles for ALL */
}
This code will apply styles all elements inside .yourWrapperClass.
I do not understand why it does not work for you, it works for me : http://jsfiddle.net/igorlaszlo/wcm1soma/1/
The HTML
<div id="pagina-page" data-role="page">
<div id="applyCSS">
<!--all the elements here must follow a concrete CSS rules-->
<a class="ui-bar-a">This "a" element text should be red
<span class="ui-link-inherit">This span text in "a" element should be red too</span>
</a>
</div>
</div>
The CSS
#applyCSS * {color:red;display:block;margin:20px;}
Maybe you have some special rules that you did not share with us...
If you're looking for a shortcut for writing out all of your selectors, then a CSS Preprocessor (Sass, LESS, Stylus, etc.) can do what you're looking for. However, the generated styles must be valid CSS.
Sass:
#applyCSS {
.ui-bar-a {
color: blue;
}
.ui-bar-a .ui-link-inherit {
color: orange;
}
background: #CCC;
}
Generated CSS:
#applyCSS {
background: #CCC;
}
#applyCSS .ui-bar-a {
color: blue;
}
#applyCSS .ui-bar-a .ui-link-inherit {
color: orange;
}
Write all class/id CSS as below. #applyCSS ID will be parent of all CSS code.
For example you add class .ui-bar-a in CSS for applying to your div:
#applyCSS .ui-bar-a { font-size:11px; } /* This will be your CSS part */
Below is your HTML part:
<div id="applyCSS">
<div class="ui-bar-a">testing</div>
</div>
Alternate solution. Include your external CSS in your HTML file by
<link rel="stylesheet" href="css/applyCSS.css"/>
inside the applyCSS.css:
#applyCSS {
/** Your Style**/
}

Find an element with a class in jquery

I have a scenario where I've multiple div with class navToME on/off. Now what I've trying to do here is if a div has a class off, then remove the class navToMe.
E.g.,
if($('.navToME').hasClass('off')){
$('.off').removeClass('navToME');
}
My HTML structure is like this:
<div class="on navToME">
<strong>ABC</strong>
</div>
<div class="off navToME">
<strong>DEF</strong>
</div>
What's happening right now is it just checks the first div with that class and returns false. Is there a way anyone can suggest so that I could just this for all classes inside my HTML? Thanks in advance!
You can simply use Class Selector to identify element with multiple class then use removeClass()
$('.off.navToME').removeClass('navToME');
$(function() {
$('.off.navToME').removeClass('navToME');
});
.on {
background-color: green;
}
.off {
background-color: red;
}
.navToME {
background-color: grey!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="on navToME">
<strong>ABC</strong>
</div>
<div class="off navToME">
<strong>DEF</strong>
</div>

Categories