We Keep Coding

Page width wider than viewport, blank space to the right

The width of my page is too long to the right. I don't know what is making it unsymmetrical. It probably is the many "position:relative"s that I put on it in order to make things beautiful and aligned since I'm not a masted of coding to do it any other way.
Here's how it looks like to me:
Print1
Print2
Here are my codes:
<script src="jQueryUI/external/jquery/jquery.js"></script>
<script src="jQueryUI/jquery-ui.js"></script>
<script src="jQueryUI/jquery-ui.css"></script>
<script>
$(function() {
$( ".draggable" ).draggable({
axis: 'x', containment: [-234,0,450,0]
});
});
</script>
<script>
$( "*", document.body ).click(function( event ) {
var offset = $( "#circle" ).offset();
event.stopPropagation();
var conta = (offset.left - 752)/3.42;
var posFinal = Math.round( conta );
$( "#luc" ).text( posFinal + "%" );
});
</script>
.draggable {
width: 700px;
height: 0px;
margin: 0px auto;
position: relative;
}
#bar {
width: 350px;
height: 12px;
background-color: #ff0a00;
border-right: 350px solid #00b4ff;
margin: 0px auto;
border-radius: 5px;
}
#circle {
position: relative;
top: -15px;
width: 18px;
height: 18px;
border-radius: 50%;
background: black;
margin: 0px auto;
}
#discordo {
position: relative;
top: 65px;
left: -386px;
font-weight: bold;
}
#concordo {
position: relative;
top: 31.8px;
left: 390px;
font-weight: bold;
}
#organizado {
position: relative;
top: -70px;
}
<form method="post" action="x.php" id="questions">
<h3>Pergunta 1</h3>
<p>Maconha deveria ser legalizada para uso recreacional</p>
<div id="organizado">
<p id="discordo">Discordo</p>
<p id="concordo">Concordo</p>
<div id="bar"> </div>
<div class="draggable ui-widget-content">
<div id="circle"> </div>
</div>
<div>
</div>
<p id="luc"></p>

Not enough html and css code to determine whats causing this, however try adding overflow-x:hidden to the whole document by putting the following in your css file:
html, body {
overflow-x:hidden;
}
The overflow property specifies what happens if content overflows an element's box. Setting it to hidden will clip all that excess space and make it invisible.
overflow-x will stop you from being able to scroll horizontally

Pass form field to modal

Im trying to pass specific form field from form into modal, with my code I managed to pass the whole form, but cant achive to target only specific elements.
1) Pass only spefic field from form.
2)In my code you can see that im replacing some css class with new one, and i need to check with IF , are they exist or not.
3) and if someone can explain to me $.ajax -how to force the cache to false.
4) Also i have 2 button trigers, if you click on first i want to show let's say 1,2,3,4 fields, and if you click on second button you get 3,4,5,6 fields, i know that i can write two sepparate js, but it would be better to hear from you what is best option to achive this.
This is mine js script for now:
function onclick_modal() {
var modalcreate = '<div id="fast-modal">';
modalcreate += '<div id="fastmodal-contain">';
modalcreate += '<div id="modal-data"></div>';
modalcreate += '</div>';
modalcreate += '</div>';
var $html_modal = $(modalcreate);
$('body').append($html_modal);
$html_modal.on('click', function(e){ if($(e.target).attr('id')=="fast-modal") { $(this).remove(); } });
$.ajax({
url: "https://linkwhereformis",
}).done(function(data) {
var $htmldata = $($(data).find('#formid')[0].outerHTML);
$htmldata.find('.dontneedthis').parent().remove();
$htmldata.find( "div" ).removeClass().addClass('grid-tablet-12-12 grid-desktop-12-12');
$htmldata.find( "div ul li span" ).removeClass().addClass('grid-tablet-12-12 grid-desktop-12-12 lajna');
$htmldata.find( "div ul li div" ).removeClass().addClass('grid-tablet-5-7 grid-desktop-6-8');
$htmldata.find('.buttons').html('<button type="submit" class="modalnibutton" data-step="5" id="confirm-form-submit modalbutton">Submit</button>');
$html_modal.find('#modal-data').html( $htmldata );
});
}
$(document).ready(function() {
$('#modallink').click(function(e) {
e.preventDefault();
onclick_modal();
});
$('#modallink2').click(function(e) {
e.preventDefault();
onclick_modal();
});
});
.modalnibutton{
float: none;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
background: rgba(255, 87, 34, 0.88);
color: white;
border-radius: 3px;
padding: 8px;
padding-left: 27px;
padding-right: 27px;
font-size: 16px;
}
#fast-modal{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
z-index: 9997;
background: rgba(0, 0, 0, 0.42);
overflow-y: scroll;
overflow-x: hidden;
}
#fastmodal-contain {
width: 700px; max-width: 100%; margin: 0 auto; background: #fff; min-height: 100px; margin-top: 50px;
}
#modal-data{
float: left; background: #fff; width: 100%; padding: 15px 0px;
}
#modalbutton {
margin-left: auto;
margin-right: auto;
display: block;
float: none;
border-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" title="" style="zoom: 1;" id="modallink">
SUBMIT LINK 1 </a>
<BR><BR>
<a href="#" title="" style="zoom: 1;" id="modallink2">
SUBMIT LINK 2 </a>

