I am trying to align two divs at the same height where the divs are not a part of a row div.
var divh = document.getElementById('copyTarget1').offsetHeight;
document.getElementById('copyTarget2').style.height = divh + 'px';
/* latin-ext */
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
body {
background: hsl(184,65%,49%);
margin: 0;
font-family: 'Lato';
text-align: center;
color: #fff;
font: 15px/1.4em;
}
pre {
background-color: #333;
padding: 6px;
font-size: 12px;
color: #2fbe35;
line-height: 1.3em;
}
code {
font-family: "Courier New", Courier, mono;
color: #2fbe35;
}
blockquote {
border: none;
color: #fff;
padding: 5px 20px 5px 20px;
margin-right: 30px;
margin-left: 30px;
}
.content
{
width: 100%;
margin: 0;
}
.column1 {
width: 50%;
height:auto;
float: left;
}
.column2 {
width: 50%;
height:auto;
float:left;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" debug="true"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML-CSS EDITOR</title>
<meta name="generator" content="Mephisto">
<link href="./main2.css" rel="stylesheet" type="text/css">
<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed">
<script src="./jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./jquery.jeditable.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="column1">
<h1>CSS EDITOR</h1>
<div>Replace Header Text Color: </div><input type="text" id='thebox1'>
<div>Replace Header Background Color: </div><input type="text" id='thebox2'>
<div>Replace Logo Section Background Color: </div><input type="text" id='thebox5'>
<div id="copyTarget1">
<blockquote>
<pre>
<code>
#topsection {
background-color: <b class="popup2" style="color:#fff;">#value </b>;
width:100%;
height:80px;
z-index:1;
position:absolute;
top:10px;
left:0;
color: <b class="popup1" style="color:#fff;">#value </b>;
}
</code>
</pre>
</blockquote>
</div>
<button id="copyButton1">Copy</button><br><br>
</div>
<div class="column2">
<h1></h1>
<h1>HTML EDITOR</h1>
<div>Enter header section text: </div><input type="text" id='thebox3'>
<div>Enter image link: </div><input type="text" id='thebox4'>
<div id="copyTarget2">
<blockquote>
<pre>
<code>
<xmp>
<div id="topsection">
<div id="header1"></xmp><b class="popup3" style="color:#fff;">HEADER TEXT</b><xmp></div>
<div id="header2">1 Jan 2015 - 31 Jan 2015</div>
</div>
</xmp>
</code>
</pre>
</blockquote>
</div>
<button id="copyButton2">Copy</button><br><br>
</div>
</div>
Each div (copyTarget1 and copyTarget2) are parts of 2 different columns that are aligned horizontally.
Now I am trying to align the two block quote boxes as shown in the image. In the future, I might alter the code and add more input boxes. So, I don't want to put a fix height for the two block quote boxes.
The idea was to use javascript but nothing changed. The link of the website is here : LINK
To align the top of the blockquote section you need to make the content above that the same height in both columns.
So we wrap that content in a div (perhaps with a class of .top) and the use JS/JQ to determine which .top element is tallest and apply that height to all .top divs.
$(document).ready(function() {
var highestBox = 0;
$('.top').each(function() {
if ($(this).height() > highestBox) {
highestBox = $(this).height();
}
});
$('.top').height(highestBox);
});
body {
background: hsl(184, 65%, 49%);
margin: 0;
font-family: 'Lato';
text-align: center;
color: #fff;
font: 15px/1.4em;
}
pre {
background-color: #333;
padding: 6px;
font-size: 12px;
color: #2fbe35;
line-height: 1.3em;
}
code {
font-family: "Courier New", Courier, mono;
color: #2fbe35;
}
blockquote {
border: none;
color: #fff;
padding: 5px 20px 5px 20px;
margin-right: 30px;
margin-left: 30px;
}
.content {
width: 100%;
margin: 0;
}
.column1 {
width: 50%;
height: auto;
float: left;
}
.column2 {
width: 50%;
height: auto;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="column1">
<div class="top">
<h1>CSS EDITOR</h1>
<div>Replace Header Text Color:</div>
<input type="text" id='thebox1'>
<div>Replace Header Background Color:</div>
<input type="text" id='thebox2'>
<div>Replace Logo Section Background Color:</div>
<input type="text" id='thebox5'>
</div>
<div id="copyTarget1">
<blockquote>
<pre>
<code>
#topsection {
background-color: <b class="popup2" style="color:#fff;">#value </b>;
width:100%;
height:80px;
z-index:1;
position:absolute;
top:10px;
left:0;
color: <b class="popup1" style="color:#fff;">#value </b>;
}
</code>
</pre>
</blockquote>
</div>
<button id="copyButton1">Copy</button>
<br>
<br>
</div>
<div class="column2">
<div class="top">
<h1>HTML EDITOR</h1>
<div>Enter header section text:</div>
<input type="text" id='thebox3'>
<div>Enter image link:</div>
<input type="text" id='thebox4'>
</div>
<div id="copyTarget2">
<blockquote>
<pre>
<code>
<xmp>
<div id="topsection">
<div id="header1"></xmp><b class="popup3" style="color:#fff;">HEADER TEXT</b><xmp></div>
<div id="header2">1 Jan 2015 - 31 Jan 2015</div>
</div>
</xmp>
</code>
</pre>
</blockquote>
</div>
<button id="copyButton2">Copy</button>
<br>
<br>
</div>
</div>
Codepen Demo
If you wish to make all the blockquotes the same height you could so that too.
at line 10 you are missing:
</script>
use your console to check for errors
Try this to change the height of #copyTarget2 element
var divh = document.getElementById('copyTarget1').offsetHeight;
document.getElementById('copyTarget2').style.height = divh + 'px';
Also you should give the background to this div not the <pre> tag to give the black background to the hole div
Also the <script type="text/javascript" charset="utf-8"> doesn't have a closing </script> tag at line 10
Here are the screenshots where you can see that both divs #copyTarget2 and #copyTarget1 have the same height 255px
CopyTarget1 http://prntscr.com/c6tvxf
CopyTarget2 http://prntscr.com/c6tw8n
Script http://prntscr.com/c6twb5
Related
So I working on my integration of JS into my HTML and I want my web page to look some what presentable for a low level programmer. I've tried putting different divisions around and image (so two on the left vertically aligned and then an image the is the height of them combined in the gap on the right to fill the rest of that row.
I've tried the normal method of:
#insertDivIdHere{
float:left;
}
#otherDivIdHere{
float:left;
}
#insertImgIdHere{
float:left;
}
This method ends up with some weird formatting issues where the divisions overlap and the objects (ie buttons and text boxes) disappear and the image is to low.
Here is the HTML and CSS if you want to try it out (but I've left out my JS because I see no point in sharing it:
#header{
font-size: 16px;
background-color:lightsteelblue;
padding:12px;
text-align:center;
}
#form{
height: 30px;
width: 100px;
}
#formdiv {
background-color: lightcyan;
padding:12px;
height: 200px;
width:300px;
float: left;
}
#ageRange{
height: 30px;
width: 120px;
}
#ageRangeDiv{
background-color: lightgrey;
padding:12px;
height:140px;
width:300px;
float: left;
}
#creds{
border-radius: 5%;
box-shadow: lightskyblue;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
position: relative;
padding:3px;
}
#age{
border-radius: 5%;
box-shadow: lightskyblue;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
position: relative;
padding:3px;
}
#image{
width: auto;
height: 340px;
float:left;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700"rel="stylesheet">
<title>Intergration</title>
<script src="script.js"></script>
</head>
<body>
<div id="header">
<h1>Web intergration</h1>
</div>
<div>
<div id="formdiv" name="formdiv">
<form id="form" name="form">
First Name <input type="text" name="firstName" ><br>
<br>
Last Name <input type="text" name="lastName" ><br>
<br>
Email <input type="email" name="email"><br>
</form>
<br><br><br><br><br><br><br>
<button type="button" id="creds" onclick="validCreds()">Confirm</button>
</div>
<div id="ageRangeDiv">
<form id="ageRange" name="ageRange">
<input type="radio" name="R1" id="U13" checked>Under 13 <br>
<input type="radio" name="R1" id="U18">13-18 <br>
<input type="radio" name="R1" id="U30">19-30 <br>
<input type="radio" name="R1" id="U50">31-50 <br>
<input type="radio" name="R1" id="O50">Over 50 <br>
</form>
<br><br><br><br>
<button type="button" id="age" onclick="validAge()">Confirm</button>
</div>
<div>
<img src="eve.jpg" id="image">
</div>
</div>
</body>
</html>
This is an example of how to use the inline-flex to align your content i hope you can modify them to do your layout.
#media only screen and (min-width: 600px) {
.container {
display: inline-flex;
}
.container div {
border: 1px solid red;
padding: 1em;
margin: 1em;
}
.container>div+div {
margin: auto;
}
}
#media only screen and (max-width: 600px) {
.container div:not(first-child) {
border: 1px solid red;
}
}
<div class="container">
<div>
<div>
1
</div>
<div>
2
</div>
</div>
<div>
3
</div>
</div>
I am writing a site to order. But I ran into the problem for the first time - I can not remove the underscores from the bottom of the link. Already tried through
a: hover {text-decoration: none}
as well as on another.
From below I will provide HTML code as well as CSS code
I ask to help to correct such unexpected error
body{background: #efefef
url("images/geometry2.png");
margin: 0; padding: 0;
font: 16px/24px Arial, Tahoma, Sans-serif;
}
div.mid{
width: 1000px; margin: 0 auto;
}
a:hover {
text-decoration: none;
}
div.header{
background: #101417;
}
/*Шапка сайта*/
div.topmenu{float: right;height: 70px; line-height: 70px;}
div.topmenu a{margin: 0 0 0 10px; color: #0000FF;}
div.topmenu a:hover{color: #fff}
div.afisha {padding: 20px 50px 0 50px; background: #f2f2f2 url("images/headline.png") top repeat-x;}
div.afisha img {float: left; }
div.afisha h3 {font-size: 24px; font-weight: normal; text-align: center; color: #830000;}
div.afisha p{text-align: center;}
div.afisha a{font-size: 20px; color: #fff; font-weight: bold; background: #b23600; border: 1px solid #862900;}
div.clear{clear: both;}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Мой сайт</title>
<link rel="shortcut icon" type="image/x-icon" href="images/logomin.png">
<link rel="stylesheet" href="style.css" media="all">
</head>
<body>
<div class="header">
<div class="mid" >
<header>
<div class="topmenu" style='float:right;height: 70px; line-height: 70px'
</div>
<aside>
Главная
Тренинг
Шаблоны
Контакты
</aside>
</div>
<img src="images/logo.png" alt="Логотип сайта" title="Логотип сайта">
<div class="afisha"</div>
<img src="images/v5.jpg" alt="Обложка тренинга" title="Обложка тренинга">
<h3>Стань профессиональным верстальщиком<br>всего за 2 месяца<br> и зарабатывай по 30 000 рублей!</h3>
<p>Смотрите здесь<p>
<div class="clear"></div>
</header>
</div>
</div>
<div class="menu">
<div class="mid" >Привет мир</div>
</div>
<div class="conten">
<div class="mid" ></div>
</div>
<div class="footer">
<div class="mid" ></div>
</div>
</body>
</html>
try with
div.mid{
width: 1000px; margin: 0 auto;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
also clear caches before checking results..
With :hover you can set CSS properties when the link in hovered(i.e. mouse is over the link).
It seems you want to remove the default underline property of the link. To do so you need to apply CSS directly to the a tag:
a{text-decoration: none}
I write a webapp using a swipe.js function to swap between the two pages. Problem is that it that i wont swipe trough the first page, if i remove the html code to the first page it will swipe back and forth without problems between the two pages. I cant load the second page when the first page is on. Anyone who knows what the problem could be?
code:
<!DOCTYPE html>
<html>
<head>
<title>Share QR</title>
<meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="article1">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<h1>Articles1</h1>
</div>
<div data-role="content">
<style>
* {
box-sizing: border-box;
background-color: #062F43;
}
body {
margin: auto;
}
/* Style the header */
.header {
background-color: #062F43;
padding: 20px;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #062F43;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #062F43;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #062F43;
color: white;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
background-color: #062F43;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media (max-width:1080px) {
.column {
width: 100%;
}
}
#txt {
color: white;
}
</style>
</head>
<body>
<div class="colunm">
<h>
<p>
<p>
<div class="pie">
<span class="overlay"></span>
</div>
<style>
.pie {
margin: auto;
position: relative;
width: 200px;
height: 100px;
border-radius: 200px 200px 0 0;
overflow: hidden;
}
.pie::after {
transform: rotate({{temp_x}}deg); /* set rotation degree */
background: linear-gradient(to right, rgba(51,102,255,1) 50%, rgba(255,0,0,1) 100%);
transform-origin: center bottom;
}
.pie::before {
border: 2px solid black;
}
.pie .overlay{
top: 8px; /* match border width */
left: 8px; /* match border width */
width: calc(100% - 16px); /* match border width times 2 */
height: calc(200% - 10px); /* match border width times 2 */
border-radius: 100%;
background: #062F43;
z-index: 1; /* move it on top of the pseudo elements */
}
.pie *,
.pie::before,
.pie::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
border-radius: inherit;
box-sizing: border-box;
}
</style>
</body>
<body>
<div class="header">
<h1 style="color: #07969E;"> Hot water left</h1>
<p id="temp_f" style="color: white;"> 0%</p>
</div>
<div class="row">
<div class="column">
<h2> <center style="color: #07969E;"> Duration </h2> </center>
<p> <center style="color: white;">14:42</p> </center>
</p>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Temperature</h2> </center>
<p id="temp_c"> <center style="color: white;">0 C°</p> </center>
</p>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Hot water left</h2> </center>
<p id="temp_x"> <center style="color: white;">0</p> </center>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Clock</h2> </center>
<head>
<style="color=white">
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</head><body onload="startTime()">
<div> <center id="txt"></div> </center>
</div>
</div>
</div>
<div data-role="page" id="article2">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
Home
<h1>Articles</h1>
</div>
<div data-role="content">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" title="default" href="css/main.css">
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<style>
* {
box-sizing: border-box;
background-color: #062F43;
}
body {
margin: auto;
}
/* Style the header */
.header {
background-color: #062F43;
padding: 20px;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #062F43;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #062F43;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #062F43;
color: white;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
background-color: #062F43;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media (max-width:1080px) {
.column {
width: 100%;
}
}
#txt {
color: white;
}
</style>
<style>
.button {
background-color: #07969E;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover {background-color: #008a93}
.button:active {
background-color: #008a93;
box-shadow: #666;
transform: translateY(4px);
</style>
</head>
<body>
<div class="header">
<h1 style="color: #07969E;"> Hot water left</h1>
<button class="button">Button</button>
</div>
<div class="row">
<div class="column">
<h2> <center style="color: #07969E;"> Duration </h2>
<center> <button class="button">Button</button> </center>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Temperature</h2>
<center> <button class="button">Button</button> </center>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Hot water left</h2>
<center> <button class="button">Button</button> </center>
</div>
<div class="column">
<h2> <center style="color: #07969E;"> Clock</h2>
<center> <button class="button">Button</button> </center>
<style="color=white">
<div> <center id="txt"></div>
</div>
</div>
<div>
<div class="row">
</div>
<center div class="column1" align="cente">
<h2> <center style="color: #07969E;">Live graph</h2>
<h3> <center style="color: white;"> Click Me </h3>
</div>
<div id="sidebar">
</div>
</div>
<div data-role="page" id="article3">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
Home
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 3</p>
</div>
</div>
</body>
<script>
$(document).on('swipeleft', '.ui-page', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var nextpage = $.mobile.activePage.next('[data-role="page"]');
// swipe using id of next page if exists
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
}
event.handled = true;
}
return false;
});
$(document).on('swiperight', '.ui-page', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var prevpage = $(this).prev('[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
}
event.handled = true;
}
return false;
});
</script>
</html>
You got your markup mixed up quite a tad there. There's multiple <head> and <body> tags while the standard only allows one of each.
An HTML 4 document is composed of three parts:
a line containing HTML version information,
a declarative header section (delimited by the HEAD element),
a body, which contains the document's actual content. The body may be implemented by the BODY element or the FRAMESET element.
You will need to reduce your code to a valid HTML document to make this work. It looks like you copied the source of multiple individual files into one, you have to combine the different elements, though.
Start off with the basic HTML structure
Copy all elements from the individual headparts into the <head>
Copy all <style> tags to the <head>
Copy all markup of each individual page into the <body> element
Copy all <script> tags to the <body>
While you do this, make sure to get rid of redundant code. The style tags look fairly close to each other, for example.
I created a web-to-lead form using SuiteCRM. Using the code generated by it,I further enhanced it and added a set of 4-checkboxes.
I saved it as a HTML normal page. When I open this html page in browser and it correctly display the alert and submits all the required values correctly to prescribed MySQL database table.
Here is the complete code of this html page:
<html lang='en_us'><head><base target=”_parent” /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><style type="text/css"><!--
form#WebToLeadForm, form#WebToLeadForm * {margin: 0; padding: 0; border: none; color: #333; font-size: 12px; line-height: 1.6em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;}
form#WebToLeadForm {float: left; border: 1px solid #ccc; margin: 10px;}
form#WebToLeadForm h1 {font-size: 32px; font-weight: bold; background-color: rgb(60, 141, 188); color: rgb(247, 247, 247); padding: 10px 20px;}
form#WebToLeadForm h2 {font-size: 24px; font-weight: bold; background-color: rgb(60, 141, 188); color: rgb(247, 247, 247); padding: 10px 20px;}
form#WebToLeadForm h3 {font-size: 12px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h4 {font-size: 10px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h5 {font-size: 8px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm h6 {font-size: 6px; font-weight: bold; padding: 10px 20px;}
form#WebToLeadForm p {padding: 10px 20px;}
form#WebToLeadForm input,
form#WebToLeadForm select,
form#WebToLeadForm textarea {border: 1px solid #ccc; display: block; float: left; min-width: 170px; padding: 5px;}
form#WebToLeadForm select {background-color: white;}
form#WebToLeadForm input[type="button"],
form#WebToLeadForm input[type="submit"] {display: inline; float: none; padding: 5px 10px; width: auto; min-width: auto;}
form#WebToLeadForm input[type="checkbox"],
form#WebToLeadForm input[type="radio"] {width: 18px; min-width: auto;}
form#WebToLeadForm div.col {display: block; float: left; width: 330px; padding: 10px 20px;}
form#WebToLeadForm div.clear {display: block; float: none; clear: both; height: 0px; overflow: hidden;}
form#WebToLeadForm div.center {text-align: center;}
form#WebToLeadForm div.buttons {padding: 10px 0; border-top: 1px solid #ccc; background-color: #f7f7f7}
form#WebToLeadForm label {display: block; float: left; width: 160px; font-weight: bold;}
form#WebToLeadForm span.required {color: #FF0000;}
--></style>
<!-- TODO ???
<script type="text/javascript" src='http://localhost/suitecrm/cache/include/javascript/sugar_grp1.js?v=WCpISilUvngJZgJBZ4o1BA'></script>
--><form id="WebToLeadForm" action="http://localhost/suitecrm/index.php?entryPoint=WebToPersonCapture" method="POST" name="WebToLeadForm">
<h2>FREE Blog Subscription - IT & Networking Blog</h2>
<p style="text-align: center;">Submitting this form will add you to subscription list of IT & Networking Blog. You will receive email about each new post as soon as published.</p>
<p><img src="http://localhost/images/banners/LeadManagement/Blog-Subscription-image.png" alt="" /></p>
<div class="row">
<div class="col"><label>First Name: <span class="required">*</span></label><input name="first_name" id="first_name" type="text" required="" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<div class="row">
<div class="col"><label>Last Name: <span class="required">*</span></label><input name="last_name" id="last_name" type="text" required="" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<div class="row">
<div class="col"><label>Email Address: <span class="required">*</span></label><input name="email1" id="email1" type="email" required="" /></div>
<div class="col"> </div>
<div class="clear"> </div>
</div>
<p style="text-align: center;">Select the target lists, you want to join:</p>
<input type="checkbox" id="IT" value="IT">IT<br>
<input type="checkbox" id="Process" value="Process">Process<br>
<input type="checkbox" id="Management" value="Management">Management<br>
<input type="checkbox" id="Education" value="Education">Education<br>
<p style="text-align: center;">100% Privacy! We will never spam you.</p>
<div class="row center buttons" style="text-align: center;"><input class="button" name="Submit" type="submit" value="Subscribe" onclick="submit_form();" />
<div class="clear"> </div>
</div>
<input name="campaign_id" id="campaign_id" type="hidden" value="13f62ae3-f38d-fe80-a93a-57d4090f764d" /> <input name="assigned_user_id" id="assigned_user_id" type="hidden" value="1" /> <input name="moduleDir" id="moduleDir" type="hidden" value="Prospects" /><input name="prospect_list_id" id="prospect_list_id" type="hidden" value="ac6ce628-de45-4813-d1a0-57e2jgjhr49146" />
<!--my code starts here -->
<input name="list_name_c" id="list_name_c" type="hidden" value="mello" /></div>
</form>
<p>
<script type="text/javascript">// <![CDATA[
function submit_form()
{
if (typeof(validateCaptchaAndSubmit) != 'undefined')
{
validateCaptchaAndSubmit();
}
else
{
check_webtolead_fields();
//document.WebToLeadForm.submit();
check();
}
}
function check_webtolead_fields()
{
if (document.getElementById('bool_id') != null)
{
var reqs = document.getElementById('bool_id').value;
bools = reqs.substring(0, reqs.lastIndexOf(';'));
var bool_fields = new Array();
var bool_fields = bools.split(';');
nbr_fields = bool_fields.length;
for (var i = 0; i < nbr_fields; i++)
{
if (document.getElementById(bool_fields[i]).value == 'on')
{
document.getElementById(bool_fields[i]).value = 1;
}
else
{
document.getElementById(bool_fields[i]).value = 0;
}
}
}
}
function check()
{
var list_name = "";
var test = document.forms[0];
var txt = "";
var i;
for (i = 0; i < test.length; i++)
{
if (test[i].checked)
{
txt = txt + test[i].value + " ";
}
}
list_name = txt;
alert(list_name);
document.getElementById('list_name_c').value = list_name;
}
// ]]></script>
</p></body></html>
But my problem starts when I strips the opening & closing html codes from it. I created a 'Custom HTML' module in Joomla and pasted the code there and accessed in a article. The form takes correct shape at the front-end of website.
All the values of 3-fields viz., First Name, Last Name, Email are correctly recorded in database, but checkbox value(s) are not recorded. Even the alert is blank which occurs immediately after I click on submit/subscribe button.
I don't know why it is not working in JOOMLA 3.
MY OBJECTIVE: To have four checkboxes whose values are appended with " - " and stored in the 'list_name_c' field of database table.
What can I do to make it work?
With thanks,
RK
The problem has been solved. Java script was not working because of one more form on the final html webpage. The solution was to replace the code line var test = document.forms[0]; with the code line: var test = document.MYFORMNAME; Thanks!
I am trying to get an image to show up behind the text as a hover effect.
It is just a simple splash page for now, but I can't seem to figure out how to get this to work.
Here is the current page. The words below the logo are links.
https://gyazo.com/8fac5b310ed8febd80032cc19b57d76e
Here is the image I want behind the text when a user hovers.
https://gyazo.com/67852dd57789458942952b1dd3b3cb55
It is like a scribble effect in different colors. They wouldn't all show up at one, but just the different one behind each word as you hover.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800,600,300' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Lira.net</title>
<link rel="stylesheet" href="css/style.css">
<script src="script.js"></script>
</head>
<body>
<div id="middlegroup">
<div id="topimage">
<img src="images/LiraLogo325.png">
</div>
<div id="links">
<p>
Liquidation -
<a href="#">Monetization<a> -
Brokerage
</p>
</div>
</div>
</body>
<footer>
<p>© 2016 Lira.net </p>
</footer>
</html>
and here is the CSS:
h1 {
font-family: "Open Sans" , serif;
color: #FFFFFF;
text-shadow: 2px 2px 3px #4d4d4d;
font-size: 5vw;
text-align: center;
}
body {
margin: 0;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#topimage{
width: 100%;
text-align:center;
size: 1vw;
}
#links{
width: 100%;
list-style-type:circle;
}
#middlegroup{
width:600px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-125px 0 0 -300px;
}
a:link{
color:#01197d;
text-decoration: none;
}
a:visited{
color:#01197d;
text-decoration: none;
}
a:hover{
text-decoration: none;
}
a:active{
color:#01197d;
text-decoration: none;
}
p {
font-family: "Open Sans" , serif;
font-weight: 600;
font-size:15px;
text-align:center;
}
ul {
font-family: "Open Sans" , serif;
font-weight: 400;
font-size:20px;
text-align:center;
list-style-type:circle;
}
footer p{
font-family: "Open Sans" , serif;
font-weight: 400;
font-size:14px;
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
}
Any help would be greatly appreciated!
The easiest way to get this done is to use background images
You can try something like this:
.class1:hover {
background-image: url("paper.gif");
}
.class2:hover {
background-image: url("paper.gif");
}
.class3:hover {
background-image: url("paper.gif");
}
Just replace the class names for the ones that suits your links, and obviously play with sizing, something like display inline-block to the links will be enough. Here you have everything you will need for this task
You'll just have to add a background image on hover. Here's a fiddle : https://jsfiddle.net/rd7zbytc/
and here's the code:
#links p a:hover {
background-image:url("https://images.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
background-size:100px;
}
Is this what you are talking about?
http://codepen.io/xkurohatox/pen/qbPXOb
HTML changes:
<div id="links">
<p>
<a id="a1" href="#">Liquidation</a> -
<a id="a2" href="#">Monetization<a> -
<a id="a3" href="#">Brokerage</a>
</p>
</div>
CSS changes:
#a1:hover {
background-image:url("http://previews.123rf.com/images/pzaxe/pzaxe1104/pzaxe110400016/9242659-Seamless-monochrome-square-texture-scribble--Stock-Vector-pattern- scribble-background.jpg");
background-size:100%;
}
#a2:hover {
background-image:url("http://st.depositphotos.com/1466799/1121/v/950/dep_11211843-Full-color-abstract-scribble-background.jpg");
background-size:100%;
}
#a3:hover {
background-image:url("http://thumbs.dreamstime.com/z/child-scribble-12020973.jpg");
background-size:100%;
}
/* images above are not my own and only being used for demo purposes */
Hope this helps!