i need help creating and actice state on tabs here is my javascriptand part of my html i cant seem to enter css on here please request it if you require it
i need it so which ever tab you are on it shows the same color as the active container background with no borders on the join i need this for the top and side tabs any help on how to do this would be much appreciated as ive looked for days for a solution and only ones i can find are plugins which i dont want to use
also i tried to post an image but im not allowed
java script
$(document).ready(function () {
$("a").click(function () {
$(".side").show(".fastest");
});
$(".overveiw").click(function () {
$(".hide").hide();
$(".div1").show();
$(".overveiw").addClass("active");
});
$(".tour").click(function () {
$(".hide").hide();
$(".div2").show();
});
$(".websites").click(function () {
$(".hide").hide();
$(".div3").show();
});
$(".faq").click(function () {
$(".hide").hide();
$(".div4").show();
});
$(".support").click(function () {
$(".hide").hide();
$(".div5").show();
});
});
top navigation tabs
<ul>
<li class="dealer"><a class="dealer">Manufacturer Dealer</a></li>
<li class="lender"><a>Lender<br /> </a></li>
<li class="developer"><a>Developer<br /> </a></li>
</ul>
side navigation
<ul class="side">
<li class="overveiw data-panel"><a>Overveiw</a></li>
<li class="tour data-panel"><a>Take the tour</a></li>
<li class="websites data-panel"><a>Example websites</a></li>
<li class="faq data-panel"><a>FAQ</a></li>
<li class="support data-panel"><a>Support</a></li>
</ul>
and 5 containing divs wrapped in a main container
fixed now managed to create the effect i was after. after much trial and error here is the code i used for each tab maybe there is a simpler way to do it but this works for now
$(".tour").click(function () {
$(".hide").hide();
$(".div2").show();
$(".tab").addClass("inactive");
$(".tour").removeClass("inactive");
$(".tour").addClass("active");
});
Related
The website is http://109.74.0.128/~app/assistanstv/assistanstv/www.assistans.tv/tv.html
HTML:
<nav class="menu">
<ul class="active">
<li class="current-item">Home</li>
<li>Barnasisstans</li>
<li>Intervjuer</li>
<li>Juridik</li>
<li>LSS2020</li>
<li>Resor</li>
<li>Utbildning</li>
</ul>
<a class="toggle-nav" href="#">☰</a>
</nav>
jquery
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
the css code is too long, i cant get it work anyway. This drive me soon crazy. Whats wrong?!
Edit: Problem solved. The problem was
it was a / in the end. I solved it by deleted the last /
I think you want this:
$(document).ready(function() {
$('.toggle-nav').click(function(e) {
$('.toggle-nav').removeClass('active')
$(this).toggleClass('active');
$('.menu ul').toggleClass('active');
e.preventDefault();
});
});
CSS
.active {
background:tomato;
}
this class just a sample for showing toggling of class
updatelink of your code
I'm having trouble understanding the ng-show angular directive, it is not working correctly for me. I can't get the boolean value to change in the controller like some examples I've seen online. Rather than use the tabs javascript I decided to try and implement a simple angular show and hide for the tabs. However I have checked many examples on the web and I can't find out what is going wrong. Nothing is showing up at all from the divs.
<div class="row" ng-controller="ExtractionTabsCtrl">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li id="titles"class="active">Titles</li>
<li id="contacts">Contacts</li>
<li id="writers">Writers</li>
<li id="files">Files</li>
<li id="companies">Companies</li>
</ul>
</div>
<div ng-show="titlesdiv">Titles</div>
<div ng-show="contactsdiv">Contacts</div>
<div ng-show="writersdiv">Writers</div>
<div ng-show="filesdiv">Files</div>
<div ng-show="companiesdiv">Companies</div>
and my JS side
MPWAdminControllers.controller("ExtractionTabsCtrl",["$scope", function($scope){
$scope.writersdiv=false;
$scope.contactsdiv=false;
$scope.filesdiv=false;
$scope.titlesdiv=true;
$scope.companiesdiv=false;
$('#contacts a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=false;
$scope.contactsdiv=true;
$scope.filesdiv=false;
$scope.titlesdiv=false;
$scope.companiesdiv=false;
})
$('#writers a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=true;
$scope.contactsdiv=false;
$scope.filesdiv=false;
$scope.titlesdiv=false;
$scope.companiesdiv=false;
})
$('#files a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=false;
$scope.contactsdiv=false;
$scope.filesdiv=true;
$scope.titlesdiv=false;
$scope.companiesdiv=false;
})
$('#companies a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=false;
$scope.contactsdiv=false;
$scope.filesdiv=false;
$scope.titlesdiv=false;
$scope.companiesdiv=true;
})
$('#titles a').click(function (e) {
e.preventDefault()
$(this).tab('show')
$scope.writersdiv=false;
$scope.contactsdiv=false;
$scope.filesdiv=false;
$scope.titlesdiv=true;
$scope.companiesdiv=false;
})
}]);
Simply Trying to flip the show value on each div whenever a tab is selected. I have a feeling it might have to do with mixing jquery and angular but Im not sure.
Thanks
James
You are trying to mix JQuery and AngularJS where you would probably be fine with just AngularJS, this should definitely work.
HTML
<li id="contacts"><a ng-click="ShowContacts()">Contacts</a></li>
..
Javascript
$scope.ShowContacts = function()
{
$scope.contactsdiv = true;
.....
Just fill in with the rest of your code.
ng-click is an easier way then defining JQuery on click events. It will execute whatever Javascript you put inside of it and is overall cleaner.
You can also move the ng-click to the li tag which would eliminate your need for the a tag to begin with.
Edit:
Like the previous answer said, you need to extend the controller div to include what your changing. I missed that, what you have with JQuery should work then, but ng-click will be much cleaner regardless.
Based on where you defined your controller, the ng-show directive is not in the same scope as the links you've defined. You need to change your where the definition of the controller is like so:
<div class="container" ng-controller="ExtractionTabsCtrl">
<div class="row">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li id="titles"class="active"><a href ng-click="test()">Titles</a></li>
<li id="contacts">Contacts</li>
<li id="writers">Writers</li>
<li id="files">Files</li>
<li id="companies">Companies</li>
</ul>
</div>
<div ng-show="titlesdiv">Titles</div>
<div ng-show="contactsdiv">Contacts</div>
<div ng-show="writersdiv">Writers</div>
<div ng-show="filesdiv">Files</div>
<div ng-show="companiesdiv">Companies</div>
</div>
You'll notice I added a wrapper around your row and subsequent divs. The wrapping div is now the total scope of your controller, instead of just the ul.
I have built a dropdown menu that works fine. It goes like this:
Main menu items are in horizontal bar, then
When hover on any item, big dropdown box (with submenu links) is shown.
And here is my code for this:
HTML:
<!-- Based on Bootstrap -->
<div class="navbar navbar-inverse">
<div class="nav-collapse collapse">
<ul class="nav">
<li>First item
<div id="about-horizontal-submenu" class="horizontal-submenu">
<div class="submenu-container span3">
<ul>
<li>Links</li>
<li>Links</li>
</ul>
</div>
<!-- and 4x similar div (to have 12 cols) -->
</div>
</li>
<li>Dropdown
<div id="about-horizontal-submenu" class="horizontal-submenu">
<!-- 3x similar div (like above) and then: -->
<div class="submenu-container span3">
<ul>
<li>I want to go here</li>
<li>Links</li>
</ul>
</div>
</div>
</li>
<!-- And then goes another main menu item... -->
</ul>
</div>
</div>
</div>
JS:
jQuery(document).ready(function($) {
'use strict';
$('.navbar .nav > li').hover(function() {
var $el = $(this);
$el.addClass('hover');
var $submenu = $el.find('.horizontal-submenu');
if ($submenu.is(':hidden')) {
$submenu.slideDown(200);
}
}, function() {
var $el = $(this);
$el.removeClass('hover');
var $submenu = $el.find('.horizontal-submenu');
if ($submenu.is(':visible')) {
$submenu.hide();
}
});
});
Problem
I think I need to add a little delay before both - sliding Down submenu on very first hover and - changing submenu content (when switching/hovering to another menu item).
Why?
When you hover on "Dropdown" and want to choose "I want to move here":
You have to go down from "Dropdown" item and then to the right - which is ok (but not very usable).
Problem is, when you go like the image is showing (from the "Dropdown" straight to the "I want to move here" - you catch "Third item" on your way and immidiatelly see the content that belongs to "Third item". And that's not very good.
If you could show me how to delay/ignore hover on my menu items for very short time, I would be grateful. (I found great example behavior of menu on: http://FEI.com)
Ben Kamens from Khan Academy wrote an article regarding this exact problem, outlining how Amazon.com solved it. It is a great read!
http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
He also put together a jQuery plugin to solve this problem with a working demo. You can find it on GitHub here:
https://github.com/kamens/jQuery-menu-aim
http://htmlpreview.github.io/?https://github.com/kamens/jQuery-menu-aim/blob/master/example/example.html
$(function($) {
var m;
var timer="";
var wait=200;
active=function(){
$('.navbar .nav > li').mouseover(function() {
m = $(this);
if(timer==""){
test();
unb();
timer = setTimeout(reb,wait);
}
});
}
test = function(){
$(".horizontal-submenu").stop().hide(300);
m.find(".horizontal-submenu").stop().show(300);
};
unb = function(){
$('.navbar .nav > li').unbind('mouseover');
};
reb = function(){
timer="";
active();
};
$(".horizontal-submenu").hide(300);
active();
});
Adjust 'wait' for your best timing; You can just copy and try on your script.
This might be what you are looking for:-
http://cherne.net/brian/resources/jquery.hoverIntent.html
From this you need 2 lines on your web page to activate the hover to working properly
1) Loading script hoverIntent
2) Change from hover to hoverIntent in your jQuery
please try setTimeout. It always does the trick.
I got a small problem in JQuery .selectable function
what I wanna do is bind some events to each tabs.
I can handle a click event of each tabs
but the problem is when I select two or more tabs,
I can't figure out how I handle it.
for example, if I click(and also just select by dragging) one tab,
some sorting function must be works and
also each different defined function must be works in dragging multiple selections.
Ofcourse, I can use some flag cheat to solve this
but that is not what I really want.
does anyone have some effective solutions?
$("#selectable2").selectable(
{
selected: function()
{
$(".arcplan").on("selectableselected", function()
{
$(".big-tile").hide(200);
})
}
});
<div class="menu">
<div class="inner">
<ol id="selectable2">
<li class="alltype2">all</li>
<li class="arcplan">Arcplan</li>
<li class="msbi">MSBI</li></li>
<li class="excel">Excel</li>
<li class="etc">etc</li>
</ol>
</div>
</div>
Try
$("#selectable2").selectable({
selected : function(event, ui) {
if($(ui.selected).hasClass('arcplan')){
$(".big-tile").hide(200);
}
}
});
Demo: Fiddle - when you click on Arcplan the big-tile element is hidden and if you select anything else it is displayed back.
From the docs (http://api.jqueryui.com/selectable/#event-selected):
$('#selectable2').selectable();
$('#selectable2').on('selectableselected', function(event, ui){
doSomethingWithTheSelected(event.target);
});
I don't want to use the toggle, what would I need to use to get the following nav structure to stay put when main link is hovered over?
Current js:
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(function(){
$(".servicesdropped").toggle("fast");
});
});
</script>
Sample page
(Notice that when the submenu pops up, I cannot click on the links, as the submenu fades away)
If you aren't fussed about animation, and you wish to use JQuery you can toggle the CSS visibility rule on the class.
$(document).ready(function()
// Make sure the item is hidden initially, best to do
// this in CSS.
$(".servicesdropped").css("visibility", "hidden");
{
$(".downservices").hover(function()
{
$(".servicesdropped").css("visibility", "display");
},
function()
{
$(".servicesdropped").css("visibility", "hidden");
});
});
Using visiblity means the element will still consume the space it does in the DOM but does not display making sure the structure and positioning of other elements surrounding it are left in tact. The downside is that animations such as fadeIn() and fadeOut() will not work.
Your html markup architecture of menu should like this:
<ul>
<li class="downservices">GUYS
<div class="servicesdropped" style="display: none;">
<ul class="middle">
<h3>Shirts & Tanks:</h3>
<li>MuSkull</li>
<li>Bamboo Athletic Tank</li>
<li>Thin Strap Tank</li>
</ul>
<ul class="right">
<h3>Other Stuff:</h3>
<li>Shorties</li>
<li>Hoodies</li>
<li>Socks</li>
<li>Hats</li>
</ul>
</div>
</li>
<li>products</li>
<li>portfolio</li>
<li>contact</li>
</ul>
And in the script use this:
$(document).ready(function(){
$("li.downservices").hover(function()
{
$(this).find(".servicesdropped").slideDown("fast");
},
function()
{
$(this).find(".servicesdropped").slideUp("fast");
});
});
use like this
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(function(){
$(".servicesdropped").slideDown();
});
});
</script>
for hover out the menu disappear use this
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").hover(
function(){
$(".servicesdropped").slideDown();
},
function(){
$(".servicesdropped").slideUp();
}
);
});
</script>