Divs suddenly getting margins and incosistent jQuery behavior - javascript

I have two questions:
I have an assignment, where I populate a square grid with a lot of small square divs (think pixels). They should not have any margins - and they don't, as long as there are no more of them than 51 in a row. Then suddenly they get margins, and overflow my grid (a wrapper div). I've reset all the margins in the css to 0, and even used a negative margin, and it still happens. Why is that?
Second thing is some inconsistency when calling a JS function on a button click. It goes like this: when I use jQuery to bind that function to a button (the on() function), it works in JSfiddle, but IT DOES NOT WORK in the browser (I use chromium). I have to use onclick in the button's html tags for it to work. Again, why is that?
Here's the code parts I think could be the problem:
function reset() {
var new_size = prompt('Enter a new amount of squares in a row');
populate(new_size);
}
$('#reset').on('click', function () {
reset();
})
This should make the reset work on the button, and it does work in jsfiddle, but not in the browser.
This works for the browser:
<input id="reset" onclick='reset();' type="submit" value="Reset">
Here's some css:
* {
margin-bottom: -4px;
}
.wrapper {
width: 960px;
height: 960px;
margin: 0px auto;
border-style: solid;
border-width: 1px;
}
.square {
border-style: none;
border-width: 1px;
display: inline-block;
background-color: white;
}
When I tried to reset margins to 0, it didn't work either, I had to use negative one.
Thanks.

Hi try this: putting a non-breaking-space ( ) in the divs.... so they are not empty.
$('.wrapper').append("<div class='square'> </div>");
It works...
I am not sure why... I think is a rendering problem in some browsers like IE...

Related

Bug in Google Chrome for Iframes

