Develop Reference

Get the last div top css in vuejs

I am converting a jQuery code to vuejs. I have a hard time doing it. I tried to search but I can't find anything clear.
Sample jQuery code is to get the last div top position. The code is like this:
var top = parseInt($(".d1 > .d2> div").last().css("top"));
My template code is :
<template>
<div class="div1" >
<div class="div2" ref="busstop">
<div v-html="renderEl()"></div>
</div>
<button #click='test()'>testing</button>
</div>
</template>
Any Idea on how to convert in to vuejs? Any help is much appreciated. Thank you.

in ur case, i will using ref to get lastChildElement div by using lastElementChild
First, to get the last child element
this.$refs.busstop.lastElementChild
and to style for this element
this.$refs.busstop.lastElementChild.style.fontSize = "30px";
like that

Alright, so if I understand properly, you want to:
have a parent w/ a reference
select the last element of this specific parent
get it's window's position from the top ?
Here is a demo on how to do this in CSS + Vue.
https://codesandbox.io/s/jovial-fog-td190?file=/src/App.vue

AngularJS ng-class condition

I have the following HTML element with AngularJS directives:
<div class="progress">
<span ng-repeat="timeRangeObject in timeRangeObjects" style="width: {{timeRangeObject.percentage}}%" ng-class="vm.showVacation == true ? 'progress-bar timerange-{{timeRangeObject.containerType}}' : 'progress-bar timerange-PADDING'" />
</div>
So I concat more than one progress bar with different types/colors.
With the checkbox I will set specific progress bars to color transparent.
Therefore I would need something like this:
... ng-class="vm.showVacation == true ? 'progress-bar timerange-{{timeRangeObject.containerType}}' : 'progress-bar timerange-PADDING | timeRangeObject.containerType == 'XY''"
-> so I would need a filter concerning the ng-class else statement.
Is this possible? The important thing is that only color should change but progress bar should stay where it is.
Thanks a lot
[EDIT]
Here is a link to my problem:
My Example

You have a done a lot of thing that is better if you correct first of all don't use style="width:{{}}" is better if you use ng-style so you don't have to use the bracket, and to answer to your question you can write like this in your ng-class:
<div ng-class="foo()">
js
$scope.foo=function(){
return /*here you put your condition sorry but i didn't understand
the conditions you need*/
}
you can do this with your style attribute too.

How can I automatically set text direction based on input text language?

In Google plus (and a lot of other places), when I want to post something, when I type it in Persian, which is a right-to-left language, text direction is automatically set to rtl and text-alignment:right, and when I start to type in English it changes automatically to ltr and text-alignment:left. How can I have such functionality? Is this anything with HTML5 or Javascript? What clues should I follow?
Thanks in advance

Add dir=auto to your input elements:
Use dir="auto" on forms and inserted text in order to automatically detect the direction of content supplied at run-time.
https://www.w3.org/International/questions/qa-html-dir#quickanswer

I wrote a JQuery code to do this. Just add class "checkRTL" to the element you want to set its direction.
var rtlChar = /[\u0590-\u083F]|[\u08A0-\u08FF]|[\uFB1D-\uFDFF]|[\uFE70-\uFEFF]/mg;
$(document).ready(function(){
$('.checkRTL').keyup(function(){
var isRTL = this.value.match(rtlChar);
if(isRTL !== null) {
this.style.direction = 'rtl';
}
else {
this.style.direction = 'ltr';
}
});
});

I was having issue with dir=auto sometimes not working.
After digging CSS I found
#container > * {
text-align: start;
unicode-bidi: plaintext;
}
More flexible and universal

There's also Twitter's library, which may help:
https://github.com/twitter/RTLtextarea

Add dir="auto" to your element and then use window.getComputedStyle(element).getPropertyValue('direction')
Example:
<div id="foo" dir="auto">نے والے ہیں۔<div>
// returns rtl
window.getComputedStyle(document.getElementById('foo')).getPropertyValue('direction')

list the right to left languages typical characters
detect them on the fly (usual js events)
change css classes accordingly
Or follow this link:
http://www.i18nguy.com/temp/rtl.html

window.getComputedStyle(document.getElementById('foo')).getPropertyValue('direction')
<div class="" id="foo">
<div class="English">this is test message</div>
<div class="Persian">این یک پیام تستی است</div>
<div class="Persian-English">test برای حالت فارسی</div>
</div>
In Persian, if first sentence starts with an English word like last div, the whole text is placed in LTR mode

