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.
Related
I'm having an issues which I can't pass the Lighthouse analysis for my Elementor Wordpress site using GTmetrix. I found the cause of the issue is because I have a render-blocking javascript element, which is Vanta.js that I used as my animation background. This is my initial code that I embed on a HTML via Elementor:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta#latest/dist/vanta.halo.min.js"></script>
<script>
if (window.innerWidth > 1023) {
VANTA.HALO({
el: "#bg-halo",
mouseControls: true,
touchControls: false,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
backgroundColor: 0x000000,
xOffset: -0.35,
yOffset: -0.50,
size: 6.00
})
}
</script>
Then after some research, I tried to modify the code using async. The GTmetrix Lighthouse analysis pass, but the Vanta.js animation background sometimes doesn't showed up (if I refreshed the page for a couple of times it shows up, then not showed up again, then somehow showed up again). Here is the code I've embedded:
<script id="loadThree" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js" async></script>
<script id="loadHalo" src="https://cdn.jsdelivr.net/npm/vanta#latest/dist/vanta.halo.min.js" async></script>
<script async>
let loadThree = document.querySelector("#loadThree");
loadThree.addEventListener("load", async function() {
console.log("THREE PASS");
let loadHalo = document.querySelector("#loadHalo");
loadHalo.addEventListener("load", async function() {
console.log("HALO PASS")
if (window.innerWidth > 1023) {
console.log("WINDOW PASS")
VANTA.HALO({
el: "#bg-halo",
mouseControls: true,
touchControls: false,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
backgroundColor: 0x000000,
xOffset: -0.35,
yOffset: -0.50,
size: 6.00
})
}
})
})
</script>
I've also tried with defer, the Vanta.js background animation works well, but the GTmetrix Lighthouse analysis doesn't pass.
Any helpful answer would be very appreciated!
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. :)
Hi I have a twitter feed using the following code:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 6000,
width: 195,
height: 300,
theme: {
shell: {
background: '#999999',
color: '#D6E03D'
},
tweets: {
background: '#f3f3f3',
color: '#999999',
links: '#5a5a5a'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('louise').start();
</script>
and this is linked to the widget.js file. I need the default twitter to be blue not white so I tried downloading the js file and hosting it from my server and changing the code to my image using this code:
isFullScreen?" twtr-fullscreen":""}var AA=T?"images/widget-logoblue.png":"http://widgets.twimg.com/i/widget-logo.png";
this adds the blue image in ok but it messes up some of the links that should be different colours within the feed, therefore I think I need to stick to linking to this version:
isFullScreen?" twtr-fullscreen":""}var AA=T?"images/widget-logoblue.png":"http://widgets.twimg.com/i/widget-logo.png";
is there a way I can link to this but override the twitter image that they are using with my own twitter logo?
Any help would be greatly appreciated, thanks
Louise
I guess the solution might be one of these:
CSS hack - hide image and use background-image CSS property instead
Detect image on load and replace it then
Write a custom widget. Example.
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.
<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.