Improving pure HTML+CSS iframe menu -

-

i'm making website simple menu bar @ top of each page. make menu easy update, hard-coding whole menu each page not ideal. modifying , re-uploading every page cumbersome , since website hosted statically, cannot use php create menu either.

my current solution uses iframe , separate html file menu.
pasted in body of each new page:

<iframe src="menu.html" width="100%" height="55x" id="menuframe" style="border:none"></iframe>

i this, works nicely:

<!-- `theme.css` -->  #menudiv {  	width: 100%;  	height: 38px;  }  .menu-item {  	height: 20px;  	width: 120px;  	margin: 0;     	display: inline-block;     	text-align: center;     	padding: 4px;     	border-radius: 50px;     	background: 000000;     	border: 2px solid black;  }
<!-- `menu.html`: -->  <!doctype html>    <head>  	<meta charset="utf-8">  	<link rel="stylesheet" type="text/css" href="theme.css">  </head>    <body>  	<div align="center"><div id="menudiv" align="center">  		<a href="index.html" title="home" class="menu-item" target="_top">  home  </a>  		<a href="index.html" title="home" class="menu-item" target="_top">  </a>  	</div></div>  </body>    </html>

this works simple menu few buttons, doesn't scale well. if there enough buttons, iframe overflows , half buttons cut in half. if move on towards drop down menu css, menu items eaten overflow , cut off, etc.

how can make editable menu static website?

  • the menu must editable 1 file, la menu.html or similar.

  • i cannot use php.

  • i have never used javascript/jquery open solutions use them.

dont use iframe, if dont want hosting plan.

here how can still use single menu template each page.

1 can use jquery's load function. 

$(document).ready(function(){     $('#somecontainer').load('path-to-your-html'); });

2 create javascript file menu on each page.

   <script src="path-to-your-js"></script>

3 or can create html page include on each page with:

 <!--#include virtual="path-to-your-html" -->

Comments

Post a Comment

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

-
i had following code works fine on localhost: $document = new domdocument(); $document->loadhtml($p_result); $form = $document->getelementsbytagname('form')->item(0); // code continues using $form variable after same code updated on outside server, loadhtml() failed , issued warning. warning: domdocument::loadhtml() expects parameter 1 valid path, string given in path/name/to/script.php returned null instead of object code pretty gets fatal error. note contents of $p_result absolutely same on outside server , on localhost. but why displays kind of warning , why not work? doesn't loadhtml() expects argument 1 string in first place? why method expects parameter 1 valid path ? just make clear i'm not calling loadhtmlfile() , i'm calling loadhtml() . thanks. you're affected one of php bugs . issue present in php 5.6.8 , 5.6.9. have affected php version on server, , bug-free version on localhost. the bug forbids null
Read more

python - How to create jsonb index using GIN on SQLAlchemy? -

-
here's current code creating index jsonb. index("mytable_data_idx_id_key", mytable.data['id'].astext, postgresql_using='gin') but got error. sqlalchemy.exc.programmingerror: (psycopg2.programmingerror) data type text has no default operator class access method "gin" hint: must specify operator class index or define default operator class data type. [sql: "create index event_data_idx_id_key on event using gin ((data ->> 'id'))"] is there way create index on sqlalchemy? the postgresql specific sqlalchemy docs @ http://docs.sqlalchemy.org/en/latest/dialects/postgresql.html#operator-classes mention postgresql_ops dictionary provide "operator class" used postgresql, , provide example illustrating use: index('my_index', my_table.c.id, my_table.c.data, postgresql_ops={ 'data': 'text_pattern_ops',
Read more

c# - TransactionScope not rolling back although no complete() is called -

-
i'm using transactionscope rollback transaction fail bool errorreported = false; action<importerrorlog> newerrorcallback = e => { errorreported = true; errorcallback(e); }; using (var transaction = new transactionscope()) { foreach (importtaskdefinition task in taskdefinition) { loader.load(streamfile, newerrorcallback, task.destinationtable, processingtaskid); } if (!errorreported) transaction.complete(); } i'm sure there no transactionscope started ahead or after code. i'm using entity framework insert in db. regardless state of errorreported transaction never rolled in case of error. what missing ? transactionscope sets transaction.current . that's does. wants transacted must @ property. i believe ef each time connection opened reason. probably, connection open when scope installed. open connection inside of scope or enlist manually. ef has nasty "design decision": default opens
Read more