I want to know when a tweet is loaded.
I have this kind of post http://pego-design.com/remarky-brisi/media-twitter-embeds/ or here http://en.support.wordpress.com/twitter/twitter-embeds/
and would like to know the height of the strange iframe create by this code :
<div class="entry-content">
<blockquote class="twitter-tweet" width="550"><p>Really cool to read through and find so much awesomeness added to WordPress 3.6 while I was gone. I should take three weeks off more often.</p>
<p>— Andrew Nacin (#nacin) April 3, 2013</p></blockquote>
<p><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p>
ugly with js demo : http://jsfiddle.net/qWHc5/2/
If you check this demo, you can see first and final size of the iframe (93,213,213,213… or 93,93,93,213,213…), I need to know how to get the last value without an ugly solution.
I try this How can I detect whether an iframe is loaded? but doesn't work…
UPDATE : I found this version of widgets.js https://gist.github.com/johan/4479186 with callbacks I don't knwo how to use, like this window.twttr.tfw.callbacks.cb0.
WordPress uses oEmbed to include twitter among others.
You can find the code that does this at wp-includes/class-oembed.php
To influence it use:
function so_17151843_embed ( $provider, $url, $args ) {
// check $provider if it is twitter
// change url values to what you want
$url = add_query_arg( 'maxheight', $url )
return $url;
}
add_filter( 'oembed_fetch_url', 'so_17151843_embed' );
You can place this in you funtions.php.
This should help you on your way.
Here's the correct way to check when Twitter is ready:
if (window.twttr !== undefined) {
window.twttr.ready(function(){
console.log("Twitter ready!");
});
};
Late answer but hope this helps future users!
Related
Need help.
I am creating a div inside body>div>div .
Reference: Creating div in a nested class using javascript
Here's a link to my jsfiddle https://jsfiddle.net/41w8gjec/6/
Here's a link to the site https://bastioul.com/index.php/category/portfolio/ so you can see how the div is nested
Here's the wordpress classes.
class="archive category category-portfolio category-3 custom-background custom-header-image layout-two-column-default no-max-width"
>
class="hfeed"
>
class="site-content"
Here's my actual javascript code
function bastioul() {
var dirty = document.querySelector('.category-portfolio>.hfeed>.site-content');
var grime = dirty.appendChild(document.createElement('div'));
grime.id = "portfolionav";
}
if (window.addEventListener) {
window.addEventListener('load', bastioul, false);
} else {
window.attachEvent('onload', bastioul);
}
No error messages in jsfiddle. I don't know enough about coding as far as php/javascript/jQuery is concerned to go through wordpress js files to see if something is negating my code. Not exactly sure of the root cause of my problem because it works in jsfiddle, and there is no console errors when i inspect page. I tried to research about the problem, but it is a pretty specific problem.
Not exactly sure what else to try.
Okay I solved the issue by editing the functions.php for the wordpress theme I was using.
This is my php code.
wp_register_script( 'portfolionav', get_template_directory_uri() . '/portfolionav.js', array(), true );
wp_enqueue_script('portfolionav');
wp_footer();
note
I had a issue with this code because it automatically selects a library.
I used browsers inspect console error to show me what library was being called, and it was /themes/primer.
I uploaded my javascript to this library.
And now my script is running correctly on my Wordpress site.
I was not aware I had to add script by calling it in my php file when using Wordpress.
I've been building a little jQuery accordion this afternoon based off a codepen I found, it works fine unless I put it in Wordpress where i need it. I know it's probably something obvious but i've spent too many hours looking at it now and i feel like i'm going in circles.
Here's my wordpress code using some custom fields from ACF:
<aside class="accordion">
<div>
<span class="col-2 showitem"><?php the_field('show_date'); ?></span>
<span class="col-4 showitem"><?php the_title(); ?></span>
<span class="col-4 showitem"><?php the_field('show_city'); ?></span>
<span class="col-2 showitem">?php the_field('ticket_status'); ?></span>
</div>
<?php the_field('show_information'); ?>
</aside>
And my script on the page.php:
<script type="text/javascript">
var headers = ["H2"];
$(".accordion").click(function(e) {
var target = e.target,
name = target.nodeName.toUpperCase();
if ($.inArray(name, headers) > -1) {
var subItem = $(target).next();
//slideUp all elements (except target) at current depth or greater
var depth = $(subItem).parents().length;
var allAtDepth = $(".accordion p, .accordion div").filter(function() {
if ($(this).parents().length >= depth && this !== subItem.get(0)) {
return true;
}
});
$(allAtDepth).slideUp("fast");
//slideToggle target content
subItem.slideToggle("fast", function() {});
}
});
</script>
I should also mention I am using this Ajax Load More extension on the site and when i remove anything to do with that from the page and just keep things simple, it works. so i'm 99% sure it has to do with the interactivity of both things. But jQuery is not my bag so I'm hoping someone smarter than me know where i went wrong.
I also have the P as display:none; because otherwise it shows up all the time.
Thanks for looking at my question!
JD :)
p.s, the original codepen is here http://codepen.io/rbobrowski/pen/likvA/
Update:
I tried changing all $ to jQuery, then jquery. I also tried both of #jai's suggestions with no luck. I also tried the solution #freedomn-m linked to as well as checking and testing methods from multiple links in the search results with no luck.
In wordpress $ sign is not available, instead you could change it to jQuery or put the code in an IIFE and you need to put the event bindings in doc ready block:
(function($){ // get it with '$'
$(function(){ // <---doc ready block
// put all the code in here
});
})(jQuery); // <---pass jQuery here
Actually you need to put your code inside doc ready block but use jQuery as a wrapper and use $ in the args:
jQuery(function($){ // use jQuery and pass `$` for a reference to jQuery.
// code here.
});
You should either replace all $ by jQuery
or
jQuery(function($){
// do all code here
});
The accordion code was too convoluted for my purpose, I ended up stripping it way back and solved the jQuery issue with
jQuery(document).ready(function($) {
my code in here
});
Thanks everyone for trying to help, it's much appreciated.
I'm quite new at using jquery but learning a bit everyday. I have solved many problems searching this web but I can't seem to find any solution for this one:
The web I'm workign at the moment use quite a lot of page anchors.
I have localscroll and scrollto as jquery libraries.
I animated the transition with this little script:
<script type="text/javascript">
$(document).ready(function () {
$('.scrolllento').localScroll({ duration: 1000 });
});
</script>
and it works fine whatever I add the class "scrolllento" to the cointainer of my links.
Now the problem I have is when a link jumps to an anchor of inside different page. my client has asked me if it's possible to load the page first then move to the anchor with same web transition.
I have been working on it with my little knowdlege and this is what I have atm:
<script type="text/javascript">
$(document).ready(function () {
var nosalto = $(location).attr('href');
if (nosalto.indexOf("HistoriaBMG") > 0) {
$.fn.gotoAnchor = function (anchor) {
location.href = this.selector;
}
$('#historia').gotoAnchor();
}
});
</script>
"HistoriaBMG" is the new page and "#historia" is the anchor I want to go inside that page.
and it seems again that it works...
the problem is I have no idea how to implement now the transition as the class "scrolllento" in the container of the link going to ../HistoriaBMG is ignored.
could anyone help me? thanks so much in advance and excuse my english, hope this question is clear enough.
According to the localScroll docs:
The plugin also adds a function, $.localScroll.hash() , that checks the URL in the address bar, and if there's a hash(#an_id), it will scroll to the element. It accepts a hash of settings, just like $.localScroll. You will likely call it on document ready. Check the regular example to see it in action.
So you simply need to call $.localScroll.hash()on $(document).ready()
I'm working on a wordpress blog and I want to add simple JS script to one of my pages. But when you go to edit->text and I add my script in <scirpt> tags it's not working. So I want to know how to insert the script or a .js file with the script in it? I have access only to the wp-admin and I don't have access to the files. Can someone suggest some ways to solve this?
Thank you in advance
I'm not too sure I understand your question 100%, but I'm gonna try to answer the best I can.
If you're adding the JavaScript via Wordpress's Page/Post text editor, you have to make sure you're using the HTML editor (not visual).
That would be step 1.
Step 2 would be adding the script itself. Make sure you don't have any line breaks in between your code, or it will break (learned that from experience)
For example, this will work:
<script type="text/javascript">
var mySpecialFunction = function() {
return 'oh yeaaa';
};
mySpecialFunction();
</script>
This will not:
<script type="text/javascript">
var mySpecialFunction = function() {
return 'oh yeaaa';
};
mySpecialFunction();
</script>
At least, that's what I found with the versions of Wordpress that I'm using (dunno about their latest release)
Hope this helps!
Good luck.
I've trying to make the links on some of my pages "mobilized" with this great service Google Mobilizer: http://www.google.com/gwt/x?u=
Is there a way to prefix all of the links within a div or element, so rather than the link be site.com/link it becomes http://www.google.com/gwt/x?u=site.com/link ?
I'm thinking that something like this might work:
if (window.location == $LINK)
window.location = "http://www.google.com/gwt/x?u=" + $LINK;
I'm just not sure how to code it. If you know how it's done I would be very thankful!
I think this could be useful for you:
Download the file Mobile_Detect.php at GitHub
Put it on the root of your server
Put this code at the beginning of every page you would redirect
<?php
include('Mobile_Detect.php');
$detect = new Mobile_Detect();
if ($detect->isMobile()) {header('Location: http://www.google.com/gwt/x?u=http://' . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"],PHP_URL_PATH . '');}
?>
I tested it with this site and works fine
I wrote this Google Mobilizer bookmarklet as I had a itch to scratch.
You can adapt the code to suit your requirement.