We Keep Coding

How to fix scroll problem when the modal dialog is show up?

when I show up my modal dialog popup (after a click on a button), the scroll-bar in the background scroll-down and idk why.
I've already tried some css modification like this one
$('body').css('overflow', 'inherit')
and I've also tried
window.scrollTo(0,0)
<div
class="modal fade" id="PopUpModificaPOS" role="dialog"
style="display:none">
<div class="modal-dialog" style="width:100%" id="divPopupMod">
<% Html.RenderPartial("Partial/PopUpModificaPOS", Model); %>
</div>
</div>
//after a click on a button,this button call
function showPopUpModificaPOS(){
$("#PopUpModificaPOS").dialog({
height: 325,
width: 500,
modal: true,
position: "absolute" }).dialog("widget")
.position({ my: "top", at: "top", of: window });
}
I expect the scroll-bar must not scroll-down.

I solved the problem changing the way I build the popup.
<script id="modificaTemplate" type="text/x-kendo-template">
<form class='formPopUpPos' id='formModifica'>
//put here your popup layout
</form>
</script>
//then call the script
function showpopup(){
var template = kendo.template($("#modificaTemplate").html());
var result = template();//pass here your parameters if u have someone
$("#popupKendoDialog").html(template);
var popupModificaPOS = creazioneDelPopupDialog();
popupModificaPOS.dialog({ title: 'Modifica dispositivo POS' });
popupModificaPOS.dialog({ width: '500' });
popupModificaPOS.dialog('open');
}
function creazioneDelPopupDialog() {
var popupRegistrazionePOS = $("#popupKendoDialog").dialog({
autoOpen: false,
height: 'auto',
width: 'auto',
position: { my: "center top", at: "center top", of: window },
modal: true,
open: function () {
$(".formPopUpPos").css({ "color": "#4d4d4d" });
$(".formPopUpPos").css({ "font-family": "inherit" });
$(".formPopUpPos").css({ "font-size": 12 });
}
});
return popupRegistrazionePOS;
}
I still dk why doens't work in the other way.

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

CSS + jQuery - Unable to perform .toggle() and repeated jQueryTemplate Item [I must warn you this is a bit overwhelming]

Okay here we go:
Stream.html (Template file)
<div class="streamItem clearfix">
<input type="button" />
<div class="clientStrip">
<img src="" alt="${Sender}" />
</div>
<div class="clientView">
${Sender}
<p>${Value}</p>
<p>${DateTime}</p>
<div class="itemGadgets">
<ul>
<li class="toggleInput">Value</li>
<li></li>
</ul>
</div>
<div class="inputContainer">
<input type="text" value="" />
</div>
</div>
</div>
<div class="spacer" />
Default.aspx (jQuery)
$('.toggleInput').live('click', function () {
$(this).parent().parent()
.find('.inputContainer').toggle();
$(this).parent().parent().find('.inputContainer')
.find('input[type=text]').focus();
});
Update: The above has been changed to:
$('.toggleInput').live('click', function () {
$(this).closest(".clientView").find(".inputContainer").toggle()
$(this).closest(".clientView").find(".inputContainer")
.find('input[type=text]').focus();
});
Issues with jQuery:
I have comments that belong to each .streamItem. My previous solution was to use ListView control as follows:
<ItemTemplate>
<asp:Panel ID="StreamItem" CssClass="StreamItem" runat="server">
...
<!-- Insert another nested ListView control here to load the comments for the parent stream. -->
So as you can see, this is not a solution since I started using jQuery Templates and I am fetching the data using the following jQuery $.ajax method:
$.ajax({
type: 'POST',
url: 'Services.asmx/GetStream',
data: "{}",
contentType: 'application/json',
success: function (Stream) {
$.get('Templates/Stream.html', function (template) {
$.tmpl(template, Stream.d).appendTo("#Stream");
});
}
});
How can I resolve this without using the old ListView solution but by using jQuery Templates to load the comments whenever I am getting data for a specific stream? I am using a simple WebMethod to return my data as follows:
[WebMethod]
public List<Stream> GetStream()
{
List<Stream> Streams = Stream.GetRange(X, X, HttpContext.Current.User.Identity.Name);
return Streams;
}
I am looking for a way to handle the .toggleInput click event. I need check if .Comments (a main container for the (to be comments container <div>)) has children (or more than one .commentItem). If so, then I need to show that .inputContainer and hide all the other .inputContainer divs with .Comments size() == 0 if they're visible.
Please see the image below:
Update: CSS Issue below is resolved. (I had a conflict)
#globalContainer div
{
float : right;
position : relative;
display : inline-block; /* <-- Thank you Firebug. */
}
Default.aspx (Partial CSS)
div.streamItem div.clientView
{
float : left;
width : 542px;
}
div.streamItem div.clientView p
{
margin : 5px 0 0 0;
font-size : 10pt;
}
div.streamItem div.clientView
div.inputContainer
{
display : none; /* Doesn't hide .inputContainer */
padding : 2px;
background-color : #f1f1f1;
}
Issues with CSS:
On page load, display: none; has no effect.
That's it! If you're reading this I'd like to thank you for your time and thoughts! :)

