add frame on page

drascom · Post by **drascom** » 2013-05-04 18:14

hi all;
i love appgini.it's handle many things for me.but i wonder how to add some table,div or forms or frame on left side.
i wanna use side menu includded some links to page i created.
which file i have to edit ?
thanks for reply

Post by **a.gneady** » 2013-05-05 10:23

Try editing the generated "header.php" if you want your modification applied to all pages. If you want to modify only specific pages, use the tablename_header() hook function as explained at http://bigprof.com/appgini/help/advance ... ame_header

drascom · Post by **drascom** » 2013-05-05 22:59

thanks for reply.i found it modifying header.php and lib.php solve my problem.
header.php for <head>..</head> tag
lip.php for <body>..</body> tag..
also i apply google css top menu sample . if anyone needs it..
on lib.php find line started global $navlinks; and replace with code below included $menu; line

Code: Select all

global $navLinks;
	if(is_array($navLinks)){
		$memberInfo = getMemberInfo();
		foreach($navLinks as $link){
			if(!isset($link['url']) || !isset($link['title'])) continue;
			if($memberInfo['admin'] || @in_array($memberInfo['group'], $link['groups']) || @in_array('*', $link['groups'])){
				$menu .= "<option value=\"{$link['url']}\">{$link['title']}</option>";
			}
		}
	}

	$menu .= "</select>";
	echo "<div class=\"menu\">
	<ul>
	  <li class=\"current\"><!-- Using class=\"single-link\" for links with no dropdown -->
		<a  href=\"index.php\">GIRIÅž</a>
		</li>
        <!-- Using class=\"current\" for the link of the current page -->
      <li class=\"current\">
		<a  href=\"acenta_view.php\"> ACENTALAR </a>
		</li>
	  <li class=\"current\"><!-- Using class=\"single-link\" for links with no dropdown -->
		<a  href=\"musteri_view.php\"> MUÅžTERÄ°LER </a>
		</li>
	  <li class=\"current\"><!-- Using class=\"single-link\" for links with no dropdown -->
		<a  href=\"satis_view.php\">GELIR </a>
		</li>
	  <li class=\"current\"><!-- Using class=\"single-link\" for links with no dropdown -->
		<a  href=\"masraf_view.php\">GIDER </a>
		</li>
	  <li class=\"current\"><!-- Using class=\"single-link\" for links with no dropdown -->
		<a  href=\"resim_view.php\">  RESÄ°MLER</a>
		</li>
	  <li><a href=\"#\">Bilgi Ä°ÅŸlem<span class=\"arrow\"></span></a>
        <!-- Drop Down menu Items -->
<ul>
			<li><a href=\"gelir_tur_view.php\">gelir-tur</a></li>
			<li><a href=\"gider_tur_view.php\">gider-tur</a></li>
			<li><a href=\"kasa_view.php\">Gelir Kasa</a></li>
			<li><a href=\"gider_kasa_view.php\">Gider Kasa</a></li>
			<li>
			<div class=\"mid-line\">
			</div>
			</li>
			<li><a href=\"durum_view.php\">Durum</a></li>
			<li><a href=\"zaman_view.php\">Zaman</a></li>
			<li><a href=\"cinsiyet_view.php\">Cinsiyet</a></li>
			<li><a href=\"personel_view.php\">Personel</a></li>
			<li><a href=\"http://maps.google.co.in/maps?hl=en&tab=wl\">Maps</a></li>
			<li><a href=\"http://translate.google.co.in/\">Translate</a></li>
			<li><a href=\"http://books.google.co.in\">Books</a></li>
			<li><a href=\"http://scholar.google.co.in/\">Scholar</a></li>
			<li><a href=\"http://blogsearch.google.co.in\">Blogs</a></li>
			<li>
			<div class=\"mid-line\">
			</div>
			</li>
			<li><a href=\"http://www.google.co.in/intl/en/options/\">even more >></a></li>
			<li>
			<div class=\"mid-line\">
			</div>
			</li>
		</ul>
		</li>
	</ul>
</div>
";
	return $menu;

on header.php paste this code before </head> tag

Code: Select all

