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);
}
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 years ago.
Improve this question
I have a fiddle which I have replicated by seeing the screenshot below:
At this moment, I am able to replicate everything in fiddle from the design.
The snippets of CSS codes which I have used in order to align images in a straight line are:
.product-contents
{
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
Problem Statement:
In the fiddle, now if I click on any square images from the screenshot (Franchise Hub,Business Analytics, Tech Support, etc) apart from the Cloud Based & Mobile Image then A TV screen image(means a different image) should appear as present in the fiddle.
And if I click on Cloud Based and Mobile image then a phone image should appear (as shown in the current screenshot above)
I am not sure how to apply that logic. I am pretty sure I need to use Javascript but I am not sure how to use that.
Give your images unique id and hide all but one default details image. Then you attach event handler to each div that toggles image visible attribute based on id.
$('.sections').on('click', function(e) {
val section = e.target.id;
$('.sections').hide(); // hide all sections
$('#' + section).show(); // display only clicked one
});
Just a quick glance of what you can do. Set event listener that will listen for click on the mentioned images and then, inside of the passed callback function, change the css properties of another element using element.style.cssProperty such as display to change it from none to block.
const cbBtn = document.querySelector('div#cloud');
const container = document.querySelector('div.container');
cbBtn.addEventListener('click', event => {
container.style.display = 'block';
cbBtn.className = 'active';
});
div#cloud {
width: 100px;
height: 100px;
border-radius: 20px;
border: 1px solid black;
line-height: 100px;
text-align: center;
}
div#cloud:hover {
background-color: green;
color: white;
}
div.container {
width: 100%;
height: 200px;
background: #ccc;
display: none;
text-align: center;
font-size: 20px;
font-weight: bold;
line-height: 200px;
}
.active {
background-color: green;
color: white;
}
<div id="cloud">
Cloud Based
</div>
<div class="container">
CONTAINER CONTENT
</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 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 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 7 years ago.
Improve this question
I´m using this tumblr theme:
http://flataura.tumblr.com/
And I want the slide menu at the right of the text "Flaty" that opens when you click on it, to be always opened. Is there any solution for this?
Here is the javascript of that slide:
http://static.tumblr.com/ssdtkch/gT6nanpl7/pageslide.js
Thanks!
Seeing from a comment that you are familiar enough to edit the CSS. Add this to the bottom of your CSS and it should show the menu AND hide the button that animates the show/hide:
body {
margin-left: 281px;
}
div#side {
display: block !important;
left: 0;
right: auto;
position: fixed;
top: 0;
height: 100%;
z-index: 1000000;
overflow-y: scroll;
width: 280px;
background-color: rgba(33,63,82, 0.93);
border-right: 1px solid #213f52;
}
a.open-sidebar.nav-button {
display: none;
}
Yes, there are ways to do this. But since it doesn't seem like you're very familiar with websites, the solution is too complicated via StackOverflow. Let me know if you would like to get in contact, and I can walk you through this.
In a nutshell, the #side element contains that left bit, but is always hidden. The #pageslide element is what gets shown, and as soon as you click the first time, the contents of #side get cloned into #pageslide. Then, jQuery (Javascript) is used to animate the transition, introducing a margin to your entire body element.
All of this can be overridden, but it is several steps. If you know a web developer, that information above should get them started. Otherwise, let me know if you want to get in contact.
Good luck!
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 7 years ago.
Improve this question
I'm creating a "sketchpad" mini-project. Most features are working so far, but I'm having one issue. The sketchpad uses a 16x16 grid by default. When I fill in the bottom row of the grid, you can still see a tiny white line. I have no idea where it could be coming from.
This is an image of the issue I mentioned above
Here is the code: JSFIDDLE
#grid {
height: 450px;
width: 450px;
margin: 10px auto;
background-color: #fff;
display: block;
overflow: hidden;
font-size: 0;
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am working on rebuilding my personal site and I have two elements which are floated side by side first at 80% and second at 20%.
http://codepen.io/anon/pen/xgask
SCSS
.container
width: 80%
margin: 0 auto
outline: 2px solid green
overflow: hidden /* Only used this here as a clearfix */
.text, .avatar
float: left
.text
width: 70%
outline: 1px solid red
.avatar
width: 25%
margin-left: 5%
outline: 1px solid blue
img
display: block
max-width: 100%
HTML
<div class="container">
<div class="text">
<p>Lots of text ...<p>
<p>Lots of text ...</p>
</div>
<div class="avatar">
<img src="http://www.foxprime.net/wp-content/uploads/2013/08/gravity-max-roller-coaster.jpg" />
</div>
</div>
On desktop sizes that is perfect. If the text in the first element is longer than the picture in the second the text does not wrap underneath which is what I want.
However, on mobile sizes I wish the text element to be full width and the picture to float right so the text wraps around.
With two separate elements as they are this is impossible, so is it appropriate to use javascript with something like enquire.js to react to the media query which then detaches the picture and places it at the beginning of the text element and have a style to float it right.
I know how to code it all, no problems there, just asking if it is appropriate to use a tiny bit of javascript to assist me getting the responsive layout I want?
With Responsive Web Design, there are many ways to accomplish the same thing; No one way is right.
Personally, I would try to work out a CSS-only solution or a solution that reorganizes my HTML markup to the best of my ability to reach the desired result. Only if I've exhausted all options in to making a CSS/Markup-only solution work would I turn to JavaScript.
In other words, yes, JavaScript is appropriate if it reaches your end result. However, if it's possible via Markup/CSS manipulation and no JavaScript, that is always the better choice.
If you don't mind putting the .avatar column first, you can get the exact results you want. Otherwise, I'd just hide and show with css, if it's just one image. Usually I avoid using jQuery unless it's absolutely necessary and after 3 years of responsive stuff, you get to know when to use it and when not to use it.
http://codepen.io/anon/pen/nfvmj
This is mobile first.
Put the .avatar before the .text in the html:
.container {
margin: 0 auto;
width:90%;
outline: 2px solid green;
overflow: hidden;
/* Only used this here as a clearfix */
}
.text {
outline: 1px solid red
}
.avatar {
float: right;
width: 50%;
margin:0 0 2% 2%;
}
.avatar img {
max-width: 100%
}
#media (min-width:600px) {
.text {
width: 70%;
float: left;
}
.avatar {
float: right
}
.container {
width: 80%;
}
.avatar {
width: 25%;
margin: 0 0 0 5%;
}
}