As I'm designing my node.js application, I'm having trouble figuring out why my anchor links are not working/not clickable. The code itself was working fine before I designed the app. Is there a CSS property I need to configure to fix this? This is for the .player ul li links.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> -->
<meta charset="UTF-8">
<title>Open Mic Chatroom</title>
</head>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<!-- <a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a> -->
<h1>OpenMic</h1>
</div>
</div>
</nav>
</header>
<body>
<div class="container">
<div class="row">
<div class="musicians col-sm-3 col-md-3">
<!-- <div class="musicians col-sm-6 col-md-4"> -->
<!-- <div class="col-sm-6 col-md-4"> -->
<!-- <div class="thumbnail musicians-box"> -->
<!-- <img src="..." alt="..."> -->
<div class="caption">
<h2>Musicians Online</h2>
<p>
<div id="chatters">
</div>
</p>
<!-- <p>Button Button</p> -->
<!-- </div> -->
</div>
</div>
<div class="chatroom col-sm-8 col-md-8">
<!-- <div class="chatroom col-sm-6 col-md-4">
--><!-- <div class="col-sm-6 col-md-4">-->
<!-- <div class="thumbnail chatroom-box"> -->
<!-- <img src="..." alt="..."> -->
<div class="caption">
<h2>Messages</h2>
<div id="messagesContainer"></div>
<!-- </div> -->
</div>
<form action="" id="chat_form">
<input id="info" autocomplete="off" />
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
<!-- <h3>Messages</h3>
<div id="messagesContainer"></div>
<form action="" id="chat_form">
<input id="info" autocomplete="off" />
<input type="submit" value="Submit">
</form> -->
<!-- SoundCloud Recording Feature -->
<div class="row player">
<div class="soundcloud-player">
<ul>
<div id="player">
<!-- <button type="button" id="startRecording" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-record" aria-hidden="true"></span>
</button> -->
<li id="startRecording">Start Recording</li>
</div>
<!-- <button type="button" id="stopRecording" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-stop" aria-hidden="true"></span>
</button> -->
<li id="stopRecording">Stop Recording</li>
<!-- <button type="button" id="playBack" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-play" aria-hidden="true"></span>
</button> -->
<li id="playBack">Play Recorded Sound</li>
<!-- <button type="button" id="upload" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-open" aria-hidden="true"></span>
</button> -->
<li id="upload">Upload</li>
</ul>
<p class="status"></p>
<div class="audioplayer">
</div>
</div>
</div>
<!-- <script src="/socket.io/socket.io.js"></script> -->
</div>
<script>
$(document).ready(function() {
var trackUrl;
//establish connection
var socket = io.connect('http://localhost:3000');
$('#chat_form').on('submit', function (e) {
e.preventDefault();
var message = $('#info').val();
socket.emit('messages', message);
$('#info').val('');
});
socket.on('messages', function (data) {
console.log("new message received");
$('#messagesContainer').append(data);
$('#messagesContainer').append('<br>');
// insertMessage(data);
});
socket.on('add_chatter', function (name) {
var chatter = $('<li>' + name + '</li>').data('name', name);
$('#chatters').append(chatter);
});
// //Embed SoundCloud player in the chat
// socket.on('track', function (track) {
// console.log("new track", track);
// SC.oEmbed(track, {auto_play: true}, function (oEmbed) {
// console.log('oEmbed response: ' + oEmbed);
// });
// SC.stream(track, function (sound) {
// console.log("streaming", sound);
// sound.play();
// });
// // socket.on('remove chatter', function (name) {
// // $('#chatters li[data-name=]' + name + ']').remove();
// });
//SOUNDCLOUD RECORDING FEATURE
function updateTimer(ms) {
// update the timer text. Used when user is recording
$('.status').text(SC.Helper.millisecondsToHMS(ms));
}
//Connecting with SoundCloud
console.log("calling SoundCloud initialize");
SC.initialize({
client_id: "976d99c7318c9b11fdbb3f9968d79430",
redirect_uri: "http://localhost:3000/auth/soundcloud/callback"
});
SC.connect(function() {
SC.record({
start: function() {
window.setTimeout(function() {
SC.recordStop();
SC.recordUpload({
track: { title: 'This is my sound' }
});
}, 5000);
}
});
//Adds SoundCloud username to chat app
console.log("connected to SoundCloud");
SC.get('/me', function(me) {
console.log("me", me);
socket.emit('join', me.username);
});
// SC.get('/me/tracks', {}, function(tracks) {
// var myTracks = $("<div>");
// var heading = $("<h1>").text("Your tracks");
// var list = $("<ul>");
// tracks.forEach(function (single) {
// var listItem = $("<li>").text(single.permalink);
// listItem.on("click", function () {
// SC.oEmbed(single.permalink_url, {
// auto_play: true
// }, function(oEmbed) {
// console.log("oEmbed", oEmbed);
// $('.status').html(oEmbed.html);
// });
// });
// list.append(listItem);
// });
// $("body").append(myTracks.append(heading, list));
// });
// username = prompt("What is your username?");
// socket.emit('join', username);
// });
//Start recording link
$('#startRecording a').click(function (e) {
$('#startRecording').hide();
$('#stopRecording').show();
e.preventDefault();
SC.record({
progress: function(ms, avgPeak) {
updateTimer(ms);
}
});
});
//Stop Recording link
$('#stopRecording a').click(function (e) {
e.preventDefault();
$('#stopRecording').hide();
$('#playBack').show();
$('upload').show();
SC.recordStop();
});
//Playback recording link
$('#playBack a').click(function (e) {
e.preventDefault();
updateTimer(0);
SC.recordPlay({
progress: function (ms) {
updateTimer(ms);
}
});
});
//Uploaded SoundCloud Track after recorded
$('#upload').click(function (e) {
e.preventDefault();
SC.connect({
connected: function() {
console.log("CONNECTED");
$('.status').html("Uploading...");
SC.recordUpload({
track: {
title: 'My Recording',
sharing: 'public'
}
},
//When uploaded track, provides link user, but not everyone
function (track) {
// console.log("TRACK", track);
setTimeout(function () {
SC.oEmbed(track.permalink_url, {auto_play: true}, function(oEmbed) {
console.log("THIS IS oEMBED", oEmbed);
// console.log(oEmbed.html);
socket.emit('messages', oEmbed.html );
$('.status').html(oEmbed.html);
});
}, 8000);
// $('.status').html("Uploaded: <a href='" + track.permalink_url + "'>" + track.permalink_url + "</a>");
});
}
});
});
});
});
</script>
</body>
</html>
CSS:
body {
background: url('microphone.svg') no-repeat center center fixed;
background-position: 4% 100%;
}
h1, h2, h3 {
font-family: 'Bree Serif', serif;
}
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
color: white;
padding-left: 5%;
padding-bottom: 5%;
letter-spacing: 4px;
}
.navbar-default {
background-color: #000000;
/* background-image: url('SoundWave.jpg');
background-position: center;
opacity: 0.8;*/
}
input, button, select, textarea {
line-height: 3;
}
.chatroom, .musicians {
border-style: solid;
border-radius: 6%;
border-color: black;
margin-left: 20px;
height: 500px;
background-color: #F2F2F2;
opacity: 0.8;
}
.musicians {
height: fixed;
}
input#info {
margin: 47% 1%;
width: 656px;
border-radius: 10%;
}
.visualSoundContainer__teaser {
height: 100px;
}
.row {
padding-top: 2%;
}
.player {
text-align: center;
}
.player ul li {
z-index: 30;
}
Comment the margin property. It is cover the section. you can check it on firebug while selecting the anchor element.
input#info {
/*margin: 47% 1%;*/
width: 656px;
border-radius: 10%;
}
Working link: http://jsfiddle.net/95yz0h63/
add css
a{
cursor:pointer;
}
Related
I am using modal popup with fullcalendar jquery plugin to display my event details on my ASP.NET mvc application and I get my json events from the database. In the event details in the popup, I display the details using jquery.text() methods; I have a url as part of the event data details, how do i make this url clickable to open in another tab in the modal pop up.
<h2>Organiser</h2>
<html>
<head>
<meta charset='utf-8' />
<link href='~/Content/Site.css' rel='stylesheet' />
<link href='~/Content/main.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/list/main.min.css' rel='stylesheet' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/interaction/main.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/list/main.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
contentHeight: 820,
weekends: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,listMonth'
},
defaultView: 'dayGridMonth',
eventLimit: true, // allow "more" link when too many events
eventClick: function (arg) {
$('#modalBody > #title').text(arg.event.title);
$('#modalSchool').text(arg.event.extendedProps.school);
$('#modalYear').text(arg.event.extendedProps.year);
$('#modalStaffs').text(arg.event.extendedProps.staffs);
$('#modalDescription').text(arg.event.extendedProps.description);
$('#modalWhen').text(arg.event.start);
$('#modalEnd').text(arg.event.end);
$('#modalRecord').text(arg.event.extendedProps.recordID);
$('#modalUrl').text(arg.event.extendedProps.url);
$('#calendarModal').modal();
//var $link = $('div#modalUrl');
//$('.modalUrl').click(function () {
// window.open($link)
//});
},
events: function (fetchInfo, successCallback, failureCallback) //function to run whenever the calendar needs events
{
$.ajax({
type: "GET",
url: '#Url.Action("GetData", "Home")',
data: { start: fetchInfo.startStr, end: fetchInfo.endStr },
success: function (data) {
var events = [];
$.each(data, function (i, v) {
events.push({
title: v.School,
start: moment(v.Date).format("YYYY-MM-DD HH:mm"),
end: moment(v.EndTime).format("YYYY-MM-DD HH:mm"),
color: v.Color,
backgroundColor: v.Background,
allDay: v.FullDay,
extendedProps: {
description: v.EventType,
staffs: v.Staffs,
recordID: v.Record,
url: v.URL
}
});
});
successCallback(events); //pass the events back to fullCalendar
},
error: function (error) {
alert('fetching events failed');
console.log(error);
failureCallback(error);
}
});
}
});
calendar.render();
});
</script>
<style>
html,
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 1120px;
margin: 40px auto;
}
.fc-daygrid-event {
white-space: normal !important;
align-items: normal !important;
}
.fc .fc-toolbar-title {
font-size: 1.3em !important;
margin: 0;
}
.fc .fc-button {
font-size: 0.8em;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-12 col-xs-12">
<div id='calendar' style="margin-top: 20px; "></div>
</div>
</div>
<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="font-weight: 700;">Event Details</h4>
</div>
<div id="modalBody" class="modal-body">
<div id="modalDescription" style="margin-top:2px;"> <h4> At </h4></div>
<div id="modalSchool" style="margin-top:2px;"></div>
<h4 class="modal-title">On:</h4>
<div id="modalWhen" style="margin-top:2px; white-space:nowrap; overflow: hidden; max-width: 128pt;"></div>
<h4 class="modal-title">To</h4>
<div id="modalEnd" style="margin-top:2px; white-space:nowrap; overflow: hidden; max-width: 128pt;"></div>
<h4 class="modal-title">Staff Members Booked:</h4>
<div id="modalStaffs" style="margin-top:2px;"></div>
<h4 class="modal-title" style=" width: 20%; float: left;">Record ID:</h4>
<div id="modalRecord" style="margin-top:2px;"></div>
<h4 class="modal-title">Url</h4>
<div id="modalUrl" style="margin-top:2px;"></div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</body>
</html>
I have to unsuccessfully wrap the in ahref tag, also unsuccessfully tried to use onclick.
You can write the URL into the href property of an <a href element, so it forms a hyperlink.
It could be something simple like:
$('#modalUrl').html("<a href='" + arg.event.extendedProps.url + "'>" + arg.event.extendedProps.url + "</a>");
I have created 2 buttons, each button will replace content based on partial views, I could load the partial view on the page when I click the button, but this works only once, for instance I clicked button-1 and loaded data, now if I click on button 2 its not working, I needed to go back to main page to click again on button-2
<h3>
<a class="btn btn-warning" id="button1"> Partial View 1</a>
</h3>
<br/>
<h4>
<a class="btn btn-warning" id="buttton2"> Partial view 2</a>
</h4>
<br/> <br/>
<div id="testsim">
</div>
<script type="text/javascript">
$(function () {
$('#button1').click(function () {
$.get('#Url.Action("partialview1", "Home")', function (data1) {
if (data1) {
$('#testsim').replaceWith(data);
}
});
});
$('#button2').click(function () {
$.get('#Url.Action("partialview2", "Home")', function (data2) {
if (data2) {
$('#testsim').replaceWith(data2);
}
});
});
});
</script>
I'm trying to achieve button clicks to toggle between two buttons, everytime button click should replace the content in div tag. Any help would be appreciated.
I think the problem is because of replaceWith() which replaces the element itself i.e. outerHTML-
$(function() {
let $html, current;
$('#button1').click(function() {
/* $.get('#Url.Action("partialview1", "Home")', function(data1) {
if (data1) {
$('#testsim').replaceWith(data);
}
});*/
current = `button 1 was <em>clicked</em>`;
$html = `<div><strong>${current}</strong></div>`;
$('#testsim').replaceWith($html);
});
$('#button2').click(function() {
/*$.get('#Url.Action("partialview2", "Home")', function(data2) {
if (data2) {
$('#testsim').replaceWith(data2);
}
});*/
current = `button 2 was <strong>clicked</strong>`;
$html = `<div><em>${current}</em></div>`;
$('#testsim').replaceWith($html);
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>
<a class="btn btn-warning" id="button1"> Partial View 1</a>
</h3>
<br/>
<h4>
<a class="btn btn-warning" id="button2"> Partial view 2</a>
</h4>
<br/> <br/>
<div id="testsim" style="background: aquamarine; height: 200px">
</div>
As you can see that the styling of the element disappears after replacing. If you want to perform this operation then you should use html() which replaces only innerHTML-
$(function() {
let $html, current;
$('#button1').click(function() {
/* $.get('#Url.Action("partialview1", "Home")', function(data1) {
if (data1) {
$('#testsim').replaceWith(data);
}
});*/
current = `button 1 was <em>clicked</em>`;
$html = `<div><strong>${current}</strong></div>`;
$('#testsim').html($html);
});
$('#button2').click(function() {
/*$.get('#Url.Action("partialview2", "Home")', function(data2) {
if (data2) {
$('#testsim').replaceWith(data2);
}
});*/
current = `button 2 was <strong>clicked</strong>`;
$html = `<div><em>${current}</em></div>`;
$('#testsim').html($html);
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>
<a class="btn btn-warning" id="button1"> Partial View 1</a>
</h3>
<br/>
<h4>
<a class="btn btn-warning" id="button2"> Partial view 2</a>
</h4>
<br/> <br/>
<div id="testsim" style="background: aquamarine; height: 200px">
</div>
Hope this helps you.
I need the textarea to stretch across the width of the web page. Here's what the developer tools Source in Chromes gives.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Musak</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>API</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<h2>Musak</h2>
<style type="text/css">
textarea {
width: 800px;
height: 100px;
background-color: black;
font-size: 1em;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: 1px solid black;
color: green;
}
</style>
<div>
<textarea cols="800" id="alltext"></textarea>
<h2>Enter command</h2>
<input type="text" id="command" size="800" />
<input type="button" value="Search" onclick="find();" />
<p id="product" />
</div>
<hr />
<footer>
<p>© 2018 - My ASP.NET Application</p>
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<!--Script references. -->
<!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
<!--Reference the SignalR library. -->
<script src="/Scripts/jquery.signalR-2.2.3.min.js"></script>
<script>
var uriDump = 'api/dump';
var uriKey = 'api/key';
var uriKey2 = 'api/key2';
var uriDbase = 'api/dbase';
function find() {
var id = $('#command').val().toLowerCase();
var res = id.split(" ");
if (res.length > 0) {
switch (res[0]) {
case "dump":
$.getJSON(uriDump + '/')
.done(function (data) {
var box = $("#alltext");
box.val(box.val() + data);
})
.fail(function (jqXHR, textStatus, err) {
var box = $("#alltext");
box.val(box.val() + err);
});
break;
case "dbase":
$.getJSON(uriDbase + '/')
.done(function (data) {
var box = $("#alltext");
box.val(box.val() + data);
})
.fail(function (jqXHR, textStatus, err) {
var box = $("#alltext");
box.val(box.val() + err);
});
break;
case "key":
$.getJSON(uriKey + '/' + res[1] + '/')
.done(function (data) {
var box = $("#alltext");
box.val(box.val() + data);
})
.fail(function (jqXHR, textStatus, err) {
var box = $("#alltext");
box.val(box.val() + err);
});
break;
case "key2":
$.getJSON(uriKey2 + '/' + res[1] + '/' + res[2] + '/')
.done(function (data) {
var box = $("#alltext");
box.val(box.val() + data);
})
.fail(function (jqXHR, textStatus, err) {
var box = $("#alltext");
box.val(box.val() + err);
});
break;
default:
break;
}
}
}
</script>
</body>
EDIT
I found the piece of offending CSS..
In my site.css file:
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
You should set the width to 100% using css.
By doing that the textarea will get stretched as per the width of your browser tab.
<textarea style="width:100%"></textarea>
or make the following changes
textarea{
width:100%
}
Make the following changes in your code:
Remove the cols="800" attribute from your textarea.
Set the value of width property to 100% in css.
I have created a bootply with the code to better explain the issue:
https://www.bootply.com/TvGcNno4qx
If you add a note give it a title and content then click add, then inspect you will see that the div with classes, note-panel dragme and 1 other it has a margin that goes across the screen in full. I can't seem to get rid of it. Here is some of the code I have tried:
.note-panel{
width: 300px;
margin-bottom: 0px;
margin-top: 0px;
margin-left:0px;
margin-right: 0px;
}
.panel{
margin-bottom: 0px;
margin-top: 0px;
margin-left:0px;
margin-right: 0px;
}
.ui-draggable{
margin-bottom: 0px;
margin-top: 0px;
margin-left:0px;
margin-right: 0px;
}
And this is the div that is generated:
<div class='note-panel dragme' id='"+noteno+"'>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h3 class='panel-title'>"+title+"</h3>
</div>
<div class='panel-body'>"+content+"</div>
</div>
</div>
When the page loads, I often have 2 notes side by side, but because of the margin issue they load below each other instead of side by side.
Any help much appreciated!
I have tried to recreate the functionality here. Dragging seems to work fine and the panels are next to each other.
#noteBoardInt,
header.first-row {
display: flex;
justify-content: flex-start;
align-items: center;
}
.first-row .h1 {
margin: 0;
margin-right: 2em;
padding: 0;
}
#addNewNote {
display: none;
}
.note-panel {
min-width: 300px;
max-width: 300px;
}
.note-panel:not(:first-child) {
margin-left: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="first-row">
<h1 class="h1">Your Notes</h1>
<a class="btn btn-primary" id="addNote">Add A Note</a>
</header>
<div id="noteBoard">
<div id="noteBoardInt">
</div>
</div>
<!-- Modal -->
<div id="addNewNote" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add A new note</h4>
</div>
<div class="modal-body">
<div class="row" style="margin-bottom: 15px;">
<div class="col-md-4">
<p>Title:</p>
</div>
<div class="col-md-8">
<input id="title" class="form-control">
</div>
</div>
<div class="row" style="margin-bottom: 15px;">
<div class="col-md-4">
<p>Content:</p>
</div>
<div class="col-md-8">
<textarea id="noteContent" class="form-control"></textarea>
</div>
</div>
<div class="row" style="margin-bottom: 15px;">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title" id="panel-title"></h3>
</div>
<div class="panel-body" id="panel-body">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-10">
<button class="form-control btn btn-success" id="addPanel">Add</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- JavaScript jQuery code from Bootply.com editor -->
<script type="text/javascript">
var userNoteNo = 0;
var userName = "lsmith";
$(document).ready(function() {
var response = "";
//Put the notes on the page
$.ajax({
url: "/myaccount/sw/note-ajax.php?command=load&username=" + userName,
type: "GET",
async: false,
success: function(data) {
var response = JSON.parse(data);
console.log(response);
for (var i in response) {
returnCardLoad(response[i].title, response[i].content, response[i].x, response[i].y, response[i].noteno);
userNoteNo++;
}
}
});
});
$("#addNote").on("click", function() {
$("#addNewNote").modal("show");
});
$("#title").on("blur", function() {
$("#panel-title").html($("#title").val());
});
$("#noteContent").on("blur", function() {
$("#panel-body").html($("#noteContent").val());
});
$("#addPanel").on("click", function() {
var html = "";
var title = $("#title").val();
var content = $("#noteContent").val();
html = "<div class='note-panel dragme' id='" + userNoteNo + "'><div class='panel panel-primary'><div class='panel-heading'><h3 class='panel-title'>" + title + "</h3></div><div class='panel-body'>" + content + "</div></div></div>";
$("#noteBoardInt").append(html);
//empty the inputs
$("#title").val('');
$("#noteContent").val('');
$("#panel-title").html('');
$("#panel-body").html('');
$("#addNewNote").modal("hide");
addDrag();
addToDatabase(userName, title, content, userNoteNo);
//LAST THING
userNoteNo++;
html = "";
});
function returnCardLoad(title, content, x, y, noteno) {
var html1 = "";
html1 = "<div class='note-panel dragme' id='" + noteno + "'><div class='panel panel-primary'><div class='panel-heading'><h3 class='panel-title'>" + title + "</h3></div><div class='panel-body'>" + content + "</div></div></div>";
$("#noteBoardInt").append(html1);
$("#" + noteno).css("top", y + "px").css("left", x + "px");
addDrag();
}
function addDrag() {
$(".dragme").draggable({
scroll: false,
containment: "#noteBoardInt",
handle: ".panel-heading",
stop: function(event, ui) {
var noteBox = $(this)
var position = noteBox.position();
var leftPos = position.left;
var topPos = position.top;
var noteNo = noteBox.attr("id");
updateDatabase(leftPos, topPos, userName, noteNo);
}
});
}
function addToDatabase(userName, title, content, noteNo) {
//Do the ajax to add record of the item to the database
var x = 0;
var y = 0;
$.ajax({
url: "/myaccount/sw/note-ajax.php?command=add&username=" + userName + "&title=" + title + "&content=" + content + "&x=" + x + "&y=" + y + "&usernoteno=" + noteNo + "",
success: function() {}
});
}
function updateDatabase(x, y, username, noteno) {
$.ajax({
url: "/myaccount/sw/note-ajax.php?command=edit&username=" + userName + "&x=" + x + "&y=" + y + "&usernoteno=" + noteno + "",
success: function() {}
});
}
</script>
The problem is :- In below code I want to make it, if there is no photo uploaded then there will be a photo size bootstrap's glyphicon-user should be placed and when photo uploaded this will overwrite by the uploaded image.
//please add necessary files of bootstrap
<div class="row">
<div class="row">
<div class="col-md-4">
<h4 class="heading">Upload Patient's Photo :-</h4>
</div>
<div class="col-md-4">
<input type="file" class="form-control" name="patientpic" id="patientpic" onchange="readURL(this)"/>
</div>
</div>
//this is the script code for preview image when uploaded.
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#patientimg').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</div>
//this is image code here changes takes place to add bootstrap's glyphicon-user
<div class="col-md-2 col-sm-12">
<div class="thumbnail">
<img src="" alt="Select Patient Image" class="img-responsive" id="patientimg" name="patientimg" style="height:140px;width:140px;font-size:30px;text-align:center;color:gray;"/>
</div>
</div>
I tried this but the glyphicon-user in span tag reside below patient image.
just suggestion here, why not convert the bootstrap's glyphicon-user to png then add it on since when the user upload the image it will be appended according to your code.
check a sample here http://jsfiddle.net/ws3bb7sr/1/
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#patientimg').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row">
<div class="row">
<div class="col-md-4">
<h4 class="heading">Upload Patient's Photo :-</h4>
</div>
<div class="col-md-4">
<input type="file" class="form-control" name="patientpic" id="patientpic" onchange="readURL(this)"/>
</div>
</div>
<div class="col-md-2 col-sm-12">
<div class="thumbnail">
<img src="http://s5.postimg.org/4xpbh5oo3/user_000000_128.png" alt="" class="img-responsive" id="patientimg" name="patientimg" style="height:140px;width:140px;font-size:30px;text-align:center;color:gray;"/>
</div>
</div>
Not the best idea, but you can use this code:
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.3.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#img1 {
width: 100px;
height: 100px;
margin-left: 25px;
}
#img1::before {
position: absolute;
font-size: 100px;
}
</style>
<script>
$(function() {
setTimeout(function() {
$('#img1').attr('src', 'http://dummyimage.com/100x100/0ac72a/0011ff');
}, 2500);
});
</script>
</head>
<body>
<img src="" id="img1" class="glyphicon glyphicon-asterisk">
</body>
</html>
You might have some problems with transparent png files, so in better check it. If you have some problem with it you can remove the glyphicon classes when you update the src of your image.