Develop Reference

HTML code flows off page?

So I have this HTML code, it displays a twitter feed.. The only problem is, it flows off the page. I would like the feed to be 100% width and 600px height. I've fiddled with this for a while, and can make it work somewhat.. I think it needs to be one single code.
https://jsfiddle.net/33nw5jcd
<div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
appreplicaapp = 'twitter';
appreplicaapikey = 'aa869d1f61a088e04e6fe1a66fc07933e404f9bb';
</script>
<script src="//api.appreplica.com/js/1/arc.js"></script>
</div>

Try this:
CSS
#a {
height: 600px;
background-color: #fff;
width: 100%;
}
#a::after {
content: 'hello this is the last node';
}
HTML
<div id="a">
</div>
Note: Try keeping your script after the element with id a. It may be a issue where your script executes before your element is rendered.

changing button text on mouseover, resizes entire button

I have an annoying problem, I want the bootstrap button to be fixed in size. At the moment when I scroll over the bootstrap button it resizes the entire button. I use javascript to change the text (mouseover and mouseout). How can I disable this so the button remains the same size and only the text changes?
Example button:
<button type='button' id='Warning' class='btn btn-warning btn-block text-left' data-toggle='modal' data-target='#myModal'>Pending</button>
Javascript:
$('body').on('mouseover', '#Success', function (e) {
$(this).removeClass("btn-success");
$(this).addClass("btn-danger");
$(this).text('Deactivate?');
});
$('body').on('mouseover', '#Warning', function (e) {
$(this).removeClass("btn-warning");
$(this).addClass("btn-success");
$(this).text('Activate?');
});

If the visible width of the 2 text labels is different, the button has to change size to accommodate the text.
You should set a fixed size of the button via CSS that is big enough to fit either text label:
#Warning {
width: 200px;
}
Without seeing more of your markup, it's difficult to know how this affects other layout elements.
You could try giving the button an auto margin in the horizontal:
#Warning {
width: 200px;
margin: 0 auto;
}
Or it might be that you need to explicitly center the buttons in it's container:
.class-name-of-the-buttons-parent-container {
text-align: center;
}

I suggest giving the button a fixed width that's enough for both states and removing the horizontal paddings. Optionally you can give it text-align:center

Freeze the button's width and height during the mouseover event. Also, set its padding to 0 to keep the text centered:
$('body')
.on('mouseover', '#Warning', function (e) {
$(this).css({
width: $(this).outerWidth(),
height: $(this).outerHeight(),
padding: 0
});
$(this).text('Activate?');
})
.on('mouseout', '#Warning', function (e) {
$(this).text('Pending');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='Warning'>Pending</button>

You should add an additional CSS class that overrides the Bootstrap defaults to the button. Something like ...
.fixed_size_button {
width: 200px;
}
In some cases you might need to add !important to actually override prior CSS settings, especially since Bootstrap itself uses a lot of !important statements. E.g.
.fixed_size_button {
width: 200px !important;
}
But you should avoid this as much as possible since it is difficult to maintain.

change the image background of a button when it's clicked

I put an input button, and set its background with an image, now Ii want to change that image when the button is clicked.
Here is my relevant code:
<div id='back'>
<input type="button"/>
</div>
CSS code:
#back input{
width: 130px;
height: 130px;
background: url(img/back_default.png);
border: hidden;
}
Can it be done in CSS (as with links-<a> tags), or should I rely to JavaScript instead? Thanks.

Javascript is not needed:
#back input {
width: 130px;
height: 130px;
background: url(img/back_default.png);
border: hidden;
}
#back input:active {
background-image: url(img/back_default-active.png);
}

This should work with JavaScript:
function change() {
document.
getElementById("back").
getElementsByTagName("input").
style.backgroundImage = "url(img/anotherImage.png)"
}
Call it from your button click (or from anywhere you want):
<div id='back'>
<input type="button" onclick="change()"/>
</div>

It's as Matt Said you could use CSS's active pseudo class to change the background or alternatively you could use javascript to add an eventHandler (onClick Listner )to the button that changes the image.
HTML
<div id='back'>
<input type="button" id="xyz" value="Go to back" class="button"/>
</div>
JS
<script>
el = document.getElementById('xyz');
el.addEvenListener("click",changeImg,false);
function changeImg()
{
el = document.getElementById('xyz');
el.style.backround="url('img/back_default-active.png')";
}
</script>

Is redrawing the contents of a DIV by means of a function call possible?