yuo are trying to access elements in wrong place
in js:
$('.toggleInput').live('click', function () {
$(this).parent().parent()
....
is it has no .inputContainer child element - there is nothing to toggle
(.closest wouldn't work also, because .inputContainer is not a parent of the .toggleInput, but its parents sibling )
jQuery selector would be $(this).closest('.itemGadgets').next();
for 2.
inside your click handler
var $currentInputContainer = $(this).closest(".clientView").find(".inputContainer");
....
$('.inputContainer').each(function(){
var $this = $(this);
$this.toggle( $('.commentItem', $this).length > 0 );
});
//but it is better always to show the inputContainer which link was clicked
$('.inputContainer').not($currentInputContainer).each(function(){./*toggle empty|not empty containers */..});
$currentInputContainer.show();

JQuery bring expanded image to front

Hi I am working with a JQuery expand image function and I needed the expanded image to be on the front overlapping others but somehow I couldn't find a way to do it, I have tried to place the z-index on multiple locations but no help, please kindly advice, thanks!:
<style type="text/css">
.growImage {position:inherit ;width:80%;left:15px;top:15px; z-index:1;}
.growDiv { left: 60px; top: 60px;width:130px;height:130px;position:inherit ; z-index:-1; }
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.growImage').mouseover(function () {
$(this).stop().animate({ "width": "100%", "right": "10px", "top": "20px" }, 200, 'swing');
}).mouseout(function () {
$(this).stop().animate({ "width": "80%", "right": "15px", "top": "15px" }, 400, 'swing');
}); ;
});
</script>
My DataList:
<div style="width: 414px; height: 114px;">
<div class="MostPopularHead">
<asp:Label ID="LabelTitle" runat="server" Text=" Customers who bought this also bought:"></asp:Label></div>
<div id="Div1"
style="padding: 10px; background-color:#EDECB3; height: 322px; width: 372px;"
runat="server">
<asp:DataList ID="DataItemsList" runat="server" RepeatColumns ="3" Width="16px"
Height="108px" >
<HeaderTemplate></HeaderTemplate>
<ItemTemplate>
<a class='MostPopularItemText' href='ProductDetails.aspx?productID=<%# Eval("ProductId") %>&&CategoryId=<%# Eval("CategoryId") %>'
style="padding-right: 3px; padding-left: 3px">
<div class="growDiv">
<img class="growImage" alt="image" src='Styles/CatalogImages/Images/Thumbs/<%# Eval("ProductImage") %>'/>
</div></a>
</ItemTemplate>
<FooterTemplate></FooterTemplate>
</asp:DataList>
</div>
</div>

can you make with this
.css('z-index', parseInt( new Date().getTime()/1000 ));

Two things:
z-index will always be 'auto' unless using position of relative, absolute or fixed. Therefore, position:inherit will not work.
Update your css:
.growImage { position:relative; width:80%;left:15px;}
.growDiv {
position:relative; left: 60px; top: 60px;width:130px;height:130px;
}
Now, I made a JSFiddle to show that I got it working but I had to modify the HTML structure a bit: http://jsfiddle.net/Dpzur/4/
You will need to view the source created by your .aspx page to see how many divs, starting from any div with class: 'growDiv', that you must traverse upwards through until you are at the div element that represents its parent "ItemTemplate".. so you will need to modify my jQuery:
$(this).closest('.growDiv').first().css('z-index', 2);
to:
$(this).closest('.growDiv').first().closest('div').closest('div').css('z-index', 2);
, where you add in a .closest('div) for each div element that you need to traverse upwards through the DOM. Make sense?