Here is the code of my HTML iPhone app: http://summerblast.pt/iphone/code.html
I would like the icons of the bar to have a link. Lets say the first btn called "Emissão" will redirect to http://www.summerblast.pt/player.html
How can I do That?
Go to your ul tag with the id tabSelector and under it you'll find the li with each tab. Surrounding the contents of each li is a a tag. If you add href="[insert link to site here]", the contents of the li and therefor the icons will be clickable and link to the site.
An example of the edited tag would be this: <a data-bind="click: selectTab" href = "www.google.com"> Notice the href
Here would be the full contents of the li for the first icon:
<li data-bind="attr: {'data-tabid': TabId}" data-tabid="1263865">
<a data-bind="click: selectTab" href = "www.google.com">
<img data-bind="attr: {src: TabId == $root.CurrentTab().topLevelSectionID ? TABU.getImageUrl(SelectedTabIcon, $element) : TABU.getImageUrl(TabIcon, $element)}" src="http://myapp.is/image/aHR0cDovL3RhYi1iYXNlLXVybC50aGVhcHBidWlsZGVyLmNvbS9hcHBidWlsZGVyYXNzZXRzL2Fzc2V0cy90YWJiYXJfaWNvbnMvaW9zX3NlbGVjdGVkLzMyMC9SZXNpc3RvcnMucG5n/0/0">
<div data-bind="text: TabTitle">Emissão</div>
</a>
</li>
Related
In Nuxt I have 3 pages (index, login and register) that needs to show the same structure, the code above.
It's a form with tabs. then in the tag it's were I show some diferences.
I decided to put that code in the default.vue file.
But now, I have more pages were I don't need to show the "forms" class and the tabs.
Any suggestion about how can I achieve it?
Thank you
<template>
<div>
<div class="container is-fluid">
<navbar></navbar>
<div class="places">
<div class="structure">
<div class="forms">
<div class="tabs help-tabs">
<ul class="tab_title">
<li :class="[tab === 'register' ? 'is-active' : '']">
<a #click="tab='register'">Register</a>
</li>
<li
:class="[tab === 'login' ? 'is-active' : '']"
#click="goToRoute('login')">
<a #click="tab = 'login'">Login</a>
</li>
</ul>
</div>
</div>
<nuxt />
</div>
</div>
</div>
</div>
</template>
You could either create a second layout beside the default.vue and use it only for these routes (index, login and register) so you have:
auth.vue for index, login and register pages
default.vue for all other pages
You could then specify which layout you want to use in the page file directly like here
export default {
layout: 'auth',
}
Or you stick to using one single layout (default.vue) and create a component (eg. tab component) which you then display on all 3 of those routes.
I'm creating a tag system on my website. So far it's all working great. But now I wish to create a page that shows all my tags under their own tab like you have with a portfolio page.
Example: http://www.don-zalmrol.be/tags?tag=Electronics
My page already displays the tags for a specific tag under it's own tab (i.e. electronics), but as you might guess I wish to populate the other tags in their respective tab as well.
So in short you land a view that displays the tag you've selected, but on the same page you can see the others as well.
Anybody has any idea how I can do this? I don't think I'm far away from the solution as I can already load the projects for specific tags under it's own tab. Now I only need to populate the remaining tabs with the tags!
Thanks!
This is my code so far:
http://pastebin.com/jwGW0NKZ
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
var portfolio = Umbraco.TagQuery.GetAllContentTags().OrderBy(t => t.Text);
var tagList = Umbraco.TagQuery.GetAllContentTags().OrderBy(t => t.Text);
string tag = Request.QueryString["tag"];
if (!tag.IsNullOrWhiteSpace())
{
var publishedContent = Umbraco.TagQuery.GetContentByTag(tag);
if (publishedContent.Count() > 0)
{
#* Show title *#
<div class="media contact-info wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<center>
<div>
<i class="fa fa-tags"></i>
</div>
<br />
<div class="media-body">
<h2>Tags</h2>
<p>Browse content by tag</p>
</div>
</center>
<br />
</div>
#* Show tag titles in tabs *#
<ul class="portfolio-filter text-center">
<li><a class="btn btn-default" href="#" data-filter="*">All tags</a></li>
#foreach (var tags in tagList)
{
<!-- Create a selected tag -->
if(#tags.Text == #tag)
{
<li><a class="btn btn-default active" href="#" data-filter=".#tag">#tag</a></li>
}
#* Show all other tags *#
else
{
<li><a class="btn btn-default" href="#" data-filter=".#tags.Text">#tags.Text</a></li>
}
}
</ul>
<div class="row">
<div class="portfolio-items">
#* Start picture content *#
#foreach (var tags in tagList)
{
#* Put selected tag in the right tag tab *#
if(#tags.Text == #tag)
{
#* Show tag content *#
foreach (var item in publishedContent.OrderByDescending(i => i.CreateDate))
{
<div class='portfolio-item #tag col-xs-12 col-sm-4 col-md-3'>
<div class="recent-work-wrap">
#* IF the project has a picture *#
#if(item.HasValue("pictureOfTheProject"))
{
var featureImage = Umbraco.TypedMedia((int)item.GetPropertyValue("pictureOfTheProject"));
<img class="img-responsive" src="#featureImage.GetCropUrl(250, 250)" alt='#item.GetPropertyValue("titleOfTheProject")' />
<div class="overlay">
<div class="recent-work-inner">
<h3>#item.GetPropertyValue("titleOfTheProject")</h3>
<a class="preview" href="#featureImage.GetCropUrl(250, 250)" rel="prettyPhoto">
<i class="fa fa-eye"></i> View
</a>
</div>
</div>
}
#* Else when the project doesnt have a picture, show default one *#
else
{
var noImage = "http://www.don-zalmrol.be/media/1440/no_image_available.png";
<img class="img-responsive" src="#noImage.GetCropUrl(250, 250)" alt="No image" />
<div class="overlay">
<div class="recent-work-inner">
<h3>#item.GetPropertyValue("titleOfTheProject")</h3>
<a class="preview" href="#noImage.GetCropUrl(250, 250)" rel="prettyPhoto">
<i class="fa fa-eye"></i> View
</a>
</div>
</div>
}
</div>
</div>
}
}
#* Put the other tags under there own tab *#
else
{
}
}
#* End dynamic tags *#
</div>
</div>
}
#* No content matching the tag? *#
else
{
<p>There isn't any content matching that tag.</p>
#Html.Partial("TagList")
}
}
#* Show the tag list with amount *#
else
{
#Html.Partial("TagList")
}
}
EDIT 27-03-2016
Ok so I now know that I need to play around with my tag query or use the IEnumerable. But I can't seem to find it out how I can do this without breaking the code...
#* Get all tags and order them by name *#
var tagList = Umbraco.TagQuery.GetAllContentTags().OrderBy(t => t.Text);
#* Get requested tag *#
string tag = Request.QueryString["tag"];
#* Show all content by requested tag *#
var publishedContent = Umbraco.TagQuery.GetContentByTag(tag);
Above are the pieces of code that list all the tags I have in a var, gets the name from the URL (i.e. Electronics) and one that then displays all content that matches said queried tag.
So in short I need to change the last part of the TagQuery to list all content that has a tag and then filter it out by the querystring to display them in their own category.
But how can list all tagcontent?
Cheers,
Don
Your issue is on line 76 of the pastebin where you loop through the published content, which is already filtered by the selected tag. Because of this, only content with the selected tag ever gets written to the template.
What you need to do is use the loop on line 70 where you're looping through all tags. The jQuery plugin you're using will handle the filtering by using the CSS class you add on line 78. You can get rid of the loop on line 76.
For clarity, I would also change the
#foreach (var tags in tagList)
to
#foreach (var item in tagList)
since the foreach is producing a single tag rather than plural "tags" as your code insinuates. This has the added bonus of allowing you to keep the rest of your code the same once you remove the loop on line 76.
I am using Twitter Bootstraps "dropdown menu" on WordPress for some widget I created and it works fine. But I want to change the icon to "minus" when it drops the content and when another "plus"-icon is clicked the "minus" should close. At the moment it will only toggle the current "plus".
<div class="dropdown toggle-details">
<img src="">
<h3>title</h3>
<h4><subtitle</h4>
<a class="dropdown-toggle my-btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="fa fa-plus-circle"></i></a>
<ul class="dropdown-menu" >
<li> <h6>item 1</h6></li>
<li><h6>item 2</h6></li>
</ul>
</div>
my script is
jQuery('a').click(function() {
jQuery(this).find('i').toggleClass('fa-minus-circle');
jQuery(this).find('fa-minus-circle').toggleClass('fa-plus-circle')});
You're missing a dot in your jQuery, so right now jQuery is looking for an html element with tag name fa-minus-circle within the "a" element. And obviously not finding it.
jQuery(this).find('.fa-minus-circle').toggleClass('fa-plus-circle')...
actually that probably won't fix it either, because after that statement you'll end up with both classes on the i element. I guess you could work around that with css, but cleaner would be to have the "i" element default to a + icon, and then toggle a more semantic class name like "open".
So css:
i { /* show plus icon */ }
i.open { /* show minus icon */ }
And jQuery:
jQuery("a").on("click", function() {
jQuery(this).find("i").toggleClass("open");
});
Heh - now that I just typed everything out I see what you were doing with that second statement. So yeah, you just need a dot so jquery looks for the classname not the element.
I would like an angular-strap tab title to have an icon-font an then the text for the title.
The resulting html for the tab list would have to have an li that looks like the following.
<li class="ng-scope active" ng-class="$index == $panes.$active ? $activeClass : ''" ng-repeat="$pane in $panes">
<a class="ng-binding" role="tab" ng-click="$setActive($index)" data-toggle="tab" ng-bind-html="$pane.title" data-index="0">
<i ng-show="loading" class="fa fa-spinner fa-spin"></i> Home
</a>
</li>
How do I express this in angular-strap?
It's very easy to do in strait bootstrap.
You can use escaped html.
So, putting something like this in the title will display the icon
<i ng-show="loading" class="fa fa-spinner fa-spin"></i> Home
I have HTML loaded with the Jquery .load method and need to dynamically change anchor HREF and input button ONCLICK targets in this HTML on the client as the page loads, (I don't have the option to change the server generated HTML).
The .load works fine and I can change the HREF target OK but I can't find a way of changing the ONCLICK target?
HTML
Anchor HREF
<div style="width:143px;" id="LM_OBJV">
<span title="View Objectives Detail" class="PSHYPERLINK">
<a class="PSHYPERLINK" href="javascript:Action_win0
(document.win0,'LM_OBJV','Relationship Building',false,true);" tabindex="54"
id="LM_OBJV" name="LM_OBJV">Relationship Building</a>
</span>
</div>
Button ONCLICK
<div id="win0divLM">
<a id="Left" style="background-Color: transparent;border:0;" class="PBUTTON">
<span style="background-Color: transparent;">
<input type="button" onclick="Action_win0(document.win0,'LM_PB', 0, 0, 'Add New',
false, true);" style="width:120px; " class="PBUTTON" value="Add New" tabindex="77"
id="LM_PB" name="LM_PB">
</span>
</a>
</div>
Javascript
$('#result').load('some.php', function() {
$("a.PSHYPERLINK")
.each(function()
{
this.href = this.href.replace("Action_win0", "Action_winx");
});
});
So this JS works fine, loads the HTML into the #results DIV and changes the HREF's from "Action_win0" to "Action_winx".
But how can I also change the input type="button ONCLICK events from "Action_win0" to "Action_winx"? I've tried several Jquery selectors but just can't get it to work :(
$('a.PSHYPERLINK').attr('onclick', 'alert("bar")')
Demo: http://jsfiddle.net/kzVSt/