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>
Related
I am trying to manipulate 2 divs on my page, basically when 1 div is hiden - in this example div "template_class" - another div expands to fill the gap, however at the moment "template_class" hides but nothing happens to another div, why?
jQuery:
$( function() {
$( ".toogle" ).on( "click", function() {
$( ".template_class" ).toggleClass( "newClass", 1000 );
$( "#content-link2").toggleClass( "newClass3", 1000);
});
} );
css:
.toogle{
padding:0px 0px 0px 0px;
text-align: center;
margin:0px;
width: 160px;
height:40px;
top: 100px;
background:#FF931E;
z-index:15;
border-radius: 5px 5px 0px 0px;
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
transform-origin: bottom right;
position: relative;
right: 0px;
}
.newClass3{
margin-top: 50px;
width: 95%;
height: 89%;
border: 2px solid blue;
float: right;
}
.newClass{
top:0%;
width: 0%;
height: 0%;
}
HTML:
<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="pace pace-inactive">
<div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div>
</div>
<div class="features form-group">
<input class="form-control filestyle margin images" data-input="false" type="file" data-buttonText="Upload Logo" data-size="sm" data-badge="false" onchange="readURL(this);" />
<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>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<button onClick=" updateDatabase(this);" type="button" class="form-control margin btn btn-warning" id="getRequest">Save</button>
</div>
<div id="content-link2">
<button class="form-control btn btn-success toogle" ></button>
</div>
First i think you use the .togleClass() function wrongly. In your case, it is equal to .toggleClass("classname", true) which can only add the class to the element, not toggling it (source).
Other than that, i think your CSS is a bit of point. It's better to make it like this
.newClass{
display: none;
}
As for the other divs, they should go up automatically. I don't know the initial style of the #content-link2 , so clarification would help about why you need to make it float right etc.
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.
In my case, I want to make plus or minus button with add or minus to count number into text box. I can do it. But I've got the error. There have multi row with same design but different ID (I mean working with auto increment ID). When I click on plus button of top or middle row but it doesn't work on it's own row. It's always work on the last row.
Here is my Screenshot
Here is my HTML in JQuery Code. When Click on Add button at right top corner, this code work. It's doesn't the problem.
<input id="qty1" type="text" class="form-control dateadd" style="border- radius:0px;" name="count_date[]" value="0">
Here is my processing JQuery codes.
var test;
$('.dateadd').each(function() {
var test = this.id;
console.log("ID is",test, "Hello, world!");
});
$(document).ready(function(){
$('.plus').click( function() {
var counter = $(test).val();
counter++ ;
$(test).val(counter);
});
});
$(document).ready(function(){
$('.minus').click( function() {
var counter = $(test).val();
counter-- ;
$(test).val(counter);
});
});
Here is my Row HTML Code
<div class="col-sm-5" style="padding-right:0;">
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>
<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>
</span>
<input type="text" class="form-control qty" style="border-radius:0px;" name="count_date[]" value="0">
</div>
</div>
Here is my Row Add Jquery + HTML Code
var perDayHtml = '<div class="col-sm-5" style="padding-right:0;">'+
'<div class="input-group">'+
'<span class="input-group-btn">'+
'<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>'+
'<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>'+
'</span>'+
'<input id="qty1" type="text" class="form-control dateadd" style="border-radius:0px;" name="count_date[]" value="0">'+
'</div>'+
'</div>'
$("#optionBox").on('click', '.addPerDay', function(){
$('.remove').prop('disabled', false);
if (rowNo<maxi && rowNo<minusmaxi) {
rowNo++;
plan++;
$(".perDay:last").after(perDayHtml.replace(/qty1/g,"qty" + rowNo));
I guess that you've plus/minus button in same div with the dateadd input so you could just go up to the parent div then find the dateadd input :
$(document).ready(function(){
$('body').on('click', '.plus', function() {
var parent = $(this).closest('div');
var counter = parseInt(parent.find('.qty').val());
counter++ ;
parent.find('.qty').val(counter);
});
$('body').on('click', '.minus', function() {
var parent = $(this).closest('div');
var counter = parseInt(parent.find('.qty').val());
counter-- ;
parent.find('.qty').val(counter);
});
});
NOTE 1: NO need for multiple ready function.
NOTE 2: You should use event delegation .on() instead of .click() since your code is added dynamically to the DOM.
NOTE 3: Check in minus click event if the qte is greater than 0 before decreasing the counter :
counter>0?counter--:counter;
Hope this helps.
$(document).ready(function(){
$('body').on('click', '.plus', function() {
var parent = $(this).closest('div');
var counter = parseInt(parent.find('.qty').val());
counter++ ;
parent.find('.qty').val(counter);
});
$('body').on('click', '.minus', function() {
var parent = $(this).closest('div');
var counter = parseInt(parent.find('.qty').val());
counter>0?counter--:counter;
parent.find('.qty').val(counter);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>
<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>
</span>
<input type="text" class="form-control qty" style="border-radius:0px;" name="count_date[]" value="0">
</div>
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>
<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>
</span>
<input type="text" class="form-control qty" style="border-radius:0px;" name="count_date[]" value="0">
</div>
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>
<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>
</span>
<input type="text" class="form-control qty" style="border-radius:0px;" name="count_date[]" value="0">
</div>
I want to copy the attribute value val="ok" of my link to an input field in my bootstrap modal :
$('#link').on('click', function() {
var x = document.getElementById("link").getAttribute("val");
$("#mail").find(".compose").value = x;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-toggle="modal" data-target="#mail" id="link" val="ok" class="btn btn-warning btn-flat" title="Mail"><i class="fa fa-envelope"></i>Link</a>
<input class="form-control" placeholder="To:" class="compose" value="" />
You should create custom data attribute data-val for example and then you can access it like yourElem.dataset.val
var a = document.getElementById('link');
a.addEventListener('click', function() {
var val = a.dataset.val;
document.querySelector('.compose').value = val;
})
<a data-toggle="modal" data-target="#mail" id="link" data-val="ok" class="btn btn-warning btn-flat" title="Mail"><i class="fa fa-envelope"></i>Link</a>
<input class="form-control compose" placeholder="To:" value="" />
You can also use JQuery use data()
$('a').click(function() {
$('input').val($(this).data('val'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-toggle="modal" data-target="#mail" id="link" data-val="ok" class="btn btn-warning btn-flat" title="Mail"><i class="fa fa-envelope"></i>Link</a>
<input class="form-control compose" placeholder="To:" value="" />
I use bootstrap modal dialog.
My modal:
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Hello</h4>
</div>
<div class="modal-body">
Your name:
<input id="colorData" name="colorData" type="hidden" value=""/>
<input id="nameData" name="nameData" class="input-lg" type="text" value=""/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="postAnswer" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
I have buttons:
<div align="center" style="margin-bottom: 20px">
<button value="all" type="button" class="btn btn-lg btn-default">All</button>
<button value="green" type="button" class="btn btn-lg btn-success">Green</button>
<button value="blue" type="button" class="btn btn-lg btn-info">Blue</button>
</div>
And i have script:
<script type="text/javascript">
$(document).ready(function () {
$(".btn").click(function () {
var color = $(this).val();
$(".modal-body #colorData").val(color);
// $('#colorData').val() - is not empty
$("#myModal").modal('show');
});
$('#postAnswer').click(function (e) {
e.preventDefault();
$.ajax({
// $('#colorData').val() is empty
// $('#nameData').val() is not empty (I write this on dialog)
url: "#Url.Action("WriteAnswer", "Home")?name=" + $('#nameData').val() + "&color=" + $('#colorData').val(),
type: 'POST',
data: $('#nameData').serialize(),
success: function (data) {
//alert('successfully submitted');
}
});
$("#myModal").modal('hide');
});
});
</script>
After call function $(".btn").click element $('#colorData').val() is not empty.But! If I click button on modal then post empty value and value of input colorData is empty. Why? I wanna post data to controller, but value is reset. Sorry for my English.
You <button> element with id="postAnswer" also has class="btn", so when you click it, the $(".btn").click(function () { method is also called and var color = $(this).val(); returns null (because that button does not have a value attribute.
To handle this correctly, give an additional class name to the 3 'color' buttons (say)
<button value="all" type="button" class="color btn btn-lg btn-default">All</button>
<button value="green" type="button" class="color btn btn-lg btn-success">Green</button>
<button value="blue" type="button" class="color btn btn-lg btn-info">Blue</button>
and change the first script to
$(".color").click(function () {
var color = $(this).val();
$(".modal-body #colorData").val(color);
$("#myModal").modal('show');
});