I have a div container broken into quadrants. Each quadrant has an image the size of the container, but cropped to that quadrant. On mouseover I want to make the quadrant expand to fit the container. My challenge is positioning the images with in the DIV. The top left image is fine, all the other images align to the top left of the span they are in and I need all of the images to align themselves at the top left. See this fiddle it may will make more sense looking at it.
Basically all the images should have the same position, stacked exactly on top of each other with only one quadrant exposed based on the z-index and which span they are in. jquery will reveal the full image on mouseover.
Just in case you didn't see the fiddle here:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#containter {background: black; height:500; width:800px; padding:0px; overflow: hidden;}
#top-left {position: absolute; top:0px; left: 0px; height:250px; width:400px; padding:0px; overflow: hidden; z-index: 1; }
#top-right {position: absolute; top:0px; left:400px; height: 250px; width:400px; overflow:hidden;z-index: 2;}
#bottom-left {position: absolute; top:250px; left:0px; height:250px; width:400px; padding:0px; overflow: hidden; z-index: 3; }
#bottom-right {position: absolute; top:250px; left: 400px; height:250px; width:400px; padding:0px; overflow: hidden; z-index: 4; }
</style>
</head>
<body>
<div id="box">
<span id="top-left">
<image src="http://2.bp.blogspot.com/_Otv4_7K3yfk/TTxZykkA4cI/AAAAAAAAAcM/bQFOHrc5fyQ/s1600/Wallpapers_Nature+%25288%2529.jpg">
</span>
<span id="top-right">
<image src="http://www.adywallpapers.com/nature/260_nature_wallpapers.jpg">
</span>
<span id="bottom-right">
<image src="http://www.adywallpapers.com/nature/101_nature_wallpapers.jpg">
</span>
<span id="bottom-left">
<image src="http://www.adywallpapers.com/nature/192_nature_wallpapers.jpg">
</span>
</div>
<script>
$("#top-left").mouseover(function() {
$( this ).css( "width","+=400");
$( this ).css( "height","+=250" );
$( this ).css("z-index", "100");
});
$("#top-left").mouseout(function() {
$( this ).css( "width","-=400");
$( this ).css( "height","-=250" );
$( this ).css("z-index", "1");
});
$("#bottom-left").mouseover(function() {
$( this ).css( "width","+=400");
$( this ).css( "height","+=250" );
$( this ).css("z-index", "100");
});
$("#bottom-left").mouseout(function() {
$( this ).css( "width","-=400");
$( this ).css( "height","-=250" );
$( this ).css("z-index", "3");
});
$("#top-right").mouseover(function() {
$( this ).css( "width","+=400");
$( this ).css( "height","+=250" );
$( this ).css("z-index", "100");
});
$("#top-right").mouseout(function() {
$( this ).css( "width","-=400");
$( this ).css( "height","-=250" );
$( this ).css("z-index", "2");
});
$("#bottom-right").mouseover(function() {
$( this ).css( "width","+=400");
$( this ).css( "height","+=250" );
$( this ).css("z-index", "100");
});
$("#bottom-right").mouseout(function() {
$( this ).css( "width","-=400");
$( this ).css( "height","-=250" );
$( this ).css("z-index", "4");
});
</script>
</body>
</html>
Thanks
Figured it out. click here to see the fiddle Now to animate or fade the transition.
Related
Our videos use the lower third of the page for introductions, etc. much like TV News stations do. When captions are on, they're blocking all of that, thus creating a LOT of complaints from the communities that need the captions. I've tried tinkering with the CSS, but with a responsive layout, resizing the player wreaks havoc, often putting them out of sight altogether.
Is there a setting that can be changed, or technique to use, that will keep the captions at the top and in view when resized, OR in an external container?
Problem: the JW player 608 live captions are not formatted cleanly.
To solve this, disable the JW caption display and format our own window, named "ccbuffer"
<style type="text/css">
.jw-captions {
display: none !important;
}
#ccbuffer {
border: 2px solid white !important;
border-radius: 4px;
background-color: black !important;
display: flex;
height: 120px;
margin-top: 6px;
font: 22px bold arial, sans-serif;
color: white;
justify-content: center;
align-items: center;
}
</style>
Here is where I show the player, and ccbuffer is a div right below it
<div id="myPlayer">
<p style="color: #FFFFFF; font-weight: bold; font-size: x-large; border-style: solid; border-color: #E2AA4F">
Loading video...
</p>
</div>
<div id="ccbuffer" />
DOMSubtreeModified is deprecated. Use MutationObserver, which is less stressful on the client.
Let's hook the 'captionsChanged' event from JW. if track is 0 then no captions are selected and we disconnect the observer. If captions are selected, then we use jquery to pull the text out of the jw-text-track-cue element, and format it into a nice 3 line display in our ccbuffer window.
<script>
var observer;
jwplayer().on('captionsChanged', function (event) {
if (event.track == 0) {
observer.disconnect();
$('#ccbuffer').hide('slow');
}
else {
$('#ccbuffer').show('slow');
// select the target node
var target = document.querySelector('.jw-captions');
// create an observer instance
observer = new MutationObserver(function(mutations) {
$('.jw-text-track-cue').each(function(i) {
if (i == 0)
$('#ccbuffer').html( $(this).text() );
else
$('#ccbuffer').append("<br/>" + $(this).text() );
});
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true }
// pass in the target node, as well as the observer options
observer.observe(target, config);
}
});
$(document).ready(function () {
$('#ccbuffer').hide();
});
</script>
So when the user enables captions, the ccbuffer window will slide open and display a clean 3 line representation of the CC text.
Final Solution: External Captions that are draggable/resizable
All credit to #Basildane, I worked out how to extenalize the captions with VOD, and to make them draggable and resizable, with CSS experimentation for ADA consideration:
<!DOCTYPE html>
<html>
<head>
<title>JW External Captions</title>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Lang" content="en">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="/jwplayer/v8.10/jwplayer.js"></script>
<style type="text/css">
#myPlayer {
margin-bottom:5px;
}
.jw-captions {
display: none !important;
}
#ccbuffer {
color: white;
background-color: black;
opacity:.7;
font: 22px bold san-serif;
width: 100%;
padding: 15px;
height: 100%;
position:relative;
}
.night {
color:silver !important;
background-color: black !important;
opacity:1 !important;
border-color:silver !important;
}
.highcontrast {
color:white ! important;
background-color: black !important;
opacity:1 !important;
border-color:white !important;
}
.highcontrast2 {
color:black !important;
background-color: yellow !important;
opacity:1 !important;
border-color:black !important;
}
.highcontrast3 {
color:yellow !important;
background-color: black !important;
opacity:1 !important;
border-color:yellow !important;
}
#ccContainer {
position: absolute;
z-index: 9;
border: 1px solid inherit;
overflow: hidden;
resize: both;
width: 640px;
height: 180px;
min-width: 120px;
min-height: 90px;
max-width: 960px;
max-height: 300px;
}
#ccContainerheader {
padding: 3px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
border:1px solid;
}
</style>
</head>
<body>
<h3>JW Draggable Captions Container</h3>
<div id="PlayerContainer" style="width:401px;">
<div id="myPlayer">Loading video...</div>
</div>
<div id="ccContainer">
<!-- Include a header DIV with the same name as the draggable DIV, followed by "header" -->
<div style="float:right;">
<form id="myform">
<select id="ccFontFamily">
<option value="sans-serif">Default Font</option>
<option value="serif">Serif</option>
<option value="monospace">Monospace</option>
<option value="cursive">Cursive </option>
</select>
<select id="ccFontSize" style="">
<option value="22">Default Size</option>
<option value="14">14</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="32">32</option>
</select>
<select id="ccContrast" style="">
<option value="ccdefault">Default Contrast</option>
<option value="night">Night</option>
<option value="highcontrast">High Contrast</option>
<option value="highcontrast2">Black/Yellow</option>
<option value="highcontrast3">Yellow/Black</option>
</select>
<button id="ccFontReset">Reset</button>
</form>
</div>
<div id="ccContainerheader">
Captions (click to move)
</div>
<div id="ccbuffer"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
jwplayer.key = 'xxxxxxxxxxxxxxxxxxx';
jwplayer('myPlayer').setup({
width: '100%', aspectratio: '16:9', repeat: 'false', autostart: 'false',
playlist: [{
sources: [ { file: 'https:www.example.com/video.mp4'}],
tracks: [ { file: 'https:www.example.com/video-captions.vtt', kind: 'captions', label: 'English', 'default': true } ]
}]
})
// External CC Container
$('#ccContainer').hide();
var position = $('#myPlayer').position();
var width = $('#PlayerContainer').outerWidth();
ccTop = position.top;
ccLeft = (width+50)+'px'
$('#ccContainer').css({'top':ccTop, left:ccLeft });
var observer;
jwplayer().on('captionsList', function (event) {
ccObserver(event);
});
jwplayer().on('captionsChanged', function (event) {
ccObserver(event);
});
videoplayer.on('fullscreen', function(event){
if(event.fullscreen){
$('.jw-captions').css('display','block');
}else{
$('.jw-captions').css('display','none');
}
});
$("#ccFontFamily").change(function() {
$('#ccbuffer').css("font-family", $(this).val());
});
$("#ccFontSize").change(function() {
$('#ccbuffer').css("font-size", $(this).val() + "px");
});
$("#ccContrast").change(function() {
$('#ccContainer').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
$('#ccContainerheader').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
$('#ccbuffer').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
$('select').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
$('#ccFontReset').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
});
$('#ccFontReset').click(function() {
ccFontReset();
});
function ccFontReset(){
$("#ccFontFamily").val($("#ccFontFamily option:first").val()).trigger('change');
$("#ccFontSize").val($("#ccFontSize option:first").val()).trigger('change');
$("#ccContrast").val($("#ccContrast option:first").val()).trigger('change');
}
ccFontReset();
});
function ccObserver(event){
if (event.track == 0) {
$('#ccContainer').hide('slow');
$('.jw-captions').css('display','block'); // VERY important
if (observer != null){
observer.disconnect();
}
}
else {
$('#ccContainer').show('slow');
$('.jw-captions').css('display','none'); // VERY important
var target = document.querySelector('.jw-captions');
observer = new MutationObserver(function(mutations) {
$('.jw-text-track-cue').each(function(i) {
if (i == 0)
$('#ccbuffer').html( $(this).text() );
else
$('#ccbuffer').append("<br/>" + $(this).text() );
});
});
var config = { attributes: true, childList: true, characterData: true }
observer.observe(target, config);
}
}
// External CC Container - Make the DIV element draggable:
dragElement(document.getElementById("ccContainer"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>
I'm implementing an input combo box of type="number".
I want to adjust the size of the up-arrow button and bottom-arrow button.
I think that these buttons are so small buttons that users may feel an inconvenient click motion.
I've been trying to fix this by Googling, investigating properties and selectors of this, but I couldn't get any methods, and I expect that this is because number box has been recently released tag of HTML5.
How Can I adjust this size? please give me any idea. please.
Regards,
<td>
<input type="number" name="qty" value="1" name="goodsnum" onChange = "qtyChanged();">
</td>
You can interact with arrows by css.
input[type=number] {
height: 30px;
}
input[type=number]:hover::-webkit-inner-spin-button {
width: 14px;
height: 30px;
}
<input type="number" value="0" >
Try this below.
I found it here: http://jqueryui.com/spinner/
From this related question: Increase the size of the down and up arrow on the number input, CSS, HTML
$( function() {
var spinner = $( "#spinner" ).spinner();
$( "#disable" ).on( "click", function() {
if ( spinner.spinner( "option", "disabled" ) ) {
spinner.spinner( "enable" );
} else {
spinner.spinner( "disable" );
}
});
$( "#destroy" ).on( "click", function() {
if ( spinner.spinner( "instance" ) ) {
spinner.spinner( "destroy" );
} else {
spinner.spinner();
}
});
$( "#getvalue" ).on( "click", function() {
alert( spinner.spinner( "value" ) );
});
$( "#setvalue" ).on( "click", function() {
spinner.spinner( "value", 5 );
});
$( "button" ).button();
} );
.ui-button.ui-widget.ui-spinner-button.ui-spinner-up {
width: 40px;
height: 30px;
border: 1px solid black;
}
.ui-button.ui-widget.ui-spinner-button.ui-spinner-down {
width: 40px;
height: 30px;
border: 1px solid black;
}
input {
height: 45px;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Spinner - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="/resources/demos/external/jquery-mousewheel/jquery.mousewheel.js"></script>
</head>
<p>
<label for="spinner">Select a value:</label>
<input id="spinner" name="value">
</p>
I have a rails app that's loading external websites (mostly articles) inside an iframe. And I've gotten the majority of the articles to be responsive on any device. I'm only having trouble with articles from certain websites on mobile Safari.
Examples:
1. http://vyrtex-staging.herokuapp.com/article/what-went-wrong-in-flint
2. http://vyrtex-staging.herokuapp.com/article/built-on-passion-how-vox-media-grew-from-its-roots-as-an-oakland-a-s-blog-into-one-of-the-internet-s-biggest-publishers
3. http://vyrtex-staging.herokuapp.com/article/why-isn-t-america-paying-attention-to-trevor-noah
Here is what each of those look on mobile safari:
1. http://i.imgur.com/UAsiJD3.jpg
2. http://i.imgur.com/QgYiOsp.jpg
3. http://i.imgur.com/4wg8y9w.jpg
They look completely fine on desktop Safari, and desktop/mobile Chrome — only mobile Safari is the issue.
Here's my CSS:
.body_container {
width:100%;
height: 100vh;
padding-top:5px;
position: relative;
background-color: white;
}
.intrinsic-container {
position: relative;
height: 0;
-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;
}
.intrinsic-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Here's my HTML:
<div class="body_container">
<div class="intrinsic-container">
<iframe src="<%= #article.url %>"></iframe>
</div>
</div>
And here the javascript I'm running to keep the iframe responsive (the iframe itself, not necessarily the content inside of it):
<script>
var $iframes = $( "iframe" );
// Find & save the aspect ratio for all iframes
$(".intrinsic-container").each(function () {
$( this ).data( "ratio", this.height / this.width )
// Remove the hardcoded width & height attributes
.removeAttr( "width" )
.removeAttr( "height" );
});
$(document).ready( function () {
$(".intrinsic-container").each( function() {
// Get the parent container's width
var width = $( this ).parent().width();
var height = $( this ).parent().height() - $("#navbar").height();
var ratio = height / width;
var ratioString = String(ratio*100)+"%";
$(this).css('padding-bottom',ratioString)
$( this ).width( width )
.height( width * $( this ).data( "ratio" ) );
});
});
// Resize the iframes when the window is resized
$( window ).resize( function () {
$(".intrinsic-container").each( function() {
// Get the parent container's width
var width = $( this ).parent().width();
var height = $( this ).parent().height() - $("header").height();
var ratio = height / width;
var ratioString = String(ratio*100)+"%";
$(this).css('padding-bottom',ratioString)
$( this ).width( width )
.height( width * $( this ).data( "ratio" ) );
});
// Resize to fix all iframes on page load.
}).resize();
</script>
I'm guessing this is probably a CSS issue, where I have to add some webkit stuff to make sure the content inside the iframe loads responsively. Any thoughts on how I can fix this?
Can you please take a look at this demo and let me know how I can separate the .clickme box from the .slidecontent? I need to change the Height of the .slidecontentfor example toheight:300px;` but this also change the grey shadow to 300px
What I need to have is having the .slidecontent with height of 300 and looks like the third (green arrow)
$(function () {
$("#clickme").toggle(function () {
$(this).parent().animate({left:'0px'}, {queue: false, duration: 500});
}, function () {
$(this).parent().animate({left:'-280px'}, {queue: false, duration: 500});
});
});
#slideout {
background: #666;
position: absolute;
width: 300px;
height: 300px;
top: 45%;
left:-280px;
}
#clickme {
float: right;
height: 20px;
width: 20px;
background: #ff0000;
}
#slidecontent {
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideout">
<div id="slidecontent">
Yar, there be dragonns herre!
</div>
<div id="clickme">
>
</div>
</div>
I am not 100% sure I understand what you are trying to do but your jQuery code refers to the parent of clickme which is slideout, not slidecontent and it is probable that this is causing the undesired effect. Is there a reason you are not referencing slidecontent directly?
I'm not very experienced in cross-browser issues, but I'm having this issue:
Scenerio : Let say i have div of width:800px, in that div i have 2 buttons ( left-araow--right-arrow ), onclick on any of the button I change image position in the div ( image move right or left,but stays in outer div )
Problem : When I re-size or reduce screen resolution then my CSS gets change; the image goes out of the div, and also the position of my buttons get change as well.
Any idea or solutions? Thanks.
EDIT : It is working fine in Firefox and in Opera, but not working in Google Chrome and IE.
Below is the html:
<div class="hand">
<div id="handinside"></div>
</div>
<div id="left" class="button"> left </div>
<div class="flip"></div>
<div id="right" class="button">right</div>
</div>
below is the CSS
.gameNavigation {
width: 220px;
margin: 0px auto 0px;
}
.button {
margin: 0 0 0 5px;
cursor: pointer;
width: 59px;
height: 29px;
float: left;
text-align: center;
background-color:red;
color: white;
}
.hand {
position:relative;
background-color:transparent;
left:0px;
width:140px;
height:210px;
}
Below is the jquery
$(".button").click(function() {
var $button = $(this);
var oldValue = $("#counter").val();
if ($button.text() == "right" ) {
//move right if the value is no more than 4
if(parseInt(oldValue) < 3){
var newVal = parseInt(oldValue) + 1;
$(".hand").animate({
"left": "+=222px"
}, "slow");
$(".coin").animate({
"left": "+=222px"
}, "slow");
//$(".block").stop();
}
}
else {
// move left and don't allow the value below zero
var test = 'test'
if (oldValue >= 1) {
var newVal = parseInt(oldValue) - 1;
}
if(parseInt(newVal) >= -1){
$(".hand").animate({
"left": "-=222px",
easing :'swing'
}, "slow");
$(".coin").animate({
"left": "-=222px",
easing : 'swing'
}, "slow");
}
}
$("#counter").val(newVal);
});
position your container div with relative positioning and then position your arrows with absolute positioning