window.matchMedia is working, but I thought it would work like using '#media only screen and' works where when the screen is narrowed it happens. With window.matchMedia the screen has to be loaded or refreshed if you're on a desktop browser for example. Is there a way to have window.matchMedia working like #media CSS where it just happens automatically when you increase or decrease the screen-width without the need for the screen to be refreshed or (re)loaded?
Example below being used on: Americastributetoparis.com
jQuery(document).ready(function($) {
if (window.matchMedia("(max-width: 800px)").matches) {
// phone
$(".front-page-1").backstretch(["/wp-content/themes/digital-pro/images/americas-tribute-to-paris-mobile.png"]);
} else {
//tab or desktop
$(".front-page-1").backstretch([BackStretchImg.src]);
}
});
Found this researching my questions on a search engine and applied it:
media query not just on run time, but also when any changes to the window state occur
jQuery(document).ready(function($) {
var mql = window.matchMedia("(max-width: 800px)")
mediaqueryresponse(mql) // call listener function explicitly at run time
mql.addListener(mediaqueryresponse) // attach listener function to listen in on state changes
function mediaqueryresponse(mql){
if (mql.matches){ // if media query matches
// phone
$(".front-page-1").backstretch(["/wp-content/themes/digital-pro/images/americas-tribute-to-paris-mobile.png"]);
} else {
//tab or desktop
$(".front-page-1").backstretch([BackStretchImg.src]);
}
}
});
Related
I used a nice youtube video in Revolution Slider on my Wordpress Site.
Today I updated Revolution Slider, because it wouldn't autoplay the video anymore in Google Chrome.
With the update (5.4.8) the video works again, but there is no sound.
The mute-feature is toggled to 'off'. Flipping is has no effect.
IMPORTANT NOTE: New Browser/Device restrictions for Autoplay Video
Videos with sound are no longer allowed to autoplay in Chrome, Safari and mobile devices. Because of this, Slider Revolution will automatically mute videos in these cases.
Source : video-not-showing-up-on-mobile
Solution :
Here is how you can enable sound on mobile devices..
We are using javascript to enable sound
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var v = document.getElementsByTagName('video');
// check for the element to exist in dom
var checkExist = setInterval(function() {
if (v.length) {
// run this code as soon as the element added to the dom
var isMobile = window.matchMedia("only screen and (max-width: 760px)");
if (isMobile.matches) {
if(typeof v[0] != undefined){
v[0].autoplay = false; // you can change this as needed [true/false]
v[0].defaultMuted = false; // disable defaulMute
v[0].muted = false; // disable mute(enable sound)
v[0].play(); // play the video
}
}
clearInterval(checkExist);
}
}, 100);
});
</script>
I've found the FlowRouter documentation for FlowRouter.reload(), but I've been unable to find specific code examples and can't get it working.
In my app, I have a template that uses some clever javascript (Isotope) to reposition elements as the page resizes. Sometimes the user navigates away, resizes the browser window, and then returns - to a messed up page that should refresh and redraw to reposition the elements for the re-sized window.
This is my route. How would I use FlowRouter.reload() to reload/refresh just the "work" template area? Alternatively, how would I use it to reload/refresh the whole layout template or window?
FlowRouter.route( '/work', {
action: function() {
BlazeLayout.render( 'body-static', {
content: 'work',
});
},
});
In case anyone else comes here, this was solved with a great help from Hugh in the Meteor forum.
The solution did not use reload. Instead, it made use of Triggers in FlowRouter to check if the template was being reloaded, refresh it if so, and then stop once refreshed to prevent an endless loop.
Here is how it worked out.
// handle refreshing div on every load of div
let fireReload = false;
function reloadCheck(context, redirect, stop) {
if (fireReload) {
console.log('Hugh is Awesome and also reloading screen...');
FlowRouter.reload();
stop();
}
}
function routeCleanup() {
fireReload = !fireReload;
}
FlowRouter.route('/work', {
action: function() {
BlazeLayout.render( 'body-static', {
content: 'work',
});
},
triggersEnter: [reloadCheck],
triggersExit: [routeCleanup]
});
I have a strange problem. I have a PHP controller that dynamically generates HTML that jQuery.load() calls on to update the main content area of a website without updating the headers or footers.
Everything is working fine in Firefox and Chrome for Mac OS but when I totally clear the cache and load the page in Safari 6 for Mac OS X the styles are only partially applied (they are the same for all of the items in this CSS class):
If I reload the page and navigate so jQuery fires another .load() this time it works fine, like this:
Other posts said to reload the CSS as a .load() callback but that doesn’t seem to be the problem here, is it?
Is this a bug? It’s working in 2 other browsers.
UPDATE:
Here is the jQuery powering the .load()
$("#main-content").on("click", "#residential a, #commercial a, #industrial a", function() {
var link = $(this).attr("href");
link = link.slice(1);
if (link == window.name) {
}
else {
window.name = link;
$("#main-content").fadeOut(500, function() {
$(this).load('index.php?jQueryLoad=true&url=' + link, function() {
$("#carousel").show();
flexsliderload();
});
$(this).fadeIn(500);
});
}
return false;
});
I have an asp.net page with an tag in it. If I enable controls (controls="controls") I can play the audio assigned to the tag. I just want to show my own button to play the audio, so I added a simple html button with a javascript function to hit the .play method:
<button id="LeftAudio" class="Audio" onclick="playAudio1()"></button>
function playAudio1() {
// Check for audio element support.
if (window.HTMLAudioElement) {
try {
//debugger;
var oAudio = document.getElementById('dnn_ctr<%=ModuleId.ToString(CultureInfo.InvariantCulture) %>_ViewUFL_Book_audio1');
oAudio.volume = 1.0;
// Tests the paused attribute and set state.
if (oAudio.paused) {
oAudio.play();
debugger;
}
else {
oAudio.pause();
}
}
catch (e) {
// Fail silently but show in F12 developer tools console
if (window.console && console.error("Error:" + e));
}
}
}
The audio plays fine when I step through the javascript (Chrome/Windows), but will not play at all if I am not debugging. I tried putting the debugger; statement before the play command and stepping through the code, and putting it after the play command - both work. Just doesn't work if I let it run normally.
Any ideas??
I just made it on Fiddle and its working for me.
Here is the test on Fiddle: http://jsfiddle.net/jwCXV/4/
I've coded a script for this web page.
That allows me to use the thumbnails on the right hand side in order to switch the 'main video'.
All appears to work fine, however if you play one video and then switch to another, and then switch BACK to the video that was originally playing, then the volume is muted when you continue watching it.
I have noticed that you can get around it by clicking the volume tool inside the player, but the average user most likely won't figure this out.
I've tried using the setVolume() method on something like:
$('#media video')
But FF tells me that the method doesn't exist. Could this be because I'm just trying it from within one of my other js files whereas the media player script itself is setup with Wordpress? I'm using the WP plugin you see.
Has anyone else had this issue?
Here is my .js that switches the videos if that helps:
$(document).ready(function() {
// swap media
$('#media-feed .thumb a').click(function() {
var mediaId = $(this).prev('input').val();
$('#media .content').each(function() {
if($(this).css('display') == 'block') {
$(this).fadeOut(350);
}
});
$('#media-' + mediaId).delay(500).fadeIn(350);
return false;
});
// swap sidebar detail
$('#media-feed .thumb a').mouseenter(function() {
var mediaId = $(this).prev('input').val();
$('#media-feed .detail').each(function() {
if($(this).css('display') == 'block') {
$(this).slideUp(125, function() {
var currentDetail = $('#media-detail-' + mediaId);
currentDetail.slideDown(125, function() {
currentDetail.css('display', 'block');
});
});
}
});
return false;
});
});
Also another problem I'm having is in Internet Explorer (all versions). See above, where I said about switching from one video to another, in other browsers the videos automatically pause when you click on another thumbnail. However in IE the videos continue to play. So basically, you'd have to pause the video and THEN change main video by clicking one of the thumbnails. Again, not very user friendly.
Does anyone know of a way I can get it to function like in other browsers? I can see that even IE doesn't have this problem on this page where the Fancybox plugin is used.
So that makes me think there must be a way to solve it in IE on the home page.
If anyone has any advice on this too that would be great!
Thanks.