<style>
body{
padding:0;
margin:0;
}
.menu{
position:fixed;
top:0;
left:0;
width:100%;
font:13px/27px Arial,sans-serif;
color:#3366cc;
height:30px;
background:#2D2D2D;
}
.menu a:hover{
background-color:#676767;
color:#CCCCCC;
}
.menu a{
text-decoration:none;
padding:6px 8px 7px;
color:#CCCCCC;
outline:none;
}
.menu ul{
list-style:none;
margin:0;
padding:0 0 0 10px;
}
.menu ul li{
padding:0;
float:left;
}
.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
}
.menu ul li ul{
position:absolute;
border:1px solid #C3D1EC;
/*box-shadow*/
-webkit-box-shadow:0 1px 5px #CCCCCC;
   -moz-box-shadow:0 1px 5px #CCCCCC;
        box-shadow:0 1px 5px #CCCCCC;
margin-top:-1px;
display:none;
padding:0px 16px 0px 0;
}
.active ul{
display:block !important;
}
.single ul{
display:block !important;
}
.active a{
background-color:white;
border:1px solid #C3D1EC;
border-bottom:0;
/*box-shadow*/
-webkit-box-shadow:0 -1px 5px #CCCCCC;
   -moz-box-shadow:0 -1px 5px #CCCCCC;
        box-shadow:0 -1px 5px #CCCCCC;
display:block;
height:29px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#3366CC;
}
/*Styling for the link of the current page*/
.current a{
background-color:#2D2D2D;
border-top:2px solid #DD4B39;/*red ribbon at top*/
border-bottom:0;
display:block;
height:25px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#FFFFFF;
font-weight:bold;
}
.active a:hover{
background-color:white;
color:#3366CC;
}
.active ul a:hover{
background-color:#e4ebf8;
}
.active ul a{
border:0 !important;
/*box-shadow*/
-webkit-box-shadow:0 0 0 #CCCCCC;
   -moz-box-shadow:0 0 0 #CCCCCC;
        box-shadow:0 0 0 #CCCCCC;
border:0;
width:100%;
}
.arrow{
border-color:#C0C0C0 transparent white;
border-style:solid dashed dashed;
margin-left:5px;
position:relative;
top:10px;
}
.mid-line{
background-color:#FFF;
border-top:1px solid #e5e5e5;
font-size:0;
}
</style>
<script>
$(function ($) {
  $.fn.fixedMenu = function () {
    return this.each(function () {
      var menu = $(this);
      $("html").click(function() {
        menu.find('.active').removeClass('active');
      });
      menu.find('ul li > a').bind('click', function (event) {
        event.stopPropagation();
        //check whether the particular link has a dropdown
        if (!$(this).parent().hasClass('single-link') && !$(this).parent().hasClass('current')) {
          //hiding drop down menu when it is clicked again
          if ($(this).parent().hasClass('active')) {
            $(this).parent().removeClass('active');
          }
          else {
            //displaying the drop down menu
            $(this).parent().parent().find('.active').removeClass('active');
            $(this).parent().addClass('active');
          }
        }
        else {
          //hiding the drop down menu when some other link is clicked
          $(this).parent().parent().find('.active').removeClass('active');
 
        }
      })
    });
  }
})(jQuery);
</script>
<script>
        $('document').ready(function(){
            $('.menu').fixedMenu();
        });
        </script>

dilitimor · Post by **dilitimor** » 2013-05-15 08:50

Drascom, nice share, thanks

drascom · Post by **drascom** » 2013-05-22 21:56

i find better and easy way to add dropdown top menu without script

change style.css with code below

Code: Select all

.TableTitle{
	font-family: verdana,arial,tahoma;
	font-size: 22px;
	font-weight: normal;
	text-indent: 5px;
	color: #316B40;
	text-decoration: none;
	text-align: left;
}

.TableHeader{
	font-family: verdana,arial,tahoma;
	font-size: 12px;
	font-weight: bold;
	background-color: #E9E5D9;
	text-indent: 3px;
	padding-right: 3px;
	color: black;
	text-decoration: none;
}

.TableHeader:hover{
	color: red;
}

.TableBody{
	font-family: verdana,arial,tahoma;
	font-size: 12px;
	color: black;
	background-color: #F7F7EF;
	padding-left: 3px;
	text-decoration: none;
}

.TableBody:hover{
	color: red;
}

.TableBodyNumeric{
	font-family: verdana,arial,tahoma;
	font-size: 12px;
	color: black;
	background-color: #F7F7EF;
	text-align: right;
	padding-right: 3px;
	text-decoration: none;
}

.TableBodyNumeric:hover{
	color: red;
}

.TableFooter{
	font-family: verdana,arial,tahoma;
	font-weight: bold;
	font-size: 12px;
	background-color: #E9E5D9;
	text-align: center;
	padding: 3px 15px;
}

.TableBodySelected{
	font-family: verdana,arial,tahoma;
	font-size: 12px;
	color: black;
	background-color: #FFFEF9;
	padding-left: 3px;
	text-decoration: none;
}

.TableBodySelectedNumeric{
	font-family: verdana,arial,tahoma;
	font-size: 12px;
	color: black;
	background-color: #FFFEF9;
	text-align: right;
	padding-right: 3px;
	text-decoration: none;
}

.Error{
	font-family: verdana,arial,tahoma;
	font-size: 12px;
	font-weight: bold;
	background-color: yellow;
	text-indent: 5px;
	color: red;
	text-decoration: none;
	margin-bottom: 10px;
}

