We Keep Coding

No color on hover

I can't seem to figure out why the remaining 3 tabs don't have colors when I hover my mouse. The first 3 are working properly but the remaining 3 are not. I only made adjustments on their margins and nothing more. I just like to put code on my Blogger blog because its quite helpful. Below are the codes I'm having problems with. They are working on the console but when I put it on my blog the hover effect is not there.
p {
margin-top: -30px;
}
.ctc-txt.bg_ffffff.br6 {
width: 642px;
height: 200px;
}
.clr-txt {
top: 160px;
}
.text-center.ct-case.mb10 {
display: flex;
align-items: right;
justify-content: center;
margin-top: -20px;
margin-left: 120px;
}
.counter {
margin-left: -14px;
}
#copyStr {
margin-left: 260px;
margin-top: -10px;
}
#text {
top: -30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/Dieffer/test1/master/mycss.css">
<form method="post" id="text" action="">
<p class="">
Type or Paste your text here to change text case
</p>
<div class="relative">
<textarea class="ctc-txt bg_ffffff br6" name="form_content" id="form_content" onclick="cont()"> </textarea>
<img class="clr-txt" onclick="resete()" src="https://smallseotools.com/asets/images/cleartext.svg">
</div>
<div class="col-lg-12 col-sm-12 pn pt5 pb5">
<div class="button_box h-a">
<div class="counter">
<label>Character Count: <span id="cc"> 0 </span></label>
<label>- Word Count: <span id="wc"> 0 </span></label>
</div>
</div>
</div>
<div class="text-center ct-case mb10" id="ctc_button_box">
<input name="toggle" class="button ctc-btn br6" type="button" id="toggle" value="tOGGLE cASE">
<input name="sentence" class="button ctc-btn br6" type="button" id="sentence" value="Sentence case">
<input name="lower" class="button ctc-btn br6" type="button" id="lower" value="lower case">
<input name="" class="button ctc-btn br6" type="button" id="upper" value="UPPER CASE">
<input name="capitalized" class="button ctc-btn br6" type="button" id="capitalized" value="Capitalize Word">
<input name="alternating" class="button ctc-btn br6" type="button" id="alternating" value="aLtErNaTe cAsE">
</div>
</form>

Have you tried to clean your browser-cache?
Since the Code works just fine, maybe that could cause the problem.

Laravel send data to mysql using ajax

