We Keep Coding

Changing what is shown to a user using dynamic questions

I want to, inside a webpage, as a user a series of questions, and then serve them up a page based on their response. But, I don't want to redirect them to a separate form/page.
For example:
1)Question: Do you want to see a Square?
2)Question: Do you want to see a Circle?
3)Question: Do you want it Red?
4)Question: Do you prefer Blue?
5)Question: Do you want it Orange?
6)Question: Do you prefer Yellow?
The user would see the first question, followed by a yes button and no button. If they clicked yes, then it would show them the 3rd question, if they clicked no, then it would show them the 2nd question. No to 3rd Question leads to 4th Q. No to 2nd Q leads to 5th Q, etc.
The end images are a Red Square, Blue Square, Orange Circle, Yellow Circle, and Black Square, and will be shown to users based on how they moved through the questions.
I know I can do this by giving an id to each question and set of buttons, and showing/hiding button/question sets using JS based on answers to other questions (then showing final based on last question answered) but I'm curious if there's a cleaner way to do this, maybe with some sort of form, tree, and state assignment? In my real-world version it's possible that two answers lead to the same state.
Here's the beginning of my naive implementation:
<div id="b1">
<h5 id="q1">Question: Do you want to see a Square?</h5>
<button id="ay1">Yes</button><button id="an1">No</button>
</div>
<div class ="box" id="b2"><h5 id="q2">Question: Do you want to see a Circle?</h5>
<button id="ay2">Yes</button><button id="an2">No</button>
</div>
<div class ="box" id="b3"><h5 id="q3">Question: Do you want it Red?</h5>
<button id="ay3">Yes</button><button id="an3">No</button>
</div>
And a jsFiddle of the idea

