At the moment I have a dropdown menu. This dropdown menu will display one column of data of my database. This works fine for me.
However, I want achieve this functionality: when the user clicks one option in the dropdown menu the page will give the user a phrase containing the option he clicked, like this "You choose [the option he clicked]!".
What should I do to achieve this?
This is my dropdown menu code:
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #3D85C6;
color: white;
font-family: sans-serif;
font-weight: bold;
font-size: 18px;
padding: 18px;
border: none;
cursor: pointer; }
.dropdown {
position: left;
display: inline-block; }
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }
.dropdown-content a {
color: black;
font-family: sans-serif;
padding: 12px 16px;
text-decoration: none;
display: block; }
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block; }
.dropdown:hover .dropbtn {
background-color: #3D85C6; }
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Orgnazitions</button>
<div class="dropdown-content">
<?php
$db = new mysqli('localhost:8889', 'root', 'root', 'VBS');
if($db->connect_errno > 0){
die('Unable to connect to database [' . $db->connect_error . ']');
}
$sql = "SELECT * FROM Orgnazition";
if (!$result = $db->query($sql)){
die('There was an error running the query [' . $db->error . ']');
}
while ($row = $result->fetch_assoc()) {
echo "<a href='choose.php'>".$row['OrgName']."</a>";
} ?>
</div>
</div>
</body>
</html>
To solve your problem you need to add javaScript code because you can't change html text from other elements with CSS.
I could show you a solution in jQuery if you want me to.
Also I could give you a dropdown list that I made by myself.
Here's the solution:
With jQuery you just need to do this:
$(".options").click(function () { //click event on the option
var text_to_show = $(this).html(); //saves the option into a variable $("#show_result_id").html("Your answer:" + text_to_show);
//displays the answer on your page
});
This should work for you. If you have any questions, just comment.
Related
I have set up an accordion to present terms and conditions on a website which works until I attempt to pull a page from elsewhere on the server.
My coding so far is as follows:
CSS:
/* Accordion controls & Styles */
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
Accordion:
<button class="accordion">Standard Terms</button>
<div class="panel">
<p>
<?php include(SHARED_PATH . '/legal/inserts/standard_terms.php'); ?>
</p>
</div>
and JavaScript:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
Standard terms page to render:
<?php include(SHARED_PATH . '/public_header.php'); ?>
<ol>
<h3><li>What we provide</li></h3>
</ol>
<?php include(SHARED_PATH . '/public_footer.php');?>
Everything works as it should until I put the <?php include(SHARED_PATH . '/legal/inserts/standard_terms.php'); ?> in if I remove it and place outside of accordion it renders fine and displays the content.
Only inside accordion does it stop everything in its tracks.
It doesn't render the rest of the page, and no errors are thrown.
Any Ideas?
Sorry found the answer, realised my mistake after posting the standard terms page. header and footer have already been called by previous page.
I'm looking at building a dynamic navigation something that looks similar to that in w3schools (I don't have enough points to be able to embed images yet so stuck with links only for now):
These will be based off the following PHP table:
enter image description here
Where parent_id and child_id are 0 I want those pages to be the main navigation selections, so in this case I'm looking to have DMX, VMAX, VMAX3, VMAX AF and PowerMax to show on the navigation bar.
After that the idea is to list the models of each product, however this is only to appear when the user is hovering over one of the main selections, the parent_id is to equal the id of the page.
Finally when you hover over the result of the parent_id you will get the child_id, this will be decided by the child_id equaling the parent_id.
The functions I'm calling in my code is:
function loop_array($array = array(), $parent_id = 0){
if(!empty($array[$parent_id])){
echo '<ul>';
foreach($array[$parent_id] as $items){
echo '<li>';
?>
<?php echo $items["title"] ?>
<?php loop_array($array, $items['id']);echo '<br><br><br><br>';
}
echo '</ul>';
}
}
function display_menus(){
$con = mysqli_connect("localhost", "root", "", "solvedesktop");
$query = $con->query("SELECT * FROM pages WHERE published = 1");
$array = array();
if(mysqli_num_rows($query)){
while($rows = mysqli_fetch_array($query)){
$array[$rows['parent_id']][] = $rows;
}
loop_array($array);
}
}
The code I'm using on the home page is:
<?php require_once(__DIR__."/../includes/functions.php"); ?>
<?php require_once(__DIR__."/../includes/config.php"); ?>
<?php require_once(__DIR__."/../includes/header.php"); ?>
<?php $page = getPage($_GET["id"]); ?>
<h2 style="text-align:center;">PSE Solve Desktop</h2>
<?php display_menus(); ?>
</div>
<div>
<?php echo returnPageError(); ?>
</div>
<h2> <?php echo $page['title']; ?> </h2>
<br>
<p> <?php echo $page['body']; ?></p>
<script>
CKEDITOR.replace( 'body' );
</script>
The CSS I currently have is:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00008B;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #000000;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
So basically I can't get further than the below image when trying to build the navigation bar:
enter image description here
I can get the main sections such as DMX, VMAX, VMAX3, VMAX AF and PowerMax to populate correctly. However it's not showing in one horizontal line and the parent_ids show only appear if the user hovers over the main section.
Any help would be gratefully appreciated :)
Here the problem is with CSS just add some max-width to menu items.
by this solved or not let me know.
I have a listbox, I need it to on select neither change text color as active or inactive, focus or not focused. Its click add, click add. On this one the text stays white on select, and turns black when click out of the listbox. I need it to stay red and only background to change when its clicked, to show it was clicked, then just go back to black. (Ive been at this for a couple days before asking, might have errors in the code after rewriting it so many times.)
<select onclick="" class="sometext" name="sometext" size="5">
<?php
$sql = "select * FROM mom WHERE type='feedme'";
foreach ($dblsm->query($sql) as $row){
echo "<option value=$row[id]>$row[title]</option>";
/* Option values are added by looping through the array */
}
?>
</select>
css
/* turn it off completely */
select:active, select:hover, select:focus {
outline: none;
}
select option:hover {
background: linear-gradient(#a81b1b, #000000);
background-color: #000000 !important; /* for IE */
color: #a81b1b !important;
outline: none;
}
select option:checked, select option:active, select option:disabled {
background: linear-gradient(#000000, #000000);
background-color: #000000 !important; /* for IE */
color: #a81b1b !important;
}
.sometext::-webkit-scrollbar {
width: 8px;
}
/* Track */
.sometext::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
.sometext::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #a81b1b;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.sometext {
color: #a81b1b;
background-color: black;
width: 225px;
border: 3px inset;
border-color: #a81b1b;
scrollbar-face-color: #367CD2;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #a81b1b;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
}
So, if I understand your question better now from your comments, I'm not sure how to accomplish this with the default options of a form's select box. What I did come up with for you is a way to get a similar outcome with plain ol' html/js/css and hopefully you can adapt this to your needs:
<html>
<head>
</head>
<body>
<div>
<ul class="redhue">
<li onClick="changeSelectionTo(this)">1</li>
<li onClick="changeSelectionTo(this)">2</li>
<li onClick="changeSelectionTo(this)">3</li>
</ul>
</div>
<script>
var currentlySelected;
function changeSelectionTo(item) {
if(currentlySelected){
currentlySelected.classList.remove("selected");
}
currentlySelected = item;
item.classList.add("selected");
console.log(item.innerText);
}
</script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li:hover,
.selected {
background: linear-gradient(#a81b1b, #000000);
background-color: #000000; /* for IE */
color: #a81b1b;
}
.redhue {
color: #a81b1b;
background-color: black;
width: 225px;
border: 3px inset;
border-color: #a81b1b;
list-style: none;
}
</style>
</body>
</html>
I left the console.log statement to show how to retrieve the list item's value for whatever you would need it for... Hope this helps!
I have a Php input system with 5 fields: Number, Link, Article, Name and Date. I'm trying to have the information brought inside 2 different drop down menu's. For example in the database I have:
1........http link.....Bloomberg Links........Bloomberg....2017-03-22
2........http link.....Forbes Links...........Forbes.......2017-03-22
So, I need the articles with the Bloomberg Name to go into the Bloomberg drop down menu and the articles with the Forbes Name to go into the Forbes drop down menu.
Currently, I have the 2 drop down menu's on the page and both Bloomberg and Forbes articles are going into both menu's because I don't know how to make them go into the proper drop down menu. The page is http://www.althedge.xyz/new.html
I'd appreciate is someone could show me the code that would make the Bloomberg articles go into the Bloomberg drop down menu and the Forbes articles go into the Forbes drop down menu. The html code and the php code are below. Thanks for the help?
<?php
// Database Settings
define('DB_HOST', 'localhost');
define('DB_PORT', '*****');
define('DB_USER', '*****');
define('DB_PASS', '*****');
define('DB_NAME', '*****');
// Connection to Database
$database = new MySQLi(DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT);
$sql = 'SELECT * '
. ' FROM crypto ORDER BY Date DESC, Number DESC';
$resultSet = $database->query($sql);
$currentDate = false;
while ($row = $resultSet->fetch_assoc())
{
if ($row['Date'] != $currentDate){
echo
$row['Date'] ;
$currentDate = $row['Date'];
}
echo
'<a rel="nofollow" rel="noreferrer"href="'.
$row["Link"].
'"style="text-decoration: none;"'.
'">'.
$row["Article"].
'</A>'.
'</sub><div style="height: 25px;"></div></li><li>';
}
$html .= '</ul></li></table>';
echo $html;
?>
<html >
<head>
<meta charset="UTF-8">
<title>hedge</title>
<style>
li {
line-height: 1.10;
}
#font-face {
font-family: MesloLGL-Regular;
src: url(/MesloLGL-Regular.ttf);
}
span *
{
font-size: 12px !important;
}
body * {
background: black;
font-family: MesloLGL-Regular !important;
font-size: 12px !important;
}
body {
background-color: #000;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
list-style: none;
}
.nav .button-dropdown {
position: relative;
}
.nav li a {
display: block;
color: #fff;
background-color: #000;
padding: 0px 20px;
text-decoration: none;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #FFF;
}
.nav li a:hover, .nav li a.dropdown-toggle.active {
background-color: #000;
color: #fff;
}
.nav li a:hover span, .nav li a.dropdown-toggle.active span {
color: #fff;
}
.nav li .dropdown-menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 3px;
text-align: left;
z-index: 999999;
}
.nav li .dropdown-menu.active {
display: block;
}
.nav li .dropdown-menu a {
width: 350px;
}
h3 {
text-decoration: underline;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<strong>
<div style="text-align: center;">
<div style="display: inline-block; text-align: left">
<body translate="no" >
<ul class="nav">
<li class="button-dropdown">
<a rel="nofollow" rel="noreferrer"href="javascript:void(0)" class="dropdown-toggle">
<span><u>bloomberg</u><font color="#00FF00"> new</font></span></a><ul class="dropdown-menu"><li>
<?php include 'searchnew.php';?>
<br><br>
<ul class="nav">
<li class="button-dropdown">
<a rel="nofollow" rel="noreferrer"href="javascript:void(0)" class="dropdown-toggle">
<span><u>coindesk</u><font color="#00FF00"> new</font></span></a><ul class="dropdown-menu"><li>
<?php include 'searchnew.php';?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js"></script>
<script>
jQuery(document).ready(function (e) {
function t(t) {
e(t).bind("click", function (t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function () {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
//# sourceURL=pen.js
</script>
</strong>
</head>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;`enter code here`
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>
<div class="dropdown">
<span>Mouse over me 1</span>
<div class="dropdown-content">
<ul>
<li>Hello World 1!</li>
<li>Hello World 1!</li>
<li>Hello World 1!</li>
</ul>
</div>
</div>
<div class="dropdown">
<span>Mouse over me 2</span>
<div class="dropdown-content">
<ul>
<li>Hello World 2!</li>
<li>Hello World 2!</li>
<li>Hello World 2!</li>
</ul>
</div>
</div>
</body>
</html>
Anyone can tell me what's wrong with these code...
I can't make sub menu to be shown...
I think my mistake at the part where I call sub menu from database. But I checked, there is nothing wrong..
maybe there are some mistake at css. but I don't know...
php code:
<html>
<head>
<link rel="stylesheet" href="<?php echo"css/copy.css" ?>" type="text/css" />
</head>
<?php include "koneksi.php"?>
<body>
<div id="page-wrap">
<ul class="dropdown">
<?php
/*where I select main menu from table mainmemnu*/
$main = mysql_query("SELECT * FROM mainmenu WHERE aktif='Y'");
while($r=mysql_fetch_array($main))
{
echo"<li><a href='$r[link]'><span>$r[nama_menu]</span></a>";
/*where I select sub menu from table submenu*/
$sub = mysql_query
("SELECT * FROM submenu, mainmenu WHERE submenu.id_main = mainmenu.id_main AND submenu.id_main=$r[id_main]");
$jml = mysql_num_rows($sub);
if($jml > 0)
{
echo"<div><ul>";
while($w = mysql_fetch_array($sub))
{
echo
"<li>
<a href='$w[link_sub]'>
<span>
ยป $w[nama_sub]
</span>
</a>
</li>";
}
echo"</ul></div></li>";
}
else
{
echo"</li>";
}
}
?>
</ul>
</div>
</body>
</html>
css code:
* {margin: 0; padding: 0;}
body {font: 14px Helvetica, San-Serif;}
#page-wrap{width: 800px; margin: 0px auto; padding-left: 419px;}
a { text-decoration: none; }
ul { list-style: none; }
p { margin: 15px 0; }
/* Level One */
ul.dropdown{position: relative;}
ul.dropdown li{font-weight: bold; float: left; zoom: 1; background: #ccc;}
ul.dropdown a:hover{color: #000;text-decoration: none;}
ul.dropdown a:active{color: #222;}
ul.dropdown li a{display: block; padding: 4px 8px; border-right: 1px solid #333; color:#222;}
ul.dropdown li:last-child a{border-right: none;}
ul.dropdown li.hover, ul.dropdown li:hover{background: #ffa500; color: black; position: relative; z-index: 9;}
ul.dropdown li.hover a{color: black;}
/* Level Two */
ul.dropdown ul{width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0;}
ul.dropdown ul li{font-weight: normal; background: #DCDCDC; color: #000; z-index: 9; border-bottom: 1px solid #ccc; float: none;}
ul.dropdown ul li a{border-right:none; width:100%; display: inline-block;}
the sub menu won't come out when i bring cursor on the menu...
I would like to see what the HTML generated by the code looks like, but IMO, you are using way too many divs, spans, tags that are not needed..
Check out if this jsfiddle can help you out, its made purely out of HTML & CSS.
This is the part of the CSS you might be missing.
ul.dropdown > li > ul {
display: none;
}
ul.dropdown > li:hover > ul {
display: block;
}
http://jsfiddle.net/x9D37/
You need a javascript to manipulate the block you want to see when hovering over a tag.
You cannot hover over a hidden tag.
You are missing the css that will make the child div display.
Basically it comes down to:
/*hiding initially*/
.dropdown li ul
{
position: absolute;
display: none;
}
/*display selectively*/
.dropdown li:hover > ul
{
display: block;
}