If you take a look at my simple site, it works great in browser, but on an iphone the site loses the bottom ribbon in landscape orientation.
Why is it not correctly adjusting the height of the page when in landscape?
http://mtindustrialservicerequest.com/KenHolidayCard/holidayCardDemo/EmployeeCard2.html
HTML:
<!DOCTYPE html>
<html lang="en">
<HEAD>
<meta charset="utf-8">
</HEAD>
<BODY style="text-align: center; background-color:#e4e4e4; background-image:url(snowflakeBackground500x500.png); margin:0; padding:0;">
<div style="position: absolute; height: 100%; width: 100%; background-image:url(ribbon_Bottom2.png); background-repeat: repeat-y; background-position: center center;">
<div style="position: relative; width: 100%; height:325px; overflow: visible; top: 50%; margin-top: -170px; background-image:url(ribbon_Horizontal2.png); background-position: center center;">
<iframe width="650" height="325" src="http://www.youtube.com/embed/bFs89lAL7dE?&autoplay=1&rel=0&fs=0&theme=light&showinfo=0&controls=0&autohide=1&color=white" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</BODY>
</HTML>
It's not actually disappearing altogether. After rotating from portrait to landscape, I hit refresh. It was visible (well about 8 pixels of it).
I would add min-height:320px to your CSS for the vertical ribbon. 320 or another value you can work with.
I solved it by stacking three divs on top of each other -- top and bottom ribbon with video and horizontal ribbon in the middle. Top and bottom heights at 50% with bottom/top margins to compensate for the 325px video in the middle. See below.
<BODY style="text-align: center; background-color:#e4e4e4; background-image:url(snowflakeBackground500x500.png); margin:0; padding:0;">
<div id="div1" style="position: absolute; height: 100%; width: 100%;">
<div id="div2" style="position: relative; height: 50%; width: 100%; margin-bottom:-170px; background-image:url(ribbon_Bottom2.png); background-repeat: repeat-y; background-position: center center;"></div>
<div style="position: relative; width: 100%; height:325px; overflow: visible; background-image:url(ribbon_Horizontal2.png); background-position: center center;">
<iframe class="shadow" width="650" height="325" src="http://www.youtube.com/embed/bFs89lAL7dE?&autoplay=1&rel=0&fs=0&theme=light&showinfo=0&controls=0&autohide=1&color=white" frameborder="0" allowfullscreen></iframe>
</div>
<div id="div3" style="position: relative; height: 50%; width: 100%; margin-bottom: 170px; background-image:url(ribbon_Bottom2.png); background-repeat: repeat-y; background-position: center center;"></div>
</div>
</BODY>
</HTML>
Related
I am trying to get the hero and footer sorta fixed, so when the page is scrolled, the content will roll over the (unmoving) hero and when you get to the end of the contents, the also unmoving footer will be revealed.
I have messed with data-scroll-sticky and data-scroll-target with no success. Can anyone shed a light?
Any help is appreciated!
Codepen
<section scrollContainer>
<div scrollSection class="panel hero">hero</div>
<div scrollSection class="panel cont1">content</div>
<div scrollSection class="panel cont2">more content</div>
<div scrollSection class="panel cont3">even more content</div>
<div scrollSection class="panel footer">footer</div>
</section>
This Way You Can Use Sticky Footer
<div data-scroll-section class="sticky-footer">
<div class="fixed-target" id="fixed-target"></div>
<div class="fixed-element" data-scroll data-scroll-sticky data-scroll-target="#fixed-target">
<div class="container">....</div>
</div>
</div>
CSS
.sticky-footer {
position: relative;
overflow: hidden;
height: 100vh;
}
.fixed-target {
bottom: -100vh;
}
.fixed-element,
.fixed-target {
position: absolute;
top: -100vh;
right: 0;
left: 0;
}
.fixed-element {
height: 100%;
width: 100%;
background: url(../img/black2.jpg);
background-color: black;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
I'm using itext7.pdfHtml adds-on to convert my html template to PDF doc and everything is ok and result produce without any error but my is that there were a bunch of CSS properties that not recognizable with pdfhtml dll.
some of these properties are show at this snippet:
.day-meta-wrapper {
font-size: 15px;
line-height: normal;
height: 24px;
border-radius: 12px;
color: #ffffff;
background: #00000033;----> not support
padding: 0 6px;
display: flex;----> not support
align-items: center;----> not support
justify-content: center;----> not support
}
this my html file result:
as you can see in browser view there's no problem and all of the properties work properly
but this is my PDF result:
as shown in the picture PDF doc loosed CSS properties
h1 {
background-color: red;
}
.day-meta {
margin: 5px 0;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
}
.day-meta-wrapper {
font-size: 15px;
line-height: normal;
height: 24px;
border-radius: 12px;
color: #ffffff;
background-color: #00000033;
padding: 0 6px;
display: flex;
align-items: center;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/DayMeta.css">
</head>
<body style="background: #979797;">
<h1>Hello IText7 PDFHtml</h1>
<div class="day-meta">
<div class="day-meta-wrapper">
<div>December 11, 2018</div>
</div>
</div>
</body>
</html>
The task is to insert a simple modal popover as an alert for clients to be notified of a temporary relocation. On page load, a transparent background appears but the image nor the close button appears.
DATA
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<script src="../js/bootstrap-modal.js"></script>
<script src="../js/popover.js"></script>
<script src="../js/jquery-1.12.4.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalContent {
width: 750px;
z-index: 10000;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: none;
background: -moz-linear-gradient;
background: -webkit-linear-gradient;
background: -o-linear-gradient;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
</style>
CODE
<div id="myModal" class="modal fade in">
<div class="modalDialog">
<div class="modalContent">
X
<img src="image.jpg" width="750px"/>
</div>
</div>
</div>
This seems like a fairly straightforward task but I cannot seem to resolve this issue by multiple attempts. Your help is greatly appreciated.
I have no idea about popover plugin, but i have created fiddle for this using bootstrap plugin, when the page gets opened modal will be appear with some content (You can replace it by your content).
Sample HTML:
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
And JS
$(document).ready(function(){
$("#myModal").modal('show');
});
JSFIDDLE
Note: I did not included popover.js.
If I put the div where I draw the graph the "style = display: none" attribute, this resizes my chart in half.
<div id='chart_div_inmediata' style='width: 900px; height: 300px;display:none'></div>
Result :
<div id="chart_div_inmediata" class="google-visualization-atl container" style="width: 900px; height: 300px; display: none;">
<div class="" style="position: relative; width: 400px; height: 200px;">
</div>
How do I fix this? Thank!
I would like to add a video inside my current image slider. I don't want only video to play but a mix of video and images. I've been able to get the video to play but I need to add the pause, play and stop controllers as well as make that slide last longer than the other slides. Can anyone please help me?
http://www.piratesdinneradventureca.com/
<!-- Insert Slideshow -->
<div id="slideshowwrapper">
<div id="slider1_container" style="left: 0px; top: 5px; width: 687px; height: 324px; overflow: visible; position: relative;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 687px; height: 324px; overflow: hidden;">
<div><a u="image" href="http://www.piratesdinneradventureca.com/special-offers/"><img src="<?php echo get_template_directory_uri(); ?>/images/Halloween-show.png" /></a></div>
<div><a u="image" href="http://www.piratesdinneradventureca.com/special-offers/"><img src="<?php echo get_template_directory_uri(); ?>/images/After-Summer.png" /></a></div>
<div><video style="width="687px" height="324px" autoplay>
<source src="<?php echo get_template_directory_uri(); ?>/images/PiratesSeaDragon_converted.mp4" type="video/mp4" />
<source src="<?php echo get_template_directory_uri(); ?>/images/PiratesSeaDragon.ogv" type="video/ogg" pHideControls="0" />
</video></div>
Jssor Slider supports youtube video.
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/jssor.slider.mini.js"></script>
<script type="text/javascript" src="../js/jssor.player.ytiframe.min.js"></script>
You can put a video player in any slide in following format:
<div>
<div u="player" style="position: relative; top: 0px; left: 0px; width: 640px; height: 390px; overflow: hidden;">
<!-- iframe in ebay page is not allowed, youtube iframe video is not supported for ebay listing -->
<iframe pHandler="ytiframe" pHideControls="0" width="640" height="390" style="z-index: 0;" src="http://www.youtube.com/embed/H7jtC8vjXw8?enablejsapi=1&version=3&playerapiid=ytplayer&fs=1&wmode=transparent" frameborder="0" scrolling="no"></iframe>
<!-- play cover begin (optional, can remove play cover) -->
<div u="cover" class="videoCover" style="position: absolute; top: 0px; left: 0px; background-color: #000; background-image: url(../img/play.png); background-position: center center; background-repeat: no-repeat; filter: alpha(opacity=40); opacity: .4; cursor: pointer; display: none; z-index: 1;"></div>
<!-- play cover end -->
<!-- close button begin (optional, can remove close button) -->
<style>
.closeButton { background-image: url(../img/close.png); }
.closeButton:hover { background-position: -30px 0px; }
</style>
<div u="close" class="closeButton" style="position: absolute; top: 0px; right: 1px; width: 30px; height: 30px; background-color: #000; cursor: pointer; display: none; z-index: 2;"></div>
<!-- close button end -->
</div>
</div>
and add
//fetch and initialize youtube players
$JssorPlayer$.$FetchPlayers(document.body);