var shape, colour;
$("#an1").click(function() {
$("#b1").fadeOut();
$("#b2").fadeIn();
});
$("#ay1").click(function() {
$("#b1").fadeOut();
$("#b3").fadeIn();
shape="Square";
});
$("#ay2").click(function() {
$("#b2").fadeOut();
$("#b3").fadeIn();
shape="Circle";
});
$("#an2").click(function() {
$("#b2").fadeOut();
$("#b1").fadeIn();
});
$("#ay3").click(function() {
$("#b3").hide();
colour="red";
show();
});
$("#an3").click(function() {
$("#b3").fadeOut();
$("#b4").fadeIn();
});
$("#ay4").click(function() {
$("#b4").hide();
colour="blue";
show();
});
$("#an4").click(function() {
$("#b4").fadeOut();
$("#b5").fadeIn();
});
$("#ay5").click(function() {
$("#b5").hide();
colour="orange";
show();
});
$("#an5").click(function() {
$("#b5").fadeOut();
$("#b6").fadeIn();
});
$("#ay6").click(function() {
$("#b6").hide();
colour="black";
show();
});
$("#an6").click(function() {
$("#b6").fadeOut();
$("#b3").fadeIn();
});
function show() {
var div="<div id='myShape' class='" + shape + "' style='background: " + colour + "'></div>";
document.body.innerHTML+=(div);
}
.box {
position: absolute;
}
#myShape {
width: 100px;
height: 100px;
background: beige;
}
.Circle {
border-radius: 50%;
}
.Red {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="box" id="b1"><h5 id="q1">Question: Do you want to see a Square?</h5>
<button id="ay1">Yes</button><button id="an1">No</button>
</div>
<div class ="box" id="b2" hidden><h5 id="q2">Question: Do you want to see a Circle?</h5>
<button id="ay2">Yes</button><button id="an2">No</button>
</div>
<div class ="box" id="b3" hidden><h5 id="q3">Question: Do you want it Red?</h5>
<button id="ay3">Yes</button><button id="an3">No</button>
</div>
<div class ="box" id="b4" hidden><h5 id="q4">Question: Do you want it Blue?</h5>
<button id="ay4">Yes</button><button id="an4">No</button>
</div>
<div class ="box" id="b5" hidden><h5 id="q5">Question: Do you want it Orange?</h5>
<button id="ay5">Yes</button><button id="an5">No</button>
</div>
<div class ="box" id="b6" hidden><h5 id="q6">Question: Do you want it Black?</h5>
<button id="ay6">Yes</button><button id="an6">No</button>
</div>

Cannot get push menu inline with Bootstrap

I'm using Bootstrap as UI framework, what I'm trying to do is make a push menu on the left. Actually, I almost achieve this result, but there are some bugs on the system. In particular, I'm not able to get the menu inline. See the code for more details:
HTML
<div id="calendar-wrapper">
<div class="container-fluid">
<div class="row">
<div id="resource-bar" class="sidenav col-sm-2">
<h4>Resource</h4>
<div class="input-group">
<input type="text" placeholder="Search resource"
class="form-control resource-filter"/>
<span class="input-group-btn">
<button class="clear btn btn-default clean-resource btn-danger" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
<div id="popover-content" hidden></div>
</div>
<div id="calendar-container" class="col-sm-10">
<div id="calendar" class="well"></div>
</div>
</div>
</div>
</div>
<br><br><br>
<button type="button" id="show" >Show</button>
<button type="button" id="hide" >Hide</button>
Note that the html above is adapted for a fiddle example.
CSS
.sidenav
{
background-color: azure;
height: 100%;
width: 0;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.5s;
}
#calendar-container
{
background-color: whitesmoke;
transition: margin-left .5s;
padding: 16px;
}
JS
$(document).ready(function()
{
var resourceContainer = $('#resource-bar');
var calendarContainer = $('#calendar-container');
$('#show').click(function()
{
resourceContainer.css('width', '250px');
calendarContainer.css('margin-left', '250px');
});
$('#hide').click(function()
{
resourceContainer.css('width', '0px');
calendarContainer.css('margin-left', '0px');
});
})
The result when the menu on the left is closed:
Seems that both divs are inline, the problem occurs when I press show button and the menu appears:
BUG actually noticed:
When the menu is opened I get the divs in two line instead of one row
Adding the class col-sm-2 to resource-bar the overflow-x: hidden; doesn't working, in fact, seems that the menu is visible when it should be closed.
col-sm-2 does not go in another line when the minimum resolution of the screen doesn't have enough space in width.
Someone could help me to fix this issues? Thanks. JSFIDDLE.

Edited to another workaround which wouldn't affect bootstrap grid:
With this setup sidebar would be absolute, since it's out of viewport and you set it to a fixed width (250px), using the grid wouldn't be necessary.
Visible input will not overflow once sidebar shows.
Raised buttons above sidebar.
Note the HTML structure was tweaked.
$(document).ready(function() {
var resourceContainer = $('#resource-bar');
var calendarContainer = $('#calendar-container');
$('#show').click(function() {
resourceContainer.css('width', '250px');
calendarContainer.css('margin-left', '250px');
});
$('#hide').click(function() {
resourceContainer.css('width', '0px');
calendarContainer.css('margin-left', '0px');
});
})
div.sidenav {
background-color: azure;
height: 100%;
width: 0;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.5s;
/* added absolute to sidenav since it will have fixed width anyways */
position: absolute;
}
#calendar-container {
background-color: whitesmoke;
transition: margin-left .5s;
padding: 16px;
/* this is just to vertically align with sidebar input */
padding-top: 36px;
}
button {
position: relative;
z-index: 2;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="calendar-wrapper">
<div class="container-fluid">
<div class="row">
<div id="calendar-container" class="col-sm-12">
<div id="calendar" class="well"></div>
</div>
<div id="resource-bar" class="sidenav">
<h4>Resource</h4>
<div class="input-group">
<input type="text" placeholder="Search resource" class="form-control resource-filter" />
<span class="input-group-btn">
<button class="clear btn btn-default clean-resource btn-danger" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
<div id="popover-content" hidden></div>
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<button type="button" id="show">Show</button>
<button type="button" id="hide">Hide</button>

You're issue lies with the mix of bootstrap and your own JavaScript generated style. It seems you already have knowledge of the Bootstrap Grid layout, but to reinforce, https://v4-alpha.getbootstrap.com/layout/grid/ will tell you that there are 12 columns in a row.
Each column is styled by Bootstrap to a set width with set margins in between. You've have all 12 columns filled up in your row. As you add an additional margin to your already-filled-up calendarContainer column, it will pop out of the row.
Therefore, the easiest way to achieve what you want without affecting any other styles is too make your column smaller and reduce the amount of 'margin-left' you push on the column like so https://jsfiddle.net/Zeenglishking/DTcHh/28837/
<div id="calendar-container" class="col-sm-8">
<div id="calendar" class="well"></div>
</div>
$('#show').click(function()
{
resourceContainer.css('width', '250px');
calendarContainer.css('margin-left', '50px');
});
Also, as you say "seems infact that the menu is even visible also when is closed.", the menu is indeed visible. This is again down to the fact of the bootstrap styling of the grid-layout. If you can figure out what styles are creating this issue (F12), you can override them using "something:!important". https://css-tricks.com/snippets/css/style-override-technique/ . Otherwise, find another way. If you mess around with css positioning elements too much, it's easy to get lost and jumbled with the rest of your code.
EDIT (in regard to comment):
What needs to be used in addition to this is 'col-xs-**' with a smaller size column, allowing for a responsive design and for it to work on the smaller viewports such as the one in JSFiddle. I have updated my fiddle to include
col-xs-1
and
col-xs-4
on resource-bar and calendar-container respectively. This will change the size of the column, upon resize of the screen/viewport to ensure it doesn't drop down on extra-small viewports. More info at http://getbootstrap.com/css/#grid-options
Upon using Bootstrap framework you almost acquire yourself to a certain standard. Shortcuts in fixing this can cause problems with other elements. You're probably best to read more into it before chucking random positioning in to fix certain elements on a page.

How to make HTML code more readable? [duplicate]

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 8 years ago.
I have 5 buttons that are coded on 1 single line. This allows me to squeeze them next to each other without any spaces in between, which is what I want.
However, if I move the code for each button down one line, there are spaces in between the buttons, which is what I don't want.
Here is the sample code for 2 buttons:
<button id="home" type="button">Home</button><button id="save" type="button">Save
</button><button id="create" type="button">Create</button>
Thanks

You could put the newline character inside your tags:
<button>btn1</button
><button>btn2</button
><button>btn3</button>
You can comment out the space between your tags so it's as if the space wasn't even there.
<button id="home" type="button">Home</button><!--
--><button id="save" type="button">Save</button><!--
--><button id="create" type="button">Create</button>
As for the CSS, CSS lets you define attributes for multiple classes/ids/etc at the same time.
#save, #home {
margin-top: 20px;
height: 40px;
width: 240px;
}
#home { margin-left: 40px; }

