So in my script I am working on I have MANY various options the user can set VIA variables. Now one of my variables is cfs_responsive and I have a JavaScript if condition checking for true/false or 1/2 values as well as if the actual variable is set. Now where I am stuck is here. Once I get the condition written correctly how am I supposed to turn on and off the responsive css code?
My responsive css code is the following.
/* ===RESPONSIVE=== */
/* CSS DIRECTORY
1. =primaryCATEGORY
2. =subCATEGORY
3. =lowerCONTENT
*/
#media all and (max-width: 1000px) {
/* ===primaryCATEGORY=== */
/* Single Primary Category Divider */
.cfs_primaryCategory {
margin-left: 0px;
position: absolute;
}
.cfs_primaryCategory h1 {
visibility: hidden;
}
.cfs_primaryCategory.cfs_primaryCategory-active h1 {
visibility: visible;
}
.cfs_primaryCategory.cfs_primaryCategory-active {position: relative;z-index: 999;}
/* ===subCATEGORY=== */
/* Single Sub Category Divider */
.cfs_subCategory {
margin-left: 0px;
position: absolute;
}
.cfs_subCategory.cfs_subCategory-active {position: relative;z-index: 999;}
/* ===lowerCONTENT=== */
/* Lower Content Wrapper */
.cfs_lowerContent-wrapper {
padding: 25px 35px 0px 35px;
max-width: 450px;
}
}
Would the only way of doing this be seperating the stylesheet into two different stylesheets then having the js within the if statement include the stylesheet if true?
I would really Like to keep the stylesheet all together.
Let me know what you think.
Huge thanks in advance!
Your idea to keep it as a separate stylesheet and add/remove it from the page is sound.
The only other option I can think of is to add/remove a class on body or another parent element, e.g. <body class="responsive"> and use that in the CSS:
body.responsive .cfs_primaryCategory {...}
JQ
$('body').toggleClass('responsive');
// or $('body').addClass('responsive');
// and $('body').removeClass('responsive');
Related
I have a demo angular project which has basic text and table inside as below.There is print button which is calling window.print() to make the page printed with applied styling.
printPage() {
window.print();
}
css:
#media print {
#page {
size: landscape;
margin: 0;
}
}
My demo project link:
https://stackblitz.com/edit/angular-qxlcna?file=src/print/print.component.ts
My aim is being able to print this table landscaped exactly how it seems on the web page without any crops.^
After print button clicked preview on chrome's print dialog looks great as below
Unfortunately after print, result is not as expected.As you can see there are crops from left and right sides of the paper.Although my other attempts to set margin:0 padding:0 stylings didn't work.How can I print exactly as same as what I'm seeing on HTML page?
I tried also this kind of styling
#media print {
* {
margin: 0 !important;
padding: 0 !important;
}
html,
body {
height: 100%;
overflow: visible;
}
}
I've checked your example and it's a problem related with the printer. Some printers have a "non-printable margin" by default so there is no way to print on the edges.
The user could be change manually if there are some options for scaling the document but it would be a bad solution.
My solution would be adding some margins in the CSS for the print media. For example, in this case, I 've added a left and right margin and everything it's printed correctly.
.designed__table {
width: 100%;
td,
th {
padding: 5px;
border: 1px solid;
}
}
#media print {
#page {
size: landscape;
margin: 0px 10px;
}
}
.print-container {
position: absolute;
}
I'm tweaking SE's web UI with a Greasemonkey script in Firefox 46.0.1 but I'm stuck at the following issue.
My .css contains the following for drop-down menus:
/* From: http://www.w3schools.com/howto/howto_css_dropdown.asp */
/* Dropdown button on hover & focus */
/*.igb-button:hover, .igb-button:focus {
background-color: #3e8e41;
}
*/
/* The container - needed to position the dropdown content */
.igb-dropdown-container {
position: relative;
display: inline-block;
}
/* Change the colors of the dropdown button on hover */
.igb-dropdown-container:hover {
background-color: #07c;
color: white;
}
/* Show the dropdown content on hover */
.igb-dropdown-container:hover .igb-dropdown-content {
display: block;
}
/* Dropdown content (hidden by default) */
.igb-dropdown-content {
display: none;
position: absolute;
left: -7em;
/*background-color: #f9f9f9;*/
min-width: 16em;
box-shadow: 12px 12px 6px 0px rgba(0,0,0,0.2);
z-index: 9999;
}
/* Links inside the dropdown content */
.igb-dropdown-content a {
color: DarkSlateGray;
padding: 4px;
text-decoration: none;
display: block;
}
/* Change color of dropdown content links on hover */
.igb-dropdown-content a:hover {
background-color: #07c;
color: white;
}
I add the menus with the following code:
for ( let tag of tags ) {
...
let dropdown = $('<span>')
.attr('id', 'igb-dropdown-content')
.addClass('igb-dropdown-content')
//.insertAfter($('#content')) // inserted here as sibling of 'content',
//.offset($(tag).offset()) // since 'sidebar' is to small to display menus properly
$('<span>') // Why is this not focusable, even if it is an '<a>'?
.attr('id', 'igb-dropdown-container')
.addClass('igb-dropdown-container')
.append( $('<a>')
.text("▼")
.addClass('igb-button')
)
.insertAfter(tag)
.append(dropdown) // inserted above as sibling of 'content',
// since 'sidebar' is to small to display menus properly
...
}
This works but looks like the following:
To get rid of the parent's (sidebar) width limitation I had the idea to put them a level higher in the DOM and use offset positioning. Hence, I refactored the above code as mentioned in the line comments, i.e. I flipped the code comments. The result is that none of the menus is shown when hovering over ▼.
I checked the DOM with Firebug and all the menus are there at the intented place (siblings of content). If I disable display:none; in .igb-dropdown-content all menus are shown. But all of them stay grayed out when hovering over ▼.
P.S.: The question in the code concerning focusing still puzzles me, too.
UPDATE: I put a minimal working example on https://jsfiddle.net/2hd9j4ms/
GOAL: Eliminate redundancy in the initial DOM by implementing reusable JS (or ASP ?).
In this example I want to write some JS to 'bump' the contents of div # id loc-A to the div # id loc-B, without having to have the exact same code written in two places on the page.
I'm just not sure where to start...?
I have been able to accomplish this with CSS quite easily, but with redundant code. The more a div element contains, the longer the load.
Here is my codepen example:
See the Pen redundant_panda by rorschaff (#rorschaff) on CodePen.
<html>
<head>
<style>
#media screen and (min-width: 861px) {
div[id^="loc"] img {
width: 100%;
}
#loc-A {
display: initial;
}
#loc-B {
display: none;
}
}
#media screen and (max-width: 860px) {
div[id^="loc"] img {
width: 50%;
}
#loc-A {
display: none;
}
#loc-B {
position: relative;
top: 250px;
display: initial;
}
}
</style>
</head>
<body>
<div id="loc-A">
<img src="http://bit.ly/1TAzmvg"/>
</div>
<!----- Down the page somewhere ----->
<div id="loc-B">
<img src="http://bit.ly/1TAzmvg" />
</div>
</body>
</html>
I feel like there's something missing in this, but here's how I would address the code provided.
#media screen and (min-width: 861px) {
div[id^="loc"] img {
width: 100%;
}
}
#media screen and (max-width: 860px) {
div[id^="loc"] img {
width: 50%;
}
#loc-A {
position: relative;
top: 250px;
}
}
#loca-A {
display: initial;
}
And just get rid of the other div.
You could also address this via a responsive framework (bootstrap, foundation) or really, a number of different ways. I think the better approach would be to think about what problem you are solving and how you are solving it. If you find yourself using the same code repeatedly, then maybe your how needs to be revisited.
I have a web application that has a draggable div I need to print when the user selects print from the web browser.
The most succinct advice I found so far is this stack overflow answer, where it is suggested I make my page invisible and display #plotArea only for #media print like so:
#media print {
body * {
visibility: hidden;
}
#plotArea, #plotArea * {
visibility: visible;
}
#plotArea {
/* this positioning ignores .draggable() divs */
position: absolute;
left: 0;
top: 0;
}
}
However, because this div is draggable, I cannot for the life of me remove the offset such that the div positions itself properly for printing. Is it possible to temporarily remove the offset somehow for a draggable div? Below is the div's jquery / css
//jquery
$( "#plotArea" ).draggable().offset({ top: 15, left: 400});
/* css */
#plotArea {
background-color: #FFFFFF;
width: 42em;
height: 54.5em;
float:left;
font-size: 12pt;
overflow:hidden;
}
So what you are saying is that the draggable plugin is applying inline styling to your #plotArea div and therefore overwrites the positioning css you add to it with your print media query?
What you need to do is reset it's positional values for top/left, etc to auto and use the !important rule overwrite to overwrite the inline styles applied to it via the javascript plugin.
For example;
#media print {
#plotArea {
left: auto !important;
top: auto !important;
}
}
I'm looking to do something like this but with CSS or JavaScript.
I need to highlight a certain part of an image but everything I find is how to do it in Photoshop. Can I do this with CSS or maybe JavaScript?
Am I even asking the right question?
EDIT:
Well here is a great submission but I have a follow up question:
I need this for a mobile device and portrait and landscape views as well for many devices like: iOS, iPad, Android, WebOS, Etc... So the fixed position I'm not sure will work.
Any advice?
You could use background-position with absolutely positioned divs as follows:
CSS:
.container {
position:relative;
height:455px;
width:606px;
}
.container div {
position:absolute;
background-image:url(http://www.beachphotos.cn/wp-content/uploads/2010/07/indoensianbeach.jpg);
}
.container .bg-image {
opacity:0.3;
height:455px;
width:606px;
}
.container div.highlight-region {
height:50px;
width:50px;
opacity:0;
}
.container div.highlight-region:hover {
opacity:1;
}
HTML:
<div class="container">
<div class="bg-image"></div>
<div class="highlight-region" style="top:50px;left:50px;background-position: -50px -50px;"></div>
<div class="highlight-region" style="top:150px;left:150px;background-position: -150px -150px;"></div>
</div>
Please see http://jsfiddle.net/MT4T7/ for an example
Credit to beachphotos.com for using their image.
EDIT (response to OP comment): Please also see http://jsfiddle.net/zLazD/ I turned off the hover aspect. also added some borders.
CSS changes:
.container div.highlight-region {
height:50px;
width:50px;
border: 3px solid white;
}
/* removed :hover section */
You can probably fake it, here is a sample:
http://jsfiddle.net/erick/JMBFS/3/
I covered the image with an opaque element. The color of the element is the same as the background of the image. Used z-index to put it on top.
You sure can. For example, most crop plugins provide "highlighting" as the basis of their UI. So for a complete cross-browser solution, just use an existing plugin, like Jcrop.
Of course, you might want it to be fixed, in which case you can programmatically tell the plugin which section to highlight and that the user shouldn't be able to move it, and then it will act as a highlighter, not a cropper.
These are the steps you can take to highlight a part of an image:
Access the image in JavaScript, and dynamically add another identical image immediately after it. (this could be done just in HTML, but it would change the semantics of your markup)
Position the second image over the first image
Apply a css mask on the second image so that only the "highlighted" part shows up
When the user hovers over the images' container, adjust the opacity of the first image.
I can provide more technical details on this later if need be.
What about overlaying the cropped image (with 100% opacity) on top of the whole image (with 30% opacity)?
This answer is only a proof of concept
body {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.img {
position: absolute;
top: 0;
left: 0;
}
.img-base {
opacity: 0.3;
z-index: -99;
}
.img-overlay {
opacity: 1.0;
}
.cropper{
width: 150px; /* input width and height of the box here */
height: 120px;
overflow: hidden;
position: relative;
padding: 0 0 0 0;
margin: 0 0 0 0;
left: 90px; top: 170px; /* input starting location of the box here */
}
#overlay1 {
position: absolute;
left: 0px; right: 0px;
margin-left: -90px; margin-top: -170px; /* input starting location of the box here */
}
<img src="https://images.unsplash.com/photo-1583355862089-81e9e6e50f7a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="img img-base">
<div class="cropper">
<img src="https://images.unsplash.com/photo-1583355862089-81e9e6e50f7a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="img img-overlay" id="overlay1">
</div>