Automatically embed twitter link in vBulletin - javascript

Okay hi there! I currently have a script on my vBulletin forum that one of my friends made who is unfortunately unavailable to help me out. I know this is pretty straight forward and I have been fiddling with it all day to get it to work with not very much success. See below.
$embed_player = '
<table widht="300" align="center" class="tborder" >
<tr><td class="alt1">
<iframe src="http://instagram.com/p/\\4/embed/" frameborder="0" width="280" height="330" scrolling="no"></iframe>
</td>
</tr>
</table>
';
$post['message'] = preg_replace('#(<a href="http://instagram.com)?/(embed/([-|~_0-9A-Za-z]+)|p\/([-|~_0-9A-Za-z]+)&?.*?)">(http://instagram.com)?/(embed/([-|~_0-9A-Za-z]+)|p\/([-|~_0-9A-Za-z]+)&?.*?)<\/a>#i', $embed_player, $post['message']);
The script above works on the basis, when a user posts a link directly to an instagram video it will automatically embed the link into their post on my vBulletin.
What I am trying to do is when a user posts a full tweet URL (ie https://twitter.com/greigeh/status/590850852161740801 - the number being the "TWEETID") it will automatically embed this. The embedding code for a tweet is on my forum is:
<div>
<script type="text/javascript">
function loadx(data) {
document.write(data.html);
}
</script>
<script type="text/javascript" src="https://api.twitter.com/1/statuses/oembed.json?id=TWEETID&callback=loadx"></script>
<div class="twitter" onLoad="loadx().html"/>
</div>
</div>
<div style="clear:both;"></div>
So ultimately I tried putting this code into the script above except I'm having trouble getting the preg_replace to work. I need it to pretty much ignore the whole URL except the TWEETID but i've came to no avail.
Is this an easy change or am I missing something here?

Related

Wrap Vimeo URL with Player using JS/Regex

I've started developing a site at: http://joshrodg.com/isbellfilms2/
I have a WordPress plugin that generates a pricing table. I like the way the plugin works and functions for the user, but needed to tweak one thing.
The plugin has a place for a description, which I don't have, but I would like to add a video instead.
I recognize this is a WordPress website, but the issue I am having is with my scripting.
What I am trying to do is find the Vimeo URL and pass that into a player.
I found a piece of code, tweaked it a bit, but it's not quite working.
The JS I am using looks like:
<script type="text/javascript">
$(document).ready(function() {
var classSelector = document.querySelectorAll('.rpt_description');
var vimeoRegEx = /(?:http?s?:\/\/)?(?:www\.)?(?:vimeo\.com)\/?(.+)/g;
var vimeoEmbed = '<div class="embed-container"><iframe src="https://player.vimeo.com/video/$1" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>';
array.prototype.forEach.call(classSelector, function(el) {
if (vimeoRegEx.test(el.innerHTML)) {
el.innerHTML = el.innerHTML.replace(vimeoRegEx, vimeoEmbed);
}
});
});
</script>
The code the plugin outputs with the Vimeo URLs:
<div class="rpt_plan rpt_plan_ori rpt_plan_0 ">
<div style="text-align: center; height: 15px;" class="rpt_title rpt_title_0">The Family Yearbook Film</div>
<div class="rpt_head rpt_head_0" style="height: 250px;">
<div class="rpt_recurrence rpt_recurrence_0">(Yearly)</div>
<div class="rpt_price rpt_price_0"><span class="rpt_currency"></span>$350</div>
<div style="color:#3ac893;" class="rpt_subtitle rpt_subtitle_0">Stay up to date with your changing family for an entire year.</div>
<div class="rpt_description rpt_description_0">https://www.vimeo.com/320417542</div>
<div style="clear:both;"></div>
</div>
<div class="rpt_features rpt_features_0" style="height: 183px;">
<div style="color:black;" class="rpt_feature rpt_feature_0-0">A 3-5 min film every 3 months (4 total films)</div>
<div style="color:black;" class="rpt_feature rpt_feature_0-1">Plus one Keepsake film</div>
<div style="color:black;" class="rpt_feature rpt_feature_0-2">30% off discount on any additional films you purchase that year.</div>
<div style="color:black;" class="rpt_feature rpt_feature_0-3">Upload 30-450 clips</div>
</div>
<div style="clear:both;"></div>
<a target="_self" href="https://isbellfamilyfilms.com/#order-form" style="background:#3ac893" class="rpt_foot rpt_foot_0">Add to Cart</a>
</div>
The regex finds the URL and the JS takes the URL and passes it to the player, something just isn't quite right. I made sure that this JS executes before the plugin, but I have tried it both ways.
I'm sure I'm missing something simple, any help is appreciated.
Thanks,
Josh
Totally forgot the jQuery reference, so embarrassing! Just needed to add this line before my JS code:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
I also had to capitalize Array
Hope this helps someone!
Josh

Forcing a popup to the foreground

I'm wondering if people can help me or if my way of thinking wont work. I am not a coder so I don't get to involved in writing, just learn as I go.
I have web page one that refreshes every 5 mins. This page launches a popup.
<script type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body önload="MM_openBrWindow('call_notice.html','CallWaiting','width=200,height=200')">"
Now if this page is currently in the background the popup also appears in the background. I need this page to come to the foreground to notify the user that the pages has refreshed. Popup has the following code:
<i>
<body onblur="self.focus()" önload="self.focus()">
<p align="center" class="style1">You have a call. </p>
<p align="center" class="style1">Please close this window to continue.</p>
<p align="center" class="style1"> </p>
<form method="post">
<div align="center">
<input type="button" value="Continue"
ö'nclick="window.close()">
</div>
</form>
</i>
I have tried set.focus seen some setforegroundwindow, but can't get it to work. Seen z-order but that doesn't make sens to me.
Has any one got any ideas on how I can do it, or has something that monitors windows titles and executes something?
Any help would be great. I don't write from scratch but take bits here and there just to let you now what type of person you are dealing with.
Basically I want the popup to popup in front of all windows when the web pages at the back (which could 4 programs back) refreshes. Not sure how to paste the code.
yourpopupwindow.focus() should work. That's in javascript, have no idea about vbsript.
Like so:
function win_open(oid) {
yourpopupwindow = window.open('yoururl', 'popupwin', 'menubar=no,history=no,resizable=yes,scrollbars=yes,toolbar=no,width=600,height=300');
{yourpopupwindow.focus()}
}
Then on refresh you can either close popup if it's open and open new one and focus on it, or just focus on existing one.

show only one div within an iframe (javascript, JQuery...)

First just let me say I'm open to ideas on a different approach altogether.
I have and iframe as such:
<div id="testloadlogin">
<iframe src="../security/login.aspx" width="400" height="500"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
the related document.]
</iframe>
</div>
The page being loaded with the iframe has a div called loginInnerBox. I only want to display the loginInnerBox and everything inside of it.
Any ideas on how to do this? I was thinking of using Jquery or javascript of some kind to remove everything else on the page loaded by the iframe, not sure how to access that though...
Just to be clear I want everything on my page outside of the iframe to remain intact. I want the equivalent of saying $.('testloadlogin').load('../security/login.aspx' #loginInnerBox) which would just get loginInnerBox's html and place it in the testloadlogin div. However I need the back-end processing from the other page which is supported by iframe, but not by the Jquery load.
The markup of the page loaded by the iframe is
<body>
<div>
</div>.......
<div class="AspNet-Login" id="ctl00_CLPMainContent_Login1">
<div id="loginInnerBox">
<div id="loginCreds">
<table>
</table>
</div>
</div>
</div>
<div>
</div>....
</body>
Do you need more information than that?
I tried this, it had no effect:
<div class="ui-corner-all" id="RefRes">
<div id="testloadlogin">
<iframe onload="javascript:loadlogin()" id="loginiframe" src="../security/login.aspx"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
the related document.]
</iframe>
</div>
</div>
<script type="text/javascript">
function loadlogin() {
$('<body>*', this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();
}
</script>
With jQuery, you can load not just the contents of a URL, but a specific CSS selector from within that URL. This would be a much cleaner approach. It's like this.
$("#area").load("something.html #content");
Via CSS Tricks
$("iframe").contents().find("*:not(#loginInnerBox)").remove();
Be aware this would only work on iframes loaded from the same domain (same origin policy)
EDIT: Probably this removes children of loginInnerBox as well. In that case you could try to clone it before:
var iframe = $("iframe").contents(),
loginBox = iframe.find("#loginInnerBox").clone();
iframe.find("*").remove();
iframe.append(loginBox);
Something like that..
Add this to the <iframe>-elememt:
onload="$('body>*',this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();"
it will hide every child of the body except #ctl00_CLPMainContent_Login1
If #ctl00_CLPMainContent_Login1 contains more than the loginbox, you have to use the suggestion using clone() posted by pex.

Can I get some help decoding this bit of a Facebook page?

I'm trying to figure out just how a particular function works on a Facebook page, and being no friend of JS syntax, am having trouble. Here's the question mark bit:
<a href="#" clicktoshowdialog="my_dialog" onclick="
(new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=3b933f46f9c4c44981e51b90c754bfce&position=2&' + Math.random();
FBML.clickToShowDialog("app4949752878_my_dialog");
return false;">
<img src="linktopicture" title="Are your friends fans?" width="190" height="230" />
</a>
<div style="display:none">
<div id="app4949752878_my_dialog" fbcontext="aa3fcff8e653">
<div class="app_content_4949752878" style="padding:10px">
<div with hidden then exposed content...
The functionality of this is an image that, when clicked, pops out the previously hidden div. I know that the app###### is prepended to all JS used in Facebook to limit its scope. I'm confused by the anchor parameter of
clicktoshowdialog="mydialog"
What is that identifying, and how is it targeting the div that's exposed when the image is clicked? Thanks for any clarification, and let me know if I can post any more sample code.
According to the wiki it's just for opening the dialog (which is defined at the bottom). Facebook generates the JS to open the dialog. The attribute got post-processed and the JS code (that you see in the onclick= attribute) was generated on it's basis.

Why does the Youtube API remove local div and add its own?

I am working on a youtube search engine. Everything works okay on the back end but I have hit a wall because Youtube adds a div like so:
<div class="item">
</div>
Around the video and removes my div. I have no way of pin pointing why this happens but I have read from other threads that this is not the first time someone has encountered a problem like this.
It would be much appreciated if you could help out!!
make another div - a 'victim' which the YT script would 'eat' and would leave what you need. For example, now you have:
<div id='pagewrapper'>
<div id='DivForYouTube'>
</div>
</div>
let's say you need to save 'DivForYouTube' and now YouTube destroys it and sets its own.
So my idea would be to create another (victim) div, which YouTube would eat and the neede one - would rest.
<div id='pagewrapper'>
<div id='DivForYouTube'>
<div id='specialVictimDivWhereYouSetYouTube'>
</div>
</div>
</div>
What whould you say?

Categories

Resources