Create your buttons with a class:
<button class="button" id="save">Save</button>
<button class="button" id="new">New</button>
<button class="button" id="load">Load</button>
Create a class in the CSS file:
.button {
display: block;
float: left;
width: 100px; /*For example*/
}
That will make your buttons stick together without spaces, and HTML will be more readable.
EDIT: As you use an ID, add that ID in your CSS class with a margin-left.
/* in this example, the button to the mostleft is #save, so...*/
#save {
margin-left: 10px;
}
Here is the demo

You can use the "class" attribute of the input element to define styling options which are influencing all the buttons that got the class. Let me show you:
<button id="home" type="button" class="btn-style">Home</button>
<button id="save" type="button" class="btn-style">Save</button>
<button id="create" type="button" class="btn-style">Create</button>
And in your css you have the stylings:
.btn-style{
//your css here
}
To have no space between the buttons you simply use CSS styling. But for that make, search at google. You may need styling attributes like "display, margin, float...".
Greetz

Well, it's pretty irritating that HTML does this but the way I solve it is as follows:
<button>btn1</button
><button>btn2</button
><button>btn3</button
><button>btn4</button
><button>btn5</button>
Or as other users are also suggesting, you can insert comments in-between:
<button>btn1</button><!--
--><button>btn2</button><!--
--><button>btn3</button><!--
--><button>btn4</button><!--
--><button>btn5</button>

For your problem of spaces between inline-elements such as <button>, try to write the code like that :
<button id="home" type="button">Home</button><!--
--><button id="save" type="button">Save</button><!--
--><button id="create" type="button">Create</button>

Apply common css by button selector and any specific styles by their ids
button{
margin-top: 20px;
height: 40px;
width: 240px;
}
#home{
margin-left: 40px;
}
#save{
}

jQuery not showing requested data on click

This is pretty much a beginner question. I've bound a little glyphicon to a click event to show some data on click. I've bound stuff to events a million times, but this time it isn't working for some funny reason. Anyway, the click trigger works pretty well, I've tried putting an alert in the callback and it's alright, but it's just the stuff I want to be shown that's not showing.
Anyway, here's my code:
<div class="options">
<span id="resize-toggle" class="glyphicon glyphicon-resize-small valign-middle pointer" title="Resize images during the upload"></span>
<span id="thumb-toggle" class="glyphicon glyphicon-adjust valign-middle pointer" title="Adjust the output thumnail width measured in pixels"></span>
<div id="thumb-options" class="hidden">
<div class="form-group">
<div class="btn-group mg-top" data-toggle="buttons">
<label class="btn btn-default btn-xs"><input type="radio" id="width-90" value="90">90</label>
<label class="btn btn-default btn-xs active"><input type="radio" id="width-110" value="110">110</label>
<label class="btn btn-default btn-xs"><input type="radio" id="width-130" value="130">130</label>
<label class="btn btn-default btn-xs"><input type="radio" id="width-160" value="160">160</label>
<label class="btn btn-default btn-xs"><input type="radio" id="width-200" value="200">200</label>
</div>
</div>
</div>
</div>
This is the LESS:
.options {
position: absolute;
bottom: 10px;
right: 10px;
min-width: 500px;
text-align: right;
border: 1px solid black;
.form-group {
display: inline-block;
margin: 0;
}
#thumb-options {
display: inline-block;
}
}
So, the #thumb-toggle is supposed to bring up #thumb-options. I've tried using classes beforehand, but I became desperate and started trying it with IDs.
My original intention is to make the radio buttons slide from the right, pushing the little glyphicons along the way.
Could someone please help me find the issue why the jQuery isn't working and how to achieve that slide to the right effect?
This is the jQuery I've been using:
$('#thumb-toggle').click(function(){
alert('Here we are'); // Works!
$('#thumb-options').fadeIn('fast'); // This doesn't work
});

