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);
Related
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.
The full JavaScript error is:
Timestamp: 6/4/2015 8:52:37 AM
Error: Error: prototype of 'thumbnavigator' not defined.
Source File: http://webanautics.com/invoice/slider-master/js/jssor.js
Line: 69
I have read the other answers to the same question, but the answers don't work for my particular code.
I'm using the tabs-slider example, enter link description here
My Slides Container looks like this:
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 29px; width: 900px; height: 600px; border: 1px solid gray; -webkit-filter: blur(0px); background-color: #fff; overflow: hidden;">
<div>
<div style="margin: 10px; overflow: hidden; color: #000;">
<?php $week = -1; include("includes/invoice-week-module.php"); ?>
</div>
<div u="thumb">Last Week</div>
</div>
<div>
<div style="margin: 10px; overflow: hidden; color: #000;">
<?php $week = 0; include("includes/invoice-week-module.php"); ?>
</div>
<div u="thumb">This Week</div>
</div>
<div>
<div style="margin: 10px; overflow: hidden; color: #000;">
<?php $week = 1; include("includes/invoice-week-module.php"); ?>
</div>
<div u="thumb">Next Week</div>
</div>
</div>
This is my thumbnavigator div block:
<div u="thumbnavigator" class="jssort12" style="left:0px; top: 0px;">
<!-- Thumbnail Item Skin Begin -->
<div u="slides" style="cursor: default; top: 0px; left: 0px; border-left: 1px solid gray;">
<div u="prototype" class="p">
<div class=w><div u="thumbnailtemplate" class="c"></div></div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!--#endregion ThumbnailNavigator Skin End -->
When this error happens, any other JavaScript afterwards doesn't work.
does anyone know how to use a single H1 tag effectively in a Jssor full width slider so that the tag also stretches and resizes with the slider when browser resizes?
Please just do it as what you can imagine. See following,
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px;
height: 500px; overflow: hidden;">
<div>
<img u="image" src="../img/1920/red.jpg" />
<h1>your content here</h1>
</div>
<div>
<img u="image" src="../img/1920/red.jpg" />
<h1>your content here</h1>
</div>
</div>
I'm struggling with how to click the 'Submit' button on an HTML form using code. I seem to be able to set the variables - Name, Email etc - using the HTTPSocket but when the socket 'Posts' it doesn't trigger the submit.
Any help will be gratefully received
Cheers,
Alan McTavish ...
RB 2008 r1 ... no plugins please.
Hi again,
The code I am using is the example given with the software - HTTP Example.rbp. It reads the website code and asks me to give the values for the input fields in the HTML. However, the form doesn't seem to be submitted.
The HTML on the server is as follows:
<!DOCTYPE html><!-- HTML5 -->
<html lang="en" dir="ltr">
<head>
<title>ActivationNoted - Infosoft</title>
<meta charset="utf-8" />
<!--[if IE]><meta http-equiv="ImageToolbar" content="False" /><![endif]-->
<meta name="author" content="Ian Shere" />
<meta name="generator" content="Incomedia WebSite X5 Professional 10.1.0.39 - www.websitex5.com" />
<meta name="viewport" content="width=774" />
<link rel="icon" href="favicon.png" type="image/png" />
<link rel="stylesheet" type="text/css" href="style/reset.css" media="screen,print" />
<link rel="stylesheet" type="text/css" href="style/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="screen,print" />
<link rel="stylesheet" type="text/css" href="style/template.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style/menu.css" media="screen" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="style/ie.css" media="screen" /><![endif]-->
<link rel="stylesheet" type="text/css" href="pcss/activationnoted.css" media="screen" />
<script type="text/javascript" src="res/jquery.js?39"></script>
<script type="text/javascript" src="res/x5engine.js?39"></script>
</head>
<body>
<div id="imHeaderBg"></div>
<div id="imFooterBg"></div>
<div id="imPage">
<div id="imHeader">
<h1 class="imHidden">ActivationNoted - Infosoft</h1>
</div>
<a class="imHidden" href="#imGoToCont" title="Skip the main menu">Go to content</a>
<a id="imGoToMenu"></a><p class="imHidden">Main menu:</p>
<div id="imMnMn" class="auto">
<ul class="auto">
<li id="imMnMnNode0">
<a href="index.html">
<span class="imMnMnFirstBg">
<span class="imMnMnTxt"><span class="imMnMnImg"></span>Home Page</span>
</span>
</a>
</li><li id="imMnMnNode11">
<a href="features-of-footware.html">
<span class="imMnMnFirstBg">
<span class="imMnMnTxt"><span class="imMnMnImg"></span>Features of footware</span>
</span>
</a>
</li><li id="imMnMnNode12">
<a href="download.html">
<span class="imMnMnFirstBg">
<span class="imMnMnTxt"><span class="imMnMnImg"></span>Download</span>
</span>
</a>
</li><li id="imMnMnNode14">
<a href="support.html">
<span class="imMnMnFirstBg">
<span class="imMnMnTxt"><span class="imMnMnImg"></span>Support</span>
</span>
</a>
</li><li id="imMnMnNode3">
<a href="contact-us.html">
<span class="imMnMnFirstBg">
<span class="imMnMnTxt"><span class="imMnMnImg"></span>Contact Us</span>
</span>
</a>
</li>
</ul>
</div>
<div id="imContentGraphics"></div>
<div id="imContent">
<a id="imGoToCont"></a>
<h2 id="imPgTitle">ActivationNoted</h2>
<div style="width: 754px; float: left;">
<div style="float: left; width: 377px;">
<div id="imCell_1" class="imGrid[0, 0]"><div id="imCellStyleGraphics_1"></div><div id="imCellStyle_1"><form id="imObjectForm_1" action="imemail/imEmailForm_160xo79k.php" method="post" enctype="multipart/form-data" style="width: 365px; margin: 0; padding: 0; text-align: left;">
<fieldset class="first">
<div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_1" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">Name</label><br /><input type="text" class="" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_1" name="imObjectForm_1_1" /></div>
<div class="imClear" style="height: 1px; line-height: 1px; width: 365px;"></div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_2" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">E-mail</label><br /><input type="text" class="valEmail" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_2" name="imObjectForm_1_2" /></div>
<div class="imClear" style="height: 1px; line-height: 1px; width: 365px;"></div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_3" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">Address</label><br /><input type="text" class="" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_3" name="imObjectForm_1_3" /></div>
<div class="imClear" style="height: 1px; line-height: 1px; width: 365px;"></div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_4" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">Address2</label><br /><input type="text" class="" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_4" name="imObjectForm_1_4" /></div>
<div class="imClear" style="height: 1px; line-height: 1px; width: 365px;"></div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_5" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">Address3</label><br /><input type="text" class="" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_5" name="imObjectForm_1_5" /></div>
<div class="imClear" style="height: 1px; line-height: 1px; width: 365px;"></div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_6" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">Address4</label><br /><input type="text" class="" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_6" name="imObjectForm_1_6" /></div>
<div class="imClear" style="height: 1px; line-height: 1px; width: 365px;"></div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_7" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">Activation Key issued</label><br /><input type="text" class="" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_7" name="imObjectForm_1_7" /></div>
</div>
</fieldset>
<fieldset>
<input type="text" id="imObjectForm_1_prot" name="imSpProt" />
</fieldset>
<div style="width: 365px; text-align: center;">
<input type="submit" value="Send" />
<input type="reset" value="Reset" />
</div>
</form>
<script>x5engine.boot.push('x5engine.imForm.initForm(\'#imObjectForm_1\', false, {type: \'tip\', showAll: true, classes: \'validator\', landingPage: \'index.html\', labelColor: \'#000000\', fieldColor: \'#000000\', selectedFieldColor: \'#000000\'})');</script>
</div></div>
</div>
<div style="float: left; width: 377px;">
<div style="height: 435px;"> </div>
</div>
</div>
<div style="width: 754px; float: left;">
<div style="height: 15px;"> </div>
</div>
<div id="imFooPad" style="height: 0px; float: left;"> </div><div id="imBtMn">Home Page | Features of footware | Download | Support | Contact Us | General Site Map</div>
<div class="imClear"></div>
</div>
<div id="imFooter">
<div onclick="x5engine.utils.location('copyright-notice.html'); return false;" style="position: absolute; top: 22px; left: 393px; width: 54px; height: 16px; cursor: pointer;"></div>
<div onclick="x5engine.utils.location('terms-and-conditions-of-use.html'); return false;" style="position: absolute; top: 22px; left: 468px; width: 113px; height: 16px; cursor: pointer;"></div>
<div onclick="x5engine.utils.location('privacy-policy.html'); return false;" style="position: absolute; top: 22px; left: 597px; width: 76px; height: 16px; cursor: pointer;"></div>
<div onclick="x5engine.utils.location('disclaimer.html'); return false;" style="position: absolute; top: 22px; left: 688px; width: 59px; height: 16px; cursor: pointer;"></div>
</div>
</div>
<span class="imHidden">Back to content | Back to main menu</span>
</body>
</html>
I emphasise that this is not my code.
I wonder if I need to get my friend to use a different setup on the website. Perhaps some PHP or whatever.
As always, any help gratefully received.
Alan ...
Sometimes the site you are sending post, do not accept "robots" doing this, like Facebook, for example.
Did you tried to send the post like this:
Dim sock As New HTTPSocket
Dim d As New Dictionary
dim r as string
d.Value("idA") = "xpto"
d.Value("idB") = "xzy"
d.Value("idC") = "abc"
sock.SetFormData(d)
r = sock.Post("imemail/imEmailForm_160xo79k.php", 30)
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>