I am stuck with creating a function in ajax that would take a value from variable "code2" and send it to controller which would send it to database. Problem I am getting all the time is :
Is This Really Working? Oh by the way: newLat: code2
So it kind of works however instead of newLat: code2 it should be newLat: (html code defined in variable code2) So how can I fix this?
JS:
$(function() {
$('.content-link').click(function(e) {
e.preventDefault();
$('#content-link2').load($(this).attr("href"), function() {
$('#content').draggable({
containment: "#content-link2",
scroll: false
});
});
});
return false;
});
var code2 = "";
document.getElementById("content-link2").onmousedown = function() {
mousedown();
};
document.getElementById("content-link2").onmouseup = function() {
mouseup();
};
function mousedown() {
code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
}
function mouseup() {
code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
}
AJAX:
function updateDatabase(newCode)
{
code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
// make an ajax request to a PHP file
// on our site that will update the database
// pass in our lat/lng as parameters
$.post('http://localhost/template', {
_token: $('meta[name=csrf-token]').attr('content'),
newCode: ("code2"),
})
.done(function(code2) {
alert(code2);
})
.fail(function() {
alert("error");
});
}
Route:
Route::group(['middleware' => ['web']], function () {
Route::get('home', 'BuilderController#homepage');
Route::get('template', 'BuilderController#templates');
Route::post('template', 'BuilderController#postDB');
Route::get('logout', 'BuilderController#getLogout');
});
Controller:
class BuilderController extends Controller
{
function templates()
{
$templates = Template::all();
return view('layouts/template', ['templates' => $templates]);
$id = $templates->id;
}
function homepage()
{
return view('layouts/home');
}
public function getlogout()
{
\Auth::logout();
return redirect('/home');
}
public function postDB(Request $request) {
$newLat = $request->input('newCode');
return "Is This Really Working? Oh by the way: newLat: $newLat";
return redirect('layouts/template', ['templates' => $templates]);
}
}
Blade:
#extends('layouts.master') #section('title', 'Website Builder') #section('content')
<div class="container template_class ">
#foreach ($templates as $template)
<a class="content-link" href="{{ asset($template->file )}}">
<img src="{{ asset($template->image )}}"/>
</a> #endforeach
</div>
<div class="features form-group">
<input class="filestyle form-control margin images" data-input="false" type="file" data-buttonText="Upload Logo" data-size="sm" data-badge="false" onchange="readURL(this);" />
<button onClick=" updateDatabase(this);"</button>
<script>
$( function() {
$( document ).tooltip();
} );
</script>
<button style="display: none" class="form-control margin btn btn-primary" id="showColor">Show Colors</button>
<button style="display: none" class="form-control margin btn btn-primary" id="hideColor">Hide Colors</button>
<input title="Choose a color and then click on any box" style="display: none" class="btn btn-default form-control margin" type="color" id="colorChoice">
<a style="display: none" href="#" class="btn btn-default form-control margin" id="cp4">Background</a>
<button style="display: none" onclick="$('#fonts1').bfhfonts({font: 'Arial'})" id="fontsShow" class="btn btn-primary form-control margin">Load Fonts</button>
<button style="display: none" class="btn btn-primary form-control margin" id="fontsHide">Hide Fonts</button>
<select title="Choose a font and then click on any box" style="display: none" id="fonts1" class="form-control margin"></select>
<button style="display: none" onclick="$('#googlefonts1').bfhgooglefonts({font: 'Lato'})" id="googleShow" class="btn btn-primary form-control margin">Google fonts</button>
<button style="display: none" class="btn btn-primary form-control margin" id="googleHide">Hide Google</button>
<select title="Choose a font and then click on any box" style="display: none" id="googlefonts1" class="form-control margin"></select>
<button style="display: none" onclick="$('#fontsizes1').bfhfontsizes({fontsize: '12'})" id="sizeShow" class="btn btn-primary form-control margin">Load font size</button>
<button style="display: none" class="btn btn-primary form-control margin" id="sizeHide">Hide font size</button>
<select title="Choose a font size and then click on any box" style="display: none" id="fontsizes1" class="form-control margin"></select>
<button style="display: none" class="form-control margin btn btn-default" id="finishEdit">Done</button>
<button class="form-control margin btn btn-default" id="startEdit">Edit</button>
<button type="button" class="form-control margin btn btn-warning" id="getRequest">Save</button>
</div>
<div id="content-link2"></div>
</body>
<link href="{{asset('css/bootstrap-colorpicker.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('css/bootstrap-formhelpers.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset ('//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css')}}" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{!! asset('js/bootstrap-colorpicker.min.js') !!}">
</script>
<script type="text/javascript" src="{!! asset('js/bootstrap-formhelpers.js') !!}">
</script>
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
<script type="text/javascript" src="{!! asset('js/bootstrap-filestyle.min.js') !!}">
</script>
</html>
#endsection

Check /path/to/project/root/storage/logs/laravel.log for what Internal Server Error is occurring. If there is no log file make sure APP_DEBUG in /path/to/project/root/.env is set to true.

Reducing code and using .off after using a feature

