my demo link: http://www.bajistech.info/tiltindicators.html#TiltWatch-Plus1, i'm trying to make page scroll when i'm click on the vertical tab.
//script 1
$(document).ready(function(){
if (
$('ul#verticalNav li a').length &&
$('div.section').length
) {
$('div.section').css( 'display', 'none' );
//$('ul#verticalNav li a').each(function() {
$('ul#verticalNav li a').click(function() {
showSection( $(this).attr('href') );
});
// if hash found then load the tab from Hash id
if(window.location.hash)
{
// to get the div id
showSection( window.location.hash);
}
else // if no hash found then default first tab is opened
{
$('ul#verticalNav li:first-child a').click();
}
}
});
</script>
//script 2
function showSection( sectionID ) {
$('div.section').css( 'display', 'none' );
$('div'+sectionID).css( 'display', 'block' );
}
$(document).ready(function(){
if (
$('ul#verticalNav li a').length &&
$('div.section').length
) {
$('div.section').css( 'display', 'none' );
//$('ul#verticalNav li a').each(function() { // no need for each loop
$('ul#verticalNav li a').click(function() { // Use $('ul#verticalNav li a').click
showSection( $(this).attr('href') );
});
//});
if(window.location.hash) // if hash found then load the tab from Hash id
{
showSection( window.location.hash);// to get the div id
}
else // if no hash found then default first tab is opened
{
$('ul#verticalNav li:first-child a').click();
}
}
});
html sourcce code
<ul>
<li>a</li>
<li>b</li>
</ul>
<div id="sections">
<div class="section" id="a">
</div>
<div class="section" id="b">
</div>
Try this:
$( "#tabs li" ).click(function() {
//user clicked on the li
scrollTo(0,0);
});
or
$("#tabs li").click( function(){
var tabs_offset = $("#tabs").offset();
scrollTo(tabs_offset.left, tabs_offset.top);
});
Related
I need to create a function with switch inside which will use cases. As cases I'll have '#a li' '#b li' '#c li' '#d li'
If #a/b/c/d li clicked, it will check screen width (for responsiveness), and if it is less than 990 it will show modal #amodal #bmodal and etc, depends on which # is clicked.
How to turn it into one function with switch and cases?
Jquery:
$('#a li').click(function(){
if ($(window).width() < 990) {
$('#amodal').modal('show');
}
});
$('#b li').click(function(){
if ($(window).width() < 990) {
$('#bmodal').modal('show');
}
});
$('#c li').click(function(){
if ($(window).width() < 990) {
$('#cmodal').modal('show');
}
});
$('#d li').click(function(){
if ($(window).width() < 990) {
$('#dmodal').modal('show');
}
});
If #a, #b , #c , #d is not a parent of li you shoud use closest to find what modal to open
$('#a li , #b li , #c li , #d li').click(function () {
if ($(window).width() < 990) {
$('#'+$(this).closest("#a , #b , #c , #d").attr("id")+'modal').modal('show');
}
});
If #a, #b , #c , #d is a parent of li use parent
$('#a > li , #b > li , #c > li , #d > li').click(function () {
if ($(window).width() < 990) {
$('#'+$(this).parent().attr("id")+'modal').modal('show');
}
});
I prefer to add class as a selector and use it
$('.open_modal > li ').click(function () {
console.log("Modal to open:" + $(this).parent().attr("id"));
/*if ($(window).width() < 990) {
$('#' + $(this).parent().attr("id") + 'modal').modal('show');
}*/
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="a" class="open_modal"><li>Test A</li></ul>
<ul id="b" class="open_modal"><li>Test B</li></ul>
<ul id="c" class="open_modal"><li>Test C</li></ul>
<ul id="d" class="open_modal"><li>Test D</li></ul>
You can do something like this, Jquery doc
$("#a li, #b li, #c li, #d li").click(function(){
if ($(window).width() < 990) {
// if parent: $(this).parent().attr("id")
$("#" + $(this).attr("id") + "modal").modal('show');
}
});
I can not keep my Menu opened and I am having problem to follow to the Link of the Menu instead to to slide down. The slide down should be done by right floated counter.
The Code to keep opened at current page
$(document).ready( function() {
$('#cssmenu ul li.has-sub').parent().show();
$('#cssmenu ul li.has-sub ul').show();
$('#cssmenu li.has-sub ul').show();
});
My Example Code: http://jsfiddle.net/5abCc/
Thanks!
Add an open class to your active ul like,
HTML
<li class='has-sub open'><a href='javascript:;'><span>Company</span></a>
<ul>
<li><a href='javascript:;'><span>About</span></a></li>
<li class='last'><a href='javascript:;'><span>Location</span></a></li>
</ul>
</li>
SCRIPT
$(document).ready( function() {
$('#cssmenu li.has-sub.active ul').show();
});
To add click event on span try this,
$('#cssmenu > ul > li > a .cnt').click(function() {
// ----------------^ span counter element
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).parent('a').next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});
Demo
I use this script
$(function () {
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
$('.tree li.parent_li > span').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' > ul > li');
if (children.is(":visible")) {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
} else {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
}
e.stopPropagation();
});
http://jsfiddle.net/jhfrench/GpdgF/
for recursive collapsible menu. It works perfectly. But I need the menu collapsed initially that is when the page load and expand only on click.
My JS knowledge is weak. But i tried using toggle(); and hide(); , it results in collapsed and doesnt expand on click
Below is recursive php code
<?php
function listroles($roles)
{
?>
<ul>
<?php
foreach($roles as $role)
{
?>
<li>
<span><i class="icon-plus "></i> Parent</span> <?php echo $role['category']->name; ?>
<?php
if ( ! empty($role['children']))
{
listroles($role['children']);
}
?>
</li>
<?php
}
?>
</ul>
<?php
}
listroles($this->categories_menu);
?>
You can add a css rule to hide the child li elements at the start
.tree li ul > li {
display: none;
}
Demo: Fiddle
or hide the child li element on page load
$(function () {
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
//hide the child li elements
$('.tree li ul > li').hide();
$('.tree li.parent_li > span').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' > ul > li');
if (children.is(":visible")) {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
} else {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
}
e.stopPropagation();
});
});
Demo: Fiddle
The easiest way to accomplish what you want is to run the click() handler once.
$(function () {
$('.tree li.parent_li > span').on('click', function (e) {
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
//blah blah blah
e.stopPropagation();
}).click();
});
edit: forgot some code
I am very new to jQuery and Javascript so I'm having issues with my style switcher, the css part works but the script doesn't and I'm not sure how to do make it work.
Javascript:
$("#navorin li a").click(function() {
$("link.nav").attr("href",$(this).attr('rel'));
$("script.nav").attr("src",$(this).attr('role'));
});
HTML:
<ul id="navorin">
<li>Left Menu</li>
<li>Right Menu</li>
<li>Top Menu</li>
<li>Top Menu Fixed</li>
</ul>
It changes these:
<script class="nav" src="assets/js/leftmenu.js"></script>
<link class="nav" href="assets/css/leftmenu.css" type="text/css" media="screen" rel="stylesheet">
My menu scripts looks roughly like this, if that helps:
$(window).load(function () {
$('.sidenav ul > li').click(function (ev) {
$(this).find('>ul').fadeToggle();
ev.stopPropagation();
});
$('.sidenav ul > li a.back').click(function (ev) {
$(this).parent().parent().fadeOut();
ev.stopPropagation();
});
});
$(window).on("load resize", function () {
if ($(window).width() <= 768) {
$(document).on("swiperight", function () {
$(".sidenav").addClass('sidenavhover');
$(".overlay").fadeIn();
$(".sidenav li.user").addClass('usershow');
});
$(document).on("swipeleft", function () {
$(".sidenav").removeClass('sidenavhover');
$(".sidenav ul > li ul").hide();
$(".overlay").fadeOut();
$(".sidenav li.user").removeClass('usershow');
});
$(".overlay").click(function () {
$(".sidenav").removeClass('sidenavhover');
$(".sidenav ul > li ul").hide();
$(".overlay").fadeOut();
$(".sidenav li.user").removeClass('usershow');
});
}
if ($(window).width() >= 769) {
$(".sidenav").mouseover(function () {
$(".sidenav").addClass('sidenavhover');
$(".sidenav li.user").addClass('usershow');
$(".overlay").fadeIn();
});
$(".overlay").click(function () {
$(".sidenav").removeClass('sidenavhover');
$(".sidenav ul > li ul").slideUp(100);
$(".sidenav li.user").removeClass('usershow');
$(".overlay").fadeOut();
});
} if ($(window).height() < 458) {
$(".sidenav ul > li.logout").css('position', 'relative');
$(".sidenav ul > li.logout").css('border-top', '0');
}
if ($(window).height() > 458) {
$(".sidenav ul > li.logout").css('position', 'absolute');
$(".sidenav ul > li.logout").css('border-top', '1px solid #eeeeee');
}
if ($(window).height() < 588) {
$(".sidenav.sidenavhover ul > li.logout").css('position', 'relative');
$(".sidenav.sidenavhover ul > li.logout").css('border-top', '0');
}
if ($(window).height() > 588) {
$(".sidenav.sidenavhover ul > li.logout").css('position', 'absolute');
$(".sidenav.sidenavhover ul > li.logout").css('border-top', '1px solid #eeeeee');
}
});
If anyone could help my make it work that would be amazing
Thanks,
Alfred
ok so my website has a navigation with an id #nav so I want to activate a tabber based on the click navigation list. The navigation #nav has an html like this:-
<ul id ="nav">
<li>Fred</li>
<li>Thom</li>
<li>Kay</li>
</ul>
now when Fred is clicked from the navigation, I want to activate this on the tabber which has an html like this
<ul class="tabs">
<li>Fred</li>
<li>Thom</li>
<li>Kay</li>
</ul>
and tab content like this:-
<div id="tab1" class="tab_content">Lorem</div>
<div id="tab2" class="tab_content">Ipsum</div>
<div id="tab3" class="tab_content">Dolor</div>
so I wrote the following line of jquery
$("#nav li").click(function() {
var hash = location.hash;
var sel = $("ul.tabs li a[href='" + hash + "'], ul#tabs li a[href='" + hash + "']");
if (sel.length) {
sel.addClass("active").parent().addClass("active"); //Activate tab
$(hash).show();
}
but it's not working :( what am I doing wrong guys?
Try
$(function(){
$("#nav li").click(function(event) {
var hash = $('a', this).attr('href');
var sel = $("ul.tabs li a[href='#" + hash + "']");
sel.trigger('click')
return false;
});
$('.tab_content').hide();
var tabllis = $('ul.tabs li');
tabllis.click(function(){
var $this = $(this).addClass('active');
var hash = $('a', this).attr('href');
tabllis.not($this).removeClass('active');
$('.tab_content').hide();
$(hash).show();
return false;
});
});
Demo: Plunker