This question already has answers here:
Add a pipe separator after items in an unordered list unless that item is the last on a line
(11 answers)
Closed 9 years ago.
I want to create list of inline items, separated by bullets, but I want to hide all bullets on the end of line. Example:
France • Germany • Greece
Hungary • Iceland • Ireland
(As you can see, there's no bullet between Greece and Hungary).
Now, the problem is, I need this to work in any viewport width. The text should wrap naturally and bullets should appear only when they are not at the line break.
This is somehow similar to soft hyphen () behaviour.
Is there any method to achieve this? Maybe some kind of unicode control character..?
Thanks!
You Just need to write simple css code:
.someclass{
list-style:none;
}
add class in your
<ui>
<li class="someclass">
</li>
</ul>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Display Progress</title>
<script src="Scripts/jquery-1.3.2.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var geoList = [
{ Country: "India", State: "Delhi" },
{ Country: "US", State: "Alabama" },
{ Country: "US", State: "Georgia" },
{ Country: "US", State: "Texas" },
{ Country: "US", State: "NewYork" }
];
$('#LoadPage').append("<ul id='cList'></ul>");
for (i = 0; i < geoList.length; i++) {
$("#cList").append("<li>" +
geoList[i].Country + "-" +
geoList[i].State + "</li>");
}
});
</script>
</head>
<body>
<form id="form1">
<div>
<div id="LoadPage">
</div>
</div>
</form>
</body>
</html>
Related
Giving the example of svelte js tutorial about each blocks https://svelte.dev/tutorial/each-blocks how could I left align the first cat, right align the second one, left align the third one and so on if I had more elements.
Since you have the index available inside the each loop, you can set a class using the class:directive based on the condition if the index is dividable by 2 or not (in your case not, since you described to align the uneven indexes to the right) >> REPL
<script>
let cats = [
{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
{ id: 'z_AbfPXTKms', name: 'Maru' },
{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
];
</script>
<h1>The Famous Cats of YouTube</h1>
<ul>
{#each cats as { id, name }, i}
<li class:align-right="{i%2 !== 0}">
<a target="_blank" href="https://www.youtube.com/watch?v={id}">
{i + 1}: {name}
</a>
</li>
{/each}
</ul>
<style>
.align-right {
text-align: right;
}
</style>
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.
I am using the below code to get the city suggestion but it's giving me the city + state + country, but I need only city name
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
var autocomplete;
function initialize() {
autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), { types: ['(cities)'], componentRestrictions : { country: 'in' }});
}
</script>
</head>
<body onload="initialize()">
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
</div>
</body>
</html>
Any suggestion?
You can't remove these informations, however, you can mask them using CSS.
Please refer to this link.
To quote the official documentation, here are the classes used by the components of the Autocomplete.
So I suggest you to use CSS to hide the part(s) you don't want to display.
In your case, you can use :
.pac-item-query + span
{
display: none
}
This will hide the next adjacent <span> to the <span> whose class is pac-item-query (which contains the suggested name of the city only), and so, only let the city displayed.
Thus, the state / country is masked, as you required.
Be careful, the + pseudo-selector is not supported by all browsers, including IE6. Please check your browser requirements before using it.
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>
I'm trying to allow personalized style setting to be persisted inside a meteor app. For sake of argument, lets say I'm keeping the values in an array of objects, each object containing a "name' and "value" attribute. When I try to render these objects inside a <style> block, Meteor instead renders a comment.
The following it my simplest Proof of Concept:
poc.html:
<head>
<title>poc</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
Styles don't render here:
<style>
body {background-color: #999;}
{{#each styles}}
.{{name}} { {{value}} }
{{/each}}
</style>
Styles render here:
<ul>
{{#each styles}}
<li class="{{name}}">{{name}} : {{value}}</li>
{{/each}}
</ul>
And here:
<div>
{{#each styles}}
.{{name}} { {{value}} } <br/>
{{/each}}
</div>
poc.js:
if (Meteor.isClient) {
Template.hello.styles= function() {
var resultArray=[];
resultArray.push( { name: 'style1', value:'color: #000'})
resultArray.push( { name: 'style2', value:'color: #fff'})
return resultArray;
}
}
The output in the style block contains:
<!--data:DuvxkGSiN6BK3M95T--><!--data:GvvkPYg2Adii4NNre-->
instead of the expected:
style1: { color: #000}
style2: { color: #fff}
Not sure if this is by design or a bug or an error in my understanding. Thanks in advance.
Meteor does some special things with markup that might be interfering with rendering inside the style tag.
There are two solutions-
if you just need to add static styles, add the following helper and render it with three braces {{{styleBlock styles}}} as a separate element:
Template.hello.styleBlock = function(styles){
content = "<style>";
_.each(styles, function(style){
content += '.' + style.name + '{' + style.value + '}';
});
content += "</style>";
return content;
};
Or if you need to dynamically add styles, you can set up an observe that finds the style sheet and calls 'insertRule'
var styleSheet = _.find(document.styleSheets,
function(sheet){return sheet.ownerNode.getAttribute("id") == 'dynamic-styles';}
);
styleSheet.insertRule('.style1{color: #000}', 0);