I want to use a widget twice on my Dashing dashboard, but with different options. I'd like to set those options in the html like so:
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="myweather" data-view="myweather" data-offset="0">
</li>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="myweather" data-view="myweather" data-offset="1">
</li>
The theory being I can have both Now and In-One-Hour weather widgets, but I can't workout how to get the offset value in the job file so that I can use it for fetching the data.
Adding this as an answer since I do not have 50 points to just comment.
I don't believe this is possible. The way dashing works is that all communication goes from the server, a.k.a. jobs, to the web client. Notice how the jobs are started even before you load one page, so they do not know what channels are currently displayed. You can create multiple channels (myweather-offset-0, myweather-offset-1, etc) and send_event to all of them.
Yes, it is possible. But, I am not sure how you are planning to use.
You would have to modify the .html file of the corresponding widget to pass values.
For example, in my 'list' widget's .html I can do (added second tag)
<h1 class="title" data-bind="title"></h1>
<h1 class="title" data-bind="myown"></h1>
In my .erb I can bind myown like this (at the end).
<div data-id="buzzwords" data-view="List" data-unordered="true" data-title="Buzzwords" data-moreinfo="# of times said around the office" data-myown="some random string"></div>
Related
I'm using Application Express 20.1 to set up a simple hub for routing people to other APEX apps/websites. I would like to use a card list with some custom icons that my management put forth. I've:
Uploaded the images to the static application files
Created the static list and tagged the list items with the image from the static application files in the Image/Class field
Set the template options to 'display icons' in the list region attributes
But when I run the page the images don't show where the icon normally would. I've changed the icons to fa images, just to make sure they work and they do. Am I missing a step or is there some kind of file requirement for these images to be used as a list card icon? Thanks in advance.
To accomplish this you have to create a new template for cards lists or modify the existing one.
In the template definition found in Shared Components > Templates, find the item you're looking for (in this case it's Cards) and click on it. Within that you'll need to change the "List Template Current" and "List Template Noncurrent" sections. Below is how the template is originally configured:
<li class="t-Cards-item is-active #A04#">
<div class="t-Card">
<a href="#LINK#" class="t-Card-wrap" #A05#>
<div class="t-Card-icon u-color #A06#"><span class="t-Icon #ICON_CSS_CLASSES#"><span class="t-Card-initials" role="presentation">#A03#</span></span></div>
<div class="t-Card-titleWrap"><h3 class="t-Card-title">#TEXT#</h3><h4 class="t-Card-subtitle">#A07#</h4></div>
<div class="t-Card-body">
<div class="t-Card-desc">#A01#</div>
<div class="t-Card-info">#A02#</div>
</div>
<span class="t-Card-colorFill u-color #A06#"></span>
</a>
You will need to change the t-Card-icon section so it references an image source rather than the Icon CSS class.
<li class="t-Cards-item is-active #A04#">
<div class="t-Card">
<a href="#LINK#" class="t-Card-wrap" #A05#>
*<div class="t-Card-icon u-color #A06#"><img src="#IMAGE#"></img> </div>*
<div class="t-Card-titleWrap"><h3 class="t-Card-title">#TEXT#</h3><h4 class="t-Card-subtitle">#A07#</h4></div>
<div class="t-Card-body">
<div class="t-Card-desc">#A01#</div>
<div class="t-Card-info">#A02#</div>
</div>
<span class="t-Card-colorFill u-color #A06#"></span>
</a>
Changing the image source to #IMAGE# will reference whatever you have set up in your list configuration for that list item in the Image/Class field.
I am developing a food website using Spring boot, Thymleaf and Bootstrap. I need to display menu items in a webpage. To display it I am fetching the data from a database and then iterating over it to display. However, I am not able to display it in a single column like this. Any suggestions on how to handle this?
Code:
${menu.mainMenuName}"
You need to move your "th:each" statement to the div tag. It will be something like:
<div th:each="menu: ${mainMenu}" class="col-md-12">
<a class="text-info" th:value="${menu.id}" th:text="${menu.mainMenuName}" href=""></a>
</div>
Note that ${menu.mainMenuName}" is redundant with th:text="${menu.mainMenuName}
I found the solution for it. Problem with my previous approach was it was creating col-md-2 for every link hence it was getting displayed in single line to fix it below approach was followed:
<div class="col-md-2">
<div class="main-menu" th:each="menu: ${mainMenu}">
<a class="text-info" th:value="${menu.id}" th:text="${menu.mainMenuName}" href=""></a>
</div>
</div>
I am looking for a very general way to include bootstrap components in my blade view. For example let's say I need a drop down in my view, should I make a partial called dropdown.blade.php with code as follows:
<div class="dropdown">
<a href="#" class="dropdown-toggle" type="button" data-toggle="dropdown">
<span class="glyphicon glyphicon-chevron-down"></span></a>
<ul class="dropdown-menu">
#foreach ($options as $option)
<li>{{$option["name"]}}</li>
#endforeach
</ul>
</div>
and use it in my view in the following way:
#include('partials.dropdown',
array("options"=>array(
["href"=>"#", "name"=>"Profile"],
["href"=>"#", "name"=>"Report"],
)))
Even we can make it more generic by adding options for button name etc. Is it a good or preferable way to do it or should we use copy-paste method from bootstrap website to our views every time? Is there any package that is doing this sort of work? Can we make it in more elegant way?
This seems like a good idea if you are going to re-use the component a lot. I think the more elegant way to do it would be to create custom blade directives:
https://laravel.com/docs/master/blade#extending-blade
Then you could do, for instance:
#dropdown($options, 'btn-primary')
I would also provide an argument for a custom element ID or name, so you can reference it elsewhere on the page as needed.
This gets a little more complex with things like modals. I think you'd want to register multiple blade directives so you could do something like
#startmodal
#modaltitle('Title')
#startmodalbody
Some body content
#endmodalbody
#endmodal
I've been scratching my head like crazy over this all day, there seems to be a hundred different ways to get what I want done but I want it done a certain way - which I can't find.
Here's what I'm working on: http://schmidtbrotherscutlery.com/dev/mySchmidt/myCutlery/
My setup is one view with four different pages, each filtered by category. Default page above lists all three categories at once, and the Category sublinks in the menu take you to the three other view pages that are filtered by a single category. What I need is each of the category sublinks to load their respective view pages with AJAX instead of page by page refresh like it is now. I realize I can effectively achieve the same thing with an exposed filter on the categories but I want these specific menu sublinks to load the view pages, not filter one view on it's own with an exposed form. This really doesn't seem to be that difficult and I don't know why I haven't been able to figure it out yet but I don't have much experience with Drupal+AJAX integration. Help please!
From what I've read it sounds like you should be able to put each of the views within a jQuery tab container. So for example:
<div id="tabs">
<div class="tab">
<?php views_embed_view('viewname', 'block_1')?>
</div>
<div class="tab">
<?php views_embed_view('viewname', 'block_2')?>
</div>
<div class="tab">
<?php views_embed_view('viewname', 'block_3')?>
</div>
</div>
This would allow you to cycle through each content piece without refreshing the page.
I am a little new to this so apologies if I am a little vaugue but I will do my best.
I am attempting to create an iphone friendly version of a site using JQtouch. I understand that normally this would be done all in one HTML file with pages seperated by DIV's. However, I am wanting to load the content from exisitng pages of a website.
The next part to the problem is that my iphone.html page does not sit in the same directory as my current website, so the normal behaviour of JQtouch doesnt seem to work.
So far I have set up a page as follows:
<div id="home">
<div class="toolbar">
<h1>Title</h1></div>
<ul class="rounded">
<li class="arrow"> HOME</li>
<li class="arrow"> ABOUT US</li>
<li class="arrow"> GNWR</li>
<li class="arrow"> GNER</li>
<li class="arrow"> NEWS</li>
<li class="arrow"> FAQS</li>
<li class="arrow"> CONTACT</li>
</ul>
</div>
<div id="content"></div>
<div id="about"></div>
<div id="journal"></div>
<div id="faqs"></div>
<div id="contact"></div>
</body>
</html>
I then have :
<script>
$(document).ready(function(){
$('#content').load('http://www.mysite.co.uk' + ' #content');
$('#about').load('http://www.mysite.co.uk/about' + ' #content');
}
</script>
This loads the content I am after and the page animations work fine. The only problem is that a couple of links exist in the content I am loading and when clicked they obviously dont work.
Is there a way I can check the href of a link when clicked and if it points to www.mysite.co.uk/about change it to point to #about and force it to navigate there?
Hope this makes sense if you need more info let me know.
Regards
Chris.
You are asking quite a few questions inside a single question... You should really break them up into several questions. It's easier for people to answer. Anyways, I'll give it a shot.
First of all, you don't have to have all contents in one html; you can load contents via AJAX. See the AJAX > "GET Example" in this demo, as well as the page content loaded via AJAX.
As far as I know, the pages you want to load do not have to be in the same directory structure. The pages you want to load via AJAX need to contain a valid jQTouch page, i.e. the whole page is enclosed in a <div>.
Is there a way I can check the href of
a link when clicked and if it points
to www.mysite.co.uk/about change it to
point to #about and force it to
navigate there?
If I understand you correctly, you essentially want to replace all the links to www.mysite.co.uk/about with #about. This has to be done with jQuery:
$('a[href="http://www.mysite.co.uk/about"]').attr('href', '#about');
You may want to do that when each page loads:
$(document).ready(function(e){
$('body>div').bind('pageAnimationEnd', function(event, info){
$('a[href="http://www.mysite.co.uk/about"]').attr('href', '#about');
})
});