I am using asp.net web form (without mvc) with c#. I am trying to show images through masonry layout and imagesLoaded and to start with I have written the following code:
<script src="../Plugins/masonry/masonry.pkgd.min.js"></script>
<script src="../Plugins/masonry/imagesloaded.pkgd.min.js"></script>
<style>
.grid-item { width: 200px; background-color: gray;
}
.grid-item--width2 { width: 400px; }
</style>
<script>
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 200
});
</script>
<div class="grid">
<div class="grid-item"><img src="images/Chrysanthemum20180717094352440.jpg" /></div>
<div class="grid-item grid-item--width2"><img src="images/Chrysanthemum20180717094352440.jpg" /></div>
<div class="grid-item"><img src="images/Chrysanthemum20180717094352440.jpg" /></div>
</div>
When I run this I see three large images. I am not able to understand how all this works. I would be getting image src in my c# code so how do I bind it here and ensure that it renders as per masonry layout and show the images.
i would appreciate if someone could please suggest an example where either json is used or through code behind how can I create this image gallery.
Related
<html>
<body style='margin: 0; padding: 0 50px; font-size: 12px;'>
<div style='page-break-after: always;'>
<h1>H1</h1>
</div>
<div>
<h2>H2</h2>
</div>
</body>
</html>
I can't use page break in HTML format which will be made into PDF, I've tried various ways but the results don't change, when I use the br tag it works but when entering the style page break it doesn't work.
I want to split the page between h1 and h2
i am using jquery drag and drop selection to pick up selected cells in a table. However the drag select can be done all over the web. Is there a code or method that i can restrict the drag to a particular space or DIV
Any sample code or advise to Share
Thanks so Much
Like this
$(function() {
$( "#draggable" ).draggable();
});
#draggable, #notdraggable { width: 150px; height: 50px; padding: 0.5em; }
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<div id="notdraggable" class="ui-widget-content">
<p>Cant Drag me around</p>
</div>
I use HtmlRenderer to generate jpg images from html markup. However it doesn't apply background image from css:
<div style="background:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTbNHtYU6bKKmxkJXlqDr7y7afZyZtw-WwDg6DoUNCb9nElkplEuw); width: 440px; height: 361px">
Some content here.
</div>
Here is the C# code:
String ecardHtml = File.ReadAllText("testWithGoodImage.html");
using (Image img = HtmlRender.RenderToImageGdiPlus(ecardHtml, maxWidth: 440, textRenderingHint: TextRenderingHint.AntiAliasGridFit))
{
img.Save("result.jpg");
}
Debugging shows that the image is not even requested, so I suspect it's not supported. However <img> elements do work well.
So the question is how to make it work.
I know that I can render html on image in HtmlRenderer, but I want to have all markup only in html code.
HTML renderer supports background Image CSS, if you really want to do it in HTML then something like this will do the job :
<div style="width: 440px; height: 361px;position:relative">
<div style="position:absolute;top:0;left:0;z-index:8888"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTbNHtYU6bKKmxkJXlqDr7y7afZyZtw-WwDg6DoUNCb9nElkplEuw"/></div>
<div style="position:absolute;top:0;left:0;z-index:9999">Some content here.</div>
</div>
or simply add background-image not just background
<div style="background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTbNHtYU6bKKmxkJXlqDr7y7afZyZtw-WwDg6DoUNCb9nElkplEuw); width: 440px; height: 361px">
Some content here.
</div>
I am having some problem with AJAX Collapsible Panel Extender. Currently what I am trying to do is when certain panel is extended, then it will perform some sql statement. I have no idea on how to write the code other than just squeeze all of them in the Page Load method. Here is how I set up my collapsible panel extender:
<!-- FIRST COLLAPSIBLE PANEL EXTENDER -->
<asp:Panel ID="pHeader1" runat="server" CssClass="cpHeader">
<!-- First collapsible panel extender header -->
<div class="form-group" style="background-color:#ffb848; height: 30px; vertical-align: middle">
<div class="col-md-3">
<div style="float: left; color: White; padding: 5px 5px 0 0">
Collapsible Panel
</div>
</div>
<div class="col-md-9">
<div style="float: right; color: White; padding: 5px 5px 0 0">
<asp:Label ID="lblHeaderText1" runat="server" />
<asp:Image ID="imgArrows1" Text = "IMAGE" runat="server" />
</div>
</div>
<div style="clear: both"></div>
</div>
</asp:Panel>
<!-- First collapsible panel extender body -->
<asp:Panel ID="pBody1" runat="server" CssClass="cpBody">
<asp:Label ID="lblBodyText1" runat="server" />
Hey there
</asp:Panel>
<asp:CollapsiblePanelExtender ID="cpe1" runat="server" TargetControlID="pBody1" CollapseControlID="pHeader1"
ExpandControlID="pHeader1" Collapsed="true" ImageControlID="imgArrows1"
CollapsedImage="~/Images/downarrow.jpg"
ExpandedImage="~/Images/uparrow.jpg" TextLabelID="lblHeaderText1" CollapsedText="Show"
ExpandedText="Hide" CollapsedSize="0" ExpandedSize="200"
ScrollContents="true">
</asp:CollapsiblePanelExtender>
Any related research link would be appreciated. Thanks in advance.
This is possible.
In gist you are supposed to work with the ajax client-side page life-cycle. Like there is a page load in your server-side aspx page; there is a page load in the client (i.e. the web page rendered in the browser) which happens after all the asp.net client ajax js libraries are all loaded.
In that you are supposed to do something like:
//this would be <%=myExtender.ClientID%> when using a master page
var extender = $find('myExtender_ClientId');
extender.add_collapsed( function() { alert('collapsed'); });
extender.add_expanded( function() { alert('expanded'); });
More details here: http://forums.asp.net/p/1112899/1717195.aspx
You'd want to execute some server side logic to populate stuff in the container that becomes visible. For this you need some AJAJ. This is nothing but some aspx pages written in such a way to render JSON responses back to your browser. But they will be invoked via an XMLHttpRequest object.
Alternatively you can rely on asmx web services, or even page methods to do the work for you. They've to run as script services to do the work for you.
Have a look at this thread for that: http://forums.asp.net/t/1729092.aspx?loading+data+in+the+target+control+panel+of+collapsible+extender+when+Collapse+Expand+control+panel+is+clicked+
I am working on a project and in that I want to apply background fade feature when a panel opens on a webpage in asp.net. The fade in feature looks like the Facebook photo feature.click here to see Facebook photo effect
Here consider the photo as my panel and background as my web page.
Please help me with this as I don't know what this effect is called.
It's called an overlay and one way to do it is to append it at the end of your document:
Html:
<body>
... all your content ...
<div id="overlay">
<div class="pictures">
</div>
</div>
</body>
CSS:
body {
position:relative;
}
#overlay {
position:absolute; /** or fixed **/
top:0;
left:0;
width:100%;
height:100%;
display:none;
}
By default your overlay is hidden. you can use JavaScript to set the display to block when the gallery is displayed;