I am trying to resize a video so that if fills 100% of its container ONLY when the browser width drops below 960 pixels. For reasons pertaining to inline styles I wrote this simple function in jquery. If works fine--but it is only called when the window is loaded.
$(document).ready(function(){
if ($(window).width() < 950) {
$("video").width("100%");
}
});
How would I write a similar jquery function which can change the width of the video dynamically as the browser window is resized? I have tried the following but to no avail.
$(window).resize(function() {
if ( $(window).width() < 950) {
$("video").width("100%");
}
});
*EDIT*Here is the new video html code:
<div id="sliderbg">
<div class="container">
<div id="slider" class="row">
<div class="eight columns">
<div id="text-6" class="widget widget_text"> <div class="textwidget"><br>
<video id="wp_mep_1" width="600" height="330" poster="http://www.first1444.com/wp-content/themes/lightningyellow/images/poster.png" controls="controls" preload="none" >
<source src="http://first1444.com/wp-content/themes/lightningyellow/videos/robotintro.mp4" type="video/mp4" />
<object width="600" height="330" type="application/x-shockwave-flash" data="http://www.first1444.com/wp-content/plugins/media-element-html5-video-and-audio-player/mediaelement/flashmediaelement.swf">
<param name="movie" value="http://www.first1444.com/wp-content/plugins/media-element-html5-video-and-audio-player/mediaelement/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=http://first1444.com/wp-content/themes/lightningyellow/videos/robotintro.mp4" />
</object>
</video>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#wp_mep_1').mediaelementplayer({
m:1
,features: ['playpause','current','progress','volume','tracks']
});
});
</script>
<br/><h6 id="tagline">See <b><i>FIRST</i></b> Team #1444 in action building this years robot</h6>
</div>
</div><script type="text/javascript">
$(document).ready(function() {
if ( $(window).width() < 960) {
$("video").width("100%");
}
});
</script>
</div><!-- eight columns -->
By the way I am using the foundation css framework. I doubt that would be causing the problem.
You can also use CSS Media Queries:
#my-element {
width : 950px;
}
#media all and (max-width: 950px) {
#my-element {
width : 100%;
}
}
This sets the element to 950px wide unless the viewport is less than 950px in which case the element is set to 100% width.
Here is a demo using media queries: http://jsfiddle.net/G9gx6/
Here is a good source for finding what browsers support what: http://caniuse.com/#feat=css-mediaqueries
Update
Of-course you can use JavaScript as well:
//bind to the windows resize event
$(window).on('resize', function () {
//check if the viewport width is less than 950px
if ($(this).width() < 950) {
//if so then set some element's width to 100%
$('#my-element').width('100%');
} else {
//otherwise set the element's width to 950px
$('#my-element').width('950px');
}
//trigger a resize event on the window object so this code runs on page-load
}).trigger('resize');
Update
To optimize this code I would cache the $('#my-element') selection as well as throttle the resize event handler to only run once-in-a-while:
$(function () {
var $element = $('#my-element'),
resizeOK = true,
timer = setInterval(function () {
resizeOK = true;
}, 100);
$(window).on('resize', function () {
if (resizeOK) {
resizeOK = false;
if ($(this).width() < 950) {
$element.width('100%');
} else {
$element.width('950px');
}
}
}).trigger('resize');
});
Here is a demo: http://jsfiddle.net/G9gx6/1/
You just have a typo. It should be:
$(window).resize(function() {
resize() documentation: http://api.jquery.com/resize/
What you want to do is wrap your function in:
$(window).resize(function(){
alert('You resized the window!');
});
Reference: .resize()
Related
I have a study case:
I have an image wrapped in an intro div for the desktop size like this:
<div class="intro">
<img id="gambar" src="assets/images/image-intro-desktop.jpg" alt="">
</div>
then when entering the mobile file size the img tag will change to:
<img id="gambar" src="assets/images/image-intro-mobile.jpg" alt="">
So the question is how do I change the component, what js code should I use??
You can do this using css
<style>
.intro{
content:url("assets/images/image-intro-desktop.jpg");
}
#media only screen and (max-width: 600px) {
.intro{
content:url("assets/images/image-intro-mobile.jpg");
}
}
</style>
<img class="intro"/>
You would need to add two event listeners for the resize and load events, check the window width if it's smaller than your desired breakpoint to change the image source. Otherwise reset the source back to the original.
document.addEventListener( 'resize', changeImageSrc() );
document.addEventListener( 'load', changeImageSrc() );
function changeImageSrc() {
var init_img_src = document.getElementById('gambar').src;
// Change 600 to your breakpoint
if( window.innerWidth < 600 ) {
document.getElementById('gambar').src = 'https://via.placeholder.com/250';
} else {
document.getElementById('gambar').src = init_img_src;
}
}
<div class="intro">
<img id="gambar" src="https://via.placeholder.com/550" alt="">
</div>
You asked for Javascript code so:
Maybe you can run this in a window.onload. Depends on what you want.
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
// returns true if its a mobile
// change src here
document.getElementById('gambar').src = "assets/images/image-intro-mobile.jpg";
}else{
// returns false if it isn't
}
I have a html5 custom video player, now I would like on clicking the full-screen icon on mobile to rotate the screen to landscape and vice versa as in youtube.
Here is my HTML
<div id="video-block">
<video class="video_player" id="player" width="100%" controls="controls" autoplay="autoplay">
<source src="INPUT VIDEO URL HERE"/>
Your browser does not support the HTML5 video tag. Use a better browser!
</video>
<button onclick="goFullscreen('player'); return false">
View Fullscreen!
</button>
</div>
Here is js
$(document).ready(function() {
// rotate function
function rotateVideoPlayer() {
var width = $(window).width();
var height = $(window).height();
$("#video-block").width(0);
$("#video-block").height(0);
console.log(width, height);
// document.body.scrollTop = document.documentElement.scrollTop = 0
if (width > height) {
console.log("landscape");
$("#video-block").width(width);
$("#video-block").height(width * 9 / 16);
$("#video-block").css("left", 0 + "px");
$("#video-block").removeClass("rotated");
} else {
console.log("portrait");
$("#video-block").width(height);
$("#video-block").height(height * 9 / 16);
$("#video-block").css("left", width - (width - height * 9 / 16) / 2 + "px");
$("#video-block").addClass("rotated");
document.body.scrollTop = document.documentElement.scrollTop = 0
}
}
$('#btn').on('click', function(){
rotateVideoPlayer();
var element = document.getElementById('videocontainer');
if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
})
});
css
#video-block.rotated{
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}
Unfortunately, my solution is not working as expected, there is a full screen but rotation is not working properly as on youtube.
Can someone help me to solve this problem? any help or suggestions will be appreciated
You can use screen.orientation.lock('landscape') to enable landscape once you are entering full-screen mode. It works for android only.
As there are some limitations on iOS for enabling full-screen mode, it's better to use default behaviours for videos on iOS as youtube does.
$(function() {
function makeLandscape() {
// this works on android, not iOS
if (screen.orientation && screen.orientation.lock) {
screen.orientation.lock('landscape');
}
}
$(document).on('click', '#btn', function() {
var element = document.getElementById('video-container');
if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
makeLandscape();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
makeLandscape();
}
});
});
<div id="video-container">
<video class="video_player" id="player" width="100%" autoplay="autoplay" playsinline="">
<source src="https://wp-iframe.videomill.co/vpaidexamples/videos//vmerce.mp4" />
Your browser does not support the HTML5 video tag. Use a better browser!
</video>
<button id="btn">
View Fullscreen!
</button>
</div>
Mate, You have just not provided correct ID in the video player, Instead of id="player" provide id="video-block", That is the reason why rotation CSS is not being applied. In below mentioned Tag
<video class="video_player" id="player" width="100%" controls="controls" autoplay="autoplay">enter code here
Forgive me, I am fairly new to javascript. I am trying to remove a div's parent below 980px wide and then add it back in above 980px. I am using the following code that I have put together from looking at other jQuery.
jQuery(window).resize(function () {
var Tags = jQuery( ".case-studies .items-row div.span4" );
var wi = jQuery(window).width();
if (wi < 980) {
if ( Tags.parent().is( "div.items-row.cols-3.row-0.row-fluid" ) ) {
Tags.unwrap();
}
} else {
(Tags.wrap.parent( "<div .items-row.cols-3.row-0.row-fluid></div>" ));}
});
I'm guessing you will realise I am experiencing a few issues!
The jQuery doesn't apply below 980px on page load, however when you start with a large screen size and shrink the width below 980px the jQuery works.
Once the jQuery has fired and the screen size goes above 980px, the div that has been removed does not get reapplied.
Please explain where I have gone wrong as I would like to learn.
Thanks for your time
UPDATE
The html before any jQuery is:
<section>
<div class="items-row cols-3 row-1 row-fluid">
<div class="span4"></div>
</div>
</section>
With the following jQuery:
jQuery(window).load(function () {
var Tags = jQuery( ".case-studies .items-row div.span4" );
var wi = jQuery(window).width();
if (wi < 980) {
if ( Tags.parent().is( "div.items-row.cols-3.row-0.row-fluid" ) ) {
Tags.unwrap();
}
}
else {
Tags.wrap( "<div></div>");
}
});
This now occurs above 980px on page load:
<section>
<div class="items-row cols-3 row-1 row-fluid">
<div>
<div class="span4"></div>
</div>
</div>
</section>
And when i refresh the page below 980px:
<section>
<div class="span4"></div>
</section>
The result below 980px is correct, however only runs when i refresh the screen. The result above 980px is not my intended result, i would like it to remain or return to:
<section>
<div class="items-row cols-3 row-1 row-fluid">
<div class="span4"></div>
</div>
</section>
#1: Call the function once on page load, that way you don't need to resize to get it
#2:
else {
(Tags.wrap.parent( "<div .items-row.cols-3.row-0.row-fluid></div>" ));}
should be
else {
(Tags.wrap( "<div .items-row.cols-3.row-0.row-fluid></div>" ));}
So basicly I want to have 2 buttons (one for map and one for recent posts). I implemented it by making jQuery script for the hiding/showing the divs as it follows:
<div id="main-choice" style="height:100%; width:100%;">
<button class="buttons" id="button-region">News by regions</button>
<button class="buttons" id="button-latest-news">Latest news</button>
</div>
<div class="hide" id="world-map-chosen" style="width:100%;"><button id="back-to-choice-1">Back</button>
<?php build_i_world_map(1); ?></div>
<div class="hide" id="latest-news-chosen" style="height:400px; width:100%;"><button id="back-to-choice-2">Back</button>
<?php echo get_new_royalslider(1); ?> </div>
<script>
$("#world-map-chosen").hide();
$("#latest-news-chosen").hide();
$('#button-region').click(function() {
$('#main-choice').fadeOut('slow', function() {
$("#world-map-chosen").fadeIn("slow");
});
});
$('#button-latest-news').click(function() {
$('#main-choice').fadeOut('slow', function() {
$("#latest-news-chosen").fadeIn("slow", function(){
fireOnResizeEvent();
});
});
});
$('#back-to-choice-1').click(function() {
$('#world-map-chosen').fadeOut('slow', function() {
$("#main-choice").fadeIn("slow");
});
});
$('#back-to-choice-2').click(function() {
$('#latest-news-chosen').fadeOut('slow', function() {
$("#main-choice").fadeIn("slow");
});
});
</script>
</div>
and in the head tag:
<script language="JavaScript" >
function fireOnResizeEvent() {
var width, height;
if (navigator.appName.indexOf("Microsoft") != -1) {
width = document.body.offsetWidth;
height = document.body.offsetHeight;
} else {
width = window.outerWidth;
height = window.outerHeight;
}
window.resizeTo(width - 1, height);
window.resizeTo(width + 1, height);
}
window.onresize = function() {
alert("Resized!");
}
</script>
My issue is that the slider and the map are taking the hidden state size and not refreshing when shown by the script.
As you can see i tried to include a function in the jQuery that resize the window after the load, but without luck.
Both the functions for loading the map and the slider are working correctly.
Could you please help me solve this one by helping me fix this code or give me some ideas how should i make it?
i have created a simple JavaScript file in which i have 2 images.
here person can either swipe left or right & accordingly images swipes
here is my code,
$('#landscapeimage1').swiperight(function (event) { //here lanscapeimage1 is canvas on which i have drawn an image.
var width = window.innerWidth;
var slide = "+=" + width + "px";
$('#landscapeimage').animate({'left': -width}, 1, function () {
$('#landscapeimage1').animate({"left": slide}, "fast", function () {});
$('#landscapeimage').animate({"left": slide}, "fast", function () {
currentImage = getPreviousImage();
currentCanvas = "landscapeimage";
drawImage();
$(this).unbind(event);
return false;
});
return false;
});
return false;
});
initially when i swipe it works properly but if i visit same image then it calls same function again & again until unvisited images does not comes & if i have visited all images then it goes to infinite loop.
i don't understand why this happens.
i have tried to stop animate & unbind swipe function but it also not working.
<div data-role="page" id="imagepage">
<div class="whiteBackground" id="landscapeimage" style="position: relative;">
<canvas id="image" style="z-index: 1;position:absolute;left:0px;top:0px;" height="200px" width="200px">
</canvas>
</div>
<div class="whiteBackground" id="landscapeimage1" style="position: relative;">
<canvas id="image1" style="z-index: 1;position:absolute;left:0px;top:0px;" height="200px" width="200px">
</canvas>
</div>
</div>
After debugging i have found that animate function calling multiple times not swipe function but i can't figure out why? please help me out.
does any body know why this happens?