Remove data-iconshadow="false" from JQM Collapsible title - css

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;
}

Related

Expand/Collapse all elements of a Semantic UI accordion

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>

Wordpress Text editor does not work

I have a problem with my website. I made it with Wordpress ,
everything was Ok but I think that someone tried to hack it today so all contents cannot be displayed .
To explain more when I write some text in text editor it's not showing on the front page of my website ! I don't understand what's the problem how can I solve it ?
http://www.ahlanfoundation.com/about-us/
<p><span class="hide" style="color: #05ac63;"></span></p><h3 class="title bottom-2">من نحن ؟<span class="hide" style="color: #05ac63;"></span></h3><p></p>
<div class="fl-col fl-node-5820d492ec14e fl-col-small" data-node="5820d492ec14e">
<div class="fl-col-content fl-node-content">
<div class="fl-module fl-module-rich-text fl-node-5820d49fbdfa0 fl-animation fl-slide-right fl-animated" data-node="5820d49fbdfa0" data-animation-delay="0.0">
<div class="fl-module-content fl-node-content">
<div class="fl-rich-text">
<div id="panel-67-0-0-1" class="so-panel widget widget_sow-editor panel-last-child" data-index="1">
<div id="pg-67-1" class="panel-grid">مؤسسة أهلا للتسويق متخصصــة فــي التسويق الالكتروني نشــأت فكــرة تأسيســها لتكــون مؤسســة طموحــة تســعى لتقديــم حلــول مبتكــرة وابــداع لا محــدود فــي التسويق الالكتروني، وتفخــر المؤسسة بجذورهـا وهويتهـا و يدفعهـا الطمـوح لتوسـيع بـؤرة أعمالهــا . تأسســت أهلا للتسويق عــام 2016 لتصبــح إحــدى المؤسسات للتسويق الالكتروني الرائــدة فــي دول الخليج العربي وتضــع بمتنــاول جميــع العمــلاء خدمــات غيــر مســبوقة لكــي تصنــع الفــرق فــي حملاتهــم الترويجيــة والاعلانيــة لمختلــف أنشــطتهم وتوجهاتهــم . كمــا تضــم مؤسســتنا أفضــل العناصــر البشــرية مــن مختلــف الاختصاصــات لنقــدم خدمــات متميــزة تتماشــى مــع أدق متطلبــات عملائنــا المتغيــرة ســواء كانــت تصاميــم خاصــة أو الخطــط الإعلانيـة والاعلاميـة أو التسويق الالكتروني. نحـن نلتـزم بتقديـم أعلـى معاييـر الجـودة مـع إضافـة لمسـة مـن الابـداع الامحـدود.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fl-col fl-node-5820d492ec19c fl-col-small" data-node="5820d492ec19c"></div>
<p><span class="hide" style="color: #05ac63;"></span></p>
when I try to inspect some elements on the browser I found it hidden.
Assuming you dont have a back up because you wouldent be posting this if you did!
Deactivate all your plugins - install wp theme 2017 - delete your theme - re install your theme (from scratch) and activate your plugins one by one whilst checking the functionality of your theme. Your plugins are prob not the issue.
You can also inspect it in the browser if you can see the first line - double click
<p><span class="hide"
and change it to
<p><span class="show"
Then tap enter!

How to locate texts in div.style tags using Watir?

I am fairly new to using Watir for automation. Here's the html source which I am working around with:
<td align="left" class="list_vspace">
<div style="float:left;padding-right:10px;">
</div>
<div style="float:left;padding-top:8px; width:480px;">
<div class="List_title">
<div style="float:left;">
<img src="/images/icon_04.png" border="0" align="absmiddle" style="float:left;"> </div>
<div style="float:left;max-width:450px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"><font color="#ACACAC">Mini pop-store</font>
</div>
</div>
<div style="clear:both; font-size: 11px;font-family: "arial";color:#acacac;">
15:36:13 | Fish Market</div>
</div>
</td>
My question is -
What's the script I need to write in order to locate the time and the text in the last div style (ie. 15:36:13 | Fish Market)?
I tried browser.div.style but it seems Watir doesn't recognize style for div. No where could I find an answer for this, google couldn't help as well, so I'm reaching out to you guys for help. Thanks in advance.
You can do
browser.element(class: 'list_vspace').divs.last.text
=> "15:36:13 | Fish Market"
To select an element by style, you need to use css. Notice that the spacing may be different on the input and output:
browser = Watir::Browser.new
browser.goto 'google.com'
element = browser.element(css: "div[style='height:233px;margin-top:89px']")
element.exists? # => true
e2.style # => "height: 233px; margin-top: 89px;"
So you could do something like this for the code above:
browser.element(css: "div[style^='clear:both; font-size: 11px']").text

sidebar layout in ember-paper not working

I'm trying to use ember-paper in my ember app but i can't float content to the right.
Example
What I want to achieve (from ember-paper official website)
My code
application.hbs
{{#paper-nav-container}}
{{#paper-sidenav class="md-sidenav-left site-sidenav md-whiteframe-z2" locked-open="gt-sm"}}
{{#paper-toolbar}}
<div class="md-toolbar-tools">
<div class="logo">
<strong>Paper</strong>
</div>
</div>
{{/paper-toolbar}}
{{#paper-content}}
{{#paper-list}}
{{#paper-item action=(transition-to "employees.list")}}Introduction{{/paper-item}}
{{#paper-item action=(transition-to "index")}}Another link{{/paper-item}}
{{/paper-list}}
{{/paper-content}}
{{/paper-sidenav}}
<div layout="column" tabindex="-1" role="main" flex>
{{#paper-toolbar}}
<div class="md-toolbar-tools">
<span class="md-breadcrumb-page">Title</span>
</div>
{{/paper-toolbar}}
{{#paper-content class="md-padding"}}
{{outlet}}
{{/paper-content}}
</div>
{{/paper-nav-container}}
How can I float sidebar to the left? I have no errors in console, and it was a straight copy-paste from official guide
The example is using the display:flex probably thats not supported in your browser http://caniuse.com/#search=flex ? provided you copy pasted the entire CSS required.

Rename multiple css with identical name

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;
}

Resources