.TextBox{
	font-family: verdana,arial,tahoma;
	font-size: 12px;
	border-style: solid;
	border-width: 1px;
	border-color: black;
}

.Option{
	font-family: verdana,arial,tahoma;
	font-size: 12px;
}

.SelectedOption{
	font-family: verdana,arial,tahoma;
	font-size: 12px;
	color: blue;
}

.TableBodyHighlighted{
	font-family: verdana,arial,tahoma;
	font-size: 12px;
	color: black;
	background-color: #FFF0C2;
	padding-left: 3px;
	text-decoration: none;
}

.TableBodyHighlightedNumeric{
	font-family: verdana,arial,tahoma;
	font-size: 12px;
	color: black;
	background-color: #FFF0C2;
	text-align: right;
	padding-right: 3px;
	text-decoration: none;
}

TD.TableBody{
	border-bottom: solid 1px #CFCFCF;
	border-right: solid 1px #CFCFCF;
}

TD.TableBodySelected{
	border-bottom: solid 1px #CFCFCF;
	border-right: solid 1px #CFCFCF;
}

TD.TableBodySelectedNumeric{
	border-bottom: solid 1px #CFCFCF;
	border-right: solid 1px #CFCFCF;
}

TD.TableBodyNumeric{
	border-bottom: solid 1px #CFCFCF;
	border-right: solid 1px #CFCFCF;
}

TD.TableHeader{
	border-bottom: solid 1px #CFCFCF;
	border-right: solid 1px #CFCFCF;
	padding: 2px 0;
}

.fieldDescription{
	font-family: verdana,arial,tahoma;
	font-size: 13px;
	line-height: 20px;
	cursor: pointer;
	visibility: hidden;
	position: absolute;
	width: 400px;
	background-color: #FFFFA5;
	background-image: url(Exit.gif);
	background-position: 99% 3%;
	background-repeat: no-repeat;
	border: solid 3px white;
	padding: 10px;
	filter: Alpha(opacity=95);
	-moz-opacity: 0.95;
	-khtml-opacity: 0.95;
	opacity: 0.95;
}

.SuccessNotify{
	color: green;
	border: solid 1px green;
	background-color: #d9ffce;
	text-align: center;
	margin: 0 auto;
	width: 500px;
	padding: 3px 10px;
	font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}

.print-button{
	cursor: pointer;
	font-weight: bold;
	margin: .5em .5em .5em .5em;
	height: 3.5em;
	width: 9em;
	white-space: pre-wrap;
	vertical-align: bottom;
}

#withSelected{
	display: none;
	background: url('print-bg.gif') no-repeat;
	background-position: 0 0;
	font-size: 3.5em;
	padding-left: 1em;
}

.nicEdit-main{
	background-color: white;
}

/* Detail view */
#dvContainer{
	margin: 10px auto;
	border: 1px solid #E9E5D9;
}

#dvForm{
}

/* BUTTONS */

.buttons a, .buttons button{
	display: block;
	float: left;
	margin: 2px;
	background-color: #ececf1;
	border: 1px solid #9d9da1;
	border-top: 1px solid #f1efe2;
	border-left: 1px solid #f1efe2;

	font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
	font-size: 12px;
	line-height: 130%;
	text-decoration: none;
	font-weight: bold;
	color: #565656;
	cursor: pointer;
	padding: 5px 10px 6px 7px; /* Links */
	-moz-border-radius: 6px;
}
.buttons button{
	text-align: left;
	width: 140px;
	overflow: visible;
	padding: 4px 10px 3px 7px; /* IE6 */
}
#topButtons.buttons button{
	width: 130px;
}
.buttons button[type]{
	padding: 5px 10px 5px 7px; /* Firefox */
	line-height: 17px; /* Safari */
}
*:first-child+html button[type]{
	padding: 4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
	margin: 0 3px -3px 0 !important;
	padding: 0;
	border: none;
	width: 16px;
	height: 16px;
}

/* BUTTONS: STANDARD */

button:hover, .buttons a:hover{
	background-color: #dff4ff;
	border: 1px solid #c2e1ef;
	color: #336699;
}
.buttons a:active{
	background-color: #6299c5;
	border: 1px solid #6299c5;
	color: #ffffff;
}

/* BUTTONS: POSITIVE */

button.positive, .buttons a.positive{
	color: #529214;
}
.buttons a.positive:hover, button.positive:hover{
	background-color: #E6EFC2;
	border: 1px solid #C6D880;
	color: #529214;
}
.buttons a.positive:active{
	background-color: #529214;
	border: 1px solid #529214;
	color: #ffffff;
}

/* BUTTONS: NEGATIVE */

