dynamically toggle class with javascript - javascript

I'm having trouble figuring out how to toggle a class depending on the anchor text that is clicked.
<div>
<a id="Menu1" href="#">Menu</a>
<div id="subMenu1" class="subLevel">
<p>stuff</p>
</div>
<div>
<a id="Menu2" href="#">Menu</a>
<div id="subMenu2" class="subLevel">
<p>stuff</p>
</div>
<div>
<a id="Menu3" href="#">Menu</a>
<div id="subMenu3" class="subLevel">
<p>stuff</p>
</div>
<script>
$(document).ready(function () {
$("#Menu" + [i]).on('click', function (e) {
e.preventDefault();
$("#subMenu" + [i]).toggleClass('dropDownShow');
});
});
</script>
Having trouble figuring out where var i changes from number 1 - 3 depenidng on anchor link that is clicked


Here is one way to do it:
<div>
<a id="Menu1" class="menu" href="#">Menu</a>
<div id="subMenu1" class="subLevel">
<p>stuff</p>
</div>
<div>
<a id="Menu2" class="menu" href="#">Menu</a>
<div id="subMenu2" class="subLevel">
<p>stuff</p>
</div>
<div>
<a id="Menu3" class="menu" href="#">Menu</a>
<div id="subMenu3" class="subLevel">
<p>stuff</p>
</div>
<script>
$(document).ready(function () {
$(".menu").on('click', function (e) {
e.preventDefault();
$(this).next().toggleClass('dropDownShow');
});
});
</script>

Related

How to make a tab system with jquery in this project?

