I have an object that creates a slideshow:
Banner = SlideShowScroller.create({
height : 300,
auto : true,
navigation : {
color : "#000",
},
slides : [
{ image : "/images/1.jpg" },
{ image : "/images/2.jpg" },
]
});
How do I insert a new "slides" entry?
{ image : "/images/3.jpg" },
Is there a way to add an array to populate the slides?
It looks like the js Object you created has a field "slides" which is an array of js Objects
I would try this:
Banner.slides.push({ image : "/images/3.jpg" });
additionaly, you can use chrome element inspector (or firebug in firefox) with the break point to look at the structure of "Banner". Once you figured how to access the field "slides" I think you can just push your new image Object
Related
I am working on a SVG map of the US and I would like to display a small info window pointing to each state when you hover over it that shows the population, similar to the info windows on Google Maps. Unfortunately I'm not very good with JSON so I'm stuck at this point.
Currently I have the SVG map of the US up and the fill color changes on hover via CSS. I have a sample group of JSON data and wondering how I can incorporate it into my map so that it displays the population on hover.
Here's an example of the JSON data:
[
{
"id":"AL",
"population":"253045"
},
{
"id":"AR",
"population":"1529923"
},
{
"id":"AZ",
"population":"352416t"
}
]
There's quite a bit of HTML due to the SVG paths, so I won't paste that here, but you can see what I have so far on this JSFiddle
To get info about the hovered state, first put your info in an array, so it can be accessed:
var info = [
{
"id":"AL",
"population":"253045"
},
{
"id":"AR",
"population":"1529923"
},
{
"id":"AZ",
"population":"352416t"
}
]
Then you can get info from your array by filtering it by the id key using filter:
info.filter(function(state) {return state.id === currState});
Here is an example where you get the population of the hovered state:
$('path').hover(function() {
var currState = $(this).attr('id');
var currStateInfo = info.filter(function(x) {return x.id == currState});
if (currInfo[0])
console.log(currInfo[0].population);
});
Here is a working example: https://jsfiddle.net/4tasLo6k/
I'm currently running into a problem using the morris donut chart. In general, my project is required to be available on both touch devices as well as standard devices. We have set the donut chart up so that clicking on one section links you to another page which filters content based on which section you clicked. This one is working like a charm - but not on mobile devices.
As hovering brings up the description of the section (in our case a priority plus how many items with that specific priority exist) and hovering is not possible on touch devices, we can't display what's behind the section.
Thus: Is there any possibility to get the description that appears when hovering over an item into the specific item?
Thank you and kind regards
To clarify my issue I've created a professional illustration:
I have my HTML code:
<div id="morris-donut-chart"></div>
<div id="morris-label"></div>
And my Javascript code to initialize the donut chart:
$(function() {
// Donut Chart
Morris.Donut({
element : 'morris-donut-chart',
data : [{
label : "Niedrig",
value : 5
}, {
label : "Normal",
value : 1
}, {
label : "Hoch",
value : 5
}, {
label : "Kritisch",
value : 11
}],
resize : true,
colors : ['#fff', '#fff', '#fff', '#fff']
}).on('click', function(i, row){
window.location = "/";
});
});
and my functions to "outsource" the text:
function outsourceMorrisDonutChartLabel() {
//$("#morris-donut-chart tspan:first").css("display","none");
//$("#morris-donut-chart tspan:nth-child(1)").css("font-size","40px");
var lab = $("#morris-donut-chart tspan:first").html();
var val = $("#morris-donut-chart tspan:last").html();
$('#morris-label').text(lab + ": " + val);
}
$(document).ready(function()
{
outsourceMorrisDonutChartLabel();
});
$("#morris-donut-chart").mouseover(function() {
outsourceMorrisDonutChartLabel();
});
The main problem now is to get the outsourced text which currently is inserted into the div with the id "morris-label" into the morris sections as shown in the image
I have a problem.
I have a list of tweets to show in a page. For mobile devices I don't want to show the right vertical scrollbar.
I've build the page, with its slider and its tweets list. Then I put this page in a scroll container.
Then I return the scroll container.
The code is this:
sap.ui.jsview("ttest.initView", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* #memberOf ttest.initView
*/
getControllerName : function() {
return "ttest.initView";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* #memberOf ttest.initView
*/
createContent : function(oController) {
var oTweetList = new sap.m.List("items", {
threshold: 2,
inset : false,
showUnread : true,
scrollToLoad : true,
columns : [
new sap.m.Column({
styleClass : "data",
hAlign : "Left",
})
]
});
var oSlider = new sap.m.Slider({
id: "tweetSlider",
width: '100%',
min: 0,
change : function(oEvent){
//Update tweet list
var startIndex = 0;
var endIndex = this.getValue();
oController.updateTweetList("update", startIndex, endIndex);
}
});
var oPage = new sap.m.Page({
title: "Tweet list for #matteorenzi",
enableScrolling : false,
headerContent: [
new sap.m.Button({
icon: "sap-icon://refresh",
press : function(oEvent){
//Update tweet list with all tweets
oController.updateTweetList("first", "", "");
}
})
],
content: [
oSlider,
oTweetList
]
});
var oScroller = new sap.m.ScrollContainer({
vertical : true,
horizontal : false,
content : [
oPage
]
});
oEventBus.subscribe("it.besolution.PopulateList", "Go", function(chId, evId, data){
var template = new sap.m.ColumnListItem({
type : "Navigation",
cells : [
new it.besolution.Tweet({
user : "{user/name}",
username : "{user/screen_name}",
tweet : "{text}",
press : function(oEvent){
var path = this.getBindingContext().getPath();
sap.ui.getCore().byId("iduserDetails").setModel(oGlobalModel).bindElement(path);
app.to("iduserDetails");
}
})
]
});
oSlider.setMax(oGlobalModel.getProperty("/size") - 1);
oTweetList.setModel(oGlobalModel);
oTweetList.bindAggregation("items", "/tweets/", template);
});
return oScroller;
}
});
The page didn't load. I don't know how to do. Why the list is invisible?
Obviously, if I remove the scroll container and I return the oPage element, the list is visible.
Why? How I have to write my code to show the list without the scrollbar?
If you don't want to show the right vertical scrollbar. There is a property called enableScrolling.And you really want to use ScrollContainer, put it as Page content, not the other way around.
enableScrolling default: true
Whether the Page takes special measures to make page content scrollable and keep headers fixed. If set to false, there will be no scrolling at all; for performance reasons this is highly recommended when scrolling is not needed. The Page only allows vertical scrolling because horizontal scrolling is discouraged in general for full-page content. If it still needs to be achieved, disable the Page scrolling and use a ScrollContainer as full-page content of the Page. This allows you to freely configure scrolling. It can also be used to create horizontally-scrolling sub-areas of (vertically-scrolling) Pages.
I had used Youtube Popup player for video player in my webapplication, iam trying to change the styles of popup window..but iam not able to do it..i had found cssClass property for applying styles.. here is the link for youtube popup player..http://lab.abhinayrathore.com/jquery_youtube/
How can i resolve it..
You can follow Arunkumar answer if you want to change the defaults of the plugin, so that you don't have to set the options everytime you want to initialize the plugin.
Or, you can set specific properties to each element with the plugin assigned, like this:
$(function () {
var options = {
fullscreen : 0,
color : 'red',
width : 500,
height : 300,
overlayOpacity : 0.9
};
$("a.youtube").YouTubePopup(options);
});
DEMO
Or, instead of creating a variable options, you could just do something like this:
$(function () {
$("a.youtube").YouTubePopup({
fullscreen : 0,
color : 'red',
width : 500,
height : 300,
overlayOpacity : 0.9
};);
});
Hope I could make it more understandable to you!
customize Popup using script
like
$(function () {
$.fn.YouTubePopup.defaults.fullscreen = 0;
$.fn.YouTubePopup.defaults.color1 = 'CCCCCC';
$.fn.YouTubePopup.defaults.width='500';
$.fn.YouTubePopup.defaults.height='300';
$.fn.YouTubePopup.defaults.overlayOpacity='0.5';
});
You can able to change popup defaults above way.
Hope it helps:);
I am trying to create a simple effect for my application which is to Fade it in from white over a period of 1-2 seconds so that the user doesn't have to see it being assembled.
I almost have it working, but there is some flickering that I can't seem to get rid of. Basically ExtJS is rendering my UI and then immediately hiding it so it can be faded in.
Here's my app:
Ext.application({
name : 'MyApp', // Application level namespace
appFolder : 'js/myapp', // Directory path to app
autoCreateViewport : true,
launch : function() {
// fade in the viewport
var form = Ext.ComponentQuery.query("viewport")[0];
form.getEl().fadeIn({
from : {
opacity : 0
},
duration : 1000
});
}
});
What can I do to get rid of the initial draw before the FadeIn?
Took a wild guess that I could set the opacity of the viewport to 0 by default and it worked:
Ext.define('MyApp.view.Viewport', {
extend : 'Ext.container.Viewport',
style: 'opacity: 0;',
items : [ {
xtype : 'someview'
} ]
});