What I want to do here is that when my checkbox 'chBeamer' is checked the images of the beamers should appear if their beamername is not '/' (/ means that their is no beamer registrated)
checkbox
<input ng-model="chBeamer" type="checkbox" id="chBeamer" name="chBeamer"/>
ng-show
<div ng-show="chBeamer"><img id="beamer" src="../app/img/beamer.png"/></div>
I don't know how to start with this, I tried with a filter and condition (chBeamer !== '/') but this didn't work...
From your post I can't quite understand where beamername is coming from, but you can do:
<div ng-show="chBeamer && beamername !== '/'">...</div>
But I feel like this is part of a bigger picture, e.g. there must be multiple items? What does your underlying model look like?
Related
I have the following simple table with Livewire:
#foreach ($sms_lists as $sms_list)
<x-table.row>
#if($listForEdit && $listForEdit['id'] == $sms_list->id)
<x-table.cell>
<span wire:click="firstAction">FIRST</span>
<span wire:click="secondAction">SECOND</span>
</x-table.cell>
#else
<x-table.cell>
<span wire:click="thirdAction">THIRD</span>
<span wire:click="fourthAction">FOURTH</span>
</x-table.cell>
#endif
</x-table.row>
#endforeach
NOTE: For the problem described below I have tested in this environment mostly with button, but also with a and div. I have made it span just for clarity.
The SECOND item always performs fourthAction.
If I comment out the FOURTH item, SECOND starts working.
If I change to the fourth item just to <span></span> or ANY element - SECOND stops working.
It works only if the #else has only one span. I see the icon and text of SECOND but somehow all attributes are from FOURTH... including all events and onclicks etc.
PS: Adding an ID to the FOURTH makes it stay persistently and never hide, even if it's whole block is hidden in the #else, it just stays between the FIRST and SECOND...
You've to add wire:key="$loop->index" to the row for livewire to identify the rows.
I'm working on my first TYPO3 project and I'm done with the template, I just can't figure out how to make this work:
My page content is one column with header, text and title in every field.
I don't have any problems showing header and text on my website, but the image just won't work.
My image-path is fileadmin/user_upload/ and I can show it by setting the filename in my code, but thats obviously not what I want.
This is my Content Object Array, the code for the image is one of the versions I found when searching, but none of them worked:
page.20 = CONTENT
page.20.table = tt_content
page.20.wrap = <div id="content">|</div>
page.20.renderObj = COA
page.20.renderObj.wrap = <div id="news">|</div>
page.20.renderObj {
10 = TEXT
10.stdWrap.field = header
10.stdWrap.wrap = <div id="newstitle"><span>|</span></div>
20 = IMAGE
20.stdWrap.field = image
20.stdWrap.wrap = <div id="newsimage><img src="fileadmin/user_upload/|"</img></div>
30 = TEXT
30.stdWrap.field = bodytext
30.stdWrap.wrap = <div id="newstext"><p>|</p></div>
}
Hope someone could help me out, so I can finally finish this project!
Maybe I don't understood correctly, but... you don't need to write it yourself, just in your main TS template include CSS Styled Content from extension, so you can render whole column like:
page.20 < styles.content.get
If you need to change some wrappings (i.e.: to add your news CSS classes) you can also override them in setup field.
edit: Go to Templates > Template analyzer and check the EXT:css_styled_content/static/ code to find declaration you'd like to change (prepare for looong reading ;)) when you finally find it, just you can overwrite it in your TS, ie: to wrap text section of Text w/ image CE you can use:
tt_content.textpic.20.text.wrap = <div class="myNewsClass"> | </div>
Finally I'd suggest not to replace original classes but add your own so the above sample would be like:
tt_content.textpic.20.text.wrap = <div class="csc-textpic-text myNewsClass"> | </div>
de facto all these classes csc- has some CSS default styling therefore you can choose to align the image to the left or right (etc) out of the box. If you'll remove it you'll need to handle these things yourself.
I am trying to alternate a CSS class in a <fieldset>. Normally a #helper function would work fine (see the #helper below), however I have two (2) circumstances that won't allow it to work properly.
First, I am using a Input.Edit.cshtml field template in ~/Views/EditorTemplates/Fields.
This basically means that as I build up a form, the Input.Edit.cshtml file is being called each time for as many <input>'s as I have in my form.
Second, I am using a condition to check the path of the URL in order to only apply this CSS alternating class on pages below a certain path. Specifically, I want to apply this change to pages under my ~/Services path. On all other pages I do not want the change applied. I check this condition using Request.Url.AbsoluteUri as you see below.
This is where I think my problem lies, as the alternating code is applied but then because it is called again for the same condition on the same page it is applied incorrectly due to my logic.
Now it could be that I am just stuck with the problem.
Here is the code:
#{
string CurrentUrl = Request.Url.AbsoluteUri;
}
#helper ResponsiveCss(string cssClass)
{
if (ViewBag.count == null) { ViewBag.count = 0; }
<text>class="#(ViewBag.count % 2 == 1 ? cssClass : "one-half last")"</text>
ViewBag.count++;
}
#if (CurrentUrl.Contains("Services"))
{
<fieldset #ResponsiveCss("one-half")>
//Label and Input code
</fieldset>
}
What should happen is that the class="one-half" is applied on the first <fieldset> that is created in the form, and then class="one-half last" on the second that is created.
Instead what is happening is that class="one-half" is NOT being applied on the first <fieldset> that is created, but rather ALL <fieldset>'s are being created with class="one-half last".
Sorry if that is not clear. Any thoughts on if I can make this work given the circumstances (and how)? Thanks.
Hopefully this solves your problem.
Alternating style
Instead of alternating the class name, you can use the nth-of-type or nth-child pseudo-classes.
fieldset:nth-of-type(odd) {}
fieldset:nth-of-type(even) {}
See this example: http://jsfiddle.net/cx9UG/
Note: These pseudo-classes can also be used in JQuery selector and document selector (querySelector and querySelectorAll)
CSS depending on URL
This is really CSS depending on the view. Just create two CSS bundles then apply in to the appropriate views.
View with alternating style #Styles.Render("~/Content/alternating")
View without alternating style #Styles.Render("~/Content/mono")
The EditorTemplate should not need to know the URL.
Environment:
Ruby 1.8.7
Selenium WebDriver 2
Ubuntu 12.04 Desktop
Firefox 13.0.1
Problem:
I have div tags being used as selects. You click on the div and a dropdown style window shows up with more div tags as the select options. Now I can go in and create a way of clicking on each of these options for each 'div as select' but what I'd really like is to write a piece of code that clicks on the divs I know about and then determines which divs are now displayed and enabled after the click. Then I can click on 1 of the options at random.
So my current code is something like this:
allDivs = brwsr.find_elements(:tag_name, 'div')
origDivs = allDivs
allDivs.each do |e|
if ... # Get the div I want
e.click
newDivs = brwsr.find_elements(:tag_name, 'div')
origDivs.each do |orig|
newDivs.delete(orig)
end
# Do something with remaining new divs here
end
end
The main problem I have is that this is extremely slow. I currently have around 200 divs to spin thru and this method takes a few minutes to complete. Normally, I wouldn't expect spinning thru a couple of hundred array elements to take very long. But it does.
To shorten the time I've attempted filtering the allDivs and newDivs by spinning thru them once and deleting anything that is not displayed and enabled.
So I'm currently stuck with a really slow solution. I don't mind this 'finding of new divs' being a little slower as it should also lead to much shorter script dev times. However, taking minutes to complete is way too long.
First question: Can Selenium return only elements which as displayed and enabled with some extra API string around the find_elements call?
Second question: Does someone have a better way of finding the new div elements without having to go thru the array of elements.
It would be very helpful if you could post some sample HTML of the DOM you are trying to automate.
With that said, the ruby webdriver bindings do support finding elements by chaining. Thus, given some html like this:
<div class="outer">
<div class="one">
<div class="alpha">A</div>
<div class="beta">B</div>
<div class="gamma">C</div>
</div>
<div class="two">
<div class="alpha">A</div>
<div class="beta">B</div>
<div class="gamma">C</div>
</div>
<div class="three">
<div class="alpha">A</div>
<div class="beta">B</div>
<div class="gamma">C</div>
</div>
</div>
You could write something like this to find the "B" div in the second group of divs ("two"):
group = brwsr.find_element(:class => "two")
desired_item = group.find_element(:class => "beta")
Or, even more simply through ruby's chaining capabilities:
desired_item = brwsr.find_element(:class => "two").find_element(:class => "beta")
One other way, which I prefer the most is to select an element via a CSS selector, which selects the element faster with an easy to read syntax:
desired_item = brwsr.find_element(:css => "div.two div.beta")
I'm trying to find the best way to render a li-element :
I've read that i should never replace this.el
So it seems that i have to unwrap my template in my LiView render() function :
// replace element content with html generated from template
var $rendered = $.tmpl(this.template, this.model.toJSON());
this.el.html($rendered.unwrap().html());
I just get the contents inside the $rendered li, since i should not replace it.
But how should i transfer attributes ?
I tried :
this.el.attr('class', $rendered.attr('class'));
this.el.attr('title', $rendered.attr('title'));
But it replaces attributes... And some (like jQuery ui ui-draggable) could be lost.
All this seems a bit clunky...
Thanks !
I'm not sure I fully grasp what you're trying to do Olouv, but I'll have a stab at answering your question regardless :)
You have an liView that corresponds to an li dom element
So you need to specify
el: "li"
Do not have an li in your template. Then the result of your render will be
<li>
contents of template
</li>
Now you want to add attributes to this li element?
Class names are pretty simple, just add the className attribute to your view
className: "ui-draggable myGreatClass ui-corner-all"
If you need to add additional attributes to your root (li) element
$(el).attr("title","your title")
If that doesn't work for you, and you want to put the li attributes in your template perhaps consider some form of the following:
Tolerating HTML of the form:
Instead of an liView (list item view), just have a ulView (List view), and put a loop construct in your template