There are two problems that I have with my Javascript, first I think function is very long and I would like to find out if there is a way to reduce it, the problem is it needs to be working together as all of this Javascript is allowing to edit a page.
2nd problem is that when I change font and/or choose font size it will change both things, so for example if I change font-size in one div and then I want to change font-family for other it will change font-size and font-family, so what should I do so that after each edit it turns off click function but if pressed again it will add it back so that feature can be used again, so basically only one feature can be used at the time.
$(function() {
$('#cp4').colorpicker().on('changeColor', function(e) {
$('#content-link2')[0].style.backgroundColor = e.color.toString(
'rgba');
});
});
$(document).ready(function() {
$("#startEdit").click(function () {
if ($("#startEdit").on('click')) {
$(document).ready(function() {
var font;
$("#fonts1").on("change", function(){
font = $(this).val();
});
$("#content-link2").on("click", "*", function() {
$(this).css('font-family',font);
});
});
$(document).ready(function() {
var font;
$("#googlefonts1").on("change", function(){
font = $(this).val();
});
$("#content-link2").on("click", "*", function() {
$(this).css('font-family',font);
});
});
$(document).ready(function() {
var fsize;
$("#fontsizes1").on("change", function(){
fsize = $(this).val();
});
$("#content-link2").on("click", "*", function() {
$(this).css('font-size',fsize);
});
});
$(document).ready(function() {
var color;
$("#colorChoice").on('input', function(){
color = $(this).val();
});
$('#content-link2').on('click', '*', function() {
$(this).css('background',color);
});
});
} else {
$( "#content-link2" ).off( "click" );
}
});
});
<div class="features form-group">
<input class="filestyle form-control margin images" data-input="false" type="file" data-buttonText="Upload Logo"
data-size="sm" data-badge="false" onchange="readURL(this);" />
<!--<button onClick=" updateDatabase(this);"</button>-->
<button style="display: none" class="form-control margin btn btn-primary" id="showColor">Show Colors</button>
<button style="display: none" class="form-control margin btn btn-primary" id="hideColor">Hide Colors</button>
<input style="display: none" class="btn btn-default form-control margin" type="color" id="colorChoice">
<a style="display: none" href="#" class="btn btn-default form-control margin" id="cp4">Background</a>
<button style="display: none" onclick="$('#fonts1').bfhfonts({font: 'Arial'})" id="fontsShow" class="btn btn-primary form-control margin">Load Fonts</button>
<button style="display: none" class="btn btn-primary form-control margin" id="fontsHide">Hide Fonts</button>
<select style="display: none" data-font="Arial" id="fonts1" class="form-control margin"></select>
<button style="display: none" onclick="$('#googlefonts1').bfhgooglefonts({font: 'Lato'})" id="googleShow" class="btn btn-primary form-control margin">Google fonts</button>
<button style="display: none" class="btn btn-primary form-control margin" id="googleHide">Hide Google</button>
<select style="display: none" id="googlefonts1" class="form-control margin"></select>
<button style="display: none" onclick="$('#fontsizes1').bfhfontsizes({fontsize: '12'})" id="sizeShow" class="btn btn-primary form-control margin">Load font size</button>
<button style="display: none" class="btn btn-primary form-control margin" id="sizeHide">Hide font size</button>
<select style="display: none" id="fontsizes1" class="form-control margin"></select>
<button style="display: none" class="form-control margin btn btn-default" id="finishEdit">Done</button>
<button class="form-control margin btn btn-default" id="startEdit">Edit</button>
</div>

Bootstrap - Reducing spacing between form-controls like textbox and label

I'm developing the a .NET(C#) MVC web-application.
I have the following bootstrap drop-down menu.
I'm trying to achieve the following two things :
1) I'm trying to reduce the spacing between a label and it's respective text-box. I tried using "col-xs-1 col-form-label" instead of "col-xs-2 col-form-label" but then the textbox overlapped the label.
2) I want to reduce the height of the textbox.
How can I achieve these?
here's my cshtml code :
<div class="container">
<div class="row">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search" id="searchBar" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" onclick="ReloadData()"><span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span></button>
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Click To Expand"></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form" style="font-family:Calibri;font:94% 'v', sans-sarif;background-color:#FAFAFA">
<br />
<div class="form-group row">
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtChopRequestNo" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
<label for="ReferenceNo" class="col-xs-2 col-form-label">Reference No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtReferenceNo" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtCreatedBy" />
#*#Html.TextBox("name",null, new { id = "txtCreatedBy", style = "width:156px;" })*#
</div>
</div>
<div class="form-group row">
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtChopper" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtManager" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtLeagalApprover" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
</div>
//and so on
</form>
</div>
</div>
<button type="reset" class="btn btn-warning" id="clearAll" style="background-color:#cc0000" data-toggle="tooltip" title="Clear All Search Parameters">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div>
</div>
</div>
And here's my CSS code :
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#media screen and (min-width: 1000px) {
#adv-search {
width: 1110px;
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
min-width: 1110px;
}
}

