i follow this tutorial: http://tympanus.net/codrops/2012/05/07/experimental-page-layout-inspired-by-flipboard/
everything work fine until i want to change the cover, they using this code assign the cover photo if it's first page.
HTML
<script id="pageTmpl" type="text/x-jquery-tmpl">
<div class="${theClass}" style="${theStyle}" runat="server" id="divContent">
<div class="front">
<div class="outer">
<div class="removed" style="${theContentStyleFront}">
<div class="inner">{{html theContentFront}}</div>
</div>
</div>
</div>
<div class="back">
<div class="outer">
<div class="removed" style="${theContentStyleBack}">
<div class="inner">{{html theContentBack}}</div>
</div>
</div>
</div>
</div>
</script>
Javascript
for( var i = 0; i <= this.pagesCount - 2; ++i ) {
var $page = this.$pages.eq( i ),
pageData = {
theClass : 'page',
theContentFront : $page.html(),
theContentBack : ( i !== this.pagesCount ) ? this.$pages.eq( i + 1 ).html() : '',
theStyle : 'z-index: ' + ( this.pagesCount - i ) + ';left: ' + ( this.windowProp.width / 2 ) + 'px;',
theContentStyleFront : 'width:' + this.windowProp.width + 'px;',
theContentStyleBack : 'width:' + this.windowProp.width + 'px;'
};
if( i === 0 ) {
pageData.theClass += ' cover';
}
else {
pageData.theContentStyleFront += 'left:-' + ( this.windowProp.width / 2 ) + 'px';
if( i === this.pagesCount - 2 ) {
pageData.theClass += ' cover-back';
}
}
$( '#pageTmpl' ).tmpl( pageData ).appendTo( this.$el );
}
CSS
.page.cover .front .content {
background: #ddd url(http://txm.com.au/wp-content/uploads/2013/10/TXM_Image_3.jpg) no-repeat center center;
background-size: cover;
}
now i have 2 different aspx with 2 different cover pages, hence the code above is not working for me. i don't wan to create another js or css file just because i want the different cover photo. so i was thinking, is there any possible that i set the css value with html control. eg:
.page.cover .front .content {
background: #ddd url(" + lbl1.Text + ") no-repeat center center;
background-size: cover;
}
<asp:Label Text="http:
i tried using the javascript to change the css, but seems like it can't find the class name, i got the error message: Cannot read property 'style' of undefined
var abc = document.getElementsByClassName("page cover")[0];
abc.style.background = "#ddd url(http://txm.com.au/wp-content/uploads/2013/10/TXM_Image_3.jpg) no-repeat center center";
i also tried to change the css from code behine
string strClass = divContent.Attributes["class"];
if (strClass == "page cover")
{
}
but the strClass return "${theClass}" instead of "page cover"