For clear view i have drawn three diferent images showing my status of divs in desktop, in mobile view and what i'm trying to get in mobile view.
1. This is current status of divs in desktop view.
HTML
<div id="wrapper">
<div id="left-nav">recent posts</div>
<div id="main">articles listing</div>
</div>
2. What i get after media query for mobile device making both divs full width.
3. And this is what i'm trying to get
Solution i come up with are placing divs changing position in html with floating property like below.
<div id="wrapper">
<div id="main" style="float:right;">articles listing</div>
<div id="left-nav" style="float:left;">recent posts</div>
</div>
And this works, on mobile view after clearing floats. But this is in some CMS so i wish to get it with css if possible other way around.
Problem : as i make both div of full width (in mobile with media queries) then, the recent articles div appears first and then article listing but how can i get Articles listing first then after recent posts ?
You have some options depends on what browser do your client want to use:
For older browsers, according to this answer you can use table layout to reorder your divs:
#wrapper { display: table; }
#firstDiv { display: table-footer-group; }
#secondDiv { display: table-header-group; }
For newer browsers you can use FlexBox to specify order
#wrapper { display: flex; }
#firstDiv { order: 1; }
#secondDiv { order: 2; }
Related
I know this has been asked multiple times before but none of those solutions have worked and hopefully since then someone has figured it out.
I have created a HTML page that i will be printing using Chromes browser print utility, i need to add an image at the bottom of the last page, the problem is that the content within the page is dynamic, so most methods i have looked at just place the image where the content ends, and not at the bottom of the last page.
<head>
<title></title>
<style>
#footer:before {
display: block;
content: "";
margin-top: 100%;
}
</style>
</head>
<body>
<div id="content">
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
</div>
<div id="footer">
<img src="https://get.clt.re/wp-content/uploads/2014/12/footer-background-01.jpg" style="">
</div>
</body>
This is a very simplified example, the content will be dynamic so there could be multiple pages, and the image in the footer will be large,
essentially i need the footer to look like this:
https://i.stack.imgur.com/Wh9s0.png
but only on the last printed page
any javascript or jquery solution is welcome
You could essentialy generate two footers, one for your page content and one for printing. Use CSS then for displaying:
#media print {
.content-footer {
display: none;
}
.print-footer {
display: block;
//Always at the bottom
position: absolute;
bottom: 0;
}
}
I don't think there is an answer here. If you want to place that image on each page then Idan Cohen has a good solution here: https://medium.com/#Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a
As to just the last page ... not even the CSS 2 Spec. for Paged Media supports a :last page selector (but does for :first). But even #page is unreliable as most browsers have scaled down support for things like page counters etc. (See #Page Browser Compatibility)
Your best bet is to explore either a compromise (either the image on each page, or the image at the end of the content - but not necessarily at the bottom of the page) or explore the possibility of getting the job done via a JavaScript library that generates PDF on the fly.
My website is www.to-hawaii.com
When you see the site on mobile the left panel with the ads shifts all the way to the bottom of the site.
On each page the left panel is generated by an include file and when the site is viewed on mobile it shifts under the content. The structure of the site is:
<div class="contentarea">
<div class="rightpanel"></div> / Even though it is called Right Panel this is actually the left panel
<div class="midpanel"></div>
<div class="leftpanel"></div> / Which is actually the right panel
</div>
Is it technically possible, without changing the whole structure of the site, to do the following change on mobile - to be included at a specified location on the page, for example under the photo gallery instead of this panel to show on the bottom of the page?
Base on your structure, i think that wouldn't do. To achieve what you want, make a Copy of the div you only want to show on mobile then hide the main div which is for non-mobile through CCS3 #media rule.
Example you want to add the mobile version of rightpanel below the gallery
<div class="gallery-container"></div>
<div class="rightpanel_mobile"></div>
Then manipulate the css...
<style type="text/css">
#media (max-width: 768px) {
.rightpanel { //Main
display: none;
}
.rightpanel_mobile { //Mobile
display: block;
}
}
</style>
I have a page which is created dynamically with the user interaction, with many DIVs with variable sizes and other nested components. Some of them are displayed side by side, some will display on the next line. Once I call window.print(), they are reorganized by each browser, with the help of
#media print { .myDiv { page-break-inside: avoid; } }
I want to add a header with image on top of each print page, but using position: fixed won't work on Chrome or Safari (as of 03-31-2016). I don't want to calculate page size or components heights, since the user can always change the margins.
Considering I can dynamically add another <div class="print-header"> before each <div class="myDiv">, I would want something like this:
#media print {
.print-header { display: none; }
.print-header:first-of-the-page { display: block; } /*pseudo css*/
}
JS solution is acceptable too.
More Details [added on 04-01-2016]
Original problem: to set a logo (<img>) as header of all printing pages on Chrome, Firefox, Safari and IE11 (bonus).
Option 1: using an HTML5 API. NOT AVAILABLE
Option 2: using #media print { .print-header{ position: fixed}} to show the element on all the printing pages GOOD FOR FF and IE ONLY
On Chrome and Safari it only shows it on the 1st page . See a code sample on MDN's Printing a document
Option 3: Add header based on sizes and position calculated at print time. ERROR PRONE
This means calculating the width and height of all components to forecast which of them will fit in on a print page, then add a jQuery.clone() of the header element on a position defined by pageHeight + i, where i is 0, 1, .. n and n is the # of pages on the printed document.
Option 4: Conditionally select the element which shows on the top of the print page. INITIAL QUESTION
In CSS I can use :first-of-type to get the 1st child of a type under a given parent. Is there any similar way to getting the 1st child on each print page? Is there a way to know, at print time, what belongs to each page, using CSS or JS?
Related Links
Apparently they won't provide a definite solution, but I may have missed something:
How to use HTML to print header and footer on every printed page of a document?
Print footer on every printed page from website, across all browsers (Chrome)
Having Google Chrome repeat table headers on printed pages
How to apply some styles to first and last elements on a print page?
Using CSS and/or jQuery for Printed Pages with Page Breaks
Action: Printing a document by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Here is a sample on how to accomplish the previous task with HTML and CSS:
<div id="print-header">
<img src="img/logo.png" width="200px" height="50px" >
</div>
#print-header{ display: none; }
#media print {
#print-header {
display: block;
position: fixed;
top: 0pt;
left: 0pt;
right: 0pt;
text-align: right;
}
}
NOTE:
Showing header on all pages was fixed on Chrome
I'm trying to remove two elements from the page of my web app (or the one I'm developing anyone). This is for responsiveness reasons, the elements look great on mobile devices but not very good on desktops. So, I'd like to target the pages by url, then get the elements and hide them.
I'm using node.js but I'm a bit of a noob. Is this something I could achieve with React or Vue or something like that. I tried with jQuery but with no success.
This is the html:
<body>
<div>
<section id="dot1">
<h6>Text Here</h6>
</section>
<section id="dot2">
<h6>Text Here</h6>
</section>
<section id="studiesWp"><img src="/images/ms.png">
<h1>Text Here</h1>
<p>Text Here</p><a href="url/">Text Here</p>
</section>
</div>
</body>
So, I want to hide the two elements: #dot1 & #dot2. The rest of it can stay.
Here's a little jQuery function I tried:
$(window).load(function() {
// Check media queries
if($(window).width() >= 769) {
// Get pathname of page
var page = window.location.pathname;
// If pathname matches any of these
if(page = 'profilePage','projectsPage','contact'){
// Remove two elements
$('#dot1').css('display','none');
$('#dot2').css('display','none');
}
else{
$('#dot1').css('display','block');
$('#dot2').css('display','block');
}
}
});
This is best to do with CSS3, which has media queries to apply styling only if the viewport it's being seen has certain properties.
Desktop-only css
So, if we want to create an element that's only visible on phones, and our css was desktop only, we'd probably create something like this:
/* This example will not work correctly, look below for the full code! */
.phone-only {
display: none;
}
Media Query
To make that style only apply to larger screens, we'll use a #media query. We need to apply styles to only smartphones, or devices with a screen width of less then 769px. In CSS, we write that as min-width: 769px, and then wrap it with a media query like this: #media (min-width: 769px).
When we wrap the style we made earlier inside of our #media query, we get a css rule that hides an element on phones.
#media (min-width: 769px) {
.phone-only {
display: none;
}
}
and use class="phone-only".
I have a div called calendar that is inside a div called cal-container. The calendar has width:100% so currently it takes up the whole cal-container.
I need to add a side-panel div. This div will have a fixed width of 150 pixels. Thus, #calendar width should be #cal-container width - 150px. Is this possible with CSS or am I forced to use a table?
If it is possible, is there an example? I googled it but nothing like what I want came up.
The side-panel can be hidden and shown by click a button so adding padding will not work.
Here is an idea of what I mean:
The days part is #calendar, and the Unscheduled part is the side panel of 150px.
I tried floating the calendar left, and cloating the side panel right and giving it a width of 150px. But the idea is if I hide that div, the calendar should then take 100%.
Thanks
Like this, the blue would be side and calendar be the left, but calendar needs to take up the room side does not when hidden.
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html
Result of float:
Got a working solution for you here.
The code to get this working basically hinges on the following structure:
<div class="sideBar">
...
</div>
<div class="tableWrapper">
<table>
...
</table>
</div>
Next, make sure the elements have these significant CSS properties:
.sideBar {
float: right;
}
.tableWrapper {
overflow: hidden;
}
table {
width: 100%;
}
What's happening here is that the .sideBar floats right, and takes up whatever space it needs to. Meanwhile, the .tableWrapper will take up whatever space is left by virtue of overflow: hidden. Finally, tell the table to take up 100% of its available width.
Click the button in the demo to see the table automatically resize.
All major browsers and IE10 support flexbox. Not supported < IE10.