Jquery AddClass and RemoveClass - javascript

I wish to addclass and removeclass when I click the tab, when click the tab on the first time, shopiteminfo_content_mobile_label add a class call activetab , if I click again the tab or click others tab , the class activetab will remove. Reason to do this is because i want the active tab have a special css. Any idea how to do this ? AddClass and RemoveClass ... Thanks
$(function () {
$('.shopiteminfo_content_mobile_label').click(function () {
$(this).removeClass("activetab");
$(this).addClass("activetab");
$(this).next('.shopiteminfo_content_mobile_content').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
$('.shopiteminfo_content_mobile_label').bind('touchstart', function (e) {
$(this).trigger('click');
e.preventDefault();
});
});
.shopiteminfo_content_mobile_container {
position:relative;
clear:both;
font-family:'Raleway';
margin-bottom:10px;
color:#000;
}
.shopiteminfo_content_mobile_container li{
display: block;
text-align: center;
text-decoration: none;
list-style:none;
color: #888;
border: 1px solid #ddd;
background: #fff;
cursor:pointer;
}
.shopiteminfo_content_mobile_label{
cursor:pointer;
display:block;
text-align:left;
font-size:14px;
color:#000;
padding:10px;
}
.shopiteminfo_content_mobile_content {
display:none;
font-size:15px;
text-align:justify;
background:#fff;
color:#000;
}
.shopiteminfo_content_mobile_content:last-of-type {
}
.shopiteminfo_mobile_productsdetail_inner_container{
width:95%;
border-bottom:1px dashed #ccc;
margin-bottom:10px;
margin-left:10px;
padding-bottom:10px;
}
.shopiteminfo_mobile_productsdetail_inner_container .shopiteminfo_mobile_label{
display:list-item;
list-style:none;
font-weight:bold;
font-size:13px;
padding:3px;
}
.shopiteminfo_mobile_productsdetail_gallery_container{
padding:0px 10px 10px 10px;
}
.shopiteminfo_mobile_productsdetail_gallery_container img{
width:auto;
height:auto;
display:block;
margin:0 auto;
padding-top:10px;
padding-bottom:10px;
}
.shopiteminfo_mobile_productsdetail_galleryname{
background:#09c;
color:#fff;
text-transform: uppercase;
padding:10px;
text-align:center;
margin-top:5px;
width:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shopiteminfo_content_mobile_container">
<li class="shopiteminfo_content_mobile_tobeclick">
<label class="shopiteminfo_content_mobile_label">A</label>
<div class="shopiteminfo_content_mobile_content">
test
</div>
</li>
<li class="shopiteminfo_content_mobile_tobeclick">
<label class="shopiteminfo_content_mobile_label">B</label>
<div class="shopiteminfo_content_mobile_content">
test
</div>
</li>
<li class="shopiteminfo_content_mobile_tobeclick">
<label class="shopiteminfo_content_mobile_label">C</label>
<div class="shopiteminfo_content_mobile_content">
test
</div>
</li>
</div>

you should use toggleClass
$(this).toggleClass("activetab");
This would remove the css class if its already present or add it if its not.

Is this what you want?
http://jsfiddle.net/fh6tg75s/2/
$(function () {
$('.shopiteminfo_content_mobile_label').click(function () {
$(this).next('.shopiteminfo_content_mobile_content').slideToggle();
$(this).parent().siblings().children().next().slideUp();
$(this).toggleClass("activetab");
$('.shopiteminfo_content_mobile_label').not(this).removeClass("activetab");
return false;
});
$('.shopiteminfo_content_mobile_label').bind('touchstart', function (e) {
$(this).trigger('click');
e.preventDefault();
});
});

Replace the below
$(this).removeClass("activetab");
$(this).addClass("activetab");
to which uses $.fn.toggleClass
$(this).toggleClass("activetab");
Add or remove one or more classes from each element in the set of
matched elements, depending on either the class's presence or the
value of the state argument.

Just for a try you can use the ternary operator ?: which also may referred to as ternary if. In just a single line of code check if your element has the active class or not. If it has then on click remove it and if it doesn't have then add this. Here's the code,
HTML :
<div id="mainDiv">Click Here</div>
CSS :
.activeDiv{
background-color : green;
}
jQuery :
$("#mainDiv").on("click", function(){
$(this).hasClass("activeDiv") ? $(this).removeClass("activeDiv") : $(this).addClass("activeDiv")
});
jsFiddle

Related

Check input if value is empty be appear

I have input form and sticky menu whenever scroll page bottom of B element my sticky menu appears but I want to check if my input is empty than show if is not there is no reason be apper how to do that ?
my structure
HTML
<html>
<head>
</head>
<body>
<ul class="sticky">
<li>Home</li>
<li>About Us</li>
<li>Download</li>
<li>Forums</li>
<li>Contact</li>
</ul>
<div class="container">
<input type="text" class="input" value="">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>
CSS
.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
display:none;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}
JS
$(function() {
$(window).scroll(function() {
if($(window).scrollTop() > $(".b").offset().top+$(".b").height()){
$(".sticky").show();
}else{
$(".sticky").hide();
}
});
});
my structure I added input control like this;
$(function() {
var input = $("input").val();
if(input==""){
$(window).scroll(function() {
if($(window).scrollTop() > $(".b").offset().top+$(".b").height()){
$(".sticky").show();
}else{
$(".sticky").hide();
}
});
}
});
but didn't work.
click to see demo
This is really simple, this code will check if the input is empty too and if it's empty will show you the sticky bar.
$(function() {
$(window).scroll(function() {
if($(window).scrollTop() > $(".b").offset().top+$(".b").height() && $("input").val() == ""){
$(".sticky").show();
}else{
$(".sticky").hide();
}
});
});
NOTE: By the way I recommend you to take a course about logic and jQuery in order to solve this kind of things, because people here is going to help you solve your problems, but they aren't going to write it down for you normally. There are really good courses about it out there, take some time and you'll be able to solve this kind of problems easily. Keep up the good work I know you can ;)

How to make a cross close sign in popup

I have used a popup script so that popup appear on my screen when I load my html file now I want a close sign on the top right corner on the popup screen like in the picture shown below
The code I have used is
("jsfiddle.net/sGeVT/10/")
this script code is an example of my code I have further modified it but the basic of the popup is same.
Hope you understand and can give solution.
(1) Add a span with a x inside, × the best looking one IMO.
<span class="deleteMeetingClose">×</span>
(2) Set up some styles for it.
.deleteMeetingClose {
font-size: 1.5em;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
(3) Add it to the jQuery code along with other close triggers.
$('#overlay, .deleteMeetingCancel, .deleteMeetingClose').click(function () {
//close action
});
Updated demo: http://jsfiddle.net/zj0yL9me/
$('.deleteMeeting').click(function () {
$('#overlay').fadeIn('slow');
$('#popupBox').fadeIn('slow');
$('#popupContent').fadeIn('slow');
});
// added .deleteMeetingClose into the selectors
$('#overlay, .deleteMeetingCancel, .deleteMeetingClose').click(function () {
$('#overlay').fadeOut('slow');
$('#popupBox').fadeOut('slow');
$('#popupContent').fadeOut('slow');
});
$('.deleteMeetingButton').click(function () {
$('#popupContent').fadeOut('slow');
$('#deleteMeetingConfirmDeleted').fadeIn('slow');
$('#overlay').delay(1300).fadeOut('slow');
$('#popupBox').delay(1300).fadeOut('slow');
$('#deleteMeetingConfirmDeleted').fadeOut('slow');
});
#overlay {
display:none;
opacity:0.5;
background-color:black;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index: 999;
}
#popupBox {
display:none;
position: relative;
margin-left:auto;
margin-right:auto;
margin-top:100px;
width:600px;
height: 500px;
color: #000000;
border:5px solid #4E93A2;
-moz-border-radius:8px;
-webkit-border-radius:8px;
background-color:#FFFFFF;
z-index: 1000;
}
#popupContent {
display:none;
font-family:Arial, Helvetica, sans-serif;
color: #4E93A2;
margin-top:30px;
margin-left:30px;
margin-right:30px;
}
.deleteMeetingButton {
clear:both;
cursor:pointer;
width:90px;
height:30px;
border-radius: 4px;
background-color: #5CD2D2;
border:none;
text-align:center;
line-height:10px;
color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
.deleteMeetingCancel {
clear:both;
cursor:pointer;
width:90px;
height:30px;
border-radius: 4px;
background-color: #5CD2D2;
border:none;
text-align:center;
line-height:10px;
color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
content:"XXXX";
}
#deleteMeetingConfirmDeleted {
display:none;
}
/* added code below */
.deleteMeetingClose {
font-size: 1.5em;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="content">Content Obscured By Overlay
<button class="deleteMeeting">Delete</button>
</div>
<div id="overlay"></div>
<div id="popupBox">
<div id="popupContent">
<i>Are you sure you want to delete this meeting?</i>
<br />
<span style="text-align:center;color:black;font-size:40px;">YO</span>
<br />
<button class="deleteMeetingButton">Delete</button>
<button class="deleteMeetingCancel">Cancel</button>
</div>
<div id="deleteMeetingConfirmDeleted">Meeting Deleted</div>
<span class="deleteMeetingClose">×</span> <!-- <= added this line -->
</div>
First, put in image element in your popup div
<img id="ClosePopup" src="insert-image-url-here"/>
Then, style it with position:absolute. Also, make sure the popup div has position:relative
#ClosePopup{
position: absolute;
right:0px;
}
Finally, attach your click handler
$('#ClosePopup').click(function(){
$('#overlay,#popupBox,#popupContent').fadeOut('slow');
});
See it working in this fiddle
If you want a pure css solution without images, see
Pure css close button
Simply create a span element containing × char for the x, put some style and bind the click event to the popup close action:
HTML
<span class="cancel-icon" >×</span>
CSS:
.cancel-icon{
float:right;
cursor:pointer;
}
JS
$('.cancel-icon').click(function () {
//Close the popup
});
Using your Fiddle: http://jsfiddle.net/sGeVT/118/

