I am currently trying to make a transition between pages on a website.
Eg: If a user were on www.example.com/About and they clicked on a link to go to www.example.com/Contact, the about page would fly out to the left, whilst the contact page would fly in from the right.
So far all I could find online was how to do this on the same page with hashtags. But I want to do this with separate pages.
is it possible?
if not is there an alternative and how to do it?
UPDATE
Ok so I did a bit more research and I found this thing called barba.js(http://barbajs.org) that seemed to do what I'm looking for. So I installed the js script file followed the instructions on the site...and it didn't work! All it did was not load my pages correctly and didn't do what it was supposed to do. Anyone know how I can use this(or if there is a better option than barba.js).
-Thanks!
I don't think you can do that with pure html & js, as you load the entire page each time you click on a link if it's not an anchor.
However you can load just a part of the page, and so apply a transition of your choice with Ajax and js
But in the end, you won't really switch from page to page, but only load the parts that you want to update. This is approximately how modern front end frameworks like Angular, React,... are working
Here is a pure js example http://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_first
Here is a jQuery example http://www.w3schools.com/jquery/ajax_ajax.asp
You are talking about is page transition and it normally happens in SPA (Single Page Application) where there is no hard refresh.
If you are not working in a SPA application I don't think you can do that where you are moving from one page to another by link/button click and a hard refresh happens.
You can choose angularjs one of the famous spa/mvc framework in jvascript and us ui-router to move from one page to another. there are many other you can explore.
Related
I have made an web page. There are two iframes
In it. First is of index and second one is description page. I want that when I click on the any index hyperlink, then it is displayed on main description page.
How it will be possible? please give me the HTML code
You can use a button and when clicking it, change the url of the iFrame using Javascript like this:
document.getElementById('iframe-id').src = newLink;
You can use the data-attribute to store the wanted link in your html.
In case you want to do that: It is not possible to react to things outside of an iFrame through an iFrame. So you cannot put a link in iFrame1 and have it reload iFrame2, because those are two different websites and don't see each other.
Now, idk what exactly you are planing to do, but I really hope, that you don't want to make your entire site like that. Using iFrames is really only useful for things like inserting widgets (like Codepen etc.), but should never be used to display information from your own site. If you don't want to copy your html for every site then use PHP. If you don't want to reload your entire webpage (which is pretty much never a problem) you can use AJAX-requests to load parts of your website. (Frameworks like React.js, Angular.js and Vue.js do that for you)
I am working on developing a web site for my soon to be formed business, and I decided to develop a single index page where the nav buttons target an iframe instead of a new window. Is there script I can use in any language that would update the title tag of the index page dynamically every time a new target is loaded in the iframe? I would appreciate any input on this. Thank you very much!
Using jQuery the code would look something like this:
jQuery(document).ready(function(){
jQuery('#myframe').load(function(){
document.title="new title";
});
});
But building your website like this has some serious drawbacks you might want to consider:
You will have to think of a way how people will land on the top frame if they find some sub site in their search engine of choice.
The changed page title will probably never be used by search engines as you are setting it with javascript (or the first issue applies).
Frames/Iframes cause memory leaks in IE (http://stackoverflow.com/questions/8407946/is-it-possible-to-use-iframes-in-ie-without-memory-leaks). This might only be a problem if your top frame will not be reloaded from time to time.
There might be problems when people try to print your website.
Your visitors might have problems when they try to bookmark a subsite of your website, as only the top frame will be bookmarked (not the content of the iframe).
...and I am sure there are many more issues with such a solution.
I'm wondering if anyone can help me. I'm hoping I can open an iFrame in the centre of my webpage from clicking a picture. So in effect the iframe would be hidden until the picture is clicked. I have a very small and simple upload form on another page that I would like to appear when the user needs to upload and click the picture. I've had a good look round on this site and google in general but not found what I'm looking for, or the basics weren't included because it's common knowledge for most people here. Would there also be a way of closing this when it's finished uploading too? The form currently diverts to the homepage when finished so It would be handy to have a close option as in the end (post successful upload) the iframe contents will be the same as the page it's displayed on.
The best/easiest I have come across has been on w3schools but I have read using html for iFrames is not widely accepted or it isn't the best option cross-browser.
I have been viewing and trying different code but without even the basic knowledge I can't get my head around it.
If anyone is able to help, please assume I'm 5 years old. I'm not daft but in terms of code I'm literally just starting.
Thanks in advance
You would need to add a javascript onclick function to your img tag which would open a new window upon a click. You would pass the window.open function the name of the html file you want to display. Something like this:
<img src="image.jpg" onclick="window.open('welcome.html')">
Hello I'm creating a site at the moment (asp.net mvc) which has a div at the bottom side of the page that works as a messenger.
I would like to find a way to make the site work like facebook's chat. In other words, when a user clicks on a link on the site to load the content on the back however the messenger to stay in tact without loading again.
Will I have to change the site so every page is loaded with an ajax request? Also, I don't want to use iframes.
The only way to have elements to stay on screen from page to page without using iframes to use ajax requests, something like load() if you're uisng jQuery.
Most sites that do it use some variation of hashbangs, so a page can be loaded by directly entering it's url, rather than necessitating a path through other pages.
To do what you propose has fundamental implications to the structure of the entire site, so if this messenger box isn't anything more than a gimmick, I wouldn't bother. I'd even go so far as to say that if you're not sure how you'd do this one thing, you shouldn't be trying to build a site around it.
Well if you dont want your chat to disappear even for a moment with full site refresh, then yes, you have to change your page to ajax loading. It is not such a pain as it looks - for example use jquery to intercept all clicks on anchors, make ajax call to their href, and replace some "all-wrapping" placeholder div with the returned content.. Not very pretty usage of ajax, but it works, and your chat stays in place.
I am wondering if there's a way I can embed a webclip into a webpage, as in, I can have a portion of a webpage embedded as a widget into another page. I was thinking it might be possible someway though Mac OS X's Dashboard widgets, one can take a webclip and make a dashboard widget, as I hear that they are HTML based, and thus one could reverse-engineer one into simple HTML code. Kind of the reverse of what google does for gadgets. Any ideas? I'm open to any solutions.
Thanks.
The easy, html-based way is with an iframe. What this does is put an entire webpage within a box on your page. You don't have much flexibility with it.
You can also do it with javascript. JQuery makes it easy with their .load() method. Going this route, you can load a webpage with javascript, load specific tags within that page, or even modify the incoming code before displaying it.
Most basically:
$("#xxxx").load("url.html");
Where xxxx is the id of the html tag where you want the content to be loaded on your page (e.g. if you have <div id="xxxx">content will go here</div> in your HTML). See more details at: http://docs.jquery.com/Ajax/load.
If these don't suffice, the next step would be PHP (I doubt you'd need it, but if you'd like to, you car search for file_get_contents on php.net).