I would like to use something like this:
Codepen Demo
$('.marquee').marquee({
duplicated: true
});
.marquee {
width: 200px;
overflow: hidden;
border: 1px solid #ccc;
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script>
Duplicated option for short length text:
<div class="marquee">jQuery marquee is the awesome</div>
But I need to set up starting position of this animation to left: 0; to see the text immediately. Do you know how to make it?
Thanks for help.
As Vitorino mentioned, there is already a fix for this on the documentation page for the plugin.
However, if you for some reason don't want to do that, you can make an inner wrapper on the text with a left value of 97%. It would be something like this:
.inner {
position: relative;
left: -97%;
}
http://codepen.io/anon/pen/BoXLxm
You must add the startVisible parameter to an object with a value of true.
$('.marquee').marquee({ duplicated: true, startVisible: true});
Related
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
I am trying to display spinner when the button is clicked. I had one working plunker and I am trying to implement it little bit of tweak. My Plunker is here. I referred this working Plunker but no luck. I know m missing something small here.
ng-class="{true: overlay}[madeCall]"
Ok both answers point correctly one error, but there is also a fault in logic.
In the plunker you copied it applies a class called .grey when it is true but in conjunction with the css, he has e.g: .grey .overlay, the result is the desired.
If you want to copy that exact logic you have to add the .grey class and also change your css.
e.g:
css:
.grey .overlay {
background-color: #e9e9e9;
/* display: none; */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}
and html:
<div ng-controller="mainCtrl" ng-class="{true: 'grey'}[madeCall]">
plunker
It should be:
ng-class="{overlay: madeCall}"
The syntax for ng-class is {className: Expression}, if the expression is truthy the class will be applied.
overlay should be there in quotes otherwise angular will lookup for overlay variable in scope.
ng-class="{true: 'overlay'}[madeCall]"
Demo Here
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
I'm wondering if there's a way to fade out (like a gradient) the opacity of an iframe and the content inside it. It's difficult to explain so a common example would be at the bottom of notification centre on Mountain Lion or iOs.
The whole idea is that when a user scrolls down (in an iframe) the content "fades out" at the bottom and it doesn't cut off with a straight line.
Not sure if this is possible with CSS or Javascript.
Any help is greatly appreciated. Thanks
If I've understood you correctly, you want something like this:
https://dl.dropbox.com/u/73603348/fadeout.html
What I've done in the past is create an overlay element at the bottom of the scrolling content. Pretty simple.
The markup:
<div class="content">
<div class="container">
[ content here ]
</div>
<div class="fader"></div>
</div>
The style:
.content {
width: 600px;
background: #fff;
margin: 50px auto 0;
overflow: auto;
position: relative;
}
.container {
height: 500px;
overflow: auto;
padding: 10px;
background: #ccc;
}
.fader {
position: absolute;
content: '';
bottom: 0;
left: 0;
right: 0;
height: 100px;
background: -webkit-linear-gradient(top, rgba(255,255,255,0), #fff);
}
Just in case you don't want to load the whole jQuery library, you can write your own function to do the fadeout. Here's my own try to write such a function:
var ifrm = document.getElementById("your_frame"); //find your frame
function fadeOut(var duration) { //duration: how many millseconds you want the effect to take
var step = 10 / duration; //step is how much the opacity will change each 10 milliseconds
var curOpacity = 1; //at first the iframe is fully opaque.
function animate() {
if(curOpacity < step) {
ifrm.style.opacity = 0; //we're done
return;
}
ifrm.style.opacity = curOpacity;
curOpacity -= step;
setTimeout(animate, 10); //wait 10 millseconds and move to next step of animation
}
animate();
}
So suppose you want to fadeout for 1 second, then the initial fadeOut function call would be: fadeOut(1000);.
Again, I hope that helped you.
You can use jQuery. Example on how to fade out an element:
$("#your_iframe_id").fadeOut();
More details on how to use fadeOut: jQuery API reference about fadeOut.