So I've been wondering about this for a while.
I'm creating an Edit site for my project, and on this edit site I want the people who have access to the page be able to paste
/watch?v=sometext
into a text box, and have a preview embed player take this string and display the new player for them without loading another page or before they actually submit the URL to the Database.
Try the following javascript function:
document.getElementById("btn").onclick = function()
{
var url = document.getElementById("txt").value;
if (url !== "")
{
var video_id = url.split('v=')[1];
var ampersandPosition = video_id.indexOf('&');
if (ampersandPosition != -1) {
video_id = video_id.substring(0, ampersandPosition);
}
document.getElementById("myFrame").src = "//www.youtube.com/embed/" + video_id;
}
};
That will strip the videoID from an url and play it in a iframe (the one you can get from the share button).
Look at the full example, and paste a full youtube video on the textbox.
http://jsfiddle.net/hescano/URcWZ/
Related
I am using a jS code to redirect all outbound links to the redirect page (which contains ads for me to monetize). It works quite well. But it doesn't work when the user chooses to open the link in a new tab.
Is there a way to fix it?
This is my code:
<script type='text/javascript'>
jQuery(document).ready(function () {
jQuery('a[href*="http://"]:not([href*="http://example.com"])').click(function (e) {
e.preventDefault();
var target = e.target || e.srcElement;
if ($(target).attr('target') == "_blank") {
window.open("http://example.com/redirect.html?url=" + $(target).attr('href'), '_blank');
} else {
window.location = "http://example.com/redirect.html?url=" + $(target).attr('href');
}
});
});
</script>
One option is to just go ahead and replace the actual link hrefs on page load, using a simple script like the one below. One added benefit of this is that it's a bit more honest/transparent to let the user know they're being redirected through a different site.
const links = document.querySelectorAll('a:not([href*="https://example.com"])');
for (let link of links) {
link.href = `https://example.com/?ref=${link.href}`
}
Google
Yahoo
Internal
I am using the following script to insert content into a div area...
<script type="text/javascript">
$(document).ready(function() {
$('div#contentWindow a').click(function(e) {
e.preventDefault();
var url = $(this).attr('href');
$('#contentarea').load(url);
});
});
</script>
The content that appears in the div area each has it's own file and thus it's own URL. The content loads through a series of menu button, each loading a different page file into the div area.
Each page file contains the basic Disqus comments embed code. Disqus requires that each page file has a unique canonical URL to prevent comments repeating in multiple pages. So, I used what Disqus recommened:
this.page.url = window.location.href; // Replace PAGE_URL with your page's canonical URL variable
BUT...because I am loading different canonical pages into the same div area on a page, and the parent URL never changes (because of window.location.href, I assume), comments are repeating themselves.
I need Disqus to recognize the canonical URL for the file being loaded into the div area and recognize each page's unique URL so prevent comments from repeating themselves, and I can't figure it out.
Here is a demo of the project I am working on. Notice that the test comments are repeating in every "channel".
http://locallava.com/alpha-ac/
Here is the current install of the Disqus script...
var disqus_config = function () {
this.page.url = **window.location.href**; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//local-lava.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
How do I fix this? Thanks everyone.
I have a div that contains a list of videos as a sort of playlist. When one of the links is clicked a larger version of the video plays beside the playlist.
I have attached the video title to the div id, and when I append #video-id to the end of the url I can see that the link is highlighted.
Not sure if it's possible to have it so that when the user goes to, for eg,
www.examplesite.com/videos#video-6
this video will be highlighted and activated so that it will play the video in the larger version.
If there is a better way to do this that would be great.
You could do:
var link = window.location.pathname;
var current = link.split('#');
current[current.length-1]; // <-- Current video
Grab the url and parse out the key word:
var path = window.location.href;
var index = path.lastIndexOf('#');
var dom = path.substring(index);
$(dom).animate({height: 400, width: 250});
Can you launch your video player from within JS script?
If you can, than you check whether you have an anchor in your URL or not, get the anchor from your URL, find your element by ID and add an active class to it and then launch the proper video.
if( window.location.hash ) {
var anchor = window.location.hash;
var $activeEl = $(anchor);
$activeEl.addClass('.active');
yourVideoPlayer.play(anchor.substring(1, anchor.length-1)); // Removing the hash symbol
}
Something like this will work.
I would like users to have the option to change the background image on my website, so I found some code that allows them to do this. It allows them to paste a URL of a image of their choice in a textbox(input):
<script type="text/javascript">
function changebackground(){
var url = document.getElementById('bgchanger').value;
document.getElementsByTagName('body')[0].style.backgroundImage = "url('" + url + "')";
}
</script>
<input type="text" id="bgchanger" placeholder="Change Background Add URL" />
<input type="button" onclick="changebackground();" value="Change!" />
It all works but when the user leaves the site or hits refresh the background image goes back to white (default)
I was wondering if we could save the users background image for the next time they visit the site.
I have made a demo:
DEMO: http://goo.gl/253IN
Username: demo
Password: demo1
Thank you in advance!
PS I am not an expert (yet :D) on HTML and Javascrpit so I will not be able to understand really complex code
to accomplish this .. you have to place a cookie on the users computer then check if the cookie is set and retrieve it's value ,...
here is a jquery plugin for cookies
https://github.com/carhartl/jquery-cookie
first you creat the cookie
$.cookie('background_image', url , { expires: 7 });// will expire in 7 days
then you check if that cookie is set
if(typeof($.cookie('background_image')) != 'undefined'){
var users_old_back_ground = $.cookie('background_image');
$('body').css ({ "background-image" : "url('" + users_old_back_ground + "')"}); //jquery : selecting the body tag ... then using css() to set the bg
}else{
// do something else because the user doesnt have the cookie
}
and try to enhance your previous code and use jquery instead of plain javascript
Try with localStorage
var defaultImage = "http://...";
document.getElementsByTagName('body')[0].style.backgroundImage = localStorage.getItem('back') ? "url('"+localStorage.getItem('back')+"')" : "url('"+defaultImage+"')";
function changebackground(){
var url = document.getElementById('bgchanger').value;
document.getElementsByTagName('body')[0].style.backgroundImage = "url('" + url + "')";
localStorage.setItem('back',url);
}
A good way to do this is to use localStorage. I've written a jQuery Plugin to make handling it easier. Take a Look at the examples. https://github.com/yckart/jquery.storage.js
I have a web page with a jQuery lightbox that opens automatically on page load. In the lightbox I have implemented the Facebook Like button (this is a 2 click solution for Facebook Like button in email). Now, when a Facebook user visits my web page by clicking on the "Liked" URL on Facebook I want to turn off the lightbox. I don't want to have to create two different pages (one with lightbox turned on and another turned off) and I think I can avoid this by adding a parameter to the URL with Javascript then turn the lightbox on/off based on that parameter. Is this a safe way to do this? How would I do this?
You can get URL params with this JS function that I found here:
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
Then *add use ?lightbox=1 e.g www.example.com?lightbox=1 and read it with the above function:
if(getUrlVars()["lightbox"]=="1"){
//...
}
*to add parameters you can either:
Change the a link href attribute element.href = "http://www.newURL.com?param=1"; and wait for the user to click them
Redirect to the new location window.location.href = "http://www.newURL.com?param=1";
I believe this is the rough code you're after:
<script type="text/javascript">
document.location="http://example.com/index.php?noLightBox=1";
</script>
Then on index.php, you'd want something such as:
<?php
function isset_or(&$check, $alternate = NULL)
{
return (isset($check)) ? (empty($check) ? $alternate : $check) : $alternate;
}
function getGETPOST($var)
{
return isset_or($_GET[$var],isset_or($_POST[$var],"Empty"));
}
?>
Example:
if(getGETPOST('noLightBox') != 1) {
// Code to display the light box comes here.
}
// Else normal page code
Hope this was helpful!
Source: http://php.net/manual/en/function.isset.php
& W3School's tutorials on PHP