We Keep Coding

How to Load New Webpage Without Reloading Browser? Vanilla JS

I'm trying to make a website that allows for page transitions across each webpage, without having the browser reload each time it changes pages. I am currently using barba.js to make it possible to change pages while using transitions. I was wondering if there was a way to do this in Vanilla JS, as all I want to do is run transitions, and have pages with static data on said pages, and don't feel I need the extra functionality barba.js provides.
Here is my current barba.js code if it is of any use:
barba.init({
sync: true,
views: [
{ namespace: 'about' },
{ namespace: 'projects' },
{ namespace: 'stories' }
],
transitions: [{
name: 'opacity-transition',
sync: true,
async enter(data) {
// Entrance Transition settings
return gsap.from(data.next.container, {
left: '20%',
filter: 'brightness(0.4)',
duration: 0.9,
ease: 'power1.inOut',
});
},
async leave(data) {
// Exiting Transition settings
return gsap.to(data.current.container, {
left: '-100%',
duration: 0.9,
filter: 'brightness(0.6)',
ease: 'power1.inOut',
});
},
}]
});
The greensock stuff can be removed and turned in to CSS animations if it's possible to do this without barba.js

JWPlayer load() and playAd() not starting using onBeforeStart()

I can't seem to get Ads to play when calling load(). I'm using playAd() in a onBeforeStart(). When I use load() the video won't start, and either will the ad. It loads it all, and I can click start, but the video never starts automatically. I even tried $interval(jwplayer.play, 500) hehe.
It goes into IDLE mode, when I load the video - which its supposed to do(docs), but it can't start. When I remove the playAd() function, it works perfect with autostart ect.
Is it even possible? I can't find any examples of it anywhere.
Code;
jwplayer('video-player').setup({
autostart: false,
controls: true,
// stagevideo: true,
debug: {
'levels' : 'all'
},
primary: 'flash',
androidhls: true,
icons: false,
flashplayer: '/assets/scripts/jwplayer.flash.swf',
html5player: '/assets/scripts/jwplayer.html5.js',
skin: '/assets/skin/skin.xml',
file: clip.videoUrl,
image: clip.thumbnail640,
wmode: 'transparent',
height: "100%",
width: "100%",
repeat: "false",
advertising: {
client: "vast"
},
plugins: {
"/assets/scripts/borsenticker.js": {
'ticker1': tickerStringUpper,
'ticker2': stockString,
'ticker2_nofont': stockString_nofont,
'date': dateFiltered
}
},
});
load it;
jwplayer('video-player').load([{
file: clip.videoUrl,
image: clip.thumbnail640,
}]);
jwplayer('video-player').play();
and setups are;
jwplayer('video-player').onBeforePlay(function (){
if(!videoPlayerAdLoaded) {
jwplayer('video-player').playAd(Preroll.getVastTag());
videoPlayerAdLoaded = true;
}
});

Fixed it by updating to 6.11 from 6.10. :)

Stopping twitter api from refreshing

On my webpage, I have the following link:
<asp:LinkButton ID="lnkChangePic" runat="server" onclick="lnkChangePic_Click" Text="Upload new profile picture"></asp:LinkButton>
When you click it, it calls this function:
protected void lnkChangePic_Click(object sender, EventArgs e)
{
pnlUpload.Visible = true;
pnlChangePic.Visible = false;
}
The link is present in pnlChangePic. pnlUpload is initially not visible. I want the page to be as responsive as possible when the user clicks this link, and at the moment, when the user clicks, only two bits of the page change: the panels, and a twitter stream that is also on the page:
<div class="fr">
<h4 id="twitter">Twitter Stream</h4>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 430,
height: 300,
theme: {
shell: {
background: '#000',
color: '#666'
},
tweets: {
background: '#000',
color: '#666',
links: '#ffa20f'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser(asdf').start();
</script>
</div>
What should I do to make it so the twitter steam does not refresh when the user clicks the link? I can can get it to stop doing that, the page will be much more responsive.

You want to run some server-side code without reloading the entire page.
You have two main options -
put the section that you do want to update in an UpdatePanel and update it with ASP.Net AJAX(clicking on a button within an UpdatePanel will trigger an Async Postback - only the part of the page within the UpdatePanel will be updated)
cache the output of the Twitter control and serve the cached version on postback. As the Twitter control seems to be entirely client-side this would probably be a little difficult.
Your best bet is probably the ASP.Net AJAX UpdatePanel.

What is wrong with this javascript?

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
var usr = 'charliesheen';
function changeusr()
{
usr = document.getElementById("usrText").value;
updatetwitter();
}
var twitter;
newtwitter();
function updatetwitter()
{
twitter.render().setUser(usr).start();
}
function newtwitter()
{
twitter =
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 200,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#367542'
},
tweets: {
background: '#e3dfe3',
color: '#000000',
links: '#110af5'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser(usr).start();
}
</script>
<br/>
Change user:
<input name="usrText"/>
<button onclick="changeusr()">Go</button>
The results I see are: It loads fine. When I enter a new username and click "go" it may or may not reload the twitter widget, and the link "join the conversation" points to the correct url. I'd like it to reload the url with the new user entered. I'm a complete javascript noob. Thanks in advance.

Your input needs an id:
<input id='usrText' name="usrText"/>
Internet Explorer will return elements by name from "getElementById()", but that is simply legacy broken behavior and it's not imitated by other browsers.
edit — an update:
There doesn't appear to be much documentation for that widget thing. Things work somewhat better if you set the "live" feature to true. Also, when you update the user, you have to zap an internal variable on the widget:
function updatetwitter()
{
twitter._profileImage = null;
twitter.setUser(usr).render().start();
}
Here is the jsfiddle if you'd like to see it.

Insert a script into the DOM that calls AJAX

We have a tool that allows people to add code to a dynamic page.
A bit of code (a widget) needs to be injected into the DOM, not hard coded into the html. I use jquery to do it. The problem is that it ends up redirecting the page...
I need to solve this.
Here is an example. Create a page with the following:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#doInsertW').click(function(){
var wCode = $('#inputWidget').val();
$('#putWidget').html(wCode);
});
});
</script>
<input id="inputWidget" /><button id="doInsertW" type="button">Insert</button>
<div id="putWidget"></div>
Then paste this into the input and you'll see what I mean:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('twitter').start();
</script>

The problem is that the widget.js script uses document.write to place the HTML for the widget on the page. If document.write is called while the page is still loading, it works fine. However, calling document.write after the page has finished loading will rewrite the entire page.
Here is a quick and dirty hack that will force it to work (tested in FireFox):
$(function(){
document.write = function(c) { $('#putWidget').append(c) };
$('#doInsertW').click(function(){
var wCode = $('#inputWidget').val();
$('#putWidget').html(wCode);
});
});
Notice, I'm simply overriding the document.write function after the page is done loading.