What technique do I use to get text into each individual tab?

I have been stuck on this for ages, here is my code so far:
<html>
<head>
<script src="http://mihaifrentiu.com/wp-content/themes/mf/js/jquery_1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
body, html, div, ul, li, a {
margin:0;
padding:0;
}
body {
font-family:arial;
font-size:12px;
color:#000000;
}
.clear {
clear:both;
}
ul {
list-style:none;
position:relative;
z-index:2;
top:1px;
display:table;
border-left:5px solid #808080;
}
ul li {
float:left;
}
ul li a {
background:#000000;
color:#000000;
display:block;
padding:6px 15px;
text-decoration:none;
border-right:100px solid #000000;
border-top:1px solid #000000;
border-right:3px solid #808080;
}
ul li a.selected {
border-bottom:1px solid #808080;
color:#000000;
background:#808080;
}
h1 {
display:block;
width:600px;
margin:0 auto;
padding:200px 0;
color:#000000;
}
#navigation {
width:602px;
margin: 0 auto;
}
#content {
width:600px;
margin:0 auto;
height:200px;
background:#ffffff;
border:1px solid #000000;
z-index:1;
text-align:center;
padding:10px 0;
}
#logo {
width:600px;
margin:0 auto;
padding:10px 0;
text-align:right;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><font color="white">Tab 1</li>
<li><font color="white">Tab 2</li>
<li><font color="white">Tab 3</li>
<li><font color="white">Tab 4</li>
<li><font color="white">Tab 5</li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
<p id="content_changer">You have selected Tab 1</p>
<p>See the page source for full code</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#navigation ul a').click(function() {
$('#navigation ul a').removeClass('selected');
$(this).addClass('selected');
$('#content_changer').html('You have selected ' + $(this).html());
});
});
</script>
</body>
</html>
I can not figure out how to get one of these tabs menu thing to work, I have tried so many different methods but nothing will work.
It's not very good code, but it works for me. The only problem is that the #content text is set to font color white, so you can't see it, though it is there.
You should avoid font tags, as they are badly out of date, as well as inline JS.
I tried running your code. I found that the text is written #content_changer element, but its white colored.
Here's how you can solve it.
Add the following css rule
#content_changer{
color:#000;
}
Change the $(this).html() to $(this).text().
That much should do.
The problem is not in your JS, but in your CSS. Font color is white on the links in the navigation, which means it will be invisible on the content area. Also, using is deprecated and you need to set content-area color to black.
Here is a working jsFiddle:
http://jsfiddle.net/8ftyy/
Differences are these:
#content_changer {
color: black;
}
ul li a {
color: white;
}
and no font-color in html.