I have a html graphing calculator that was relatively easy to create. I created an iframe and a textbox that held the code for a viewer to interact with. The system that was working before I put in the textbox and iframe but is now is acting buggy and not working properly. It could be I broke pieces of the code while transferring it, but I could not find the individual problems. The problems I noticed is that the system does not correctly graph on the y axis, whereas it did before (I fixed this problem by dividing the y-axis calculated by 13, but still am interested why it was higher than normal). Also, when I delete a number on one of the inputs after graphing once, the content of the iframe disappears, but reappears when I change the size of the page. Interestingly, if the size of the page is not your regular desktop, it does not disappear(I did not try any larger computers). I thought I may have done something wrong with the z-indexes I set but couldn't find any problems there. Does anyone know why I am running into these problems? Currently I am guessing that is is some king of loading problem for the iframe. The code is below;
<!DOCTYPE html>
<html>
<head>
<title>GCalcScratchpad</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
}
hr {
border-top: 3px solid #bbb;
}
iframe {
width: 100%;
height: 600px;
border: none;
}
textarea {
resize: none;
float: right;
width: 80%;
height: 1800px;
margin-bottom: 5px;
}
div {
width: 18%;
float: left;
}
button {
width: 100%;
text-align: left;
margin-top: 4px;
}
p {
font-size: smaller;
}
</style>
</head>
<body>
<iframe id="program"></iframe>
<hr>
<h2>My Coding</h2>
<div>
<button onclick="run()">Run Program</button>
<button onclick="fullScreen()">Fullscreen</button>
<p>The buttons above will run any changes to the code made in the textbox or resize to fullscreen.</p>
<p></p>
<h3>CSS</h3>
<p>This CSS is mostly beginner friendly, with one aspect of it slightly more complex. The majority of the CSS is me sizing divs and changing the body to a font and background color I like. I use z-index in this program too to make so that the graphed line does not go over text I do not want it to. There is also the #topGraph > div, which makes so that I can create other two pixel by two pixel divs using Javascript. I use this for the graphed line.</p>
<p></p>
<h3>HTML</h3>
<p>The HTML is more beginner friendly, just basic HTML elements. These elements consist of divs (to keep the content uniform and avoid the graphed lines covering other content as well as to create the blank graph), text (to inform the viewer how to use the program), buttons (as a form of text to display the formula and to trigger functions) and inputs for your y-intercept and slope. These simple peices form the basics of the HTML.</p>
<p></p>
<h3>Javascript</h3>
<p>The Javascript is more complex. It uses functions that calculate the basic formula to make the graph and to actually graph the points of the graph. It then uses your button's onclick function to take your input values and runs those values using the functions listed before.</p>
</div>
<textarea class="code" id="code">
<html>
<head>
<style>
/* This changes the body's font to one I think is more fitting for the program. */
body {
font-family: 'Courier New', Courier, monospace;
background-color: white;
}
/* This changes the width of every div. I use this to make the text look nicer. */
div {
width: 400px;
background-color: #fff;
z-index: 2;
}
/* This div is used in Javascript to create the graphed lines. */
#topGraph > div {
height: 2px;
width: 2px;
z-index: 0;
}
/* This div I use to create the bottom portion of this div. The download for the images I used is below. */
#bottomGraph {
position: relative;
height: 31px;
width: 441px;
background: url('../Pictures/grid2.png');
margin-left: 10px;
margin-bottom: 10px;
z-index: -2;
}
/* This div makes it so that the graphed line does not cover up the text. */
.noLine {
width: 550px;
background-color: #fff;
z-index: 2;
}
</style>
</head>
<body>
<!-- This div works similarly to the styling that I used on the divs in general except in CSS I made it slightly wider so that it could hold the length of the formula. -->
<div class="noLine">
<!-- This div shortens the width of the text so that it matches the rest of the page. The text inside gives instructions to the viewer which inform him how to use the page. -->
<div>
<h2>Slope-Intercept Graphing Calculator</h2>
<p>Put in your slope and your y-intercept. If you have a direct equation do not leave the y-intercept blank. Instead put in a zero. Then click the run button. Below is the code I used explained.</p>
</div>
<!-- The rest of these buttons make a visible formula to the viewer. The inputs have an id so that the Javascript can access their contents. The 'run' button allows the viewer to run the program using a function linked to the onclick aspect. -->
<button>{ y =</button>
<input id="slope" />
<button>x +</button>
<input id="y_intercept" />
<button>= ? }</button>
<button onclick="run()">run</button>
</div>
<!-- This div serves as the main graph picture (pictures are available for download below). The styling is in the div itself. -->
<div id="topGraph" style="position: relative; height: 271px; width: 441px; background: url('../Pictures/grid.png'); margin-left: 10px; margin-top: 10px; z-index: -1"></div>
<!-- This div serves as the graph underneath y axis 0. This time the styling is in the style tags. -->
<div id="bottomGraph"></div>
<Script>
// The first function I use is one that calculates the basic formula of a 2-dimensional graph; y=mx+b (basic algebra).
function calculate_y(m, x, b) {
return (m*x)+parseFloat(b);
}
// Then I create I second function that calculates what answer we would get every time y is given a new value using a for statement. Each new y value is 0.004 higher. Then each value x and y is mapped out on the div 'topGraph' and the point is shown using divs I've shown before in the CSS portion. These divs are solid black and 2 pixels by two pixels. I give it a z-index of -1 so that I can set a div with a background of white to a higher z-index to avoid lines going over that div. I use this to avoid lines going over text that I do not want it to.
function multiple_x_s(m, b) {
for (x = -3; x < 10; x += 0.004) {
y = calculate_y(m, x, b);
var new_div = document.createElement('div');
new_div.style.height = 4;
new_div.style.width = 4;
new_div.style.position = 'absolute';
new_div.style.left = x*130+'px';
new_div.style.bottom = y*130+'px';
new_div.style.background = 'black';
new_div.style.zIndex = '1';
document.getElementById('topGraph').appendChild(new_div);
}
}
// This function runs when you click the button (via onclick). This function runs the other two functions I described and set certain values using the ids of the input tags.
function run() {
var slope = document.getElementById("slope").value;
var y_intercept = document.getElementById("y_intercept").value;
multiple_x_s(slope, y_intercept/13);
}
</Script>
</body>
</html>
</textarea>
<script>
window.onload = function() {
document.getElementById("program").srcdoc = document.getElementById("code").value
}
function run() {
document.getElementById("program").srcdoc = document.getElementById("code").value
}
function fullScreen() {
document.getElementById("program").requestFullscreen()
}
</script>
</body>
</html>
EDIT1; I have tested this on multiple browsers and learned that the problem seems to only occur in Chrome, which leads me to believe that this is a bug in Google Chrome.
EDIT2; I have tested this when the number I delete is zero or letters and the program continues to work. It is only when I delete real numbers that the program fails. I have also tested using different forms of input such as the textarea but this did not fix the problem.
EDIT3; I tried deleting the "DOCTYPE html" tags and the "html" tags and the program still has the same bug. The rest of the program works however.
EDIT4; I tried making so that the overflow of the body is hidden, which seemed to eliminate the problem. I am still unsure what this fixed, but the entire program works now. Thankyou to everyone who helped. :)

How to center <div> inside a <button>?

