I want to change a tag's style using class onclick (basically I want to change the class).
This is my HTML code:
<div class="menutext">Feedback</div>
I don't know what's wrong, why it's not working!
Also I would like to make this code using JQUERY, if not possible with javascript.
calling click event is better that inline javascript... readable and easy to debug...
try this
html
<div class="menutext">Feedback</div>
jquery
$('.menutext a').click(function(e){
e.preventDefault(); //to prevent the default behaviour of <a>
$(this).parent().removeClass('menutext').addClass('menutext2');
//parent() because i think you want to change the class of the div ...
});
You didn't write a jquery selector in your onclick-event.
<div class="menutext">
Feedback
</div>
This works:
<div class="menutext">Feedback</div>
As what I have understand on your question, this is what you want.
jquery
$('.childDiv').click(function(){
$(this).parent().find('.childDiv').css('background-color','#ffffff');
$(this).css('background-color','#ff0000');
});
html
Group 1
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
<div id="divParent2" class="parentDiv">
Group 2
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
CSS
.parentDiv{
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
.childDiv{
border:1px solid blue;
height: 50px;
margin:10px;
}
Try this using jQuery and remove the onclick attribute in link also:
$('div.menutext > a').click(function(){
$(this).parent().removeClass('menutext').addClass('menutext2');
});
Related
I have a big problem and I cant find the solution...
I must do the tooltip, for example we have this structure:
<body>
**<div class="tooltip">Long text ...</div>**
<div style="overflow:hidden">
<div class="box">
**<h1>Short text</h1>**
</div>
</div>
</body>
And if I am on h1 I want add to div with class tooltip visibility:visible, how can I do this?
I hope you find the solution to this problem.
You can use jquery .hover() for as h1 and .prepend() for adding div with class .tooltip and visibility: visible something like below
$('h1').hover(function() {
var tooltip = document.getElementsByClassName('tooltip');
if(!tooltip[0]) {
$('body')
.prepend('<div class="tooltip" style="visibility:visible;">Long text ...</div>');
}
});
.tooltip {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
****
<div style="overflow:hidden">
<div class="box">
**<h1>Short text</h1>**
</div>
</div>
</body>
Hope this will help you in some way(y).
Since your tooltip isn't a parent of the h1 you've to go up two levels then get the previous element with the class tooltip :
$('h1').parent().parent().prev('.tooltip').css({'visibility':'visible'});
You could use hover() method to toggle the visibility :
$('h1').hover(function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'visible'});
},function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'hidden'});
})
Hope this helps.
$('h1').hover(function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'visible'});
},function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'hidden'});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tooltip" style="visibility:hidden">Long text ...</div>
<div style="overflow:hidden">
<div class="box">
<h1>Short text</h1>
</div>
</div>
When you hover to H1 and you want to add tooltip to the grand parent this will be the answer.
$('.box h1').mouseenter(function() {
$(this.parentNode.parentNode.previousElementSibling).addClass('tooltip');
});
//2nd option
$('.box h1').mouseenter(function() {
$(this.parentNode.parentNode.previousElementSibling).css('visibility', 'visible');
});
Read this to know what target you want to use the event/script W3schools.com
I'm simply trying to toggle() <div class="reveal"> when the button is pushed.
I'll have multiple buttons and corresponding <div>'s on the page, so I just want to toggle() the next instance on the page using $(this).next("div.reveal").toggle();
Nothing happens and there are no errors. What did I do wrong?
HTML:
<article class="customerQuotes">
<blockquote>Blah
<cite><b>Name</b> - Company</cite>
</blockquote>
<button class="button right">More</button>
</article>
<div class="reveal">
<div class="right">
//stuff here
</div>
</div>
JS:
$(".button").click(function() {
$(this).next("div.reveal").toggle();
});
CSS:
.reveal{
display: none;
float: left;
clear: both;
}
You need to call .next on the parent element, since .reveal is its sibling.
$(".button").click(function() {
$(this).parent().next("div.reveal").toggle();
});
Thats because $(this).next("div.reveal") is undefined. There is no div.reveal next to a button element.
You would need to restructure your html like this:
<article class="customerQuotes">
<blockquote>Blah
<cite><b>Name</b> - Company</cite>
</blockquote>
<button class="button right">More</button>
<!-- Note here that div.reveal is sibling to a button so
.next() will find this element -->
<div class="reveal">
<div class="right">
//stuff here
</div>
</div>
</article>
or change your selector for JQuery to grab next reveal from the parent element like this:
$(".button").click(function() {
$(this).parent().next("div.reveal").toggle();
});
Like others said you forgot to use the next() method on the parent().
However, any time you change the structure of your HTML this code will break! Better reference the elements to be revealed explicitly. One simple way is to save the target as data on the button:
<button data-target="#reveal1" class="button right">More</button>
...
<div id="reveal1"></div>
Your JS would then look like this:
$(".button").click(function() {
$( $(this).data("target") ).toggle();
});
This will work regardless of where you place your button and div.
I'm trying to get a class added on when a div is inside a certain parent div.
<div class="parent1">
<div class="child">
Content
</div>
</div>
.parent1 only exists on one page, while .child exists on others as well as this one.
So when .child is everywhere else, its color is red, but when it's inside .parent1 I want its color to be blue.
Here's what I'm using.
if ($('.child').parents('.parent1').length == 1) {
.addClass('.new-class');
}
I'm having no success with this. Can anyone help?
$(".parent1 .child").addClass("new-class");
Or
$(".parent1>.child").addClass("new-class");
If you want to make sure only first child will be populated with class:
<div class="parent1">
<div class="child"> <!-- will have also "new-class" class -->
<div class="child"> <!-- will NOT have "new-class" class -->
</div>
</div>
</div>
.addClass('.new-class'); adds that class to something. You forgot to tell jQuery what something is, and caused a syntax error instead (which your browser console would have told you about if you had it open). I believe you want this:
$('.parent1 .child').addClass('.new-class');
Well, since you did tag this as just javascript...
HTML
<div class="parent1" id="parent">
<div class="child" id="child">
Content
</div>
</div>
CSS
.has-parent {
color: blue;
}
Javascript
var child = document.getElementById('child');
var parent = document.getElementById('parent');
if (child.parentNode == parent) {
child.className += ' has-parent';
}
DEMO
You could also do this with just CSS:
.child
{
color: red;
}
.parent .child
{
color: blue;
}
So long as the .parent .child rule comes after the single .child rule, it will override the color with blue. No extra work to change the color. If you need this extra class for some other reason the The User 518469 's answer is probably best.
Im having problems with this code to work.. http://jsfiddle.net/whitewiz/z4fpx/
HTML
<h1 id="flip">Title<h1>
<div id="panel">
<p>Description that slides down</p>
</div>
<h1 id="flip">Title<h1>
<div id="panel">
<p>description that DOESN'T slide down</p>
</div>
JavaScript
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
and CSS
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
They work for first description, but doesn't work for the rest. I have about 18 #panels that should slide down, when I press on "Title" but only the first works.. Could you please find the missing piece in javascript that doenst allow multiple toggle?
Example on -> http://jsfiddle.net/whitewiz/z4fpx/
The first one works because that is the first element in the DOM with that id. Generally it is bad practice to have the same id assigned to multiple elements. Instead, use classes, like this:
HTML:
<h1 class="flip">Title<h1>
<div class="panel">
<p>Description that slides down</p>
</div>
<h1 class="flip">Title<h1>
<div class="panel">
<p>description that DOESN'T slide down (but does now)</p>
</div>
CSS:
.panel,.flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
.panel
{
padding:50px;
display:none;
}
I assume you only want to expand the panel following the header that you clicked on, in which case you need to get the closest element with the class name "panel" that follows the "flip" that was clicked on.
$(document).ready(function(){
$(".flip").click(function(){
$(this).next().find(".panel").slideToggle("slow");
});
});
Working example: http://jsfiddle.net/BBQJy/
The initial question seems to be lacking proper closing tags, an error that was duplicated in Nile's answer. Therefore, it didn't work for the original poster.
Based on Anna Brila's updated jsfiddle (http://jsfiddle.net/whitewiz/WuNHz/2), a possible correct solution would be:
$(".flip").click(function(){
$flip = $(this);
$content = $flip.next();
$content.slideToggle();
});
This is predicated on the use of classes instead of ids.
Full working example: http://jsfiddle.net/wy8gq1bj/1
Note: In the example, the only HTML I changed was the removal of the <br> immediately after the third , which was keeping the last item from expanding and collapsing.
the code is like this:
<div id="comments">
<h2>comments list</h2>
<div class="clear-block">....</div>
<div class="clear-block">....</div>
<div class="clear-block">....</div>
<div class="indented">....</div> // this div is indented.
<div class="box"...</div>
</div>
now, i want to use jquery to add a border to the
<h2>......</div>
part.maybe i shoule add a div label first before the h2 label, then the close label
</div>
before
<div class="box"> .
then using a style
border:1px...
but i don't how to do it. thank you.
the border effect like this http://phplist.xxmn.com/1.jpg
$('.clear-block,.indented,.box').css('border', '1px solid black');