Load external ajax content into div with animation and "back" functionality - javascript

I'm developing an NFL fantasy web app with bootstrap & jQuery. I originally was using Framework7 because of the easy native app-like interface but abandoned it to develop a fully responsive page instead.
I have a div with a list of matchups and would like for the user to be able to click on one and see the matchup detail. On Framework7, it would slide in an external ajax page, show a "back" button at the top which would easily slide that new div out and go back to the original one.
Is there an easy way to build this custom with jQuery? I already have been messing with $.load() but I'm not sure of how to:
1) slide/animate that external page into the div I need, and
2) add a "back" or "close" button that will animate/hide the div and show the original div instead.
Thanks in advance.

Sure, exactly as you said it...
$(divElement).load("newPage.html",function(){
$(divElement).slideIn();
});
Then on the click action of a back button element in that newPage.html
$(backButton).on("click",function(){
$(divElement).slideOut();
}

Related

Xpages: Refresh one component of an Xpage from another

The layout in my app has a menu on the left and content on the right. When a user selects a menu item on the left I open the correct Xpage. This is pretty standard.
I have transitioned to a Bootstrap menu on the left. Once loaded, state changes (menu selection, accordion drop downs) are handled via CSJS. So this gives me the opportunity (if possible) to refresh the content window on the right without having to submit the whole xpage again.
But I do not think you can do a partial refresh from one custom control to another.
Is there any way to do this or anyway to structure the app so I can do this?
May be you can do something with postMessage in CSJS. I have used it to do actions, like resize in a XPages when it is embedded inside a widget in IBM Connections. See the interaction in the OpenNTF project 'Generic HTML and XPages Widgets for IBM Connections', https://www.openntf.org/main.nsf/blog.xsp?permaLink=NHEF-8YRN3J
More details how to use postMessage. https://davidwalsh.name/window-postmessage
Probably the easiest way is to wrap your right side contents with a panel and give that panel an id. Then when the user changes something on the left menus do a partial refresh of the panel. You might need to type in the panel id as it will not be available on the id picker in partial refresh.
Howard

How to link an anchor tag with a modal in Angular for user logins?

I am trying to recreate a feature where you click on something like a login (shown as JOIN/SIGN-IN in the below pictures from Cozymeal.com, can't post images sorry) and a popdown menu comes, to which you connect using GitHub. I am attempting to do this in Angular, and I had a theory as to how to do this and how this works.
Say I am on index.html, I should create an anchor tag (styled to look like a button that says sign-in) that contains a function for ng-click, and upon clicking, it will pull down a modal (using ng-show/hide for the display, and ng-animate for the pulldown effect) that will contain another anchor-tag that links to authentication via GitHub.
Is this a good way to proceed in building this functionality? I set up my routes in Angular, but coming up with this pulldown effect is certainly confusing me.
(http://i.imgur.com/nhEcRLi.png)
(http://i.imgur.com/QMiFlTP.png)
It's possible to do it like you just stated, it's also possible to use CSS3 styling in stead of ng-animation and adding the style on click with ng-class and adding a seperate class for closing the menu.
http://www.w3schools.com/css/css3_transitions.asp

creating jquery effect to show new page in same screen

In some of the website I found header and footer remains fixed.
When user click on any link in header or footer then new page opens from downside(or any other way) on same window.
I dont remember exactly the link for such site. I appreciate if someone can show me how that work.
I know how to open new page without page reload using ajax. But dont know how to create attractive effect which web developer creates.
I google it but could not think correct words to get this exactly.
If you do know how to navigate (just in case - here is an example: AJAX navigation), but need to see examples of navigation "styling", Codrops would be a great place to start:
Codrops - navigation examples
Codrops - page transitions
"I know how to open new page without page reload using ajax. But dont know how to create attractive effect which web developer creates."
The simplest method is to have a container div within which you put the variable content (i.e., the current "page"):
<div id="content"></div>
(When your page is first loaded that div can have default content as appropriate, it doesn't have to start empty.)
Then using the Ajax method of your choice (that you mention you already know how to use), in the success handler you then use an animation method to hide that main div, then change its content to the html returned via ajax, then show the div again using the animation method of your choice:
$.ajax({
url: 'yourUrlHere.com',
success : function(newContent) {
$("#content").fadeOut(1000, function() {
$(this).html(newContent).slideDown(1000);
});
}
});
Demo: http://jsfiddle.net/M4ZZ6/
From there you can get as fancy with the transition as you like by applying different animation effects. Or use a page transition plugin...
If you want the easy way check this.
<div id='loadpage' style='display:none'></div>
Jquery code:
$('#loadpage').load('mypage.php',function(){$('#loadpage').fadeIn(300);});
You can add more efects for your loads.
Here is the example.
JSFiddle

Desktop like Transition effect in HTML

Im wanting to create a navigation slide animation effect in my HTML web application. Im just wondering if it is possible.
Scenario is: Page 1 = Contacts Listing, Page 2 = Contact Details.
When the user selects a contact in the listing and clicks details I want the contact listing to slide off to the left and the Contact Details slides in from the right (like an iOS navigation app).
Is this possible? The Contact Listing and Details are two seperate web pages.
Any advice would be appreciated.
Thanks
My first thought is to use Jquery mobile transitions. That framework is really close to the UI of iOS
http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-transitions.html
But you have to be more clear what you mean by separate webpages.
You can use iframes,anchor tags, or even ajax calls if you are using dynamic content.
Personally I really prefer the Jquery's mobile approach.
Each "page" is wrapped in divs with page markups in a single html document, also it is possible to load additional html pages with different transition effects
Take a look at this example
http://jsfiddle.net/4Bgx7/2648/

Toggle menu issue

I've got a toggle menu, please see http://jsfiddle.net/Wp2em/41/ for code and functions.
On the real site which is using the same code, everytime when you click on h3 (Category 1, 2 & 3 which is an a tag at the moment), it toggles its submenu down a bit, then the page changes to a new h3 linking page, and the submenu collapses together on the new page.
I'm just wondering is there any way I can tell the submenu to be open when its parent page/the new h3 linking page is opened? Please see this bank site which has the side bar effect I'd like my toggle menu to be.
Thank you in advance!
Here is my fiddle
all you will need to do is put the class "currentPage" on the li that you are currently on and the menu should be open after the page loads. I also moved some of your css around so it should move a little smoother now.
** Updated fiddle code. It will now look at your current URL and set the link that matches with it to the currentPage. Also I added that if another menu is open it will close itself if you click on another parent menu
** Updated fiddle code. Ok now if you click on the arrow the menu will expand and not go to the link(like the bank site). Also I changed it where you will have to put the anchor tag in all parent H3s.
This is not too simple. I've had a very similar problem, although I was posting the page back to the same url so I used a hidden field to store a list of the id's of the H3's which were open.
You I think will have to use a cookie to do this as you're navigating straight to the new page. The idea is you create a cookie and set a value on it every time you open an H3 and remove it every time you close it. You can use this plugin to do this. Then when you open the other page, the script reads the H3's which should be open out of the cookie and opens them.
Another route would be to use Ajax to post the open/closed H3 information back to the server which would store it in session data and use it to build the HTML of the new page so the right H3's were open.
If the page loads and the submenu (ul.second_level) is generated (i.e. from php), parse an active css class on the submenu that must be visible.
ul.active {
display: block
}
ul.second_level {
display: none
}
This is in addition to your click function. Do not trigger the click event since it starts the animation (which I presume you don't want).
Update:
It is quite basic stuff, but I do not know how the HTML code for your menu is created. If you are using php and a database (for example) to create the menu, check every submenu item with the page you are on. If the page is one of the pages in the submenu, set the class 'active' on that submenu. The CSS does the rest (displaying this submenu and hide other submenus).
If you have a static page, use javascript to check on which page you are with window.location.href for example. The rest is the same.

Categories

Resources