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?

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>

Disabling background or all controls on a ASPX page using Jquery

I am using this code to show a dialog box that will confirm for a delete button, it works fine, but when it pops up it doesn't disable any controls of ASP.Net page, so I can click on any of the controls or text boxes,
First thing I wanna do is fade out the page when Jquery opens my Div tag BOX and second to disable all the controls.
here's the code
Div (Custom Dialouge box)
<div id="divConfMessage">
<div align="center">
<br /><asp:Label ID="Label1" runat="server" Text="Deleting this eDecision will remove all site content and uploaded documents. Are you sure you wish to continue?" CssClass="headertext"></asp:Label><br /><br /><br /><br /><br />
<asp:Button ID="btnConfOK" Width="200px" Height="25px" CssClass="gradientbutton" OnClick="btDelete_Click" Runat="server" Text="Yes"></asp:Button>
<asp:Button ID="btnConfCancel" Width="200px" Height="25px" CssClass="gradientbutton" Runat="server" Text="No"></asp:Button><br /><br /><br />
</div>
</div>
Script (jquery)
<script type="text/javascript" src="/_layouts/1033/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[id$='btDelete']").click(function()
{
$("#divConfMessage").fadeIn();
});
});
</script>
Button
<td>
<asp:Button ID="btDelete" runat="server" CssClass="gradientbutton" OnClick="btDelete_Click"
OnClientClick="this.disabled=true;this.value='Please Wait...';" Text="Delete" Width="200px" />
</td>
Css for Dialog Box
#divConfMessage
{
position: absolute;
width: 500px;
height: 200px;
top: 50%;
left: 30%;
margin-left: -150px; /* Negative half of width. */
margin-top: -100px; /* Negative half of height. */
border: 2px solid #000;
DISPLAY:none;
background-color:White;
line-height:20px;
text-align:center;
}
Note
All of the code is in ASP content place holder for the page except CSS, I have 2 another Contents with different controls + a Master Page defining all these Content Place holders.
<asp:Content ID="Content4" ContentPlaceHolderID="cphSubmit" runat="server">
<%# Page Language="C#" MasterPageFile="~/my.Master" AutoEventWireup="true" CodeBehind="c.aspx.cs" Inherits="a.b.c" Title="e" meta:resourcekey="PageResource1" %>

