creating jquery effect to show new page in same screen - javascript

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

Related

Hyperlinks don't work with ajax / jquery?

So I'm constructing a induction-type webpage, I'm using a template which someone has already previously built in order to see how it fits my needs
Essentially, it includes a dynamic page switcher that uses previous and next buttons to swap out the body content without having to load another entire page.
EXAMPLE: https://css-tricks.com/examples/DynamicPage/
Upon clicking a hyperlink inside the main content, the body will show the correct content from the external pages. However, if I click either of the navigation links up top ("Home >> Inductions >>") the link is not opened as a new page, but instead I think ajax attempts to load that page inside the ajax-body section.
Specifically in the codepen, this is the navbar I'm mentioning which I do NOT want ajax to work on. I've tried multiple fixes but finally throwing my hands in the air.
<nav id="location">Home >> Inductions >> Vehicle 1</nav>
What I am aiming to build is attempt something like this: https://css-tricks.com/examples/DynamicPage/
This is the creator showing how its made, if I am unable to describe it as well as I should: https://css-tricks.com/dynamic-page-replacing-content/
I made a codepen the best I could, without being able to upload the other 2 pages which ajax will load the bodies from - https://codepen.io/dylan-mclean-the-vuer/pen/XWbONyP
Just imagine that clicking the 'prev' or 'next' will load a body inside the contained from external HTML docs. I couldn't figure out how to use multiple HTML files. I still need to make a proper prev/next in JS somehow still, just will take some time! Currently, prev just links to one HTML doc and next links to another.
Keep in mind I'm still at the diploma-grad coding level, so I'm sorry if I'm missing an obvious solution, or if its too messy to understand!

How to hide text if it is not homepage?

For example if i make a widget on wordpress, how can show it only in homepage? Can i make a Javascript code that can show Div element only in homepage and if it isnot homepage to hide it? How can be such a code?
you can use is_home() method in your template or you can define the sidebar only for the page where you need it.
You can catch the base url of homepage and see if it is the url display it else not.
If you are using wordpress, there are settings you can use to lock widgets down to certain pages. It really depends on the plugin you are using though.
If you have short codes, you can simply put the short code for that widget on just the pages you want to see it and not the ones you don't.
If not, there is usually a setting under the widget that should allow you to set the page it is displayed on or the pages you want to exclude it from. This would be in the Widgets tab in the wp-admin panel on the left side.
I would give you more specifics and even examples, but im not sure what plugins you are using. Give me a little more example of what you are working with and I will help you however I can. Good luck.

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

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();
}

jquery show/hide when page loads

I am having an issue with jQuery. I have a menu page in my app and when I click on a page I want certain divs to be shown and some to be hidden. When I click on a page the following script
$(document).ready(function() {
$("#sp").hide();
$("#fea").hide();
$("#lib").show();
});
only works if I reload the page.
If the document is already loaded when I click on the menu again and go to a different page the same function doesn't work on that page even though I have the same function between script tags on multiple pages.
So in a nutshell whatever page loads first has the function applied. All other pages have to be refreshed before the function is applied. All of my pages are loaded from the menu page.
Does anyone know how to apply the function every time I load a page from my menu page?
I have also tried:
$(document).on("pageshow", "#pageID", function() {
$("#sp").hide();
$("#fea").hide();
$("#lib").show();
});
and I have the same issue where the function is only applied when I refresh.
Why you didn't use css for this? It will work even if a javascript will be disabled in the browser settings
Ok, I was able to figure out a solution. I am still not sure why the problem was occurring in the first place but I changed my function to this:
$('body').on('pageinit', function() {
$("#sp").show();
$("#fea").hide();
$("#lib").hide();
});
So thank you to everyone who made snide remarks and down-voted instead of providing a solution, your input was invaluable to my project. ;)

create a "show up" window when you click register?

im a backend programmer who wants to have a window that appears in front of the current window when clicking "register".
so that you dont have to redirect to another page.
i think u guys know what i mean.
how do i do that? is it with jquery or javascript? is ajax involved?
and what is that kind of popup box called?
You want to write a div into your HTML that contains your login fields (i.e. the popup window). Set it to position:absolute; and position with CSS so it floats above the page contents and doesn't interrupt the flow when it appears. Get it all nice and positioned where you want it, then set it to display: none; so it will wait for javascript to make it appear.
Then (using jQuery), write something like this:
$('#register').click(function() {
$('#popup').show();
});
where #register is whatever gets clicked (can be most anything with id="register").
What happens whenever that form is submitted is up to you, and not any different from the options you'd have with any other HTML form. jQuery can help with AJAX if you decide to go that route and not send the surfer to another page to process the form.
It can be done using quite a few totally different approaches. As Sam said it's the concept of modal boxes.
You could do it completely on the client side using CSS and JavaScript (alternative), or via AJAX and some third-party libs.
Try being a bit more specific - what's the the backend/frontend environment? Is performance an issue (eg. minimal client-server communication)?
I believe you're referring to a modal form. You can search for modal popup javascript. There is a good javascript component called Lightbox that will help as well.
EDIT:
I mentioned Lightbox, but Lightbox Gone Wild is the one I meant. As others have pointed out, using a modal tool like this all you do is write the html you want to be displayed in the modal popup. That link is a good tutorial on the concept and explains things well.

Categories

Resources