Looks like today (Feb 8, 2023) or a few days ago Vimeo did some updates. And now on all my websites, the following code is not working anymore (over 10 websites, all stopped working today).
Code for mute and unmute:
var iframe = $('.videobg iframe');
var player = new Vimeo.Player(iframe);
$( ".videobg .unmute " ).click(function() {
player.setVolume(1);
$( ".videobg .unmute " ).hide();
$( ".videobg .mute " ).show();
});
$( ".videobg .mute " ).click(function() {
player.setVolume(0);
$( ".videobg .unmute " ).show();
$( ".videobg .mute " ).hide();
});
0 errors in console.log.
Can't find any Vimeo documentation updates.
I saw few other websites with similar functionality aren't working eather.
Anyone knows a new way to unmute a video?
Please note:
This is not a browser issue with "allow=autoplay". Thank you!
Does changing player.setVolume(1) to use player.setMuted(false) work for you?
VIMEO fixed the issue.
No changes are required.
Related
I am searching for an option to open every external links from my website (wordpress-blog) to any other sites automatically in a new window. Is that with css or html possible without doing it 1000 times manually via hand as "target _blank"?
Thank you so much!
PS: sry for my bad english, I am no native speaker :(
Put this code in your theme functions.php file.
function cdx_handel_external_links() {
?>
<script type="text/javascript">
( function( $ ) {
$("a[href^=http]").click(function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr({
target: "_blank"
});
}
})
//Add Nofollow
$("a").each(function(){
if(this.href.indexOf('nytimes.com') >0 ){
$(this).attr({
rel: "nofollow"
});
}
});
} )( jQuery );
</script>
<?php
}
add_filter( 'wp_footer', 'cdx_handel_external_links', 999);
Yes, You can use Open external links in a new window plugin.
It will be helpful to open all or specific external links in a new window.
If you put the following in the head tag of your HTML, any href tag without a target should open in a new window:
<head>
<base target="_blank">
</head>
May be for you guys is obvious but for me is not.
I would like to create an i help image, that when it is clicked it pop ups a window with information.
I have tried something like this but it does not help:
<a id="dialog-1" href="#"><button id="opener" >i</button></a>
<script>
$(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});
</script>
application.js
//= require jquery
//= require jquery_ujs
//= jquery-ui
//= require turbolinks
//= require_tree .
answer from my comments
Did you include the library jquery-ui?
include the jquery-ui library in your application.js file.
There are many many ways to accomplish what you need.
I will make a suggestion, there are probably other ways but this is something simple.
For the "i" image, I recommend you getting an actual image, better a png with transparent background.
Another option is using an iconic font, such as Font Awesome (example). It looks like an image, but it is treated like a font, so you can change the color, size, etc.
For the pop-up. Single option is creating a hidden div with absolute positioning and opening it with javascript/jQuery and maybe fading the background a little bit. You can google it a little bit and will find many solutions, one will fit your need for sure.
As a second improvement: If the content is very heavy, you may want to load it on demand via AJAX or other async ways, but first get the info window working :)
maybe you miss the $( document ).ready(function() { ... });
try with this:
<a id="dialog-1" href="#"><button id="opener" >i</button></a>
<script>
$(function() {
$( document ).ready(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});
});
</script>
First off, I am quite a noob.
Ok, so I have embedded a SoundCloud track into my webpage. My question is, how do you refresh a page (or do anything else) when the track ends?
Can you do it with getDuration(I found that on SoundCloud API page)?
I tried to code it. In the code I tried to get the duration of the track and then print it on the screen/webpage. What is wrong with this code?
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<span id="headerLeft-content">
<script type="text/javascript">
var duration = 0;
(function(){
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe);
widget.bind(SC.Widget.Events.READY, function() {
widget.getDuration(function(val) {
duration = val;
});
});
}());
document.write(duration);
</script>
</span>
If that worked, I would just put something like wait(duration) and then refresh...
In other words, can soundcloud embedded track be "hacked" to loop(or to refresh page after track is over, that's what I want to do) even though the original widget doesn't support looping?
Please, take a look at the SoundCloud html5 widget page where I found getDuration command and see if you can help me... => http://developers.soundcloud.com/docs/api/html5-widget#getters
EDIT:
<script>
var html=<iframe blablabla...></iframe>
document.write(html);
</script>
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<script type="text/javascript">
(function(){
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe),
widget.bind(SC.Widget.FINISH, function() {
window.location.reload(false);
});
}());
</script>
Page doesn't refresh after the track is over. Can you see what's wrong?
You can bind a function to the SC.Widget.FINISH event documented here. The following code snippet should work:
widget.bind(SC.Widget.FINISH, function() {
window.location.reload(false);
});
Of course if all you want is for the widget to loop, you could use the seekTo and play methods:
widget.bind(SC.Widget.FINISH, function() {
// again, again!
widget.seekTo(0);
widget.play();
});
That would be less intrusive than a page refresh.
widget.bind(SC.Widget.Event.FINISH, function() {
widget.seekTo(0);
widget.play();
});
In the other reply, the first parameter is missing ".Event".
Finally. A truly working version.
var widgetIframe = document.getElementById("soundcloud"),
widget = SC.Widget(widgetIframe);
widget.bind(SC.Widget.Events.FINISH, function() {
widget.play();
});
Hi i am very new to jquery and json in general and i am having trouble using jQuery.getJSON() with the foursquare API, what i am trying to do is use this search query and be able to print the results to the browser I have searched around and it is hard to find a good basic tutorial or documentation if someone could help me with getting the basic syntax of getting and printing the results to browser it would be much appreciated, here is my current code below
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$.getJSON('https://api.foursquare.com/v2/venues/search?ll=40.7,-74&query=mcdonalds&client_id=clientid&client_secret=clientsecret&v=20120101', function(data) {
var venues = [];
/* print name for each venue. */
for (var i = 0; i < venues.length; i++) {
document.write(venues[i]['name'])
}
})
</script>
If you copy that url to the browser it comes back with the results in json format but i want to be able to manipulate those results and print them out selectively
here is the changes i made to get it working
<div id="names">
</div>
<script>
$.getJSON('https://api.foursquare.com/v2/venues/search?ll=40.7,-74&query=mcdonalds&client_id=clientid&client_secret=clientsecret&v=20120101',
function(data) {
$.each(data.response.venues, function(i,venues){
content = '<p>' + venues.name + '</p>';
$(content).appendTo("#names");
});
});
</script>
hehe i figured it out i was going about it the wrong way this is what it looks like now
<div id="names">
</div>
<script>
$.getJSON('https://api.foursquare.com/v2/venues/search?ll=40.7,-74&query=mcdonalds&client_id=2POUFAUU4ZBJ2MTDOY3S2YHR2NIT52FYW0LUTPHBMNTJFJNQ&client_secret=YFDZI1YWV3ZI5S5SPM2DZJEQIEBPIDJ5XFZBWTIKIQZVQNYM&v=20120101',
function(data) {
$.each(data.response.venues, function(i,venues){
content = '<p>' + venues.name + '</p>';
$(content).appendTo("#names");
});
});
</script>
hopefully this will help someoen in a similar situation :)
This would be much more precise: https://api.foursquare.com/v2/venues/search?intent=browse&near=51.1506269,14.968706999999995&radius=19400&categoryId=4d4b7105d754a06374d81259&query=Restaurant&client_id=YOUR-ID&client_secret=YOUR-SECRET&v=20130307
I'm trying to manipulate an audio file (mp3), using <audio> and javascript but nothing happens when I click the link. The alert() is working but nothing happens with the audio i.e. no pause, no play, nothing..., whether in Safari or Firefox. Is the coding dodgy or what?
Check this out:
jQuery/javascript:
$(document).ready( function(){
var audioElement = document.getElementById('audio_player');
$('div.audioControls .play').live('click', function(){
//alert('play');
audioElement.play();
});
$('div.audioControls .pause').live('click', function(){
//alert('pause');
audioElement.pause();
});
$('div.audioControls .playatTime').live('click', function(){
alert('play at time: 30 sec');
audioElement.currentTime = 30;
audioElement.play();
return false;
});
});
HTML:
<audio id="audio_player" controls="controls" src="aaliyah.mp3">
Your browser does not support the audio element.
</audio>
<div class="audioControls">
play
pause
play at 35 secondes
</div>
Thanks!
I now know why, it didn't work. To make use of the javascript API, the controls attributes needs to be removed from the html tag itself and it should work.
Thanks