Develop Reference

Overlay modal using jquery hide and show

I want to do an overlay for my post content, like a 'full-screen modal dialog'. I've stuck at hiding and showing my content and items. I want when the content is shown, the items will become invisible.
http://jsfiddle.net/vjdwLzx8/
$(function(){
$('.item').on('click',function(){
$(this).next('.content').css('display','block');
});
});
I also tried
var item= $(this).next('.content').detach();
$('body').html('').append(item.css('display','block');
but I have to reload the page to get back to the item page which is something bad.

use
DEMO FIDDLE
$('.item').on('click',function(){
$('.content').hide(); // hide
$(this).next('.content').show(); // show
});
WITH ANIMATION
DEMO FIDDLE(Animation)
$('.item').on('click', function () {
$('.content').hide("slow", function () {
// Animation complete.
}); // hide
$(this).next('.content').show("slow", function () {
// Animation complete.
}); // show
});

Create an overlay div
<div class="overlay"></div>
css:
.overlay {
display:none;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
opacity: 0.5;
z-index: 100;
background: black;
}
onClick of items activate overlay and show content.
$(function () {
$('.item').on('click', function () {
$('.item, .content').hide();
$('.overlay').show();
$(this).next('.content').css('display', 'block');
});
$('.close-content').on('click', function () {
$('.content, .overlay').hide();
$('.item').show();
});
});
Also added provision for a close button.
Fiddle

How to smooth this search bar animation

I tried to modify the code taken from herefor my usage need:
CSS:
.search-bar{ width: 200px; display: none; }
.searchbox { display: inline;}
.trigger { display: inline}
HTML:
<div class="search-bar">
<input type="text" name="s" class="searchbox" value="Search" onfocus="this.value=''">
</div>
<button class="trigger">search</button>
JS:
$(document).ready(function() {
$('.trigger').click(function() {
if ($("search-bar").is(':visible')) {
$('.search-bar').animate({width: 'toggle'}).css({ 'display' : 'inline'});
} else {
$('.search-bar').animate({ width: 'toggle' }).css({ 'display' : 'inline'});
}
});
});
It works as expected but the animation isn't smooth. How to make the animation flow smoothly.
JSFiddle
Thank you,

try something like this, FIDDLE
$(document).ready(function () {
$('.trigger').click(function () {
if ($(".search-bar").is(':visible')) {
$('.search-bar').fadeOut();
} else {
$('.search-bar').fadeIn();
}
});
});
simplified version
$(document).ready(function () {
$('.trigger').click(function () {
$('.search-bar').fadeToggle("slow");
});
});

set animation time also see updated fiddle
$(document).ready(function() {
$('.trigger').click(function() {
if ($("search-bar").is(':visible')) {
$('.search-bar').animate({width: 'toggle'},500);//here set animation duration
} else {
$('.search-bar').animate({ width: 'toggle' },500);//here set animation duration
}
});
});
reference animation()

You just need to add the width to each expandable div.
To explain:
jQuery doesn't know the dimensions of your hidden div until it's displayed. So when it's clicked on it actually pulls it out of position to measure it before quickly replacing it. This often has the side effect of causing some jumpiness. Setting the width on the element prevents jQuery from pulling it out of position.
More detailed information please see this link:
jQuery slideDown is not smooth

Someone has helped me out. The feature I want is here: http://jsfiddle.net/mw7yK/12/
CSS:
.search-bar { display: inline; }
.searchbox { width: 200px; display: none; }
.trigger { display: inline}
HTML:
<div class="search-bar">
<input type="text" name="s" class="searchbox" value="Search" onfocus="this.value=''" />
</div>
<button class="trigger">search</button>
JS:
$(document).ready(function() {
$('.trigger').click(function() {
$('.searchbox').animate({width: 'toggle'}, 1000);
});
});

fadeIn works as show() in some div's

I'm using jquery in my webpage but fadeIn and fadeOut doesn't work after the first two times. i had tried with show(500,...), hide and animate, with easing and without it, but it behaves the same.
here is one of the div's i want to fadeIn
<div id="rfcdiv" style="position: absolute; display: none" >
<img alt="Ticket" src="images/DATOSfiscales.png" style="position:absolute;width:fit-content;left:0px;top:230px;z-index:18"></img>
<div id="text1" style="position:absolute; overflow:hidden; left:45px; top:341px; width:37px; height:21px; z-index:20"><div class="wpmd"><div><font face="Myriad Pro Light"><B>RFC:</B></font></div></div></div>
<input name="RFC" id="RFC" type="text" maxlength=13 value="<?php if (isset($_GET['rfc'])){echo $_GET['rfc'];}?>" style="position:absolute;width:276px;left:79px;top:340px;z-index:13">
<div id="ValidacionRfc" style="position:absolute; overflow:hidden; left:360px; top:341px;width: fit-content;height: fit-content;z-index:14;display: none" onmouseover="mostrarglobo(1)" onmouseout="mostrarglobo(0)"></div>
here is the code that shows it:
$("#image1").animate({ height: "450px" }, 800, function () {
$("#ingresarfolio").animate({ top: "170px" }, 800, function () {
$('#rfcdiv').fadeIn(500, function () {
recheck_ticket(1);
});
});
});
you can try here: MyPage
(just pressing Enter on the textbox)
//apologize about my english
edit:
When the page loads it fades in correctly, if you put a leter on the textbox it will fadein an icon correctly but when you only press enter it will just appear after a time.
Sorry, i cant show the code correctly so the code is the first commented code in MyPage

In you script (facturar.js)
the fadeIn syntax is
$('#rfcdiv').fadeIn(function () {
recheck_ticket(1);
}, 2000);
try changing it to
$('#rfcdiv').fadeIn(2000, function () {
recheck_ticket(1);
});
Refer .fadeIn()
Then,
Remove position:absolute from all components inside #rfcdiv and let them placed in document flow.
and position #rfcdiv whereever you want by applying position:absolute, top and left to it.
like this
#rfcdiv {
display: none;
position: absolute;
top: 150px;
z-index: 999;
left: 10px;
}

