Clickable Sub Header in ionic v1 - ionic-framework

I have hader in ion-view like
ion-view(title='{{review_type}} reviews',ng-cache="false",cache-view='false')
wta-nav-action-right(icon='icon-white-plus', action='reviewAdd')
ion-content
review-empty-list(ng-show='!reviews.length')
section(style="margin-top:10px")
wta-review(ng-repeat='review in reviews')
infinite-scroll(items='reviews', query='query')
I converted this to two line header like this
I am trying to convert “Blueberry Wine” into hyperlink so that by clicking on this user can navigate to respective Page…
I tried but ng-click event is not triggered.
I put span tag inside the ion-view title and give ng-click attribute to that span but still event is not triggered.
ion-view(title='<span class="header",ng-click="clickable()">{{review_type}} reviews</span>,'ng-cache="false",cache-view='false')

I done this by adding this .. here is code pan link https://codepen.io/calendee/pen/bLJcD
ion-view(title='{{review_type}} reviews',ng-cache="false",cache-view='false')
wta-nav-action-right(icon='icon-white-plus', action='reviewAdd')
ion-content
section
nav
a.col.text-center.center(style="background-color: #f0483d;color: white;padding: 10px 0")
h4(style="color :white") Winery Name
review-empty-list(ng-show='!reviews.length')
section(style="margin-top:10px")
wta-review(ng-repeat='review in reviews')
infinite-scroll(items='reviews', query='query')

Related

How to focus the list items in the list view based on certain conditions?

I have a list view in my page with list of items on page load and I need to focus the list items in the list based on the user search in a text field on form submit..can any one help me with this?
You do not tell us what kind of HTML elements should be focused - normal divs/spans or form elements like inputs.
If you need to focus a normal element, i.e. to highlight it, then you just need to CSS decorate it. You can do this via:
listItem.add(AttributeModifier.append("style", "border: 1px red solid", ";"));
or
listItem.add(AttributeModifier.append("class", "myHighlightClass", " "));
The above will add CSS style or class attribute to the HTML element with wicket:id for the ListView.
If you need to focus an HTML input/select element then you need to execute JavaScript like $('#yourInputId').focus().
You can do it in Wicket's #renderHead(IHeaderResponse response) method:
response.render(OnDomReadyHeaderItem.forScript("$('#" + textField.getMarkupId() + "').focus()"));

Select jQuery UI Button by Label or $.Data

My buttons are input type=button, id field set, and no text in between the tags since it appears to the right of my buttons rather than inside. (sorry, won't let me publish the html for some reason).
I .button() them and set their label. All works as expected, but I can't select them by :contains().
How do you select jQuery UI buttons by their labels?
Thanks in advance!
Edit
I don't select by id because the text of the button changes based upon a variable in my db. Is there a way to select by .data?
You should create a button and look how jQuery creates it. When you look at the example in the documentation you see that .button() creates a span element in the button element that contains the label. So you can query on this inner span element which has a class of ui-button-text.
But I think that you should overthink your code and rework it so that you can select on the ID since they are made to identify things.
Edit: Then go for the first advice
var buttons = $('button').filter(function (index) {
$('.ui-button-text:contains("' + your_string + '")', this).length > 0
});

css nth-child and classes

I've got a problem with the css nth-child selector.
I have a grid of 3x3 elemtens inside a container. Those elements have a class called .square.
With .square:nth-child(3n+1) I select every first element of the row and color it green.
With .square:nth-child(3n+3) I select every last element of the row and color it red.
This works fine, until there is any element(<br> for example) that is outputted before the grid. With every new <br>, the order moves up by one, as is the <br> was considered a .square.
As I understand the .nth-child, it should select every third element of the .square class. Why does it apply that to any element, and how can I achieve my inital goal?
Thanks in advance
http://www.hier-krieg-ich-alles.de/shop.php?cat=26491127728
The problem occurs on the boxes in the middle.
Sounds like you want nth-of-type.
Related selectors which you may find useful are :first-of-type, :last-of-type, :nth-last-of-type and :only-of-type.
nth-child working only with html element, nth-child css don't know class and id, if you want set nth-child for class, add some custom attribute for that class using jquery..
like
jQuery('.square:nth-child(3n+3)').attr("act","dummy");
then use css
div[act='dummy']{
border : 1px solid red;}

How do I get jscrollpane to co-exist with a jquery accordion script?

I have a site that uses a accordion script, and I want to place a scrollbox inside one of the accordion tabs. However, the scrollbox works just fine, but breaks the accordion script. Is there a way around this conflict?
This is the site with just the accordion script:
http://www.namibiaonline.net/sandbox/NBAA/index9.html
And this is the broken one with jscrollpane and the accordion script:
(for some reason I'm only allowed to paste one hyperlink, so to get to the broken one, just replace /index9.html with /scroll_test.html)
Any help would be much appreciated :)
Ash
This should fix your problem. Try the beta:
http://groups.google.com/group/jscrollpane/browse_thread/thread/c1bc1bf63e3f80d8
and I believe this is where your issue lied:
http://jscrollpane.kelvinluck.com/auto_reinitialise.html
I had the same problem and this is how I almost solved it:
jQuery(document).ready(function() {
scrollPane = jQuery(".scroll-pane").jScrollPane({
showArrows: true
});
var api = scrollPane.data('jsp');
jQuery("#accordion").accordion({
changestart: function(event, ui) {
api.reinitialise()
}
});
}
Be sure that you define the correct width height for the containers which have the scroll-pane class. In my case I have created 3 containers like this:
<div class="scroll-pane">
.scroll-pane {
overflow: auto;
height: 134px;
width: 420px;
}
The class scroll-pane is where I defined the overflow, height and width. If I do in the parent container, the scroll is not shown because it takes all the height and also if I do in a child container, a non stylized scroll is shown.
But I still having an issue with the first pane. It is correctly shown the first time the page is loaded, but when I move to another accordion tab and then come back to the first one, the width of this element is set to 0. It only happens with the first one the others work fine.

GWT: Adding HTML / Label to flowPanel

I would like to use a flowPanel to contain a list of tags. The tag contain a name and a close button.
However, when I add HTML / Label to flowPanel, it will create a new line because it's a DIV element.
If the HTML / Label is a span element, there is no new line. However, I can't create spanElement on demand.
Does anyone has any suggestion? Thanks in advance.
Check out the InlineLabel and/or InlineHTML widgets.
set the css style of the Label like this : display: inline;