I have dashboard, displaying n number of cards. If card contains some charts, but when data is not provided card displays "No data to display". For charts I have been using highchart. Problem is that "No data to display" text is not visible in card. On debug found that, one of highchart CSS have transform(-50%, -50%); which causes it to display somewhere in top of screen and its not visible.
I tried overriding existing CSS, but new CSS gets loaded before highchart CSS.
Is there any way, that I load my CSS once highchart CSS are loaded?
You can add a short code in to the head section of the html where you linked your css.
<link rel="stylesheet" href="location of the css file you want to load after loading all the code" media="none" onload="if (media != 'all') {media = 'all'}">
media="none" onload="if (media != 'all') {media = 'all'}" this code has to be add in your link tag. And it will cause your css to load at the end of loading all the code. Hope it will work for you.
Related
I need to embed a custom embed code from an external website into my wordpress blog post.
the custom embed code has this format:
<!-- TradingView Chart BEGIN -->
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
var tradingview_embed_options = {};
tradingview_embed_options.width = '640';
tradingview_embed_options.height = '400';
tradingview_embed_options.chart = 'z1zThvGU';
new TradingView.chart(tradingview_embed_options);
</script>
<p>GBPUSD, Forecast on H4. by DatTong on TradingView.com</p>
<!-- TradingView Chart END -->
the code works fine but its not fully responsive when viewed in mobile or table and its not also centered in desktop. maybe because the code has generated a fixed width and a fixed height.
But that is the issue. I need to override the embed code styles so that I can style it however I want.
I have tried many options but its not working. I also inspected the DOM and found out that there is a wrapping div that was generated but when trying to style that generated wrapping div, its still not working. another option I did was to manually wrapped the code inside wordpress editor hoping that I can control the width and the height but still its not working. Although even if it worked, its not a good idea to manually style it in each and every blog posts so it would be great if we can overrride it using a custom stylesheet.
See fiddle below:
http://jsfiddle.net/7695akjh/8/
Any ideas how I can make this code fully responsive?
after fiddling with the markup, I finally figured it out! so this is solved.
I am very very new to this, so I apologize if this is very simple or has been asked elsewhere.
I am using Responsive Table Generator to generate a table from a Google document that I then try to place on a webpage using their iFrame code.
The generator gives me a handful of .js files and a .html and .css file to upload to my site. I then use the provided iFrame code to embed it on the page I want.
<div id="table-iframe-container"></div>
<script src="http://nesemc.com/test/markdown-3/news-table/pym.js"></script>
<script type="text/javascript">
(function() {
var pymParent = new pym.Parent(
'table-iframe-container',
'http://nesemc.com/test/markdown-3/news-table/index.html', {});
}());
</script>
However, I believe the parent page is some how overriding the .css style of the generated table.
You can see an example here: LINK
How can I stop this?
Your styles aren't leaking. Your iframe isn't wide enough to see the "full view", and you have styles that are responsive and don't work when that small. Make your iframe wider and it'll look like you want. If you remove max-width: 960px; from the #affero-page styles in consolidated.css, you should see it.
To see what you are looking at, go to this page: http://nesemc.com/test/markdown-3/news-table/index.html?initialWidth=860&childId=table-iframe-container (your iframe content), and play with the browser width. You will see once you get too small, it then displays how you have it.
I'm trying to add a text transcription of a spoken audio file with the track tag. The default behavior for the video tag is to display them (works). By default the audio tag seems to lack some sort of 'canvas' (the black area a video tag displays even without video) to display the subtitles automatically. I could use the video tag but it would feel like a ugly workaround. I don't want to break the semantics of my code though.
Is there some kind of CSS to force the display of such area where the subtiles will be displayed?
<audio controls>
<source src="test.ogg" type="audio/ogg">
<source src="test.mp3" type="audio/mpeg">
<track kind="subtitles" label="English subtitles" src="/test.vtt" srclang="en" default></track>
Your browser does not support the audio tag.
</audio>
Thanks you for reading.
I've tested this out without jquery -- as taylor-newton mentioned, you'll need to create a tag for your text to appear in.
document.getElementById('my-audio-player').textTracks[0].addEventListener('cuechange', function() {
document.getElementById('my-subtitle-display').innerText = this.activeCues[0].text;
});
This does work with subtitles from audio tags too and using kind="subtitles" in your track tag works with audio as well.
I don't know how to do this with just CSS, but I have done something similar (custom cues) with video text tracks and JavaScript. Hopefully you should be able to leverage the same TextTrack events to accomplish what you are wanting to do with audio tracks.
You can bind a custom function to the track's oncuechange event, and then use the track's activeCues to generate your own captions. This custom div can then be positioned or styled however you want.
This should grab the text track and get the text from the currently active cue every time a cue change occurs.
$('audio')[0].textTracks[0].oncuechange = function() {
var currentCue = this.activeCues[0].text;
$('#yourCustomCaptions').html(currentCue);
}
Then take the text from each cue and inject it into the custom div you want to display.
https://developer.mozilla.org/en-US/docs/Web/API/TextTrack
I have a similar requirement trying to build a captions transcript display for audio logs for a personal app. I am trying to auto scroll and highlight the text phrases based on the audio log. I did not find the element displaying .vtt file captions set on element as there is no canvas available similar to video element. And decided to write a custom canvas component to display associated .vtt on the container and found this HTML5 Video Caption maker demo handy, you can give it a shot.
There is a pseudo-element in html that you can select it in css to style your subtitle or caption .
It is ::cue element that you can give some css property like color, opacity, font and etc . You see all of them are the styles that used for texts .
I learned these when I learned how to use video tags . But had a search in google and found a very helpful article on MDN . You can see everything about subtitle styling in here .
And there is no reason to use plugins ;) .
In the example of the grid shown in the Kendo UI website web demos area, when the column-header is dragged to the group box, the column header gets two little images: the sort arrow and the close (X). As far as I can tell, the only relevant CSS on this demo would come from the two stylesheets and the js library referenced in the head section of the page:
<script src="source/kendo.all.js"></script>
<link href="styles/kendo.common.css" rel="stylesheet" />
<link href="styles/kendo.default.css" rel="stylesheet" />
I have the minified versions of these files referenced in the head section of my own page (using the Kendo controls downloaded a few days ago) and on my page these two images on the dragged/dropped column header are not appearing in IE9 in IE9 Standards Mode, in Opera, Safari, or Chrome. Only the column header text appears there as the button text.
Is it possible that the download files and the libraries referenced in these demos are not identical?
It would be very helpful to have these demos point to an external public library so someone trying to duplicate the behavior could be certain that everything is the same.
yes from the demo code and the image file is missing in the libraries mentioned in the code ..
To make it working ..First find out the missing files using chrome Dev Tools(Press F12 and see console)..Then within the downloaded Kenodui.zip files find the Image file (here styles/Default/sprite.png) and place it with appropriate Heirarchial structure(this part is important ..you may need to create new folders for it)..
I am running into this problem where my page loads and then after a fraction of a second the CSS effects or styling takes place.
The main issue I am seeing is with the JQuery tabs that I am using
http://docs.jquery.com/UI/Tabs#source
When the page renders, the tabs show one below the other for a second like this:
One
Two
Three
and then render properly as tabs
Is there a quick and easy way to fix this.
Thanks
It's not the styling; it's the jQuery UI javascript library, which is appending the necessary html to your page so that the tabs can look all pretty-like.
You have a few options. First, you can hide your tabs and display them once jQuery UI has completed its magic. Second, you can style your tabs so they look close enough to the finished output so that the change isn't so noticeable. Third, you can drop jQuery UI and style the tabs with CSS only. All valid approaches, I'd say.
Hope this helps!
EDIT:
For the first option, let's say that this is your div containing the tabs:
<div id="tabs">
...stuff...
</div>
In your stylesheet, hide #tabs:
#tabs {
display:none;
}
Then, modify your jQuery UI call like so:
var t = $("#tabs");
t.tabs({
create:function(){
t.show();
}
});
weirdlover's response almost worked for me (using jQuery 1.5.2), but I had to hook the create event:
var t = $("#tabs");
t.tabs({
create:function(){
t.show();
}
});
Thanks!
Browsers usually load files as they appear in your HTML code. Be sure to put the reference to your CSS file first so it loads as soon as possible.
If the CSS is being applied using Javascript, it's not possible to make it load faster. The Javascript file needs to be loaded before it can be used.
Other than that, I don't think there's a way to control how the browser rendering works.
Is the CSS applied through Javascript? In that case you can add some static CSS that ensures the elements get at least shown horizontally arranged before the javascript is executed, by adding some static CSS.
If it is the case that the browser just decides to apply the CSS after rendering without it, there is not much you can do. It could however be, that the CSS is loaded to slowly (if its an external file), in this case, you could add the most important style to a CSS-section directly in the HTML.