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.
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 have tabs menu bottom of the page (footer) which is set to as accordion on responsive (<768px) but it works broken if you try to click accordion links and that's why I want to expanded false on default all accordion must be false. and I'm using tabCollapse plugin and it makes my tab menu to accordion on responsive with this code
JS
$('.footer-tabs-to-accordion').tabCollapse();
I tried every way on css and jquery but I couldn't achieve because of I'm new in web design and keen on
You need to add the class .collapsed to the <a> that is using the .accordian-toggle class in your HTML. Something like this:
<a class="accordion-toggle collapsed" data-toggle="collapse">Popüler Oteller</a>
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
I'm using scrollspy bootstrap effect. Here is an example http://jsbin.com/huhavejipepi/1/edit?html,css,js
When the user is navigating the site at the top of the page, the scrollspy effect should be disabled . However as you can see from that example, even when the home section isn't showed the link at the top of the bar seems active. Maybe is it a bug? Any workaround is available?
I think there are two or three tricks you can do to avoid the non desired behavior. One of them could be for e.g:
<ul class="nav navbar-nav">
<li>Intro</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
As you can see, you can add a hidden link to the first paragraph. Check here demo to see a working example.
Hope it's useful!
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.