Here is a jsfiddle for what is descibed below. It is a simplified version of yours that is working.
You didn't show the hidden class, but the problem may be that you are using FadeIn on an element that is invisible. If you want the element to be invisible and therefore contribute to the layout of the dom then you should use something like:
$('#thumb-options').css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 200);
If you want to use FadeIn then you will need the $('#thumb-options') to initially have display:none

I would suggest to just toggle the css class and adjust the visiblity with css only.
(I also would not use ids so extensively. You could use classes instead.)
HTML:
<div id="thumb-toggle">Click me</div>
<div id="thumb-options" class="hidden">
...
</div>
Javascript:
var $thumb_toggler = $('#thumb-toggle');
$thumb_toggler.click(function(){
$thumb_toggler.toggleClass('hidden');
});
With the first click on $thumb_toggler the class hidden will be removed from the #thumb-options element. With the next click, the hidden class will be appended to the list of its classes.

first, try making the class "hide" instead of "hidden"
<div id="thumb-options" class="hide">
if it still doesn't work try this:
<div id="thumb-options" style="display:none;">

Weird event binding issue on FF and Chrome - only on first click

This is on my plugin page on Git and I have two interactive demo in the web page. In one of the demo page, I have a small dialog that opens when you click on a div.
The weird issue is that this dialog is getting opened when I click on the top title that says attrchange beta . This happens only if the first click is on the title attrchange beta, clicking any other element in page fixes this issue.
The plugin page http://meetselva.github.io/attrchange/ [Fixed, use the below URL to see the problem]
http://meetselva.github.io/attrchange/index_so_issue.html
Below is the code,
<!-- The title -->
<h1 id="project_title">attrchange <span class="beta" style="text-decoration: line-through;" title="Almost there...">beta</span></h1>
<!-- Main dialog that has link to the sub-dialog -->
<div id="attributeChanger">
<h4 class="title">Attribute Changer</h4>
<p>Listed below are the attributes of the div:</p>
<div class="attrList"></div>
<div class="addAttribute text-right">add new attribute</div>
</div>
<!-- Sub-dialog -->
<div id="addOrmodifyAttr" title="Add/Modify Attribute">
<h4 class="title">Add/Modify Attribute</h4>
<p><b>Attr Name</b> <input type="text" class="float-right attrName"></p>
<p><b>Attr Value</b> <input type="text" class="float-right attrValue"/></p>
<div class="clear"> </div>
<button type="button" class="float-right close">Close</button>
<button type="button" class="float-right update">Update</button>
<div class="clear"></div>
</div>
JS:
var $attributeChanger = $('#attributeChanger');
var $attrName = $('.attrName', '#addOrmodifyAttr'),
$attrValue = $('.attrValue', '#addOrmodifyAttr'),
$attrAMUpdate = $('.update', '#addOrmodifyAttr');
//Handler to open the sub-dialog
$attributeChanger.on('click', '.addAttribute', function () {
$attrName.val('').removeClass('nbnbg');
$attrValue.val('');
$('#addOrmodifyAttr, #overlay').show();
});

The problem is the CSS applied to your #attributeChanger div.
If you look at the CSS applied to it:
#attributeChanger {
background-color: #FEFFFF;
border: 1px solid #4169E1;
color: #574353;
font-size: 0.9em;
margin: 10px;
min-height: 50px;
min-width: 150px;
opacity: 0;
padding: 2px;
position: absolute;
top: -200px;
z-index: 1;
}
You'll notice that the position is absolute, and it's positioned over your logo. So what you're clicking is actually your #attributeChanger div.
To fix it, you can hide #attributeChanger using display: none;, then use $('#attributeChanger').show(); in jQuery when it comes into actual view.

The pop up is showing because this code is running:
}).on('click', '.addAttribute', function () {
$attrName.val('').removeClass('nbnbg');
$attrValue.val('');
$('#addOrmodifyAttr, #overlay').show();
This is because the DIV with the class addAttribute is over the title DIV.
You can either move the 'addAttribute' DIV, or remove the last line of that onclick function.

That is because you element is hover your title and detect the click on himself and open(i don't know why it open, i didnt examine your entire code). But when you click anywhere else, your code is changing his position so it is not over the title.
The easiest fix is to change you #attributeChanger CSS top to -100px (that's the value when you click on the document) OR add a display : none.
EDIT : Axel answer show what I mean by "element is hover your title".