I have a select menu that acts as a navigation to different absolutely positioned divs. whichever option is shown, that div fades into view via the added class having opacity equal to 1. I can get the divs to add the class based on the menu, but I can't seem to remove that 'active' class if the option is not selected- my JS is as follows:
$("#hine").change(function() {
var who=$('#hine option:not(:selected)').val();
var whon=$('#hine option:selected').val();
$(who).removeClass('active');
$(whon).addClass('active');
});
I have a jsfiddle setup here: http://jsfiddle.net/nwT9c/4/
Try this:
var whon = $('#hine option:selected').val();
$('.active').removeClass('active').addClass('inactive');
$(whon).removeClass('inactive').addClass('active');
jsFiddle
You are assigning the value of the not selected elements to the who variable.
Change to :
var who=$('#hine option:not(:selected)');
var whon=$('#hine option:selected');
and you should be good
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
I have the following code:
<div class="photos-wrapper" id="detailPhoto">
<div class="pseudo">
fixedTEXT
</div>
<div class="image-wrapper">
</div>
<div class="activites">
</div>
<div class="commentaire">
</div>
</div>
I want to include my own CSS style to this first and main <div class="photos-wrapper" id="detailPhoto"> but the only way to do this is by identify the grandchild selector i.e <a href="#/123456/"> because there are multiple occurrences of the same code.
Maybe it will be a bit more clear when I show what I tried:
a[href*="123456"] > div.pseudo > div.photos-wrapper[id^="detailPhoto"] {
display: none !important;
}
div.photos-wrapper[id^="detailPhoto"] < div.pseudo < a[href*="123456"] {
display: none !important;
}
That's the way I tried to do so but it obviously is not working.
The thing I am probably trying to do here is called a parent selector but I'm not quite sure.
#edit
Let's take a look on this code, it's actually more detailed:
http://jsfiddle.net/60ezqtL7/
The goal is to hide by display: none; style whole divs that are containing exactly the same values i.e. PHOTO 1
There's no need to use jQuery in this case (or many other cases).
detailPhoto.classList.toggle('hide', detailPhoto.querySelector('[href=#/123456]'))
As I mentioned in my comment to your answer, there is not parent or ancestor selecor. The easiest and most efficient way to to it via jQuery is the has() method.
$('#detailPhoto').has('a[href*="123456"]').hide(); // or use .addClass() instead
Use Google to host jquery for you.
Demo : I've used the class selector in the demo as id should be unique.
addClass Demo
UPDATE
Given your update and assuming you want to display 1 and only 1 of each photo, additional wrappers with photos with the same href will be hidden.
/*Loop through each link in div with cass psudo
in a div with class photos-wrapper*/
var found = {};
$(".photos-wrapper .pseudo a").each(function(){
var $this = $(this);
var href = $this.attr("href");
//if the href has been enountered before, hide the .photos-wrapper ancestor
if(found[href]){
$this.closest(".photos-wrapper").hide();
/*Other options:
Use Css direct
$this.closest(".photos-wrapper").css("display", "none");
Assign a duplicate class, then style that class ass appropriate
$this.closest(".photos-wrapper").addClass("duplicate");
*/
}else{
//otherwise add it to the array of what has been found
found[href] = true;
}
});
Demo
If you're not familiar with jquery, make sure to read up on how it is implemented and the purpose of $(document).ready();
Update 2
To hide all containers with replicated href use:
//Loop through each a tag
$(".photos-wrapper .pseudo a").each(function () {
var $this = $(this);
//Get the href
var href = $this.attr("href");
//Check if more than one exists
if ($('.photos-wrapper .pseudo a[href="' + href + '"]').size() > 1) {
//Hide all .photo-wrapper containers that have the replicated href
$('.photos-wrapper .pseudo a[href="' + href + '"]').closest(".photos-wrapper").hide();
}
});
Another Demo
I still suggest removing duplicates server-side if at all possible.
On a complete side note, the <center> tag was depreciated back at HTML4 and should no longer be used. Use CSS instead. There are pleanty of examples out there on how to center content using CSS.
At this time there is not a way to do this with only CSS, but you can do it easily with JQuery. This will search the descendants of #detailPhoto and hide the href (set it to display: none;).
<script>
$(function() {
$('#detailPhoto').find('a[href$="#/123456/"]').hide();
});
</script>
To search parents, you'd use this.
<script>
$(function() {
$('a[href$="#/123456/"]').closest('#detailPhoto').hide();
});
</script>
To use this you will also need the JQuery library added to the head of your document.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
i am trying to control a set of drop-down menus,by changing the first menu then all the others will have the first menu selected item as selected.
In my example,what i want to achieve is : when changing the selected value of the 'select for All' then the rest should be set to that value.
i hope i made it clear.
thanks in advance.
Check the below screenshot:
UPDATED!!!! Try this link DEMO
$("#sortedby").change(function () {
$("select").val($(this).val());
});
UPDATED!!!!
Here's an example of a jQuery implementation (change your selectors accordingly):
$(function() {
$('select.select-all').change(function() {
$('select', $(this).closest('tr')).val(this.value);
});
});
I use Twitter Bootstrap's input-prepend class with <textarea>. When I set <textarea>'s number of rows = 1, all looks fine. But when I set it to any bigger value, element becomes larger than input-prepend span.
This is the demonstration: http://jsfiddle.net/2smRF/
How to set the span's height to <textarea>'s height? Can it be achieved using only CSS or I need to use JavaScript?
I don't think this would be easily achieved only with CSS, so I threw together a script for you. Please note that it will not work if the user resizes the textarea.
var onRes = function(){
$('.input-prepend').each(function(){
var $textarea = $(this).find('textarea');
var $span = $(this).find('span.add-on:eq(0)');
console.log($span);
$span.height($textarea.outerHeight()-(parseInt($span.css('padding-top'))+parseInt($span.css('padding-bottom'))+parseInt($span.css('margin-top'))+parseInt($span.css('margin-bottom'))+(parseInt($span.css('border-width'))*2)));
});
};
$(window).resize(onRes);
onRes();
JSFIDDLE
I have one big div with id="elements" and I load from JSON file new elements objects and I need that for every element create new div inside elements ( elements div should contain lot off smaller divs, for every element one small div ). How to place this small divs inside this big div one behind another ? How to add this small divs a class style ?
In Dojo (since you have the dojo tag):
var div_elements = dojo.byId("elements");
dojo.forEach(json_data.items, function(item) {
dojo.create("div", { "class":"whatever " + item.classNames }, div_elements);
});
Of course, you can put anything as the class for your div. I just provided an example. In the second argument to dojo.create, you pass in a hash containing all the properties you want that div to have.
Create a new DOM element like so:
var childDiv = document.createElement('div');
Then add to the outer div like so:
var insertedElement = div.insertBefore(childDiv, null);
You would then keep creating childDivs as you iterate over your JSON data, and inserting them into the div Node as above.
I think you need something like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
json_data = 'Hey';
$('#elements').append('<div class="in_elements">' + json_data + '</div>');
});
</script>
<div id="elements">
</div>
Test it
There a simple jQuery functions for that:
var box= $("#elements");
// create elements
for (var i=0; i<items.length; i++) {
var t = $("<div class=\"element\" id=\"item_"+i+"\">"+items[i]['text']+"</div>");
box.append(t);
}
That's what you where looking for?
I'll try to explain:
I have numerous div classes, but for the sake of simplicity, let's say I only have 3.
Someone is viewing DIV 1, and I want to give them the option of only printing DIV 1, omitting 2 and 3.
However, on the same page, I would like to give them the option to ONLY PRINT DIV 2. Or only print DIV 3.
I think I get how you can omit certain things from getting printed. But how can you select a section here or there on the same page to be printed with a print link.
Thanks,
Tracy
You can use jQuery to show/hide divs. Read the jQuery tutorial:
http://docs.jquery.com/Tutorials
The code will look this way:
<script>
function showDiv(n) {
$('.divs').hide();
$('#div_'+n).show();
}
$(document).ready(function() { showDiv(1); });
</script>
<a href='javascript:showDiv(n)'>show div n</a>
<div class='divs' id='div_n'>I'm div n</div>
There are many related posts on printing div content, this particular question was still open though it was asked in '10.. Following JavaScript function can be used for printing content of a selected Div tag. Hope this helps. Declaimer: I used some of the existing answers, fixed/enhanced code/error(s) to work with (and tested on) IE-8.
function printDiv(divName) {
var divToPrint = document.getElementById(divName);
var newWin = window.open('', 'PrintWindow', 'width=400, height=400, top=100, left=100', '');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
newWin.document.close();
setTimeout(function () { newWin.close(); }, 10);
}
Call printDiv from anywhere in page or from within selected Div. Here is test link:
Print Customer Data
Print Order Data
Assign respective IDs to Div that is to be printed:
<div id="divCustomerData">Div Contents goes here... </div>
The only catch right now is it loses css styles. I'll update response when i get a chance to fix it. Thanks.
https://github.com/jasonday/jquery.printThis
I would give each div an id, and then using the above plugin (i wrote) specify according to div id.