I am fairly new to programming. I am trying to edit the position of the TradingView widget. It is automatically centered on the screen and I would like it to be on the left. How can I do this via CSS?As you can see from my image attached, I would like the widget to be at the start of the black line at the top
There is no need to do it with CSS, it is a very simple solution that can be done inside the tag of the widget.
I assume this is the widget you are referring to from Tradingview.com:
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_d85a3"></div>
<div class="tradingview-widget-copyright"><span class="blue-text">AAPL Chart</span> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "dark",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_d85a3"
}
);
</script>
</div>
<!-- TradingView Widget END -->
In that case, you are going to want to add align="left" in the div of the widget, so you end up with <div class="tradingview-widget-container" align="left"> at the beginning of the widget.
Related
I want to use the image title (meta data value from below screenshot) to auto display as each images caption underneath each image. Also for Accessibility purposes auto assign this meta value as the 'alt=""' value by default?
Current template code:
<link rel="stylesheet" href="#App.Path/dist/lib/blueimp/css/blueimp-gallery.min.css" data-enableoptimizations="true" />
<script type="text/javascript" src="#App.Path/dist/lib/blueimp/js/blueimp-gallery.min.js" data-enableoptimizations="bottom"></script>
<link rel="stylesheet" href="#App.Path/dist/app/view.css" data-enableoptimizations="true" />
#if(#Dnn.User.IsSuperUser)
{
#Content.Toolbar
} else {
#Edit.Toolbar(Content, actions: "edit,add")
}
<div id="blueimp-gallery-items-#Dnn.Module.ModuleID" style="display:none;">
#foreach (var pic in AsAdam(Content, "Images").Files)
{
<a href="#pic.Url?w=#App.Settings.CarouselImageWidth&h=#App.Settings.CarouselImageHeight&mode=crop" title="#(((dynamic)pic.Metadata).Title)" data-gallery="#blueimp-gallery-#Dnn.Module.ModuleID">
#(((dynamic)pic.Metadata).Title)
</a>
}
</div>
#* this is the rotator element *#
<div id='blueimp-gallery-#Dnn.Module.ModuleID' class='blueimp-gallery blueimp-gallery-carousel' data-carousel='true' data-start-slideshow="true">
<div class='slides'></div>
<h3 class='title'></h3>
<a class='prev'>‹</a>
<a class='next'>›</a>
<a class='play-pause'></a>
<ol class='indicator'></ol>
</div>
<script type="text/javascript">
$(document).ready(function () {
// initialize the carousel gallery
blueimp.Gallery($('[data-gallery="#blueimp-gallery-#Dnn.Module.ModuleID"]').get(), {
container: '#blueimp-gallery-#Dnn.Module.ModuleID',
carousel: true
}
);
});
</script>
Also note that when I click on meta data tag, the following error message pop up appears:
Note: Version: 9.2.0
UPDATE:
Changing "Image Metadata" to "ImageMetadata" worked thx.
Still having trouble adding alt tag to each image. title shows but when I set alt to same it doesn't?
<div id="blueimp-gallery-items-#Dnn.Module.ModuleID" style="display:none;">
#foreach (var pic in AsAdam(Content, "Images").Files)
{
<a href="#pic.Url?w=#App.Settings.CarouselImageWidth&h=#App.Settings.CarouselImageHeight&mode=crop" title="#(((dynamic)pic.Metadata).Title)" alt="#(((dynamic)pic.Metadata).Title)" data-gallery="#blueimp-gallery-#Dnn.Module.ModuleID">
#(((dynamic)pic.Metadata).Title)
</a>
}
</div>
So you're asking a few things at the same time.
number 1: to use the title you want to check if the image has metadata, and if yes, use that. This code should help (pic is the image-variable in your loop) :
#(pic => !pic.HasMetadata ? "" : ((dynamic)pic.Metadata).Title)
number 2 seems to be an issue in the configuration. as far as I can see, the metadata-button in the default toolbar works. I checked the internal and the field-configuration is wrong - you should change it from "Image Metadata" to "ImageMetadata"
I am trying to use owl-carousel with Telescope but i am not able to make it to work. I have no dynamic data at this point. Below are the steps I followed.
Create a Telescope package.
Added Theme Zeiss.
Add the owl-carousel package
Then on the user Profile, where the telescope app shows the list of Posts the user has liked in a tabular format, i want to display it as a carousel with the images. (Please note this is the end goal, for now i am just trying to get the basic owl-carousel functionality work)
Below are the steps i took.
On the User_profile template i added a new template carousel
<template name="carousel">
<div class="user-profile-votes grid grid-module">
<div id="owl-carousel">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
<div class="item"><h1>13</h1></div>
<div class="item"><h1>14</h1></div>
<div class="item"><h1>15</h1></div>
<div class="item"><h1>16</h1></div>
</div>
</div>
<div class="customNavigation">
<a class="btn prev">Previous</a>
<a class="btn next">Next</a>
</div>
</template>
After that is done, i added the js file supporting the template as below.
Template.carousel.rendered = function() {
Meteor.setTimeout(function() {
var owl = $('#owl-carousel');
owl.owlCarousel({
navigation : true,
loop: true,
autoplay: 1000,
items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0
itemsMobile : false, // itemsMobile disabled - inherit from itemsTablet option
mouseDrag: true,
touchDrag: true,
afterInit : function(elem){
var that = this
that.owlControls.prependTo(elem)
}
});
}, 0)
}
With this the carousel works, shows me 10 different elements, as you can see in the below video. Even the Autoplay works, the however the buttons or dots don't. I tried zillions of things and referred many articles changed timeout, added autorun, etc. However, this is a static list.
Not sure why it's not working, any help will be great.
https://youtu.be/Ljoxw561Eic
This owl-carousel package is using Owl Carousel 2
The link in the atmospherejs.com is wrong , that is old version. The Options & Events are different from this version.
I have an array with a bunch of data that I need to bind to different parts of a custom element that I created. Here's the relevant bit of that element:
<div class="soundcard-container" vertical layout>
<content select="img"></content>
<paper-ripple fit></paper-ripple>
<div class="soundcard-bottom-container" horizontal layout center justified>
<content class="soundcard-string" select="span"></content>
<a class="soundcard-download-icon" href="#"></a>
</div>
</div>
And in my index.html file I attempt to repeat it like so:
<div class="card-container" layout horizontal wrap>
<template repeat="{{s in carddata}}">
<sound-card>
<img src="{{s.imgurl}}">
<span>{{s.quote}}</span>
</sound-card>
</template>
My array is rather large, but here's the condensed version (its in my index.html file):
<script>
Polymer({
ready: function() {
this.carddata = [
{imgurl: '../www/img/soundcard-imgs/img1.jpg', quote: 'String one', sound: '../www/card-sounds/sound1.m4a'},
{imgurl: '../www/img/soundcard-imgs/img2.jpg', quote: 'String two', sound: '../www/card-sounds/sound2.m4a'}
];
}
});
</script>
Am I getting something fundamentally wrong? I thought that {{s in carddata}} would repeat the <sound-card> custom element for however many items were in the carddata array? I used the beginner example on the Polymer site but when I run it on my http server the template is never moving away from display: none. Any ideas? Or examples, or anything! Thanks!
That only works in a Polymer element. So you need to create a Polymer element (e.g. sound-card-collection) and move the code from index.html to that element:
elements/sound-card-collection.html
<polymer-element name="sound-card-collection">
<template>
<div class="card-container" layout horizontal wrap>
<template repeat="{{s in carddata}}">
<sound-card>
<img src="{{s.imgurl}}">
<span>{{s.quote}}</span>
</sound-card>
</template>
</template>
<script>
Polymer({
ready: function() {
this.carddata = [
{imgurl: '../www/img/soundcard-imgs/img1.jpg', quote: 'String one', sound: '../www/card-sounds/sound1.m4a'},
{imgurl: '../www/img/soundcard-imgs/img2.jpg', quote: 'String two', sound: '../www/card-sounds/sound2.m4a'}
];
}
});
</script>
</polmer-element>
index.html:
In the head:
<link rel="import" href="elements/sound-card-collection.html">
Somewhere in the body:
<sound-card-collection></sound-card-collection>
Hello MarionetteJS Gurus,
I have what is probably a very simple problem, but I can't wrap my head around how to solve it. I have an application with 2 regions and 1 layout, and I'm utilizing the Ratchet CSS library for prototyping. Functionally, the goal is simple: display a list of contacts in one view, with a header and search bar. If the user selects a contact, remove the search bar and retain only the header.
The problem appears to be the wrapping divs that are required to swap views in and out. The Ratchet CSS needs the header bars to be directly above the content section in order to properly dock them at the top of the viewport, but Marionette's regions and layouts (at least with my configuration) are preventing this from happening. Perhaps I could better structure my views?
JSFiddle of the resulting output: http://jsfiddle.net/VB7py/3/ You'll notice that the header/search area overlaps the content area.
menuRegion contains a footer menu, and mainRegion contains a layout consisting of a header region, a search region, and a "main content" region. Below are some snippets of my code:
Regions
var App = new Marionette.Application();
App.addRegions({
headerRegion: "#header-region",
menuRegion: "#menu-region",
mainRegion: {
selector: "#main-region",
regionType: MainRegion
}
});
Layouts/Views
List.Layout = Marionette.Layout.extend({
template: "#contacts-layout",
regions: {
headerRegion: "#header-region",
searchRegion: "#secondary-header-region",
contactsRegion: "#contacts-region"
}
});
List.Search = Marionette.ItemView.extend({
tagName: "div",
template: "#contact-list-search",
className: "bar bar-standard bar-header-secondary"
});
List.Header = Marionette.ItemView.extend({
template: "#contact-list-header"
});
Templates
<!-- Application Layout -->
<script type="text/template" id="contacts-layout">
<div id="header-region" class="bar bar-standard"></div>
<div id="secondary-header-region">
</div>
<div id="contacts-region" class="content"></div>
</script>
<script type="text/template" id="contact-list-header">
<nav class="bar bar-standard"><h1 class="title">Contacts</h1></na>
</script>
<script type="text/template" id="contact-list-search">
<input type="search" placeholder="Search" />
</script>
<script type="text/template" id="menu-template">
<nav class="bar bar-tab bar-footer">
</nav>
</script>
The wrapping divs inside the regions did not seem to be a problem. However, you need to set those bar specific css classes to the regions instead of it's nested elements. Like:
<div id="header-region" class="bar bar-standard">
<div>
<nav>
<h1 class="title">All Contacts</h1>
</nav>
</div>
</div>
<div id="secondary-header-region" class="bar bar-header-secondary">
<div>
<input type="search" placeholder="Search">
</div>
</div>
See: http://jsfiddle.net/Cardiff/7Wd6W/
You could pre-set those classes on your region elements or add these specific classes on region initialization, see: https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.region.md#instantiate-your-own-region
I have a standalone html page that contains a dojo DataGrid that works just fine. I am including the relevant code below.
<script type="text/javascript">
var readStore, grid;
var gridLayout = [
new dojox.grid.cells.RowIndex({ name: "Row #", width: 5, styles: "text-align: left;" }),
{
name: "Name",
field: "name",
styles: "text-align:right;",
width:30
},
{
name: "Type",
field: "type",
width:20
}
];
function initGrid()
{
readStore=new dojox.data.QueryReadStore({url:"/EG3/orgUnit/getChildren", requestMethod:"get"});
console.info("readStore initialized");
grid=new dojox.grid.DataGrid({store:readStore,
id:"grid",
delayScroll:true,
structure:gridLayout,
query:{id:2},
loadingMessage:"Loading..."
}, document.createElement('div'));
dojo.byId("gridContainer").appendChild(grid.domNode);
grid.startup();
}
dojo.addOnLoad(initGrid);
</script>
</HEAD>
<BODY class="claro">
<div id="list" class="list">
Table goes here
<div id="gridContainer">
</div>
</div>
Now, the problem happens when I try to include this page as a contentpane within a TabContainer. The TabContainer loads the page markup as is and does not fire the onLoad script of the page that contains the grid.
<div dojoType="dijit.layout.TabContainer" region="center" tabStrip="true" id="orgUnitTabs">
<div dojoType="dojox.layout.ContentPane" title="Info" selected="true" id="orgInfo" jsId="orgInfo">
</div>
<div dojoType="dojox.layout.ContentPane" href="/EG3/app/orgUnit/orgUnitChildren.gsp" executeScripts="true" parseOnLoad="true" extractContent="true" title="Children" id="children" jsId="children">
Children of the selected Org
<script type="javascript" event="onLoad">
initGrid();
</script>
</div>
Any ideas on how the onLoad script of the child page can be fired?
Thanks in advance.
you should check if the param executeScripts set to TRUE, and if you wanna use declarative method, you have to parse the domNode manually, see the detailed dojo.parse method:http://docs.dojocampus.org/dojo/parser
Not sure what the right answer is, but if I were you, I would try doing it all programatically instead of declaratively, trap errors, use console outputs to see what's happening and log events as it loads.