nerd99
-
Posts
24 -
Joined
-
Last visited
Never
nerd99's Achievements
Member (2/5)
0
Reputation
-
Hi, I'm creating a site that has a fixed navigation menu using scrollTo and localscroll to move vertically through the site's content. I am trying to use Isotope to include some filterable content on a couple of the pages/panels but cannot integrate the two successfully. Does anybody have a suggestion on how to go about this? Here's the markup...I'm trying to make isotope work within the 'get music' (panel 3) and 'commissioned work' (panel 4) pages. index.html <!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" xml:lang="en" lang="en"> <head> <title></title> <!--Framework CSS--> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" title="no title" charset="utf-8"/> <link rel="stylesheet" href="css/gallery.css" type="text/css" media="screen" title="no title" charset="utf-8"/> <link rel="stylesheet" href="css/tooltip.css" type="text/css" media="screen" title="no title" charset="utf-8"/> <link rel="stylesheet" href="css/isotope.css" type="text/css" media="screen" title="no title" charset="utf-8"/> <!--[if IE]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection"><![endif]--> <!-- Javascript --> </head> <body> <div id="mainwrapper"> <!------------------------------------------------------ main page ------------------------------------------------------> <div id="mask"> <div id="panel"> <div id="panel-1"> <div id="wrapper"> <div id="contentcolumn"> <div class="vector-flame"> <div class="product-logo1"> </div> <div class="product-logo2"> </div> </div><!--END contentcolumn --> </div><!--END wrapper --> </div><!--END panel-1 --> <div id="leftcolumn"> <div class="logo-navigation"> <a href="#panel-1" rel="panel"><h1>Logo</h1></a> <ul id="nav"> <li class="sliding-element"><a href="#panel-2" rel="panel">about</a></li> <li class="sliding-element"><a href="#panel-3" rel="panel">get music</a></li> <li class="sliding-element"><a href="#panel-4" rel="panel">commissioned work</a></li> <li class="sliding-element"><a href="#panel-5" rel="panel">get in touch</a></li> </ul> </div> <div class="logo-navigation"> </div> </div> <div id="footer"> <div id="social" style="float:right;"> <ul> <li class="facebook"><a class="tooltip" href="http://www.facebook.com" target="_blank" title="Become a fan on Facebook">Become a fan on Facebook</a></li> <li class="twitter"><a class="tooltip" href="http://twitter.com/" target="_blank" title="Follow us on Twitter">Follow us on Twitter</a></li> </ul> </div> </div> </div> <!-- end of main page --> <!------------------------------------------------------ about page ------------------------------------------------------> <div id="panel-2"> <div id="wrapper"> <div id="contentcolumn"> <div id="content-title"> <div class="content-left"> <a href="#panel-1" rel="panel">Home</a> </div><!-- END content-left --> <div class="content-center"> <h1>about</h1> </div><!-- END content-centre --> <div class="content-right"> <a href="#panel-1" rel="panel">Up one page</a> </div><!-- END content-right --> </div><!-- END content-title --> <hr/> <div class="content"> <p>Hello world...</p> <p>Hello world...</p> <p>Hello world...</p> <p>Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world </p> </div><!-- END class content --> </div><!-- END contentcolumn --> </div><!-- END wrapper --> <div id="footer"> <a href="#top" ><img src="images/a.jpg" width="185" height="42" style="float:right;margin:1em 1em 1em 0;"></a> </div><!-- END footer --> </div><!-- END panel --> <!-- end of about page --> <!------------------------------------------------------ get music page ------------------------------------------------------> <div id="panel-3"> <div id="wrapper"> <div id="contentcolumn"> <div id="content-title"> <div class="content-left"> <a href="#panel-1" rel="panel">Home</a> </div><!-- END content-left --> <div class="content-center"> <h1>get music</h1> </div><!-- END content-centre --> <div class="content-right"> <a href="#panel-2" rel="panel">Up one page</a> </div><!-- END content-right --> </div><!-- END content-title --> <hr/> <div class="content"> <section id="options" class="clearfix"> <ul id="filters" class="option-set floated clearfix"> <li><a href="#filter" data-filter="*" class="selected">show all</a></li> <li><a href="#filter" data-filter=".shorts">short films</a></li> <li><a href="#filter" data-filter=".features">feature films</a></li> <li><a href="#filter" data-filter=".ads">commercials</a></li> <li><a href="#filter" data-filter=".tv">television</a></li> </ul> </section> <!-- END options --> <div id="container" class="clearfix"> <div class="element shorts"> <img src='images/a.jpg' width='190' height='130'> </div> <div class="element shorts ads"> <img src='images/a.jpg' width='190' height='130'> </div> <div class="element shorts ads"> <img src='images/a.jpg' width='190' height='130'> </div> <div class="element shorts"> <img src='images/a.jpg' width='190' height='130'> </div> <div class="element features"> <img src='images/a.jpg' width='190' height='130'> </div> <div class="element tv"> <img src='images/a.jpg' width='190' height='130'> </div> </div> <!-- #container --> <script type="text/javascript" src="js/jquery.isotope.min.js"></script> <script> var $container = $('#container'); // filter buttons $('#filters a').click(function(){ var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector }); return false; }); // switches selected class on buttons $('#options').find('.option-set a').click(function(){ var $this = $(this); // don't proceed if already selected if ( !$this.hasClass('selected') ) { $this.parents('.option-set').find('.selected').removeClass('selected'); $this.addClass('selected'); } }); $(function(){ $container.isotope({ itemSelector : '.element' }); }); </script> </div><!-- END class content --> </div><!-- END content-title --> </div><!-- END wrapper --> <div id="footer"> </div> </div> <!-- end of get music page --> <!------------------------------------------------------ commissioned work page ------------------------------------------------------> <div id="panel-4"> <div id="wrapper"> <div id="contentcolumn"> <div id="content-title"> <div class="content-left"> <a href="#panel-1" rel="panel">Home</a> </div><!-- END content-left --> <div class="content-center"> <h1>commissioned work</h1> </div><!-- END content-centre --> <div class="content-right"> <a href="#panel-3" rel="panel">Up one page</a> </div><!-- END content-right --> </div><!-- END content-title --> <hr/> <div class="content"> <br /> <h3>Filterable content...</h3> <p>Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world </p> </div> </div> </div> <div id="footer"> </div> </div> <!-- end of commissioned work --> <!------------------------------------------------------ contact page ------------------------------------------------------> <div id="panel-5"> <div id="wrapper"> <div id="contentcolumn"> <div id="content-title"> <div class="content-left"> <a href="#panel-1" rel="panel">Home</a> </div><!-- END content-left --> <div class="content-center"> <h1>get in touch</h1> </div><!-- END content-centre --> <div class="content-right"> <a href="#panel-4" rel="panel">Up one page</a> </div><!-- END content-right --> </div><!-- END content-title --> <hr/> <div class="content"> <br /> <h3>This is where the contact content goes...</h3> <p>Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world </p> </div> </div> </div> <div id="footer"> </div> </div> <!-- end of contact page --> </div> </div> </div> <script src="js/jquery-1.5.1.min.js"></script> <script src="js/jquery.isotope.min.js"></script> <script type="text/javascript" src="js/jquery.fancybox-1.2.1.js"></script> <script type="text/javascript" src="js/jquery.scrollTo.js"></script> <script type="text/javascript" src="js/jquery-toppage.js"></script> <script type="text/javascript" src="js/jquery.localscroll-min.js"></script> <script type="text/javascript" src="js/jquery.pngFix.pack.js"></script> <script type="text/javascript" src="js/jquery.tooltip.js"></script> <script type="text/javascript" src="js/jquery-custom.js"></script> <script type="text/javascript"> $(function(){ $('a.tooltip').aToolTip(); }); </script> <script type="text/javascript"> var BrowserDetect = { init: function () { this.browser = this.searchString(this.dataBrowser) || "An unknown browser"; this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version"; this.OS = this.searchString(this.dataOS) || "an unknown OS"; }, searchString: function (data) { for (var i=0;i<data.length;i++) { var dataString = data[i].string; var dataProp = data[i].prop; this.versionSearchString = data[i].versionSearch || data[i].identity; if (dataString) { if (dataString.indexOf(data[i].subString) != -1) return data[i].identity; } else if (dataProp) return data[i].identity; } }, searchVersion: function (dataString) { var index = dataString.indexOf(this.versionSearchString); if (index == -1) return; return parseFloat(dataString.substring(index+this.versionSearchString.length+1)); }, dataBrowser: [ {string: navigator.userAgent,subString: "Chrome",identity: "Chrome"}, {string: navigator.userAgent,subString: "OmniWeb",versionSearch: "OmniWeb/",identity: "OmniWeb"}, {string: navigator.vendor,subString: "Apple",identity: "Safari",versionSearch: "Version"}, {prop: window.opera,identity: "Opera"}, {string: navigator.vendor,subString: "iCab",identity: "iCab"}, {string: navigator.vendor,subString: "KDE",identity: "Konqueror"}, {string: navigator.userAgent,subString: "Firefox",identity: "Firefox"}, {string: navigator.vendor,subString: "Camino",identity: "Camino"}, // for newer Netscapes (6+) {string: navigator.userAgent,subString: "Netscape",identity: "Netscape"}, {string: navigator.userAgent,subString: "MSIE",identity: "Explorer",versionSearch: "MSIE"}, {string: navigator.userAgent,subString: "Gecko",identity: "Mozilla",versionSearch: "rv"}, // for older Netscapes (4-) {string: navigator.userAgent,subString: "Mozilla",identity: "Netscape",versionSearch: "Mozilla"} ], dataOS : [ {string: navigator.platform,subString: "Win",identity: "Windows"}, {string: navigator.platform,subString: "Mac",identity: "Mac"}, {string: navigator.userAgent,subString: "iPhone",identity: "iPhone/iPod"}, {string: navigator.platform,subString: "Linux",identity: "Linux"} ] }; BrowserDetect.init(); if(BrowserDetect.browser == "Explorer"){ /* this browser is IE */ if(BrowserDetect.version < 7){ /* this browser is old (IE6, or lower) */ /* change location to "old" site */ window.location="http://website.com/old/index.html"; }else{ /* this browser is new (IE7 and up) */ } } else{ /* this browser is other than IE */ } </script> <script type="text/javascript"> $(document).ready(function() { $("a.group").fancybox(); }); </script> <script type="text/javascript"> $(document).ready(function() { $('#mask').css({'height':$('#panel-1').height()}); $('#panel').width(parseInt($('#mask').width() * $('#panel div').length)); $('#panel').width($('#mask').width()); $('a[rel=panel]').click(function () { $('#mask').scrollTo($(this).attr('href'), 800); if ($(this).attr('href') == '#panel-6') { $('#mask').css({'height':$('#panel-6').height()}); } else if($(this).attr('href') == '#panel-2') { $('#mask').css({'height':$('#panel-2').height()}); } else if($(this).attr('href') == '#panel-3') { $('#mask').css({'height':$('#panel-3').height()}); } else if($(this).attr('href') == '#panel-4') { $('#mask').css({'height':$('#panel-4').height()}); } else if($(this).attr('href') == '#panel-5') { $('#mask').css({'height':$('#panel-5').height()}); } else if($(this).attr('href') == '#panel-7') { $('#mask').css({'height':$('#panel-7').height()}); } else { $('#mask').css({'height':$('#panel-1').height()}); } return false; }); }); </script> </body> </html>
-
Hi, I'm trying to adapt the superfish navbar menu navigation to my site. I have a long, narrow div that I want this to fit into but I can't work out how to make it fit the div. I've tried increasing the padding-right of the list anchor but that causes a horizontal scroll in the browser because of the overflow and I don't want that. There is probably something really simple I'm missing. Can anybody help? superfish-navbar.css /*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/ .sf-navbar { background: #BDD2FF; height: 2.5em; padding-bottom: 2.5em; position: relative; } .sf-navbar li { background: #AABDE6; position: static; } .sf-navbar a { border-top: none; } .sf-navbar li ul { width: 44em; /*IE6 soils itself without this*/ } .sf-navbar li li { background: #BDD2FF; position: relative; } .sf-navbar li li ul { width: 13em; } .sf-navbar li li li { width: 100%; } .sf-navbar ul li { width: auto; float: left; } .sf-navbar a, .sf-navbar a:visited { border: none; } .sf-navbar li.current { background: #BDD2FF; } .sf-navbar li:hover, .sf-navbar li.sfHover, .sf-navbar li li.current, .sf-navbar a:focus, .sf-navbar a:hover, .sf-navbar a:active { background: #BDD2FF; } .sf-navbar ul li:hover, .sf-navbar ul li.sfHover, ul.sf-navbar ul li:hover li, ul.sf-navbar ul li.sfHover li, .sf-navbar ul a:focus, .sf-navbar ul a:hover, .sf-navbar ul a:active { background: #D1DFFF; } ul.sf-navbar li li li:hover, ul.sf-navbar li li li.sfHover, .sf-navbar li li.current li.current, .sf-navbar ul li li a:focus, .sf-navbar ul li li a:hover, .sf-navbar ul li li a:active { background: #E6EEFF; } ul.sf-navbar .current ul, ul.sf-navbar ul li:hover ul, ul.sf-navbar ul li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ } ul.sf-navbar .current ul ul { top: -999em; } .sf-navbar li li.current > a { font-weight: bold; } /*** point all arrows down ***/ /* point right for anchors in subs */ .sf-navbar ul .sf-sub-indicator { background-position: -10px -100px; } .sf-navbar ul a > .sf-sub-indicator { background-position: 0 -100px; } /* apply hovers to modern browsers */ .sf-navbar ul a:focus > .sf-sub-indicator, .sf-navbar ul a:hover > .sf-sub-indicator, .sf-navbar ul a:active > .sf-sub-indicator, .sf-navbar ul li:hover > a > .sf-sub-indicator, .sf-navbar ul li.sfHover > a > .sf-sub-indicator { background-position: -10px -100px; /* arrow hovers for modern browsers*/ } /*** remove shadow on first submenu ***/ .sf-navbar > li > ul { background: transparent; padding: 0; -moz-border-radius-bottomleft: 0; -moz-border-radius-topright: 0; -webkit-border-top-right-radius: 0; -webkit-border-bottom-left-radius: 0; } The above css is in addition to the following... superfish.css /*** ESSENTIAL STYLES ***/ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu { line-height: 1.5; } .sf-menu ul { position: absolute; top: -999em; width: 10em; /* left offset of submenus need to match (see below) */ } .sf-menu ul li { width: 100%; } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li { float: left; position: relative; } .sf-menu a { display: block; position: relative; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 99; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } /*** DEMO SKIN ***/ .sf-menu { float: left; margin-bottom: 1em; width:100%; } .sf-menu a { border-left: 1px solid #fff; border-top: 1px solid #CFDEFF; padding: .75em 1em; text-decoration:none; } .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #13a; } .sf-menu li { background: #BDD2FF; } .sf-menu li li { background: #AABDE6; } .sf-menu li li li { background: #9AAEDB; } .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #CFDEFF; outline: 0; } /*** arrows **/ .sf-menu a.sf-with-ul { padding-right: 0em; /* CHANGE THIS FOR TOP MENU WIDTH!!!!!!!! */ min-width: 183px; /* trigger IE7 hasLayout so spans position accurately */ } .sf-sub-indicator { position: absolute; display: block; right: .75em; top: 1.05em; /* IE6 only */ width: 10px; height: 10px; text-indent: -999em; overflow: hidden; background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */ } a > .sf-sub-indicator { /* give all except IE6 the correct values */ top: .8em; background-position: 0 -100px; /* use translucent arrow for modern browsers*/ } /* apply hovers to modern browsers */ a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { background-position: -10px -100px; /* arrow hovers for modern browsers*/ } /* point right for anchors in subs */ .sf-menu ul .sf-sub-indicator { background-position: -10px 0; } .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; } /* apply hovers to modern browsers */ .sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ } /*** shadows for all but IE6 ***/ .sf-shadow ul { background: url('../images/shadow.png') no-repeat bottom right; padding: 0 8px 9px 0; -moz-border-radius-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-border-top-right-radius: 17px; -webkit-border-bottom-left-radius: 17px; } .sf-shadow ul.sf-shadow-off { background: transparent; } The div I am trying to fit the navbar into is described in my main css file as #contentnav{ position: relative; top:10px; height: 50px; background-color:#fff; margin:10px; border: 1px solid red; } Markup is as follows: <div id="contentnav"> <ul id="sample-menu-4" class="sf-menu sf-navbar"> <li class="current"> <a class="sf-with-ul" href="#">Menu1<span class="sf-sub-indicator"> »</span></a> <ul> <li><a href="#">Sub1</a></li> <li><a href="#">Sub2</a></li> <li><a href="#">Sub3</a></li> </ul> </li> <li> <a class="sf-with-ul" href="#">Menu2<span class="sf-sub-indicator"> »</span></a> <ul> <li><a href="#">Sub1</a></li> <li><a href="#">Sub2</a></li> <li><a href="#">Sub3</a></li> </ul> </li> <li> <a class="sf-with-ul" href="#">Menu3<span class="sf-sub-indicator"> »</span></a> <ul> <li><a href="#">Sub1</a></li> <li><a href="#">Sub2</a></li> <li><a href="#">Sub3</a></li> </ul> </li> <li><a class="sf-with-ul" href="#">Menu4="sf-sub-indicator"> »</span></a> <ul> <li><a href="#">Sub1</a></li> <li><a href="#">Sub2</a></li> <li><a href="#">Sub3</a></li> </ul> </li> </ul> </div><!-- end contentnav --> Thanks
-
Hi, I have a site that contains a content are that requires a scroll function. I want to use custom buttons/arrows that scroll the textarea when the user hovers the mouse over the buttons/arrows. I found this on a site that does exactly what I need mine to do, only problem is that the script uses iframes. var timer_id; function scroll_iframe(frm,inc,dir) { if (timer_id) clearTimeout(timer_id); if (window.frames[frm]) { if (dir == "v") window.frames[frm].scrollBy(0, inc); else window.frames[frm].scrollBy(inc, 0); timer_id = setTimeout("scroll_iframe('" + frm + "'," + inc + ",'" + dir + "')", 20); } } function stopScroll() { if (timer_id) clearTimeout(timer_id); } Here is an example of a page I want to incorporate such a script. <!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></title> <link href="css/main2.css" rel="stylesheet" type="text/css" /> </head> <body id='index'> <div id='outerDiv'> <div id="bg"> <div id="insect"></div> <div id="header"></div> <div id='leftcontainer'> <div id="leftspacer"></div> <div id="title"><?php include('heading.php'); ?></div> <div id="definition"><?php include('cp_definition.php'); ?></div> <div id="sub_links" class='menu2'><?php include('cp_sub_links.php'); ?></div> </div> <div id='middle'> <div id="nav"><?php include('cp_links.php'); ?></div> <div id="content"> <table align="left" border="0"> <tr><td align='center' width='120' height='67'><orange class='orangelink'><a href='cp_listen_filmtv2.php'>+</a></orange></td> <td><h4><a href='cp_listen_filmtv2.php'>Add New Film/TV</a></h4></td></tr> <?php //Fetch list of films from the database $result = mysqli_query($connection,"SELECT * FROM films ORDER BY id DESC") or die(mysqli_error($connection)); while($row = mysqli_fetch_array($result)) { /* Fetching profile */ $id = $row['id']; $name = $row['name']; $img = $row['img']; $title1 = $row['title1']; $title2 = $row['title2']; $title3 = $row['title3']; $video = $row['video']; echo "<tr> <td><a href='cp_listen_filmtv3.php?film=".$video."'><img src='".$img."' width='120' height='67'></a></td> <td><h4>".$name."</h4><h3>".$title1."</h3><h3>".$title2."</h3><h3>".$title3."</h3></td> </tr>"; } ?> </table> </div><!-- END Content --> </div> <div id="tail"></div> <div id="bottom"></div> <div id="footer"><?php include('footer.php'); ?></div> </div><!-- END bg --> </div><!-- END outerDiv --> </body> </html> THIS IS THE DIV I WANT TO BE ABLE TO SCROLL (taken from the page above) <div id="content"> <table align="left" border="0"> <tr><td align='center' width='120' height='67'><orange class='orangelink'><a href='cp_listen_filmtv2.php'>+</a></orange></td> <td><h4><a href='cp_listen_filmtv2.php'>Add New Film/TV</a></h4></td></tr> <?php //Fetch list of films from the database $result = mysqli_query($connection,"SELECT * FROM films ORDER BY id DESC") or die(mysqli_error($connection)); while($row = mysqli_fetch_array($result)) { /* Fetching profile */ $id = $row['id']; $name = $row['name']; $img = $row['img']; $title1 = $row['title1']; $title2 = $row['title2']; $title3 = $row['title3']; $video = $row['video']; echo "<tr> <td><a href='cp_listen_filmtv3.php?film=".$video."'><img src='".$img."' width='120' height='67'></a></td> <td><h4>".$name."</h4><h3>".$title1."</h3><h3>".$title2."</h3><h3>".$title3."</h3></td> </tr>"; } ?> </table> </div><!-- END Content --> Is anybody able to offer a suggestion as to how I should approach and implement this? Is there a simple fix for the script I have included above? Thanks!
-
Ok, thanks. I've sorted it out. I just need to define the totals separately then add them!
-
Hi, I'm trying to do a very simple calculation. I have two separate tables containing invoice information. I need to add the totals from all invoices and display them. I need to add the sum of the following columns: TABLE A: amount_received TABLE B: total Here's my starting point - I have the total from TABLE A. I have tried various other things but nothing is working for me. Where do I go from here? <?php $result = mysqli_query($connection,"SELECT SUM(amount_received) FROM table A ")or die(mysqli_error($connection)); // Print out result while($row = mysqli_fetch_array($result)){ echo '<td>$'.$row['SUM(amount_received)'].'.00</td>'; }
-
Wow, thanks a bunch btherl! So simple.
-
For the section of code below, is there a way to say, "first time through the query print on A2, B2,etc, then each query following add increase the number besides column name to be A3, B3, etc, then A4, B4, etc"...? $result = mysqli_query($connection,"SELECT * FROM table") or die(mysqli_error($connection)); while($row = mysqli_fetch_array($result)) { //get all rows you want from the table $var1 = $row['var1']; $var2 = $row['var2']; $var3 = $row['var3']; $var4 = $row['var4']; $objPHPExcel->setActiveSheetIndex(0) ->setCellValue('A2', $var1) ->setCellValue('B2', $var2) ->setCellValue('C2', $var3) ->setCellValue('D2', $var4); } This is for an excel spreadsheet. The code is currently printing/exporting one row only from the table. Thanks
-
It is really only this part of the code that I am working with...thanks. // Add some data $result = mysqli_query($connection,"SELECT * FROM students ORDER BY school ASC") or die(mysqli_error($connection)); while($row = mysqli_fetch_array($result)) { //get all rows you want from the tutors table $id = $row['id']; $full_name = $row['full_name']; $school = $row['school']; $year = $row['school_year']; $class = $row['class']; $contact = $row['contact']; $phone_h = $row['phone_h']; $phone_m = $row['phone_m']; $tutor_1 = $row['tutor_1']; $objPHPExcel->setActiveSheetIndex(0) ->setCellValue('A1', $full_name) ->setCellValue('B1', $contact) ->setCellValue('C1', $year.$class) ->setCellValue('D1', $tutor_1); }
-
Hi, I am very new to this. Your help would be greatly appreciated. This has also been posted on the phpexcel discussion page. I would like to know how to export data from a MySql table into an excel spreadsheet. I have the knowledge to get the information from the database to the spreadsheet but how do I have the code repeat until all data is echoed onto the page? Here is what I have already. This produces only a single row of results from the database...just need to know how to get it all onto the spreadsheet! Using php logic, how would I get around this? <?php /** Error reporting */ error_reporting(E_ALL); /** PHPExcel */ require_once '../Classes/PHPExcel.php'; // Create new PHPExcel object $objPHPExcel = new PHPExcel(); require_once('../includes/connection.php'); $result = mysqli_query($connection,"SELECT * FROM students ORDER BY school ASC") or die(mysqli_error($connection)); while($row = mysqli_fetch_array($result)) { //get all rows you want from the tutors table $school = $row['school']; } // Set properties $objPHPExcel->getProperties()->setCreator("Somebody") ->setLastModifiedBy("Somebody") ->setTitle($school."Student List") ->setSubject($school."Student List") ->setDescription("Student List at ".$school) ->setKeywords("Student List") ->setCategory("Student List"); // Add some data $result = mysqli_query($connection,"SELECT * FROM students ORDER BY school ASC") or die(mysqli_error($connection)); while($row = mysqli_fetch_array($result)) { //get all rows you want from the tutors table $id = $row['id']; $full_name = $row['full_name']; $school = $row['school']; $year = $row['school_year']; $class = $row['class']; $contact = $row['contact']; $phone_h = $row['phone_h']; $phone_m = $row['phone_m']; $tutor_1 = $row['tutor_1']; $objPHPExcel->setActiveSheetIndex(0) ->setCellValue('A1', $full_name) ->setCellValue('B1', $contact) ->setCellValue('C1', $year.$class) ->setCellValue('D1', $tutor_1); } // Rename sheet $objPHPExcel->getActiveSheet()->setTitle('Simple'); // Set active sheet index to the first sheet, so Excel opens this as the first sheet $objPHPExcel->setActiveSheetIndex(0); // Redirect output to a client’s web browser (Excel5) header('Content-Type: application/vnd.ms-excel'); header('Content-Disposition: attachment;filename="01simple.xls"'); header('Cache-Control: max-age=0'); $objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel5'); $objWriter->save('php://output'); exit; ?>
-
Hi, thanks for having a look at this. The output successfully downloads the excel file with all of the data I request...However, when downloading (or exporting) it gets stuck on the lines mentioned above and continues to export error messages. When I stop the download, I can open the excel spreadsheet - all the info I want is laid out on the page but printed below are the two error messages repeated over and over... Any ideas?
-
Hi, I am attempting to export some table data to an excel spreadsheet. I am having trouble with the final few lines and getting the following error within the spreadsheet (which is otherwise working well). I get the same error message for the line below also (echo implode("\t", array_values($row)) . "\n". I'm at a loss. This seems like a pretty obvious and direct error message but I can't get it working properly. Can somebody please help me? Below is the code I am working with. <?php include('includes/admin_session.php'); require_once("includes/connection.php"); function cleanData(&$str) { $str = preg_replace("/\t/", "\\t", $str); $str = preg_replace("/\r?\n/", "\\n", $str); if(strstr($str, '"')) $str = '"' . str_replace('"', '""', $str) . '"'; } // file name for download $filename = "student_list_" . date('Ymd') . ".xls"; header("Content-Disposition: attachment; filename=\"$filename\""); header("Content-Type: application/vnd.ms-excel"); $flag = false; $result = mysqli_query($connection,"SELECT * FROM students ORDER BY tutor") or die(mysqli_error($connection)); while(false !== ($row = mysqli_fetch_assoc($result))) { if(!$flag) { // display field/column names as first row echo implode("\t", array_keys($row)) . "\n"; $flag = true; } array_walk($row, 'cleanData'); echo implode("\t", array_values($row)) . "\n"; } ?>
-
Hi, I am attempting to export some table data to an excel spreadsheet. Below is the code I am working with. <?php include('includes/admin_session.php'); require_once("includes/connection.php"); function cleanData(&$str) { $str = preg_replace("/\t/", "\\t", $str); $str = preg_replace("/\r?\n/", "\\n", $str); if(strstr($str, '"')) $str = '"' . str_replace('"', '""', $str) . '"'; } // file name for download $filename = "student_list_" . date('Ymd') . ".xls"; header("Content-Disposition: attachment; filename=\"$filename\""); header("Content-Type: application/vnd.ms-excel"); $flag = false; $result = mysqli_query($connection,"SELECT * FROM students ORDER BY tutor") or die(mysqli_error($connection)); while(false !== ($row = mysqli_fetch_assoc($result))) { if(!$flag) { // display field/column names as first row echo implode("\t", array_keys($row)) . "\n"; $flag = true; } array_walk($row, 'cleanData'); echo implode("\t", array_values($row)) . "\n"; } ?> It is exporting the rows as requested and I am able to open the file in excel....however...when downloading it becomes stuck on a loop and continues to download over 20mb of nothing. As a result I am forced to stop the download. When I open my excel file, below my table data is the following error, over and over and over and over! Any help on this would be awesome
-
Is there a way to echo the results of a query as separate columns as opposed to one under the other?
-
Hi there, I'm stuck! I am using tcpdf to create a list of timetables as a pdf. I have no trouble achieving the pdf. What I am having trouble with getting the loops to echo out as separate columns instead of rows. Here is the scenario: I have a database called 'timetables'. Each row contains information including Tutor's name, School, Lesson time, Student's name. I would like the above row to appear on the page in one column and the next row to appear in the next column in the pdf. Is this making sense? For example: Under the title 'Monday', would have Tutor 1 with times and students listed below, then directly next to that would be Tutor 2 with times and students listed below. Here is my very poor attempt to get the results. I can get the columns happening but it just prints the same tutor's name in both columns. <?php //============================================================+ // File name : example_017.php // Begin : 2008-03-04 // Last Update : 2010-05-20 // // Description : Example 017 for TCPDF class // Two independent columns with MultiCell // // Author: Nicola Asuni // // (c) Copyright: // Nicola Asuni // Tecnick.com s.r.l. // Via Della Pace, 11 // 09044 Quartucciu (CA) // ITALY // www.tecnick.com // info@tecnick.com //============================================================+ /** * Creates an example PDF TEST document using TCPDF * @package com.tecnick.tcpdf * @abstract TCPDF - Example: Two independent columns with MultiCell * @author Nicola Asuni * @copyright 2004-2009 Nicola Asuni - Tecnick.com S.r.l (www.tecnick.com) Via Della Pace, 11 - 09044 - Quartucciu (CA) - ITALY - www.tecnick.com - info@tecnick.com * @link http://tcpdf.org * @license http://www.gnu.org/copyleft/lesser.html LGPL * @since 2008-03-04 */ require_once('../config/lang/eng.php'); require_once('../tcpdf.php'); // create new PDF document $pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false); // set document information $pdf->SetCreator(PDF_CREATOR); $pdf->SetAuthor('Nicola Asuni'); $pdf->SetTitle('TCPDF Example 017'); $pdf->SetSubject('TCPDF Tutorial'); $pdf->SetKeywords('TCPDF, PDF, example, test, guide'); // set default header data $pdf->SetHeaderData(PDF_HEADER_LOGO, PDF_HEADER_LOGO_WIDTH, PDF_HEADER_TITLE.' 017', PDF_HEADER_STRING); // set header and footer fonts $pdf->setHeaderFont(Array(PDF_FONT_NAME_MAIN, '', PDF_FONT_SIZE_MAIN)); $pdf->setFooterFont(Array(PDF_FONT_NAME_DATA, '', PDF_FONT_SIZE_DATA)); // set default monospaced font $pdf->SetDefaultMonospacedFont(PDF_FONT_MONOSPACED); //set margins $pdf->SetMargins(PDF_MARGIN_LEFT, PDF_MARGIN_TOP, PDF_MARGIN_RIGHT); $pdf->SetHeaderMargin(PDF_MARGIN_HEADER); $pdf->SetFooterMargin(PDF_MARGIN_FOOTER); //set auto page breaks $pdf->SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM); //set image scale factor $pdf->setImageScale(PDF_IMAGE_SCALE_RATIO); //set some language-dependent strings $pdf->setLanguageArray($l); // --------------------------------------------------------- // set font $pdf->SetFont('helvetica', '', 20); // add a page $pdf->AddPage(); $pdf->Write(0, 'Example of independent Multicell() columns', '', 0, 'L', true, 0, false, false, 0); $pdf->Ln(5); $pdf->SetFont('times', '', 12); require_once('../../includes/connection.php'); $result = mysqli_query($connection,"SELECT * FROM timetables WHERE school='schoolname' AND day='Wednesday' ") or die(mysqli_error($connection)); while($row = mysqli_fetch_array($result)) { //get all rows you want from the tutor_invoices table $id = $row['id']; $school = $row['school']; $day = $row['day']; } $pdf->Ln(6.6); //light blue w black text $pdf->SetFillColor(177, 223, 243); $pdf->SetTextColor(0, 0, 0, 100); // Timetable Details) $pdf->MultiCell(200, 5, $day, 1, 'C', 1, 0, 5, '', true); $pdf->Ln(7.35); $result = mysqli_query($connection,"SELECT * FROM timetables WHERE school='schoolname' AND day='Wednesday' ") or die(mysqli_error($connection)); while($row = mysqli_fetch_array($result)) { //get all rows you want from the tutor_invoices table $tutor = $row['tutor']; } // create columns content $left_column = $tutor."\n"; $right_column = $tutor."\n"; // MultiCell($w, $h, $txt, $border=0, $align='J', $fill=0, $ln=1, $x='', $y='', $reseth=true, $stretch=0, $ishtml=false, $autopadding=true, $maxh=0) // set color for background $pdf->SetFillColor(255, 255, 200); // set color for text $pdf->SetTextColor(0, 63, 127); // write the first column $pdf->MultiCell(80, 0, $left_column, 1, 'J', 1, 0, '', '', true, 0, false, true, 0); // set color for background $pdf->SetFillColor(215, 235, 255); // set color for text $pdf->SetTextColor(127, 31, 0); // write the second column $pdf->MultiCell(80, 0, $right_column, 1, 'J', 1, 1, '', '', true, 0, false, true, 0); // reset pointer to the last page $pdf->lastPage(); // --------------------------------------------------------- //Close and output PDF document $pdf->Output('example_017.pdf', 'I'); //============================================================+ // END OF FILE //============================================================+ ?> Does anybody know how to achieve this?
-
I am attempting to send an email from my website via SMTP. Knowing that my site's host supports PEAR I have used PEAR’s Mail function. Here is my code... <?php require_once "Mail.php"; $from = "Me <me@email>"; $to = "You <you@email>"; $subject = "Subject"; $body = "Insert Message Here"; $host = "hostdetails"; $username = "username"; $password = "password"; $headers = array ('From' => $from, 'To' => $to, 'Subject' => $subject); $smtp = Mail::factory('smtp', array ('host' => $host, 'auth' => true, 'username' => $username, 'password' => $password)); $mail = $smtp->send($to, $headers, $body); if (PEAR::isError($mail)) { echo("<p>" . $mail->getMessage() . "</p>"); } else { echo("<p>Message successfully sent!</p>"); } ?> This gave me an error saying: 'Class 'Net_SMTP' not found in /usr/local/php52/pear/Mail/smtp.php on line 210' So, using siteground as my host, I followed this tutorial - www.siteground.com/tutorials/php-mysql/pear_modules.htm and thanks to a very helpful blog entry (http://goonanism.com/blog/2010/06/08/using-pear-to-send-email-via-smtp/) I discovered that I needed to install the following packages in the following directories: pear /Mail /RFC822.php /mail.php /mock.php /null.php /sendmail.php /smtp.php /smtpmx.php /Net /SMTP.php /Socket.php /Mail.php /PEAR.php /PEAR5.php Back to the siteground tutorial, I created the php.ini file as directed. This is where I think I've gone wrong as I don't really know what I'm doing! I created a blank document and inserted the following code as directed: include_path = ".:/usr/lib/php:/usr/local/lib/php:/home/my_cPanel_username/pear"; This file is saved in the following place: /public_html/php.ini Is this what they intended? Now, I am getting nothing. No error message, no message saying the email has been sent. The page loads fine but nothing has happened. Does anyone have any suggestions on what I could try or what the problem may be?