Im playing my audios with JW Player, but the problem is .. i dont want any video background. i only want to show the controlbar, it is showing when i HOVER it. I want to display only the controlbar and without hovering..I got many solutions from google, but the thing is i dont want to change the height of the player neither the height of the controlbar.There surely is a method that displays only the controlbar. no ??
Thanks alot !
This is my code:
jwplayer("container").setup({
autostart: true,
flashplayer: "player.swf",
file: name,
height: 270,
width: 480
});
I tried wmode:"none", but it displays the loading and shows me the controlbar on hover.
Try just adjusting the height:
jwplayer("container").setup({
autostart: true,
flashplayer: "player.swf",
file: name,
height: 24,
width: 480
});
EDIT: this is shown at http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/15993/playing-an-audio-file
Related
I have a website where I use an Eventbrite Widget to checkout a page on my website.
It turns out that when running the script, the iframe, especially on cell phones, does not show the entire checkout. Scrollsbar appears to scroll and see some information.
It turns out that I would like to remove these scrollsbars, because some users don't bother to scroll them down 😱 and end up not filling in some data and not being able to proceed with the purchase.
The code I have is this:
I tried a height on the div, but it didn't work.
type her<div id="eventbrite-widget-container-489731288460" style="display: block; height: 100%;"></div>
<p>
<script src="https://www.eventbrite.com.br/static/widgets/eb_widgets.js"></script>
<script type="text/javascript">
var exampleCallback = function() {
console.log('Order complete!');
};
window.EBWidgets.createWidget({
// Required
widgetType: 'checkout',
eventId: '489731288460',
iframeContainerId: 'eventbrite-widget-container-489731288460',
// Optional
iframeContainerHeight: 900, // Widget height in pixels. Defaults to a minimum of 425px if not provided
onOrderComplete: exampleCallback // Method called when an order has successfully completed
});
</script>e
I also put the iframeContainerHeight: 900, but on the cell phone the scrollbar continues to appear
If anyone knows how to solve it, I'm grateful.
Remove eventbrite iframe scrollbar
var myWindow = Ext.create('Ext.window.Window', {
header: false,
style: 'background-color: transparent; border: false',
bodyStyle: 'background-color: transparent; background-image: url(graphics/ss_message.png); background-size: 100% 100%;',
id: 'ss_banner',
width: 250,
height: component.getBox().height,
border: false,
bodyBorder: false,
frame: false,
cls: 'noPanelBorder',
});
I'm using the window xtype because I can't seem to make a container/panel appear, even if I add renderTo: Ext.getBody(), it doesn't work.
The window appears as such:
I've also tried to use css I'm rather unsure on which properties to use.
Removing window border
If you really want to remove borders of a window, you can use following configuration:
var myWindow = Ext.create('Ext.window.Window', {
// ...
// What shows the 'border' is actually just the background of the window
// shown via padding (+ 1px of actual border)
style: 'padding: 0; border-width: 0;',
// Show automatically
autoShow: true,
// Disable resizing, if you want
resizable: false,
});
Here is a working fiddle of removing window borders
Showing a panel
However, if you don't want to use any of the window functionality and could do with a container or a panel, you should use them. All you should need is the renderTo configuration you mentioned, to render the panel to the body or to any other element. I don't know why this configuration does not work for you, it works perfectly in the fiddle below.
You can try adding a unique class to the panel via cls configuration property and search for it in the rendered HTML code. It is possible it is rendered correctly and just not visible for some reason.
Here is a working fiddle of rendering panel to element
EDIT:
If you need to display only image, there is an image component in ExtJS, Ext.Img. You can work with this component the same way I described for the panel.
This works for me:
var myWindow = Ext.create('Ext.window.Window', {
// What shows the 'border' is actually just the background of the window
// shown via padding (+ 1px of actual border)
style: 'padding: 0; border-width: 0;',
});
I've tried making the size of the chart smaller but it still takes up the full screen. I've also tried putting it in a div and setting the height and width that way.`
<div style="height=400; width=600;">
#{
var MyChart = new Chart(600, 400)
.AddTitle("File Count")
.AddSeries(
name: "File Count",
chartType: "bar",
xValue: descList.ToArray(),
yValues: intList.ToArray());
MyChart.Write();
}
</div>
`
I would do this by creating a CSS class which sets the width and height of the child tag that gets generated by the Chart.Write() method.
CSS
.chart-container img {
width: 600px;
height: 400px;
}
HTML
<div class="chart-container">
#{
var MyChart = new Chart(600, 400)
.AddTitle("File Count")
.AddSeries(
name: "File Count",
chartType: "bar",
xValue: descList.ToArray(),
yValues: intList.ToArray());
MyChart.Write();
}
</div>
I know this question is really old, but I just struggled with the same issue myself.
For other newbies like myself, this might be worth something.
The MyChart.Write() basically produces an image and returns that to your browser regardles of the surrounding razor code.
You can also see the title of your browser shows something like "Image (400x600)".
The browser is displaying an image, not a web page.
In order to show the rendered chart as part of a web page, you have to build your web page and place an <img> tag where the source of the image is a separate view like rendermage.cshtml where you place your code from the question.
I got my info from here: Displaying Charts Inside a Web Page
I am trying to add custom buttons to the left and right navButton but a spacer seems to appear if I set a backgroundImage. If only the title text is set the spacing is correct. Here is my example to reproduce the issue, I added a borderColor to show that the image is not the culprit.
var win = Ti.UI.createWindow({
width: '100%',
height: '100%',
backgroundColor: 'white'
});
var leftBtn = Ti.UI.createButton({
backgroundImage:"/images/headerCmdMenu.png",
width: '81px',
height:'74px',
title: 'left',
borderColor: 'red',
borderWidth: 1
});
var rightBtn = Ti.UI.createButton({
width: '81px',
height:'74px',
title: 'right'
});
win.leftNavButton = leftBtn;
win.rightNavButton = rightBtn;
var nc = Ti.UI.iOS.createNavigationWindow({
window : win
});
nc.open();
Here is a screenshot of the view…
http://imagebin.ca/v/13wq8Jrn1hst
Any ideas how to fix this?
Thanks.
Chris
Note: I did ask this on the official forums, but got no answer after 14 days.
http://developer.appcelerator.com/question/160022/leftnavbutton-and-rightnavbutton-spacer-appears-if-using-backgroundimage-#comment-196608
This is quite long to answer but it might still help someone else looking for same issue.
For images in left/right nav buttons, look for the below points first:
If you only set title, then it will work as expected.
If you set only backgroundImage (not set width & height), then the image will be stretched to take the full space.
If you set only backgroundImage with some width & height, then the button will behave as a normal button with expected spacing and area.
If you set both backgroundImage & title, then it will be the case of this post.
Also remember that always use correct size image files when intend to use as left/right nav buttons.
I'm having some problems with the resize of the Google Maps JavaScript API v3. If I set the CSS "parameters" right on load (just in the documentation) the map will show 100% height and width - no problem. But when I try to get the same result by clicking on a link it's not showing the whole map.
I have tested both css() and toggleClass() in jQuery on this event. toggleClass() makes the map goes invisible (hides the map completely rather than makes it full screen) with this code:
// jQuery
$('#weather-map').toggleClass('test');
// CSS
#weather-map.test {
height : 100%;
width : 100%;
top : 0;
left : 0;
position : absolute;
z-index : 200;
}
css() works (the map goes full screen) but the image above shows how the map renders upon full screen:
$('#weather-map').css({
'height' : '100%',
'width' : '100%',
'top' : '0',
'left' : '0',
'position' : 'absolute',
'z-index' : '200'
});
I wonder now, why does it act like this? Have I missed something or is this method not the right one to toggle full screen of the map?
Thanks in advance.
It's just because of how Google's mapping Javascript works. It renders based on the container's size, and doesn't add any kind of handler to re-render in case the container gets re-sized thereafter. I imagine that in your example above, you'd have to just call the map initialization code a second time to render the map again in your resized div.