I have a div element in TouchXML, and I know for a fact that it contains an a element which I need to access. This is the element, which is declared as CXMLElement *element in a for-in loop
<div id="song_html" class="show3">
<div class="left">
<!-- info mp3 here -->
128 kbps<br/>2:35<br/>2.36 mb
</div>
<div id="right_song">
<div style="font-size:15px;"><b>The Doors - The Crystal Ship mp3</b></div>
<div style="clear:both;"/>
<div style="float:left;">
<div style="float:left; height:27px; font-size:13px; padding-top:2px;">
<div style="float:left;">Download</div>
<div style="margin-left:8px; float:left; width:27px; text-align:center;">Play</div>
<!-- New ad start -->
<script><![CDATA[
var id_array = ["newad14851327"]; window.onload = function(){
var i = 0;
for(i=0; i < id_array.length; i++){
var tgt = document.getElementById(id_array[i]).href; document.getElementById(id_array[i]).href = ""; document.getElementById(id_array[i]).onclick = function(){
window.location.href= tgt;
return false;
};
} }
]]>
</script><!-- New ad end -->
<div style="margin-left:8px; float:left;">Download Album</div>
<!-- ToneFuse Start -->
<script><![CDATA[ (function(id) {
console.log("tonefuse id:"+id);
document.write('<div style="margin-left:8px; float:left; color:red;" id="'+id+'">]]>
</script>
</div>
');
tfp_multi_ad_slots = window.tfp_multi_ad_slots || [];
tfp_multi_ad_slots.push(id);
window.tfpWriteMultiAd && tfpWriteMultiAd();
})(("tfp_multi_"+Math.random()).replace(".",""));
<!-- ToneFuse End -->
<div style="clear:both;"/>
</div>
<div id="player14851327" style="float:left; margin-left:10px;" class="player"/>
</div>
<div style="clear:both;"/>
</div>
(Sorry about the formatting; I didn't write it)
As you can see, there is an a element (there's actually two) in this. However, when I attempt to access these elements using the following
NSArray *linkElements = [element elementsForName:#"a"];
linkElements always contains 0 objects. Why is TouchXML not filling linkElements with the two a elements?
The elementsForName: method only looks at the immediate child nodes of the element. It does not do a recursive descent. In your posted code, element does not have any a elements, just more div child elements. You need to write your own code to recursively traverse all of the child div elements until you find all of the desired a elements.
Related
I'm learning to handle typo3. I understand that what I'm using here is Fluid to call the variable from my backend
I have this template
<f:layout name="Default" />
<f:section name="Main">
<div class="container">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '21'}" />
</div>
</f:section>
And this is the template? I'm printing my content element with.
<html data-namespace-typo3-fluid="true"
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
<div class="row">
<div class="col-7 ">
<div class="screen">
<div class="screenshot">
<f:for each="{screenshots}" as="screenshot">
<f:image style="opacity: 1;" image="{screenshot}" />
</f:for>
</div>
<a href="#" target="_blank">
<img src="typo3conf/ext/hebotek_website/Resources/Public/Images/screen.png" width="100%">
</a>
</div>
</div>
<div class="col-5">
<f:for each="{logos}" as="logo">
<f:image style="opacity: 1;" image="{logo}" />
</f:for>
<div class="project_desc">
<h3>
{data.header}
</h3>
<f:format.html>{data.bodytext}</f:format.html>
</div>
</div>
</div>
</html>
This will print two columns, the first one with a picture and the second one with a header and a text.
I want to print one time the image at the left and the next time the image at the right and the next at the left again. How do I alternate the html here? Is this possible with fluid or I must take a different approach?
Something like:
if(index % 2 == 0)
{
print left
}
else
{
print right
}
In any of this two templates I have an array in order to do this.
Thanks!
Unfortunately, there is no real alternate functionality in fluid.
You could use your approach with a condition:
<f:if condition="{index % 2 == 0}">
<f:then>
print left
</f:then>
<f:else>
print right
</f:else>
</f:if>
Fluid also provides a way to render partials in separate files, to reduce the amount of markup in your template:
<f:render partial="path/to/your/partial/left">
But a better approach will probably be to use css to alternate your layout.
For example with flexbox:
.row:nth-child(even) .col-6.image {
order: 1;
}
.row:nth-child(even) .col-6.text {
order: 2;
}
.row:nth-child(odd) .col-6.image {
order: 2;
}
.row:nth-child(odd) .col-6.text {
order: 1;
}
This way, you can also use a media query, to keep your top-bottom order for smaller screens, so your images or your text are not next to each other.
Am trying to loop through a list and display them in a grid with four cards.
<div class="grid-x movies">
<div v-for="item in filteredMovie" :key="item.id">
<div class="cell large-4 medium-3 small-12">
<div class="card">
<img v-bind:src="item.cover_image" style="height:100px;width: 100px">
{{ item.name }}<br/>
</div>
</div>
my computed property is
computed:{
items(){
return this.$store.getters.getMovies
},
filteredMovie:function(){
let self= this;
return this.items.filter(function(item){
return item.name.toLowerCase().indexOf(self.search.toLowerCase()) >= 0
|| item.cast.toLowerCase().indexOf(self.search.toLowerCase()) >= 0
|| item.genre.toLowerCase().indexOf(self.search.toLowerCase()) >= 0;
}
)
}
}
}
</div>
but the list doesn't display on the page but when i put the v-for before the grid the list shows but the cards are not in four columns.what could be the problem
You need to put your classes on the looping div:
<div class="cell large-4 medium-3 small-12" v-for="item in filteredMovie" :key="item.id">
Your code in a sample: https://jsfiddle.net/5b6zkLom/
I'm trying to implement error handling in ASP.NET so that if there is an error the user will get the error message, then be able to go back and have the previous state restored. I'm using ASP.NET Core and Knockout (not my implementation). I want to update "signerFields" with the model from the server (Model.SignersJson). How would I do this?
Signer.js
function SignerViewModel() {
var self = this;
self.signerFields = ko.observableArray([]);
self.guarantorFields = ko.observableArray([]);
self.companyGuarantorFields = ko.observableArray([]);
...
Signer.cshtml
<div data-bind="foreach: signerFields, visible: signerFields().length > 0">
<div class="row">
<div class="col-lg-10">
<div>
#*Header Company signers section*#
<div class="row" data-bind="visible: isCompany() && !anySigner() && !isInvitation()" style="display: none">
<div class="col-lg-4">
<b>FullName</b>
</div>
#*<div class="col-lg-3">
<b>LastName </b>
</div>*#
<div class="col-lg-4">
<b>Role </b>
</div>
<div class="col-lg-3">
<b>Contact_Information</b>
</div>
</div>
</div>
</div>
...
#section scripts
{
<script src="~/Scripts/Signer.js"></script>
var serverSigners = JSON.parse(#Html.Raw(Json.Encode(Model.SignersJson)));
var observableData = ko.mapping.fromJS(serverSigners);
var viewModel = new SignerViewModel();
viewModel.signerFields(observableData); // <-- How?
}
I get no error messages, nothing.
There is a lot of unknowns with this one, but here is a working example using the information we have at hand. One thing I noticed was when creating this sample was that I assumed the data comming from Razor was in an array. and when the array is passed into the mapping component it comes out as an observable array. This meant that the data going into the signerFields was probably not what you were expecting and ended up having an observableArray with one object which itself was an observable array. Adding round brackets to observableData() means that you get the data out of the observable and you can then pass it into the signerFields as an array of objects.
Hope that made sense.
function SignerViewModel() {
var self = this;
self.signerFields = ko.observableArray([]);
self.guarantorFields = ko.observableArray([]);
self.companyGuarantorFields = ko.observableArray([]);
}
var serverSigners = [{'fullname':'Test Name', 'lastName': 'Name', 'role': 'Test Role', 'contactInformation': '123 Seasame Street NY, US', 'isCompany': true, 'anySigner': false, 'isInvitation': false}];
var observableData = ko.mapping.fromJS(serverSigners);
var viewModel = new SignerViewModel();
viewModel.signerFields(observableData());
ko.applyBindings(viewModel)
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<div data-bind="foreach: signerFields, visible: signerFields().length > 0">
<div class="row">
<div class="col-lg-10">
<div>
<div class="row" data-bind="visible: isCompany() && !anySigner() && !isInvitation()">
<div class="col-lg-4">
<b>FullName: </b><span data-bind="text: fullname"></span>
</div>
<div class="col-lg-3">
<b>LastName: </b><span data-bind="text: lastName"></span>
</div>
<div class="col-lg-4">
<b>Role: </b><span data-bind="text: role"></span>
</div>
<div class="col-lg-3">
<b>Contact Information: </b><span data-bind="text: contactInformation"></span>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to close a Modal of Materialize CSS if the validation is correct but I can not find the form.
The simplest thing was to do a type validation:
v-if = "showModal" and it works but leaves the background of the Modal and although click does not disappear. The background is a class named 'modal-overlay'
This is my code:
<i class="material-icons modal-trigger tooltipped" style="margin-left: 2px;
color:#ffc107; cursor:pointer;" #click="getById(article), fillSelectCategories(),
titleModal='Edit', type='edit'" data-target="modal1">edit</i>
I imported M from the JS file of MaterilizeCSS
import M from "materialize-css/dist/js/materialize.min";
Method:
update(){
var elem = document.querySelectorAll('.modal');
var instance = M.Modal.getInstance(elem);
console.log(instance)
That returns 'undefined'
I tried this too on the update() method:
var elem = document.querySelectorAll('.modal');
elem.close();
M.Modal.close()
I initialize the modal from mounted and it works fine but I can not close it at the moment I require it.
mounted(){
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems, options);
}
But I know what else to try :(
It really is difficult to know why things aren't working for you without looking further into your code, but I've created this simple example to demonstrate how it could be done ..
new Vue({
el: "#app",
data: {
modalInstance: null,
closeAfterTimeElapsed: true,
seconds: 1
},
mounted() {
const modal = document.querySelector('.modal')
this.modalInstance = M.Modal.init(modal)
const select = document.querySelector('select');
M.FormSelect.init(select);
M.updateTextFields();
},
methods: {
handleClick() {
if (this.closeAfterTimeElapsed) {
setTimeout(() => { this.modalInstance.close() }, this.seconds * 1000)
}
}
}
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<div id="app">
<!-- Modal Trigger -->
<button #click="handleClick" data-target="modal1" class="btn modal-trigger">Modal</button>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<br>
<br>
<div class="row">
<div class="input-field col s6">
<select v-model="closeAfterTimeElapsed">
<option :value="false">False</option>
<option :value="true">True</option>
</select>
<label>Close Modal After</label>
</div>
<div class="input-field col s6">
<input id="seconds" type="number" v-model="seconds">
<label for="seconds">Seconds</label>
</div>
</div>
</div>
See this JSFiddle
I have the code below and want to count only the images in "galeria003" (I have others galleries with imgs on the page)
<div id="classepai" class="carrossel">
<div class="galeria003">
<div class="conjuntoimgs">
<div class="imagem_item">
<div>
<img src="https://localhost/foto1.jpg">
</div>
</div>
<div class="imagem_item">
<div>
<img src="https://localhost/foto2.jpg">
</div>
</div>
</div>
</div>
<div class="galeria004">
<div class="conjuntoimgs">
(...)
</div>
</div>
I tried with the code below, but it returns to me all the images on the page.
public int galeria03() {
List<WebElement> lista03 = driver.findElements(By.tagName("img"));
int count = 0;
for(WebElement e : lista03) {
count++;
}
return count;
You can use below xpath to get all image tag present in "galeria003"
List<WebElement> lista03 = driver.findElements(By.xpath("//div[#class='galeria003']//img"));
And print the total image element
System.out.println(lista03.size());