Search the Community
Showing results for tags 'navigation'.
-
I followed a tutorial sometime back and now I want to use this script unfortunately the tutorial at the time did not cover what I am looking for but I did end up with the code below. I am wanting to have an active class dependant on users selection. I would appreciate any help. <?php echo '<ul id="nav">'; $cat_sql="SELECT * FROM administration"; $cat_query=mysqli_query($con, $cat_sql); // calling data put into associative array $cat_rs=mysqli_fetch_assoc($cat_query); do{ ?> <li><a <?php if ($current_page == "name") { ?><?php } ?>href="index.php?page=<?php echo $cat_rs['link_name']; ?>"><?php echo $cat_rs['name']; ?></a></li> <?php } while ($cat_rs=mysqli_fetch_assoc($cat_query)); echo "</ul>"; ?> <!-- need to add - class='active' --> The code above gets the field names for the buttons but I am unable to work out how to have an active class. The code is messy but have been trying all sorts to sort this. Thanks again for any pointers/help.
- 3 replies
-
- active
- active class
-
(and 1 more)
Tagged with:
-
I have adapted a script from w3schools to use as a main menu for my site. It works great in IE, but about 3 or 4 times slower in FireFox, Chrome and Safari! I have no idea what might be wrong and would appreciate any help. Many thanks Mark <html> <head> <script> function showUser(str) { if (str=="") { document.getElementById("hoverbar").innerHTML=""; return; } if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("hoverbar").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","menulookuptest.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <div class='divcolor1' onmouseover='showUser("1")'>Option 1</div> <div class='divcolor2' onmouseover='showUser("2")'>Option 2</div> <div class='divcolor3' onmouseover='showUser("3")'>Option 3</div> <div class='divcolor4' onmouseover='showUser("4")'>Option 4</div> <div class='divcolor5' onmouseover='showUser("5")'>Option 5</div> <div class='divcolor6' onmouseover='showUser("6")'>Option 6</div> <div class='divcolor7' onmouseover='showUser("7")'>Option 7</div> <div class='divcolor8' onmouseover='showUser("8")'>Option 8</div> <div id="hoverbar">Content Goes Here</div> </body> </html> menulookuptest.php <?php $q = $_GET['q']; $con=mysqli_connect("localhost","root","PASS","DBNAME"); mysqli_select_db($con,"ajax_demo"); $sql="SELECT pagetitle, pagedept FROM intranetpage WHERE pagedept = '".$q."'"; $result = mysqli_query($con,$sql); while($row = mysqli_fetch_array($result)) { echo $row['pagetitle']; echo "<BR>"; } ?>
-
Site: http://test2.cmccd.net/ As you can see the navigation links wont lign up right with the nave bar. can any one see whats the problem i spent 2 hours trying to figure it out but it just wont work. CSS .header-wrap, .subheader-wrap, .nav-wrap, .body-wrap, .subfooter-wrap, .footer-wrap {float:left; width:100%; clear:both;} .header, .nav, .body, .subfooter, .footer {width:960px; margin:0 auto;} .header {height:100px;} .sub-header {margin:0 auto; height:38px; width:960px;} .subheader {float:right; width:518px; background:#FFF; border-top:1px solid #000; border-left:1px solid #000; border-right:1px solid #000; padding-top:5px; padding-left:5px; padding-right:5px;} .subheader-content {height:32px; width:518px; background:#8b6a1f; } .nav-wrap{height:44px;} .nav-subwrap {margin:0 auto; height:33px; width:948px; padding-left:5px; padding-top:5px;padding-right:5px;padding-bottom:6px;background:#fff; border-left:1px solid #000; border-right:1px solid #000;} .navtop {width:960px; margin:0 auto;} .navtopborder {float:left; border-top:1px solid #000; width:431px; } .nav{float:left; width:948px; height:33px; background: url(/sites/all/themes/ssccix/files/bg-nav.png) repeat-x;} .navlink {} .navlink li {display:inline;} .navlink a {float:left; font-size:16px; background:#f00; padding:2px 10px; border-right:1px solid #FFF;} .page {float:left; background:#FFF; padding-left:10px; padding-right:10px; padding-bottom:10px; padding-top:5px; border-left:1px solid #000; border-right:1px solid #000; border-bottom:1px solid #000; margin-bottom:10px;} .page-left {float:left; width:220px; padding-right:8px;} .page-content {float:left; width:710px;} .footer {background:#8b6a1f;} PAGE <body style="background:#e8c077 url(/sites/all/themes/ssccix/files/bg-top.png) repeat-x;"> <div id="root" > <div class="header-wrap"> <div class="header"> <div class="logo"><?php print '<a href="/"><img scr="'.$logo.'" alt="'.variable_get('site_name', '').'" /></a>'; ?></div> <?php print render($page['header']); ?></div> </div> <div class="subheader-wrap"> <div class="sub-header"> <div class="subheader"> <div class="subheader-content"><?php print render($page['sub_header']); ?></div> </div> </div> </div> <div class="nav-wrap"> <div class="navtop"> <div class="navtopborder"></div> </div> <div class="nav-subwrap"> <div class="nav"> <div class="navlink"><?php print theme('links', array('links' => $main_menu))?></div> </div> </div> </div> <div class="body-wrap"> <div class="body"> <div class="page"> <div class="page-left"><?php print render($page['sidebar_left']); ?> </div> <div class="page-content"><?php print render($page['content']); ?></div> </div> </div> <div class="subfooter-wrap"> <div class="subfooter"><?php print render($page['sub_footer']); ?></div> </div> <div class="footer-wrap"> <div class="footer"><?php print render($page['footer']); ?></div> </div> </div> </body>
-
Hey all, I am designing a new template and I am trying a new navigation method. It is an onclick(with js disabled fallback) menu. I have it positioned where I want it but there is a gap between my header_inner div and header_wrapper div. I have viewed it in Opera, FF, Chrome, IE, and Safai, and they all displayed the gap. Help? You can find the site here http://synesterpiercing.webs.com/index.htm
-
Is javascript navigation effective and smart? In one of my old web pages I used javascript for navigation. The code is listed below. I have knowledge of PHP includes. Currently I do not have web hosting which allows PHP(bills are tight so I opted for temporary free hosting). Would my below code be a good temporary fix until I can pay for hosting and use PHP includes? Are there any other methods? I appreciate all the help and/or ideas. var arrow = '<span>» </span>'; var clearance = 0; home = new Array(); home[1]= "<span class='asep'>Welcome</span>"; home[2]="<a href='#'>"+arrow+"Home</a>"; home[4]="<a href='http://safepiercing.org/en/piercing/body-aftercare' target='_blank'>"+arrow+"Piercing Aftercare [APP]</a>"; home[5]="<a href='#'>"+arrow+"Contact Us</a>"; computers = new Array(); computers[0]="<span class='asep'>Body Jewelry</span>"; if(clearance == 1) { computers[1]="<a href='#'>"+arrow+"Clearance</a>"; } computers[2]="<a href='#'>"+arrow+"New Arrivals</a>"; computers[3]="<a href='#'>"+arrow+"On Sale</a>"; computers[4]="<a href='#'>"+arrow+"Dermal Anchors</a>"; computers[5]="<a href='#'>"+arrow+"Barbells & Tongue Rings</a>"; computers[6]="<a href='#'>"+arrow+"Navel Rings</a>"; computers[7]="<a href='#'>"+arrow+"Non-Piercing Jewelry</a>"; computers[8]="<a href='#'>"+arrow+"Curved & Eyebrow Rings</a>"; computers[9]="<a href='#'>"+arrow+"Labret & Monroe Rings</a>"; computers[10]="<a href='#'>"+arrow+"Nipple Rings</a>"; computers[11]="<a href='#'>"+arrow+"Horse Shoes</a>"; computers[12]="<a href='#'>"+arrow+"Plugs & Tunnels</a>"; computers[13]="<a href='#'>"+arrow+"Guaged Tapers</a>"; computers[14]="<a href='#'>"+arrow+"Captive Bead Rings(CBR)</a>"; computers[15]="<a href='#'>"+arrow+"Twists & Hoops</a>"; computers[16]="<a href='#'>"+arrow+"Nose Rings</a>"; computers[17]="<a href='#'>"+arrow+"Retainers</a>"; computers[18]="<a href='#'>"+arrow+"Body Jewelry Parts</a>"; computers[19]="<a href='#'>"+arrow+"Skin Divers</a>"; computers[20]="<a href='#'>"+arrow+"Cartilage & Tragus</a>"; computers[21]="<a href='#'>"+arrow+"Fake Plugs & Tapers</a>"; computers[22]="<a href='#'>"+arrow+"316L Stainless Steel</a>"; computers[23]="<a href='#'>"+arrow+"Surgical Steel</a>"; computers[24]="<a href='#'>"+arrow+"Titanium Body Jewelry</a>"; computers[25]="<a href='#'>"+arrow+"Acrylic Body Jewelry</a>"; computers[26]="<a href='#'>"+arrow+"Organic Body Jewelry</a>"; computers[27]="<a href='#'>"+arrow+"Bio-Flex/PTFE</a>"; control = new Array(); control[1]="<span class='asep'>User Controls</span>"; control[2]="<a href='#' onclick='window.print(); return false'>"+arrow+"Print This Page</a>"; control[3]="<a href='#' onclick='addbookmark(location.href,document.title);'>"+arrow+"Bookmark Us</a>"; if(navigator.appName == "Microsoft Internet Explorer") { control[4]="<a href='#' onclick='setHomepage(\"http://google.com\");'>"+arrow+"Set As Homepage</a>"; } function writeLinks() { document.getElementById('homelinks').innerHTML = home.join(""); document.getElementById('computerslinks').innerHTML = computers.join(""); document.getElementById('usercontrol').innerHTML = control.join(""); } setTimeout(writeLinks, 0); // Fires the function on page load without stopping other loads
- 4 replies
-
- navigation
- javascript
-
(and 2 more)
Tagged with:
-
Hello All geeks I am a newbie - i need to set up breadcrumbs on my website- i tried and got to a certain stage, which is good. But i need expert help to help me out to finish it off. Please let me know if any of you generous people can help me out with this, I will then post the details of the website and the code. Thanks well in advance. Sumit
- 1 reply
-
- breadcrumbs
- navigation
-
(and 1 more)
Tagged with:
-
Hello All, I was wondering if anyone could tell me how to equally distribute left and right margin to a navigation bar element built with an unordered list. I want to be able to add elements to the nav bar using PHP and have the margin between the elements on the the left and right side be equally distributed. Thanks in advance.
- 1 reply
-
- navigation
- ul
-
(and 3 more)
Tagged with:
-
Hi I'm trying to find some code that would tell the bit of code that I created what the device width is so I can make this navigation menu dynamic. Meaning: if the device width is 480px and the navigation menu would come to 1024px then using PHP the code would automatically put the <li> items in to a more tab untill the the width is equal or less than 480px. I don't want to use Javascript to do this as I know most of you will recommend using..... Here's my code. Change the variable $deviceWidth to and refresh.... change between 1 and 10. <? $navItems = array("ME", "MUSIC", "VIDEO", "GIGS", "FESTIVALS", "CONTACT"); $deviceWidth = 3; $diffrence = count($navItems) - $deviceWidth; while($diffrence > 0){ $more[] = array_pop($navItems); $diffrence = $diffrence - 1; } foreach($navItems as $nav){ $lower = strtolower($nav); $upper = strtoupper($nav); $lower1 = strtolower($more); $upper1 = strtoupper($more); echo"<li class='Nav'><a href='$lower.php'>$upper</a></li>"; } if(!empty($more)){ echo"<li class='Nav-more'><a href='#'>MORE</a> <ul class='more'>"; foreach($more as $more){ $lower1 = strtolower($more); $upper1 = strtoupper($more); echo "<li class='Nav-more'><a href='$lower1.php'>$upper1</a></li>"; } echo"</ul> </li>"; } ?> And the CSS to give an example. .Navigation { background-image:url(images/H_BG.png); background-repeat:repeat-x; width:100px; height:50px; } .Nav-bar { background-image:url(images/H_BG.png); background-repeat:repeat-x; width:90%; min-width:700px; _width:700px; font-size:20px; line-height:40px; margin-left:5%; margin-right:5%; height:50px; } ul.Nav { list-style:none; margin:0px; padding:0px; } ul.Nav li { font-weight:20; display:inline; } ul.Nav li a { font-weight:bold; text-decoration: none; float: left; color:#7D7D7D; border-left:1px solid #D1D1D1; padding:5px; padding-left:10px; padding-right:10px; } ul.Nav li a:hover { background-image:url(images/H_BG2.png); background-repeat:repeat-x; font-weight:bold; text-decoration: none; float: left; } ul.more { display:none; } ul.Nav li.Nav-more:hover ul.more { display:block; font-weight:bold; text-decoration: none; float: left; color:#111; border-left:1px solid #0f0; padding:5px; padding-left:10px; padding-right:10px; }
-
Hi Guys Struggling to get this working. This code appears on my page-blog.php When the links are clicked the url changes to /page/2/ etc but the posts themselves don’t change. I have some very similar code in my single.php and its working fine. My code is below, what am I doing wrong? <section role="main"> <?php $page = get_page_by_title('the blog'); $content = apply_filters('the_content', $page->post_content); echo $content; ?> <?php $blog_posts = new WP_Query(); $blog_posts->query('showposts=5'); if ( $blog_posts->have_posts() ) : while ( $blog_posts->have_posts() ) : $blog_posts->the_post(); ?> <article> <?php the_title(); ?> </article> <?php endwhile; ?> <nav id="post-nav"> <span class="prev"><?php next_posts_link( '← View Older Posts', $blog_posts->max_num_pages ); ?></span> <?php previous_posts_link('<span class="next">' .( 'View more Recent Posts →' ). '</span>'); ?> </nav> <?php else: ?> <p>Sorry it looks like you need to add some posts to this blog!</p> <?php endif; wp_reset_query(); ?> </section>