I have an svg in a file that represents a workflow - ie a bunch of boxes with lines between them - so say I have four rectangles.
In the app I have a mode - and I want appropriate rectangle to highlight based on the mode. So I want to do a css like:
#workflow rect {background-color:white}
.mode_1 #workflow rect:nth-child(1) {fill:red}
.mode_2 #workflow rect:nth-child(2) {fill:orange}
.mode_3 #workflow rect:nth-child(2) {fill:yellow}
// etc
And it works fine if I have inline svg. However, the workflow diagram is moderately complicated and long. I need to be able to store and edit it in a separate file so I can use an svg editor etc - and I can't find any way of styling it from the parent page. I've tried:
<img src="workflow.svg"/>
the browser doesn't see it as pieces at all
<object data="workflow.svg"/>
it's like an iframe, and it doesn't respond to the page's css
<svg>
<use xlink:href="workflow.svg#diagram">
</svg>
the svg appears as some sort of "shadow object" - and still doesn't respond to css.
I'm on the same domain - so cross site issues shouldn't be a problem.
I can get the effect I want by using javascript, or using multiple svg files - but is there any way to do it with just css and svg?
You'll have use different svg images. As far as I can tell, you can't use css to adjust it. You would have to edit the file itself.
not really what I was looking for, but I thought of a javascript hack to get me there... its ugly but it works - here's a simple example:
<body>
<svg_embed href="workflow.svg"/>
</body>
<script>
$("svg_embed").each( (index, element) =>
fetch( $(element).attr( "href" ) )
.then( response => response.text())
.then( xml => { $(element).html( xml )}))
</script>
so this reads and embeds the svg - thus making it fully css-able.
Related
I am writing some CSS to style some images on a website. Some of the styles I am applying, though they look good on the images, would be problematic if for whatever reason the image didn't load and the site displayed the alt text. For example, I mirror some of the images with transforms.
Is there some way I can target an image in my CSS only if the image is actually loaded and displaying, but not if it has fallen back to the alt text?
As an additional note, the reason I am using CSS to style the images, rather than just actually modifying the images themselves, is that I am using the same image multiple times on the page as an icon for a list, and just want to add a little variety to each instance. I'd rather not have 6 different versions of the same image on the page.
You could do something like this:
.image-not-loaded-yet {
/* your css for when the image has not yet loaded */
}
and then
<img onload="this.classList.remove('image-not-loaded-yet')" class="image-not-loaded-yet" src="path/to/image.jpg" />
or the opposite, add the class only when the image has finished loading:
.image-ready {
/* your css for when the image has fully loaded */
}
and then
<img onload="this.classList.add('image-ready')" src="path/to/image.jpg" />
If you want to apply this to all images on a page, you can add an event listener to each img like this:
document.addEventListener('DOMContentLoaded', () => {
for (const img of document.querySelectorAll('img')) {
img.addEventListener('load', () => img.classList.add('image-ready'))
}
});
I am using TinyCME html editor with the angular directive
and I render the output of the editor -which is data-bidden to property "description" in the scope- into a div using ng-html-bind.
<div ng-bind-html="description" ></div>
everything is working fine but I didn't get in the div what I see in the editor
especially when it comes to styling like the background color and text color
here is what I get in the editor
and here is what I get in the div
it sounds like all the styles applied in the editor will eventually be overwritten by the styles in the div context
I don't have any experience in CSS so please excuse my lack of knowledge
What I really want to do is to render the editor output in a div in a way exactly the way it looks in the editor any help?
I have solved the problem the issue comes from that the ng-bind-html strips out all the styling info comes from the editor that's why there is no styling info
to solve the problem we should use angularjs service $sec which tells the ng-bind-html not to strip out anything from the html string
so to use it in the angular expression we should make it as a filter
app.filter('trustAsHtml', ["$sce", function ($sce) { return $sce.trustAsHtml; } ] );
then you can use this filter in the binding expression like the following:
<div ng-bind-html="currentModel.description | trustAsHtml" ></div>
I have some problems with Jcrop's croppable area size. In my own, simple application I used Jcrop without any problem but now I'm using Jcrop inside another web application (Virtual Viewer Snowbound). Here is a screenshot of my problem-free application:
I added all Jcrop js and css files to the other website's folders into the right paths. I think there is no problem about file locations. But probably something inside that website's css and Jcrop's css conflicts and prevents it from working properly.
Firstly I added these libraries to the most below side of the head tags (I commented out the first one because website has Jquery 1.9.1 version so it conflicts:
<!-- <script src="js/jquery.min.js" type="text/javascript"></script>-->
<script src="js/jquery.Jcrop.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
Then Jcrop functions are written:
jQuery(document).ready(function(){
jQuery(function ($) {
$('#vvImageCanvas').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
setSelect: [100,100,200,200],
bgColor: 'black',
allowSelect: true,
allowMove: true,
allowResize: true,
aspectRatio: 0
});
function updatePreview(c) {
if (parseInt(c.w) > 0) {
// Show image preview
var imageObject = $("#vvImageCanvas")[0];
var canvas = $("#previewMyCanvas")[0];
var context = canvas.getContext("2d");
if (imageObject != null && c.x != 0 && c.y != 0 && c.w != 0 && c.h != 0) {
context.drawImage(imageObject, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
}
}
};
}
);
});
As you see the vvImageCanvas is the canvas which holds the image and I Show the preview inside previewMyCanvas canvas. The problem is croppable area size. If I add that below code:
style="width:auto!important; height:auto!important;"
into the
<canvas id="vvImageCanvas" class="vvCanvas">
tags then I have the below view:
As you see in the preview I can crop where I want but the croppable area does not have the same size with picture. I think that is the jcrop-holder div but I'm not proffesional in css issues.
If I don't add these style options then I have that:
The croppable area has same size with picture but the picture gets smaller and as you see in the preview, cropped area is different from where I crop. Maybe it crops from the actual size of image.
So, how can I use Jcrop functions without conflictions. I added
jQuery.noConflict(true);
but it didn't help.
Thanks.
EDIT:
Ok I realized the problem.
The Jcrop functions should work after the page load. But I cannot achieve that by writing these codes into document.ready or window.load blocks. That was the reason of asking this question.
Then I ran the code by a button click. It worked. But I don't know why it does not work inside document.ready and works in button click event. Also I have to make it work on page load automatically not by clicking a button.
Any advise?
It's a wild guess, since you didn't provide any demo, but I've come across similar issues in following cases:
Jcrop element was animated using CSS3 transitions
There was a CSS rule applied to the parent of jcrop element manipulating width, height, max-width or max-height of all img tags inside
Fix for the second case is obvious - you need to apply your custom rules only to the images you need adjusted - don't forget Jcrop creates its own elements in DOM in the same container as your initial image.
In case of using CSS3 transitions, you need to call Jcrop after all transitions for your element has finished:
$("#image").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
// your Jcrop code
});
You may encounter similar issues when using scripts to preload images.
I am facing a problem related to css.My question is that I want to change background-color to black of any website page through url. I want this for study better to protect my eyes meanwhile I have eye problem. So what code to apply in the url to show the page black meanwhile we use this css rule like body {
background-color:#00000;} to output .I have attached two images for it to clear more better.Hope will get response as soon as possible.Thank you too much!
I think the best solution for you to it to take some of the recommendations above, and turn it into a bookmarket! That way, you can always click the button in your address bar and it will
1) Load jQuery if necessary
2) Change the background-color of <html> and <body> elements to black.
Here's a link to the JSFiddle. Drag the link to your bookmarks bar and watch the magic happen:
http://jsfiddle.net/lasha/GjQGZ/
No need for all the extra steps! :)
I would suggest you use some kind of glare reduction/warmer color software, like F.lux.
I use it and even with white backgrounds, my eyes don't get tired as much.
For SO site, where Jquery is used, you can type this in the console:
$('body').css('background-color', '#000');
And also you can change the text color to white:
$('body').css('color', '#fff');
If no Jquery is loaded, you can selet the body tag with document.getElementByTagName
you can't do it through a URL. However, since you're using firefox:
Alternatively, look in to a plugin like greasemonkey (or similar) and inject custom CSS styles on to the page you're viewing. Something like:
// ==UserScript==
// #name Readability Helper
// #description makes font more readable for custom viewing.
// #namespace CSS
// #include *
// #version 1.0
// ==/UserScript==
(function(w){
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "* {color:#fff !important;background-color:#fff !important";
w.document.body.appendChild(css);
})(unsafeWindow);
Brad already gave a good answer.
Alternatively you could use the Firefox add-on Color That Site!
The purpose of this Add-on is to let you easily change the colors of any web site you want. These color edits can be permanently saved and be im-/exported for sharing.
This can be done by applying some javascript to the site. After site is loaded, you can write in the address bar something like this:
javascript:document.body.style.backgroundColor = "#000";
Make sure to include 'javascript:' prefix part (if you copy/pasted it might happen that browser excluded it for security reasons).
This will work only locally, of-course!
UPDATE: If it happen for some reason this doesn't work in chrome, try to do it like this:
javascript:document.body.style.backgroundColor = "#000"; alert()
I didnt figure why or how but it works!
You cannot do such things with a URL (unless the server specified in the URL has special functionality for this).
You can use a user style sheet or browser add-on to impose your CSS rules. The ways to do such things depend on browser.
When using a user style sheet, you mostly need the !important specifier, since by default page (author) style sheet rules override use style sheet rules. Example:
body { background: black !important;
color: white !important; }
Note that this also overrides any background image that pages might set for body. And setting color whenever you set background is a good idea—you don’t want to see black on black, or even dark gray on black.
But it’s really more complicated. Any element can have a background (and content color) of its own. For example, if a page has <body><div id=content>...</div></body> and it sets background on that div, then you settings for body won’t have much effect.
At the extreme, you could replace body by * in the rule above, to make everything white on black, except those ingredients that are not under CSS control (like contents of images and possibly some form fields).
I am working on a PHP file. I'm working on the menu bar, the menu bar contains all the image buttons, if someone hovers on one of the buttons I want them to change image(color). Could someone help me out with this?
$globalsettings = array(
'src' => $sImageURL.'global1.png',
'alt' => $clang->gT("Global participant settings"),
'title' => $clang->gT("Global participant settings"),
'style' => 'margin-left:5px',
'style' => 'margin-right:1px'
);
You can create hover effects using CSS (cascading stylesheets). Your CSS must be in an external stylesheet or embedded style element.
I'm using BUTTON that will style all <button> elements, but you can replace it with whatever element you want to style, such as an <img> with IMG (lowercase or uppercase).
BUTTON {
background: url(my_bg.png);
}
BUTTON:hover {
background: url(my_hover_bg.png);
}
If you don't know how to use stylesheets, just insert embedded styling into the <head> of your HTML document.
<style type="text/css">
/* Place CSS here */
</style>
If you want you can take it a step further and use CSS sprites (like old videos games used to do it). CSS sprites are a collection of images in one single image, and you simply change the position of the location of the background, and it creates the effect. You can achieve this like this:
#myelement {
background: url(my_bg.png) -0 -0;
}
#myelement:hover {
background: url(my_bg.png) -0 -100px;
}
There are also old school ways of hover effects but they're like Frontpage-era, so I don't recommend using them. CSS hover effects is the standard of today.
You're trying to solve 2 problems in one step. You need to get the images to display and then swap between them on hover.
You can't dynamically edit a button in JS (ok, you could with canvases and html 5 but it's non-trivial). So, you need to use CSS (or possibly JS) to to swap between 2 images.
Where those images come from is up to you - you can either pre-generate them which is a little work up front but easy to implement and no PHP required. This would be the preferred option if there's only one or two variations in colour.
Alternatively, you can have a PHP script which generates the images on-the-fly (and ideally caches them to save recomputing them later). This allows for infinite variation but requires more overhead on the server. This approach is commonly used to generate thumbnails as the source image isn't known in advance
Note that PHP has no control over when each image is displayed - it simply provides images to your CSS/JS in exactly the same way as a webserver would serve a static image.
If you want to edit an image in PHP, you need to look at the GD+ library
You can use css to do this quite easily by using the content: selector.
for example, your markup might look like this:
<div class="link" id="link1">
<img />
</div>
and the css would be something like:
#link1 a img{
content:url("http://www.maxxpotential.com/stephen2/wp-content/uploads/2013/03/Images-from-Deep-in-the-Woods-by-Astrid-Yskout-4.jpg");
}
#link1:hover a img{
content:url("http://blogs.mathworks.com/pick/files/zebrainpastelfield.png");
}
by using the selectors you assign in your script, you should find it pretty easy to amend this to suit your needs.
here is a working fiddle demonstrating this http://jsfiddle.net/pWYtu/1
You can use sprite image and onhover change position.
also you will get benefit of performance.