I'm having trouble applying the various slide panel plugins to a div within a page. So, not from the top, side or bottom of the browser window, but from somewhere within the page.
This would work...
$("div").click(function () {
$(this).hide("slide", { direction: "down" }, 1000);
});
but the div slides out of view, so there's no tab to click on to slide it back up.
I could use a separate element to initiate the click function, but I need the clickable element to act as a tab connected to the sliding div.
So when the page loads, you'd see a panel in the middle of the screen, which would have a small tab sticking out of the bottom of that panel. When the tab is clicked, it slides up along with a panel with additional information. When the tab is clicked again, it slides back down.
Any help is appreciated.
You'd need to add in another div right next to it to use as a toggling tab, one that won't be hidden. Have that tab hide/show the div you want hidden.
$("#tab").click(function () {
$("#slider").slideToggle("slow");
});
See this fiddle: http://jsfiddle.net/Jxbkj/
Related
I've two Div's on my page. one is parent div, another div as pop-up.
Currently pop-up is shown/hide on click of parent div or clicking on button inside pop-up window.
How can I achieve that pop-up will be closed when I click away (anywhere outside pop-up and parent div) ? is there any event mechanism already provided ? if yes, How to use it?
You can create another div with full width and height and z-index bigger that other content and less than pop up. Show that div whenever the pop up is showed. Then you can add this div an click event so when the user click on that div it means that it's outside of pop up.
Here is an jsfiddle for that made with jquery just to give you the idea how to make it .
Here is another one with Angular DEMO
On my website, I have buttons that link to different pages via nav tabs. When the buttons are clicked, the view maintains the position (ex: half-way scrolled through the page) on the new page. I would like it to scroll to the top of the new tab view (rather than just stay in the middle) but can't figure out a way to do this. Anyone know a way here?
Obviously you should add some code. But if you're changing tabs via javascript add this bit:
window.scroll(0,0);
That will reposition the window to the top of the page.
Input this JQuery code on the page you need to scroll up
var body = $("html, body");
body.stop().animate({scrollTop:0}, '500', 'swing', function() {
});
I have a popup on my page, it display on clicking any div on the page.
There are multiple divs, with which this popup is associated.
Now the issue is if i click on div, popup gets open, but if i scroll, popup also scroll and come to wrong div.
How to make it fixed to its associated div after click?
Here is a quick example. I'm hoping this is something like what you're talking about. When the first box is clicked, an alert pops up and stays with the first box when scrolling.
I used simple jQuery to create the popup.
$('.box').click(function() {
$('.alert').css('display', 'block');
});
http://jsfiddle.net/d8xwev9o/
I'm trying to make a kind of menu: a global div, inside 5 pictures to click and when you click on one, the content appear below, but all in the same area. Here is a picture (the content is hidden when no pictures are clicked).
http://img844.imageshack.us/img844/6359/divy.jpg
Here is what I've done, but without success:
http://jsfiddle.net/zL7Gn/
See code in jsfiddle
My problem is when you click on a picture, the content appear but all the other pictures are moved on the right...
Thanks a lot
I have a list of reports on a page. I currently have 4 large buttons on the right to view, add, edit or delete a button. We've had complaints about people having to scroll back up to click on the buttons once they've selected a report because they have soo many.
Is there a way to have an html object like a div, stay visible on the page when you scroll it? But within the bounds of the container of the grid?
Thanks
Have you tried giving the buttons or their container position:fixed through CSS? Another way could be to use the onscroll Javascript event to move them or their container.