Angular - Making ui-view slide out - ngAnimate - javascript

I'm currently trying to figure out the best way of making a ui-view slide out of the header when it is triggered.
Basically I have navigation buttons and a view appears when they are clicked. It is the same view for each, but with different content. I am using NgAnimate. My problems are: 1) The animation is triggered each time the button is clicked and I only want it to be triggered when the view is NOT active. 2) I want to make it slide out and push the other content down and I'm struggling with that right now. Any tips or plnkr's would be greatly appreciated.
EDIT: I have created a small plnkr to show what I'm trying to do here:
http://plnkr.co/edit/5eW6aN?p=preview
When the user clicks on link 1, 2 or 3, I want the grey box to slide out but ONLY if it is not visible. If it is visible, I just want the content to change without it sliding out.
If possible, when the user clicks "Home", I want the grey box to slide back in too.
Edit 2: added animation - still not working: http://plnkr.co/edit/5eW6aN?p=preview

Related

How to stop page from scroll when toggle text opened?

Quick note : I have read other similar questions, but they are all about modal opening up as overlay on body and they want to stop scroll on body.
But in my case, when I open the toggle the page autoscrolls and I don't want that to happen I want it to stay at same place.
Here is the link ( http://isma.tomorrowing.today/ ) where you can see the issue in test text 2 or 3 section by clicking any of the 'Read Text' button.
I want the webpage to stay at some position even when toggle is opened.
Although I am using elementor in Wordpress on the website, but custom CSS or JS works for me as well.
Highly appreciate any help.

Bootstrap 3 gallery auto slide activating after modal opens?

I'm using Bootstrap 3 and I have a gallery on the home page and a modal. I have disabled the auto slide on the gallery by using:
function galleryCarousel() {
$ub('.carousel').carousel({
pause: true,
interval: false
})
};
My only issue is when someone clicks on the button to bring up the modal, the gallery suddenly starts to auto slide again and will continue until you close the modal. The strange thing this only happens after you click to go to the second image in the gallery will it start auto slide again.
I've tried several ways to fix this to no avail.
You can see the prototype working here: http://copy-writer-otter-74032.netlify.com/
Simply advance the gallery to the next slide, then click on "profile" button at the bottom of the page to bring up the modal - wait a few seconds and watch the gallery start auto sliding again.
The problem is that you are already initializing your slider with the data attributes. This means the default slider is applied. The reason it seems to be not on auto, is because the slider won't move when you hover over it by default. As soon as you open the modal, the slider does not receive a hover, and it will start to move. Just place your mouse on the header, or open one of the dropdowns, and you'll see it starts moving.
The easy solution would be to add data-interval="false" to your slider element. This also means you can remove that javascript.
Have a look at the demo I created.
Whithout the data attribute: http://codepen.io/anon/pen/rVRaeR
With the data attribute: http://codepen.io/anon/pen/JdzoKj

Ionic using back button with out a top menu

I have a specific page that I want full screen, so I hide the top bar and have a custom back button that calls ionicNavBarDelegate.back(), it does nothing. I even tried to call the parent controllers ionicNavBarDelegate.back() with an event, with no success. I can make it go back using javascript but then the history gets all messed up. It's basically trying to have back button on pages with out a top menu. Any idea? Thanks

jQuery Slidedown - I search another effect but don't know the name

I'm working on a HTML version of the Office Ribbon to implement it in any HTML website.
Currently everything is working fine. I do have a button and when I click on it, a menu is shown.
This is done by using the jQuery SlideDown function:
$(this).slideDown({
duration: time
});
Here's a fiddle to demonstrate the effect: http://jsfiddle.net/Complexity/qwV84/
Now, when you open the fiddle and you click the "new items" icon, you see that a menu is rendered (it's slowed down just for showing you). And I do have a problem with the rendering of the menu. The top of the menu is rendered and than it goes to the bottom.
When you have Office 2013 installed open Outlook and click an icon to open a menu there. There the bottom of the menu is rendered just under the icon and then the menu is falling down and the top is being rendered. In fact, it looks like the menu is dropping down from behind an invisble white panel.
I would like to achieve the same effect but I don't know how. Anyone has an idea?

How to make a full page JS and CSS menu

To be more specific, how do we create a JavaScript menu with CSS styling that occupies the whole page, but the menu bar will be shown. There will be an icon on the top-left. Upon clicking that icon or symbol, the menu should appear and that image should glow. And after cliking it again, the menu goes away. I tried a lot but failed. I am just 14 year old. Please help me.
If there is something like that already which is open source, please post a link so that I can get on it.
UPDATE: I did it own my own.
Try this site here which gives you different menu bars to choose from. all you need to do is download a menu and change the menu details inside the script so that you can change menu names, add more or fewer menu tabs, etc. It uses jquery and contains its own css page which you can manipulate.
In order to hide and show the menu, how about using something like a html tooltip, except for hovering over the button to open/hide the menu, you can set it so that if you click the button, it opens/hide the button ?
Try this its opensource
http://www.interspire.com/content/2005/12/07/building-an-expanding-dhtml-menu-with-css-and-javascript/
http://www.noupe.com/css/13-awesome-java-script-css-menu.html

Categories