I'm brushing up my html basics and I'm using a template to practice, here's my question with regards to reveal (uses jquery) menu:
<ul>
<li class="home-link">Home</li>
<li>Alpha</li>
<li>Beta</li>
</ul>
When the page is loaded and I click on the links nothing happens, the only one that works is home. In the example they use these type of links instead and they all work properly:
<ul>
<li class="home-link">Home</li>
<li>Alpha</li>
<li>Beta</li>
</ul>
They seem to be pointing to a folder instead? I've tried everything, relative, absolute, but nothing. Did they change the htaccess file? When I make a link outside of the menu div they work absolutely fine.
Any pointers, tips, hints? Thanks.
Edit: I applied the style to the other links as suggested but it didn't work. What's weird is that if I right-click and open the links they work.
Guessing it's to do with styling as I see you have a class on Home and home seems to be the only one that is working.
Try adding that same class on the other links and see if it works.
Also, if you're using position: absolute on one of the links and it remains unclickable, try adding a higher z-index to it [Not recommended as a permanent fix but rather to find the root of the problem].
CSS-Tricks has an excellent guide to understanding position properties.
Edit:
To clarify, add class="home-link" to the other li tags
Related
I am trying to make drop down according menu for wordpress. but getting trouble for wordpress render code and js. may be i can fix something on my js or can do something on my wordpress function it will work. the working and raw html version is here if you click on projects then menu is open.
but wordpress menu render little bit different way, render version html is here
see the difference raw html is like before
<li><div class="link">Projects<i class="icon-down"></i></div>
and render wordpress version is <li>Projects so main difference is div and link class.
have any idea how can make it work ?
Try providing id of the <ul>that holds the lists in href.
<li>Projects
or
try using data-target
<li><a data-target="Id of the ul">Projects</a>
I'm developing a very large page with lots of content and some overlays and all kinds of complicated things. I'll spare you all the code and only include the relevant pieces.
Essentially, I have some sidebar buttons that open an overlay depending on the button clicked. The HTML is below:
<div class="sideBtn sidebarOverlay" data-linkto="overlayMyInvoices">
<img src="icons/icon_invoice.svg" alt=""><h2>Invoices</h2>
</div>
<div id="overlayMyInvoices" class="overlay">
</div>
And here is some of the Javascript:
$(sideBtns).click(function(index){
var newId = "#" + (($(this).data("linkto")).toString());
var newOverlay = $(newId);
});
(I've left out a LOT of the Javascript, as I said I'm only including the relevant bits. That 'toString' might not be necessary, I'm not entirely sure I had it in there looking back, but I very much doubt that's the problem.)
BEFORE adding the jQuery tab plugin, this code works fine.
Now, INSIDE one of these overlays, I need some 'tabbed' content - so I downloaded three separate jQuery tab plugins, and ALL THREE of them produced the same error. In this particular case, the one I'm using is Tabslet. First, here's the HTML of the tab area:
<div id="overlayMyInvoices" class="overlay">
<div class='tabs'>
<ul class='horizontal'>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id='tab-1'></div>
<div id='tab-2'></div>
<div id='tab-3'></div>
</div><!-- tabs -->
</div>
And here's the Javascript:
$('.tabs').tabslet();
For some reason, every single jQuery tab plugin I use produces the same identical error (I've also used jQuery's UI core plugin, and EasyTabs). When I try to open ANY overlay using the sidebar buttons, the overlay doesn't appear, and I get THIS console error:
Uncaught TypeError: Cannot read property 'toString' of undefined
Perhaps the oddest element of this error is that it only appears ONCE. Any subsequent clicks after that first error function properly.
I just don't see how these plugins could be causing this error to appear. jQuery was able to read the custom data field before, how come it can't all of a sudden? If I don't call the plugin, it works again.
I realize this is a very long and complicated problem, but if anyone has ideas as to what this problem is and how to fix it, I'd be extremely grateful!
I discovered the problem, for anyone who still cares. I wrote some incredibly stupid Javascript that was looking for the class 'active'. Just any element with the non-specific class 'active'. The thing about 'active'? It's a great word that a lot of developers use. My code and the plugins were both using 'active', and my Javascript, since it was just looking for 'active' anywhere on the page, was effing up. So my own fault! Good.
I am working on admin dashboard with html, css and javascripts. This is my first time working on it. I used bootstrap for the responsive layout and some bootstrap js (tabs, collaps). I also use chartjs for pie chart and line chart and sidr responsive menu. But the problem is with bootstrap tab and collaps function. They didn't work properly.When i click on the tab menu tabs are working but don't showing chart content in it. I spent lot of time to fix this. But i can't. I need your help.
Here is the link for the admin dashboard: http://demo.devkinz.com/admindashboard/
You are including the JavaScript, but aren't targeting the tab elements with it. From the docs, you also need to add in a bit of JavaScript to specifically target those tabs.
Alternatively, you should be able to add data-toggle="tab" to each of your dashboard_menu li elements.
In your code you have:
<ul class="list-inline pull-right" role="tablist">
<li class="active">Usage</li>
<li>Monthly</li>
</ul>
But you have no .tab-pane's with the id's: id="ussgemonth" & id="coletsmonth"
Not only do you have 2 missing .tab-pane with these ids -- since these are nested you have to follow the same structure as the parent.
I wouldn't ask stackoverflow unless this was a serious problem. I simply cannot figure out how to debug this particular problem. A left navigation unordered list element is being injected with an inline display attribute. I can't figure out what js code is doing this.
There is a file in js/custom.js that if I remove the file, the effect does not happen. So I assume its in there. I tried grepping for .attr, .hide, .css etc etc but nothing comes up that points to the ul element who's display effect I am trying to track down. I greped the php files for instances where it echo's or prints elements and nothing there either. I used firebug and firequery but nothing that is apparent comes up after inspecting the element. I tried breakpoints for attribute changes in chrome tools.
I suspect the answer would be in the DOM inspector but its mystified for me. I'm going to need to read up on the DOM tree views for firefox and chrome tools. But in the meantime can anyone give me a clue as to what is giving the ul elements with the class subs, in this page, their display property?
This is easy to figure out in Chrome.
Find the parent element that' holds the list.
Inspect said parent element.
Right click on the element and check "Break on subtree modifications"
Find out who added the element by inspecting the stack trace.
Profit!
Hope that helps you find the culprit.
Have you tried Google Chrome Developer tools, to see if the CSS is what is hiding the element you are looking at?
Simply click on the element in the Chrome Browser, and select Inspect Element, then see what CSS properties are available.
Ultimately, what leaded me to this was, that I clicked on certain text, to open up the li's below. Then I search for the text, when I inspected the element, and found the anchor tag there with the text in it. I then assumed that the anchor had to be the culprit, and searched for its relate classname "exp", and found the js file that contained the function.
I looked at custom.js in crown/js folder, and found the following:
$('.exp').collapsible({
defaultOpen: 'current',
cookieName: 'navAct',
cssOpen: 'active',
cssClose: 'inactive',
speed: 200
});
The Li has an anchor element in it, with class of "exp"
<li class="forms"><span>Forms stuff</span><strong>4</strong>
<ul class="sub" style="display: none; ">
<li>Form elements</li>
<li>Validation</li>
<li>WYSIWYG and file uploader</li>
<li class="last">Wizards</li>
</ul>
</li>
When clicked on this a tag, it gets another class called "active", and jQuery then injects the display code:
<li class="forms"><span>Forms stuff</span><strong>4</strong>
<ul class="sub" style="display: block; ">
<li>Form elements</li>
<li>Validation</li>
<li>WYSIWYG and file uploader</li>
<li class="last">Wizards</li>
</ul>
</li>
The CSS then handles the rest.
I am using jquery tabify, http://unwrongest.com/projects/tabify/, to create a tab like feature for my menu.
Demo: http://jsfiddle.net/janjarfalk/6Y6Pa/1/
I am creating a menu like this:
<ul id="menu">
<li class="active">Home</li>
<li>Guestbook</li>
<li>Links</li>
</ul>
<div class="content" id="contentHome">Content for Home</div>
<div class="content" id="contentGuestbook">My guestbook</div>
<div class="content" id="contentLinks">Links</div>
The tabs will be added automatically as anchor link to my url, reading whatever that i have on my url. I need to have a url (for links tab only) such as {domain name}/{controller}/{method}/{articleId}#contentLinks-tab, examples:
http://www.test.com/site/shipping/5/#contentLinks-tab
http://www.test.com/site/delivery/3/#contentLinks-tab
while the rest will only be http://www.test.com/site#home-tab, etc. As you could see from the demo, the "{id}-tab" is auto generated based on the id. However, the problem arises if i am already on http://www.test.com/links/shipping/5/#contentLinks-tab of the links page, and if I were to go to other tabs like guestbook or home, the /shipping/5/#contentHome-tab will follow.
Can please advise how can I remove the /shipping/5/ even when I am on links tab, and hovering the rest of the tab? Sorry I was not able to provide much coding as I have no idea about doing it. Hence, really appreciate someone can shine some lights. Many thanks.
This is a tough one to answer, as jsFiddle is obviously missing the /shipping/5 part of the URL; And if understand correctly we're basically trying to change the functionality of the plugin.
At any rate, it's a little hacky, but you could try changing the href attribute of the Home and Guestbook links using javascript. So first give the Home and Guestbook links IDs:
Home
Guestbook
Then use jQuery to replace the URLs after Tabify has initialized:
$('#menu').tabify();
$('#home').attr('href','/site#contentHome-tab');
$('#guestbook').attr('href','/site#contentGuestbook-tab');
Which would equate to http://www.test.com/site#contentHome-tab, etc., effectively getting rid of the undesired part of the URL.
Or if that doesn't work (hard to tell when using such a plugin on jsFiddle), you could get even more hacky and instead add onclick listeners to the Home and Guestbook tabs:
$('#home').click(function() {
window.location.href = "/site#contentHome-tab";
});
I normally would never do something like this, but when you're working with plugins sometimes you gotta get a little hacky to achieve the desired effect =P
Hope this helps.