I have a round < button > with a < div > inside that represents a Unicode image. Currently the button is set to border-radius: 12px; height: 24px; and width: 24px; and the < div > is to font-size: 17px. The < div > Unicode image sits inside but not centered and the button is slightly off to the side.
How can I get the < div > to center inside an oval button despite what font-size the < div > is?
EDIT
I want to create a circle/round button with an emoji center to the middle of the button despite the button's size or the emoji image's size.
CSS for the button and emoji image for div:
#emoji-button {
border-radius: 19px;
width: 38px;
height: 38px;
}
#thumb-emoji:after {
content: "\01F44C";
font-size: 20px;
}
And round/circle button with emoji image inside:
<button
type="submit"
id="emoji-button"
>
<div id="thumb-emoji"></div>
</button>
But it is not centered.
And is there a way to just back the emoji image alone to be clickable for a method?
First off:
A <div> is a block element by nature. It will always become 100% wide. If you want it to not be 100% wide, give it a display:inline-block so it won't get bigger than it needs to be. Then give it a margin:0 auto; or a text-align:center on the parent to center it.
HOWEVER, You are not allowed to put <div>s inside of <buttons>. it is invalid HTML
See this answer for more information:
Why can't a <button> element contain a <div>?
Or, you could read here, from W3 that only phrasing content is expected to be used within a button:
https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element
If you do not know what phrasing content is, See this page:
https://www.w3.org/TR/2012/WD-html5-20120329/content-models.html#phrasing-content
-- if you are looking into styling buttons specifically, maybe this very short tutorial would help:
http://web.archive.org/web/20110721191046/http://particletree.com/features/rediscovering-the-button-element/
Here is a fiddle of a working button like yours:
https://jsfiddle.net/68w6m7rr/
I honestly didn't have many problems with this. I only replaced your <div> with a span, that's it.
can you post your code?
You should NOT need a div inside the button. If you need the button to have a specific style give it a class. You could do something like this
CSS:
button.something {
padding: 25px;
border-radius: 100%;
font-size: 20px;
border: none;
}
HTML:
<button class="something">👌</button>
For clean and valid code, you'd better use a :before or :after pseudo-element. This would also take care of the centering by default.
It's even easy to set the content. Either in css only, like this:
1.
button:before {content:"\25b6";}
(put your unicode value there and classes/ids as needed, then specify them in turn in css)
2.
Or if you need to specify the value in mark-up, drop a custom data-* attribute like this:
<button data-myunicode="\25b6"></button>
with each button taking it's own value, then drop this single line in css:
button:before {content:attr(data-myunicode);}
Before answering, let's clear some things out.
div is a block level element, used in an inline element, which is the button element. Browsers will consider this invalid and will fix it by removing the block element from the inline element. For more about CSS concepts like box model, box generation please refer to these resources:
https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements#Block-level_vs._inline
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
Also, if you are using an IDE, make sure you have installed linting/hinting tools to help you out. These tools can help you in code authoring so, make sure you have them. If you are using software like VSCode or Sublime Editor, there are many free code analysis tools out there.
Let's go back to the code now.
You said
I want to create a circle/round button with an emoji center to the
middle of the button despite the button's size or the emoji image's
size.
I went ahead and created a plunk here where I demonstrate this. Essentially, I wrapped the button around a div which serves as a container and through some CSS magic, I made it to have the same height as its width. More on that you can find at this SO answer.
The #emoji-button then has a border-radius: 100% in order to be round, width is inherited from the parent, meaning it has the same as the container and it position is absolute in order to fit in the container.
The #thumb-emoji has changed to a span element. By user agent styles it has text-align:center.
<div class="button-group">
<button type="submit" id="emoji-button">
<span id="thumb-emoji"></span>
</button>
</div>
CSS:
.button-group {
position: relative;
width: 100px;
}
.button-group:before {
content: "";
display: block;
padding-top: 100%;
}
#emoji-button {
width: inherit;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#thumb-emoji:after {
content: "\01F44C";
font-size: 200%;
}
You can change the .button-group width to whatever width you want, it will still keep its 1:1 ratio.
You can use then media queries on .button-group to adjust the font-size of your #thumb-emoji, by setting your desired breakpoints.

jQuery hover event toggle class not triggering

