We Keep Coding

Hide div tag on page load

I have some div's in my project which has some animation on mouse-over done using java-script.
Now my problem is on page load i need to hide all the div's and display only title of the div,and on mouse-over of this title i should be able to make the div visible with all the animation done.
Below is my code:
<div id='Qhse' class="item user">
<h2>qhse</h2>
<div id='qhse' class="qhse" runat="server" >
</div>
</div>
<div id='Policies' class="item home">
<h2>policies</h2>
<div id='policies' class="policies" runat="server" >
</div>
</div>
CSS
#qhse{
padding-top: 0.3em;
padding-bottom:0.3em;
background-color: #2C6D2C;
width: 100%;
height: 100%;
text-align: center;
vertical-align:middle;
}
#policies{
padding-top: 0.3em;
padding-bottom:0.3em;
background-color: #2C6D2C;
width: 100%;
height: 100%;
text-align: center;
vertical-align:middle;
}
JS
$(function () {
$('#nav > div').hover(function () {
visibility: visible;
var field = $('#<%= hdnSelected.ClientID %>');
field.val(this.id);
var $this = $(this);
$this.find('div').stop().animate({
'width': '100%',
'height': '100%',
'top': '-25px',
'left': '-25px',
'opacity': '1.0'
}, 500, 'easeOutBack', function () {
$(this).parent().find('ul').fadeIn(700);
});
$this.find('a:first,h2').addClass('active');
},
function () {
var $this = $(this);
$this.find('ul').fadeOut(500);
$this.find('div').stop().animate({
'width': '52px',
'height': '52px',
'top': '0px',
'left': '0px',
'opacity': '0.1',
'visible': 'false'
}, 5000, 'easeOutBack');
$this.find('a:first,h2').removeClass('active');
});
});

Here is a Working Fiddle.
Added this to Document Ready.
$('#policies,#qhse').hide();
And following minor errors fixed.
visibility: visible;
'visible': 'false'
Still not able to figure out where <ul> tags are. Hide,Hover works fine.

First, a bunch of remarks:
There is no #nav in your HTML.
visibility: visible; inside a function is not a valid JavaScript.
'#<%= hdnSelected.ClientID %>' looks like you're generating your JavaScript using a server-side language. If you do, don't do it. If you don't (i.e. if it's some client-side template engine I've never seen before), make sure this line is doing what you expect it to do.
Make sure $this variable is declared.
What have you tried?
You already have your animation. What you want to do next is to show and hide elements. A simple Google search leads you to the jQuery function show(); similarly, there is a hide() function.
How can you apply those two functions to your actual code?

Jssor Sliders transition is not working

