I'm having quite the predicament with my navbar located in my footer. No matter what it seems I do, when I select one of the five choices, whatever icon is selected, the icons to the left of the selected icon receive the same icon. In other words, If I have a navbar with 1,2,3,4,5 and I select three, I now see 3,3,3,4,5 instead of 1,2,3,4,5. I've tried a number of different methods to attempt to eliminate the issue. All to no avail. Anyone have an idea what might be causing this? You can view the issue in question here. Just select one of the five buttons at the bottom and you'll see what's going wrong here.
Because that idea came from examples like this one and this one straight from JQuery itself. That's why it's so unusual that this bug is transpiring. How do you suggest I write the CSS for each button? Or should I change the HTML a bit?
BTW, I just checked and the Glypish example, does in fact, use ID's
Indeed, it does. It's still wrong.
It isn't documented as the proper way to do things, though. It will only work reliably with IDs if those IDs are used on one and only one element on one and only one page of the site.
As long as those same IDs are not used anywhere else on the JQM demo site (and I suspect that's the case) then technically it's correct. But it's poor practice.
In your case, since you do duplicate that navbar on multiple pages, it will not work in certain browsers. There is no guarantee as to how a given browser will handle the case of multiple elements with the same ID, because that is not valid HTML and the specification does not say how to handle this situation. So, there is no consistency between browsers.
Interesting. Now it does make sense. You're right, I'm using the code on multiple places on the site. Which might explain things a lot better. Pity they don't really explain that we should only use it once. That's very misleading.
I did do a version where I simply embedded a PNG in a img src tag for each of the five LI elements. Probably not the best practice, but it does work. Are there any examples of how to really properly do this?
Leave a comment on datatv's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic