I attempt to add a background image and use cover to let the browsed resize the image. However the image is very small and doesn't cover the whole background.
I am new to angular so I have a very small idea about how this works.
Also, the search bar isn't in the middle despite using zurb to manage spacing for me.
Here is what the page looks like
Here is the code:
<div >
<!-- Above fold -->
<div class="row">
<div id = "backgroundImage" class="large-12 small-12 columns" ng-style="{'background-image':'url(img/mainBackground.png)','background-size' : 'cover'}">
<!-- search bar -->
<div class="row">
<!--empty -->
<div class="large-3 small-3 columns">
</div>
<div class="large-6 small-6 columns">
<input type="text" id="searchBar" ng-style="{'width': '50%'}">
</div>
<!--empty -->
<div class="large-3 small-3 columns">
</div>
</div>
</div>
</div>
</div>
Adding on to #Marko's response, you are using Angular to style an attribute, but the styles you are providing are just static. Angular's ng-style attribute is intended to be used when you have dynamic styles that you want to apply at runtime based on a given condition. You aren't doing that. You're simply providing static styles that you want to be applied, inline. That's not really considered a best practice. It would be better to just use a static css stylesheet to do what you want.
That being said, the issue you're facing is purely a CSS one, not an angular-specific one. You just need to debug your style on your #backgroundImage div and you'll eliminate a lot of the complexity involved in using ng-style.
Here's a good tutorial on using full-page css background images: http://css-tricks.com/perfect-full-page-background-image/
Related
I want to create a dygraph graph within the Bootstrap card body's second column (it just looks nice and clean). The div used by dygraph is graphdiv. I am using this.$refs.graphdiv to try to access it from within my vue script.
If I move the graphdiv <div> outside the card div then it works (see the comment). Why will the dygraph not work within the bootstrap card? Is it just one of those compatibility things one must log with the developer and wait for a fix?
<template>
<div>
<div class="card">
<div class="card-header">HEADER</div>
<div class="card-body">
<div class="row">
<div class="col-sm-3" style="width: 100%">
</div>
<div class="col-sm-9">
<div id="graphdiv" style="width: 100%" ref="graphdiv"></div>
</div>
</div>
</div>
</div>
</div>
<!--Comment: IF I PLACE IT HERE IT WORKS -->
</div>
</template>
Here is a reduced version of script:
<script>
import Dygraph from "dygraphs";
export default {
methods:{
plot_chart_series() {
//dataset = my data that I want to plot
const g = new Dygraph(this.$refs.graphdiv, dataset, {//options});
}
}
};
<script>
P.S.
My reason for using dygraph is I want to plot a dataset which is rather large (+-30000 datapoints), chart.js and Apexchart cannot manage that (I spent the better part of 3 hours trying to get them working). If there is no fix for my issue above, which other graphing libraries are there which are Vue friendly which can handle large datasets?
Workaround
I have managed to find a work-around and I can at least relatively narrow the problem and say that I do not think it is bootstrap.
<div class="card" ref="carder">
<div class="card-header">Graph</div>
<div class="card-body">
<div class="row">
<div class="col-sm-3">
<button>A_BUTTON</button>
</div>
<div class="col-sm-9">
<div ref="graphdiv" style="width: 100%"></div>
</div>
</div>
</div>
</div>
The above code snippet worked for me.
Changes to original:
I had an id="some_id" property in the containing parent div which I removed.
The entire card was wrapped in another div. This div had a ref="some_ref" property which I used from the Vue script to toggle the visibility. I did this with this.$refs.some_ref.style.display = "block"; & this.$refs.some_ref.style.display = "none";. I changed it to the following this.$refs.some_ref.style.visibility = "hidden"; and just changed the hidden to visible when I wanted to show the card. (It does not bother me that the hidden element still consumes space)
If I revert change number 2 above to the original then it fails to display. I still cannot explain it but it works.
I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.
Background/skill: I am starting to test out using bootstrap 4 (first time using bootstrap) for a custom Wordpress theme. I have the basic understanding of HTML and CSS, but with the newer CSS and with any jQuery or javascript, I am fairly clueless and usually just hacking code I find online to try and make it work for me, with little understanding of how/why it works if I succeed.
Missing out a bunch of page header info link links to scripts and stuff which I do understand may eventually affect any suggested method, and just to keep it simple. For now I have the following HTML so far:
<div id="page" class="site">
<div id="header" class="container-fluid">
<div id="masthead" class="site-header row row-eq-height">
<div id="logo" class="col-sm-4 col-md-6 col-lg-3"></div>
<!--logo-->
<div id="fruits" class="align-self-center d-none d-md-block col-md-3 col-lg-6"></div>
<!--fruits-->
<div id="social" class="d-none d-md-block col-md-3 col-lg-3"></div>
<!--social-->
</div>
<!-- #masthead -->
</div>
<!--header-->
<div id="jumbotron" class="row">
<div id="notice" class="align-self-center col-md-3"></div>
</div>
<!--jumbotron-->
<div id="content" class="site-content"></div>
<!-- #content -->
<div id="footer" class="container-fluid">
<footer id="colophon" class="row"></footer>
<!-- #colophon -->
</div>
<!--footer-->
</div>
<!-- #page -->
The jumbotron has a background image and a div (#notice) inside it which will float to the left with some text inside. I want the div to take up all remaining viewport space after the header. I have managed to get the jumbotron div be the height of the viewport minus the header using the following CSS:
height:calc(100vh - 155px);
But this only works if I know the height of the header is 155px. In reality, it changes at different screen widths and depending on content.
Is there a way to set the CSS to use a calculation for the dynamic header?
If not, do I need to use some kind of jquery or javascript? If so, I would be very grateful for some fairly detailed instructions.
Note: I do not want the #jumbotron to be the height of the page and sit behind the header div as a solution because the background image display is important.
Thank you in advance :)
Since you can't know easily the height of the header in every device because it is a percentage of the height... And because it depends on a big bunch of CSS rules form BootStrap and your Wordpress theme... You will just measure it to deduct the remaining space.
<script>
$(document).ready(function(){
function adjustJumbotronHeight(){
var headerHeight = $("#header").outerHeight();
var viewportHeight = $(window).innerHeight();
var remains = viewportHeight - headerHeight;
$("#jumbotron").css({"height":remains});
}
// On page load
adjustJumbotronHeight();
// On resize (or mobile orientation change)
$(window).on("resize",function(){
adjustJumbotronHeight();
});
});
</script>
I need to create templates in handlebars for an html page and the whole html should go inside of templates. For e.g. I have:
<div class= "something-pull-left-something">
<div class="someclass">
<li a href= ''>Some more info and some more divs and spans and html code</li>
</div>
</div>
and I should create a big template for the first div ''something-pull-left-something'' and smaller templates inside of it for the other items and I cant quite understand how this should happen.
Divide it up into parts as it makes sense. Try to avoid having one huge template. Instead, make one template that includes a number of other templates. You may run into performance issues but worry about that later -- it is likely not an issue.
Make main template which contains header, body and footer.
Add partials to the main template.
If you wants to use Bootstrap then you can go through this http://getbootstrap.com/components
or you can use bootstrap class
<div class="container">
<div class="col-md-12">
//code
</div>
<div class="col-md-12">
<div class="col-md-6">
//code
</div>
<div class="col-md-6">
//code
</div>
</div>
</div>
I am developing a website in Zurb Foundation 4 and SASS.
My code looks like:
<div class="row">
<div class="large-6 columns redbg"> content goes here... </div>
<div class="large-6 columns greenbg"></div>
</div>
Both of inner divs has background. I have a column gutter of 30px.I want this gutter to be white. The possible solution for it to add parent divs for both of inner divs and apply columns and large-6 class to it and this way code will look like:
<div class="row">
<div class="large-6 columns">
<div class="redbg"> content goes here... </div>
</div>
<div class="large-6 columns">
<div class="greenbg"> content goes here... </div>
</div>
</div>
But by applying this solution I have to create two divs for only the sake of design. Can anyone please guide how to do it or a better approach.
Also I wonder how to collapse a column from just one side (left or right)?
It would be much easier to use CSS - by using the background-clip property, which as its name suggests, allows you to clip the painting area of an elements background.
Since the gutter width in foundation is within the padding box, you can use the content-box value.
Here is a simple example: http://jsfiddle.net/CA669/950/embedded/result/
Can you make the row have a white background? That way the gutter will be white.
The other way I can think of is how you are currently doing it. I've had to do similar solutions.