set Modal=true; for dilogbox there is modal property, you can set it as True.
try using Jquery dialogue box ( it comes with JqueryUI plugin).
$( "#YourDivorContainerToShowAsDialog" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
EDIt: if you don't want to use buttons, then use like this
$( "#YourDivorContainerToShowAsDialog" ).dialog({
modal: true
});
or if you want to use CSS then you can try
#YourDivorContainerToShowAsDialog
{
position: absolute;
Z-index: withMaxValue
}

Give a higher Z-index for #divConfMessage and then the modal dalog will be on top everything.
When you add a dialog append it to body as this way:
add_block_page();
add_modal_box();
function add_block_page(){
var block_page = $('<div class="page"></div>');
$(block_page).appendTo('body');
}
function add_modal_box(){
var pop_up = $('<div id="divConfMessage"></div>');
$(pop_up).appendTo('.page');
}

Use one transperant image to fadeout the page.
Add one outerDiv and apply the image to the div.
<div id="outerDiv" style="display:none;">
<div id="divConfMessage">
<div align="center">
<br /><asp:Label ID="Label1" runat="server" Text="Deleting this eDecision will remove all site content and uploaded documents. Are you sure you wish to continue?" CssClass="headertext"></asp:Label><br /><br /><br /><br /><br />
<asp:Button ID="btnConfOK" Width="200px" Height="25px" CssClass="gradientbutton" OnClick="btDelete_Click" Runat="server" Text="Yes"></asp:Button>
<asp:Button ID="btnConfCancel" Width="200px" Height="25px" CssClass="gradientbutton" Runat="server" Text="No"></asp:Button><br /><br /><br />
</div>
</div>
</div>
CSS for outerDiv
# outerDiv
{
top:0%;
left:0%;
position:absolute;
background-image:url('../img/FloatingPanel.png');//transperant image
color:White;
z-index: 1102;
Height:100%;
width:100%;
}
Give a higher Z-index for #divConfMessage than the Z-index of outerDiv(ie:1103).
Show the outerDiv onclick of btDelete

Centering contents of a div - using CSS

I have the following source in a user control:
<asp:Panel runat="server" ID="PanelParametersList" CssClass="AccessReportParameterControls"></asp:Panel>
<div class = "buttonpanel">
<asp:Button ID="Button1" runat="server" Text="View Report"
onclick="Button1_Click"></asp:Button>
<asp:Button ID="Button2" runat="server" Text="Back"
onclick="Button2_Click"></asp:Button>
</div>
In the header of the containing aspx page I am adding css styles:
<style type="text/css">
.ReportViewer_AccessReportViewer { position:absolute; top:50px; }
.ReportViewer_AccessReportViewer_noparams { position:absolute; top:0px; }
.AccessReportParameterControls {width: 100%; background-color: #E4E4EC; padding: 5px; }
.ParameterContainer {width: 100%;}
.ParameterControlLabel {padding:0, 10, 0, 10;}
.AccessReportParameters {width: 100%;}
.buttonpanel {margin:0 auto; }
</style>
I am trying to center the contents of the button panel div but am having no luck.....any ideas?

For centering content in a div
text-align:center;

<div class = "parent">
<button />
</div>
Style:
.parent{
text-align:center;
}
This is all you need to do. Set the text-align to center in any parent container and the inline elements will follow the rule.
As a good practice I would advice you to place your styles in a different style.css file and place this in your .asp files:
<link href="style.css" rel="stylesheet" type="text/css" />

Asp.net Checkbox OnCheckedChanged not fired when JQuery checks check box

Thank you for taking the time to read and review my post. I've done a lot of Google searching but have yet to find the answer to my jquery/asp.net question. My issue is I'm trying to replace the standard check box with an on/off image. There is a neat tutorial about doing this here. My issue is that my asp OnCheckedChanged check box event is not being called when Jquery places a check in the check box.
ASP.NET Master Page Scripts that works
<link href="~/Styles/jquery.tzCheckbox.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<%#ResolveUrl("~/Scripts/jquery.tzCheckbox.js") %>"></script>
<script type="text/javascript" src="<%#ResolveUrl("~/Scripts/script.js") %>"></script>
Aspx Page with Checkbox
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:DetailsView ID="DetailsView1" runat="server" Height="16px" Width="575px">
<Fields>
<asp:TemplateField>
<EditItemTemplate>
<asp:CheckBox ID="Edit_CheckBox1_CB" runat="server" AutoPostBack="true" OnCheckedChanged="Edit_CheckBox1_CB_Clicked" />
</EditItemTemplate>
<InsertItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</InsertItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Fields>
</asp:DetailsView>
JQuery Script called script.js
(function ($) {
$.fn.tzCheckbox = function (options) {
// Default On / Off labels:
options = $.extend({
labels: ['ON', 'OFF']
}, options);
return this.each(function () {
var originalCheckBox = $(this),
labels = [];
// Checking for the data-on / data-off HTML5 data attributes:
if (originalCheckBox.data('on')) {
labels[0] = originalCheckBox.data('on');
labels[1] = originalCheckBox.data('off');
}
else labels = options.labels;
// Creating the new checkbox markup:
var checkBox = $('<span>', {
className: 'tzCheckBox ' + (this.checked ? 'checked' : ''),
html: '<span class="tzCBContent">' + labels[this.checked ? 0 : 1] +
'</span><span class="tzCBPart"></span>'
});
// Inserting the new checkbox, and hiding the original:
checkBox.insertAfter(originalCheckBox.hide());
checkBox.click(function () {
checkBox.toggleClass('checked');
var isChecked = checkBox.hasClass('checked');
// Synchronizing the original checkbox:
originalCheckBox.attr('checked', isChecked);
checkBox.find('.tzCBContent').html(labels[isChecked ? 0 : 1]);
if (isChecked) {
originalCheckBox.attr('checked', isChecked);
}
});
// Listening for changes on the original and affecting the new one:
originalCheckBox.bind('change', function () {
checkBox.click();
});
});
};
})(jQuery);
CSS file
.tzCheckBox{
background:url("../Images/background01.png") no-repeat right bottom;
display:inline-block;
min-width:60px;
height:33px;
white-space:nowrap;
position:relative;
cursor:pointer;
margin-left:14px;
}
.tzCheckBox.checked{
background-position:top left;
margin:0 14px 0 0;
}
.tzCheckBox .tzCBContent{
color: white;
line-height: 31px;
padding-right: 38px;
text-align: right;
}
.tzCheckBox.checked .tzCBContent{
text-align:left;
padding:0 0 0 38px;
}
.tzCBPart
{
background:url("../images/background01.png") no-repeat left bottom;
width:14px;
position:absolute;
top:0;
left:-14px;
height:33px;
overflow: hidden;
}
.tzCheckBox.checked .tzCBPart{
background-position:top right;
left:auto;
right:-14px;
}
Last Note
Everything works as needed, I just can't seen to get the page to auto post when JQuery checks the check box. Thank you again for your help!

Changes made through javascript will not fire events such as onclick or onchange. What you will need to do is fire the event yourself once you change the value of checked. I am not familiar with the particulars of .net's OnCheckedChanged, but let's assume in the html it turns into onchange (you will need to verify this through viewing the source). You would do something like this:
originalCheckBox.attr('checked', isChecked);
originalCheckBox.change(); // will call the onchange code