Make Element Full Height of Page on Bubble.is - javascript

How can I make an element the full height of a page on the website editor of bubble.is. So, when opening the page on differently sized computer screens, my element would always cover the full height of the page. An example of this effect is https://kickpoint.ca/contact/
I’m thinking I may need to use html or JavaScript to do it, but I’m not sure how and if there’s a simpler solution.
Thank you

What you actually want for this is css. I would read through a quick tutorial. I am not familar with Bubble.is, however css is for styling webpages. After a simple tutorial you will know exactly how to do what you are trying to do. It would be something like #element-id{ height: 100%}. or on the html element:

Related

How To Have A Section Fill The Entire Screen?

I was wondering how I can have different sections of a website fill the entire window.
For instance on this website by Viraj Bindra.
In his experience sections, they take up the whole window. I do not know what to call it, is there a word for it? I was also wondering how he has an assist pull so it can perfectly fill the window?
I am sorry if this question is ambiguous. If you go to his website I think it will make more sense.
I'm not seeing the behavior that you're referring to, but I would not use JavaScript, as CSS can do this with better performance. Plus, it's always a good idea to keep styling with styling whenever possible. Anyway, a simple solution would be to set the container element to full-height using vh units. Like so:
.fullheight-container {
height: 100vh;
}
Easy as that, without any complications / after-load jumpiness from JavaScript.

How to make responsive web page render faster?

Right now, every time I try to render a page, I will calculate the $(window).width() first and then add a corresponding class for the root html element, which will final determine the block width of some main responsive elements in the page. But this approach goes with a problem. It will first render the page with a initial default width, and then after the class is added, it will adjust the element width, which will create a non-smooth visual effect.
To overcome this, I then make all the responsive elements display: none in the first place and make them visible after the width calculation is done. But for a user, it takes more time to see the page in this way.
So I was wondering if there is a way to achieve this responsive page in a more efficient and faster way?
If you are using javascript to create a responsive site, there are much easier ways.
For example, there are TONS of free CSS based frameworks you can utilize to make responsive pages that the CSS controls, which doesn't eat up nearly as many resources as a javascript solution. Lots of DOM manipulation with javascript can get pretty hairy pretty quickly.
My suggestion would be to look into some of the following:
Foundation: http://foundation.zurb.com/index.html
Skeleton: http://www.getskeleton.com/
I personally use foundation for my development, as its easy to read/understand and it produces rapid development.
Example: http://www.sinsysonline.com/secondhomehostel
If you are ABSOLUTELY dead set on having Javascript handle your DOM rendering, it's going to be much slower than a CSS responsive site.
If so, try out:
Response JS: http://responsejs.com/
If you would like further clarification for a specific problem, could you please provide your code and I'm more than happy to provide some feedback on that.
CSS media queries allow you to apply CSS based on screen size. The advantages of this over your approach are:
1) The CSS will read the window size immediately
2) The page will automatically adjust if the user resizes the window (or rotates their tablet)
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You need to use css3 media queries which is very useful to create responsive website. You need to write css according to viewport width. Please refer the link from which you will get all the idea about responsive website.
I hope this will help yo to work on the responsive websites.

Using jQuery to position a div relative to another div's bottom border

I have some HTML that is output via a CMS that I'm unable to modify. The order of this HTML is wrong, in that DIV-Bottom appears before DIV-Top in the HTML.
If DIV-Top was always going to be the same height, I could easily position:absolute DIV-Bottom to appear below DIV-Top. However, DIV-Top differs in height depending on what elements are loaded inside on page load. As a result, I'm trying to find a way using jQuery to look at the bottom border of DIV-Top after page load, and then position DIV-Bottom directly below this.
I believe this can be done with .offset() or something similar, but my jQuery knowledge and syntax knowledge is very limited so I'm struggling to make this work.
Any help would be much appreciated!
Thanks!
Jamie

How to scale text in html?

Hello I was wondering how to scale text with html. My text looks very large when I make the page smaller. Is there a script or a command that will scale the text down along with the page size?
Well you can use css to change the font-size, if that is what you are referring to.
Your question has me a little confused, but it may just be the way you are phrasing it.
Are you saying that you want the browser to "resize" text, headers, and other content depending on the browser size?
If so, what you are referring to is called responsive design.
Here is a DEMO of a site using this responsive design. (Make the screen bigger/smaller, and let me know if this is what you were trying to achieve)
http://webdesignerwall.com/demo/adaptive-design/final.html
Here is the tutorial behind this demo:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Page displaying sections using opacity, following #section and then do Javascript ScrollTo(0,0)

Here is my app - http://www.shalgreetings.com/ I am trying to override the scroll bar going down to a imagesection in CSS, so that whole app is visible with logo, header and other controls all the times when people navigate through different #sections. I am not sure where in the CSS, I am making the mistake as clicking on #sections traverses the page. Here is this app's original inspiration code, which has got this right.
Anyone can point me where the problem seems to be in the above app?
Edit - It was not a problem with CSS. Perhaps I am looking for a Javascript solution that would follow the link, but still ScrollTo(0,0).
There is no mistake in your CSS, the inspiration code "cheated" in a way: he used just a few photos so the viewport would never be too short to display everything. In the example you can make your window height short and it will exhibit the same problem.
You probably already know that you can solve this problem with a bit of javascript (onclick="return false;"). I'm afraid there is no pure CSS way from preventing this from happening.

Categories