I'm trying to create a tab system but I can not hide and show the tabs.
I can not find a way to make it work, this is my code.
$(function() {
$(".aba:not(:first)").hide();
$("a").click(function() {
var div = $(this).attr("href");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="left-side">
<div class="services">
<ul class="clearfix">
<li><a class="blink" href="#a_nota">NOTA</a></li>
<li><a class="blink" href="#a_frequencia">FREQUÊNCIA</a></li>
<li><a class="blink" href="#a_grade">GRADE CURRICULAR</a></li>
<li><a class="blink" href="#a_financeiro">FINANCEIRO</a></li>
</ul>
<div class="contato">
<div class="tell">
<img src="icon/phoneicon.png" alt="teste">
<p>Contato: 08000 023 1231</p>
</div>
</div>
</div>
</div>
<div class="right-side">
<div id="a_nota" class="aba">NOTA</div>
<div id="a_frequencia" class="aba">FREQUÊNCIA</div>
<div id="a_grade" class="aba">GRADE</div>
<div id="a_financeiro" class="aba">FINANCEIRO</div>
</div>
</div>

You can do like this, where you set all the tabs to display: none; and then on click add the class active which changes it to display:block !important;
$('a.blink').on('click', function(){
var clicked = $(this).attr('href').replace("#", "");
$('div.aba').each(function(){
if($(this).attr('id') === clicked){
$(this).addClass('active');
}else{
$(this).removeClass('active');
}
});
});
.aba{
display:none;
}
.aba.active{
display:block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="left-side">
<div class="services">
<ul class="clearfix">
<li><a class="blink" href="#a_nota">NOTA</a></li>
<li><a class="blink" href="#a_frequencia">FREQUÊNCIA</a></li>
<li><a class="blink" href="#a_grade">GRADE CURRICULAR</a></li>
<li><a class="blink" href="#a_financeiro">FINANCEIRO</a></li>
</ul>
<div class="contato">
<div class="tell">
<img src="icon/phoneicon.png" alt="teste">
<p>Contato: 08000 023 1231</p>
</div>
</div>
</div>
</div>
<div class="right-side">
<div id="a_nota" class="aba active">NOTA</div>
<div id="a_frequencia" class="aba">FREQUÊNCIA</div>
<div id="a_grade" class="aba">GRADE</div>
<div id="a_financeiro" class="aba">FINANCEIRO</div>
</div>
</div>

You can make it work this way:
jQuery:
$(".aba").not(":first-child").hide();
$(".blink").on("click", function(e) {
e.preventDefault();
var value = $(this).attr("href");
$(".aba").hide();
$(value).fadeIn(500);
});

Eror. The Content/Form not changing

i have a page in web 'about TOEFL'. if i click about TOEFL, then the content/form was changing to content/form about TOEFL. when i click 'about TOEFL' the content was changing but when i click 'close', the form/content not changing. please help
this is my page code
<!-- Start Page 2 About -->
<div id="page2" class="content">
<div class="container_12">
<div class="grid_12">
<div class="slogan">
<h3>Help your <span>TOEFL</span> Score<em> High</em></h3>
</div>
</div>
<!-- Start menu-form -->
<form id="menu-form">
<div class="grid_2">
<div class="box 60px"> <img src="images/img1.png" alt="">
<div class="text1">About TOEFL</div>
</div>
</div>
<div class="grid_2">
<div class="box 60px"> <img src="images/img2.png" alt="">
<div class="text1">Tips and Trick</div>
</div>
</div>
<div class="grid_2">
<div class="box 60px"> <img src="images/img8.png" alt="">
<div class="text1">Cambridge</div>
</div><br><br><br><br><br><br><br><br>
</div>
</form>
<!-- End menu-form -->
<!-- Start AboutTOEFL-form -->
<form id="AboutTOEFL-form" style="display:none" class="grid_14">
<div id="filters" class="sixteen columns">
<ul class="clearfix">
<li><a href="#page2" onclick="showAboutTOEFL()">
<h5>About TOEFL</h5>
</a></li>
<li><a href="#" >
<h5>Tips And Trick</h5>
</a></li>
<li><a href="#page2" onclick="showMenuForm()">
<h5>Close</h5>
</a></li>
</ul>
</div>
<div class="box 1000px">
<img src="images/toefl-1.jpg" alt=""><br><br>
--my text--
</div>
</form>
<!-- End AboutTOEFL-form -->
</div>
</div>
<!-- End Page 2 -->
this is my java script
<script type="text/javascript">
var showAboutTOEFL = function() {
document.getElementById("menu-form").setAttribute("style", "display:none");
document.getElementById("AboutTOEFL-form").setAttribute("style", "display:block");
}
</script>
<script type="text/javascript">
var showMenuform = function() {
document.getElementById("menu-form").setAttribute("style", "display:block");
document.getElementById("AboutTOEFL-form").setAttribute("style", "display:none");
}
</script>

The casing on your onclick event is wrong. You have onclick="showMenuForm()", but your function name is showMenuform (lowercase "f").

Javascript not working in mozilla firefox?

The following code is not working in mozilla firefox
works well in chrome
OS used is linux
In the code i have been changing the topbar color and the contents of the taskbar after certain scroll also there is a floating contact button to the left which need to be shown after certain div element is passed .Thanks in advance
window.onscroll = function (oEvent) { //onscrool
var mydivpos = document.getElementById("aboutus").offsetTop;
var mydivpos2 = document.getElementById("mainlogo2").offsetTop;
var mydivpos3 = document.getElementById("home").offsetTop;
var scrollPos = document.getElementsByTagName("body")[0].scrollTop;
if(scrollPos >= mydivpos)
{
document.getElementById("noshow").className = ""; //changin the classname
}
else {
document.getElementById("noshow").className = "hidden"; //the topbar which is need to show
}
if(scrollPos >= mydivpos2)
{
document.getElementById("topbarwithlogo").className ="";
document.getElementById("topbar").className = "hidden";
}
if(scrollPos == 0)
{
document.getElementById("topbar").className ="";
document.getElementById("topbarwithlogo").className = "hidden";
}
};
//HTML
<div id="noshow" class="hidden">
<div class="appiphycontact">
<ul>
<img src="logos/facebook.png" class="img-responsive">
<img src="logos/google+.png" class="img-responsive">
<img src="logos/Linkedin.png" class="img-responsive">
<img src="logos/twitter.png" class="img-responsive">
</ul>
</div>
<div class="container-fluid" id="topbar">
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-ar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse">
<ul class="nav navbar-nav" id="ul">
<li>
About Us
</li>
<li>
Our Team
</li>
<li>
Our Clients
</li>
</ul>
</div>
</nav>
<div class="container-fluid hidden" id="topbarwithlogo">
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" id="ul">
<li>
About Us
</li>
<li>
Our Team
</li>
<li id="li">
Our Clients
</li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid" id="home">
<div class="tinted-image">
<div class="container">
<div class="col-md-12" id="mainlogo2">
<img src="images/someimage.png" class="img-responsive" alt="">
</div>
</div>
<div class="container-fluid">
<div class="maincontent">
<div id="maincontent"><h1>.</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid aboutus" id="aboutus">
<div class="container">
<h2>About Us</h2>
<p class="aboutusheader2">LEADER IN IT SERVICES, DIGITAL AND BUSINESS SOLUTIONS</p>
<div class="row">
<div class="col-md-6 imagediv ">
<p id="aboutusinfo" >Some information.</p>
</div>
<div class="col-md-6 imagediv">
<div class="aboutusimg">
<ul>
<img src="images/someimage.png" class="img-responsive" alt="">
<img src="images/someimage.png" class="img-responsive " alt="">
<img src="images/someimage.png" class="img-responsive" alt="">
</ul>
</div>
</div>
</div>
</div>

Seems like there is something wrong with the if/else statements as the event is actually fired. If you add console.debug("scrollevent fired"); at the beginning of the function and use firebug to show the console log, you will notice that the output is actually written to the output (check the JSFiddle).
Unfortunately I cannot debug your code as I cannot find a couple of elements with the given Id's in your code sample...

Click function that opens and closes

I am trying to code something like this one on http://teamgeek.co.za/#who
I already had the code on the gif and div that will show the description on the bottom of each picture selected. The problem is that if I clicked on the second row, the opened description on the first row won't automatically close itself.
Here is my script that I used.
<script>
$("#items a").click(function() {
var id = $(this).attr("id");
$("#pages div#" + id + "").toggle("slow").siblings().hide("slow");
});
</script>
<script>
$("#items2 a").click(function() {
var id = $(this).attr("id");
$("#pages2 div#" + id + "").toggle("slow").siblings().hide("slow");
});
</script>
This is the full code that I used, and I am using the javascript above to get the functions:
<!-- Team Grid --><section class="main">
<div id="items">
<div class="item">
<a id="1" class="work">
<img class="media" src="img/tryimages/greggy.png"/>
<div class="content">
<img class="media" src="img/tryimages/greggy.gif"/>
<!--<h2 class="title">Click</h2>!-->
</div>
</a>
</div>
<div class="item">
<a id="2" class="work page-scroll">
<img class="media" src="img/tryimages/dennise.png"/>
<div class="content">
<img class="media" src="img/tryimages/dennise.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="3" class="work page-scroll">
<img class="media" src="img/tryimages/jm.png"/>
<div class="content">
<img class="media" src="img/tryimages/jm.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="4" class="work page-scroll">
<img class="media" src="img/tryimages/hannah.png"/>
<div class="content">
<img class="media" src="img/tryimages/hannah.gif"/>
</div>
</a>
</div>
</div>
</section><!-- End of Works Grid -->
<div id="pages">
<div id="1" class="mydivhide">
<h1>Greggy Rick Go</h1><h4>/Chief Executive Officer</h4>
</div>
<div id="2" class="mydivhide">
<h1>Dennise Recuerdo</h1><h4>/Secretary</h4>
</div>
<div id="3" class="mydivhide">
<h1>Jude Marlon Alegro</h1><h4>/Head Web Developer</h4>
</div>
<div id="4" class="mydivhide">
<h1>Hannah Lois Aliposa</h1><h4>/Head Content Writer</h4>
</div>
</div>
<!-- Team Grid --><section class="main">
<div id="items2">
<div class="item">
<a id="5" class="work page-scroll">
<img class="media" src="img/tryimages/rd.png"/>
<div class="content">
<img class="media" src="img/tryimages/rd.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="6" class="work page-scroll">
<img class="media" src="img/tryimages/soc.png"/>
<div class="content">
<img class="media" src="img/tryimages/soc.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="7" class="work page-scroll">
<img class="media" src="img/tryimages/anj.png"/>
<div class="content">
<img class="media" src="img/tryimages/anj.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="8" class="work page-scroll">
<img class="media" src="img/tryimages/ian.png"/>
<div class="content">
<img class="media" src="img/tryimages/ian.gif"/>
</div>
</a>
</div>
</div>
</section><!-- End of Works Grid -->
<div id="pages2">
<div id="5" class="mydivhide">
<h1>Ruth Danielle Aliposa</h1><h4>/Head Web Designer</h4>
</div>
<div id="6" class="mydivhide">
<h1>Christopher Emmanuel Socong</h1><h4>/Web Developer</h4>
</div>
<div id="7" class="mydivhide">
<h1>Angineth Bantiles</h1><h4>/Web Content Writer</h4>
</div>
<div id="8" class="mydivhide">
<h1>Ian Kevin Mendova</h1><h4>/Web Developer</h4>
</div>
</div>
</div>
</section>

If you want to go with this code you should maybe use this:
<script>
$("#items a").click(function() {
var id = $(this).attr("id");
$("#pages div, #pages2 div").siblings().hide("slow");
$("#pages div#" + id + "").toggle("slow");
});
</script>
I'm not sure if I understand the snippet correctly since I don't know the rest of your code :-)
However, this isn't a good way to solve your issue. As in the comments already mentioned, it's a lot better to handle it with classes.
Here is a jsfiddle which can easily solve your problem:
JSFiddle
However you might only change the effect, but this is a minor thing.

Below code optimization of toggle for your issue
you have set class as .row-data for each row and the and write below script..
<script>
$(".row-data a").click(function() {
$(".row-data").hide("slow");
$(this).parent().show("slow");
});
</script>
Note: remove your Script...

How to display sub menu-items on hover of main-menu in following scenario?

I have taken dump of bootstrap3 for menubar.
Its working fine, onclick of main-menu it is displaying sub menu-items.
But what i want is, on hover of main-menu sub menu-items should be displayed.
Following is code of onclick working menu bar:
<div class="jumbotron">
<div class="container">
<p class="lead">Grid Example</p>
<!-- Grid demo navbar -->
<div class="navbar navbar-default yamm">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>Yamm Megamenu
</div>
<div id="navbar-collapse-grid" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Grid 12 Menu -->
<li class="dropdown yamm-fw">Grid<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-12">.col-sm-12</div>
</div>
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
<div class="row">
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
</div>
<div class="row">
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
</div>
</li>
</ul>
</li>
<!--
<With>Offsets </With>
-->
<li class="dropdown yamm-fw">Offset<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-4">4</div>
<div class="col-sm-4 col-sm-offset-4">4 offset 4</div>
</div>
<div class="row">
<div class="col-sm-3 col-sm-offset-3">3 offset 3</div>
<div class="col-sm-3 col-sm-offset-3">3 offset 3</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">6 offset 6</div>
</div>
</li>
</ul>
</li>
<!--
<Aside>Menu </Aside>
-->
<li class="dropdown yamm-fw">Aside<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-3"><br>
<h3>3</h3><br>
</div>
<div class="col-sm-9"><br>
<h3>9</h3><br>
</div>
</div>
</li>
</ul>
</li>
<!--
<Nesting>Menu </Nesting>
-->
<li class="dropdown yamm-fw">Nesting<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-12">12</div>
</div>
<div class="row">
<div class="col-sm-12">12
<div class="row">
<div class="col-sm-4">4</div>
<div class="col-sm-4">4</div>
<div class="col-sm-4">4</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Javascript is as following:
<script>
$(function() {
window.prettyPrint && prettyPrint()
$(document).on('click', '.yamm .dropdown-menu', function(e) {
e.stopPropagation()
})
})
</script>
can any one help me out to resolve this.
Thanks in advance.

Try This one:
<script>
$("#nav li").hover(
function(){
$(this).children('ul').hide();
$(this).children('ul').slideDown('slow');
},
function () {
$('ul', this).slideUp('slow');
});
</script>
and make your as like this
<ul id="nav">

Categories

Resources