i think this question is very easy but I don't know if i am right.
I am an oldschoool html, php coder.
I want to use this kind of navigation:
http://www.cssportal.com/horizontal-menus/13styles.htm
So far no problem. I got an dynamic php page and i want to use this Menu.
There is no problem without this line in the HTML Part:
<li><span>LINK</span></li>
The Problem is the class. What is the smartest way to detect which link is now current?
I would do it in this way. I would write a php script like this pseudo code:
if acutaldocument == "link1.html" then echo "class='current' ";
But i think this is not the smartest way. Or am I right?
Thanks
There's many options...
You can use session cookies, JavaScript, you can pass an id on the end of the url (eg. ?nav=2) or parse the URL and check against it...
All of them work... all of them have there pros and cons... just depends on how your page is set up...
Give each page's body tag an ID. Say, you give the About page's body tag the id "about". Give IDs for all your navigation <li>s too. Say, you give "about" id to the navigation <li>
In your CSS file, do this:
body#about li#about {
// apply differentiating style here...
}
You can keep doing that for all other pages also. And only when both the body ID and the <li> ID match, the style is applied.
Related
Okay, first off, I am not well-versed in JS or PHP. I can usually change an existing script around to do what I'd like, but not write something from scratch. Any URLs I mention in this for examples are made-up.
With that in mind, I am designing a page using a template that has CSS, PHP, and JS all of which I have really modified. Each page has a header, a nav bar, and a footer that are called with an include statement. I understand that part. However, on ONE of the pages, I would like to have a different nav-bar, and it won't change.
What I have noticed: The JS seems to change the clicked URLs from, say http://www.example.com/test.php to http://www.example.com/#test.php
What would be the purpose for that? Also... if I manually TAKE OUT the hashtag in the URL on the page that I want the new nav-bar, the new nav-bar shows! However, then if I switch pages, it'll make the end of the URL like ...test.php#newpage.php
So I either need to figure out how to modify this to NOT put the hashtag in the URL (but if there is a compelling reason for it, of course, it can stay), OR how to get that one page to show the alternate nav-bar. The alternate nav-bar is a table of contents, so the html has hashtags in it to direct users to specific parts of the page... could those hashtags in the html be conflicting somehow and that is why it won't show up, or??? GAH!
Any help would be appreciated.
Okay, here is part of the javascript... it is the only section where it looks like it is referring to # in the URL:
var $fadeWrapper = $("#fade-wrapper"),
$allNav = $("#main-nav a"),
$allListItems = $("#main-nav li"),
url = '',
liClass = '',
hash = window.location.hash,
$ajaxLoader = $("#ajax-loader");
$("body").attr("id", "");
if (hash) {
hash = hash.substring(1);
liClass = hash.substring(0,hash.length-4);
url = hash + " #inside-content";
$fadeWrapper.load(url);
$("." + liClass).addClass("active");
} else {
$("#main-nav li:first").addClass("active");
}
*UPDATE: I have decided to just remove the javascript altogether. In doing some reading, I have come to the conclusion that the hashtag is there just so the script can tell which page is active, in order for the CSS to highlight one of the items in the navbar. It also has something to do with the animated gif that would show when you navigate pages. Neither one of those items are important enough for me to pull more of my hair out trying to figure out this stuff :D Thank you for your suggestions, though! *
The hash tags are added most likely because the links you are clicking have an href value of #.
Couldn't you just create a new header file (if that is where the navbar code is), modify the navbar how you want in that header file, and include the new file instead of the current header on the page where you want the different navbar?
I have a navigation system that I wanted to make compatible with both javascript disabled clients and Ajax capable ones.
for now I have dynamic links like "index.php?page=/cat/page.php" generated inside navigation.
<li id="sidebaritem"><a href="index.php?page=<?php echo "$dirArray[$index]/$subdirArray[$subindex]"; echo $title; ?></a></li>
so when index has "page" variable, it loads that page inside main container.
but I also like to make it load onclick with ajax(jquery included). so I added this code:
$(document).ready(function(){
$('li #sidebaritem').click(function() {
//Page Load code goes here
});
});
This is not working, because as I click the link, right after li->click occurs it redirects to page which Anchor tag is pointing to(of course it dose).
I had spent some time looking for a tutorial on this subject but I found nothing useful.
How can I make it work?
Is this good from SEO Point of view?
I saw this article using hash, Is this good for SEO and if it is how can I make it work on Java Disabled machines?
Sorry for poor English, I'm new in this subject and I'm learning as I go.
First of all Java and JavaScript are two separate things and you're working with JavaScript. Second of all you should replace id="sidebaritem" with class="sidebaritem" unless the id's are unique, but from your given code I don't think it is. Also in jQuery and CSS (which is where the selectors are coming from) if you use li space #id it means that you're trying to select a child element of li with an id #sidebaritem. So you might do li#sidebaritem or if the id's aren't unique li.sidebaritem
So you should try:
<li class="sidebaritem"><a href="index.php?page=<?php echo "$dirArray[$index]/$subdirArray[$subindex]"; echo $title; ?></a></li>
and
$(document).ready(function(){
$('li.sidebaritem a').click(function() {
$("#your-main-container").load($(this).attr('href'));
return false; //prevent click from redirection
});
});
About the SEO part:
These links aren't SEO friendly, because they don't contain the keywords of the title/description of your page (As far as I can tell). To improve the site performance in search engines you'll need to replace these with something like /cat/this-is-my-amazing-seo-friendly-page/. So you might want to replace the url (which will be rendered from the title) of the page into a SEO friendly . Here's a little snippet of code that will do the job.
function replaceLink($url) {
$url = preg_replace("/[^a-zA-Z0-9\-\s]/", '', $url); //find any other symbols than letters or numbers and replace them with an empty string
$url = preg_replace("/\s+/", '-', $url); //find all spaces and replace them with a dash
return $url;
}
So if you've got a page title: This is my amazing SEO friendly page pass it into this little function like this:
$link = replaceLink("This is my amazing SEO friendly page");
and you'll get This-is-my-amazing-SEO-friendly-page
Obviously this is just one of the basics for improving On-site SEO. You can read more about On-site seo here
Also. From the search engine perspective your AJAX page load will have no impact as long as the real links are specified in the menu and they work without JavaScript enabled.
Hope this helps
-- edit --
I've made the question far more detailed here: Drupal aggregators and tailored output
-- original question --
Is it possible to get the id of an html div element on any given page using php so I can do something like:
if($divid == 'id-of-div') { do this; }
--edit--
To clarify:
I have a page on a website. It could be any page. On that website I have a div element which I want to be able to target using php to populate depending on the id of that div element. For example:
if($divid == 'div1') { $output = 'div 1 output'; }
if($divid == 'div2') { $output = 'div 2 output'; }
return $output;
Hope that helps...
-- re-edit(!) --
I've commented below but think it would probably be more useful in here:
Hi, sorry I'm not being more clear. I'm not a php expert (as you can probably tell!). I am theming a Drupal site at the moment and have a function that generates output to a block. These are the same kinds of block but they are unique by virtue of their div id's. I want to be able to tailor the generated output to these depending on which div area it is. Does that make any more sense? Thanks for your help so far, by the way
I think you are misunderstanding the way PHP works. PHP is usually used to generate the raw HTML code of a page, but you usually don't use it to traverse the DOM of the output like you can in jQuery. (In theory, you can do this using output buffering and a HTML parser class, but it makes no sense at all.)
There shouldn't be the need to find elements by ID because in order to put something into a DIV, you can do the following:
<div id="mydiv">
<?php echo "This is inside mydiv"; ?>
</div>
The resulting HTML will be a DIV that contains whatever you told PHP to output. This is usually enough.
Not sure whether this helps you. If it doesn't, maybe add some more detail about what you want to do.
For this use hidden varriables
I am a front-end designer/code trying to style up pagination for a web app. It is called in one section of the application and called it with the following:
<?php echo $pagination;?>
And I used CSS + the Pagination JS file to style it up.
In another section of the application, which I have just been asked to style, it is called with this:
<?php echo $pages;?>
And looks entirely unstyled. When I replace $pages with $pagination the page control no longer appears. When I run a search for $pages through our repository I see no matches for $pages (not even in the pagination file).
Anyone have any idea why pagination breaks the control?
Thanks!
EDIT: I did a really bad job of explaining this. The problem is that I can find a reference to the variable $paginate in the repository (in paginate.js) and I was able to assign a CSS class to it through that JavaScript file, but I can't find any references to $pages, which I just can't wrap my head around. If I change the variable to something else that I think is defined (such as $paginate) it no longer displays the pagination.
EDIT: Figured it out, it was in the controller in CodeIgniter.
Well, I'm not quite sure if I my answer will help, but as far as I undertood your question
When $pages is called, in the source don't you see the HTML tags that those pages are? Why don't you try not assign smth in javascript but make styles in your CSS according to those html tags that are generated?
for ex.
<div class="smth">
<div class="your_$page_div">
<ul>
<li>text</li>
etc...
In your CSS do smth like div.smth div.your_$page_div ul li {some stile}
so you won't have to replace anything and assign smth in core file.
I hope I correctly understood what you were asking :P Cheers!
I just saw you figured out the problem
Is there a php or javascript code that can detect the current user's page and then add <a class="active"> to an item in a ul (my menu). I include my menu in my pages with PHP include so making change is easy; I only have to edit it once. But, with that method, I can't individually set each page to have a class="active". How can I do this?
You several options, e.g.,
The part that handles navigations can read the request URI directly. This can be done by reading $_SERVER['REQUEST_URI'] (don't forget this may include the query string).
At some point, you must know what page you're on, because you decide which content you display based on that. You can define a function that handles the navigation markup and pass it the name of the current page so that it knows which one it is.
If I'm understanding your question correctly, what I usually do is set a variable before I include the header, like
$current = "home";
And then in the header I'd have an if statement in each link
<a href="/home" <?php if ( $current == "home" ) { echo "class='active'" } ?>>Home</a>
Could be ways to improve it, but it's simple if your menu isn't too big.
In PHP, you can look at the value of $_SERVER['REQUEST_URI'].
In JavaScript, you can examine window.location.