My code is :
<asp:DataList ID="DataList1" Visible="true" runat="server" AutoGenerateColumns="false"
RepeatColumns="2" CellSpacing="5">
<ItemTemplate>
<u>
<%# Eval("Name") %></u>
<hr />
<a class="player data-embed=false" preload="true" style="height: 300px; width: 300px; display: block" href='<%# Eval("Id", "FileCS.ashx?Id={0}") %>'>
<img
src=""
alt="Search engine friendly content" style="height: 300px; width: 300px; background-image:url('img/sales.jpg');" />
</a>
</ItemTemplate>
</asp:DataList>
<script src="FlowPlayer/flowplayer-3.2.12.min.js" type="text/javascript"></script>
<script type="text/javascript">
flowplayer("a.player", "FlowPlayer/flowplayer-3.2.16.swf", {
plugins: {
pseudo: { url: "FlowPlayer/flowplayer.pseudostreaming-3.2.12.swf" }
},
clip: { provider: 'pseudo', autoPlay: false , autoBuffering: true},
});
</script>
add autoBuffering: true
have a look http://flash.flowplayer.org/demos/configuration/
Related
I am making a Windows 8.1 App in VS 13 using HTML/JavaScript.
I have inserted an ad control on a page control. From the first page, when I navigate to that page (containing ads) in running app the app UI freezes for sometimes after which ad displays and app runs normally. How can I stop this freezing?
Here is my code of the page containing ad:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>levelOne</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<script src="jquery-1.11.0.min.js"></script>
<link href="levelOne.css" rel="stylesheet" />
<script src="levelOne.js"></script>
<script src="/MSAdvertisingJS/ads/ad.js"></script>
</head>
<body>
<div class="levelOne fragment">
<header aria-label="Header content" role="banner">
<button id="back" data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{label:'back',icon:'back'}" style="margin-right: 400px; top: 40px; width: 100px; left: 50px">
</button>
<h1 class="titlearea win-type-ellipsis"></h1>
</header>
<section aria-label="Main content" role="main">
<!--<button id="back" ></button>-->
<canvas class="bowls" id="bowlOne" style="margin-top: 360px; margin-left: 250px;"></canvas>
<canvas class="bowls" id="bowlTwo" style="margin-top: 360px; margin-left: 580px;"></canvas>
<canvas class="bowls" id="bowlThree" style="margin-top: 360px; margin-left: 910px;"></canvas>
<canvas id="squirrel"></canvas>
<!--<button id="pause" data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{label:'pause',icon:'pause'}" style="margin-right: 400px; top: 600px; width: 100px; left: 59.7px">
</button>-->
<button id="play" data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{label:'play',icon:'play'}" style="width: 100px; left: 160px; top: 600px;">
</button>
<div style="-ms-grid-row: 1; -ms-grid-column: 2;margin-left:600px;">
<div id="sound" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title: 'Sound', checked: true ,labelOn: '', labelOff: ''}" class="differentToggleColor" >
</div>
</div>
<img id="bowl" src="../../images/bowl.png" width="250" height="300" />
<img id="object" src="../../images/squirrel.png" />
<label id="Score" aria-live="assertive">Score:</label>
<div id="signal"></div>
<div id="myAd" style="position: absolute; top: 100px; left: 0px; width:300px; height: 250px; z-index: 1;"
data-win-control="MicrosoftNSJS.Advertising.AdControl"
data-win-options="{applicationId: 'xxxxxxxxxxxxxxxxxcfaac4e ', adUnitId: 'xxxxx35'}">
</div>
<audio style="z-index: 0" id="music1" src="../../Music/Drum%20Hop.mp3" loop/>
<audio id="swipe" src="../../Music/swipe%20sound.mp3" />
</section>
</div>
</body>
</html>
The application Id and ad unit id given here are dummy, I have used the real ad unit which have been created in Windows dev account.
My advice is to inject your ads div (control) after loading the page (ready callback)
I have the code corect for jquery to make rounded corners.. I have tested it with just a background color, and it works fine.
However, I want to apply the corners to images. It just won't work for me!
I have created an example page where I have the image with the class, right next to a div with the same class but only has a background color.. The image won't work, but the colored 'box' will.
I have tried coding it three different ways, and it still wont work. (I don't need all three ways of coding to work.. just one will do! ;'D )
Here is my Fiddle link: http://jsfiddle.net/SunnyOz/g46Gx/
Here is the test page online: http://www.webau.net/TC/example/corner_test.htm
Here is the CSS:
* {
border: 0 none;
}
.content {
width: 900px;
background-color: #fff;
margin: 0 auto;
}
.innertube {
padding: 20px;
}
.imgBox, .imgBox img { width:493px; height:257px; margin:0; padding:0 }
.divToHaveCorners, .divToHaveCorners img { width:493px; height:257px; margin:0; padding:0; display: block; }
Here is the HTML:
<div class="content">
<div class="innertube">
<br clear="all" />
<br clear="all" />
<img class="roundimg" src="http://webau.net/TC/example/images/motorcycle1.jpg" />
<div class="roundimg" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>
<br clear="all" />
<br clear="all" />
<div class="imgBox"><img src="http://webau.net/TC/example/images/motorcycle1.jpg" /></div>
<div class="imgBox" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>
<br clear="all" />
<br clear="all" />
<img class="divToHaveCorners" src="http://webau.net/TC/example/images/motorcycle1.jpg" />
<div class="divToHaveCorners" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>
<br clear="all" />
<br clear="all" />
</div>
</div>
Here is the internal Javascript code:
$(document).ready(function(){
$(".roundimg").corner("tl 50px").corner("br 50px");
$(".imgBox").corner("15px");
$('.divToHaveCorners').corner();
});
My external JS references are:
<script type="text/javascript" src="http://webau.net/TC/example/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://webau.net/TC/example/jquery.corner.js"></script>
.
I am assuming that I have left out something really simple.. but I just can't see it.
Any help will be greatly appreciated.
Thanks,
SunnyOz
This does it, but there are also a TON of plugins that make these kinds of things a lot easier to use like imgr. Also- using this as a reference may be very helpful to you. Cheers!
<!DOCTYPE html>
<html>
<head>
<style>
#imgBox, #imgBoxPlain, #imgBox img { background-color: #701080; width:493px; height:257px; margin:0;padding:0;}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$.fn.corner.defaults.useNative = false;
$(document).ready(function(){
$("#imgBox").corner("15px");
$("#imgBoxPlain").corner("15px");
});
</script>
</head>
<body>
<div class="content">
<div class="innertube">
<div id="imgBox"><img src="images/motorcycle1.jpg" /></div>
<div id="imgBoxPlain" style="width: 200px; height: 100px;">Hello World!</div>
</div>
</div>
</body>
</html>
My plan is to have some rows with 3 divs next to each other floated left replacing the Accordion-Headers, then open each div's content below a row of three pushing the rest of the page down.
I tried various 'position' possiblities but couldnt get it work the way I wanted it to..
More a css problem. Or better not use accordion?
jsfiddle.net/pCwxa/1
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#accordion").accordion({ collapsible: true },{ active: false });
});
</script>
<style type="text/css">
#link { background-color: grey;
float: left;
height: 300px;
width: 280px;
margin: 0 20px 80px 0px;
}
#cont { top:320px;
background-color: blue;
height: 300px;
width: 880px;
}
</style>
</head>
<body>
<div style="width:900px; height:900px; margin-left:30px; margin-bottom:; border:1px solid red; padding:0px;">
<div id="accordion">
<div id="link">
<h3>Section 1</h3></div>
<div id="cont">
<p>
Blabla
</div>
<div id="link">
<h3>Section 2</h3></div>
<div id="cont">
<p>
Blabla
</p>
</div>
<div id="link">
<h3>Section 3</h3></div>
<div id="cont">
<p>
Blabla
</p>
</div>
<div id="link">
<h3>Section 4</h3></div>
<div id="cont">
<p>
Blabla
</p>
</div>
</div>
</div>
</body>
</html>
You've got the div elements arranged in alternating order, with each div.link alternating with div.cont. Instead, put the three div.link first and then three div.cont. Use CSS clear to ensure that the second group of three appears on a new line.
I have simple divs
<div class="ui-bar-a ui-corner-top">
first_test | Status: <img src="templates/style/images/reload.gif" />
</div>
<div class="ui-bar-a">
sms1 | Status: <img src="templates/style/images/reload.gif" />
</div>
<div class="ui-bar-a ui-corner-bottom">
sms2 | Status: <img src="templates/style/images/reload.gif" />
</div>
It looks like:
I need it like:
I tried to set margin:auto align="middle", but it did not help
try putting
.ui-bar-a img{
vertical-align: middle;
}
just put
vertical-align:middle;
css for image. nothing else. you will get your output.
You could use this CSS:
.ui-bar-a img, .ui-bar-a span{
display:inline-block;
vertical-align:top;
}
.ui-bar-a img{
margin-top:xxx; // as you requirment
}
and this HTML:
<div class="ui-bar-a">
<span>Some text here </span>
<img src="xxx.jpg">
</div>
use this code, below is the result as well as attached
<div class="ui-bar-a">
sms1 | Status: <img src="status.png" style= "vertical-align:middle;" />
</div>
<div class="ui-bar-a ui-corner-bottom">
sms2 | Status: <img style= "vertical-align:middle;" src="status.png" />
</div>
Here an Example how to vertical align DIV's
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>
Source: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
You can use: floting for making ,
<div class="ui-bar-a ui-corner-top">
<span>first_test</span> <span>|</span> <span>Status:<span> <img src="templates/style/images/reload.gif" />
.ui-corner-top{
overflow:hidden
padding:5px 0;
}
.ui-corner-top span{
float:left;
display:block;
padding:0 2px;
}
I have the following HTML code:
<section class="gallery">
prev
next
<div class="holder">
<ul id="slider">
<li>
<img src="" alt="#" width="306" height="240" />
<span>Picture Title</span>
</li>
<li>
<img src="" alt="#" width="306" height="240" />
<span>Picture Title</span>
</li>
<li>
<img src="" alt="#" width="306" height="240" />
<span>Picture Title</span>
</li>
<li>
<img src="" alt="#" width="306" height="240" />
<span>Picture Title</span>
</li>
</ul>
</div>
</section>
And the following js:
$(document).ready(function(){
$('#slider').cycle({
fx:'scrollHorz',
timeout: 5000,
prev:'#link-prev',
next: '#link-next'
})
//$(".form-contact form").validate();
})
This works fine, but it shows just one picture, and if I want to see the following I click next, and if I want to see the previous, I click prev. How can I show more than one picture per transition?
Basically, like this example: scroll, but showing more than one picture per transition...
EDIT: The actual HTML I have when trying to have two pictures in each slide is this one:
<section class="gallery">
prev
next
<div class="holder">
<ul id="slider">
<div>
<img src="assets/content/pages/carrousell/UrbanFlame.jpg" alt="#" width="306" height="240" />
<img src="assets/content/pages/carrousell/TannourineRestaurant.jpg" alt="#" width="306" height="240" />
</div>
<div>
<img src="assets/content/pages/carrousell/PanchoVillaTaqueria.jpg" alt="#" width="306" height="240" />
<img src="assets/content/pages/carrousell/LaLanterna.jpg" alt="#" width="306" height="240" />
</div>
</ul>
</div>
</section>
And the CSS is this one:
.gallery .holder{
border-radius: 10px;
position:relative;
padding:4px 0 4px 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.gallery #link-prev,
.gallery #link-next{
position:absolute;
width:47px;
height:83px;
text-indent:-9999px;
overflow:hidden;
top:75px;
z-index:99999;
background:url(navigati.png) no-repeat;
}
.gallery #link-prev{left:-19px;}
.gallery #link-next{right:-19px;}
.gallery #link-next{background-position:-48px 0;}
.gallery h3{
color:#33638b;
font-size:18px;
line-height:21px;
margin:0 0 1px;
text-align:center;
}
#slider{
padding:0;
width:306px;
margin: 0 auto;
}
#slider li{
list-style:none;
text-align:center;
color:#FFFFFF;
font-size:14px;
line-height:17px;
padding:0px 0 0;
width:306px;
}
#slider img{
position:relative;
}
#slider span{
width:286px;
display:block;
padding:20px 10px;
background:url(../images/slider_span_bg.jpg) repeat-x left top; height:18px;}
#slider a{color:#33638b; font-family:Arial, Helvetica, sans-serif; color:#fff; font-size:18px;}
What's inside your <!-- picture link !--> blocks?
According to the Cycle documentation (and samples) the markup should be like this:
<div id="slider">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<!-- ... -->
</div>
EDIT:
Two pictures in one transition
var curElement = null;
$('#s1').cycle({
fx: 'scrollHorz',
prev: '#prev1',
next: '#next1',
timeout: 0,
after: function(currSlideElement, nextSlideElement, options, forwardFlag)
{
if (forwardFlag === 1 && (currSlideElement != curElement || curElement == null))
{
curElement = nextSlideElement;
$("#next1").trigger('click');
}
else if ( forwardFlag === 0 && (currSlideElement != curElement || curElement == null))
{
curElement = nextSlideElement;
$("#prev1").trigger('click');
}
}
});
EDIT 2
The problem is a #slider style. Set its width to f.e. 620px
#slider{
padding:0;
width:620px;
margin: 0 auto;
}
I'm not sure that the Cycle plug-in will handle that without editing the source.
It looks like this option could be useful though:
onPrevNextEvent: null,// callback fn for prev/next events: function(isNext, zeroBasedSlideIndex, slideElement)
It seems like you should be able to trigger a next or prev click onPrevNextEvent.
Something like this:
$('#slider').cycle({
fx:'scrollHorz',
timeout: 5000,
prev:'#link-prev',
next: '#link-next',
onPrevNextEvent: function(isNext) {
if(isNext) {
$('#link-next').trigger('click');
} else {
$('#link-prev').trigger('click');
}
}
})