I'm trying to reduce the spacing between a label and it's respective text-box.
Give your texboxes a css class (pull-left or whatever you want to call it) and then use css to pull the textboxes to the left.
.pull-left {
margin-left: -20px; /* Try with different values until you are happy */
}
I want to reduce the height of the textbox.
Try using padding and line-height and play with the numbers until you are happy with the height:
input[type="text"]{ padding: 20px 10px; line-height: 28px; }
The above will apply 20px to top and bottom and 10px to left and right. Here are some other ways:
padding: 20px 10px 20px 10px; /*top right bottom left*/
Finally make sure these margins play well when you are changing the size of the screen. If it looks good on big screen, it may not look good on smaller screens so choose something which will look good across all screens.

Have NO idea why this JQuery animate is not working

Okay so basically I have 3 divs, called first, nextscreen, and finalscreen. I created some jquery that allows the divs to slide in and out of view, when pressing next or back. Animating from first to nextscreen when pressing Next >>> and <<< Back works, UNTIL I press Next >>> to animate from nextscreen to finalscreen. When I go <<< Back from finalscreen to nextscreen, and then try go <<< Back from nextscreen to first, NEXTSCREEN SIMPLY DOES NOT MOVE. However if I try make it slide out to the left it does work, but I need it to slide out to the right, or it just looks silly. This is my html:
<div class="row">
<div class="col-lg-12" id="first" style="position: relative; right: 0px">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<div class="form-group">
<label for="tableName">Name</label>
<input type="text" class="form-control" id="tableName" name="tableName" placeholder="Name your list..." />
</div>
<div class="form-group">
<label for="Description">Description</label>
<textarea class="form-control" id="Description" name="Description" placeholder="Provide a brief description of this list..." rows="3"></textarea>
</div>
<button type="button" class="btn btn-default" id="next">Next >>></button>
</div>
</div>
<div class="col-lg-12" id="nextscreen" style="right: -2000px; top: -220px; position: relative">
<div class="col-lg-6">
<div class="form-group">
<label for="addField">Add Field</label>
<input type="text" class="form-control" id="addField" placeholder="Field Name..." />
</div>
<button type="button" class="btn btn-default" id="add">Add Field >>></button>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="fieldList">Field List</label>
<select multiple class="form-control" id="fieldList" style="height: 200px">
<option>Name*</option>
<option>Cell*</option>
</select>
</div>
<p>* Compulsory fields</p>
<button type="button" class="btn btn-default" id="back"><<< Back</button>
<button type="button" class="btn btn-default" id="final">Next >>></button>
<button type="button" class="btn btn-default pull-right" id="remove"><<< Remove Field</button>
<input type="hidden" name="SelectedOptions" id="Name" value="Name" />
<input type="hidden" name="SelectedOptions" id="Cell" value="Cell" />
</div>
</div>
<div class="col-lg-12" id="finalscreen" style="right: -4000px; top: 0px; position: relative">
<div class="form-group">
<button class="btn btn-primary" type="submit" id="createtable">Create Table</button>
<button type="button" class="btn btn-default" id="finalback"><<< Back</button>
</div>
</div>
</div>
And this is my JQuery:
$("#next").click(function () {
$("#first").animate({ left: '-2000px' });
$("#nextscreen").animate({ right: '0px' });
$("#finalscreen").animate({ right: '-2000px' });
});
$("#final").click(function () {
$("#first").animate({ left: '-4000px' });
$("#nextscreen").animate({ left: '-2000px' });
$("#finalscreen").animate({ right: '0px' });
});
$("#back").click(function () {
$("#first").animate({ left: '0px' });
$("#nextscreen").animate({ right: '-2000px' })
$("#finalscreen").animate({ right: '-4000px' });
});
$("#finalback").click(function () {
$("#first").animate({ left: '-2000px' });
$("#nextscreen").animate({ left: '0px' });
$("#finalscreen").animate({ right: '-2000px' });
});
Here is a fiddle http://jsfiddle.net/yjZBe/

I think it would be way easier and efficient to place those elements in a container and animate only that one instead of each element.