I'm using Jssor sliders,My web method returns 2 image URL & Ajax success function get it correctly.But Transition is not working & only 1st image show.
Html & Css part
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;">
<div id="HomeImgSliders"> </div>
<%-- <div><img u="image" src="http://jssor.com/img/photography/003.jpg" /></div>-->
</div>
<!-- Arrow Navigator Skin Begin -->
<style>
/* jssor slider arrow navigator skin 03 css */
/*
.jssora03l (normal)
.jssora03r (normal)
.jssora03l:hover (normal mouseover)
.jssora03r:hover (normal mouseover)
.jssora03ldn (mousedown)
.jssora03rdn (mousedown)
*/
.jssora03l, .jssora03r, .jssora03ldn, .jssora03rdn {
position: absolute;
cursor: pointer;
display: block;
background: url(http://jssor.com/img/a17.png) no-repeat;
overflow: hidden;
}
.jssora03l {
background-position: -3px -33px;
}
.jssora03r {
background-position: -63px -33px;
}
.jssora03l:hover {
background-position: -123px -33px;
}
.jssora03r:hover {
background-position: -183px -33px;
}
.jssora03ldn {
background-position: -243px -33px;
}
.jssora03rdn {
background-position: -303px -33px;
}
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 123px; left: 8px;"></span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 123px; right: 8px"></span>
<!-- Arrow Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
Here is my Jquery & JSON /Ajax Call Part
<script>
$(function () {
LoadHomeImageSliders();
});
jQuery(document).ready(function ($) {
var options = {
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$AutoPlay: true,
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 0, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1
$AutoPlay: true
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
});
function LoadHomeImageSliders() {
debugger;
var url = '<%= ResolveUrl("~/WebMethods.aspx/GetHomeImageSliders") %>';
$.ajax({
url: url,
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (Result) {
$.each(Result.d, function (key, value) {
var html = "<img u=image src=" + value.ImagePath + "/>";//<-- Image Path/paths comes here Correctly
$("#HomeImgSliders").append(html);
});
},
error: function (e, x) {
alert(x.ResponseText);
}
});
}

Before initialize jssor slider, you'd get slides html well populated.
reference: Jssor - how to add slides dynamically?
<script>
jQuery(document).ready(function ($) {
LoadHomeImageSliders();
});
function LoadHomeImageSliders() {
debugger;
var url = '<%= ResolveUrl("~/WebMethods.aspx/GetHomeImageSliders") %>';
$.ajax({
url: url,
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (Result) {
$.each(Result.d, function (key, value) {
var html = "<img u=image src=" + value.ImagePath + "/>";//<-- Image Path/paths comes here Correctly
$("#HomeImgSliders").append(html);
});
var options = {
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$AutoPlay: true,
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 0, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1
$AutoPlay: true
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
},
error: function (e, x) {
alert(x.ResponseText);
}
});
}
</script>

Webmethod is not fired when using jquery and Masterpage

Here I am calling the webmethod in a jquery...
If I run this code in a normal aspx page then the webmethod gets fired.. But when I use master page and put this code in child page(Default4.aspx) then web method is not being fired. I have used the colorbox jquery plugin.
Here When I click on any link a popup will open and display the file content
My code is as below...
Default4.aspx
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link rel="stylesheet" href="example1/colorbox.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.colorbox.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
$('.non-retina').colorbox({rel:'group5', transition:'none'})
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
$("[id$=LinkButton2]").click(function() {
alert('child');
$.ajax({
type: "POST",
url: "Default4.aspx/lnkbtn1",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert(msg.d);
// Replace the div's content with the page method's return.
$("#[id$=LinkButton2]").attr('href',msg.d);
}
});
});
$(".iframe").colorbox({iframe:true, width:"60%", height:"80%"});
});
</script>
<style type="text/css">
.arrowlistmenu
{
width: 180px; /*width of menu*/
}
.arrowlistmenu .headerbar
{
font: bold 14px Arial;
color: white;
background: black url(media/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}
.arrowlistmenu ul
{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li
{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a
{
color: #A70303;
background: url(media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.arrowlistmenu ul li a:visited
{
color: #A70303;
}
.arrowlistmenu ul li a:hover
{
/*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}
.style1
{
width: 100%;
}
.style2
{
width: 99%;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div id="Result">
Click here for the time.</div>
<p>
<a runat="server" id="a" class='iframe' href="Uploadedfiles/Education Portal.xlsx.1.html">
Outside Webpage (Iframe)</a></p>
<p>
<a runat="server" id="a1" class='iframe' href="~/Images/Desert.jpg">Image
(Iframe)</a></p>
<asp:LinkButton ID="LinkButton2" runat="server" CssClass="iframe"
>LinkButton</asp:LinkButton>
</asp:Content>
.Cs
[WebMethod]
public static string lstbtn1()
{
return "Images/Desert.jpg";
}

[WebMethod]
public static string lstbtn1()
{
return "Images/Desert.jpg";
}
try like this

JQuery BlockUI progress indicator in every Asp.net postback

I would like to implement a jquery blockUI to popup and show a progress indicator (loading circle) during postbacks in Asp.Net. How can I implement this? I am using masterpages so I was wondering if I can implement this code in one place to keep it simple. Is this even possible? Looking forward to hear your thoughts on this.
Thanks in advance.
I was able to develop this. I have included the steps in answers. Let me know if you have questions.

I figured it out myself.
Create a new Asp.net web project.
Include the following in Site.Master markup:
<script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.blockUI.js"></script>
<script language="javascript" src="../Scripts/General.js" type="text/javascript"></script>
<style>
div.blockOverlay {
background-color: #666;
filter: alpha(opacity=50) !important;
-moz-opacity:.50;
opacity:.50;
z-index: 200000 !important;
}
div.blockPage {
z-index: 200001 !important;
position: fixed;
padding: 10px;
margin: -38px 0 0 -45px;
width: 70px;
height: 56px;
top: 50%;
left: 50%;
text-align: center;
cursor: wait;
background: url(ajax-loader.gif) center 30px no-repeat #fff;
border-radius: 5px;
color: #666;
box-shadow:0 0 25px rgba(0,0,0,.75);
font-weight: bold;
font-size: 15px;
border: 1px solid #ccc;
}
</style>
Add the following markup in default.aspx:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate><asp:Button ID="Button1" runat="server" Text="Button"
onclick="Button1_Click" /></ContentTemplate>
</asp:UpdatePanel>
Add a progress indicator image (ajax-loader.gif) to project root
Add the following in General.js
// BlockUI setup
$.extend({
// Block ui during ajax post back
initializeUiBlocking: function () {
if (typeof ($.blockUI) != 'undefined') {
$.blockUI.defaults.message = 'LOADING';
$.blockUI.defaults.overlayCSS = {};
$.blockUI.defaults.css = {};
var request = Sys.WebForms.PageRequestManager.getInstance();
request.add_initializeRequest(function (sender, args) {
request.get_isInAsyncPostBack() && args.set_cancel(true);
});
request.add_beginRequest(function () { $.blockUI(); });
request.add_endRequest(function () { $.unblockUI(); });
}
}
});
$(document).ready(function () {
$.initializeUiBlocking();
});

Have a look at this
http://www.malsup.com/jquery/block/#overview
This works for ajax calls.
And you need to place the following line
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
in a place available to all pages.

Introduction:
To Block the Page when Data is Submitting, we have various options, Either we can use Ajax based UpdateProgress or some jQuery Stuff. But sometime Ajax UpdateProgress not very useful because of complexity. So, the better approch appoach is to use jQuery UI Block Plug-In.
Implementation:
Download jQuery UI Block Plugin from : http://www.malsup.com/jquery/block/
<script type="text/javascript" src="js/jquery.1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
$("#<%= btnSubmit.ClientID%>").click(function() {
$.blockUI({
message: "<h3>Processing, Please Wait...</h3>" ,
css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
} });
});
The above code is simple code without any AJAX or other complex script.
I found this Article on Website and tested, its work fine

how show a message after closing a PoPupWindow in ParentWindow (In The Middle of CountDown Timer)?

i have two popup windows in my Home Page (Default.aspx) like below :
apsx Code :
<div id="OffDiv">
</div>
<div id="TimerContainer">
<asp:Image ID="imgWhiteCircle" runat="server" ImageUrl="~/Images/WhiteCircle.png" />
<asp:Label ID="lblCountDown" runat="server" Text="60" Font-Bold="True" Font-Size="50px"
ForeColor="Black"></asp:Label>
</div>
css :
div#OffDiv
{
display: none;
position: fixed;
top: 0px;
right: 0px;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
z-index: 90000;
background-color: black;
filter: alpha(opacity=30); /* internet explorer */
-khtml-opacity: 0.3; /* khtml, old safari */
-moz-opacity: 0.3; /* mozilla, netscape */
opacity: 0.3; /* fx, safari, opera */
}
div#TimerContainer
{
display: none;
position: absolute;
width: 110px;
height: 110px;
top: 200px;
left: 50%;
margin-left: -55px;
padding: 0px;
z-index: 90001;
}
#imgWhiteCircle
{
width: 110px;
}
#lblCountDown
{
position: absolute;
width: 70px;
height: 65px;
text-align: center;
top: 50%;
left: 50%;
margin-left: -35px;
margin-top: -32.5px;
}
JavaScript Code :
<script language="javascript" type="text/javascript">
$(function () {
var x = screen.availWidth;
$('div#OffDiv').css({ 'width': x });
var y = screen.availHeight;
$('div#OffDiv').css({ 'height': y });
$('div#OffDiv').css({ 'display': 'block' });
$('div#TimerContainer').css({ 'display': 'block' });
window.open('http://www.MyPoPUp1.com', '_blank', 'channelmode=no,directories=yes,location=no,resizable=yes,titlebar=yes,menubar=no,toolbar=no,scrollbars=yes,status=yes', false);
window.open('http://www.MyPoPUp2.com', '_blank', 'channelmode=no,directories=yes,location=no,resizable=yes,titlebar=yes,menubar=no,toolbar=no,scrollbars=yes,status=yes', false);
window.focus();
var sec = $('#TimerContainer span').text()
var timer = setInterval(function () {
$('#TimerContainer span').text(--sec);
if (sec == 0) {
clearInterval(timer);
$('div#OffDiv').css({ 'display': 'none' });
$('div#TimerContainer').css({ 'display': 'none' });
}
}, 1000);
}); //End Of $(function ()
</script>
as you see there is a countdown timer in parent window (starts from 60 seconds)
during this timer i do not want to let my users to close popup windows.
how can i do that?
or how can i show a message in parent window when user closes one of popup windows?
mean what is the way to make a connection between closing of popup windows and their parent window?
thanks in advance

This way you can get feedback whether the opened popup is closed or not.
var popup = window.open('http://www.google.com');
var timer = setInterval(function () {
if (popup.closed) {
alert('popup closed!');
clearInterval(timer);
}
}, 500);
Regards