We Keep Coding

Why do I get function undefined error from html doc?

I have written a small chat app.
At first, all the code was contained in the one HTML document, and worked ok.
After seperating the CSS, HTML, and JS into seperate files.
The function, register_popup, invoked from within the HTML doc, now gererates;
"ReferenceError: register_popup is not defined"
I can see that the script is loading and from the developer tools I see no issues, all 200's and 302's.
THE HTML
<div class="sidebar-name">
<a href="#" onclick="register_popup('user4',
'USER4');">
<img width="30" height="30" src="" />
<span>user4</span>
</a>
script can be seen loading...
Am using,
<script>
var url = "static/js/chatpop.js";
$.getScript(url);
</script>
Have alos tried changing the HTML:
<div class="sidebar-name">
<a href="javascript:register_popup('user3', 'USER3');">
<img width="30" height="30" src="" />
<span>user3</span>
</a>
</div>
but that does not work either. As mentioned, I get a 200 on loading the script, and when contained in the same page everything worked. Only after separating the code into respective files does the error happen,
The following can also be seen loading ok.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3 /jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Any help welcome ...
The Function
function register_popup(id, name)
{
for(var iii = 0; iii < popups.length; iii++)
{
//already registered. Bring it to front.
if(id == popups[iii])
{
Array.remove(popups, iii);
popups.unshift(id);
calculate_popups();
return;
}
}
var element = '<div class="popup-box chat-popup" id="'+ id +'">';
element = element + '<div class="popup-head">';
element = element + '<div class="popup-head-left">'+ name +'</div>';
element = element + '<div class="popup-head-right">✕</div>';
element = element + '<div style="clear: both"></div></\
div><div class="popup-messages">\
<form action="chatpop/post" id="chat-form" method="post">\
<textarea style="resize:none;"cols="41" rows="14" >\
</textarea><input type="submit" id="chat-form" value="Send">\
</input></form></div></div>';
document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;
popups.unshift(id);
calculate_popups();
}

Here
<script>
var url = "static/js/chatpop.js";
$.getScript(url);
</script>
You're attempting to import the script in an asynchronous way and invoke some functions defined in the script immediately in your html (before the script is actually loaded).
You should either refer your script in the header in a blocking manner like:
<script src="static/js/chatpop.js" />
or changing your anchor tag once the script is fetched:
...
<a id="myAnchor">
...
$.getScript(url).done(function(){
$("#myAnchor").attr("href", register_popup('user3', 'USER3'))
});
}

Including a common html header in all pages in website of 20 pages (with active class)

