Getting a strange problem when loading the twitter widget asynchronously on IE. It loads just fine, but for some reason doesn't apply any style (color, background are blank/default) only on IE (7,8,9).
Loading the script the standard way works also in IE.
The code looks like this and works on all browsers (including IE, but without the style)
<div id="twitter_div"></div>
<script>
jQuery(window).load(function () {
jQuery('<link rel="stylesheet" type="text/css" href="http://widgets.twimg.com/j/2/widget.css" >').appendTo("head");
jQuery.getScript('http://widgets.twimg.com/j/2/widget.js', function () {
var twitter = new TWTR.Widget({
id: 'twitter_div',
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#add459',
color: '#382638'
},
tweets: {
background: '#ffffff',
color: '#141114',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('chucknorris').start();
})
})
</script>
You can see this live on this link.
It loses the style on IE even when set to chucknorris.
What you think to put the css in you own css to avoid problems
<style type="text/css">
#twitter_div .twtr-doc, #twitter_div .twtr-hd a, #twitter_div h3, #twitter_div h4 {
background-color: #ADD459 !important;
color: #382638 !important;
}
#twitter_div .twtr-bd, #twitter_div .twtr-timeline i a, #twitter_div .twtr-bd p {
color: #141114 !important;
}
#twitter_div .twtr-avatar {
display: none;
}
#twitter_div .twtr-new-results, #twitter_div .twtr-results-inner, #twitter_div .twtr-timeline {
background: white !important;
}
#twitter_div .twtr-tweet a {
color: #4AED05 !important;
}
</style>
Also good is it if put it in your main.css file to get a better caching experince of your static stuff and is all in one place
<script>
jQuery(window).load(function () {
$("head").append("<link rel='stylesheet' type='text/css' href='http://widgets.twimg.com/j/2/widget.css' />");
jQuery.getScript('http://widgets.twimg.com/j/2/widget.js', function () {
var twitter = new TWTR.Widget({
id: 'twitter_div',
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#add459',
color: '#382638'
},
tweets: {
background: '#ffffff',
color: '#141114',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('chucknorris').start();
})
})
</script>
as found here:
How to asynchronously load CSS using jQuery?
$("head").append("<link rel='stylesheet' type='text/css' href='http://widgets.twimg.com/j/2/widget.css' />");
to make the code complete:
<div id="twitter_div"></div>
<script>
jQuery(window).load(function () {
$("head").append("<link rel='stylesheet' type='text/css' href='http://widgets.twimg.com/j/2/widget.css' />");
jQuery.getScript('http://widgets.twimg.com/j/2/widget.js', function () {
var twitter = new TWTR.Widget({
id: 'twitter_div',
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#add459',
color: '#382638'
},
tweets: {
background: '#ffffff',
color: '#141114',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('chucknorris').start();
})
})
</script>
edit somehow this is the only thing that seems to work in IE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<link href="http://widgets.twimg.com/j/1/widget.css" type="text/css" rel="stylesheet">
<link href="http://widgets.twimg.com/j/2/widget.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
</head>
<body>
<div id="twitter_div"></div>
<script type="text/javascript">
$(document).ready(function () {
var twitter = new TWTR.Widget({
id: 'twitter_div',
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#add459',
color: '#382638'
},
tweets: {
background: '#ffffff',
color: '#141114',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('chucknorris').start();
})
</script>
</body>
</html>
Related
When I click on the filter icon next to each column, it opens the popup showing the options for selecting the filter, however only the popup shows, the actual grid behind it vanishes. So the popup is just floating on an empty background. When I close the popup, the grid returns.
I use Vue.js only by <script src="./js/vue.js"></script>
My html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./node_modules/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
<link rel="stylesheet" href="node_modules/xel/themes/material.css">
<link rel="stylesheet" href="css/style.css">
<title>Test</title>
</head>
<body>
<div id="app">
<app-header :par="'test'"></app-header>
<app-grid ref="grid"></app-grid>
</div>
<script src="../node_modules/xel/xel.min.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/render.js"></script>
</body>
</html>
My js:
class Spreadsheet {
constructor(
rowData = [],
columnDefs = [
{
headerName: 'Name',
field: 'name',
sortable: true,
checkboxSelection: true,
headerCheckboxSelection: true,
filter: 'agTextColumnFilter',
filterParams: {
clearButton: true,
debounceMs: 200
}
},
{
headerName: 'Model',
field: 'model',
sortable: true,
filter: 'agTextColumnFilter',
filterParams: {
clearButton: true,
debounceMs: 200
}
},
{
headerName: 'Price',
field: 'price',
sortable: true,
editable: true,
filter: 'agNumberColumnFilter',
filterParams: {
clearButton: true,
debounceMs: 200
}
}
]
) {
this.template = `
<div class="spreadsheet">
<x-input class="filter" type="text" #input="filter">
<x-label>filter...</x-label>
</x-input>
<div ref="grid_vue" class="ag-theme-fresh"></div>
</div>
`
this.data = function() {
return {
columnDefs: null,
rowData: null,
gridOptions: null,
devices: []
}
}
this.beforeMount = function() {
this.devices = rowData;
this.gridOptions = {
suppressDragLeaveHidesColumns: true,
defaultColDef: {
filter: true,
resizable: true,
width: 100
},
columnDefs: columnDefs,
rowData: rowData,
enableCellChangeFlash: true,
animateRows: true,
rowSelection: 'multiple',
onGridReady: function(params) {
params.api.sizeColumnsToFit();
}
}
}
}
methods = {
addItem(item_obj) {
this.devices.push(item_obj);
this.gridOptions.api.setRowData(this.devices);
},
filter(event) {
const filter_text = event.target.value;
this.gridOptions.api.setQuickFilter(filter_text);
},
redrawAllRows() {
this.gridOptions.api.refreshCells();
this.gridOptions.api.redrawRows();
}
}
mounted = function() {
const eGridDiv = this.$refs.grid_vue;
new agGrid.Grid(eGridDiv, this.gridOptions);
}
beforeUpdate = function() {
console.log('beforeUpdate');
this.redrawAllRows();
}
}
const devices = [
{name: "phone", model: 'Sumsung', price: 35000, class: "smartphone"},
{name: "laptop", model: 'HP', price: 32000, class: "pc"},
{name: "test", model: 'Test', price: 72000, class: "test"}
];
const app_table = new Spreadsheet(devices);
const app_header = {
props: ['par'],
template: `
<div class="pageHeader">
<x-button class="addDongleButton" #click="addItem">
<x-label>Add Item</x-label>
</x-button>
</div>
`,
methods: {
addItem() {
console.log(this.par);
const some_obj = {name: "Test2", model: 'X2', price: 555, class: "test"};
vm.$refs.grid.addItem(some_obj);
}
}
};
const vm = new Vue({
el: "#app",
components: {
appHeader: app_header,
appGrid: app_table
}
});
Css:
#import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
#import "../node_modules/ag-grid-community/dist/styles/ag-theme-fresh.css";
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
body {
background: rgb(241, 241, 241);
box-sizing: border-box;
}
.pageHeader {
z-index: 1000;
background: #a1c4dd;
height: 75px;
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
}
.spreadsheet {
margin: 85px 5% 20px;
}
.filter {
display: inline-block;
height: 25px;
margin-bottom: 5px;
}
.ag-theme-fresh {
height: 400px;
width: 100%;
}
.ag-theme-fresh.ag-dnd-ghost {
width: 30%;
min-width: 100px;
}
I don't know if it's the same issue, but I came to this post while hunting down very similar experience. I found a div with class ag-popup, if I make a css rule that gives that a height of 0 it's seeming to fix the issue and I haven't seen a side effect yet. ie
.ag-popup
{
height: 0;
}
Same thing happened to me while using Svelte, used the answer by joolsf.
When checking ".ag-theme-balham" was also applied to the div as explained by joolsf. In there a min-height was set. This means I had to add the following:
.ag-popup {
height: 0 !important;
min-height: 0 !important;
}
Might be too late for the original poster, but Thijs had it correct. Any Ag Grid theme CSS class is applied to the main container but also applied again to the same element that .ag-popup is applied to (don't know why). This also includes custom user-made themes which is any class applied to the main grid container prefixed with .ag-theme-.
In your example, .ag-theme-fresh is also being applied to the same element that .ag-popup which makes the popup a height of 400px. So that is hiding the grid items which it seems fall under 400px.
A solution would be to apply a CSS class to the main grid container without the .ag-theme- prefix and set that height (and maybe width) which would not get duplicated in the child element. Or apply styles directly.
I am trying to create a lock on a column on treelist in kendo UI. If user clicks on a button it will lock a column in the treelist, I tried like this :
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/treelist/frozen-columns">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
</head>
<body>
<button>click me</button>
<div id="example">
<div id="treelist"></div>
<script>
$(document).ready(function () {
$("button").click(function(){
var treelist = $("#treelist").data("kendoTreeList");
treelist.lockColumn("LastName");
});
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service";
var dataSource = new kendo.data.TreeListDataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/EmployeeDirectory",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeId",
fields: {
EmployeeId: { type: "number", nullable: false },
parentId: { field: "ReportsTo", nullable: true }
}
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
reorderable: true,
resizable: true,
sortable: true,
filterable: true,
columnMenu: true,
columns: [
{
field: "FirstName",
expandable: true,
title: "First Name",
lockable: true,
width: 250
},
{
field: "LastName",
title: "Last Name",
lockable: true,
width: 200
},
{
field: "Position",
width: 400,
lockable: true
},
{
field: "Extension",
title: "Ext",
format: "{0:#}",
width: 150,
}
]
});
});
</script>
<style>
#treelist {
width: 950px;
}
</style>
</div>
</body>
</html>
lockColumn function gives the error on console and its not producing any lock on treelist :
TypeError: d is undefined kendo.all.min.js:53:29331
http://dojo.telerik.com/elipA
lockColumn API : http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist
Telerik Kendo UIs TreeList has a limitation in the column locking, which is that at least one column must be locked in the initialization phase for the programmatical column locking to work as per the documentation: "In order to use this method, the treelist must be initialized with at least one locked column, and should have unlocked columns left after the target column is locked.", source http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#methods-lockColumn.
See corrected Dojo example here: http://dojo.telerik.com/#mrtaunus/iYeGI.
Kindly take a look at the following code. Is there something wrong with it my twitter widget is not working anymore but its was few days earlier from the very same code/ Kindly help thanks,
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 216,
height: 240,
theme: {
shell: {
background: '#ffffff',
color: '#292b2c'
},
tweets: {
background: '#f6f6f6',
color: '#292b2c',
links: '#1388d2'
}
},
features: {
scrollbar: false,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('ganasal').start();
</script>
As stated in the widget's code:
"The Twitter API v1.0 is deprecated, and this widget has ceased functioning. You can replace it with a new, upgraded widget..."
I'm trying switch the twitter javascript widgets out depending on the time. So in the day, the twitter widget will be colored differently than at night.
I used the code that twitter gave me and came up with this code. But I get a syntax error in DW on the "document.write" lines. Here is the complete code that I put together.
Here is the code that twitter gave me...
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'search',
search: '#BigNotch',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'BigNotch',
width: 180,
height: 300,
theme: {
shell: {
background: '#17d1ff',
color: '#ff8fda'
},
tweets: {
background: '#ededed',
color: '#383838',
links: '#ff8aed'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</script>
And here is the code i've come up w/ so far to achieve this.
<!-- Twitter Widget -->
<div id="isolate">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
</div>
<br><br /><br />
<script type="text/JavaScript">
<!--
function changTwitter() {
var currentTime = new Date().getHours();
if (7 <= currentTime&¤tTime < 17) {
document.write('<' + 'script>
new TWTR.Widget({
version: 2,
type: 'search',
search: '#BigNotch',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'BigNotch',
width: 180,
height: 300,
theme: {
shell: {
background: '#242124',
color: '#f0af4d'
},
tweets: {
background: '#333333',
color: '#c2c2c2',
links: '#f7bc63'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</' + 'script> ');
}
else {
document.write('<' + 'script>
new TWTR.Widget({
version: 2,
type: 'search',
search: '#BigNotch',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'BigNotch',
width: 180,
height: 300,
theme: {
shell: {
background: '#17d1ff',
color: '#ff8fda'
},
tweets: {
background: '#ededed',
color: '#383838',
links: '#ff8aed'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</' + 'script> ');
}
}
changeTwitter();
-->
</script>
I get the error on line 88. "document.write('<'+'script>"
document.write takes an string arg, but in your code, the string is not terminated correctly, use document.write('<'+'script>'+"all the other code" +'');
JAVASCRIPT does not support multi-line string like you post.
I'm just trying to put the custom twitter's profile widget on my page, but I like to put the code in a separate javascript's file.
so, I don't know how to do that.
I mean, I put this on head tag
<script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>
the create a div for the widget, an put the rest of the code in another javascript
new TWTR.Widget(json_twitter_options).render().setUser('username').start();
But, how to "put" the result in that widget... I'm totally lost, thanks in advance.
The solution for me was simply to add an "id" property to the options object of an element that you want the widget to render into. This way you can even load the script with require.js or after the page loads and still render the widget into the space you want.
I didn't find any documentation for this property by the way.
ex:
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 135,
height: 700,
theme: {
shell: {
background: '#e5e5e5',
color: '#363F49'
},
tweets: {
background: '#e5e5e5',
color: '#000000',
links: '#06C'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
},
id: 'someDivId'
}).render().setUser('comster').start();
The js file doesn't have to be in the head just above the widget
this code works I have tested it:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 135,
height: 700,
theme: {
shell: {
background: '#e5e5e5',
color: '#363F49'
},
tweets: {
background: '#e5e5e5',
color: '#000000',
links: '#06C'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('USERNAME').start();
</script>
Ok, It seem my question was not understand.
I couldn't do what I want. But the way to simplify my problem, was creating a json object for setting up the widget.
I'm still want to find a way to not use script tag inside body tag
thanks a lot to viewvers!
Just put the entire code into a new javascript file (name it anything you like, like twitter.js), and link it in where you want it to display, like under
<div id="twittercode">[js file link goes here]</div>
This whole chunk should go into a new javascript file.
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 135,
height: 700,
theme: {
shell: {
background: '#e5e5e5',
color: '#363F49'
},
tweets: {
background: '#e5e5e5',
color: '#000000',
links: '#06C'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('USERNAME').start();