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.
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 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.
I have a mybb forum, and a plugin that adds a public/private chat to the bottom of the forum (it adds a div before </body>).
I would like to navigate the forum without reloading the chat.
In this question, Josh Stodola explains how to change the url.
In this question, there is a small JavaScript code to change the url.
I've also read about HTML5 iframes, but I still can't imagine how can I use it all together.
Should the chat be inside an iframe? an iframe inside the forum? should the forum be inside an iframe, and the chat into another? And those 2 iframes, inside a new page???
I'm messed up...
You should have a window containing chat and an iframe for your content. This will allow you to navigate your forum and only reload the iframe vs the top frame.
<body><iframe src="someurl"></iframe><div>Chat</div></body>
A few things to note: doing it this way will not change the address bar while you navigate and this makes users confused when they try to link to pages and it takes them to the home page or wherever they started browsing your forum.
If you want to do something more fancy checkout pjax. It will let you change urls for the whole page while only loading certain content.
Is there a solution to have the background audio/music play across multiple page on a website, WITHOUT restarting on every page load.
The website currently uses a frameset, but I'm looking for an alternative.
Without making the whole site AJAX I think frames are the only way.
Here's a tutorial for making an ajax site if you need it.
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
It will give you separate addresses for each page.. sorta.
The only other alternative is to use site-wide AJAX. Each link would dynamically change the page content without navigating away.
Implementing this is time-consuming. Each dynamically loaded page must be stripped of headers and each link must contain a Javascript event that calls an AJAX request.
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).