I'm working on Angular 2 now. In my template I'm using the following to show the data I get from the APIs
<div class="blocks">
<div router-active class="block" *ngFor="let item of items">
<div class="inblock">
<p class="title">{{ item.name }}:</p>
</div>
</div>
</div>
Everything is working fine but if one of the div height was higher than the others it would look something like the image below
I want to have a nice row with three divs only and after three you start a new block, I know how to do it normally but I can't figure out how to do it with Angular 2!
UPDATE : I don't want a fixed height because the content can be as long as the user wants! so adding a fixed height with CSS will not solve the issue
You will find a solution using css. Take this code:
.block {
float: left;
width: 150px;
margin: 10px;
border: 3px solid #73AD21;
}
.block:nth-child(3n+4){
border: 1px solid red;
clear: both;
}
The above code is using float to make the blocks inline. Using nth-child you can tell it to clear each 3rd block.
Why don't you create a 'css' associated to your template and pass it to styleUrls property. In that CSS you can defile a class and set the div properties whatever you like and pass that class name to the elements.
Related
I am new to JavaScript. Currently, I am working on a small toggle for my website.
The goal is to have three buttons that open up different sections with information. I have this working on my website. Now, what I want to achieve is to make other divs close when the others are opened up. Furthermore, I would like the first div to be open when the page is loaded, including an indicator (for example orange image) on the button. Can you please help me with this?
For some reason, the script works on my website, but not on the JSfiddle:
https://jsfiddle.net/q7evaLsn/1/
Current code:
$('.button1').click(function(){
$('.product').slideToggle('slow');
});
$('.button2').click(function(){
$('.lockedin').slideToggle('slow');
});
$('.button3').click(function(){
$('.developers').slideToggle('slow');
});
.button2
{
padding-top: 10px;
}
.button3
{
padding-top: 15px;
}
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/product-holder.png" class="button1" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/lockedin-holder.png" class="button2" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/developers-holder.png" class="button3" alt="Expand"/>
</h3>
<div class="product">
Testdiv1
</div>
<div class="lockedin">
Testdiv2
</div>
<div class="developers">
Testdiv3
</div>
Your help is greatly appreciated!
You can simply slide up everything before you start toggling.
For ex
$('.button3').click(function(){
$('.product').slideUp();
$('.lockedin').slideUp();
$('.developers').slideToggle('slow');
});
Your JSfiddle isn't working because you haven't included the jQuery library required for some of your functions. For future reference, jQuery is a popular javascript library which simplifies and extends some basic javascript functions, you can use both interchangeably however if you do want the extra features of jQuery then you'll have to include it like so in your HTML:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
As mentioned by #SURESH you'll likely want to slide the other areas up where you are toggling the target area:
$('.example-button').click(function(){
$('.section-to-hide-1').slideUp();
$('.section-to-hide-2').slideUp();
$('.section-to-toggle-1').slideToggle();
});
Just as further formatting advice, you have your images (that are acting as buttons) within header tags.
It's generally bad practice to use these header tags for anything
other than headings/titles
I'd recommend using A tags or even BUTTON tags to do the same job
I'd try not to use IMG tags as essentially text buttons, you will be able to style a button similarly like so:
<button class="button1">Products</button>
<style>
.button1 { text-align: center; padding: 10px; text-transform: uppercase: border-radius: 100%; border: 3px solid orange; background: white; color: #000; }
</style>
This will allow search engines/screen readers to read your button element, and you can make hover effects etc.
I have been slowly pulling apart an HTML5 template and have copy pasted a parallax section below several times on the same page As I have copied this 3 times for the parallax effect I also have the same background image as defined in the main.css
/* ==========================================================================
Counter Section Style
========================================================================== */
.counters {
background: url(../img/bg1.jpg) fixed;
position: relative;
}
.counters .facts-item {
text-align: center;
color: #fff;
}
.counters .facts-item .icon {
margin-bottom: 20px;
}
.counters .facts-item .icon i {
font-size: 50px;
color: #fff;
}
.counters .facts-item .fact-count h3 {
font-size: 35px;
color: #fff;
margin-bottom: 15px;
}
.counters .facts-item .fact-count h4 {
font-size: 20px;
color: #fff;
<div class="counters section" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="item-boxes wow fadeInDown" data-wow-delay="0.2s">
<!-- <div class="icon">
<i class="lnr lnr-pencil"></i>
</div> -->
<a class="nav-link" href="#video-area">
<h4>SaaS Assurance</h4></a>
<p></p>
</div>
</div>
The problem I have is that even though I have copied them, I would still like them to be their own sections with different backgrounds and with my limited experience on Web Dev I am not sure how class .counters from CSS which is defining the image I want to change is being picked up by the code which says counter section
Thanks all
In CSS, Classes can be used more than once, so if you copy the parallax section three times, then there should be three parallax section with the same background as declared by .counters which is used by every of your parallax section.
To make sure that every of those 3 parallax section won't use the same background, try to use ID instead as ID's can be only used once and must have a unique name.
When an ID and classes is used together, the ID attributes should override any declarations made by any classes used in the element. In this case, you can give an ID that contain an individual background property for every of your parallax section ( something like #parallax-section1, 2, and more ), so .counters's background declaration will override.
Further reading :
CSS Selectors by MDN Web Docs.
Override Class Declarations by Styling ID Attributes by FreeCodeCamp.
Note: When copy pasting an HTML element, make sure you do select from the starting bracket till the closing ones.
thanks for all the responses. I found the issue that the class .counters was actually calling the image from class counters section from the code above, it must have just been ignoring the space and the section confused me :)
I have the following problem:
When the text I wrote is to long for the DIV, it breaks at unpleasant places, how do I set it at where to break?
Long text: Test: Hello My Name Is Tim4497
But it breaks after "Test:" so it looks like below:
Test:
Hello My Name Is Ti
Do you know how to make it look like:
Test: Hello My Name
is Tim4497.
after the line break, it has to line up after "Test:"
Also, if it breaks into multiple lines, the line spaces must be the same.
So far this is what I have but doesn't do what I wanted.
HTML-Code:
<div>
<span class="user_name" style="color:#FF7000">Test</span>
": "
<span class="user_message">Hello my name ist Tim and my english is terrible.</span>
</div>
How to solve this problem with JS or Html/CSS?
Thank you :),
tim4497
There are many ways to do it... Perhaps one of the cleanest would be through css table and table-cell. This will place your elements side-by-side perfectly.
Make your wrapper div a display: table and your spans display: table-cell. (don't forget to put your ":" inside a span too, for better visual)
<div class="wrapper">
<span class="user_name" style="color:#FF7000">Test</span>
<span>:</span>
<span class="user_message">Hello my name ist Tim and my english is terrible.</span>
</div>
CSS:
.wrapper {
display: table;
}
.wrapper span {
display: table-cell;
}
http://jsfiddle.net/jy7d431p/1/ - Resize the screen and see, or set a width to the last span...
You can use floated DIV's to achieve something like this effect:
<div style="width: 200px; background: blue;">
<div style="float:left; background: red;">Name:</div>
<div style="float:left; text-align: justify; background: green; width: 100px;">Some extremely long text would go in here that should wrap around several times and be flush with the first and last charcters.</div>
<div style="clear: both;"></div>
</div>
Floating can be a complicated topic if you don't know much about it, though. See All About Floats from css-tricks.com.
http://jsfiddle.net/eezpzj0L/
I have an application in which I am kind of stuck.
i have created a widget which needs to be placed in such a way that it needs to auto place itself.
Eg:
I have something like this on a page, now initially all these are arranged perfectly(horizontally aligned), but as soon as the size of one of the component changes
Eg:
It becomes like this. What I want is it auto adjust itself to consume the empty spaces.
I played around with the css to make it float :left and display: block, by which I am able to align each component horizontally, but still I am not able to utilize the space on my page.
Any help is appreciated
a CSS only solution:
taken you want to have 3 "connection" items per row this should be your CSS:
#wrapper{
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
.itm{
display:inline-block;
width:100%;
border-top:1px solid red;
border-bottom:1px solid red;
margin-bottom:1em;
}
.itm:nth-child(3n+1){
clear:left;
}
and this your HTML
<div id="wrapper">
<div class="itm">
<h1>connections a</h1>
<div class="info">
<span class="label">server</span>
<span class="value">100</span>
</div>
</div>
[... copy paste as many "itm"s as you need]
</div>
See here a fiddle with "add more items on click" to see the result -- old -- http://jsfiddle.net/5FsLm/ -- old --
UPDATED fiddle http://jsfiddle.net/c2nkn/
This is definitely a perfect case for jQuery Masonry. The plugin can automatically arrange columns so they can fit together. Something like this:
html
<div id="wrapper">
<div id="list">
<div class="item"> ... </div>
<div class="item"> ... </div>
<div class="item"> ... </div>
<!-- ... -->
</div>
</div>
jquery
$(window).load(function(){
$('#list').masonry({
itemSelector: '.item'
});
});
P.S.: At the moment, the official website is down for some reason, I will put a temporary link here.
UPDATE: Temporary link for jQuery Masonry (actually from cutestpaw.com which has a local copy of it, so if you want to test it, you should copy the file instead of linking to it)
If you dont want much animations and need a script that very easy to understand and satisfies your purpose try jquery.popbild.js.
You can download the project from :http://funscripts.popbild.com/jquery_popbild/
Its mainly created to arrange element in the pinterest style for three columns(uses three divisions)
If I'm understanding you correctly, it looks like what you really want is a three column structure for these widgets. In which case it would look something like this.
HTML
<div class='three-column'>
<div class="widget">...</div>
<div class="widget">...</div>
<div class="widget">...</div>
</div>
<div class='three-column'>
...
</div>
<div class='three-column'>
...
</div>
CSS
.three-column {
width: 30%;
padding-right: 3%;
float: left;
}
UPDATED: http://jsfiddle.net/cBgj4
Thanks to the generous help of someone at stackoverflow, I was able to put different colored CSS boxes over different images and remove the css boxes (revealing the images) whenever there was a mouseover. this is the code i used fiddle http://jsfiddle.net/alexdickson/fyYcC/
However, I also wanted the boxes to align horizontally in a float, so (being a beginner) I put another class (called float) around the images (in class rollover) but it deactivated the rollover.
Is there a better way to implement the float than I have done below?
Thanks for your help in advance
<div class="float">
<div class="rollover a">
<img src="http://blahblah.com/wp-content/uploads/2011/01/1.jpg" />
</div>
</div>
<div class="float">
<div class="rollover b">
<img src="http://blahblah.com/wp-content/uploads/2011/01/2.jpg" />
</div>
</div>
<div class="float">
<div class="rollover c">
<img src="http://blahblah.com/wp-content/uploads/2011/01/3.jpg" />
</div>
</div>
.float
{
float: left;
width: 200px;
border: 1px solid #fff;
margin: 0 15px 15px 0;
padding: 5px 10px 10px 10px;
}
You can add the float class directly to the class of the inner div.
Also, float generally isn't a very good class name. You should give it a semantically meaning name, and attach its presentation via the CSS. You are leaking CSS implementation details into the HTML.
jsFiddle.
I forked the jsfiddle you posted and was able to float them left with two rows of 3 images. You can just add more to each container for more horizontal images, and add more containers to add more rows. http://jsfiddle.net/robx/592ba/1/