Assume I have 20 navbar items, each one linking to a different page on my website. And on each page those 20 items remain the same. To avoid copy-pasting across all .html files, other solutions have suggested doing this with php. But how would I make the active menu item lit white for example? I want to refrain from copy-pasting the header across to all the .html files, because if I want to add one more navbar item, I will have to manually add it to all .html files.
There must be a simple solution with an active item for the active page.
========EDIT========
Naomik, your javascript solution looks most promising, although I currently can't get it to work (see second edit below).
My navbar is defined in nav.html:
<nav id="nav" class="navbar navbar-inverse">
<div>
<ul id="navigation" class="nav navbar-nav navbar-left">
<li class="active"><a href="about.html" >About</a></li>
<li><a href="services.html" >Services</a></li>
<li><a href="pricing.html" >Pricing</a></li>
</ul>
</div>
</nav>
And this is one of the three html pages (about.html). I use JS to load in the nav.html file. The JS snippet before the closing body tag is the one provided by naomik.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$.get("nav.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
</script>
</head>
<body>
<!-- *** NAVBAR *** -->
<div id="nav-placeholder"></div>
<!-- *** MAIN TEXT *** -->
<h1>ABOUT</h1>
<script>
function removeQueryString(url) {
return url.split('?')[0]
}
[].forEach.call(document.querySelectorAll('a'), function(elem) {
if (removeQueryString(elem.href) === removeQueryString(window.location.href))
elem.classList.add('is-active')
else
elem.classList.remove('is-active')
})
</script>
</body>
</html>
============EDIT==========
Although Naomik's solution leads to a flashing website on every load of a page. I have therefore applied Relisora's solution.
Thanks

You first want to give each of your 20 pages a name ( or a number ).
On each page, write the page name
<?php $page_name = "index" ?>
Then you import your navbar
<?php include 'navbar.php'; ?>
Now in your navbar.php you want to check on what $page_name you are
<?php if ($page_name == 'index') {echo ' id="active"';} ?>
And you do that for each page you have.
Now you'll just want to have #active {} in your CSS to determine the style, and your current page will show with active style.
Edit :
Now that we can write id="active", we want it to be in liso we can use the class :
<li<?php if ($page_name == 'index') {echo ' id="active"';} ?>>Home page</li>
Don't forget to add the link :
<li<?php if ($page_name == 'index') {echo ' id="active"';} ?>><a href="#" >Home page</a></li>

Don't do this this with PHP. You can add a little JavaScript to the end of your HTML before the closing </body> tag
Notice: Clicking the links in the snippet preview will not work for obvious reason. They are only there to show you that the correct link will highlight.
StackOverflow Code Snippets run from the URL http:stacksnippets.net/js. Knowing this, we can verify that our code works by making sure any href="/js" links get the is-active class.
After reading that notice above, click the Run code snippet button below
code {
font-family: monospace;
background-color: #ccc;
padding: 0.25rem;
}
.is-active {
background-color: blue;
color: white;
}
a {
display: inline-block;
padding: 0.25rem 0.5rem;
}
<h4>
This window is currently at url:<br>
<code>http://stacksnippets.net/js</code>
</h4>
js
html
php
<p>The <b>js</b> link above gets the is-active CSS class because it matches the window's current pathname</p>
<script>
[].forEach.call(document.querySelectorAll('a'), function(elem) {
if (elem.pathname === window.location.pathname)
elem.classList.add('is-active')
else
elem.classList.remove('is-active')
})
</script>
Notice that each a element in the original HTML does not have any class attribute. After the JS runs, notice that only the js link will automatically be given the is-active CSS class.
Here's a jQuery solution for you.
code {
font-family: monospace;
background-color: #ccc;
padding: 0.25rem;
}
.is-active {
background-color: blue;
color: white;
}
a {
display: inline-block;
padding: 0.25rem 0.5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>
This window is currently at url:<br>
<code>http://stacksnippets.net/js</code>
</h4>
js
html
php
<p>The <b>js</b> link above gets the is-active CSS class because it matches the window's current pathname</p>
<script>
function highlightActiveLinks() {
$('a').filter(function(idx, elem) {
return elem.pathname === window.location.pathname
}).addClass('is-active')
}
highlightActiveLinks()
</script>
In yours, you will need this tho. This can't be demo'd in the SO snippet, sorry.
$.get('nav.html', function(data) {
// ...
highlightActiveLinks()
})

make a .html file with just the navbar and include it in an iframe
<iframe src="navbar.html"/>

Here is some sample php code that iterates through an array of paths and constructs a menu.
If the function is given an active path (current path) as an input it compares to each path and if they match it adds a class to the link.
I've hard coded an active path to demonstrate the output.
You can bundle all this up into a file called something like nav.php and include it on each page.
<?php
include 'includes/nav.php';
?>
nav.php:
<?php
$paths = array(
'/foo/',
'/foo/bar/',
'/foo/baz/',
);
function nav($paths, $active_path = null) {
$o = '';
foreach($paths as $path) {
$a_class = $active_path == $path ? 'active' : '';
$o .= "<a class='$a_class' href='$path'>$path</a><br />\n";
}
return $o;
}
$active_path = strtok($_SERVER["REQUEST_URI"], '?');
$active_path = '/foo/bar/';
?>
<?php echo nav($paths, $active_path); ?>
Output:
<a class='' href='/foo/'>/foo/</a><br />
<a class='active' href='/foo/bar/'>/foo/bar/</a><br />
<a class='' href='/foo/baz/'>/foo/baz/</a><br />
Personally however I prefer adding the active class with javascript. In which case you can just construct a html snippet and take advantage of the php include, server side include, or js include to add the html to each page.

for bootstrap
<a class="nav-link <?php if ($page_name == 'index') {echo "active";} ?> href="index.php">Home</a>
or in shorthand
<a class="nav-link <?php echo ($page_name == 'index') ? "active" : "";?> href="index.php">Home</a>

First of all rename the file name sample.html with sample.php
just use include syntax for php:
<?php include("sample.php"); ?>
or
<?php require("sample.php");?>
Add this in all 20 pages after remove the code.
Hope this will helps!

It can do by php.
First you create all pages as php files.
Create one file as nav_menu.php. In this page code all menu items.
In all pages instead menu codes include nav_menu.php
To give active class use$_SERVER["SCRIPT_NAME"] to check current url equals to particular url. If it is equal add class active.

How can i make a popup with expire session

I have an image popup that appears on every page I navigate.
I need to know how is it possible to make it disappear if I click on close, it won't show up again for that session.
<body onclick="document.getElementById('anuntImportant').style.display='none'">
<div id="anuntImportant" style="position: absolute; top:30%;left:40%; display:block;overflow:visible; z-index:1000">
<img src="image/data/program-sarbatori.jpg">
</div>
</body>

You can use sessionStorage for that:
function hide() {
document.getElementById('anuntImportant').style.display='none';
if (window.sessionStorage) {
sessionStorage.setItem('hideAnuntImportant', true);
}
}
window.onload = function() {
if (window.sessionStorage) {
if (JSON.parse(sessionStorage.getItem('hideAnuntImportant'))) {
document.getElementById('anuntImportant').style.display='none';
}
}
}
<body onclick="hide()">
or use php session, you will need to call ajax request on click and and in php call start_session and set $_SESSION['anuntImportant'] to true and when you render the element you set style="display: none"
ajax.php
<?php
start_session();
$_SESSION['anuntImportant'] = true;
?>
yourpage.php
<?php
start_session();
?>
<body onclick="document.getElementById('anuntImportant').style.display='none'">
<div id="anuntImportant" style="position: absolute; top:30%;left:40%; display:<?= $_SESSION['anuntImportant'] ? 'none' : 'block' ?>;overflow:visible; z-index:1000">
<img src="image/data/program-sarbatori.jpg">
</div>
</body>

How to change logo in php header when change the header js class and CSS

Many time i have found a lot of solution on this pages and thanks for every help! I hope i can found one more new! :-)
I need change logo in header,
Now, when js work make a new class, with css I make a new layout but the logo is in php file...
So: when the page scroll the header change, but i can not change the logo in the header because is in php and with the css i cann't found a solution
This is the php code:
<!-- header -->
<header class="header clear" role="banner">
<!-- logo -->
<div class="logo">
<a href="<?php echo home_url(); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="logo-img">
</a>
</div>
<!-- /logo -->
this is the js (i don't know if need to know)
$(document).ready (function () {
$(window).scroll (function () {
var sT = $(this).scrollTop();
if (sT >= 100) {
$('.header').addClass('cambio_header')
}else {
$('.header').removeClass('cambio_header')
}
})
})
Some one have idea how write the php?
(the web site is make whit Wordpress)
Thanks so much!

You could change the image in your javascript:
$(document).ready (function () {
var logo-top = '/url/to/logo.jpg';
var logo-scroll = 'url/to/logo-scroll.jpg';
$(window).scroll (function () {
var sT = $(this).scrollTop();
if (sT >= 100) {
$('.header').addClass('cambio_header').find('img.logo-img').attr('src', logo-scroll);
}else {
$('.header').removeClass('cambio_header').find('img.logo-img').attr('src', logo-top);
}
});
});
Or you could add both logos in the php file, and hide/show them with a css rule
<div class="logo">
<a href="<?php echo home_url(); ?>">
<img src="<?php echo get_template_directory_uri();?>/img/logo.png" alt="Logo" class="logo-img">
<img src="<?php echo get_template_directory_uri();?>/img/logo-scroll.png" alt="Logo" class="logo-img scroll">
</a>
</div>
.header .logo-img.scroll{
display:none;
}
.header.cambio_header .logo-img{
display:none;
}
.header.cambio_header .logo-img.scroll{
display:block;
}

I think that better way could be to place logo in CSS and in PHP will be only container for this logo. Then, when you will change the CSS, logo will be also changed.
<div id="logo-container"></div>
#logo-container {
width: logo_width;
height: logo-height;
background: url('path/ot/logo') cover;
}

Loading image from parent frame to child

I have an upload button on my main page that submits to a php form, then returns the image back to the main page. What I am trying to do now is get the image element to load to an Iframe in the parent page as a variable that I can put in a div. Everything is functioning properly until the image will not display in the part of the Iframe, I think I am close but cannot see what is wrong in my code.
index.html
just the javascript , iframe, and id where the messages appears
<script type="text/javascript">
function updatepicture(pic) {
document.getElementById("image").setAttribute("src", pic);
$("#iFrameThingy").contents().find("#message").attr("src","photos/cw/briantest/" +pic);
}
</script>
<iframe id="iFrameThingy" src="Templates/template2/index.html" width="100%" height="4500" name="search_iframe"></iframe>
<p id="message">Upload message will go here.</p>
iframe.html
<script type="text/javascript">
function updatepicture(pic){
document.getElementById("image").setAttribute("src",pic);
}
</script>
--> Where I am trying to place the image
<div class="caption2">
<img id="productImage" id="images/product.png"alt="Product" height="416" width="417">
</div>
I had this working at one point but mistakenly changed something and now it is not working but I know I am close. Any help is appriciated
upload.php
<?php
if ($_FILES['file']['size'] > 0) {
if ($_FILES['file']['size'] <= 153600) {
if (move_uploaded_file($_FILES['file']['tmp_name'], "images/".$_FILES['file']["name"])) {
// file uploaded
?>
<script type="text/javascript">
parent.document.getElementById("message").innerHTML = "";
parent.document.getElementById("file").value = "";
window.parent.updatepicture("<?php echo 'images/'.$_FILES['file']["name"]; ?>");
</script>
<?php
} else {
// the upload failed
?>
<script type="text/javascript">
parent.document.getElementById("message").innerHTML = "<font color='#ff0000'>There was an error uploading your image. Please try again later.</font>";
</script>
<?php
}
} else {
// the file is too big
?>
<script type="text/javascript">
parent.document.getElementById("message").innerHTML = "<font color='#ff0000'>Your file is larger than 150kb. Please choose a different picture.</font>";
</script>
<?php
}
}
?>
index.html (submit form)
<form id="form" method="post" action="upload.php" enctype="multipart/form-data" target="iframe">
<input type="file" id="file" name="file" />
<input type="submit" name="submit" id="submit" value="Upload File" />
Upload message will go here.

Change this line:
document.getElementById("image").setAttribute("src",pic);
to this:
document.getElementById("productImage").setAttribute("src",pic);
And change this:
<img id="productImage" id="images/product.png"alt="Product" height="416" width="417">
to this:
<img id="productImage" alt="Product" height="416" width="417">

You are using incorrect id there:
$("#iFrameThingy").contents().find("#message").attr("src","photos/cw/briantest/" +pic);
You should use productImage instead of message. Use this:
$("#iFrameThingy").contents().find("#productImage").attr("src","photos/cw/briantest/" +pic);