How can I hide an element below hide_below_element selector using Javascript.
<div class"hide_below_element">asdfasdfasd</div>
<div><a> the element for hiding form hide_below_element selector</a> </div>
<div><a>Another information no need to hide </a> </div>
Thanks for your supported us.
I'm not quite sure what you want to accomplish, but what about this :
$('.hide_below_element').next().hide();
Related
I am new to AngularJS and I would like to learn the best way to do this.
Here's my issue:
I have an anchor, that - after clicking on it - should toggle between classes "show-all" and "hide-all", and also update the css of a div.
Here's what i have so far:
<a class="{{state}}" href="#" ng-click="ToggleDisplay()"><p>{{stateTitle}}</p></a>
<div>CSS should be updated here</div>
And a bonus question: is there and easy way to transition the CSS change on the div (which is from height:200px to height:auto)?
to do a show all, hide all methods you can use the ng-show or the ng-hide methods, binding a keyword in it, you can make a method to use with the anchor to solve you're problem like that way
HTML
<a ng-click="showAll()">show all</a>
<p ng-show="hide">things to hide</p>
<p ng-show="hide">other things to hide</p>
JS
$scope.showAll=function(){
if($scope.hide==false){
$scope.hide=true;
}else{
$scope.hide=false
}
}
Another great way is the ng-class method where you can put a style code and make it a variable to change in your js file.
EDIT
a sample for ng-class:
<div ng-class="heightsample">i'm a div 100px's height</div>
<button ng-click="height-change()">change</button>
JS
$scope.heightsample={height:'100px'}
$scope.height-change=function(){
$scope.heightsample={height:'50px'}
}
I'm tinkering a bit with jquery to show a hidden div when a link is clicked. This should be fairly simple, but there's a flaw to it in this case. I have the following markup:
<div class="first-row">
<div class="week">
<p>Uge 2</p>
<p>(08-01-11)</p>
</div>
<div class="destination">
<p>Les Menuires</p>
<p>(Frankrig)</p>
</div>
<div class="days">4</div>
<div class="transport">Bil</div>
<div class="lift-card">3 dage</div>
<div class="accommodation">
<p><a class="show-info" href="#">Hotel Christelles (halvpension)</a></p>
<p>4-pers. værelse m. bad/toilet</p>
</div>
<div class="order">
<p>2149,-</p>
<p class="old-price">2249,-</p>
</div>
<div class="hotel-info">
<!-- The div I want to display on click -->
</div>
</div>
When I click the "show-info" link I want the "hotel-info" div to display.
My backend devs don't want me to use ids (don't ask me why..) and the above markup is used over and over again to display data. Therefore I need to be able to access the "hotel-info" div in the "first-row" div where the link is clicked.
I've tried to do something like:
$(document).ready(function() {
$('.show-info').click(function() {
var parentElement = $(this).parent().parent();
var lastElementOfParent = parentElement.find(".show-hotel");
lastElementOfParent.show();
});
});
But without a result :-/ Is this possible at all?
Any help is greatly appreciated!
Thanks a lot in advance!
Try this:
$('.show-info').click(function() {
$(this).closest('.accommodation').siblings('.hotel-info').show();
});
Even better imo, as it would be independent from where the link is in a row, if every "row div" has the same class (I assume only the first one has class first-row), you can do:
$(this).closest('.row-class').find('.hotel-info').show();
Reference: .closest, .siblings
Explanation why your code does not work:
$(this).parent().parent();
gives you the div with class .accommodation and this one has no descendant with class .hotel-info.
It is not a good idea to use this kind of traversal for more than one level anyway. If the structure is changed a bit, your code will break. Always try to use methods that won't break on structure changes.
You're right in not using an ID element to find the DIV you want :)
Use closest and nextAll
Live demo here : http://jsfiddle.net/jomanlk/xTWzn/
$('.show-info').click(function(){
$(this).closest('.accommodation').nextAll('.hotel-info').toggle();
});
Here is my HTML:
<td>
<a class="button" href="#">
<input id="download">...</input>
</a>
<a class="button" href="#">
<input id="downloadcsv">...</input>
</a>
</td>
Using CSS I want to hide the <a> which contains an input with the ID = downloadcsv
Is there a parent option in CSS?
Edit: As current aswers indicate you cant hide a parent element based on the class of one of its childeren.
Is it possible to do this simply in Javascript, rather than using a framework like jQuery?
Assuming the <a> is the direct parent of the downloadcsv-input, you can just use
document.getElementById("downloadcsv").parentNode.style.display = "none"
This is not possible with CSS (2). However, it is possible with jQuery.
To expand on Fran's answer, the jQuery solution would be this:
$("a:has(#downloadcsv)").hide();
Otherwise, you'll need to put a class on the parent <a> indicating that it is the parent of #downloadscv.
How can I refer to a nested div by id when it has the same id as a div nested in a similarly named div
eg
<div id="obj1">
<div id="Meta">
<meta></meta>
</div>
</div>
<div id="obj2">
<div id="Meta">
<meta></meta>
</div>
</div>
I want to get the innerHTML of meta
document.getElementById('obj1').getElementById('Meta').getElementsByTagName('meta')
doesn't work
IDs should only be used when there is one of that item on the page, be it a SPAN, DIV or whatever. CLASS is what you should use for when you may have a repeating element.
Code there doesn't work because you're referring to an element by unique ID, but have more than one on the page.
Id is supposed to be unique.
Hate to point out the obvious, but in your example, obj1_Meta and obj2_Meta are unique id's, so if it's the case in your working code:
document.getElementById('obj1_Meta').getElementsByTagName('meta')[0].innerHTML;
would work as described. As a double check, did you over think this?
If not, bummer...
As "bad" or "wrong" as your code is, an option that will work is to use a JavaScript framework like jQuery. Once you've included it, you can get elements by passing it a CSS selector (even a semantically incorrect one) like so:
$('#obj1 #obj1_Meta meta').html()
$() is jQuery's way of saying document.getElementById() ...on steroids.
.html() is its equivalent of .innerHTML
Other frameworks, like PrototypeJS and MooTools also provide similar functionality.
Prototype for example:
$$('#obj1 #obj1_Meta meta').innerHTML;//note the double $'s
Frameworks save lots of time and trouble with regard to browser compatibility, "missing" JavaScript methods (like getElementsByClassName) and coding AJAX quickly. These things make them a good idea to use to anyway.
IDs are meant to be unique, use classes intelligently.
<div id="obj1" class="obj">
<div id="obj1_Meta" class="obj_Meta">
<meta></meta>
</div>
</div>
<div id="obj2" class="obj">
<div id="obj2_Meta" class="obj_Meta">
<meta></meta>
</div>
</div>
.obj = targets both elements
#obj1.obj = targets only the first
#obj1.obj_Meta = targets obj1 inner DIV
#obj2.obj = targets only the second
#obj2.obj_Meta = targets obj2 inner DIV
You may also run into problems with this markup because the "meta" tag is only legal inside the head tag, not the body tag. As far as I can tell from looking at Firebug, Firefox will even go so far as to pull those meta tags out of the body and toss them into the head (and, in this case, put any text content inside the parent div), so you won't see them in the DOM at all.
For the HTML you've given, this should work:
document.getElementById('obj1').getElementsByTagName('div')[0].getElementsByTagName('meta');
Just ignore the bogus id on the inner div and get it by tag name. You should also be able to ignore the inner div completely, since getElementsByTagName searches the entire subtree:
document.getElementById('obj1').getElementsByTagName('meta');
As the id attribute is a unique document-wide identifier, you should probably namespace your ids.
<div id="obj1">
<div id="obj1_Meta">
<meta></meta>
</div>
</div>
<div id="obj2">
<div id="obj2_Meta">
<meta></meta>
</div>
</div>
document.getElementById('obj1_Meta').getElementsByTagName('meta')
I have 3 divs with 2 possible image tags for each (active or inactive). If one div is clicked to be active the other divs must be set to inactive. How do I accomplish this with img tags and what happens if user has javascript disable?
Do you mean something like this?
<div class="block" id="block1">
<img src='inactive_block1.jpg'>
</div>
<div class="block" id="block2">
<img src='inactive_block2.jpg'>
</div>
<div class="block" id="block3">
<img src='inactive_block3.jpg'>
</div>
Using a library like jQuery, the javascript would look like:
$(function() {
$('.block').click(function() {
$('#block1').find('img').attr('src', 'inactive_block1.jpg');
$('#block2').find('img').attr('src', 'inactive_block2.jpg');
$('#block3').find('img').attr('src', 'inactive_block3.jpg');
$(this).find('img').attr('src', 'active_' + $(this).attr('id') + '.jpg');
});
});
With the above, if you have inactive_block1.jpg, inactive_block2.jpg, inactive_block3.jpg and active_block1.jpg, active_block2.jpg and active_block3.jpg you should get what you want.
It's up to you whether its worth it or not to have javascript disabled fallbacks, mostly depending on whether you expect a large amount of your audience to have javascript disabled.
if a user has JavaScript disabled, there is nothing you can do that is JavaScript-based to deal with dynamically modifying the page. The only other option you have is to create a "deprecated" version of your functionality that requires a page request after each click.
I would recommend researching how to dynamically add/remove classes from elements in the DOM, that is how I would approach this problem. You could easily do a jQuery select for all elements who are "active" on click and set a "disabled" class on them, that way you are essentially blacking out everything except the element you've clicked.
Does that make sense?