I am having trouble with the webpage in php that I'm trying to make. The 2 divs inside the main div kept getting wrapped. I am trying to arrange it in a way that the rifleman blue is on the left and the rifleman red is on the right of the page since the user will be comparing both riflemen's stats. I am not good with CSS but will push myself if it's the only solution since my neck already hurts so bad and still couldn't find a way to do this. My target browsers are just FF and Chrome. I need a way to make 2 displayed in one line on the page and not make the 2nd div below the 1st div.
<?php
$profpic = "darkbg.jpg";
?>
<html>
<style type="text/css">
body {
background-image: url('<?php echo $profpic;?>');
}
</style>
<body>
<img src="headergiflong.gif" style="width:100%;height:30%;"><br>
<div>
<div style="display:inline;width:200;height:300;background-color:blue;">
<select id="comparea">
<option value="rifleman.php">Rifleman</option>
<option value="mortarman.php">Mortarman</option>
<option value="machinegunner.php">Machine Gunner</option>
<option value="javelin.php">Javelin</option>
</select>
<br>
<iframe id="compare1" style="background-color:black; color:white; border:0;" src="rifleman.php" width="45%" height="300"></iframe>
</div>
<br>
<div style="display:inline;width:200;height:300;background-color:red;">
<select id="compareb">
<option value="rifleman.php">Rifleman</option>
<option value="mortarman.php">Mortarman</option>
<option value="machinegunner.php">Machine Gunner</option>
<option value="javelin.php">Javelin</option>
</select>
<br>
<iframe id="compare2" style="background-color:black; color:white; border:0;" src="rifleman.php" width="45%" height="300"></iframe>
</div>
</div>
</body>
</html>
try this
<?php
$profpic = "darkbg.jpg";
?>
<html>
<style type="text/css">
body {
background-image: url('<?php echo $profpic;?>');
}
</style>
<body>
<img src="headergiflong.gif" style="width:100%;height:30%;"><br>
<div style="width: 100%; max-width: 960px;">
<div style="width: 50%; float: left; background-color:blue;">
<select id="comparea">
<option value="rifleman.php">Rifleman</option>
<option value="mortarman.php">Mortarman</option>
<option value="machinegunner.php">Machine Gunner</option>
<option value="javelin.php">Javelin</option>
</select>
<br>
<iframe id="compare1" style="background-color:black; color:white; border:0;" src="rifleman.php" width="100%" height="300"></iframe>
</div>
<div style="width: 50%; float: left; background-color:red;">
<select id="compareb">
<option value="rifleman.php">Rifleman</option>
<option value="mortarman.php">Mortarman</option>
<option value="machinegunner.php">Machine Gunner</option>
<option value="javelin.php">Javelin</option>
</select>
<br>
<iframe id="compare2" style="background-color:black; color:white; border:0;" src="rifleman.php" width="100%" height="300"></iframe>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
Change:
<body>
<img src="headergiflong.gif" style="width:100%;height:30%;"><br>
<div>
To:
<body>
<img src="headergiflong.gif" style="width:100%;height:30%;"><br>
<div style='width:400px;overflow:hidden;'>
The basic issue is that the two items are set to display inline, with a fixed width of 200px - therefore if the available space is less than 400px, they will wrap to a new line. By setting the width of the parent container to 400px, it ensures the children will have the minimum width available in order to display on the same line.
Your alternatives would be either to float the two elements, or to use display:table
SEE THIS FIDDLE
..for the three different approaches you can use.
give iframe width as 100% for both divs...
and for left div give style as
float:left;
width:49%;
for right div give style as
float:right;
width:49%;
Related
I have these divs (links) that can be clicked on.
I want to change a dropdown selection accordingly.
So if it's clicked on select2, it would change the dropdown value to 666
If select3, it would change to 667
and so on.
I can't modify dropdown values, however the target id's CAN be exact as dropdown values, if that will make things easier to code.
I know there are some mistakes in my jQuery script.
Any help would be appreciated.
<script>
const select = $('#sel2');
// Initialize at position 1
selectElement('665');
select.change(function() {
selectElement($(this).val());
})
function selectElement(id) {
$('#' + target).addClass("selected");
others.removeClass("selected");
}
</script>
<div style="display: inline-block; margin-bottom: 0.4em;" class="showSingle greenactive" target="01">select1</div>
<div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="02">select2</div>
<div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="03">select3</div>
<div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="04">select4</div>
<div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="05">select5</div>
<div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="06">select6</div>
<div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="07">select7</div>
<div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="08">select8</div>
<div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="09">select9</div>
<div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="10">select10</div>
<div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="11">select11</div>
<br><br>
<select name="usp-taxonomy-vertical[]" required="required" data-required="true" multiple="multiple" class="form-control" id="sel2">
<option value="665" selected="selected">665</option>
<option value="666">666</option>
<option value="667">667</option>
<option value="668">668</option>
<option value="669">669</option>
<option value="670">670</option>
<option value="671">671</option>
<option value="672">672</option>
<option value="673">673</option>
<option value="674">674</option>
<option value="675">675</option>
<option value="676">676</option>
</select>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
You need to use attribute of your link to select right option.
I used your target attribute to do it.
// Initialize at position 1
selectElement('665');
$('.showSingle').click(function() {
selectElement($(this).attr('target'));
})
function selectElement(target) {
console.clear();
console.log(target);
// we save current element in const
const currectSelectedElementTarget = $('#sel2 option[value="' + target + '"]');
// remove attr selected for all options in select #sel2
$("#sel2 > option").removeAttr("selected");
// we add selected class and attr to the current clicked element
currectSelectedElementTarget.addClass("selected").attr('selected', 'selected');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="display: inline-block; margin-bottom: 0.4em;" class="showSingle greenactive" target="665">select1</div>
<div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="666">select2</div>
<div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="667">select3</div>
<br><br>
<select name="usp-taxonomy-vertical[]" required="required" data-required="true" multiple="multiple" class="form-control" id="sel2">
<option value="665">665</option>
<option value="666">666</option>
<option value="667">667</option>
</select>
well, your Jquery code is a bit wrong, you need to add the select values to the <a> (maybe in data attributes), then set a listener on <a> fields that will trigger a function to change the select value
the full code will be like this :
$(".href").click(function(){
$(".select_a").val($(this).attr('data-value')).change();
});
select1</div>
select2</div>
select3</div>
<br><br>
<select name="usp-taxonomy-vertical[]" required="required" data-required="true" multiple="multiple" class="form-control select_a" id="sel2">
<option value="665" selected="selected">665</option>
<option value="666">666</option>
<option value="667">667</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Hello fellow programmers, I have created a search form for my webpage which allows users to use three different fields to refine their search. I have been trying to align these objects with the main heading of the search page. I have tried many different methods but seems to move the objects into the centre. It's really bugging me and I have no clue in how to fix this! Any recommendations?
<p style="text-align:center">View Recipes which satisfy the following criteria:</p>
<div class="container cols justify-content center">
<div style="margin-bottom: 30px; width: 300px;">
<label for="author">By Author:</label>
<select name="author" id="author">
<option value="">Any Author</option>
<?php foreach ($authors as $author): ?>
<option value="<?php html($author['id']);?>"><?php html($author['name']);?></option>
<?php endforeach;?>
</select>
</div>
<div style="margin-bottom: 30px; width: 300px;">
<label for="category">By Category:</label>
<select name="category" id="category">
<option value="">Any Category</option>
<?php foreach ($categories as $category): ?>
<option value="<?php html($category['id']);?>"><?php html($category['name']);?></option>
<?php endforeach;?>
</select>
</div>
<div style="margin-bottom: 30px; width: 300px;">
<label for="text">Containing Text:</label>
<input type="text" name="text" id="text">
</div>
<div style="margin-bottom: 30px; width: 300px;">
<input class="btn btn-primary" type="submit" name="action" value="Search">
</div>
</div>
</form>
</div>
Change the margin-bottom: 30px; on all 4 div to margin: 30px auto;
If you want the align to centre then also add text-align:center; along with this margin: 30px auto;
Codepen: https://codepen.io/manaskhandelwal1/pen/PoGdxpa
I wanna make it in a way that after submitting the form. The form reverts back to the div special box containing the form , stating alll the errors. This means that I dont have to click the button to reopen to see the errors in the form. Any ways to work around my code? Greatly appreciated!!!!!
CSS:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#overlay {
display: none;
z-index: 2;
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: relative;
z-index: 3;
p.padding;
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
margin: 150px auto 0px auto;
width: 500px;
height: 500px;
overflow:auto;
background: #FFF;
color: #000;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left:24px;
}
</style>
<script type="text/javascript">
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .8;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
}
</script>
</head>
<body>
<!-- Start Overlay -->
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
<p>Create Order
<p><?php
$timestamp=time(); require_once 'start.php';
?>
HTML:
<form action="tradeform.php" method="post" >
<input type="hidden" name="formSubmitted" value="true">
<?php echo $message; ?>
<?php ?>
<?php if ($haveErrors || $userArriveByClickingOrDirectlyTypeURL) : ?>
<fieldset>
<p>Symbol : <select name = "selection" id="selection">
<option disabled = "disabled" selected = "selected"> Choose one </option>
<option value="eur/usd">EUR/USD</option>
<option value="usd/jpy">USD/JPY</option>
<option value="usd/cad">USD/CAD</option>
<option value="eur/jpy">EUR/JPY</option>
<option value="eur/chf">EUR/CHF</option>
<option value="gbp/usd">GBP/USD</option>
<option value="aud/usd">AUD/USD</option>
<option value="usd/chf">USD/CHF</option>
</select><font color="red"><?php echo $selectionError?></font></p>
</fieldset> <fieldset>
<p> Date : <input type="datetime" value="<?php echo date("Y-m-d ",$timestamp); ?>"READONLY name="date"/></p>
<p> Type : <input type="radio" name="type" value="buy">Buy <input type="radio" name="type" value="sell">Sell<font color="red"><?php echo $typeError;?></font></p>
<p> Size : <input type="number"pattern="[0-9]+([\.|,][0-9]+)?" step="0.01"name="size"/><font color="red"><?php echo $sizeError?></font></p>
<p> Bid Price : <input id="bidprice" READONLY name="bidprice" type="text" value=""> <font color="red"><?php echo $bidpriceError?></font></p>
<p>Offer Price<input id="offerprice" READONLY name="offerprice" type="text" value=""><font color="red"><?php echo $offerpriceError?></font> </p>
<p> Stop Loss : <input type="number"step="any" name="stoploss"/><font color="red"><?php echo $stoplossError?></font></p>
<p> Take Profit : <input type="number"step="any"name="takeprofit"/><font color="red"><?php echo $takeprofitError?></font></p>
</fieldset>
<div align="center">
<input type="submit" value="Submit"/>
</div>
<?php endif; ?>
</form>
I'd suggest using JQuery for this
$('input[type=submit]').click(function(e) {
e.preventDefault();
$.post("tradeform.php", $(this).parents('form').serialize(), function(response) {
*INSERT RESPONSE HANDLER HERE*
});
});
Obviously it's cleaner to replace the input type submit by a button to avoid having to preventDefault().
Your handler could show error messages, hide the form or do what ever else you'd want it to. Since your form is relatively straight-forward, have you considered using error messages built-in to HTML5 forms?
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms_in_HTML
I have no experience with php at all. Some html, some javascript, but that is it.
All I want to do is have a drop-down list for database connections and then based on that connect to the database chosen. Simple enough but I can't seem to get the select option value. I've gone down a huge rat hole trying to figure this out. everything points me to isset($_POST['somevariable']) to get the value but I think I'm missing something key. Do i need to be using the form tag or something. no matter what I do, I can't get at the variable. Also, can I just do this all in one php script? other posts have multiple php scripts. I ended up adding a submit button to see if that is it... I just am coming up empty.. I'm missing something really dumb...
Here is my code:
<html>
<head>
<title>Liferay Utilities</title>
<style>
.label {
font-weight: bold;
margin: 10px 20px 10px 0;
float: left;
clear: left;
width: 200px;
}
.element {
margin: 10px 0;
width: 150px;
float: left;
}
</style>
</head>
<body>
<h1>Liferay Utilities</h1>
<hr style="border-bottom: #cac917 5px solid;" />
<p class="label">Choose Database:</p>
<select name="dbtype">
<option value="default">Select Database</option>
<option value="suntest">SUNTEST</option>
<option value="sundevo">SUNDEVO</option>
</select>
<input type="submit" name="submit" value="Next">
</p>
<?php
//just debugging
echo 'xx';
echo isset($_POST['submit']);
echo 'xx';
if (isset($_POST['dbtype']))
{
// I NEVER EVER GET IN HERE
echo 'in here';
}
?>
</body>
</html>
Any Help would be greatly appreciated.
HERE IS MY NEW CODE: IT WORKS NOW!!! Thank you all! Wish I had posted an hour ago... If there are any good websites out there were full examples and real-world ones, let me know.
<html>
<head>
<title>Liferay Utilities</title>
<style>
.label {
font-weight: bold;
margin: 10px 20px 10px 0;
float: left;
clear: left;
width: 200px;
}
.element {
margin: 10px 0;
width: 150px;
float: left;
}
</style>
</head>
<body>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<h1>Liferay Utilities</h1>
<hr style="border-bottom: #cac917 5px solid;" />
<p class="label">Choose Database:</p>
<select name="dbtype">
<option value="default">Select Database</option>
<option value="suntest">SUNTEST</option>
<option value="sundevo">SUNDEVO</option>
</select>
<input type="submit" name="submit" value="Next">
</p>
<?php
echo $_SERVER['PHP_SELF'];
//just debugging
echo 'xx';
echo isset($_POST['submit']);
echo 'xx';
if (isset($_POST['dbtype']))
{
// I NEVER EVER GET IN HERE
echo 'in here';
}
?>
</form>
</body>
</html>
Try:
<form action="page.php" method="post">
<select name="dbtype">
<option value="default">Select Database</option>
<option value="suntest">SUNTEST</option>
<option value="sundevo">SUNDEVO</option>
</select>
<input type="submit" name="submit" value="Next">
</form>
in your php do echo $_POST["dbtype"]; to see if you get the correct result.
Change page.php for the name of the page you are submitting the form to.
You not defining the method. At the very least you must have that in order to use $_POST. To do that you must wrap your input/select in a form
<form method="post">
<select name="dbtype">
<option value="default">Select Database</option>
<option value="suntest">SUNTEST</option>
<option value="sundevo">SUNDEVO</option>
</select>
<input type="submit" name="submit" value="Next">
</form>
Note: Without giving an action attribute, the action will become the current page.
A few month back I posted a question about how to show the caption when hovering over an image.
This is the thread:
Don't understand how to show the caption when hovering image
The issue is that when I used TinyMce to edit the caption, it won't show the caption hovering. Instead it doesn't show any caption, it just hovers.
This is editor side (I shortened it):
<script language="javascript" type="text/javascript">//<![CDATA[
tinyMCE.init({
// General options
mode: "textareas",
elements : "ajaxfilemanager",
theme : "advanced",
});
//]]</script>
This is output:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<style>
#caption { display: none;font:12px Times New Roman;}
img:hover + #caption { position: absolute; display: block;}
.caption { display:none; text-decoration: none; font:12px Times New Roman;}
.image-with-caption:hover .caption {display: block; text-decoration: none;}
a:hover { text-decoration: none; }
</style>
<table width="100%">
<tr>
<td>
<?php echo(stripslashes($_POST['content'])); ?>
</td>
</tr>
</table>
</body>
</html>
This is the input I copy and paste the code into TinyMCE:
<table width="100%">
<tr>
<td>
<div class="image-with-caption">
<a href="images/artistc.php">
<img src="images/imagec08.jpg" style="width:209px" />
<p id="caption">Caption 3</p>
</a>
</div>
</td>
<td>
<div class="image-with-caption">
<a href="images/artistb.php">
<img src="images/imageb12.jpg" style="width:195px" />
<p id="caption">Caption 5</p>
</a>
</div>
</td>
<td>
<div class="image-with-caption">
<a href="images/artista.php">
<img src="images/imagea02.jpg" style="width:260px" />
<p id="caption">Caption 4</p>
</a>
</div>
</td>
</tr>
</table>
Any suggestions and advice would be appreciated. I just want to know why it doesn't show the caption.
I don't completely understand your question, but I see you have several tags with same id. That is not allowed. Maybe if you fix that, it helps to fix the issue. You should replace the id="caption" by class="caption" (or anything else), and then, modify your css replacing #caption by .caption