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?

Unable to collapse div using Javascript

I have a link,When that link clicked then show Hidden div content.But the problem is next time click i need to Collapse the div.
Here is my Hidden DIV
<div id="divHiddenContainer" style="display: none;">
<div id="divItem1"> <span">
</span></div>
Here is the Link
Read More
Here is Javascript
<script type="text/javascript">
$(".aItemLnk").click(function () {
var id = $(this).attr("id").replace(/^.(\s+)?/, "");
var contentTobeLoaded = $("#divItem" + id).html();
$('#ajax').html(contentTobeLoaded).fadeIn(100000, function () {
});
});

This is how I do mine.
Javascript
<script type="text/javascript">
$(function () {
$('.dragbox')
.each(function () {
$(this).hover(function () {
$(this).find('h2').addClass('collapse');
}, function () {
$(this).find('h2').removeClass('collapse');
})
.find('h2').hover(function () {
$(this).find('.configure').css('visibility', 'visible');
}, function () {
$(this).find('.configure').css('visibility', 'hidden');
})
.click(function () {
$(this).siblings('.dragbox-content').toggle();
})
.end()
.find('.configure').css('visibility', 'hidden');
});
</script>
HTML
<div class="dragbox" id="Widget2" runat="server">
<h2 style="font-size: 14pt">Heading Goes Here</h2>
<div class="dragbox-content">
//Information Here
</div>
</div>
So when you click on the Header (h2), it hides and when you click on it again, it is visible. You will also need some css.. here is mine.
CSS
.column{
width:49%;
margin-right:.5%;
min-height:300px;
background:#e2e2e2;
float:left;
}
.column .dragbox{
margin:5px 2px 20px;
background:#fff;
position:relative;
border:1px solid #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.column .dragbox h2{
margin:0;
font-size:12px;
padding:5px;
background:#f0f0f0;
color:#000;
border-bottom:1px solid #eee;
font-family:Verdana;
cursor:move;
}
.dragbox-content{
background:#fff;
min-height:100px; margin:5px;
font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column .placeholder{
background: #f0f0f0;
border:1px dashed #ddd;
}
.dragbox h2.collapse{
background:#f0f0f0 url("../Images/collapse.png") no-repeat top right;
}
.dragbox h2 .configure{
font-size:11px; font-weight:normal;
margin-right:30px; float:right;
}
I use the 'dragbox' in a sortable jquery as well. So as you can tell, you will not need the .columns, but I showed them just incase you go that route and would like to use div's as columns. If you do, all you need to do is add
<div class="column" id="column1" runat="server">
</div>
And then place the 'dragbox' within that. You can have 2 of these 'columns'
Hope this helps.

You need a condition (if, else) to call fadeIn when the div is hidden, and fadeOut when the div is shown!
Because your code only call fadeIn so the first time, it will fadeIn and the next call it will also fadeIn, so it will stay there.
I don't know in JQuery but that's how I do it in javascript to know if the div is shown or hidden:
if(div.style.display == 'block') {
}
//call fadeOut
else {
//call fadeIn
}

Just use fadeToggle instead:
$(".aItemLnk").click(function () {
var id = $(this).attr("id").replace(/^.(\s+)?/, "");
var contentTobeLoaded = $("#divItem" + id).html();
$('#ajax').html(contentTobeLoaded).fadeToggle(100000, function () {
});
});

You can use the toggle method for your desired div inside the click event of a hyperlink.
I've made an example for you in this fiddle > jsfiddle.net/MK68L
Hope it helps

How to add an image to a dialog form with jQuery

I am working on MVC application and on one of my pages I have an image gallery. I want to do the following: when I click on any given image to open a modal dialog and display the image (the reason for that is because I don't have much space on my page).
Javascript code:
function openDialog(url)
{
$("#dialog-form").dialog("open");
document.getElementById("dialog-form").style ="display: block;"
document.getElementById("modalImg").src = url;
}
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 800,
width: 850,
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
Razer View:
<div style="height: auto; width: 100%;">
#foreach (var photo in Model.Application.Screenshots.Where(p => p.Device == 1))
{
<div style="float: left; width: 250px;">
<img alt='Patka' src='#Url.Content(photo.Url)' width='250' onclick="openDialog('#Url.Content(photo.Url)')"/>
</div>
}
<div id="dialog-form" title="Screenshot Preview" style="display: none;">
<img alt='ModalPatka' id="modalImg" src=".."/>
</div>
<div style="clear: both;"></div>
</div>
However when I click on any image nothing happens. Any idea why?

Are you getting any javascript errors in your console (Firebug for Firefox or the Chrome debug console)? I am not sure of the exact problem, but I can say that you should probably clean up your javascript and use the full power of jQuery selectors, this might help solve your issue.
Here are the changes that I would recommend:
Place a class on your preview images so that we can attach a jQuery handler to the click of that element.
I am not sure if .src is a valid jQuery selector on an element. Try using the .attr() designator
Let's remove the GetElementById calls in your JavaScript and use the jQuery selectors
I think the dialog call needs to be in your .Ready jQuery function. See the examples here
Update your DOM elements before calling the .Dialog function to prevent screen flashing.
Remove the spaces in your jQuery selectors, I dont think this is causing an issue, but it would not hurt to clean those up as well (e.g. (this) instead of ( this ))..even though the jQuery UI examples have them, maybe this is just a coding style concern.
JavaScript Code
$(function(){
$(".OpenDialog").on("click", function(){
$("#dialog-form").style ="display: block;";
$("#modalImg").attr("src", $(this).attr("src"));
$("#dialog-form").dialog({
autoOpen: false,
height: 800,
width: 850,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
allFields.val("").removeClass("ui-state-error");
}
});
});
});
Razor View
<div style="height: auto; width: 100%;">
#foreach (var photo in Model.Application.Screenshots.Where(p => p.Device == 1))
{
<div style="float: left; width: 250px;">
<img alt='Patka' src='#Url.Content(photo.Url)' width='250' class="OpenDialog"/>
</div>
}
<div id="dialog-form" title="Screenshot Preview" style="display: none;">
<img alt='ModalPatka' id="modalImg" src=".."/>
</div>
<div style="clear: both;"></div>
</div>

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

SimpleModal does not size properly with initial load

I currently have a generic image loader using simplemodal.
$('#clickMe').click(function(){
$.modal("<div><img src=\"someimage.jpg\" /></div>");
});
The first time I click -- the modal window is incorrect. It is displayed as a small window behind the image.
The second time I click the button -- the modal is the correct. The size of the modal is correct based on the image rendered and image is inside the modal box.
I do not have the option of creating a div with the image and setting the display none property.
any insight ?

From what I can tell with the way you are loading the image, SimpleModal is not able to determine it's size.
You have a couple of options...
1) Add an onShow callback and call $.modal.setContainerDimensions()
$('.clickMe').click(function () {
$.modal("<div><img src=\"someimage.jpg\" /></div>", {
onShow: function () {
$.modal.setContainerDimensions();
}
});
return false;
});
2) Load the image first, then show it:
$('.clickMe').click(function () {
var img = new Image();
img.onload = function () {
$.modal("<div><img src=\"someimage.jpg\" /></div>");
};
img.src = 'someimage.jpg';
return false;
});
Both of those should work. Let me know if you have any troubles.

this code will display image with simplemodal plugin.
I just post here and add a little description.
html:
<table class="thumbnail">
<tr>
<td>
<img src="/peopledesign/pictures/1319003385503_thumbnail.jpg" alt="">
</td>
</tr>
<tr>
<td>
zoom out
</td>
</tr>
</table>
<div id='pix'>
<div class='header'><span>#springMessage('display.common.showpix')</span></div>
<div class='pixframe'></div>
</div>
<script type="text/javascript">
$(document).ready(
function(){
previewPix($('#project_item_scope a.pixLink,#project_basicinfo_scope a.pixLink'));
}
);
</script>
javascript which will get link's href property and create a image appending to pixframe div:
function previewPix(linkObj){
linkObj.click(
function (e) {
e.preventDefault();
var imgUrl=$(this).attr('href');
var dialogDivObj=$('#pix');
var pixDivObj=$('.pixframe',dialogDivObj);
pixDivObj.empty(); //clean pix div
var img = new Image();
img.onload = function () {// first load image and fit its width and height
var i=$(img);
i.attr('id', 'pic-image');
i.width(this.width);
i.height(this.height);
var outerHeight = i.outerHeight(true);
var outerWidth = i.outerWidth(true);
dialogDivObj.width(outerWidth);
dialogDivObj.height(outerHeight+30);//30=container header's height
pixDivObj.append(i);
showPixDialog(
dialogDivObj
);
}
img.src=imgUrl;
}
);
}
function showPixDialog(dialogDivObj){
dialogDivObj.modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["10%"],
overlayId: 'pix-overlay',
containerId: 'pix-container',
onShow:function(dialog){
// important!
// refere from:http://stackoverflow.com/questions/5240875/simplemodal-does-not-size-properly-with-initial-load
dialog.modal.setContainerDimensions();
}
});
css which modified from SimpleModal's dialog style:
/* pix preview dialog */
#pix {display:none;}
/* Overlay */
#pix-overlay {background-color:#eee; cursor:default;}
/* Container */
#pix-container {
height:auto;
width:auto;
font:12px/1.5 "Helvetica Neue",Arial,"Liberation Sans",FreeSans,sans-serif;
text-align:left;
background:#fff;
border:1px solid #F90;
}
#pix-container .header {
height:30px; line-height:30px; width:100%;
/*background:url(../../images/simplemodal-header.gif) repeat-x; color:#fff;*/
background-color:#F90;
font-weight:bold;
}
#pix-container.header span {padding-left:8px;}
#pix-container.pixframe {
text-align:center;
vertical-align: middle;
margin:0;
padding:5px 5px 5px 5px;
}
#pix-container a.modal-close,
#pix-container a.modal-close:link,
#pix-container a.modal-close:active,
#pix-container a.modal-close:visited {
text-decoration:none;
font-weight:bold;
position:absolute;
right:10px;
top:2px;
color:#fff;
}
#pix-container a.modal-close:hover {color:#ccc;}

If you are using this: SimpleModal , then try to set autoResize to 'true' in plugin options, like so:
$("#sample").modal({
autoResize:true
});
Also try putting your code into a .ready() or window.onload
Good luck, also maybe try other modal plugins, such as FancyBox