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
Related
I have a c# application using a repeater and jQuery to add a little pizzaz to my application. The first portion of the jQuery functions correctly as the content slides up and down to hide or show whatever ONE section had been clicked on, but the second portion changes all classes including the one inside the section clicked. Why is this?
Here is my repeater layout:
<ItemTemplate>
<div class="head"><span class="expand"> </span> <%#Eval("Job_Title") %></div>
<div class="row" style="margin:0px 0px 20px 50px; display: none;">
<div><%#Eval("Status") %></div>
<div><%#Eval("Department") %></div>
<div><%#Eval("Posting_Site") %></div>
<div><%#Eval("Job_Duties") %></div>
</div>
</ItemTemplate>
Here is my jQuery:
<script type="text/javascript">
$(function () {
$('.head').click(function () {
$(this).next('div.row').stop(true, true).slideToggle(400, function () {
$('.expand').toggleClass('collapse');
});
});
});
</script>
$('.expand') targets all elements with that class, if you just want to target the one inside the current .head you'd do
$(this).prev('.head').find('.expand').toggleClass('collapse')
or the opposite would be
var thisOne = $(this).prev('.head').find('.expand');
$('.expand').not(thisOne).toggleClass('collapse');
Your use of a class as your selector and then using next, means that you are iterating over each 'head' that contains 'div.row'.
You need to change it this:
$(function () {
$('.head').click(function () {
$('.head div.row').slideToggle(400, function () {
$('.expand').toggleClass('collapse');
});
});
});
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?
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>
I can't figure out how to block content in new page with jQuery BlockUI. I have application in aSP.NET MVC. In one view I click the button and new report is generated and opened in new tab/window and I want block this page content until report is not loaded. But in my case content is blocked on first page with button and not in this new one. Can someone help me how to do this, please?
<div>
<button id="btnSubmit">Report</button>
</div>
<script type="text/javascript">
$(function () {
$('#btnSubmit').click(function () {
$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
setTimeout($.unblockUI, 5000);
window.open(link, "Report");
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
return false;
</script>
May require some further debugging but this is the idea:
var w = window.open(link, "Report");
$(w.document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
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