I have a site.css and something similar to mobile.css.
What I am building is a webpage where you can preview the app you've made. Imagine it like a site devided in half where one half has a panel with controls while the other one has the preview (div), curently designed as a mobile phone.
So what I am actually doing is a mobile phone on my site (preview), but the problem is that I dont know how to use the mobile.css file in the preview div only.
Is there a way to import a CSS file for one div (and its children)?
A simplified look of my page: https://jsfiddle.net/kc8rgde2/1/
<iframe>, <style scoped> or external CSS preprocesors are not an option.
EDIT:
I kinda decided to go with SASS as it was the easiest to understand and Visual Studio had a nice extension for it.
Thank you for all the help.
I had an idea. It could work, and it needs a lot of testing.Check this fiddle ->
https://jsfiddle.net/kc8rgde2/2/
Basically, as you can see, in the fiddle there's no bootstrap loaded.
I load bootstrap, and access the file using the CDN link from an AJAX request.
The response of the ajax, is the content of the bootstrap css file (minified version) - (check the console!)
What i do after, is replacing all the classes (dots) with ("#phonePreview .") and this prepends the phone preview div id to all the classes.
$(document).ready(function() {
$.when($.get("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"))
.done(function(response) {
var res = response.replace(/\./g,'#phonePreview .')
console.debug (res);
$('<style />').text(res).appendTo($('body'))
});
})
Prepending the parent id means that the classes are applied only to #phonePreview children.
It's just a starting point, but with some work it could work!
If you want to use styles specifically for devices under a certain size you could use media queries:
#media only screen and (max-width: 431px) {
.myDiv {
style: style;
style: style;
}
#div2 {
style: style;
style: style;
}
}
max-width: 431px means devices that are 431px or lower in width. You could also use height and change it to min-width.
Related
Was hoping to increase the height of the google map module in Divi but my CSS code is not working and do not understand why. I am pasting the following code within Advanced > Custom CSS > Main Element of the Map Module
.et_pb_map {
height: 440px;
}
Any suggestions would be very useful!
Absolute Map for Divi Theme
Add the following CSS in the Row Settings/ Custom CSS/ Column "1" Main Element (column number is where you will put the map):
position:relative;
Add a Class to Map Module. In this example the CSS Class is absolute_map
Add the following CSS in the Custom CSS box:
.absolute_map .et_pb_map {
position: absolute;
overflow:visible;
height: 100%;
}
Be happy!
Try to add padding instead of an explicit increase of height.
#map ,#map .et_pb_map {padding-bottom: 56.25%}
You might have to adjust the selector. Usually #map is enough though.
and adjust the padding percentage to modify the aspect ratio. This is responsive.
The reason why this might work is because padding creates more space for the background - map in the case of this iframe - to be painted thus expanding it.
Read more on this here
Working demo on JSFiddle
If you're customizing through that section (Advanced > Custom CSS > Main Element) of the Divi Builder, just add the property declaration not the entire CSS rule.
height: 440px;
no need to add css class in the advanced > custom css. just add the property value 440px.
use !important for overnight css
.et_pb_map {
height: 440px !important;
}
Just add !important to your css
.et_pb_map {
height: 440px !important;
}
Use below code.
Please use your google API key here in this js file.
If you wanted to increased/decreased height of map then do changes in #div_gmap.
#div_gmap {
height: 440px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
<div id="div_gmap"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('div_gmap'), {
center: {lat: 22.3039, lng: 70.8022},
zoom: 12
});
}
</script>
If this thing is not working well then might need to check some of the css or any other framework causing this issue.
The best way to test out why the css dimension code doesnt work is to use chrome dev tool.
Press Shift+ Ctrl + I (or cmd + alt + I if you are safari user) and open up the web dev tool bar. Go to the Elements section and you will see styles controller. In the styles controller, you click on the elements you wanna check on the DOM side, in your case, it's probably <div class="et_pb_map">...</div>, or you can press ctrl+f to search et_pb_map.
After you have done that, you can go to the box viewer in the style tab and see why it doesnt work out.
I would say sometimes if you use padding/margin and didnt set overflow property well, it will crop out your elements. Or maybe your class is being overlapped by other class. You can use embed style to override that <div class="et_pb_map" style="...">...</div>, or simply put your class as the last class in the class attributes.
Example on using chrome web dev tool bar
Go to Appearance -> Customize -> Additional CSS and paste this code
.et_pb_map iframe {height: 400px !important; }
This will help you Check this jsfiddle
This is the only solution that worked for me. Assign a class to your map module i.e. .map-height and target it like this:
.map-height .et_pb_map {
overflow:visible;
height: 500px!important;
}
The simple approach is:
Go to Divi Theme Options
Scroll down to Custom CSS
Enter .et_pb_map {height:500px;}
Click Save Changes (the map will now change to 500px height)
I'm currently developing a complex print style sheet which is in some ways different from the HTML currently displayed on screen. I've hit a hurdle with a balance between performance and achieving the desired layout.
Basically there is a gallery of images which are loaded via javascript on the fly. Images are built dynamically via JS and output to the DOM on each request for the next image.
My problem lies in that I need to build this for printing purposes. I think I'm left with a scenario where I will have to build additional html on the page just for the print page to look correct; that isn't so much of a problem, except the images are rather big, and even using "display:none" and media print { display:block; } won't prevent the images from being downloaded on desktop devices behind the scenes by the browser. In essence I need them to stay dormont on screens, and come to life using print styles.
I had considered using the css background-image property - which I believe doesn't cause the image to load in the browser, however background image doesn't seem to reliably print across different browsers.
I've also tried using onbeforeprint javascript, but again, this is mess of browser inconsistency.
Can anyone suggest any sort of solution for this? at the moment it seems like I'm going to have to suck up the additional overhead of all the images to achieve reliable results.
If background images are an option, you could prevent the download of those when setting the parent element of the image container to display: none
Example HTML:
<div class="invisible">
<div class="img-container">
</div>
</div>
Related CSS:
.invisible {
display: none;
}
.img-container {
background: url(img.xyz);
}
#media print {
.invisible {
display: block;
}
}
Apart from that a similar question had been asked: Prevent images from loading
May be that will help you, if background images are definitely NOT an option.
Before jumping off the deep end with Ajaxify on a large Razor project, I thought it best to create an MVC4/Razor test-bed app and try it out.
Repro:
Created a standard MVC4/Razor Web Application in VS 2012
Added the requisite JQuery add-in files (It already has JQuery 1.8.2 by default in the Razor project template).
Added this to BundleConfig.RegisterBundles
bundles.Add(new ScriptBundle("~/bundles/ajaxify").Include(
"~/Scripts/jquery-scrollto-{version}.js",
"~/Scripts/jquery.history-{version}.js",
"~/Scripts/ajaxify-html5-{version}.js"
));
Note: I rename all add-ins to the MS standard ~/scripts/addinname-9.9.9.js format to allow for easier upgrading
Added one line to the bottom of Views/Shared/_Layout.cshtml
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/ajaxify") <=== ADDED THIS LINE
#RenderSection("scripts", required: false)
When I run the web app the home page comes up normally (as expected), but the contact page comes up using the mobile styles. To verify this I made the body yellow in that media selector and sure enough, it kicks in on the Ajaxified (dynamically loaded) About page:
These CSS styles are defined in the CSS within the following selector:
#media only screen and (max-width: 850px)
The page corrects itself if you resize it at all or refresh the browser:
I am surprised that this is possible, as the media selector is meant to be resolution dependant, so thought I would see if anyone can shed light on the cause. The browser window is greater than 850px at all times so the mobile styles should not be shown at all.
The Actual Question Is:
To avoid further confusion the actual question is: I need to know why the media filter selector is triggering, even though the screen is bigger than the min size specified?
Update:
I reduced the Standard MVC4/Razor CSS mobile styles section to the minimum below and the problem still exists. If I removed the float: none, the problem does not occur:
/********************
* Mobile Styles *
********************/
#media only screen and (max-width: 850px) {
body{
background-color: yellow;
}
/* header
----------------------------------------------------------*/
header .float-left,
header .float-right {
float: none;
}
}
As the details provided, I will say the problem is with float only,
Just update float and one more tag
.header .float-left{float:left;}
.header .float-right{float:right;}
.clearfix{clear:both}
Use this clearfix class with div below header div
<div class="header">
//your codes
</div>
<div class="clearfix"></div>
I think this will do..
Edit : Ajaxify Update,
The script file of ajaxify has this code,
// Prepare Variables
var contentSelector = '#content,article:first,.article:first,.post:first',
$content = $(contentSelector).filter(':first'),
contentNode = $content.get(0),
$menu = $('#menu,#nav,nav:first,.nav:first').filter(':first'),
activeClass = 'active selected current youarehere',
activeSelector = '.active,.selected,.current,.youarehere',
menuChildrenSelector = '> li,> ul > li',
completedEventName = 'statechangecomplete',
/* Application Generic Variables */
$window = $(window),
$body = $(document.body),
rootUrl = History.getRootUrl(),
scrollOptions = {
duration: 800,
easing:'swing'
};
Now for clarification the CSS you have specified is not clashing with the CSS changed by ajaxify.js so there must be something that you are missing, I will say that AJAXIFY.js is not the one who is changing behavior of page, please post live link of your page or total work for more details.
Update: Large Razor Site.
If you have ajaxify large razor project, that will not change the behavior; Yes, it prepares strong html objects in MVC4 so if there is some standard ignores in the razor code or html page code or master page code. this will occur, I will stay with My Vote that Ajaxify does not change the behavior, its something else that is classifies under mobile site.
Update : Removing float
Removing float:none helps --> that prov that this is a float issue, that has not been taken care before this node..
I will like to add that simplify CSS to base page/master page which are commonly used, as the ajaxify calls the page and if the CSS of that razor page is not loaded then also this problem occur.
I have a button in asp.net (c#) that I want after click this button I could print from my html table that is in a update panel ,I only want Print my html table not all page
is there any component?
thanx very much
2 ways to handle it:
CSS to define a print media
Reporting services, hit the data directly from a sproc / direct table
and print a table layout of the data.
Based on OP comment
Straight from W3c:
http://www.w3.org/TR/CSS2/media.html
Read specifically about print media, it means you can define a .css file in your asp.net project with the media type "print":
#media print {
/* style sheet for print goes here */
}
This is nice because you can now define CSS to hide all elements on your screen:
display:none
Except the div / table of your choice:
#myDiv {
display: block;
}
In your asp.net page you have this define:
<link rel="stylesheet" media="print" title="Printer-Friendly Style"
type="text/css" href="printStyle.css">
This tells your application to use the printStyle.css file when it comes to printing your page.
And once you do try to print the app will use printStyle and all the formatting and styles you have defined.
Here is a good example: https://web.archive.org/web/20200724145536/http://www.4guysfromrolla.com:80/demos/printMediaCss.html
For the second point, if you are running SQL Server, reporting services is free. Of course you will need to set this up and deploy reports. Its a bit out of the scope of this question. If you do have reporting services you may want to open a new topic and ask questions about it.
Otherwise just create a print style css file.
You can probably use the CSS #print Media Type to hide the stuff you don't want to print.
Check out the w3 Schools tutorial for a basic overview.
You can use CSS classes to define media type like #print, #screen and then mark appropriate parts of your webapge with those classes.
For the button to do the print, you will need to add: onClientClick="window.print()" to the button's definition.
Use CSS like this:
#media print
{
printOnly {display:block;}
screenOnly {display:none;}
}
#media screen
{
printOnly {display:none;}
screenOnly {display:block;}
}
Then simply decorate your DIVs or other elements with the classes:
<div class="screenOnly">this will not print but will show on screen</div> or
<div class="printOnly">this will not show on screen but will print</div>
I have two css files:
A main file (main.css)
A specific page file (page5.css). My page.css contains main.css (#import url(main.css));)
My main.css has this as one part of it that sets the height of the page
#content {
background:url(../images/image.png) no-repeat;
width:154px;
height:356px;
clear:both;
}
This works fine for all the other pages, but at page 5, I need a little bit more height.
How would I go about doing it?
You don't even need a separate CSS file necessarily. You can add classes to your body for various purposes, identifying page or page type being one of them. So if you had:
<body class="page5">
Then in your CSS you could apply:
.page5 #content {
height: XXXpx;
}
And it would only apply to that page as long as it occurs after your main #content definition.
Just re-define it somewhere after your #import directive:
#content { height: 456px }
for identical CSS selectors, the latter rule overwrites the former.
In page5.css, simply re-define the height.
page5.css
#content {
height:400px;
}
The other answers did not help me on a more complex page.
Let's suppose you want something different on page X.
On your page X, create a class at the body tag (body class="myclass").
Open the Developer tools (I use chrome) and select the item to be modified. Let's say it's a link ( a.class - 'class' is your class name of your anchor, so change it accordingly). The browser will give something rather generic that works on the developer tool - but messes up in real life.
Check the parent of the modified field.
Add the HTML tag to your developer tool as testing
f your new CSS path does not grey out, you are good. If it greys out, your selected path still needs fixing.
Let's suppose that the parent is a div with a class 'parent'. Add this path "div.parent >" to the already chrome selected a.class
The symbol > means you are going up on the tree.
You can keep going backward on the DOM all the way to body.myclass, or you may not need. There is no need to add the classes for the parents, but you can add them if there are great similarities on your pages.
This works for me.