I don't find any clue to do that from the Semantic UI documentation/API, is there a clean way to do that?
For now, what I see is to play with :
$('.ui.accordion > .title').addClass('active')
$('.ui.accordion > .content').css('display', 'block')
You actually can do this like so:
$('.ui.accordion .individual').each(function(i){
$(this).parent().accordion('open',i);
});
You just iterate through each individual element to get its index position, then ask the parent (the accordion) to open each one. This way you still get the transition.
Here is the answer:
onOpen(commentID: string){
jQuery(`.replies${commentID}`).accordion('open', 0);
}
<div class="ui accordion replies{{commentID}}">
<div class="title" (click)="onClick(commentID);">
</div>
<div class="content">
hello
</div>
</div>
Related
How do I change the value of DIV if it has no ID or class? here's a sample code:
<div id=1>
<div id=2>
<div id=3>
<div id=4>
<div><span>div without id or class</span></div>
</div>
</div>
</div>
</div>
Since you know the div id="4", you can do something like.
document.getElementById('4').firstElementChild.innerHtml = 'stuff you want to change to'
If you don't know, and you're a bit masochistic and don't want to use jquery, you can use a combination of .firstChild .nextSibling to walk your way to the div with the desired set of stuffs.
I'm working inside a templated system where i can implement code, but i can't modified the core of the file. My layer are stacked like this:
<div class="layer1">
<div class="layer2">
<div class=" layer3">
<div class="layer4">
</div>
</div>
</div>
</div>
<div class="layer1">
<div class="layer2">
<div class=" layer3">
<div class="layer4">
</div>
</div>
</div>
</div>
<div class="layer1">
<div class="layer2">
<div class=" layer3">
<div class="layer4">
</div>
</div>
</div>
</div>
As you can see, my class all have the same name (layer1, layer2, etc...). I want to know if there's a way by using Javascript, Jquery or any other online client side library to modify the CSS class name so, for example, the first layer1 become level1 and the following layer1 become level 2?
Thank for your answer!
As other people already said, jQuery actually does what you want.
As long as you don't know the number of “layers” you have, you better find all elements by classname substring:
$('*[class^="layer"]')
Then you can get the list of the element classes and change old names to new ones.
Many different ways to do this:
Solution 1:
Use addClass() and removeClass()
$(".layer1").removeClass('old_class').addClass('new_class');
Replace old_class with your older class and new_class with your new class
Solution 2:
If you are able to get the element by ID
You can set the class by using .attr()
$("#id").attr('class', 'new_class');
an all around solution working with className :
var elem=document.querySelectorAll('[class^="layer"]') ;
for(i in elem){
x = elem[i].className;
var y=x.replace("layer" , "level");
elem[i].className=y||x;
}
I have been trying to do this for a while with CSS and also data attributes but it is driving me up the wall. It's easy to remove data-iconshadow from buttons, but from collapsibles, not so.
In the Developer Console I can see JQM is applying "data-iconshadow='true'" even after I told it not to using this code (in several places):
<div data-role="collapsible-set" data-iconshadow="false">
<div data-role="collapsible" data-theme="f" data-collapsed-icon="baby" class="ui-icon-nodisc" data-iconshadow="false" data-expanded-icon="arrow-u">
<h2 data-iconshadow="false">0-12 Months</h2>
**insert content here**
</div>
</div>
Yet it still generates this code:
<span class="ui-btn-inner"><span class="ui-btn-text">0-12 Months<span class="ui-collapsible-heading-status"> click to collapse contents</span></span><span class="ui-icon ui-icon-shadow ui-icon-arrow-u"> </span></span>
Yeah it is still writing the data-iconshadow to be true. And I'm not even sure how to target injected attributes with CSS so I am not having much luck with that either. If someone could shed some light on the subject, I would be most grateful.
Working example: http://jsfiddle.net/Gajotres/2NCjb/
HTML:
<div data-role="collapsible-set">
<div data-role="collapsible" data-theme="f" data-collapsed-icon="baby" class="ui-icon-nodisc" data-iconshadow="false" data-expanded-icon="arrow-u" id="custom-collapsible">
<h2 data-iconshadow="false">0-12 Months</h2>
**insert content here**
</div>
</div>
CSS:
#custom-collapsible h2 .ui-btn:after {
background: transparent !important;
}
I have a layout like this. I am using passsy extension for angular masonry.
<masonry column-width="200">
<div class="masonry-brick" ng-repeat="data in comments">
<div ng-switch on="data.type">
<div ng-switch-when="hoots">
<article class="hoot_main">
//content goes here
//hoot_main is the main class for this div layout
</article>
</div>
</div>
</div>
<div ng-switch on="data.type">
<div ng-switch-when="article">
<article class="hoot_main">
//content goes here
//hoot_main is the main class for this div layout
</article>
</div>
</div>
<div ng-switch on="data.type">
<div ng-switch-when="story">
<article class="hoot_main">
//content goes here
//hoot_main is the main class for this div layout
</article>
</div>
</div>
</div>
</masonry>
Browser is getting hanged whenever I use it. Debugging script with tools says element.masonry is not a function.
Any help would be appreciated!
Hmm, at the moment I work from my laptop at home and I can't get passy's version running too and can not put my finger on the issue. But this is what I can offer you for now:
I made a very simple directive based on things I've read somewhere:
app.directive('masonry', function() {
return {
restrict: 'AC',
controller: function($scope) {
return $scope.$watch(function(e) {
$scope.masonry.reloadItems();
return $scope.masonry.layout();
});
},
link: function(scope, elem, attrs) {
var container=elem[0];
var options='';
return scope.masonry = new Masonry(container,options);
}
};
As you can see it does not have a any options by now. When i'm at work on monday i will have a look at my sources on a proper dual screen display and provide you with a better version.
My wife is starting to giving me the looks and I need to put the laptop away now. :-\
You can see in this plunker that it kinda works now. Maybe this can help you. In the meantime can you add some of your json data to your question? Have a nice weekend for now!
In order to get Passy's angularjs directive working you must include all the files as listed per the index file
I had this error, fixed it by including the original Masonry code. I was also thinking this was a pure angular port.
I'm writing a Stylish user style sheet, and am trying to see if something is possible. I am customizing a page that has a structure like this:
<div class="main">
<div class="someExtraLayers">
<div class="page">
1
</div>
</div>
<div class="someOtherLayers">
<div class="post">
blah blah
</div>
<div class="post">
foo foo
</div>
<div class="post">
bar bar
</div>
</div>
</div>
Where 'someExtraLayers' and 'someOtherLayers' indicate a few levels of divs inside divs. I'm not fully replicating the page's structure here for brevity's sake.
I have this in my user CSS:
div.post:nth-child(1) {
display:block !important;
}
Essentially, I'm making visible the first post element, and this does most of what I want to do. The thing I want to add is that I only want to make that element visible if the content of the page class is 1. If it's not 1, then I don't want to display the first post element.
CSS doesn't seem to offer conditionals, or boolean ANDs, that work this way. But I'm still new-ish to CSS, so I might be missing something. If I have to use a Greasemonkey script instead, I'll do that, but I was hoping there's some CSS trickery that will let me accomplish this.
Stylish cannot do this because Stylish just injects CSS and CSS does not have a selector for text content.
To do what you want, you will have to install Greasemonkey (Firefox) or Tampermonkey (Chrome) and then a userscript can set that visibility.
Assuming that div contains only 1, then something like this complete GM/TM script will do what you want. It uses the awesome power of jQuery selectors.
You can also see a live demo of the code at jsFiddle. :
// ==UserScript==
// #name _Show the first post on page 1
// #include http://YOUR_SERVER.COM/YOUR_PATH/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// #grant GM_addStyle
// ==/UserScript==
var pageHasOne = $("div.main:has(div.page:contains(1))");
pageHasOne.each ( function () {
var jThis = $(this); //-- this is a special var inside an .each()
var pageDiv = jThis.find ("div.page:contains(1)");
if ($.trim (pageDiv.text() ) == "1") {
//--- Show the first post div. !important is not needed here.
jThis.find ("div.post:first").css ("display", "block");
}
} );
Given the logic that jQuery javascript must use, we can see part of the reason why CSS doesn't attempt to provide selectors for this. It's beyond mission scope for CSS, but the kind of thing that javascript was made for.
Also note that this is for a static page. If the page uses AJAX for its content, the logic becomes a bit more involved.
CSS can not access HTML content.
To solve the problem, you will also need to add a class so CSS can "see" it:
HTML:
<div class="main one">
<div class="someExtraLayers">
<div class="page">
1
</div>
</div>
<div class="someOtherLayers">
<div class="post">
blah blah
</div>
<div class="post">
foo foo
</div>
<div class="post">
bar bar
</div>
</div>
</div>
CSS:
.one .post:nth-child(1) {
display:block !important;
}