Just an amateur/hobbyist here - what this is supposed to do is be a tool for a board game I play with friends. The plastic sliders the game uses are too loose to be reliable so I wanted to reproduce that functionality as a webpage to use on a smartphone while playing.
It gets a character's name from a form (on another page) and supplies it to
the one below. Based on the name, it chooses the right set of attributes from the switch statement (I removed all but two cases for the sake of simplicity), runs through a for loop to display the attributes in a list and highlight the "current" value as green. Two buttons are supposed to increase or decrease the array counter ("speed"), and rerun the function that draws the array with the new highlighted value. innerHTML is meant to redraw the div ("speeddiv") with the new results.
Now the javascript console in chrome is telling me that speedcounter() and character are undefined. I suspect this has something to do with the scope of the function and variables I'm using being lost through innerhtml. All I want to do is find a way to easily redraw/replace the stat counter so it appears that the highlighted number is moving up and down as you press the + or - buttons, within the div.
I'm only working on the "speed" attribute below, so I can get that working first.
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
html, body { height: 100%; width: 100%; margin: 0; }
#dossier {height: 10%; text-align: center; background: #808080}
#container {height: 90%; width: 100%; background: #000000; overflow: hidden; float: left}
#stats {height: 100%; width: 100%; float: left; position: relative}
#speeddiv, #mightdiv, #sanitydiv, #knowledgediv {width: 25%; height: 100%; text-align: center; float: left; position: relative; overflow: hidden}
#speeddiv {background: #0000FF}
#mightdiv {background: #FF0000}
#sanitydiv {background: #FFFF00}
#knowledgediv {background: #00FF00}
</style>
<?php $character = $_GET["character"]; ?>
<script type="text/javascript">
var character = "<?php echo $character ?>";
var sp;
var speed;
function speedcounter() {
var spx;
document.write(' <h2>Speed</h2></br>');
document.write('<input type="button" onclick="addspeed();" value="+"><br />');
for (spx=8; spx>=0; spx--) {
if (spx == speed) {
document.write('<font color=#00FF00>');
}
document.write(sp[spx]);
document.write('<font color=#000000><br />');
}
document.write ('<input type="button" onclick="remspeed();" value="-">');
}
function addspeed() {
if (speed < 8) {
speed++;
document.getElementById("speeddiv").innerHTML = "<script type="text/javascript">speedcounter();<\/script>";
}
}
function remspeed() {
if (speed > 0) {
speed--;
document.getElementById("speeddiv").innerHTML = "<script type="text/javascript">speedcounter();<\/script>";
}
}
switch (character) {
case "brandon":
sp=["0","3","4","4","4","5","6","7","8"];
mt=["0","2","3","3","4","5","6","6","7"];
sn=["0","3","3","3","4","5","6","7","8"];
kn=["0","1","3","3","5","5","6","6","7"];
speed=3;
might=4;
sanity=4;
knowledge=3;
break;
case "flash":
sp=["0","4","4","4","5","6","7","7","8"];
mt=["0","2","3","3","4","5","6","6","7"];
sn=["0","1","2","3","4","5","5","5","7"];
kn=["0","2","3","3","4","5","5","5","7"];
speed=5;
might=3;
sanity=3;
knowledge=3;
break;
}
</script>
<div id="dossier">
<script type="text/javascript">
document.write(character);
</script>
</div>
<div id="container">
<div id="stats">
<div id="speeddiv">
<script type="text/javascript">
speedcounter();
</script>
</div>
<div id="mightdiv">
<h2>Might</h2></br></br>
</div>
<div id="sanitydiv">
<h2>Sanity</h2></br></br>
</div>
<div id="knowledgediv">
<h2>Knowledge</h2></br></br>
</div>
</div>
</div>
</script>
</body>
</html>

I've created a jsfiddle from the code you've posted http://jsfiddle.net/amelvin/bwwce/ - working on it interactively in there may help.
I think your problem is what is happening with the document.write; the section on document.write explains that what document.write does is not very predictable.
Use a javascript library like jquery to insert elements into the webpage rather than document.write - the html() method in jquery (amongst others) allows you dynamically and predictably manipulate any aspect of the page based on events like button pushes, adding or removing buttons or divs.

How can I do image wrapping in the div area of the table cell?

I do an exercise to write an image gallery w/o using any libraries or jquery. I put an image into a table cell. I have functions in javascript moveLeft() and moveright().
The bug that images moves out of the cell area. I want user will see only the part of the image when it passes cell border.
The css code:
#moving_image {
background-image: url(picture/13.jpg);
background-repeat: no-repeat;
position: relative;
border:1px solid red;
width: 130px;
height: 100px;
left: 10px;
}
The html code for cell:
.....
<tr height="130">
<td width ="420" height="130">
<div id= "moving_image">
</div>
</td>
</tr>
Javascript code for moveRight() ,{as example. I also has moveLeft()}:
<script language=javascript type="text/javascript">
var x=10;
function moveRight()
var layerElement = document.getElementById("moving_image");
x+=10;
layerElement.style.left=x;
}
....
</script>
So, what I do in order to wrap an image in the table cell? Thanks

Try using z-index for table row and the div containing your image
or give to table rows CSS parameter "overflow:hidden"

try wrapping with another div and apply that css to the wrapping div like:
<td>
<div style="position:relative;overflow:hidden">
<div id= "moving_image">
</div>
</div>
</td>

The solution is simply to make chaneg the background-position instead of moving the div.
function moveRight()
var layerElement = document.getElementById("moving_image");
x+=10;
layerElement.style.background-position=x;
}