I am using Kendo Grid to show the records.Below is my sample Html Page where i want to achieve the result for re-sizable in IE only. I have modified the code for Sample purpose only in Html. Resizable in Chrome is working.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/column-resizing">
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.mobile.all.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<style>
.wrap {
width: 95%;
margin: 0 auto;
}
.PageContentHeading {
padding: 3% 0;
}
.PageContentHeading h3 {
margin: 0;
}
.AddUser {
margin-left: 10px;
}
.AddUser a {
border-radius: 0;
padding: 4px 12px;
}
.btn-group-sm > .btn, .btn-sm {
border-radius: 0;
}
.SupplierCompanyName {
color: red;
}
.k-grid td {
border-left: none;
}
</style>
</head>
<body>
<script type="text/x-kendo-template" id="toolBarTemplate">
<div class="toolbar">
<div class="row">
<div class="col-md-4" style="float:right;">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
<input type="search" class="form-control" id='txtSearchString' placeholder="Search by User Details">
</div>
</div>
</div>
</div>
</script>
<div class="wrap">
<div class="main">
<div class="PageContentHeading">
<h3 class="pull-left">
Manage Users -
<span id="supplierPanel">
<span id="supplerCompany" class="SupplierCompanyName">
ABC Aerospace Inc.
</span> <span class="SupplierCompanyID">
[ ID_0001 ]
</span>
</span>
</h3>
<div class="pull-right AddUser">
Add User
</div>
<div class="pull-right ShowUsers">
<span class="labelname">Include Inactive Users:</span>
<input type="checkbox" checked data-toggle="toggle" data-on="True" data-off="False" data-onstyle="success" data-offstyle="danger" data-size="small">
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div id="grid"></div>
<script>
var apiUrl = "http://localhost:55020/";
var dynamicTemplate;
var col = [];
function switchChange(e) {
//alert('E');
}
function GetColumnsDetails() {
var rowsTempldateStyle = "<tr> <td style='word-wrap: break-word'> <span class='UserDesignation'> #:FullName #</span><span class='UserName'>#:title #</span> </td> ";
$.ajax({
url: apiUrl + "api/user/GetColumns/1",
type: 'GET',
async: false,
success: function (result) {
if (result.length > 0) {
for (var i = 0; i < result.length; i++) {
col.push({
field: result[i].colnameName,
title: result[i].titleName,
});
}
col.push({
title: "Active",
template: "<input type='checkbox' disabled='disabled' />",
width: "70px"
})
col.push({
title: "Action",
name: 'edit',
width: "70px"
});
}
}
});
}
$(document).ready(function () {
//
GetColumnsDetails();
$("#grid").kendoGrid({
dataSource: {
pageSize: 5,
batch: false, // enable batch editing - changes will be saved when the user clicks the "Save changes" button
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
sortable: true,
resizable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 2
},
//resizable: true,
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>
</body>
</html>
I am using Latest version of Kendo but still it is not giving me the expected result. I have tried also to give the Width of each column but the same problem in IE. Can someone help me with this.
Steve please try to update to the new version:
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
Here is your example working on IE now.
http://dojo.telerik.com/iKOKo/3
Kendo just released a fix to this problem on the 14th of july:
AutoComplete widget inside Grid filter menu not expanding to full width
Unable to create multi-page document
Column resizing doesn't work in IE
Undefined drag hint text when Grid column does not have title set
Active filter icon is not visible enough
Check more details about this update here:
http://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-r2-2016-sp2
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 am using Angular to display a list of active sessions with their details. I want to display a custom box with some text, two boxes per row. However, I encountered some problems with my code in the fiddle below. These problems are:
The font awesome icon near the "Name" text is not showing. I wanted to add a little icon for all the fields, but I don't understand why they are not showing
If the name/creator is too long, the boxes go mad (because of the height) and there will be rows with only one box
Can you help me with some ideas to make the code cleaner? And why aren't the font awesome icons not showing?
You can see a part of my code in the snippet below. Click on expand snippet to view the code in full action. (It's my first time using code snippets, I hope I included all the needed files in the right order, especially for Bootstrap).
Thank you!
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.test = "asdasd";
$scope.savedGraphSessions = [{
name: "test",
creator: "test",
created: 123456,
last_use: 1234567
},
{
name: "test",
creator: "test",
created: 123456,
last_use: 1234567
},
{
name: "testtesttesttesttesttest",
creator: "test",
created: 123456,
last_use: 1234567
},
{
name: "test",
creator: "test",
created: 123456,
last_use: 1234567
},
{
name: "test",
creator: "test",
created: 123456,
last_use: 1234567
},
{
name: "test",
creator: "test",
created: 123456,
last_use: 1234567
}
];
}
.active-session-box {
padding: 5px 5px 5px 5px;
border-radius: 10px;
border: 1px solid darkgrey;
margin: 5px 0 5px 0;
position: relative;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>
<div ng-controller="MyCtrl">
<div class="col-sm-3 col-lg-3"></div>
<div class="col-sm-6 col-lg-6">
<uib-tabset active="active">
<uib-tab index="0" heading="Continue working from existing session">
<div style="margin: 10px 5px 10px 5px; max-height: 90vh; overflow-y: auto">
<div ng-show="savedGraphSessions.length == 0" align="center">
There are no saved sessions. You can create one from the other tab.
</div>
<div class="row row-eq-height" style="margin-left: 0px; margin-right: 0px; width: 100%">
<div ng-repeat="session in savedGraphSessions | orderBy: 'last_use':true" class="col-sm-6 col-md-6 col-lg-6" style="padding: 5px 2px 0px 2px;">
<div class="active-session-box">
<i class="fa fa-user-o" aria-hidden="true"></i> Name: {{ session.name }}
<br> Created by: {{ session.creator || 'Unknown' }}
<br> Created at: {{ (session.created | date:'dd-MM-yyyy HH:mm:ss') || 'Unknown' }}
<br> Last access: {{ (session.last_use | date:'dd-MM-yyyy HH:mm:ss') || 'Unknown' }}
</div>
</div>
</div>
</div>
</uib-tab>
</uib-tabset>
</div>
</div>
</body>
<html>
I think you forgot to added font-awesome library, just add in your code and more long text you can used text-overflow for hat
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.test = "asdasd";
$scope.savedGraphSessions = [{
name: "test",
creator: "test",
created: 123456,
last_use: 1234567
},
{
name: "test",
creator: "test",
created: 123456,
last_use: 1234567
},
{
name: "testtesttesttesttesttest test test very very very very long long long long long long text",
creator: "test",
created: 123456,
last_use: 1234567
},
{
name: "test",
creator: "test",
created: 123456,
last_use: 1234567
},
{
name: "test",
creator: "test",
created: 123456,
last_use: 1234567
},
{
name: "test",
creator: "test",
created: 123456,
last_use: 1234567
}
];
}
.active-session-box {
padding: 5px 5px 5px 5px;
border-radius: 10px;
border: 1px solid darkgrey;
margin: 5px 0 5px 0;
position: relative;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>
<div ng-controller="MyCtrl">
<div class="col-sm-2 col-lg-2"></div>
<div class="col-sm-8 col-lg-8">
<uib-tabset active="active">
<uib-tab index="0" heading="Continue working from existing session">
<div style="margin: 10px 5px 10px 5px; max-height: 90vh; overflow-y: auto">
<div ng-show="savedGraphSessions.length == 0" align="center">
There are no saved sessions. You can create one from the other tab.
</div>
<div class="row row-eq-height" style="margin-left: 0px; margin-right: 0px; width: 100%">
<div ng-repeat="session in savedGraphSessions | orderBy: 'last_use':true" class="col-sm-6 col-md-6 col-lg-6" style="padding: 5px 2px 0px 2px;">
<div class="active-session-box">
<i class="fa fa-user-o" aria-hidden="true"></i> Name: {{ session.name }}
<br> Created by: {{ session.creator || 'Unknown' }}
<br> Created at: {{ (session.created | date:'dd-MM-yyyy HH:mm:ss') || 'Unknown' }}
<br> Last access: {{ (session.last_use | date:'dd-MM-yyyy HH:mm:ss') || 'Unknown' }}
</div>
</div>
</div>
</div>
</uib-tab>
</uib-tabset>
</div>
</div>
</body>
<html>
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;
}
I have following html file in my visual studio 2013 project
!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/my.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile- 1.4.2.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css">
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#loginBody {
color: aqua;
}
</style>
<script type='text/javascript'>
$(document).on('pageinit', function () {
//$.support.cors =true,
//$.mobile.allowCrossDomainPages = true;
$('#frmLogin').validate(
{
rules: {
username: {
required: true
},
password: {
required: true
}
},
messages: {
username: {
required: "Please enter your username."
},
password: {
required: "Please enter your password."
}
},
errorPlacement: function (error, element) {
error.appendTo(element.parent().prev());
},
submitHandler: function (form) {
//$("#frmLogin").submit(function (event) {
//event.preventDefault();
var credentials = { username: $("#username").val(), password: $("#password").val() };
$.ajax({
type: "POST",
url: "api/auth", // this url is just a placeholder
cache: false,
data: JSON.stringify(credentials),
contentType: "application/json; charset=utf-8",
success: function(data,status,jqxhr)
{
//validate the response here, set variables... whatever needed
//and if credentials are valid, forward to the next page
if (data.status == "success")
{
var obj = $.parseJSON(data);
localStorage.setItem("acccessToken", obj.accessToken);
alert(obj.accessToken);
$(":mobile-pagecontainer").pagecontainer ("change", "Authorization.html", { role: "page" });
//window.location.href = "http://www.jqueryvalidation.org";
}
else if(data.status== "error")
{
alert("Authentication Invalid.Please try again!");
return false;
}
//or show an error message
},
error: function (jqxhr, status, errorMsg)
{
// server couldn't be reached or other error
alert("jqXHR Status : " + jqxhr.status + " Status: " + status + " Error: " + errorMsg);
}
}, "json");
return false;
}//);
});
});
</script>
<style type="text/css">
label.error
{
color: red;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
margin-top: 0.5em;
width: 100%;
float: none;
}
#media screen and (orientation: portrait){
label.error { margin-left: 0; display: block; }
}
#media screen and (orientation: landscape){
label.error { display: inline-block; margin-left: 22%; }
}
em { color: red; font-weight: bold; padding-right: .25em; }
</style>
</head>
<body id="loginBody">
<div data-role="page" id="login">
<div data-role="header">
<h1> Intergraph </h1>
</div>
<div data-role="content">
<form id="frmLogin" method="post" action="api/auth" data-ajax="false">
<div data-role="fieldcontain">
<label for="username">
<em>* </em> Username:
</label>
<input type="text" id="username"
name="username" />
</div>
<div data-role="fieldcontain">
<label for="password">
<em>* </em>Password:
</label>
<input type="password" id="password"
name="password" />
</div>
<div class="ui-body ui-body-b">
<button class="btnLogin" type="submit" id="loginBtn"
data-theme="a">
Login
</button>
</div>
</form>
</div>
<!--<div data-role="page" id="success" data-theme="b">
<div data-role="header">
<h1>Thank You!!!</h1>
</div>
</div>-->
</div>
</body>
</html>
And here is code inside my my.css file
#loginBody
{
background: url('../images/my-generic-curved-background.png') no-repeat fixed center bottom;
background-size:390px 320px; color:blue;
}
#loginContent
{
text-align:center;
margin-top:210px;
color:aquamarine;
}
Now the weird thing is this file is not read or not loaded (I'm not sure and even I don't know how to ascertain that) but when I replace #loginBody selector with * (all) I can see the image in the background of the page is displayed and also blue color in the portion of the page which is not covered by the image (so may be my.css file is getting loaded on the run , I would suppose). So precisely what I mean is that css rules are getting applied on for * (all) selector and other selectors too but not for #loginBody selector, why is that?
All ideas and suggestions will be highly appreciated.
Thanks
You need to override the base styles setup by JQM. The .ui-overlay-a class sets colours that you aren't overriding and you've also placed your my.css before any JQM includes. To override, your my.css must be last in the link includes and you need to use !important.
I would suggest heading to the bottom of the official themes page and look through the overrides for each section. They don't provide information on background images but it will show you what the capabilities are out-of-the-box.
http://demos.jquerymobile.com/1.0rc2/docs/api/themes.html
The data-theme attribute can be applied to the header and footer
containers to apply any of the lettered theme color swatches. While
the data-theme attribute could be added to the content container, we
recommend adding it instead to div or container that has been assigned
the data-role="page" attribute to ensure that the background color is
applied to the full page.
I'd also suggest using developer tools to inspect the elements and how JQM is settings styles. In Chrome/FF you right click on an element and select Inspect Element.
In IE 7 and 8, whenever I want edit or add a row to the grid and the form shows up. The form and the grey background are shown ON TOP of the grid and not over it. I am not able to uplaod a pic but here is a diagram:
Grey area
[ jqGrid Form]
Not grey and accesible if I scroll down
My grid
If needed I can post my html/css/jq code. In firefox the functionality is fine, as in the grey area is OVER the grid and the grid is not accesible.
Is this is an IE bug?
I am using jquery 1.7.1, jqGrid 4.3.1 and jQuery ui 1.8.17.
<?php
session_start();
$user = $_SESSION['username'];
$uID = $_SESSION['UserID'];
$perms = $_SESSION['Access'];?><html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.17.custom.js" type="text/javascript"></script>
<script src="jquery.ui.datepicker.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="basic.css" />
<link rel="stylesheet" type="text/css" media="screen" href="base/jquery.ui.base.css" />
<link rel="stylesheet" type="text/css" media="screen" href="base/jquery.ui.theme.css" />
<script>
$(document).ready(function () {
var lastsel3;
var uID = <?php echo $uID; ?>;
$grid = $("#tasks"),
initDateEdit = function (elem) {
setTimeout(function() {
$(elem).datepicker({
dateFormat: 'dd-mm-yy',
showButtonPanel: true
});
}, 100);
},
initDateSearch = function (elem) {
setTimeout(function() {
$(elem).datepicker({
dateFormat: 'dd-mm-yy',
showButtonPanel: true
});
}, 100);
},
editSettings = {
//recreateForm:true,
jqModal:true,
reloadAfterSubmit:true,
closeOnEscape:true,
savekey: [true,13],
closeAfterEdit:true
};
$grid.jqGrid({
datatype: "local",
url: 'register.php',
sortname: 'Job ID',
sortOrder: 'asc',
postData: {uID:uID},
colNames: ["track","Job ID","Subject","Notes","Details","Due Date"],
colModel: [
{name: "track", index:"TrackID",align: "center", xmlmap:"TrackID", hidden: true, sortable: true},
{name: "Job ID", index:"TaskID",xmlmap:"TaskID", align:"center",sortable: true, sorttype: 'text', sortable: true, editable: false, editoptions: {readonly: true}},
{name: "Subject", index:"TaskSubject", align: "center", xmlmap:"TaskSubject",sorttype: 'text', sortable: true,editable: false, editoptions: {readonly: true}},
{name:"Notes", index:"Notes", align: "center",height: 20,xmlmap:"Notes",sorttype: 'text', sortable: true,editable: false, editoptions: {readonly: true}},
{name:"Details", index:"Details", align: "center", xmlmap:"Details", editable: true, edittype: 'select', editoptions: {value: 'Not Started:Not Started;In Progress:In Progress;Completed:Completed'}, sortable: true},
{name:"Due Date", index:"DueDate", align: "center", xmlmap:"DueDate",sorttype: 'text', sortable: true, editoptions: {dataInit: initDateEdit}, formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'}
],
onSelectRow: function(track){
if(track && track!==lastsel3)
{
$('#tasks').jqGrid('restoreRow',lastsel3);
$("#tasks").jqGrid('editGridRow',track,editSettings);
lastsel3=track;
}
else{
$("#tasks").jqGrid('editGridRow',track,editSettings);
}
},
editurl: 'editRow.php',
rowNum: 10,
shrinkToFit: true,
rowList: [10,20,50],
viewRecords: true,
xmlReader: {
root: "tasks",
row: "task",
repeatitems: false
},
pager: $('#navTasks'),
onInitializeForm : function () {
},
caption: "Your Tasks"
}).navGrid('#navTasks',{<?php
if ($user==NULL){
echo 'edit:false,add:false,del:false';
}
else{
echo 'edit:false,add:false,del:false';
}
?>},{},{},{},{multipleSearch: false, multipleGroup: false});
$('#tasks').setGridParam({datatype: "xml", postData: {uID:uID}}).trigger('reloadGrid',[{current:true}]);
setInterval(
function(){
$('#tasks').setGridParam({datatype: "xml", postData: {uID:uID}}).trigger('reloadGrid',[{current:true}]);
},100000);
$(window).bind('resize', function() {
$("#tasks").setGridWidth($(window).width()-"142");
$("#tasks").setGridHeight($(window).height()-"215");
}).trigger('resize');
});
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr >
<td colspan="100%">
<DIV id="header" class="header">
<div class="title" align="center">Welcome to Research Division - Work Flow System<br /><span>Your Tasks</span></div>
<?php
if($user == NULL){
echo '<div align="center"><br/> Please Sign-in here</div>';
}
else {
echo '<div align="center">Welcome '.$user.'!</div>';
}
?>
</DIV>
</td>
</tr>
<tr >
<td class="height">
<div class="sidebar">
<p>Assign Tasks</p>
<p>Completed Tasks</p>
<p><a id="logout" href="logout.php">Sign Out</a></p>
</div>
</td>
<td>
<DIV class="tables" align="center" >
<table id="tasks"></table>
<div id="navTasks"></div>
</DIV>
</td>
</tr>
</table>
</body>
and the CSS:
tr,td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent; }.tables{
min-width: 400px;}.header{
height: 100px;
width: 100%;
min-width: 500px;
background-color: #3E97D1;
border: solid 1px #681A38;
border-left: none;}.title{
font-size: 25px;}table{
border-collapse: collapse;
border: none;
padding: 0;
margin: 0px;
border-spacing: 0px;
width: 99%;
outline: 0;
height: 100%;}.height {
height: 99%;}.sidebar{
background-color: #009B95;
padding: 2px;
text-align: left;
border-right: solid 1px #681A38;
border-bottom: solid 1px #681A38;
width: 120px;
height: 99%;}
I suppose that the reason of the problem which you describe is that you don't use and <!DOCTYPE html ... before <html>. Without the line web browser work in quirks mode. You should use the doctype which corresponds to the dialect of HTML/XHTML which you use. Because one find <br /> in your code I suppose that you should include
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
before <html>. Look at the example from the jqGrid documentation.