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
Related
I'm learning to make basic site for adding photos, and when I add pictures they are upside down. I have no idea how to reverse them. When I open them in photo gallery they are normal, not reversed, also when I open photo in paint and not doing anything (because its not reversed) I save it, then photos become normal on a website.
I couldn't fix that so I tried adding package with jQueryReverse plugin:
meteor add jjman505:jquery-rotate ,
to reverse pictures using button below images, but this option is still not working for me.
I have no idea what I did wrong and how to work it out, so I hope you can help me. I guess it's something basic I must have missed.
HTML:
<body>
<div class="container">
{{> images}}
</div>
</body>
<template name="images">
<div class="row">
{{#each images}}
<div class="col-xs-12 col-md-3" id="{{_id}}">
<div class="thumbnail">
<img class="js-image" src="{{img_src}}" alt="{{img_alt}}"/>
<div class="caption">
<button class="btn btn-info js-rotate-image">rotate </button>
</div>
</div>
</div>
{{/each}}
</div>
</template>
JS:
Images= new Mongo.Collection("images");
if (Meteor.isClient){
Template.images.helpers({images:
Images.find({}, {sort:{createdOn: -1, rating: -1}})
});
Template.images.events({
'click .js-rotate-image':function(event){
var image_id = this._id;
console.log(image_id);
$("#"+image_id).rotateLeft([angle=90]);
}
});
startup.js:
if (Meteor.isServer){
Meteor.startup(function(){
if (Images.find().count() == 0){
for (var i=1;i<22;i++){
Images.insert(
{
img_src:"img_"+i+".jpg",
img_alt:"image number "+i
}
);
}
I also tried. rotate(90) but didn't work as well.
I cut the code, but I hope I didn't cut anything important in solving that problem.
Thanks
Use this package. It is happening because of metadata image have.
https://github.com/ccorcos/meteor-clientside-image-manipulation
I Forked an NBA 2K Random Team picker from another user and was tweaking it to my needs. I am stumped on something probably simple for one of you. Thanks in advance.
When the "Randomize" button is clicked, the team "name" and "logo" display. I added a "roster" url to display as well but I want that url to be clickable in to a new tab/window. I can't seem to figure it out.
https://codepen.io/nick-c/pen/dNwMaZ
Below is just the html. I couldn't manage to post all the script and css.
<div class='container'>
<div class='title'>
<img src='http://fluidesign.co.uk/wp content/uploads/2016/12/NBA_2K17_logo.png'/>
</div>
<div class='team home'>
<h3>Home</h3>
<div class='logo'></div>
<div class='name'>?</div>
<div class='roster'>Click for Rosters</div>
<div class='random'>Randomize</div>
</div>
<div class='team away'>
<h3>Away</h3>
<div class='logo'></div>
<div class='name'>?</div>
<div class='random'>Randomize</div>
</div>
<div class='vs'>vs</div>
<div class='clear'></div>
</div>
You didn't "manage to post all the script and css"? Where's the difference in pasting it into a codepen or pasting it into the code snipped tool here on StackOverflow? Anyway...
You are currently just setting the link as a text in the line:
$(".home .roster").text(teams[index].roster);
But what you want to do is add it as a link:
$(".home .roster").html('Webpage URL');
Easy, huh? ;) See a working fork of your codepen here: https://codepen.io/anon/pen/xgmEOm
i think you want this
example
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?
Trying to understand how to eliminate or minimize render delay of different JavaScript libraries on a site.
For example, if I want to load the "instant" follow buttons from many Social Networks, they seem to block each other out of rendering and you get unpleasant pop-ins.
<div id="fb-root"></div>
<script>
(function(d, s) {
var j, h = d.getElementsByTagName(s)[0],
f = d.createDocumentFragment(),
add = function(u, i) {
if (d.getElementById(i)) {
return;
}
j = d.createElement(s);
j.src = u;
i && (j.id = i);
f.appendChild(j);
};
add('http://apis.google.com/js/plusone.js');
add('http://connect.facebook.net/en_US/all.js#xfbml=1', 'facebook-jssdk');
add('http://platform.twitter.com/widgets.js', 'twitter-wjs');
add('http://platform.linkedin.com/in.js');
add('http://assets.pinterest.com/js/pinit.js');
h.parentNode.insertBefore(f, h);
}(document, 'script'));
</script>
<div id="wrapper" style="width:100%; max-width:800px; margin-left:auto; margin-right:auto; text-align:center;">
<div id="widgetWrapper" style="width:100%; max-width:800px; background-color: #eee; padding: 10px; margin-left:auto; margin-right:auto;">
<div class="followBox">
<div class="fb-like" data-href=" " data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
</div>
<div class="followBox">
<div class="g-follow" data-annotation="bubble" data-height="20" data-href=" " data-rel="author"></div>
</div>
<div class="followBox">
Follow
</div>
<div class="followBox">
<div class="g-ytsubscribe" data-channel=" " data-layout="default" data-count="default"></div>
</div>
<div class="followBox">
<iframe class="btn" frameborder="0" border="0" scrolling="no" allowtransparency="true" height="25" width="113" src="http://platform.tumblr.com/v1/follow_button.html?button_type=2&tumblelog= &color_scheme=dark"></iframe>
</div>
<div class="followBox">
<script type="IN/FollowCompany" data-id=" " data-counter="right"></script>
</div>
<div class="followBox">
<a data-pin-do="buttonFollow" href="http://www.pinterest.com/ /">Fun Paw Care</a>
</div>
</div>
</div>
What can be done about this type of render blocking from JS in general? Not specifically just social network buttons, they just provide the best example.
You have very little control over your code this way.
You're actually calling to five different sites in order to load and run their code. If only one site will be a little busy you'll end up in a delayed display on your site.
There are workarounds for this problem and you can see examples almost everywhere.
There are some solutions available:
Homemade social buttons - you create and draw your own icons and attach the external site code 'under the hood'. It may seems like a simple solution but the last time I checked, it involved editing not-so-small lines of code. Personally I'd advise this as a last resort.
One button to rule them all - You probably saw it on other pages, a small sharing button that expand into a box with all you favorite social sites. These come pre-made and are an easy solution.
Patient is virtue - you warp all your links in a hidden container and display it after all renderings are done. The user will see the buttons appear together a few seconds after the site loads.
And keep in mind that javascript has a pretty much one track mind. Even if all your code was stored locally it still would take turns to render all of it.
I am using a Wordpress Theme (Incipiens) that has a show/hide Javascript to show a map on the contact page http://demo.themedev.me/wordpress_themes/incipiens/contact-us/
I want to use this function on a page multiple times to show/hide galleries.
<div class="map">
<div class="map_top">
<hr class="toolbox toolbox1">
</div>
<hr class="vertical_sep0">
<a class="show_map" href="javascript:void(0)"></a>
<div class="map_container"><div class="thismap"><iframe>........</iframe></div>
</div>
I have this working but the call to the js opens all divs. I therefore put a unique div id round each gallery and slightly changed the javscript...
<div class="map">
<div class="map_top">
<hr class="toolbox toolbox1">
</div>
<hr class="vertical_sep0">
<div id="silestone">
<div class="map_container">
[show_gallery width="124" height="124" galleryid="527"][/show_gallery]
</div>
</div>
</div>
It works but very oddly, sometimes the right one opens, sometimes the wrong one...not sure what i'm doing wrong, should I just have one javascript call that contains the ID's to all divs? If so how do I do this?
Since you have not shown the actual script you use for toggling, I assume you mean something like this (taken from the page) -
function (){
$(this).toggleClass('hide_map');
$('.map_container').slideToggle(400);
}
I would change that to -
function unhide(id){
$(this).toggleClass('hide_map');
$('#' + id).find('.map_container').slideToggle(400);
}
Does that work?