I have the following code which currently runs when #a-div has focus
jQuery(document).ready(function(){
jQuery('#a-div').focus(function(){
if ( $( "#tab3" ).is( ".tab-pane.active" ) ) {
$( "#another-div" ).hide();
}
});
});
But instead id like it to run when #tab3 has the following class .tab-pane.active
jQuery(document).ready(function(){
jQuery('#tab3').is( ".tab-pane.active" )(function(){
$( "#another-div" ).hide();
});
});
But I haven't got the correct syntax.
Any help would be very much appreciated, many thanks in advance!
To get your code working on document ready:
jQuery(document).ready(function(){
if(jQuery('#tab3').is( ".tab-pane.active" )){
$( "#another-div" ).hide();
}
});
This snippet is using only jQuery and no external libraries. But it serves to show you how to do this.
Just add a click event handler on the class tab-pane and check if the clicked element has the class active.
The other code in this snippet just mimics the tab's switching classes. Every time a class has been clicked, it'll toggle the div with class output
I hope this is what you are searching for.
$(".tab-pane").click(function() {
//Ignore this code, since it's mimicking the change of tabs
changeTab($(this));
var tab = parseInt($(this).data("tab"));
switch(tab)
{
case 1:
$(".output").css("border", "2px dashed red");
break;
case 2:
$(".output").css("border", "2px dotted blue");
break;
default:
case 3:
$(".output").css("border", "2px solid black");
break;
}
$("#tabnr").html(tab);
});
function changeTab(pEl)
{
$(".tab-pane").each(function() {
$(this).removeClass("active");
});
pEl.addClass("active");
}
.tab-pane {
height: 100px;
width: 200px;
border: 2px solid black;
background-color: lightblue;
float: left;
margin-left: 15px;
}
.first {
border: 2px dashed red;
}
.second {
border: 2px dotted blue;
}
.active {
background-color: beige;
}
.clearfix {
clear: both;
}
.output {
width: 100%;
height: 50%;
background-color: lightgreen;
margin-top: 30px;
border: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane first" data-tab="1">
Tab 1
</div>
<div class="tab-pane second" data-tab="2">
Tab 2
</div>
<div class="tab-pane active" data-tab="3">
Tab 3
</div>
<div class="clearfix"></div>
<div class="output">
This output is altered by clicking on the tabs above. You are on tab <span id="tabnr">3</span>
</div>
Related
I have two divs, one has class name ".tab" and the other has the id name "#director". I want to execute a function when "#director" element has the text "left". I want to change the background of .tab div to green when it is clicked but if only the #director element has the text "left" in it. so the function i made keeps not executing. Here is my code:-
var leftText = "left";
var directorText = $('director').text();
$(".tab").click(function(){
if (leftText == directorText) {
/*Your Stuff Here*/
$( ".tab" ).css( "background", "green" );
}
});
div{
height: 100px;
width:100px;
margin: 50px;
float: left;
background:#ddd;
border: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab"></div>
<span id="director">left</span>
The jQuery selector for ids would be var directorText = $('#director').text();
Three elements need to be activated when hovered. These elements are also used in different divs and share the same elements and classes. I am using JavaScript to achieve this.
The problem is when hovering over div 1, it also activates div 2 and 3. Probably because they share the same elements.
How can I activate them individually when hovering?
$(function() {
$(".link")
.hover(
function() {
$(".link").css('color', 'red', 'text-decoration', 'none');
$(".box").css('border-bottom', '4px solid #183c94');
$("span").css('opacity', '1');
},
function() {
$("link").css('color', '#000000');
$(".box").css('border-bottom', '4px solid #cfcfcf');
$("span").css('opacity', '0');
});
});
.box {
width: 300px;
height: 30px;
background: #f1f1f1;
text-align: center;
}
span {
height: 10px widtth: 10px;
background: #c3c3c3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<h4><a class="link" href="#">hover</a><span>+</span></h4>
</div>
<div class="box">
<h4><a class="link" href="#">hover</a><span>+</span></h4>
</div>
<div class="box">
<h4><a class="link" href="#">hover</a><span>+</span></h4>
</div>
View on JSFiddle.
You need to use this to "find" the elements:
$(function () {
$(".link")
.hover(
function () {
$(this).css('color', 'red', 'text-decoration', 'none');
$(this).closest(".box").css('border-bottom', '4px solid #183c94');
$(this).next("span").css('opacity', '1');
},
function () {
$(this).css('color', '#000000');
$(this).closest(".box").css('border-bottom', '4px solid #cfcfcf');
$(this).next("span").css('opacity', '0');
});
});
DEMO
Also in CSS:
span {
height: 10px widtth: 10px;
background: #c3c3c3;
}
Should be:
span {
height:10px; width:10px;
background: #c3c3c3;
}
Use the jQuery $(this) key word
$(function () {
$(".link").hover(function () {
$(this).css('color', 'red', 'text-decoration', 'none');
$(".box").css('border-bottom', '4px solid #183c94');
$("span").css('opacity', '1');
},
function () {
$(this).css('color', '#000000');
$(".box").css('border-bottom', '4px solid #cfcfcf');
$("span").css('opacity', '0');
});
});
I updated your fiddle I didnt know how you handle box or span elements on hover.
jQuery:
$(document).ready(function () {
$('.ccm-multilingual-active-language').show();
$('.dropdown_language:not(:first)').hide();
$('.single_language a:not(:first)').css('border-top', '0');
$('.dropdown_language').toggle(
function () {
$('.single_language:not(:first)').hide();
},
function () {
$('.single_language:not(:first)').show();
});
});
HTML:
<div class = 'language selection'>
<div class = 'ccm-multilingual-switch-language'>
<div class="single_language">
English
<div class="dropdown_language"></div>
</div>
<div class="single_language">
Deutsch
<div class="dropdown_language" style="display: none;"></div>
</div>
</div>
</div>
CSS:
.language_selection {
font-size: 13px;
float: right;
margin-top: 10px;
height: 15px;
width: auto;
}
.language_selection a {
border: 1px solid black;
float: left;
position: relative;
width: 100px;
text-align: center;
}
.single_language {
width: auto;
}
.dropdown_language {
height: 13px;
width: 15px;
border: 1px solid black;
border-left: 0px !important;
float: left;
position: relative;
display: inline;
}
For fiddle click here
I want to make a custom dropdown menu so that's why I'm making it with divs. If you get on the site(deutsch language for example), you should see deutsch in the 'dropmenu',
but it doesn't happen because I can't hide/show it. For so far it works on the english one, because the first div won't hide( see my jquery for this ), the problem begins when I use the same script in boths headers.
Any help would be preciated! Thank you.
I know this is not the best way to do, but I'm moving in a dropmenu this way:
HTML:
<nav class="language">
<a id="languageSelected" href="javascript:void(0)"></a>
<ul id="Listlanguage"></ul>
</nav>
JS:
switch(window.location.href.split('/')[4].substr(0,2)){
case 'pt':
$('#Listlanguage').append(
'<li><a rel="en-us" href="/'+Site+'/en-us">en - us</a><li>'+
'<li><a rel="'+LinkEsp.replace(/\s+/g, '')+'" href="/'+Site+'/'+LinkEsp.replace(/\s+/g, '')+'">'+LinkEsp+'</a><li>'
);
break;
case 'en':
$('#Listlanguage').append(
'<li><a rel="pt-br" href="/'+Site+'/pt-br">pt - br</a><li>'+
'<li><a rel="'+LinkEsp.replace(/\s+/g, '')+'" href="/'+Site+'/'+LinkEsp.replace(/\s+/g, '')+'">'+LinkEsp+'</a><li>'
);
break;
case 'es':
$('#Listlanguage').append(
'<li><a rel="pt-br" href="/'+Site+'/pt-br">pt - br</a><li>'+
'<li><a rel="en-us" href="/'+Site+'/en-us">en - us</a><li>'
);
break;
default:
$('#Listlanguage').append(
'<li><a rel="pt-br" href="/'+Site+'/pt-br">pt - br</a><li>'+
'<li><a rel="en-us" href="/'+Site+'/en-us">en - us</a><li>'+
'<li><a rel="'+LinkEsp.replace(/\s+/g, '')+'" href="/'+Site+'/'+LinkEsp.replace(/\s+/g, '')+'">'+LinkEsp+'</a><li>'
);
break;
}
PS: I know, it's not pretty to see.
I set up a button to change the color. It is showing classA but it will not change to classB onclick. The button seems to be working so I am not sure what is not working here. I would appreciate any help. Here is the code.
'<script>
function toggleclass() {
var myElement = document.getElementById("id1");
if(myElement.className == "classA") {
myElement.className = "classB";
} else {
myElement.className="classA";
}
}
window.onload=function() {
document.getElementById("btn1").onclick =toggleClass;
}
</script>'
HTML
'<td><div id="id1" class="classA"><img src="images/this.png" width="300" height="300"
alt="ttemp"></div>
<input type="button" id="btn1" value="ChangeColor" />
</td>'
CSS
'.classA {
width: 300px;
border: 2px solid black;
background-color: green;
color: red;
padding: 3px;
}
.classB {
width: 300px;
border: 2px solid black;
background-color: blue;
color: red;
padding: 3px;
}'
Thanks for your help,
Frank
Bro, do you even jQuery? http://api.jquery.com/click/
$('#btn1').click(function(){
$('#id1').toggleClass('classB');
});
Personally I would do the following:
$('#btn1').on("click", function(e){
e.preventDefault();
$('#id1').toggleClass("classB");
});
The prevent code should stop the page from jumping but still preform the action whilst toggling the class
Just my 2 cents
I have a code that I am working on so that it has a heading tag and an arrow floated to the right and when you click on that arrow it shows the contents of the hidden element and changes the down arrow to an up arrow. Everything seems to work fine except the links I have under the image within the toggle do not work. I cannot highlight the text for some reason so I am assuming that there is an overlap somewhere in my coding.
The JavaScript
function toggleDisplayNewark() {
document.getElementById("toggleMe").style.display == "none";
if(document.getElementById("toggleMe").style.display == "none" ) {
document.getElementById("toggleMe").style.display = "inline";
document.getElementById("toggleMe").style.visibility = "visible";
document.getElementById("arrow").style.background = "url(img/up.png) no-repeat";
} else {
document.getElementById("toggleMe").style.display = "none";
document.getElementById("arrow").style.background = "url(img/down.png) no-repeat";
}
}
The HTML
<div id='newark'>
<div class='text-heading'>
<h2>Newark</h2>
<a href="#newark" onclick="toggleDisplayNewark();">
<div id='arrow'></div>
</a>
</div>
<div id='toggleMe' style='display: none;'>
<div class='alignleft thumb-imgs'>
<img src='img/excercise.png' />
<a href='http://exercise.com/' target='_blank'>Exercise Institute</a>
</div>
<div class='clear'></div>
</div>
</div>
The CSS
#arrow {background: url(http://emf-websolutions.com/wp-content/uploads/2013/03/down.png) no-repeat; height: 27px; width: 29px; float: right; margin: -30px 10px 0 0;}
#toggleMe {display: none;}
.text-heading {-webkit-border-radius: 5px; border-radius: 5px; margin: 10px 0; width: 640px; padding: 5px 0px; background: #333; border: 1px solid red;}
.clear {clear: both;}
.thumb-imgs {width: 204px; height: 210px; padding: 5px 5px 40px 5px;}
I built this in a html file before I put it into wordpress so I could make sure that it works properly. I just can't seem to find where the problem lies. I have striped down the coding so that it would not take up so much space. The idea of this is to have a heading with an arrow in the right side to drop down this box with 3 images with a link under each one for each line.
Thanks for your help in advance.
http://jsfiddle.net/QXSXC/
remove the onclick
<a href="#newark" >
and use jQuery:
$('#newark').click(function() {
document.getElementById("toggleMe10").style.display == "none";
if(document.getElementById("toggleMe10").style.display == "none" ) {
document.getElementById("toggleMe10").style.display = "inline";
document.getElementById("toggleMe10").style.visibility = "visible";
document.getElementById("arrow10").style.background = "url(img/up.png) no-repeat";
} else {
document.getElementById("toggleMe10").style.display = "none";
document.getElementById("arrow10").style.background = "url(img/down.png) no-repeat";
}
});
You can assign a handler to #newarkwith pure JS google it if you can't use jQuery