Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I need a little help with making my own css-compiler in JavaScript.
How can I make a compiler that compiles this nested rules example:
html{
background: #2E2E2E;
body{
height: 200px;
width: 100%;
background: #fff;
a{
color: rgb(0, 0, 255);
&:hover{
color: rgb(200, 0, 255);
}
}
}
}
Into this:
html{
background: #2E2E2E;
}
html body{
height: 200px;
width: 100%;
background: #fff;
}
html body a{
color: rgb(0, 0, 255);
}
html body a:hover{
color: rgb(200, 0, 255);
}
Thanks for any help!
If you vote down, please tell me why.
I would start by mentioning that building your own css-compiler is no joke. It is a serious thing. You should use something like Sass, Less, or Stylus. If they are missing a feature you need, you should build a plugin for them, rather than try to implement your own engine.
Having said that, an answer to your question may be reworkcss. It is a project that people will use to make their own CSS-compiler.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 days ago.
The community is reviewing whether to reopen this question as of 4 days ago.
Improve this question
I want to test the offsetTop of the element, but it's always 8 even if I add position and padding to the .parent or body.
console.log(document.getElementById('children').offsetTop);
.parent {
width: 200px;
border: 3px solid #000;
height: 300px;
overflow: scroll;
position: relative;
padding-top: 20px;
}
.children {
border: 3px solid red;
height: 200px;
}
<div class="parent" id="parent">
<div class="children" id="children"></div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Hello people, i am trying to make the thumb's width thinner than the tack's width so that i can have a shadow effect on the thumb ( such as it will look like the thumb-bar is floating on top of the track-bar).
Does anyone have any idea or if it is possible in the first place?
Thanks in Advance,
George.
This should work!
body {
font-family: sans-serif;
height: 2000px;
}
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 5px 5px white, inset 0 0 0 4px black;
}
::-webkit-scrollbar-button {
display: none;
}
Should look like this:
You can tinker around with it, but it goes a bit yuck if you add rounded corners!
Now it isn't so bad:
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I want to have a div that fades in when you have scrolled a certain amount of pixels, without using jquery, only using javascript.
Jquery is Javascript, so unless you loop a listener (for scroll) in JS to change something in the document object model, you will find yourself having to use HTML5 (css3 and some jquery), like this (From Codepen)
HTML
<div class="top"><div class="title">Fade Away</div></div>
CSS
body {
margin: 0;
height: 1000px;
}
.top {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
.title {
position: absolute;
top: 60%;
left: 100px;
}
JS
$(window).scroll(function(){
$(".top").css("opacity", 1 - $(window).scrollTop() / 250);
});
There are several pre-written parallax scripts you can use, like this one called skrollr, which will enable you to just add a reference to the JS file and then add CSS to your page code: https://prinzhorn.github.io/skrollr/
I hope that helps you get started!
To get the scroll position from top, you can use the document.pageYOffset property.
To fade something in, you have to use a setInterval, you can see it here:
How to do fade-in and fade-out with JavaScript and CSS
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Please help my task is: when you move the mouse cursor on the selected item, change the background and text colors
http://liveweave.com/rVjF5y
You can add below CSS code
.lw:hover { background-color: red; color: blue;}
You can do it in css using the :hover, example:
.element1 {
padding: 4px;
display: block;
background: #000;
color: #fff;
}
.element1:hover {
background: #d1d1d1;
color: #000;
}
<div class="element1">Mouse Over / Mouse Out</div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I am looking to create a simple website, however, the solution appears to be much more difficult to achieve than I would hope.
What I want:
I want to be able to write directly into the browser, and have it generate a flow chart, terminated with the ENTER key, like the image below (generated with Visio). Essentially, it is a text box, but it dynamically formats the text into nice looking boxes (Note The blue circles (Time and Author) are there to illustrate that there will be meta data associated with words and sentences.)
Are there any open source libraries that can do accomplish this?
Even though i must admit charlietfl is correct in his statement, i thought it was a fun challenge so i made a fast demo on how you could make it, and from there you could develop it further.
Working codepen demo.
I recommend you to change the view settings on the upper right corner.
The design and everything is not near perfect and i diddent take the time to implement an arrow, by looking at the code you should be able to figure out how to make that yourself.
HTML:
<div id="flowContainer" class="flowChart">
</div>
<textarea id="textarea" class="textarea"></textarea>
<button onclick="postflow()">Post</button>
CSS:
.flowChart{
width: 100%;
height: 600px;
border: solid 1px gray;
overflow: auto;
}
.textarea{
width: 100%;
height: 200px;
resize: none;
}
.chart{
width: 200px;
min-height: 100px;
background-color: #ea5e00;
color: white;
margin: 10px auto;
border: solid 1px gray;
}
.chart p{
margin: 0;
padding: 10px;
}
Javascript:
function postflow(){
var flow = document.createElement("div");
var p = document.createElement("p");
var textarea = document.getElementById("textarea");
var text = document.createTextNode(textarea.value);
textarea.value = "";
p.appendChild(text);
flow.className = "chart";
flow.appendChild(p);
document.getElementById("flowContainer").appendChild(flow);
}