How to attach div to mouse pointer so it will work properly during scrolling

I'm trying to attach some kind of tips above buttons and show them on hover so they will appear directly aside to mouse pointer. I want to store text for those tips in data-attributes of buttons and create them dynamically using jquery. I use .pageX .pageY stuff to find coordinates of cursor, but it's working fine only in certain point of scroll.
$('button').mouseenter(function (e) {
var data = $(this).data('value');
if(data){
$('<div />', {
'class' : 'tip',
text : $(this).data('value'),
css : {
position: 'fixed',
top: e.pageY-230,
left: e.pageX+15
}
}).appendTo(this);
}
})
.mouseleave(function () {
$('.tip', this).remove();
})
.mousemove(function (e) {
$('.tip', this).css({
top: e.pageY-230,
left: e.pageX+15
});
})
button {
margin: 10px;
}
.divs {
width: 100%;
height: 350px;
background-color: #ddd;
margin: 0px;
}
.tip {
border: 1px solid #eee;
background: #fff;
box-shadow: 3px 4px 6px rgba(0,0,0,0.4);
padding: 3px;
font-weight: bolder;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="divs"></div>
<button data-value="Per">First</button>
<button data-value="Aspera">Second</button>
<button data-value="Ad">Third</button><br>
<button data-value="Astra">Yadi</button>
<button data-value="To infinity">Yada</button>
<button data-value="and beyond!">Bla-bla</button>
<div class="divs"></div>
You better watch it: http://jsfiddle.net/millerJr/ps8vf8ce/
So, how to attach those tips to pointer directly, regardless to scroll position? Thanks!

You need to use e.clientX and e.clientY in this manner
top: e.clientY+$(this).height() and left: e.clientX+$(this).width()/2 for bottom center of this element in scope. You can add anything else wrt the current element hovered upon
e.clientX and e.clientY will provide the exact mouse co-ordinates
Snippet Below
$('button').mouseenter(function (e) {
var data = $(this).data('value');
if(data){
$('<div />', {
'class' : 'tip',
text : $(this).data('value'),
css : {
position: 'fixed',
top: e.clientY+$(this).height(),
left: e.clientX+$(this).width()/2
}
}).appendTo(this);
}
})
.mouseleave(function () {
$('.tip', this).remove();
})
.mousemove(function (e) {
$('.tip', this).css({
top: e.clientY+$(this).height(),
left: e.clientX+$(this).width()/2
});
})
button {
margin: 10px;
}
.divs {
width: 100%;
height: 350px;
background-color: #ddd;
margin: 0px;
}
.tip {
border: 1px solid #eee;
background: #fff;
box-shadow: 3px 4px 6px rgba(0,0,0,0.4);
padding: 3px;
font-weight: bolder;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="divs"></div>
<button data-value="Per">First</button>
<button data-value="Aspera">Second</button>
<button data-value="Ad">Third</button><br>
<button data-value="Astra">Yadi</button>
<button data-value="To infinity">Yada</button>
<button data-value="and beyond!">Bla-bla</button>
<div class="divs"></div>

Element with multiple lines of text, how can I overflow them upwards?

http://jsbin.com/dodiha/1/edit?html,css,js,output
So basically I have a "log" element that shows recent messages. By default, it is collapsed and only 1 line-height high. You can hover over it to make it taller. The key is that it's anchored to the bottom of the page. When I append text, I want to see it, not the first line.
So this is what it looks like:
---------------
| first line | visible
---------------
| second line | hidden
| third line | hidden
And this is what I want it to look like:
| first line | hidden
| second line | hidden
---------------
| third line | visible
---------------
I've tried every variant of "vertical-align" hoping that it would orient the text properly. Obviously I can do prepend instead of append and it works for the collapsed view, but then when I expand the log window the messages are in reverse chronological order. Think of it like a command prompt where the most recent messages are on the bottom and the top ones disappear but you can scroll up to see the history.
function log(m) {
$('#log').append('<div>' + m + '</div>')
}
$("#add").on('click',function() {
log("New Entry Added...")
})
$('#log').hover(
function() {
$('#log').animate({"height":"200px"})
},
function() {
$('#log').animate({"height":"30px"})
}
)
$(document).ready(function() {
log('Document Ready.')
})
#log {
position: absolute;
bottom: 100px;
left: 5px; right: 5px;
background-color: lightgray;
height: 30px;
line-height: 30px;
font-size: 20px;
padding-left: 10px;
overflow: hidden;
float: bottom;
}
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="log"></div>
<button id="add">Add Entry</button>

Here's a simple way with minimal code change
Demo http://jsfiddle.net/zwvgfkjo/
HTML:
<div id="log">
<div class="wrapper">
</div>
</div>
<button id="add">Add Entry</button>
CSS:
.wrapper {
position: absolute;
left: 0;
bottom: 0;
}
#log {
position: absolute;
bottom: 100px;
left: 5px; right: 5px;
background-color: lightgray;
height: 30px;
line-height: 30px;
font-size: 20px;
padding-left: 10px;
overflow: hidden;
float: bottom;
}
JS:
function log(m) {
$('#log .wrapper').append('<div>' + m + '</div>');
}
$("#add").on('click',function() {
log("New Entry Added...")
})
$('#log').hover(
function() {
$('#log').animate({"height":"200px"})
},
function() {
$('#log').animate({"height":"30px"})
}
)
$(document).ready(function() {
log('Document Ready.')
})