I have been debugging this issue for a good while now and I am so confused to why this isn't working.
As you can see I am running the following code on JSFiddle and it seems to work without any issues at all:
$(".assistance-submit-btn").hover(function() {
$(this).children('i').toggleClass("assistance-submit-btn-mouseover");
});
.assistance-submit-btn {
font-size: 1.4rem;
font-weight:300;
padding: 10px 20px;
background: none;
border: 2px solid #333;
border-radius: 10rem;
color: #333;
margin: 25px auto 0;
display: block;
}
.assistance-submit-btn-mouseover {
transform:translate(10px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="assistance-submit-btn" value="Submit">Submit <i class="fa fa-caret-right"></i></button>
As you can see when the assistance-submit-btn element is hovered it will add a class to the i element.
This code is a direct copy from my local website that I am developing however for some reason on my local system it will not execute when the assistance-submit-btn element is hovered.
So far I have tried adding a CSS hover to the element itself just to see whether or not the element was behind another element and unable to hover.
The only difference that I can think of on my local setup is that the assistance-submit-btn element is pulled in by AJAX. Could this effect the jQuery hover event? Any suggestions to why this might be happening would be much appreciated.
Thanks
UPDATE: Forgot to mention I am getting no errors within my console.
Yes, it's because of Ajax dynamic content. Use this code:
$(document).on({
mouseenter: function () {
$(this).children('i').addClass("assistance-submit-btn-mouseover");
},
mouseleave: function () {
$(this).children('i').removeClass("assistance-submit-btn-mouseover");
}
});

How do you get rid of a random "pressed" class popping up on <div> click?

I currently have a div that I am trying to make into a like button that when clicked it switches to another image and back again when clicked again.....
With that I am having a problem where every time I click the div image it adds a class called "pressed" and the 2nd image only stays until I lift my finger off of the left-click.
I am using phonegap and and Intel mobile framework to help with the html, css, and javascript.
Is there anyway to disable this function from popping up on click or is there anything I can do to make the 2 images swap on click with a much easier method?
Thanks for the help. I am a little new at this.
HTML
<td align="right">
<div class="like_button"></div>
</td>
CSS
.like_button {
background-color: transparent;
border-color: transparent;
border:0px;
background-image: url(../img/like_button.png);
background-size: 52px 52px;
height: 52px;
width: 52px;
}
.like_button:active {
background-image: url(../img/liked_button.png);
background-size: 52px 52px;
height: 52px;
width: 52px;
}
JAVASCRIPT
jQuery('like_button').click(function(){
jQuery(this).toggleClass('active');
});
Like what lmgonzalves said in the comments, I think the problem has to do with the :active pseudo selector which is mostly used to alter an element's state while it is being activated (being clicked on or otherwise activated), hence the split second effect you are experiencing when you lift your finger away.
Instead, you should remove the pseudo selector and use a simple class selector like .like_button.clicked in handling state changes CSS.
You can see the demo here: https://jsfiddle.net/k135g025/
Hope this helps!
You need to change .like_button:active to .like_button.active in your CSS.
And also jQuery('like_button') should be jQuery('.like_button') in jQuery code.

Center textarea text vertically if only one row with text

I got a textarea that is 2 rows high. When there is just one row of text in the textarea it looks like this:
What I'm looking for is a way to make it look like this if only one row got text:
When there are 2 rows in the textarea with text, I want it to look normal like this:
Here is the code:
<textarea class='input_box_menu'>Test text</textarea>
.input_box_menu {
text-align: center;
width: 217px;
height: 35px;
resize: none;
float: left;
}
Help really appreciated!
Thanks,
Tompa
Here is a little jQuery snippet to do exactly what you wish to do:
$(function () {
fixVAlign($('.input_box_menu'));
$('.input_box_menu').on('keyup', function () {
fixVAlign($(this))
});
});
function fixVAlign(field) {
if (field.val().length < 27) {
field.css('line-height', '35px');
} else {
field.css('line-height', 'normal');
}
}
And here the jsfiddle
Ok so my first train of thought was to look up the css property vertical-align here.
Applies to: inline-level and table-cell elements
So looking at your example, inline-level objects seem to be out of the question -- so why not table cell?
Try this out:
.box {
display: table-cell;
height: 200px;
width: 400px;
background: #d4d4d4;
text-align: center;
vertical-align: middle;
}
<div class="box">
Text Text Text
</div>
Just a side note, there are ways to do this with a span within a div or a div withing a div, this is just how I chose to interpret the question.
EDIT
Ignore my answer because it doesn't do anything about textareas.
See this pen on CodePen for an example of a good fix.
Because you say you can use JavaScript, the simplest way to do this would be to set the initial line-height of the <textarea> equal to its initial height. Then onkeypress or a similar JavaScript event you can check textarea.value.length and if it's long enough to wrap, then you would set the line-height back to the font-size.

Categories

Resources