I have to create a website and on every page I have a top nav bar. Acctualy I have 10 sites and when I have to change the content of the NavBar, I have to change it in every single site.
What is here best practice?
I have tryed to create a js file with the NavBar inside (document.write"".....), but with this solution I have to convert the html code into JS code and this is not my favorite solution?
Is there an better way?
Thanks for answer.
I think you should create a navbar.html file, contain the code of your nav bar, then
<?php
include 'navbar.html';
?>
First you can use media in css ,
The #media rule is used in media queries to apply different styles for different media types/devices.
In my words, you can give different style based on screen's width.
The Second method is The Browser Object Model.
BOM, screen.width can return you the width of the current browswer's width.
Related
I want to replace a section of a html(php) for one of two php files based on the screen resolution. The only way i know to get screen resolution is by javascript, I've searched for ways to get javascript variables in a php script but I can't achieve what i want to do.(I need to change the section content dynamically, replacing one of the two php files any time screen resolution reaches a specific value).
You need to have both HTML code ready, and display the correct one based on the screen resolution. You can use CSS display property for it.
I am aware of the fact that layout and function of a site should be strictly separated. Layout should be done with CSS and functions of the site, like expand mobile menu on click, should be done with JS.
Reference:1. & 2.
What I often see happening for responsive layouts is having column classes for the various media queries, where just the class name is different, however the width values are identical.
This then leads to HTML in the form of
<div class="container small-query-columns-4 medium-query-columns-6 large-query-columns-12><p>Responsive paragraph..</p></div>.
Would it be acceptable to instead of always defining the same width for columns for various media queries to just make a minimal CSS grid, where the column classes widths are defined once and then dynamically pass those per media query with Enquire?
I know this ruins the above given separation from layout (CSS) and function (JS), though it would mean much cleaner HTML, and this per each media query plus much less CSS as well. Enquire also only calls once per media query so the hit on the amount to download would also be much less with a minimal CSS file. Yes, of course, this means the site is JS depended.
That's not bad idea but I think that it is not good idea too. I had thought about something similar few weeks ago. I wanted to make CSS which will be compiled in browser via JS in few loops and then appended to head section. But after deep thinking I decided to not doing that.
I know that you can make fallbacks and some fancy stuff so it works in every browser with or without js, but I have looked at my grid. It takes less than 10KB. It's interesting idea, but it isn't worh so much work as it will take. Keep your HTML organised and you won't run into issue with too many css classes. You have to let someone who use your "framework" do define widths at certain breakpoints. Easiest thing to do is just write a class name.
Consider that when you use for example bootstrap and want to have 12 columns on mobile, you just don't define it and it automatically falls into that width. Many times it just enough to define max 2 breakpoints with css classes.
When I think about enquirejs I think that it can be used for hiding sliders on mobile for example. When you just display: none it still running and changing classes. If you have something similiar what should be removed because mobile is not good environment for running something, you can disable it by using enquire. Another example is mansory grid, which you can start and disable via enquirejs.
Basically you can use it if you have something already js-depended and want to customize it on diffrent screens, or give diffrent behavior, because if you just set something on window load or document load, you have an issue with someone who resizes window. Here you can use it.
I have been using the Wicked PDF gem for generating pdfs. It has been working great.
However, I have run into a situation where a need to attach and have visible a large footer to the first page, but not the rest of the pages. To accomplish this I added a margin to the bottom of the body of the pdf as suggested in this post which gives the footer enough room to be visible.
This causes adverse side effects because it adds bottom margin to all of the pages not just this first page. I was hoping to only add margin to the first page and leave the rest of the pages unchanged.
I've tried to accomplish this with the use of javascript and css but have had no luck so far.
Thanks in advance
Checkout the documentation example for numbering pages https://github.com/mileszs/wicked_pdf#page-numbering
So it should be possible to have different footers using javascript
Check this solution
wicked_pdf: Is it possible to have the header only show on the first page & the footer only on the last?
Unfortunately the solution is not straight forward. You would have to strip the pdf out to individual pages create a pdf of each page then stitch the pdfs back together. See this explanation
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.
We're working on a web app that will deployed to mobile devices, iPad, iPhone, Android. Instead of trying to filter out user agents to display different views, I'd much rather just have my CSS change depending on the width of the screen (that's the only important thing here, really)
We've got something put together with jQuery, and I've changed the CSS for one part so that when the width shrinks, it doesn't take up too much vertical space (shown below)
How would I go about implementing something like that on buttons like this:
Ideally I should be able to change the CSS or something similar so the buttons are stacked up all in a row if width is narrow enough to knock even one button off. After that I can work on making the buttons look correct.
The simplest way to change CSS depending on the page width is to use Media Queries, which require no JavaScript.
Here's a great intro to Responsive Web Design from the guy who's considered the originator of the concept:
http://www.alistapart.com/articles/responsive-web-design/
If you want to actually change page content based on page width, you'll need something like RESS. Here's a simple script for that, but it requires cookies and doesn't adjust on screen resize, so unless you absolutely require it, media queries are a much better.