Try this:
<div id="log-wrapper">
<div id="log"></div>
</div>
#log {
position: absolute;
bottom: 0;
}
function log(m) {
$('#log').append('<div>' + m + '</div>')
}
$("#add").on('click',function() {
log("New Entry Added...")
})
$('#log-wrapper').hover(
function() {
$('#log-wrapper').animate({"height":"200px"})
},
function() {
$('#log-wrapper').animate({"height":"30px"})
}
)
$(document).ready(function() {
log('Document Ready.')
})
#log-wrapper {
position: absolute;
bottom: 100px;
left: 5px; right: 5px;
background-color: lightgray;
height: 30px;
line-height: 30px;
font-size: 20px;
padding-left: 10px;
overflow: hidden;
float: bottom;
}
#log {
position: absolute;
bottom: 0;
}
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="log-wrapper">
<div id="log"></div>
</div>
<button id="add" type="button">Add Entry</button>

Trouble with the CSS to change start position on a slider

I'm very new to CSS and Javascript, and as a sort of project have been working on a slider that moves in two directions, both horizontally and vertically. I've used this guide as a model, and have something that is mostly serviceable.
However, I'd like for the slider to 'begin' not at the standard point of origin (that is, the left-most and upper-most slide) but at a different, customizable point--for instance, the horizontal and vertical centermost of the available slides--and nothing I try helps me to do this. I've played around with margins, positions and padding, but everything only messes the slider up. Does anyone have an idea for how I can change the slide that is showing on pageload?
Here's the CSS that I have so far:
.testprojbody
{
background-color: black;
padding: 0;
overflow: hidden;
}
.slider-holder
{
width: 98%;
height: 665px;
border: 2px black solid;
background-color: white;
float: center;
margin-left: 9px;
}
.slider
{
width: 987px;
height: 610px;
overflow: hidden;
float:center;
margin-top: 25px;
border: 2px black solid;
margin-left: 35px;
}
.holder
{
width: 200%;
height: 200%;
position: relative;
}
.slide
{
float: left;
width: 987px;
height: 610px;
position: relative;
}
.slider-navright
{
text-align: center;
margin: 310px 0 0 1030px;
position: absolute;
}
.slider-navright a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 20px solid #999;
}
.slider-navleft {
text-align: center;
margin: 310px 0 0 12px;
position: absolute;
}
.slider-navleft a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-right: 20px solid #999;
}
.slider-navtop {
text-align: center;
margin: 2px 0 0 501px;
position: absolute;
}
.slider-navtop a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 20px solid #999;
}
.slider-navbot {
text-align: center;
margin: 642px 0 0 501px;
position: absolute;
}
.slider-navbot a {
width: 0;
height: 0;
display: inline-block;
overflow: hidden;
text-indent: -9999px;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 20px solid #999;
}
Here's the Javascript, which allows for nav & animation and so on:
<script type="text/javascript">
var positionH = 0
var positionV = 0
$(document).ready(function(){
var slider = {
el: {
slider: $("#slider"),
allSlides: $(".slide"),
sliderNavRight: $(".slider-navright"),
sliderNavLeft: $(".slider-navleft"),
sliderNavTop: $(".slider-navtop"),
sliderNavBot: $(".slider-navbot"),
},
timing: 400,
slideWidth: 987,
slideHeight: 610,
// In this simple example, might just move the
// binding here to the init function
init: function() {
this.bindUIEvents();
},
bindUIEvents: function() {
// nav code
this.el.sliderNavRight.on("click", "a", function(event) {
slider.handleNavRightClick(event, this);
});
this.el.sliderNavLeft.on("click", "a", function(event) {
slider.handleNavLeftClick(event, this);
});
this.el.sliderNavTop.on("click", "a", function(event) {
slider.handleNavTopClick(event, this);
});
this.el.sliderNavBot.on("click", "a", function(event) {
slider.handleNavBotClick(event, this);
});
},
handleNavRightClick: function(event, el) {
positionH+=1;
event.preventDefault();
this.el.slider.animate({
scrollLeft: this.slideWidth * positionH
}, this.timing);
},
handleNavLeftClick: function(event, el) {
positionH-=1;
event.preventDefault();
this.el.slider.animate({
scrollLeft: this.slideWidth * positionH
}, this.timing);
},
handleNavTopClick: function(event, el) {
event.preventDefault();
positionV--;
this.el.slider.animate({
scrollTop: this.slideHeight * positionV
}, this.timing);
},
handleNavBotClick: function(event, el) {
event.preventDefault();
positionV++;
this.el.slider.animate({
scrollTop: this.slideHeight * positionV
}, this.timing);
},
};
slider.init();});
</script>
<script type="text/javascript">
//arrow functions
$(document.documentElement).keydown(function(event){
if (event.keyCode == 39){
//go right
event.preventDefault();
$('.slider-navright a')
.click();
} else if (event.keyCode == 37){
//go left
event.preventDefault();
$('.slider-navleft a')
.click();
} else if (event.keyCode == 38){
//go up
event.preventDefault();
$('.slider-navtop a')
.click();
} else if (event.keyCode == 40){
//go down
event.preventDefault();
$('.slider-navbot a')
.click();
}
});
// makes slider unselectable AND makes arrow nav work better
$(".slider").disableSelection();
</script>
and here's the relevant HTML:
<body class="testprojbody">
<div class="slider-holder">
<div class="slider" id="slider">
<div class="holder">
<div class="slide" id="slide-x0y0"></div>
<div class="slide" id="slide-x1y0"></div>
<div class="slide" id="slide-x0yA"></div>
<div class="slide" id="slide-x0y0"></div>
</div>
</div>
<nav class="slider-navright">
Move Right
</nav>
<nav class="slider-navleft">
Move Left
</nav>
<nav class="slider-navtop">
Move Up
</nav>
<nav class="slider-navbot">
Move Down
</nav>
</div>
</body>
</html>
Hope this is comprehensible, as I said, I'm very new (only picked up javascript about two weeks ago, and html maybe a month and a half ago), so I'm sure this is very sloppy, roundabout code. Still, if anyone could help, it would be much appreciated!
Thanks.

Looks like the first lines on your JavaScript could be what you're looking for.
Have you tried changing the values of
var positionH = 0
var positionV = 0
to the positions you want?
EDIT
Okay so following on you can use those variables you'll just need to add a little more code to your init method...
init: function() {
this.bindUIEvents();
this.el.slider.scrollLeft(positionH);
this.el.slider.scrollTop(positionV);
}
Then change the positionH and positionV variables.