.buttons a.negative, button.negative{
	color: #d12f19;
}
.buttons a.negative:hover, button.negative:hover{
	background: #fbe3e4;
	border: 1px solid #fbc2c4;
	color: #d12f19;
}
.buttons a.negative:active{
	background-color: #d12f19;
	border: 1px solid #d12f19;
	color: #ffffff;
}


.dv button{
	clear: left;
	margin-bottom: 2px;
}

/* Auto-complete drop down */
div.AutoComplete{
	position: absolute;
	width: 250px;
	background-color: white;
	border: 1px solid #888;
	margin: 0;
	padding: 0;
}
div.AutoComplete ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
div.AutoComplete ul li.selected{
	background-color: #faedff;
}
div.AutoComplete ul li{
	list-style-type: none;
	display: block;
	margin: 0;
	padding: 2px;
	cursor: pointer;
	border-bottom: dotted 1px silver;
}
select.Lookup{ width: 300px; }

/* Styles for login form */
#login-form label{
	display: block;
	font-size: small;
	font-family: Trebuchet MS,Garamond,Arial,Georgia;
}
#login-form h1{
	font-family: Myriad Pro,Myriad Web Pro Regular,Lucida Grande,Geneva,Trebuchet MS,sans-serif;
	margin: 0 0 5px 0;
}
#login-form h1 a{
	float: right;
	margin-top: 10px;
	padding: 6px 25px;
}
#login-form input[type="text"]:focus, #login-form input[type="password"]:focus{
	background-color: PapayaWhip;
}
#login-form input[type="text"], #login-form input[type="password"]{
	font-family: "Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
	background-color: #FBFBFB;
	border: 2px solid black;
	border-radius: 4px 4px 4px 4px;
	font-size: 1.1em;
	padding: 11px 5px 11px 8px;
	width: 246px;
	z-index: 2;
	margin: 0 0 10px 0;
}
#login-form select{
	font-family: "Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
	background-color: #FBFBFB;
	border: 2px solid black;
	border-radius: 4px 4px 4px 4px;
	font-size: 1.1em;
	width: 246px;
	z-index: 2;
	margin: 0 0 10px 0;
}
#login-form fieldset{
	margin: 5px 0 0 0;
	padding: 15px;
	background-color: #E9E5D9;
	border-radius: 8px;
	border: solid 1px black;
}
#login-form #submit {
	width: auto;
	font-size: large;
	padding: 18px 40px;
}
#login-form{
	width: 297px;
	float: right;
	margin: 0 20px 20px 20px;
	color: #316B40;
}

#login-splash{
	float: left;
	margin: 0 20px;
}

#login-footer{ margin: 20px 0; }
#navi, #navi ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em; 
}

#navi a{
display:block;
padding:0px 5px;
border:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#333;
}

#navi a:hover{
background-color:#fff;
color:#333;
}

#navi li{
float:left;
position:relative;
}

#navi ul {
position:absolute;
display:none;
width:12em;
top:1.5em;
}

#navi li ul a{
width:12em;
height:auto;
float:left;
}

#navi ul ul{
top:auto;
}	

#navi li ul ul {
left:12em;
margin:0px 0 0 10px;
}

#navi li:hover ul ul, #navi li:hover ul ul ul, #navi li:hover ul ul ul ul{
display:none;
}
#navi li:hover ul, #navi li li:hover ul, #navi li li li:hover ul, #navi li li li li:hover ul{
display:block;
}

and add 1 row code to header.php where  is

Code: Select all

<?php include ("menu.php"); ?>

and download attachment open zip edit file for your navigation links and names and put it to main folder

THAT'S IT ready to use without script...

peebee · Post by **peebee** » 2013-05-22 22:52

Or perhaps even easier still (depending on exactly what you are trying to achieve of course) you can use the links-navmenu.php file located in the generated hooks folder.

Add some simple code in there and it will add the link(s) to your existing "Jump to" drop-down that appears in your generated AppGini application.

Code: Select all

The format for each link is:
		$navLinks[] = array(
			'url' => 'path/to/link', 
			'title' => 'Link title', 
			'groups' => array('group1', 'group2') // groups allowed to see this link, use '*' if you want to show the link to all groups
		);
	*/

I use this to add predefined filtering and the like. Works perfectly, so simple and all neatly contained within the hooks folder. No need to fiddle with anything else.

Ahmad thinks of everything!

drascom · Post by **drascom** » 2013-07-25 15:33

but it s not the same thing check attachment

Post by **a.gneady** » 2013-08-08 01:29

Thanks a lot for sharing this, @drascom.

AppGini Community Forums

add frame on page

add frame on page

Re: add frame on page

Re: add frame on page

Re: add frame on page

Re: add frame on page

Re: add frame on page

Re: add frame on page

Re: add frame on page