As per image below I want to show the div beneath the reply button.
(Div being the text box and send button)
My code below works except no matter which reply button you press the text box opens on the first reply button caused by the javascript function hiding MyDiv and each ID being MyDiv. The problem lies that this need to be dynamic as a I dont know ho many messages I will have.
This is not all the code but should be enough to see what is going on.
UPDATED for minimal code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<p>Example</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<br/>
<br/>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<br/>
<br/>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
</body>
</html>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
https://jsfiddle.net/vzcq7t0e/
Thanks
Ben
EDIT
Similar to this question but as above I need it to be dynamic.
Display div and hide another div by button press
EDIT 2
I am still struggling with this.. I have been trying to use jquery $(this).parent().hide();
but having no luck. Should I continue with this method or try something else?
So I worked it out. adding count ID to the ID tag and a class to hide all divs then show the div with the ID requested.
<div <?php echo 'id="myDIV ' . $x . '"' ?> class="reply" style="padding-top: 30px;">
<style>
.reply{
display: none;
}
#myDIV {
width: 100%;
margin-top: 30px;
display: none;
}
</style>
<script>
function myFunction(divid) {
var x = document.getElementById("myDIV " + divid);
if (x.style.display === "block") {
x.style.display = "none";
} else {
document.querySelectorAll('.reply').forEach(function(el) {
el.style.display = 'none';
});
x.style.display = "block";
}
}
</script>
Hi I am trying to make a autocomplete function where I use a search field and write the first letters of the name of a company. the code vill search an online database for the company and there will be a list of suggestions. for example
company1 street1 zipcode etc.
company2 astreet2 zipcode etc.
company3 street1 zipcode etc.
I will click on one of the listed companies and it vill populate field1 with company1 field2 street field3 zipcode etc. but I cant make it. I dont reallt know how to do this and Im trying to learn and understand but this is too complex for me so I hope any of you guys can hekp me - thanks in advance.
This is how my code looks like so far.
main page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="layout.css" rel="stylesheet" type="text/css">
<link href="menu.css" rel="stylesheet" type="text/css">
</head>
<style>
.kundsok {
border: 1px solid #a8d4b1;
background-color: #c6f7d0;
margin: 2px 0px;
padding: 40px;
border-radius: 4px;
}
#ftg-list {
float: center;
list-style: none;
margin- top: -3px;
padding: 0;
width: 190px;
}
#ftg-list li {
padding: 10px;
background: #f0f0f0;
border-bottom: #bbb9b9 1px solid;
}
#ftg-list li:hover {
background: #ece3d2;
cursor: pointer;
}
#search-box {
padding: 10px;
border: #a8d4b1 1px solid;
border-radius: 4px;
}
</style>
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#search-box").keyup(function() {
$.ajax({
type: "POST",
url: "readkund_eniro.php",
data: 'keyword=' + $(this).val(),
beforeSend: function() {
$("#search-box").css("background", "#FFF url(LoaderIcon.gif) no-repeat 165 px ");
},
success: function(data) {
$("#suggesstion-box").show();
$("#suggesstion-box").html(data);
$("#search-box").css("background", "#FFF");
}
});
});
});
function selkund(val, val2) {
$("#search-box").val(val);
$("#foretag_name").val(val);
$("#stad").val(val2);
$("#suggesstion-box").hide();
}
</script>
<body>
<div id="sidlayout">
<div id="content">
<?php include "menukunder.php"; ?>
<div class="kundsok">
<center>
<input type="text" id="search-box" name ="search-box" placeholder="kund" >
<div id="suggesstion-box"></div>
</form>
<h1></h1>
<H3></H3>
<center>
<form action="sida3ka.php" method="post">
<fieldset>
<label title="Skriv in företagets namn" for="foretag_name">Företag:</label>
<input type="text" name="foretag_name" id="foretag_name">
<label title="Skriv in stad" for="stad">Stad:</label>
<input type="text" name="stad" id="stad">
</fieldset>
</form>
</div>
</div>
</body>
</html>
on the other page called readkund_eniro.php the code looks like this
$url = 'https://api.eniro.com/cs/search/basic?profile=Martens&key=3653823918839001013&country=se&version=1.1.3&search_word
=' . $_POST["keyword"] . '&geo_area=stockholm';
$response = file_get_contents($url);
$json = json_decode($response, true);
if(!empty($json)) {
?>
<ul id="ftg-list">
<?php
foreach($json['adverts'] as $ftg) {
?>
<li onClick="selkund('<?php
echo $ftg["companyInfo"]['companyName'];
echo $ftg["address"]['streetName'];
?>');"><?php
echo $ftg["companyInfo"]['companyName'];
?>
</li>
<?php
}
?>
</ul>
<?php
}
I the database respons will be
$ftg["companyInfo"]['companyName']
$ftg["address"]['streetName']
$ftg["address"]['postCode']
and so on. thanks again
Best regards Johan
i think there is problem in API url at readkund_eniro.php file. can you please try with as below.
$url = "https://api.eniro.com/cs/search/basic?profile=Martens&key=3653823918839001013&country=se&version=1.1.3&search_word=".$_POST['keyword']."&geo_area=stockholm";
another thing i found with your response text inside
<li onClick="selkund('<?php echo $ftg["companyInfo"]['companyName'];?>', '<?php echo $ftg["address"]['streetName'];?>');"><?php
echo $ftg["companyInfo"]['companyName']. ', '. $ftg["address"]['streetName'].', '. $ftg["address"]['postCode'] ;
?>
</li>
I am working on a CSS tab design page and this is how it looks like:
This is it's code (test2.php):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/ajaxtabs.css" />
<script type="text/javascript" src="js/ajaxtabs.js">
</script>
</head>
<body>
<?php
$page = isset($_GET['test2']) ? $_GET['test2'] : "" ;
?>
<ul id="countrytabs" class="shadetabs" style="clear:both">
<!--<li>Tab 1</li>-->
<li>Client</li>
<li>Vendor</li>
<!--<li>Tab 4</li>-->
</ul>
<div id="countrydivcontainer" style="border:1px solid gray; width:100%; height:100%; margin-bottom: 1em; padding: 10px; clear:both;">
<p>This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</p>
</div>
<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
<hr />
</body>
</html>
But once I put this code inside a <div> in another code that calls upon it, it displays unnecessary space.
Here's my code for that (index.php):
<?php session_start(); ?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ISYS</title>
<link href="../css/main-style.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery.tools.min.js"></script>
<script src="../js/addfunction.js"></script>
<script src="../js/editfunction.js"></script>
<script type="text/javascript" language="javascript" src="../js/jquery.dataTables.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
var width = 700;
var height = 600;
var left = parseInt((screen.availWidth/2) - (width/2));
var top = parseInt((screen.availHeight/2) - (height/2));
var windowFeatures = "width=" + width + ",height=" + height +
",status,resizable,left=" + left + ",top=" + top +
"screenX=" + left + ",screenY=" + top + ",scrollbars=yes";
</script>
<script>
(function(document) {
'use strict';
var LightTableFilter = (function(Arr) {
var _input;
function _onInputEvent(e) {
_input = e.target;
var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
Arr.forEach.call(tables, function(table) {
Arr.forEach.call(table.tBodies, function(tbody) {
Arr.forEach.call(tbody.rows, _filter);
});
});
}
function _filter(row) {
var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}
return {
init: function() {
var inputs = document.getElementsByClassName('light-table-filter');
Arr.forEach.call(inputs, function(input) {
input.oninput = _onInputEvent;
});
}
};
})(Array.prototype);
document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
LightTableFilter.init();
}
});
})(document);
</script>
</head>
<body>
<?php
require("../dbconnect.php");
$page = isset($_GET['page']) ? $_GET['page'] : "test2" ;
?>
<div class="container">
<div class="header"><img src="../images/CTILOGO.jpg" width="20%" height="90" style="background-color: #8090AB; display:inline;" />
<img src="../images/logout.png" class="headermenu" style=" display:inline;" />
<img src="../images/home.png" class="headermenu" style=" display:inline;" />
<img src="../images/user.png" class="headermenu" style=" display:inline;" />
<!-- end .header --></div>
<div class="sidebar1" id="link_ul">
<ul class="nav">
<li>Client</li>
<li>Vendor</li>
<li>Product</li>
<li>Users</li>
<li>test</li>
</ul>
<script>
/*for active link*/
(function(){
$('#link_ul a').bind('click', function(e){
var me=$(this);
var as = $('#link').find('a');
as.removeClass('current');
me.addClass('current');
});
}());
</script>
<!-- end .sidebar1 --></div>
<div class="content">
<?php
include(''.$page.'.php');
?>
<!-- end .content --></div>
<div class="footer">
<p></p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
I want the index.php to look like the tabs in test2.php. I haven't change anything in the CSS part and everything's working fine except it's display. I am not sure where in the code's wrong. I'll appreciate any help.
Reset the CSS. Maybe browser adds some unwanted padding or margin. put this code at the top of your css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
UPDATE I am trying to echo a div after info is submitted on a contact form. My website is here: http://tinyurl.com/bdmhv7u
When you click on rsvp and enter the information, I have a graphic that I would like to be shown. Using this code, it shows, but only for an instant. Any ideas are appreciated.
<?php
ob_start();
session_start();
if( isset($_POST['submit'])) {
include("process.php");
unset($_POST['submit']);
} else {
}
ob_flush();
?>
<div id="gotit">
<div id="gotitimg">
<img src="images/gotit.png" width="100" height="100">
</div>
</div>
<script type="text/javascript" language="javascript">
$("#submit").click(function (event) {
$("#gotit").fadeIn(1000, function() {
});
});
</script>
#gotit {
position:fixed;
z-index:999;
margin-top:400px;
display:none;
width:100%;
}
#gotitimg {
float:right;
width:100px;
height:100px;
}
You did not provide the code, but you can try to add width and height to your div:
example
#gotit {
float:right;
width: 125px;
height: 125px;
background-image:url(../gotit.png);
position:fixed;
z-index:20;
margin-top:50px;
}
I want to load a google maps file with the jQuery
the logic is very easy i want that the page is reloaded every time that i send a new variables to the query...
the problem is the content doesn't load..
here is the code JavaScript....
<script type="text/javascript">
$(document).ready(function(){
function Display_Load()
{
$("#loading").fadeIn(900,0);
$("#loading").html("<img src='img/bigLoader.gif' style='border:none;' />");
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};
$("#pagination li").click(function(){
Display_Load();
$("#content").load("file_map.php", Hide_Load());
}
});
</script>
and here the html code
<body>
<div id="loading" ></div>
<div id="content" ></div>
</body>
this exemple is work well with other file php or html but just still not work with Google Maps i think that the problem is on the initialize() function on loading of page but i don't know how to solve it please who can help me
th'x a lot
There's an error in your JavaScript code, you haven't completed the click call (or the ready call; the nature of syntax errors means we don't really know which one is incomplete). So none of the code is running and you should be seeing a syntax error in the JavaScript console.
Using proper indentation can help you catch errors, it's well worth getting in the habit of doing so. Here's a properly-indented version of your code:
<script type="text/javascript">
$(document).ready(function(){
function Display_Load()
{
$("#loading").fadeIn(900,0);
$("#loading").html("<img src='img/bigLoader.gif' style='border:none;' />");
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};
$("#pagination li").click(function(){
Display_Load();
$("#content").load("file_map.php", Hide_Load());
}
});
</script>
As you can (now) see, you're missing the ); on the second-to-last line to complete the click call.
Once you fix that, separately there's an error on this line:
$("#content").load("file_map.php", Hide_Load());
// here -----^^
Just like any other function call, there you're calling Hide_Load and passing its return value into load. If you want Hide_Load to be the completion callback, you don't want to call it, you just want to pass the function reference — ditch the ():
$("#content").load("file_map.php", Hide_Load);
With the (), it's like you're calling $("#content").load("file_map.php", undefined); since the result of a function call to a function that doesn't use return is undefined.
Here the content of an exemple file of google maps file_map.php.....
<?php include_once($_SERVER['DOCUMENT_ROOT'] . "/config.php");
require_once($lib_path."mysql.class.php");
require_once($lib_path."document.php");
require_once $lib_path . "userAccount.php";
require_once($lib_path."adsearch_class.php");
?>
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="http://maps.google.com/maps?file=api&v=2&key=------------------------------------" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
this file is work well without jQuery...
but no result when i call it with the jQuery..
the index.php file is here
<?php
include_once($_SERVER['DOCUMENT_ROOT'] . "/config.php");
require_once($lib_path."mysql.class.php");
require_once($lib_path."document.php");
require_once $lib_path . "userAccount.php";
require_once($lib_path."adsearch_class.php");
$per_page = 5;
//getting number of rows and calculating no of pages
$rsd=new db_publish;
$rsd->connect();
$sql = "SELECT *FROM `table` LIMIT 0 , 30";
$rsd->query($sql);
$counteur = $rsd->count();
$pages = ceil($counteur/$per_page);
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Display Loading Image
function Display_Load()
{
$("#loading").fadeIn(900,0);
$("#loading").html("<img src='img/bigLoader.gif' />");
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};
//Default Starting Page Results
$("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
Display_Load();
$("#content").load("file_map.php");
//Pagination Click
$("#pagination li").click(function(){
Display_Load();
//CSS Styles
$("#pagination li")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
//Loading Data
var pageNum = this.("#pagination li").id;
$("#content").load("file_map.php?page=" + pageNum);
});
});
</script>
<style>
body { margin: 0; padding: 0; font-family:Verdana; font-size:15px }
a
{
text-decoration:none;
color:#B2b2b2;
}
a:hover
{
color:#DF3D82;
text-decoration:underline;
}
#loading {
width: 100%;
position: absolute;
}
#pagination
{
text-align:center;
margin-left:120px;
}
li{
list-style: none;
float: left;
margin-right: 16px;
padding:5px;
border:solid 1px #dddddd;
color:#0063DC;
}
li:hover
{
color:#FF0084;
cursor: pointer;
}
</style>
<div align="center">
<div id="loading" ></div>
<div id="content" ></div>
<table width="800px">
<tr><Td>
<ul id="pagination">
<?php
//Show page links
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
</ul>
</Td></tr></table>
</div>
as i tell you on the first time this exemple is work well just with google maps the content can't load....
on the result page i have just
<div id="map_canvas" style="width: 500px; height: 300px"></div>
without the maps content inside