I am a little bit lost. What I want to achieve is:
my own custom button
change onMouseOver etc'
keep it's size
post the information to a php server side code
What I'm missing is:
The post - I couldn't figure out how to combine js & php
The Button size - my code sets a size for the original button but after the rollover it changes
The code:
<html>
<head>
</head>
<body>
<script>
function form_on_click(frm)
{
document.buttonMore.src='bottom_more_click.JPG';
frm.submit();
}
</script>
<div style="position: absolute; left: 120px; top: 90px; background-image: url(myBackgroundPicture.jpg);
background-repeat:no-repeat; width: 800px; height: 280px; padding: 15px;">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" name="whatever" size= "55" height="100" lang="en" dir="ltr" style="margin-top: 188px; margin-left: 95px; height: 20px; background-color: transparent; border:none;
color: #FFFFFF; font-family: Verdana; font-weight: none; font-size: 18px;">
<a onmouseover="document.buttonMore.src='bottom_more_hover.JPG'"
onmouseout="document.buttonMore.src='bottom_more_reg.JPG'"
onmousedown= "form_on_click(this.form) this.form.submit()"
onmouseup="document.buttonMore.src='bottom_more_hover.JPG'">
<img src="bottom_more_reg.jpg" name="buttonMore" height="30" width="173" border="0" alt="MORE!" style="margin-bottom:-10px; margin-left: 15px; height: 30px; width: 100px;">
</a>
</form>
</div>
</body>
UPDATED:
Oh sure.. excuse me. You're totally right. I don't know where do I have my head.
Try something else, remove this line again
onmousedown= "form_on_click(this.form) this.form.submit()"
And replace it by
href="javascript:form_on_click(this.form);"
Just a suggestion, why don't you use an...
<input type="button" />
...and then customize it in CSS?
EDIT
About the size of the button, are those jpeg files equally sized?
The easiest way would be to use JQuery. All of what you want to do can be done with just a few simple steps in JQuery. The mouseover/out submit all of it and tons more.
I fell in love with JQuery...
Related
I can't able to see the image after applying CSS background color.
HTML page:
<html>
<head>
</head>
<body>
<div class="heading">
<h2>
<span>LUMINO</span>ADMIN
<img name ="messageicon" alt="Messages" src="<?php echo base_url(); ?>img/closed-envelope-circle.png">
</h2>
</div>
</body>
</html>
CSS page:
.heading{
background-color: yellow;
width: 100%;
height: 10%;
left: 0;
top: 0;
}
.heading h2{
margin-left: 25px;
padding: 15px;
}
h2{
color: white;
}
span{
color: skyblue;
}
SCREENSHOTS:
The image should be visible after applying the CSS background color.
The images might be having transparent background. In this case it will use the container's background color. Apply a background-color css rule to the img to get a color to your image.
.heading img{
background-color: white;
}
Just in case, base_url(); isn't a valid function (if you haven't written one).
you can use $_SERVER['REQUEST_URI'] it gave you the whole link from your Website back in form of an String. In that case you can use the substr to cut the sting in your form you like.
Here is my Examlpe of your code:
<html>
<head>
</head>
<body>
<div class="heading">
<h2>
<span>LUMINO</span>ADMIN
<img name ="messageicon" alt="Messages" src="<?php echo($_SERVER['REQUEST_URI']); ?>img/closed-envelope-circle.png">
</h2>
</div>
</body>
</html>
If you want to know more about base urls take a look here
Enjoy and have fun ;)
--- EDITS: ---
<html>
<head>
</head>
<body>
<div class="heading">
<h2>
<span>LUMINO</span>ADMIN
</h2>
<img name ="messageicon" alt="Messages" src="<?php echo($_SERVER['REQUEST_URI']); ?>img/closed-envelope-circle.png" style>
</div>
<style>
.heading {
background-color: black;
width: 100%;
height: 10%;
left: 0;
top: 0;
}
.heading h2{
margin-left: 25px;
padding: 15px;
}
h2{
color: white;
float: left;
}
span{
color: skyblue;
}
</style>
</body>
</html>
Perhaps this one is better and you can test it with e sperate file so you don't need to change your original.
I am using Contact Form 7 and the Google reCAPTCHA integration. I have added my keys and added the shortcode to the form. I can't seem to get the reCAPTCHA box to appear on the form. Below is the contact form code:
<ul>
<li><div class="apo-moved-label"> [text Name id:cf_name]<label for="cf_name" class="white">Name</label><span class="apo-moved-label-border"></span> </div></li>
<li><div class="apo-moved-label"> [email Email id:cf_email]<label for="cf_email" class="white">Email Address</label><span class="apo-moved-label-border"></span></div></li>
<li><div class="apo-moved-label"> [textarea Message id:cf_message]<label for="cf_message" class="white">Message</label><span class="apo-moved-label-border"></span></div></li>
[recaptcha]
<li><button class="apo-btn apo-btn-small apo-btn-white">[submit "Send Message"]</button><div class="gap"></div></li>
</ul>
Here is what I see when I view source on the form:
<div class="wpcf7-form-control-wrap"><div data-sitekey="6LcY_i8UAAAAAN0EVfgHOAeFOMsE4akLpkzAtn-J" class="wpcf7-form-control g-recaptcha wpcf7-recaptcha"></div>
<noscript>
<div style="width: 302px; height: 422px;">
<div style="width: 302px; height: 422px; position: relative;">
<div style="width: 302px; height: 422px; position: absolute;">
<iframe src="https://www.google.com/recaptcha/api/fallback?k=6LcY_i8UAAAAAN0EVfgHOAeFOMsE4akLpkzAtn-J" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;">
</iframe>
</div>
<div style="width: 300px; height: 60px; border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;">
</textarea>
</div>
</div>
</div>
</noscript>
When I check my CSS I don't see anything blocking it from displaying.
You need to include the recaptcha library before </head>:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
If you use invisible Recaptcha 3, it will not show in the form, but it can be seen in the bottom/right corner of the browser instead.
The Contact Form 7 plugin should be including the script element to include the api.js file already. I just ran into the same problem today, with CF7 5.0.2. For some reason, CF7 is no longer including the api.js file. I can't figure why. I manually added it to the HEAD section, and the problem is now resolved.
If the recaptcha script is not loading, perhaps your theme had the <php wp_head(); ?> function removed.
I guess the site key is not entered correctly.
I just had the issue, and it turns out I was missing this line in my footer.php in my child theme:
<?php wp_footer(); ?>
The recaptcha script is indeed enqueued for inclusion in the footer part of the page, so this line is needed.
Hey i made a layout for a website in a file.html
I got it working, but when i changed the file to a .php, non of the css code i have made worked.
Body {
margin: 0px;
background-color: rgba(230, 230, 230, 1);
font-size: 100%;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
background-color: RGBA(66, 161, 244, 1);
}
header{
height:10%;
}
footer{
height:2%;
text-align: center;
}
#Logo{
position: relative;
width: 50%;
background-color: black;
display: inline-block;
height:100%;
}
#Search{
float: right;
position: relative;
width: 20%;
height: 50%;
display: inline-block;
margin: 0px;
}
.Search{
width: 80%;
height: 100%;
}
.SearchButton{
float: right;
width: 19%;
height: 100%;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
<html>
<head>
<title>Unnamed Project</title>
<link rel="stylesheet" type="text/css" href="Forside.css">
<link rel="stylesheet" type="text/css" href="Standart.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="Icon.png" id="Logo" href="Forside.php"></img>
<form action="Forside.php" id="search" method="post">
<input type="text" name="Parameters" class="Search"></input>
<input type="submit" value="Søg" class="SearchButton"></input>
</form>
</header>
<nav>
<ul>
<li><a>Katagorier</a></li>
</ul>
</nav>
<article>
<div id='Produkt2'>
<div id='Navn'>
$row[Navn]
</div>
<div id='Produktnr'>
$row[AutoID]
</div>
<div id='Billedpris'>
<div id='Billed'>
<img src='Billeder/$row[Billed]'></img>
</div>
<div id='Pris'>
<a class='pris'>$row[Pris],-</a>
<div id='Kurv'>
<form action='PutiKurv.php' method='post'>
<input type='hidden' name='antal' value='1'>
<input type='hidden' name='ProduktID' value='$row[AutoID]'>
<input type='submit' value='Læg i kurv:'></input>
</form>
</div>
</div>
</div>
<div id='Info'>
$row[Info]
<div id='mere'>
<form action='$row[Hjemmeside]'>
<input type='submit' value='Mere info'></input>
</form>
</div>
</div>
<hr>
</div>"
</article>
<footer>Copyright © W3Schools.com</footer>
</body>
</html>
It should look like this, but when i load the css is gone.
please help
The problem is a caching issue. CSS can be a little strange with caching, and while the classic combination CTRL + F5 works for images, it doesn't work for CSS. The better solution to dealing with caching in CSS is to hold down SHIFT while clicking on the refresh symbol.
Obviously, you can include a backslash in the filepath for the CSS reference, or append a version number, such as: <link rel="stylesheet" type="text/css" href="style.css?v2 />.
This version number doesn't 'mean' anything inherently, but can be useful for denoting updates to the CSS, and importantly will be considered a different file by the browser (forcing it to re-load the CSS).
You can also force the browser to refresh the CSS automatically every time the page is loaded with PHP, by appending a timestamp within the link to the CSS file, with something like:
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
Keep in mind that CSS can be 'costly', so once you have finished development, you probably want to allow visitors to cache by removing the timestamp in a production environment :)
Hope this helps! :)
When a string is specified in double quotes or with heredoc, variables are parsed within it.
You are using single quotes instead of double quotes. Use double quotes if you want the variables to be parsed.
In here: <form action='$row[Hjemmeside]'> which means variable parsing is not working. Change to <form action="<?php echo $row[Hjemmeside]; ?>">
Also in here: <input type='hidden' name='ProduktID' value='$row[AutoID]'>. Change to: <input type='hidden' name='ProduktID' value="<?php echo $row[AutoID]; ?>">
And here: <img src='Billeder/$row[Billed]'></img>. Change to: <img src="Billeder/<?php echo $row[Billed]; ?>"></img>
Also, you can go to the Developer mode in your web browser and do the "Empty cache and hard reload" option to load the new style files. Consider using file versioning. For example:
<link rel="stylesheet" type="text/css" href="Forside.css?v=1.1">
<link rel="stylesheet" type="text/css" href="Standart.css?v=1.1">
I have set when user types something in the search box, the suggestions will appear.
When suggestions appear, it will push the buttons and texts below down as I set its position relative.
But when user delete those words in the search box and the suggestion list disappears, the buttons and texts below the suggestion list did not move back to the original place.
How can I let the buttons and texts below the suggestion list move back to the original place when user delete those words in search box?
This is my current code:
<?php
include 'script_suggestion.php';
include 'script_close_suggestion_box.php';
?>
<html>
<head>
<title>
Brandon's Search Engine
</title>
<style type="text/css">
#suggestion {
border: 1px solid black;
visibility: hidden;
position: relative;
background-color: transparent;
z-index: 10;
}
.suggestion a {
font-size: 12pt;
color: black;
text-decoration: none;
display: block;
width: 648px;
height: auto;
text-align: left;
padding: 10px;
}
.suggestion a:hover {
background-color: #dddddd;
width: 644px;
padding: 2px;
}
</style>
</head>
<body>
<form method="GET" action="search.php" name="q">
<table align="center">
<div>
<h1><center>Brandon's Search Engine</center></h1>
</div>
<div align="center">
<input type="text" name="q" id="q" class="q" style="height: 27px; width: 650px; padding: 2px" placeholder="Search Now"
onkeyup="getSuggestion(this.value)" autocomplete="off" autoFill="on" onblur="closeBox()"/>
<script>document.getElementById('q').focus()</script>
<div id="suggestionBox" style="visibility: collapse;">
<div id="suggestion" style="width: 645px; text-align: left; padding: 2px;">
</div>
</div>
</div>
<br />
<div align="center">
<input type="submit" value="Search" name="submit" style="height: auto; width: 60px; padding: 2px" />
<input type="reset" value="Clear" onclick="closeBox()" style="height: auto; width: 50px; padding: 2px" />
</div>
<div align="center">
Can't find your site? <br /> Insert here.
</div>
</table>
<input type="hidden" name="page" value="1" />
</form>
</body>
</html>
Thanks in advance.
On your function in your onkeyup, you can check the text value and if that was empty change css position of your element to original:
function getSuggestion(value){
if(!value.length()){
//change to original place
}
.
.
.
}
I hope to help
Good morning.
I am very new to CSS and been reading up on a few topics but completely stumped when I am trying to keep a form submit button over a BG image. As soon as I zoom on the page, the buttons move out of position.
Here is my CSS code for the BG:
body
{
background-image:url('../pics/BGs/FrontBG.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background size: auto;
}
.bannerlogin1
{
position: relative;
top: 50;
left: 50;
}
.bannerlogin2
{
position: absolute;
top: 5px;
left: 400px;
}
.bannerlogin3
{
position: absolute;
top: 5px;
left: 800px;
}
.bannerlogin4
{
position: absolute;
top: 5px;
left: 1250px;
}
And the code from my welcome page:
<BODY class="body" bgcolor="black">
<form action="../Nightlife.php">
<input class="bannerlogin1" type="submit" value="" style="width: 250px; height: 100px; background-color:transparent; border:;" >
</form>
<form action="../Portrait.php">
<input class="bannerlogin2" type="submit" value="" style="width: 250px; height: 100px; background-color:transparent; border:;" >
</form>
<form action="../Contact.php">
<input class="bannerlogin3" type="submit" value="" style="width: 250px; height: 100px; background-color:transparent; border:;" >
</form>
<form action="../Client.php">
<input class="bannerlogin4" type="submit" value="" style="width: 250px; height: 100px; background-color:transparent; border:;" >
</form>
Thank you for any help :). I have a feeling I may be doing something fundamentally daft but have read a few things from w3 schools and the like and can not seem to find a concise answer to solve this.
The form needs to have a relative positioning. Otherwise when you zoom in, the input's will be positioned to the body of the page:
form{position:relative;}
Also, you should move your inline CSS of your submit buttons to your styles block:
input["submit"]{width: 250px; height: 100px; background-color:transparent;}
NOTE: ["submit"] is a CSS3 only attribute.