Show and Hide overlay using jquery - javascript

I am using JQuery for showing and hiding my overlay and it works just great. Now I also wanted to add some animations, hence I went ahead and check out the jq docs and got some nifty animations which can be applied to the show and hide functions directly.
What though I am looking for is on clicking, the overlay should appear to come up from the from the div which I clicked on, and on closing the overlay, it should hide by minimizing into the div which was used to open it.
Thanks
Fiddle URL if you can show it here

Check this fiddle: http://jsfiddle.net/HfKTA/1/ - Guess this is what you are looking for.
Updated fiddle with multiple triggers: http://jsfiddle.net/HfKTA/2/

Related

Need JS help- collapsing a toggled down element when another is selected

Need help with the "our team" section halfway down this page: http://dev.doubleaevents.com/
When you click an image it opens to reveal more information. I'd like to be able to click another image and have the previously opened image collapse, so that a user can't open more than one image at a time.
Would also like to know if making them slide out to the right (instead of down) would be a simple fix?
I'm a js novice so any explanations are appreciated. Here's the js file for quick reference: http://dev.doubleaevents.com/wp-content/plugins/portfolio-gallery/assets/js/view-toggle-up-down.js
Try adding this:
jQuery('.portelement').each(function(){
if(jQuery(this).hasClass('large')){
jQuery(this).removeClass('large');
jQuery(this).animate({
height:240
},300);
}
});
before:
jQuery(this).parents('.portelement').addClass('large');
In your javascript code.
When you click an item you basically want to search for elements that are already open. Then from there remove the 'large' class name and close that element. From there you continue on to opening the selected element. Thats what this code does.
As far as your other question, it shouldn't be too difficult, just mess around with the animate method and css. But maybe look into the isotope documentation. There may be an option for that.

jQuery toggle button not hiding current selection

I have spent hours trying to figure this problem and i just can't, so if you think you got what it takes please give me a hand.
I am writing jQuery code to add a delete button (iphone style) in a web app. However I can't get it to hide the currently swiped delete when you swipe it for the second time (with intent to hide it). When you slide elsewhere it does hide the previous one.
Here is a jsfiddle example of the code by using click instead of swipe. You will notice if you click twice on the li it won't hide the delete. But if you click eslewhere it does.
the real code is
$("li.swipeDelete").live("swipe",function(){
var $th_btn = $(this).find(".aDeleteBtn");
$(".aDeleteBtn").removeClass("fadeInLeft");
$th_btn.toggleClass("fadeInLeft");
});
Thanks :)
I'm sorry to kill the party but right after i added it it came to me. Moving the removeClass after, and only removing the class if it already has class slideLeft and its NOT the current element.
var $th_btn = $(this).find(".aDeleteBtn");
$th_btn.toggleClass("fadeInLeft");
$(".aDeleteBtn.fadeInLeft").not($th_btn).removeClass("fadeInLeft");
I hope this can be used as a reference. I will also make a jquery plugin so everyone can enjoy this great feature.

disabling background of document when certain div opens

,
HI,
I need some ones help with this, thank you in advance.
In my site i have that when the user clicks on a input box then a new div opens up on top of the input box in that exact place.
Now i need to add that when that div opens i need the background of the hole screen to become black with some opacity, i think it is called overlay.
some thing like i want you can find here:
http://www.omnipotent.net/jquery.sparkline/
if you hover with the mouse over the div on the side that says "come work at splunk".
How can i do something like that with jquery or any thing else.
Thank you very much
You want to use the jQuery UI Dialog Modal.
Edit: jQuery's Dialog method will give you a similar effect but is usually used for onclick events rather than mouseover/mouseout. Have a look at the javascript code on the page you linked (around line 356) and you'll see:
$('#splunkjobs').mouseenter(function() {
// make element absolute, positioned over the top of the float and resize
$('<div id="shade"></div>').
appendTo('body').
css('height', $(document).height()).
animate({opacity: 0.6});
This essentially creates a that covers the page and then fades it in.
I still think using a Dialog for your button is preferred (and much simpler).
this is caled 'modal', you can use jquery:
http://jqueryui.com/demos/dialog/#modal
http://www.queness.com/resources/html/modal/jquery-modal-window.html
http://dev.iceburg.net/jquery/jqModal/#examples
or if you still need more:
http://coderplus.com/2009/11/jquery-modal-boxes-to-improve-your-ui/

Javascript slide down menu

I'm trying to find something similar to the 'Table of Contents' drop down at the top located at http://codeigniter.com/user_guide/ but for jQuery. It looks like that site uses the moo tools fx library. Does anyone know of an already existing plugin for jQuery that does the same thing or easy javascript code to accomplish the same sliding effect for that menu?
It's right there in the core; http://api.jquery.com/slideDown/ . Just call that function in a link's onclick event and you should be good to go.
$('a.expand').click(function() {
$('#toc').slideToggle(); // slide up if down, down if up.
});
To achieve that exact effect you'll just have to use the slideToggle() function built into jQuery.
$('#toggleButton').click(function(){
$('#tableOfContents').slideToggle();
});
You'll need to wrap the table of contents in and have a link/button/whatever width id="toggleButton" to activate it. Make sure the button is outside the table of contents though!
You can check out this links -
http://www.webresourcesdepot.com/sliding-top-menu-with-jquery/
http://net.tutsplus.com/tutorials/javascript-ajax/build-a-top-panel-with-jquery/
You can even google out for more. There are many of them available.
You can use the jQuery .slideDown() and .slideUp methods.
http://api.jquery.com/slideDown/
However something as big as that menu you probably want to call in on the fly with ajax with the callback function on slideDown.
Edit : The reason I recommend calling in the menu with AJAX is because of the usability/accessibility issue cause by having around 100 links off screen that a keyboard user can still tab through. It would take ages for a keyboard user to tab through all the off screen links to finally come to the "Table of Contents" link that activates the menu and then to shift tab back to the one he/she wants...terrible. The menu already does not work with JS off. (There is a link to the Table of Contents page below instead). Therefore calling the menu in with AJAX and giving the first link of the menu focus() is a much better solution.
Yep, it's mootools Fx.Slide. In jQuery you should use slideDown (http://api.jquery.com/slideDown/)

How to expand on mouse click

http://findaccountingsoftware.com/directory/gba-systems/fams-fixed-assets-management-system/
this site contain a tab container. On Applications tab clicking on + sign it goes to expand, I want to know this process name. How to do it?. There is a strange thing occur clicking on + sign expand automatically scroll move and focus on text. What this process name is. How to do that?
This effect is called an 'accordion' menu. jQuery UI has a great one which you can use and also has some great documentation explaining how to use it :)
http://jqueryui.com/demos/accordion/
Beautiful full customization accordion in Bootstrap.
Please refer the following documentation.
https://getbootstrap.com/docs/5.0/components/accordion/

Categories