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;
Related
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.
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 want to change background image of my page dynamically.
Code in my aspx page is:
<li style="background:url(/newtheme/images/city-images/City-name.jpg) no-repeat center 93px;"></li>
/newtheme/images/city-images/ this part of URL is staic.
while City-name.jpg will keep on changing like California.jpg, Dubai.jpg, etc.
Please help,
Thanks
If you want to do it server-side in your the give your LI an ID and runat="server" attribute:
<li runat="server" id="liCity"></li>
Then in your C# code you will be able to do something like
liCity.Style["background"] = string.Format("url(/newtheme/images/city-images/{0}.jpg) no-repeat center 93px;", "Moscow");
I have a specific page ,i want in the button click event and under some condition to disable all the controls and grayout the whole page ,showing an information message to state that the confirmation is done .
How to do that in a general way ?
You basically want a mask. Although not exactly to your question look at this jQuery based load mask plugin, you should be able to adapt it to suit your needs:
https://code.google.com/p/jquery-loadmask/
Have a look at the modal popup that is included in the Ajax Control Toolkit:
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx
This will allow popup of a message that effectively prevents interaction with the rest of the page.
$(document).ready(function() {
if(Conditions satisfy){
$('#div_controls').attr('disabled', true);
$('#div_status').attr('disabled', false);}
else{ $('#div_controls').attr('disabled', false);
$('#div_status').attr('disabled', True)
}
});
In HTML
<div id="div_status"> Your Message with your styles </div>
<div id="div_controls"> Your Controls inside this Div </div>
Without any Post back,WO loosing the data, State It can be done..
or Check this demo
http://www.zurb.com/playground/reveal-modal-plugin
you can make all controls "invisble" after user click by
foreach (Control c in Page.Controls)
c.Visible = false;
Or a better way would be to use plugins such as Modal-UpdateProgress
in HTML
<div id="layer"></div>
<div id="container">
----
----
----
</div>
and in CSS
#layer{
background: none repeat scroll 0 0 white;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 100000;
}
This will disable the page ( or it will act like disabled ).
I want to have an animated GIF image to appear or load whenever my .aspx page (for my appln) is loaded or postaback or some background process is going on::
<div id="WaitDialog" style="left: 480px; top: 255px; position: absolute">
<img src="http://developers.sun.com/docs/web-app-guidelines/uispec4_0/progress_graphics/asynch-1F.gif" />
<FONT size=3 class="text3" ><font color="black">Loading, Please Wait.</font></FONT>
</div>
function ProgressBar()
{
var dialog = document.getElementById("WaitDialog");
dialog.style.visibility = 'hidden';
scrollTo(0,0);
}
........ this animated image should load just like as browser progress bar progresses and if I perform any validations in database (DB operations say), then also the image should load...
1) I'm not using AJAX for my application so I dont want AJAX to come into picture too...
2) the image should appear as when the page started loading...
i.e. Something is goin in progress in tha background and the .gif image should load
How can i write the code accordin to tht as now i have a Javascript function ProgressBar() which i invoke by having onSubmit="ProgressBar()" in body tag.....
Can any1 help me in this ?
With the following code, your image is already visible by default, it gets hidden when the page is fully loaded. It gets shown when a form submit happens.
Then when the postback ocurrs, the image will still be visible, then it gets hidden with window.onload() which fires when the browser has finished loading all the elements.
<head>
<script type="text/javascript">
window.onload = function (){ //hide onload
var dialog = document.getElementById("WaitDialog");
dialog.style.display = 'none';
scrollTo(0,0);
}
function showProgressBar(){ //show on submit
var dialog = document.getElementById("WaitDialog");
dialog.style.display = 'block';
}
</script>
</head>
<body>
<div id="WaitDialog" style="left: 480px; top: 255px; position: absolute">
<img src="http://developers.sun.com/docs/web-app-guidelines/uispec4_0/progress_graphics/asynch-1F.gif" />
<font size=3 class="text3" >
<font color="black">Loading, Please Wait.</font>
</font>
</div>
<form onsubmit="showProgressBar()">
.... all the ASPX controls and stuff
</form>
</body>
</html>
You're going to have issues creating it on load.
For unload, throw that in the body onunload:
<body onunload="javascript:ProgressBar()">