JSF Set CSS Style Using Javascript?

I have been looking with no success to see if I can dynamically apply a css style to JSF component or div using javascript. Is this possible.
This is pseudo code
<div style="myJSStyleFunction("#{myBean.value}")"> stuff </div>
And the function would return something like "position:relative;left:25px;"
I've had no luck and maybe it can't be done but would like a second opinion.
Edit:
I'm trying to see if I can keep a separation / reduce the coupling between the presentation/view and the model/controller. This is for indenting commenting or product reviews (to nest replies to comments or reviews). The most I really want to track is an integer on how deep a reply is. First level = 0 second level = 1, and so on. So a comment or product review would be 0 deep, a reply to the comment or review would be 1 and so on.
Then in the EL I wanted to call a javascript function and do something like
<script>
myJSStyleFunction(depth){
if(depth<=5){
var nest=20*depth;
var style="position:relative;left:" + nest + "px;";
return style;
}
}
</script>
And then then say for a third level comment (a reply to a reply) it would look like this:
<div style="position:relative;left:40px;"> stuff </div>
where
#{myBean.value}
evaluates to 2
I suspect like Daniel says I'll have to tightly couple the view but I'd rather not have to. I'd think there has to be a way. But maybe not.

I don't know where there are cleaner solutions for this. However this is one suggestion.
Assume your page looks like below and myBean.getValue() method returns an integer.
<h:form id="frm">
<div style="#{myBean.value}"> div1 </div>
<div style="#{myBean.value}"> div2 </div>
</h:form>
So you can do something like this at 'window.onload'.
<head>
<script>
window.onload = function() {
var childList = document.forms['frm'].childNodes;
for(var i = 0; i < childList.length; i++) {
if(childList[i].nodeName == 'DIV') {
var _div = childList[i];
var depth = _div.getAttribute('style');
_div.setAttribute('style', 'position:relative;left:' +(depth *20)+ 'px;');
}
}
}
</script>
</head>
Note: 1. In above sample code I assume all the DIVs inside the form should be indented.
2. For IE you may need to use _div.style.setAttribute('cssText','position:relative;left:' +(depth *20)+ 'px;')
3. Another solution for your question is using <script> tags immediately after your divs and putting the js part inside them. In this way you don't have to use fake styling style="#{myBean.value}" or window.onload event because you can directly call #{myBean.value} in your script.

I decided to skip the javascript approach and settled on a simpler and I think cleaner method to create the dynamic css classes for my situation. I already capture/calculate the depth value for each comment when it is entered. So I am just returning that value in EL and concatenating it to a 'base name' for the css class like so:
<div class="indent_#{(comment.commentDepth le 5) ? comment.commentDepth : 5}" >
comment comment blah blah blah
</div>
"indent_" is the base name for the css class. So for a 0 level comment it will have a class="indent_0". A reply to that comment will have class="indent_1".
I use the ternary so that if there are lot of replies under a given comment it doesn't indent right off the right hand side of the page. Even though you can keep going deeper, it will only indent up to 5 levels.
For my case at the moment, this is a simpler and cleaner method of adding some dynamically generated css class names. Right now I have to define 6 classes for this in the css file, but perhaps I'll figure out how to nest the boxes but it isn't a priority this works just fine for me for now.

Does anyone know how to use or modify jQuery Pagination plugin to show nav on top and bottom of page?

I am working with http://plugins.jquery.com/project/pagination and want to have the pagination applied to both top and bottom of the page. Is there any way to make this happen?
Edit - Solution Full Code
$("#pagination").pagination(data, {
num_edge_entries: 2,
num_display_entries: 8,
items_per_page: 5,
next_show_always: false,
prev_show_always: false,
callback: function(page_index, jp){
$.get("ajax.php?n="+page_index, function(data){
$("#content").empty().append(data);
});
}
var paginationClone = $("#pagination > *").clone(true);
$("#paginationbottom").empty();
paginationClone.appendTo("#paginationbottom");
return false;
}
});

Update:
A possible workaround is at this SO answer.
Essentially tweak the callback to clone one paginator to the other.
Ability to do this is apparently a "critical" feature request.

I know this is an old question but here is how I was able to implement paging at the top and bottom of the content. Hope this helps someone that may be looking for this answer.
In the HTML I added a second pagnation holder like this:
<div id="pagnationNav1" class="holder"></div>
<div id="itemContainer">
''' Your looping code goes here
</div>
<div id="pagnationNav2" class="holder"></div>