How to hide the div on any click outside

I am starting up on jquery and was tryin to create a simple div hide and show effect. The effects seem to work fine but i need that when user clicks on any other part of the document(i. except the hide/show box), the box should hide back. This is the jsfiddle :
http://jsfiddle.net/39DzJ/. I have not styled it properly. I wanted the effects to work first.
Can anyone help me out ?
Here's the HTML code :
<style>
#mail_floater
{
background:#fce8bd;
height:88px;
width:342px;
border:1px solid #b7ad02;
border-radius:5px;
position:absolute;
left:200px;
top:50px;
border-top:none;
z-index:100;
padding:0;
}
#subscribe_user
{
width:248px;
height:16px;
border:1px solid #b7ad02;
}
#cust_care_floater
{
background:#fce8bd;
height:12px;
width:108px;
border:1px solid #b7ad02;
border-radius:2px;
border-bottom-left-radius:2px;
position:absolute;
left:450px;
top:30px;
border-top:none;
z-index:100;
clear:both;
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
font-weight:bold;
color:#036f05;
box-shadow:1px 1px 3px #ccc inset;
}
#closer
{
float:right;
margin-right:5px;
margin-top:2px;
width:19px;
height:19px;
background:url(../images/close.png) no-repeat;
}
</style>
</head>
<body>
Subscribe
Customer care
<div id="mail_floater">
<h5>Email</h5>
<div id="closer"></div>
<div id="email_input"><form><label>Enter E-mail : </label><span><input type="text" id="subscribe_user" /></span>
<input type="submit" id="subscribe_me" value="Done" /></form></div>
</div>
<div id="cust_care_floater">
<span style="padding:0px 10px 0 10px;">033-993-99920</span>
</div>
</body>​
The javascript code :
$(document).ready (
function()
{
var disp_box=$('#mail_floater');
var sub_link=$('#subscribe');
var disp_box_2=$('#cust_care_floater');
var sub_link_2=$('#customer_care');
disp_box.hide();
disp_box_2.hide();
sub_link.click
(
function()
{
disp_box.show();
});
disp_box.find('#closer').click
(
function()
{
disp_box.hide();
});
sub_link_2.click
(
function()
{
disp_box_2.show();
});
});​
$(document).on('click', ':not(.hideDiv)', function(e){
if($(e.target).is(':not(.hideDiv)')) { //extra check for good measure
$('.hideDiv').hide();
}
});​
Demo: http://jsfiddle.net/maniator/S9fDy/

When I refresh the page, the popup window is visible for a second.

Script
$(document).ready(function(){
$(".aboutBtn").click(function () {
$(".aboutContent").slideToggle("slow");
});
$(".contact").click(function () {
$(".aboutContent").slideToggle("slow");
});
});
Html
<article class="aboutBtn">ABOUT</article>
Css
.aboutBtn{
width:85px;
padding:5px 0px 5px 10px;
background-color:#d8531e;
cursor:pointer;
color:#ffffff;
font-size:20px;
text-transform:uppercase;
position:relative;top:-48px;
font-family:"Segoe UI Light";
}
Hide the popup with your stylesheet.
CSS:
.aboutContent{
display: none;
}

Categories