Pokus o editaci textu
This commit is contained in:
Vendored
+25
-1
@@ -70,7 +70,7 @@ ul.user li a:hover {
|
||||
}
|
||||
|
||||
.edit a {
|
||||
color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.img-fluid{
|
||||
@@ -102,4 +102,28 @@ ul.user li a:hover {
|
||||
background: white;
|
||||
cursor: inherit;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.onas{
|
||||
position: relative;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding:2em;
|
||||
width:60%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size:1.2em;
|
||||
}
|
||||
|
||||
.onas:hover .edit {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h2{
|
||||
text-align: center;
|
||||
padding-top:2em;
|
||||
}
|
||||
|
||||
textarea{
|
||||
width:100%;
|
||||
}
|
||||
Vendored
+42
-39
@@ -1,49 +1,52 @@
|
||||
var schemacolor = "#fa8072";
|
||||
|
||||
$(document).ready(function(){
|
||||
$("a").hover(function(){
|
||||
$(this).css("color", schemacolor);
|
||||
}, function(){
|
||||
$(this).css("color", "black");
|
||||
});
|
||||
document.getElementById("jmeno").style.color = schemacolor;
|
||||
$(document).on('change', '.btn-file :file', function() {
|
||||
$("a").hover(function(){
|
||||
$(this).css("color", schemacolor);
|
||||
}, function(){
|
||||
$(this).css("color", "black");
|
||||
});
|
||||
document.getElementById("jmeno").style.color = schemacolor;
|
||||
$(document).on('change', '.btn-file :file', function() {
|
||||
var input = $(this),
|
||||
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
|
||||
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
|
||||
input.trigger('fileselect', [label]);
|
||||
});
|
||||
});
|
||||
|
||||
$('.btn-file :file').on('fileselect', function(event, label) {
|
||||
|
||||
var input = $(this).parents('.input-group').find(':text'),
|
||||
log = label;
|
||||
|
||||
if( input.length ) {
|
||||
input.val(log);
|
||||
} else {
|
||||
if( log ) alert(log);
|
||||
}
|
||||
|
||||
});
|
||||
$('.btn-file :file').on('fileselect', function(event, label) {
|
||||
|
||||
});
|
||||
function readURL(input) {
|
||||
if (input.files && input.files[0]) {
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.onload = function (e) {
|
||||
$('#uvodni').attr('src', e.target.result);
|
||||
console.log("Nahrano");
|
||||
}
|
||||
|
||||
reader.readAsDataURL(input.files[0]);
|
||||
}
|
||||
var input = $(this).parents('.input-group').find(':text'),
|
||||
log = label;
|
||||
|
||||
if( input.length ) {
|
||||
input.val(log);
|
||||
} else {
|
||||
if( log ) alert(log);
|
||||
}
|
||||
|
||||
function changeImage(){
|
||||
$("#imgInp").change(function(){
|
||||
readURL(this);
|
||||
});
|
||||
});
|
||||
$("#demo-editor-bootstrap").wysihtml5();
|
||||
});
|
||||
function readURL(input) {
|
||||
if (input.files && input.files[0]) {
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.onload = function (e) {
|
||||
$('#uvodni').attr('src', e.target.result);
|
||||
console.log("Nahrano");
|
||||
}
|
||||
|
||||
reader.readAsDataURL(input.files[0]);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function changeImage(){
|
||||
$("#imgInp").change(function(){
|
||||
readURL(this);
|
||||
});
|
||||
}
|
||||
|
||||
function changeText(){
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/template.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.wysihtml5/0.0.2/bootstrap-wysihtml5-0.0.2.css"></link>
|
||||
<link href="css/svatweb.css" rel="stylesheet">
|
||||
|
||||
<title>Svatební web</title>
|
||||
@@ -29,13 +30,13 @@
|
||||
<li><a href="#"> Náš příběh </a></li>
|
||||
<li><a href="#"><span class="glyphicon glyphicon-plus-sign"></span></a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="profile-pic">
|
||||
<img src="./img/affair-anniversary-beach-1024993.jpg" class="img-fluid" id="uvodni" alt="Krásná úvodní fotografie">
|
||||
<div class="edit"><a href="#"><i class="glyphicon glyphicon-edit" data-toggle="modal" data-target="#exampleModal"></i></a></div>
|
||||
<div class="edit"><a href="#exampleModal"><i class="glyphicon glyphicon-edit" data-toggle="modal" data-target="#exampleModal"></i></a></div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
@@ -73,11 +74,52 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- O nás -->
|
||||
<h2> Adam a Eva </h2>
|
||||
<div class="onas">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
|
||||
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||||
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<div class="edit"><a href="#exampleModal2"><i class="glyphicon glyphicon-edit" data-toggle="modal" data-target="#exampleModal2"></i></a></div>
|
||||
</div>
|
||||
|
||||
<!-- Modal2 -->
|
||||
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Editovat text</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 nopadding">
|
||||
<textarea id="demo-editor-bootstrap"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
|
||||
<button type="button" class="btn btn-primary" onclick="changeText()" data-dismiss="modal">Uložit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Optional JavaScript -->
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
|
||||
<script src="https://github.com/jhollingworth/bootstrap-wysihtml5/blob/master/src/bootstrap-wysihtml5.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user