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)
Related
I built out a review slider to display various reviews from customers across all of our marketplaces, it works great on codepen, but not so much on the website. Im sure im missing something simple, but can't figure it out.
Platform: Magento 2.3.5 P2
How the slider appears on the website
https://codepen.io/hqqh/pen/VwpzGYV
.slider {
background: linear-gradient(90deg, rgba(235, 235, 235, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(235, 235, 235, 1) 100%);
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
height: 250px;
margin: auto;
overflow: hidden;
position: relative;
width: 1280px;
padding-top: 30px;
padding-bottom: 10px;
border-radius: 5px;
}
.slider::before,
.slider::after {
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%);
content: "";
height: 290px;
position: absolute;
width: 200px;
z-index: 2;
}
.slider::before {
left: 0;
top: 0;
}
.slider::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}
#keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-250px * 7))
}
}
.slide-track {
animation: scroll 60s linear infinite;
display: flex;
width: calc(250px * 14);
}
.slide {
height: 214px;
width: 350px;
}
.review-card {
background: white;
margin: 10px;
height: 195px;
padding: 7px;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
border-radius: 10px;
}
.review-card-header {
height: 80px;
}
.review-card p {
font-family: 'Roboto Condensed', sans-serif;
}
.ebay-logo,
.az-logo {
position: relative;
top: -40px;
left: -40px;
width: 150px;
height: 150px;
}
.review-content {
padding: 5px;
height: 60px;
position: relative;
z-index: 2;
margin-bottom: 0px;
bottom: 18px;
}
.review-content::before,
.review-content::after {
font-family: FontAwesome;
padding: 5px;
color: #d3d3d3;
margin: 5px;
}
.review-content::before {
content: "\f10d";
}
.review-content::after {
content: "\f10e";
}
<link rel="stylesheet" type="text/css" media="all"
href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400" />
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div class="col-lg-12">
<div class="container">
<div class="row justify-content-center">
<h2 style="text-align: center; font-size: 42px; text-transform: uppercase; font-family: oswald;">Over
1,000,000 Happy Customers Served</h2>
<h4 style="text-align: center; font-family: Roboto;">These are just a handful of the reviews we have
received recently across all of our marketplaces </h4>
<div class="slider">
<div class="slide-track">
<div class="slide ">
<div class="review-card">
<div class="col-lg-3 review-card-header">
<div class="container">
<div class="row">
<img class="ebay-logo"
src="https://integrationmaverick.net/offsite-images/eb-logo.png" border="0">
</div>
</div>
</div>
<div class="col-lg-3 review-card-body">
<div class="container">
<div class="row">
<p class="review-content">Arrived quicker than expected, was very very well
packaged, paint was excellent. Would highly recommend. Thank You</p>
</div>
<div class="row">
<p style="float: right; margin-top: 0px; color: #c3c3c3">-eBay Customer 2021</p>
</div>
</div>
</div>
</div>
</div>
<div class="slide ">
<div class="review-card">
<div class="col-lg-3 review-card-header">
<div class="container">
<div class="row">
<img class="az-logo"
src="https://integrationmaverick.net/offsite-images/az-logo.png" border="0">
</div>
</div>
</div>
<div class="col-lg-3 review-card-body">
<div class="container">
<div class="row">
<p class="review-content">Couldn’t be happier with the new front bumper cover!!! MBI auto got the paint matched perfectly, and the fit was FANTASTIC! We are thrilled! Last picture is the original bumper cover after my wreck</p>
</div>
<div class="row">
<p style="float: right; margin-top: 0px; color: #c3c3c3">-Amazon Customer 2021</p>
</div>
</div>
</div>
</div>
</div>
<div class="slide ">
<div class="review-card">
<div class="col-lg-3 review-card-header">
<div class="container">
<div class="row">
<img class="az-logo"
src="https://integrationmaverick.net/offsite-images/google-logo.png" border="0">
</div>
</div>
</div>
<div class="col-lg-3 review-card-body">
<div class="container">
<div class="row">
<p class="review-content">I received the bumper I ordered sooner than expected and was pleasantly surprised. It fit just right and paint matched perfectly. I would definitely recommend trying them out for a replacement bumper.</p>
</div>
<div class="row">
<p style="float: right; margin-top: 0px; color: #c3c3c3">-Google Review 2021</p>
</div>
</div>
</div>
</div>
</div>
<div class="slide ">
<div class="review-card">
<div class="col-lg-3 review-card-header">
<div class="container">
<div class="row">
<img class="az-logo"
src="https://integrationmaverick.net/offsite-images/eb-logo.png" border="0">
</div>
</div>
</div>
<div class="col-lg-3 review-card-body">
<div class="container">
<div class="row">
<p class="review-content">Arrived quicker than expected, was very very well
packaged, paint was excellent. Would highly recommend. Thank You</p>
</div>
<div class="row">
<p style="float: right; margin-top: 0px; color: #c3c3c3">-eBay Customer 2021</p>
</div>
</div>
</div>
</div>
</div>
<div class="slide ">
<div class="review-card">
<div class="col-lg-3 review-card-header">
<div class="container">
<div class="row">
<img class="az-logo"
src="https://integrationmaverick.net/offsite-images/az-logo.png" border="0">
</div>
</div>
</div>
<div class="col-lg-3 review-card-body">
<div class="container">
<div class="row">
<p class="review-content">Arrived quicker than expected, was very very well
packaged, paint was excellent. Would highly recommend. Thank You</p>
</div>
<div class="row">
<p style="float: right; margin-top: 0px; color: #c3c3c3">-Amazon Customer 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="container">
<div class="row" style="text-align:center;">
<p>Click Here To View More Customer Reviews</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
it's work perfect when slides first index to last but when auto loop go to last index to first index click property is not working.
<ion-slides *ngIf="slides != null" autoplay="3000" loop="true" speed="800" >
<ion-slide *ngFor="let slide of slides" >
<img [src]="slide.BannerImage">
<div class="con-box">
<h2>{{slide.BannerName}}</h2>
<br/>
<button ion-button color="btn" (click)="fnGotoNewArrivalList(slide.CollectionID,slide.BannerName)">Order Now</button>
</div>
</ion-slide>
</ion-slides>
#jatin devani please try this code..
replace ion-slides in place use swiper
html
<!-- Swiper -->
<swiper class="swiper-container" [config]="config" #usefulSwiper>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</swiper>
index.html
<script src="assets/js/swiper.jquery.min.js"></script>
<script src="assets/js/swiper.min.js"></script>
.ts file
config:any;
this.config = {
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false,
initialSlide : 0,
slidesPerView: 1,
// paginationType: 'progress',
// pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
};
css file
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
I am aware Kentico has a form-builder built in as well as a custom layout feature. Is it possible to import a form with its own particular set of css rules?
For example, I have the following form: Form
body
{
margin-left: 0;
margin-top: 0;
background-color: #F5F5F5;
}
.clearFix
{
clear: both;
}
p
{
font-size: 13px;
margin-top: 10px;
margin-bottom: 5px;
margin-left: 35px;
margin-top: 15px;
color: #696969;
float: left;
}
#lastName
{
margin-left: 300px;
}
.city
{
margin-left: 318px;
}
#province
{
margin-left: 294px;
}
#oID
{
margin-left: 294px;
}
.postalCode
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#schoolName
{
margin-left: 285px;
}
#courseFee
{
margin-left: 268px;
}
#courseEndDate
{
margin-left: 258px;
}
.netIncome
{
margin-left: 255px;
}
.lastNameDependent
{
float: left;
margin-left: 200px;
}
.ageDependent
{
float: left;
margin-left: 200px;
}
#ontarioTeachingCert
{
float: left;
margin-top: 10px;
}
#certificateOfQualification
{
float: left;
margin-top: 10px;
}
#letterOfPermission
{
float: left;
margin-top: 10px;
}
#other
{
float: left;
margin-top: 10px;
}
#previousBursaryYears
{
margin-left: 81px;
}
.oectaPositionReference
{
margin-left: 332px;
}
#daytimeTele
{
margin-left: 295px;
}
#teachingYears
{
margin-left: 241px;
}
#membershipStatus
{
margin-left: 279px;
}
.pTitles
{
font-size: 18px;
margin-top: 15px;
margin-bottom: 8px;
margin-left: 35px;
color: #696969;
font-weight: bold;
}
.thinLine
{
height: 0.5px;
width: 671px;
content: "";
background-color: #cccccc;
margin-left: 35px;
}
#lowerThinLine
{
margin-top: 15px;
height: 1px;
}
#firstNameBox
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#lastNameBox
{
width: 300px;
height: 25px;
margin-left: 60px;
}
.addressBox
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#oectaIdBox
{
width: 300px;
height: 25px;
margin-left: 64px;
}
#otcTextBox
{
width: 300px;
height: 25px;
margin-left: 60px;
margin-bottom: 10px;
}
#coqTextBox
{
width: 300px;
height: 25px;
margin-left: 71px;
margin-bottom: 10px;
}
#lopTextBox
{
width: 300px;
height: 25px;
margin-left: 111px;
margin-bottom: 10px;
}
#courseNameBox
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#courseCostBox
{
width: 300px;
height: 25px;
margin-left: 60px;
}
#teachingExperienceBox
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#underGradBox
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#otherTextBox
{
width: 300px;
height: 25px;
margin-left: 201px;
margin-bottom: 10px;
}
#grossSalaryBox
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#netSalaryBox
{
width: 300px;
height: 25px;
margin-left: 60px;
}
#distanceToCourseBox
{
width: 300px;
height: 25px;
margin-left: 35px;
}
.firstNameDependentBox
{
width: 150px;
height: 25px;
margin-left: 35px;
float: left;
}
.lastNameDependentBox
{
width: 150px;
height: 25px;
margin-left: 114px;
float: left;
}
.ageDependentBox
{
width: 70px;
height: 25px;
margin-left: 111px;
}
.firstNameReferenceBox
{
width: 300px;
height: 25px;
margin-left: 35px;
}
.OECTAPositionReferenceBox
{
width: 300px;
height: 25px;
margin-left: 60px;
}
#memberstatusBox
{
width: 300px;
height: 25px;
margin-left: 60px;
}
#startDate
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#endDate
{
width: 300px;
height: 25px;
margin-left: 60px;
}
.bigTextArea
{
width: 667px;
height: 60px;
margin-left: 35px;
}
#dependentComments
{
height: 90px;
}
#purposeOfStudy
{
height: 90px;
}
.citySelect
{
width: 300px;
height: 25px;
margin-left: 60px;
}
#provinceSelect
{
width: 300px;
height: 25px;
margin-left: 60px;
}
.UnitSelect
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#schoolBoardSelect
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#schoolNmaeSelect
{
width: 300px;
height: 25px;
margin-left: 63px;
}
#bursaryYears
{
width: 300px;
height: 25px;
margin-left: 60px;
}
#previousBursaries
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#otcCheckBox
{
margin-left: 35px;
margin-top: 10px;
float: left;
}
#coqCheckBox
{
margin-left: 35px;
margin-top: 10px;
float: left;
}
#lopCheckBox
{
margin-left: 35px;
margin-top: 10px;
float: left;
}
#otherCheckBox
{
margin-left: 35px;
margin-top: 10px;
float: left;
}
#finalConformation
{
float: left;
margin-left: 415px;
margin-top: -18px;
}
.daytimeTelephoneBox
{
width: 300px;
height: 25px;
margin-left: 60px;
}
#email
{
width: 300px;
height: 25px;
margin-left: 35px;
}
#formStyle10
{
display: block;
height: 100%;
width: 100%;
}
input[type="radio"]
{
display: none;
}
.tabs
{
float: none;
width: 800px;
padding: 0;
position: relative;
margin: 75px 75px;
list-style: none;
}
.tabs li
{
float: left;
margin-right: 2px;
}
.tabs label
{
display: block;
position: relative;
background: #E6E6E6;
height: 60px;
width: 115px;
margin-right: 3px;
padding: 0px 15px 1px 15px;
line-height: 60px;
font-family: 'Lucida Sans';
font-size: 15px;
text-align: center;
color: #696969;
cursor: pointer;
z-index: 1;
box-shadow: 0.5px -2px 2px rgba(0,0,0,0.1), 0.5px -1px 2px rgba(0,0,0,0.1);
}
.tabs label:hover
{
background: #ffffff;
}
.tab-content
{
height: 650px;
width: 745px;
position: absolute;
display:none;
z-index: 2;
left: 0;
top: 61px;
background-color: #F5F5F5;
font-size: 16px;
font-family: 'Lucida Sans';
font-weight: normal;
box-sizing:border-box;
box-shadow: 1px 2px 2px rgba(0,0,0,0.1), -1px -2px 2px rgba(0,0,0,0.1);
}
[id^=tab]:checked + label
{
background: #F5F5F5;
z-index: 3;
}
[id^=tab]:checked~[id^=tab-content]
{
display:block;
}
.tabs li:first-child
{
box-shadow: 1px 2px 2px rgba(0,0,0,0.1), -1px -2px 2px rgba(0,0,0,0.1);
}
#submitButton
{
height: 30px;
width: 150px;
float: right;
margin-right: 35px;
margin-top: 15px;
}
HTML:
<form id="formStyle10" runat="server">
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab-1" checked />
<label for="tab-1">Information</label>
<div id="tab-content-1" class="tab-content">
<p class="pTitles">Personal Information</p>
<div class="clearFix"></div>
<div class="thinLine"></div>
<div class="clearFix"></div>
<p>First Name</p>
<p id="lastName">Last Name</p>
<div class="clearFix"></div>
<input type="text" name="firstName" id="firstNameBox" />
<input type="text" name="lastName" id="lastNameBox" />
<div class="clearFix"></div>
<p>Address</p>
<p class="city">City</p>
<div class="clearFix"></div>
<input type="text" name="addressBox" class="addressBox" />
<select class="citySelect">
<option>Select</option>
<option>City 2</option>
<option>City 3</option>
<option>City 4</option>
</select>
<div class="clearFix"></div>
<p>Postal Code</p>
<p id="province">Province</p>
<div class="clearFix"></div>
<input type="text" name="postalCode" class="postalCode" />
<select id="provinceSelect">
<option>Select</option>
<option>Prov 1</option>
<option>Prov 2</option>
<option>Prov 3</option>
</select>
<div class="clearFix"></div>
<p>OECTA Unit</p>
<p id="oID">OECTA ID</p>
<div class="clearFix"></div>
<select class="UnitSelect">
<option>Select</option>
<option>Prov 1</option>
<option>Prov 2</option>
<option>Prov 3</option>
</select>
<input type="text" name="oectaIdBox" id="oectaIdBox" />
<div class="clearFix"></div>
<p>School Board</p>
<p id="schoolName">School Name</p>
<div class="clearFix"></div>
<select id="schoolBoardSelect">
<option>Select</option>
<option>Board 1</option>
<option>Board 2</option>
<option>Board 3</option>
</select>
<select id="schoolNmaeSelect">
<option>Select</option>
<option>School 1</option>
<option>School 2</option>
<option>School 3</option>
</select>
<div class="clearFix"></div>
<p>Email Address</p>
<p id="membershipStatus">Membership Status</p>
<div class="clearFix"></div>
<input type="email" name="email" id="email" />
<input type="text" name="memberStatusBox" id="memberstatusBox" />
<div class="clearFix"></div>
<p>Use this section to briefly describe the purpose of your study</p>
<div class="clearFix"></div>
<textarea class="bigTextArea" id="purposeOfStudy"></textarea>
</div>
</li>
<!-- -->
<li>
<input type="radio" name="tabs" id="tab-2" />
<label for="tab-2">Qualifications</label>
<div id="tab-content-2" class="tab-content">
<p class="pTitles">Teaching Qualifications</p>
<div class="clearFix"></div>
<div class="thinLine"></div>
<div class="clearFix"></div>
<p>Professional and Academic Information<br/ > Involvement in OECTA (i.e. Committees, AGM Delegate, Unit Meetings, etc.)</p> <div class="clearFix"></div>
<textarea class="bigTextArea"></textarea>
<div class="clearFix"></div>
<p>Qualifications (Check all that apply)</p>
<div class="clearFix"></div>
<input type="checkbox" name="otcCheckBox" id="otcCheckBox" />
<p id="ontarioTeachingCert">Ontario Teaching Certificate</p>
<input type="text" name="otcTextBox" id="otcTextBox" placeholder="Year of Issue" />
<div class="clearFix"></div>
<input type="checkbox" name="coqCheckBox" id="coqCheckBox" />
<p id="certificateOfQualification">Certificate of Qualification</p>
<input type="text" name="coqTextBox" id="coqTextBox" placeholder="Year of Issue" />
<div class="clearFix"></div>
<input type="checkbox" name="lopCheckBox" id="lopCheckBox" />
<p id="letterOfPermission">Letter of Permission</p>
<input type="text" name="lopTextBox" id="lopTextBox" placeholder="Year of Issue" />
<div class="clearFix"></div>
<input type="checkbox" name="otherCheckBox" id="otherCheckBox" />
<p id="other">Other</p>
<input type="text" name="lopTextBox" id="otherTextBox" placeholder="Please Specify" />
<div class="clearFix"></div>
<p>QECO Category</p>
<p id="teachingYears">Years of Teaching Experience</p>
<div class="clearFix"></div>
<select class="UnitSelect" id="quecoCategory">
<option>Select</option>
<option>Category A</option>
<option>Category A1</option>
<option>Category A2 </option>
<option>Category A3</option>
<option>Category A4</option>
</select>
<input type="text" name="teachingExperienceBox" id="teachingExperienceBox" />
<div class="clearFix"></div>
<p>If you have obtained any degrees/diplomas, please list them here</p>
<textarea class="bigTextArea"></textarea>
<p>If non-degree, how many undergraduate courses have you compelted?</p>
<div class="clearFix"></div>
<input type="text" name="underGradBox" id="underGradBox" />
<div class="clearFix"></div>
</div>
</li>
<!-- -->
<li>
<input type="radio" name="tabs" id="tab-3" />
<label for="tab-3">Expenses</label>
<div id="tab-content-3" class="tab-content">
<p class="pTitles">Expenses and Financial Information</p>
<div class="clearFix"></div>
<div class="thinLine"></div>
<div class="clearFix"></div>
<p>Name of Course</p>
<p id="courseFee">Course Fee</p>
<div class="clearFix"></div>
<input type="text" name="courseNameBox" id="courseNameBox" />
<input type="text" name="courseCostBox" id="courseCostBox" />
<div class="clearFix"></div>
<p>Course Start Date</p>
<p id="courseEndDate">Course End Date</p>
<div class="clearFix"></div>
<input type="date" name="startDate" id="startDate" />
<input type="date" name="endDate" id="endDate" />
<div class="clearFix"></div>
<p>Total Gross Salary</p>
<p class="netIncome">Total Net Income</p>
<div class="clearFix"></div>
<input type="text" name="grossSalaryBox" id="grossSalaryBox" />
<input type="text" name="netSalaryBox" id="netSalaryBox" />
<div class="clearFix"></div>
<p>Other Income Sources</p>
<div class="clearFix"></div>
<textarea class="bigTextArea" placeholder="Please list the all other income sources, including other bursaries and other forms of financial assistance along with the amount for each."></textarea> <div class="clearFix"></div>
<p>Have you received an OECTA Bursary Before?</p>
<p id="previousBursaryYears">Year(s) If applicable</p>
<div class="clearFix"></div>
<select id="previousBursaries">
<option>Select</option>
<option>Yes</option>
<option>No</option>
</select>
<input type="text" name="bursaryYears" id="bursaryYears" />
<div class="clearFix"></div>
<p>Distance to Travel For Course</p>
<div class="clearFix"></div>
<input type="text" name="distanceToCourseBox" id="distanceToCourseBox" />
<div class="clearFix"></div>
<p>Please list all expenses this bursary will be used for</p>
<div class="clearFix"></div>
<textarea class="bigTextArea"></textarea>
</div>
</li>
<!-- -->
<li>
<input type="radio" name="tabs" id="tab-4" />
<label for="tab-4">Dependents</label>
<div id="tab-content-4" class="tab-content">
<p class="pTitles">Dependents</p>
<div class="clearFix"></div>
<div class="thinLine"></div>
<div class="clearFix"></div>
<p>Please list any and all dependents</p>
<div class="clearFix"></div>
<p class="firstNameDependent">First Name</p>
<p class="lastNameDependent">Last Name</p>
<p class="ageDependent">Age</p>
<div class="clearFix"></div>
<input type="text" class="firstNameDependentBox" />
<input type="text" class="lastNameDependentBox" />
<input type="text" class="ageDependentBox" />
<div class="clearFix"></div>
<div class="clearFix"></div>
<p class="firstNameDependent">First Name</p>
<p class="lastNameDependent">Last Name</p>
<p class="ageDependent">Age</p>
<div class="clearFix"></div>
<input type="text" class="firstNameDependentBox" />
<input type="text" class="lastNameDependentBox" />
<input type="text" class="ageDependentBox" />
<div class="clearFix"></div>
<div class="clearFix"></div>
<p class="firstNameDependent">First Name</p>
<p class="lastNameDependent">Last Name</p>
<p class="ageDependent">Age</p>
<div class="clearFix"></div>
<input type="text" class="firstNameDependentBox" />
<input type="text" class="lastNameDependentBox" />
<input type="text" class="ageDependentBox" />
<div class="clearFix"></div>
<div class="clearFix"></div>
<p class="firstNameDependent">First Name</p>
<p class="lastNameDependent">Last Name</p>
<p class="ageDependent">Age</p>
<div class="clearFix"></div>
<input type="text" class="firstNameDependentBox" />
<input type="text" class="lastNameDependentBox" />
<input type="text" class="ageDependentBox" />
<div class="clearFix"></div>
<div class="clearFix"></div>
<p class="firstNameDependent">First Name</p>
<p class="lastNameDependent">Last Name</p>
<p class="ageDependent">Age</p>
<div class="clearFix"></div>
<input type="text" class="firstNameDependentBox" />
<input type="text" class="lastNameDependentBox" />
<input type="text" class="ageDependentBox" />
<div class="clearFix"></div>
<div class="clearFix"></div>
<p class="firstNameDependent">First Name</p>
<p class="lastNameDependent">Last Name</p>
<p class="ageDependent">Age</p>
<div class="clearFix"></div>
<p>Comments</p>
<div class="clearFix"></div>
<textarea class="bigTextArea" id="dependentComments" placeholder="Please list any other information you believe may assist in your application"></textarea>
<div class="clearFix"></div>
</div>
</li>
<!-- -->
<li>
<input type="radio" name="tabs" id="tab-5" />
<label for="tab-5">References</label>
<div id="tab-content-5" class="tab-content">
<p class="pTitles">References</p>
<div class="clearFix"></div>
<p>Please include at least TWO references who can speak to your OECTA involvement</p></p>
<div class="clearFix"></div>
<div class="thinLine"></div>
<div class="clearFix"></div>
<p>Name</p>
<p class="oectaPositionReference">OECTA Position Held</p>
<div class="clearFix"></div>
<input type="text" name="firstNameReferenceBox" class="firstNameReferenceBox" />
<input type="text" name="OECTAPositionReferenceBox" class="OECTAPositionReferenceBox" />
<div class="clearFix"></div>
<p>Address</p>
<p class="city">City</p>
<div class="clearFix"></div>
<input type="text" name="addressBox" class="addressBox" />
<select class="citySelect">
<option>Select</option>
<option>City 1</option>
<option>City 2</option>
<option>City 3</option>
</select>
<div class="clearFix"></div>
<p>Postal Code</p>
<p id="daytimeTele">Daytime Telephone</p>
<div class="clearFix"></div>
<input type="text" name="postalCode" class="postalCode" />
<input type="tel" name="daytimeTelephone" class="daytimeTelephoneBox" />
<div class="clearFix"></div>
<br />
<p>Name</p>
<p class="oectaPositionReference">OECTA Position Held</p>
<div class="clearFix"></div>
<input type="text" name="firstNameReferenceBox" class="firstNameReferenceBox" />
<input type="text" name="OECTAPositionReferenceBox" class="OECTAPositionReferenceBox" />
<div class="clearFix"></div>
<p>Address</p>
<p class="city">City</p>
<div class="clearFix"></div>
<input type="text" name="addressBox" class="addressBox" />
<select class="citySelect">
<option>Select</option>
<option>City 1</option>
<option>City 2</option>
<option>City 3</option>
</select>
<div class="clearFix"></div>
<p>Postal Code</p>
<p id="daytimeTele">Daytime Telephone</p>
<div class="clearFix"></div>
<input type="text" name="postalCode" class="postalCode" />
<input type="tel" name="daytimeTelephone" class="daytimeTelephoneBox" />
<div class="clearFix"></div>
<div class="thinLine" id="lowerThinLine"></div>
<p>By selecting the following you are confirming that you have included current copies of both your Ontario Teaching Certificate of Qualifications and Registration and a copy of the course description, including cost, date of course commencement and the name of the institution.</p>
<input type="checkbox" name="finalConformation" id="finalConformation" />
<div class="clearFix"></div>
<input type="submit" name="submitButton" id="submitButton" value="Submit" />
</div>
</li>
</ul>
</form>
Is there a way to import this form and its specifications into a pre-existing kentico site?
Your best possible bet, which we often do a lot will be to do following:-
Create you form control fields using Kentico fields. Basically mapping your fields in kentico.
Use custom layout to generate basic structure of your form.
Go to source of your custom layout and add and wrapper DIVS, Classes, and IDs around your key elements.
This approach will solve most of the use cases, unless you have a complex form functionality.
Cheers,
Chetan
You can get partially there, you can use a custom layout to get any wrapping divs around your items, and you can add your own class/style to the inputs and labels through the fields tab in the form. One thing you won't be able to do is to include the form tag as in your html. ASP.Net only allows one form in the page markup, unless it is hosted in an iframe or something other than being in the part markup. You could combine the styling elements and custom layout with some jquery to get very close to the same markup.
There are other options, but the ones mentioned above could at least get you started.
Technically speaking there is no way to import that form out of the box. The easiest way to complete this task is to recreate the form and add a custom layout to format it the way you want.
The problem I'm guessing you'll run into though is using Kentico's forms and form controls will cause your layout to be considerably different than what you have. So you'll need to adjust your CSS rules accordingly based on the additional elements that are added by Kentico.
You can store your css in the main css file if you choose or add a HTML head webpart to your page template and add your css there.
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.