From my first look without going to your website, your timing is incorrect. See edit below.
$('#rfcdiv').fadeIn(function () {
recheck_ticket(1);
}, 500);

If div is not hidden click anywhere to hide [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 9 years ago.
I am trying to make a div hidden by default and show by clicking a button. To close the div, I can either click on the button or anywhere else on the screen. Below is my attempt but the closing part is not working. I appreciated if anyone can point me to the right implementation or maybe a better way to do this.
$('#theDiv').hide();
$("#showDivBtn").click(function(){
$("#theDiv").show();
});
if ( !$('#theDiv:hidden') ) {
$(document).click(function() {
$('#theDiv').hide();
});
$('#theDiv').click(function(e) {
e.stopPropagation();
return false;
});
}
});

placing the entire event handler inside a condition only checks the condition on first pageload, and the event handler is probably never attached, try it like this instead :
$('#theDiv').hide();
$(document).on('click', function(e) {
if ( $(e.target).closest('#showDivBtn').length ) {
$("#theDiv").show();
}else if ( ! $(e.target).closest('#theDiv').length ) {
$('#theDiv').hide();
}
});
FIDDLE

Try this,
$('#theDiv').hide();
$("#showDivBtn").click(function(){
$("#theDiv").toggle();
});
$(document).on("click" , function(event){
if( $(event.target).attr("id") != "theDiv" && $(event.target).attr("id") != "showDivBtn" && $(event.target).parents("#theDiv").attr("id") != "theDiv")
{
$('#theDiv').hide();
}
});

try using
if( !$('.theDiv' ).is( ':visible' ) )
instead of
if ( !$('.theDiv:hidden') )

try this
<script type="text/javascript">
$('.opendiv').hide();
$(document).click(function (event) {
var $target = $(event.target);
if ($target.attr('id') == 'addAccordion') {
if ($('.opendiv').is(':hidden')) {
$('.opendiv').show();
}
else {
$('.opendiv').hide();
}
}
else if ($target.closest('.opendiv').length > 0) {
}
else {
$('.opendiv').hide();
}
})
</script>
<div>
<input id="addAccordion" type="button" value="ADD COMMENT" />
</div>
<div id="rs" class="opendiv">
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">
www.asp.net</a>.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
</div>

I don't think you can target document with a .click handler like that.
Rather than making it so you can literally click anywhere to close the DIV, just make it seem that way. Put a clear DIV behind the one that you want to be able to close and make it cover the whole screen. Then you can attach your click handler to that.
HTML:
<button>Click me to show the DIV</button>
<div class="container">
<div class="thediv">
<p>I'm the DIV</p>
</div>
</div>
JavaScript:
$(document).ready(function () {
var $button = $("button");
var $container = $("div.container");
$button.click(function () {
$container.show();
});
$container.click(function () {
$container.hide();
});
});
CSS:
div.container {
display: none;
position: fixed;
top: -5%;
left: -5%;
width: 110%;
height: 110%;
}
div.thediv {
position: absolute;
top: 30%;
left: 10%;
background-color: gray;
color: white;
padding-top: 1em;
border-radius: 5px;
width: 50%;
}
p {
background-color: black;
text-align: center;
padding: 2em;
}
For demonstration purposes, I made the background DIV visible in this Fiddle

jQuery: Showing a hidden div on page scroll

jQuery
function showDiv() {
if ($(window).scrollTop() > 100) {
$('.lock').fadeIn('slow');
} else {
$('.lock').fadeOut('slow');
});
}
$(window).scroll(showDiv);
showDiv();
HTML (.lock { display: none; position: fixed; })
<div class="lock">
Text
</div>
I'm trying to get a hidden fixed div to appear when you scroll to a certain part of the page, and to disappear when you scroll back up. What am I doing wrong?

looks like a syntax issue
function showDiv() {
if ($(window).scrollTop() > 100) {
$('.lock').fadeIn('slow');
} else {
$('.lock').fadeOut('slow');
}//); <-- drop this close parenthesis/semicolon
}
jsfiddle example

please test this:
put styles in the div.lock element.
<div class="lock" style="display: none; position: fixed;">
Text
</div>