So I have a div that allows me to display a QR code of the current page URL:
.page-qr:before {
content: url(https://chart.googleapis.com/chart?cht=qr&chs=100x100&chl=<?php echo current_page(); ?>?choe=UTF-8);
height: 100px;
width: 100px;
}
And used like:
<div class="page-qr"> </div>
Obviously, to get the current URL on-the-fly, I have to put this CSS styling in the <head> of my page. I am trying to move it to the stylesheet.
I had the idea to use a data attribute to specify the URL:
<div class="page-qr" data-url="https://chart.googleapis.com/chart?cht=qr&chs=100x100&chl=<?php echo current_page(); ?>?choe=UTF-8"> </div>
So, my question is, is it possible to double up the usage of content:url() and attr(data-url) in the stylesheet?
.page-qr:before {
content: url(attr(data-url)); /* Doesn't work, but you get the idea */
height: 100px;
width: 100px;
}
This is a proposed feature for attr() in css-values-3. The CSS would look like this:
.page-qr:before {
content: attr(data-url url);
height: 100px;
width: 100px;
}
Unfortunately there are no known implementations, so this still isn't possible.
I just stumbled upon the same problem, but found a solution using custom properties. So we can pass any type that is allowed as a custom property value to it. Then you can absolute position it if that is what you look for.
You can use it like this:
HTML
<div style="--img-url: url('${imgUrl}')"></div>
CSS
div {
position: relative;
}
div::before {
position: absolute;
top:0;
left:0;
width:100px;
height:100px;
content: var(--img-url);
}
See this post for further info
Related
I am not experienced with coding at all. I just copy/paste template examples that I find on the internet and that has worked fine so far. However, there is a new problem that I am unable to solve.
The short question is, how can I set the css class of an image outside the <"img">?
For example, this is the code that I have, and does not work:
$class_key= "top".(string)$count;
$returnarray[$level_key]='<img class=$class_key src=http://somepic.jpg width=100px height=100px/>';
If you want more details, I explain below:
I am layering images, and the position of the top images is randomly determined. I am using a css code to name and define the layers:
<style type="text/css">
.bottom
{position:absolute;
top: 0px;
left: 0px;
z-index: 1;
}
.top1
{
position:absolute;
top: 100px;
left: 100px;
z-index: 2;
}
.top2
{
position:absolute;
top: 100px;
left: 100px;
z-index: 2;
}
And the variable $count is randomly determined. If I explicitly write class="top1" or class="top2", the code works.
Please help me. Thanks
Assuming that you are using PHP...
You are using single quotes on $returnarray[$level_key]='<img class=$class_key.../>'; then $class_key is not interpreted.
You can use the following:
Single quotes concatenating the variable:
`$returnarray[$level_key]='<img class="' . $class_key . '".../>';`
or double quotes
`$returnarray[$level_key]="<img class=\"{$class_key}\".../>";`
or another way using double quotes
`$returnarray[$level_key]="<img class=\"$class_key\".../>";`
See similar: PHP: Using a variable inside a double quotes
To better manage your CSS:
Add a generic class to your $class_key
$class_key= "img-top top".(string)$count;
Then the CSS rules will work for any image that contains img-top class:
.img-top{
position:absolute;
top: 100px;
left: 100px;
z-index: 2;
}
Also you can wrap your loop content inside a div
<div class="img-top">
[loop logic]
</div>
And define the CSS for all images inside it:
.img-top img{
position:absolute;
top: 100px;
left: 100px;
z-index: 2;
}
How would you write this to be SASS compliant?
.fader { display: inline-block; }
.fader img:last-child {
position: absolute;
top: 0;
left: 0;
display: none;
}
Basically I'm just replicating this example of fading in one image over another (found here.)
His JFiddle example: http://jsfiddle.net/Xm2Be/3/
However his example is straight CSS, I'm working on a project in SASS and am not sure about how to correctly translate it.
My Code
Note in my example below, the img hover isn't working correctly (both images are showing up and no rollover fadein action happens)
My CodePen:
http://codepen.io/leongaban/pen/xnjso
I tried
.try-me img:last-child & .tryme img:last-of-type
But the : throws SASS compile errors, the code below works
.try-me img last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
However it spits out CSS which doesn't help me:
.container .home-content .try-me img last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
UPDATE: Working Codepen:
http://codepen.io/leongaban/pen/xnjso
Nesting is not a requirement with Sass. Don't feel obligated to do so if there's no need to break up the selectors.
.try-me img:last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
If you are applying styles to the image and then specific styles to the last-of-type, then this what it would look like when you nest it:
.try-me img {
// styles
&:last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
}
Neither of the above worked for me, so.
last-of-type only plays nice with elements, you can select things with classes all you like but this gets handled by the elements. So say you have the following tree:
<div class="top-level">
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="somethingelse"></div>
</div>
To get to the last div with the class of middle, doesn't work using last-of-type.
My workaround was to simply change the type of element that somethingelse was
Hope it helps someone out, took me a while to figure that out.
Hey why don't you use only CSS? You could remove all the JS, I mean hover is support right back to ie6. I guessed that you know there is no hover event just active on tablets..
I mean you will need to set an area for the image.. But I find it use full, especially if you want an href.
http://codepen.io/Ne-Ne/pen/xlbck
Just my thoughts..
My css for a tree node icon is the following:
.icon {
background: url(http://dummyimage.com/100x100/ccc/fff);
width: 100px;
height: 100px;
position: relative;
}
.icon:after {
background: url(http://dummyimage.com/32x32/f0f/fff);
width: 32px;
height: 32px;
display: block;
content: ' ';
position: absolute;
bottom: 0;
right: 0;
}
I set iconCls to "icon" but it does not work, I also tried "icon icon:after" and "icon:after" but with no luck.
I use a modern browser and my overlay css is valid, but extjs doesnot seem to understand it. How can I overcome this problem?
The icon element is by default an <img> element. It's contents are replaced by the image. You can't use :before or :after with it, because they form part of the contents that get replaced. You will need to override the treeRenderer in Ext.tree.Column to apply your second image.
looks like you forgot the class prefix in one of youre tests try .icon:after {}
I have a background image as part of a body class in CSS:
body.soon1 {
background-color: white;
background-image: url(soon1a.png);
background-position: center;
background-repeat: no-repeat;
}
Then later on I have a javascript function that will change the body class.
The reason I have the image in the background is that when the script activates, the background-color and the background-image will both change at exactly the same time and you can't select the image.
Is it possible that I could change the cursor type only while hovering over the background-image? I understand I can put
cursor: pointer;
in the body styles, but this makes the cursor appear over the entire page.
You can view the live page, currently, where the background changes when you click anywhere on the page.
Edit: I've got something that works for me now. I added a centered div with nothing in it:
div.clickme {
width:300px;
height:400px;
position:absolute;
left:50%;
top:50%;
margin:-150px 0 0 -200px;
cursor: pointer;
}
This works for me because I can set my own arbitrary area, but if anybody has a better solution, let me know.
There's really no compelling reason to make the image a background image. You would be better served by putting the image in two wrappers (required to guarantee absolute centering vertically and horizontally regardless of viewport).
You could extend your array by populating it with objects, so that it can hold possible values for the image and the body style. This way, you can use the same method (cycle through the array) to pick out all of the changes you want, even if you wanted to add other changes later.
Also, while web browsers are rather lenient with standards, it really is trivial to conform to the simple HTML 5 requirements and still keep the functionality.
Lastly, I strongly encourage you to avoid what I call "hipster coding". While it's fun to name functions, variables, et al with obscure names to delight the few that check the source code, it makes for needlessly obtuse language and lower maintainability. In short, it's a bad practice, even if you are the only maintainer.
Observe a new version of your source based on these comments (with indentation cleanup) below.
<html>
<head>
<title>Something Amazing Will Happen</title>
<style type="text/css">
body.light {
background-color: white;
}
body.dark {
background-color: black;
}
div.outside-wrapper {
position: absolute;
top: 50%;
width: 100%;
height: 1px;
overflow: visible;
}
div.inside-wrapper {
position: absolute;
top: 50%;
left: 50%;
width: 381px;
height: 393px;
margin: -197px 0 0 -191px;
cursor: pointer;
}
</style>
<script type="text/javascript">
styleIndex = 0;
var states = [{style: "light", image: "soon1a.png"}, {style: "dark", image: "soon2a.png"}];
function nextStyle() {
if (++styleIndex >= states.length)
styleIndex = 0;
var state = states[styleIndex];
document.body.className = state.style;
document.getElementById("clickme").src = state.image;
}
var tap = true;
document.addEventListener('touchstart',function(e) {
tap = true;
});
document.addEventListener('click',function(e) {
nextStyle()
tap = false;
});
document.addEventListener('touchmove',function(e) {
tap = false;
});
document.addEventListener('touchend',function(e) {
if(tap)
nextStyle();
});
</script>
</head>
<body class="light">
<div class="outside-wrapper">
<div class="inside-wrapper">
<img src="soon1a.png" id="clickme">
</div>
</div>
</body>
</html>
<!-- Don't ask me what it is. -->
Try this
body.soon1 {
background-color: white;
background-image: url(soon1a.png);
background-position: center;
background-repeat: no-repeat;
}
body.soon1:active{
cursor: pointer;
}
What you can do is, put the cursor: pointer on body and change the cursor on the childs. Do somthing like this: http://jsfiddle.net/HSdH3/
html:
<body>
<div></div>
</body>
css:
body {
background: red;
width:100%;
height: 100%;
}
body:hover {
cursor: pointer;
}
div {
width: 300px;
height: 300px;
margin: 0 auto;
background: white;
}
div:hover {
cursor: auto;
}
Something like this should work:
<div id="myDiv" style="cursor: pointer">
Another option is to use jQuery, although it may be overkill for this. Regardless, here's what it would look like:
$(document).ready(function(){
$("#myDiv").hover(function() {
$(this).css('cursor', 'pointer');
});
});
Check it out here: http://jsfiddle.net/K5fex/
I want that when I hover an element(a box made with css), the background color of the body changes from one color to another, for example white to red. The problem is that this should be done using css only and no javascript. And if javascript has to be neccesarily be used, then the color should change back to the previous one on mouse out.
---------------EDIT---------------
Actually I was trying this:
body{backgroung: #000;}
#div{some properties}
body #div:hover{background: #fff;}
Pure CSS experiment:
http://jsfiddle.net/Tymek/yrKRX/
HTML
<div id="trigger"></div>
<div id="bg"></div>
CSS
body {
height: 100%;
}
#bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
widht: 100%;
height: 100%;
z-index: 1;
background: #EEE;
}
#trigger {
position: absolute;
width: 200px;
height: 136px;
top: 50%;
left: 50%;
margin: -68px 0 0 -100px;
background: #333;
z-index: 2;
}
/* KEY */
#trigger:hover ~ #bg {
background: #EE0;
}
Please use like this
<html>
<body>
<style type="text/css">
.top{
background:red;
}
.top2{
background:white;
}
</style>
<div class="top" onmouseover="this.className='top2'"
onmouseout="this.className='top'">Here</div>
</body>
</html>
Use the :hover selector.
It seems pretty straight forward unless you are doing something very different.
Check following example for reference:
.classname {
background-color:white;
}
.classname:hover {
background-color:red;
}
Working fiddle
You have many typo's in your code such as mispelling background as backgroung and treating div as an ID (#div).
CSS (with explanation to typos)
body{background: #000;} /*backgroung (mis-spelled)*/
div{width:100px; /*#div (treated as ID)*/
height:100px;
border:1px solid black;}
To hover over a parent tag you must compulsorily use javascript or jQuery. you may be getting doubt that why there is no css property to select the parent tag, if so, then you can go through this interesting link . To avoid parent selector concept in most of cases we can evade using positioning in CSS (check Tymek's solution).
jQuery
$(document).ready(function(){
$("div").hover(function(){
$(this).parent(this).css('background-color','red');
});
$("div").mouseleave(function(){
$(this).parent(this).css('background-color','white');
});
});
Assuming you are new to jQuery, give a link in head tag of HTML, something like below to make the above function work.
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
Check this Working fiddle