I'm new to Javascript and JQuery so please be patient. I want to make a box-shadow that changes color when using a color picker. For this I'm using Jscolor.js. It's my understanding that I need to use a Onchange function and use +this.color to select the current color.
However I can't seem to get the code to work, I've tried reading everywhere but there isn't much information on the subject I need. I have created a JsFiddle as a example.
Thank you very much for the help in advance.
CODE:
JAVASCRIPT:
$(document).ready(function(){
$('#content').css('boxShadow', '+this.color inset 0 200px 400px -200px');
$('#content').css('boxShadowColor', '+this.color');
});
HTML:
<div id="content">
<p>
<input class="color" onchange="$('#content').css('boxShadow','+this.color');" />
<h1> This is a example.</h1>
</div>
</div>
CSS:
.content {
-webkit-box-shadow: inset 0 200px 400px -200px #000);
-moz-box-shadow: inset 0 200px 400px -200px #000);
box-shadow: inset 0 200px 400px -200px #000;
}
FIDDLE
HTML
<div id="content">
<p>
<input class="color" onchange="addNewBoxShadowStylesToHead('#frontcontent', '#'+this.color);" />
<h1> This is a example.</h1>
</p>
</div>
<div id="frontcontent">This div will have the effect</div>
JS
var head = document.head || document.getElementsByTagName('head')[0];
function addNewBoxShadowStylesToHead(selector,color) {
var css = selector + '{-webkit-box-shadow: inset 0 200px 400px -200px ' +color+ ';' +
'-moz-box-shadow: inset 0 200px 400px -200px ' + color + ';'+
'box-shadow: inset 0 200px 400px -200px ' + color + '; }',
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
}
OR Simpler JS
function applyboxshadow(selector, color) {
$(selector).css({
'-webkit-box-shadow' : 'inset 0 200px 400px -200px ' + color,
'-moz-box-shadow': 'inset 0 200px 400px -200px '+ color,
'box-shadow': 'inset 0 200px 400px -200px '+ color
});
}
call it like so
<input class="color" onchange="applyboxshadow('#frontcontent', '#'+this.color);" />
Related
Basically I have a div with a comma-separated list of box-shadows like in the appended code snippet and I need to change the color of an individual "shadow block" when hovering it.
I searched for ways on how to find out if a specific rendered CSS property is hovered but the only useful thing I found was a similar question on how to detect if the border of a cell is hovered. Here the answer seems clear: you have the position of the hovered cell and it's border-width, so check the offset in four different directions. I wasn't able to transfer this principle to the (comma-separated) box-shadow property.
Note that I don't want to replicate the positions of the box-shadows in Javascript. The solution should still work if I change the positions of individual shadows in the CSS. If required you can assume that the width and height of the div does not change. Any clever ideas on this? Bonus task would be to color the hovered shadow block as shown in the above image, but a solution that logs a message to the console if any of the box-shadows is hovered would already be a useful step.
.box-with-shadow {
display: block;
width: 10px;
height: 10px;
box-shadow:
100px 130px #000,
90px 140px #000,
100px 140px #000,
110px 140px #000,
80px 150px #000,
90px 150px #000,
110px 150px #000,
120px 150px #000,
90px 160px #000,
100px 160px #000,
110px 160px #000,
100px 170px #000;
}
<div class="box-with-shadow">
</div>
As correctly pointed out by marekful the easiest way to achieve the desired effect would be to use multiple HTML elements instead of multiple shadows. However, I will answer the question with a trivial solution that works for the described setup and with variable box-shadows. It is not robust enough to solve some special cases like e.g. a rotation of the div.
The idea is to calculate the positions of the shadows once in the beginning (assuming that nothing moves or changes, otherwise we have to recalculate the positions multiple times). On mouse movement I check if the position of the mouse is in any of the intervals, which are defined by the position of a shadow plus its dimension.
It's been a while since I used Javascript, so there might be the chance that some parts can be simplified, but at least it works. Feel free to play around with the JSFiddle.
var boxWidth = parseInt($("#box-with-shadow").css('width'), 10);
var boxHeight = parseInt($("#box-with-shadow").css('height'), 10);
var boxOffsetX = parseInt($("#box-with-shadow").css('margin-left'), 10);
var boxOffsetY = parseInt($("#box-with-shadow").css('margin-top'), 10);
var boxShadowString = $('#box-with-shadow').css('box-shadow');
var boxShadows = boxShadowString.split(/,(?![^\(]*\))/);
// key: x-pos of the shadow, value: concatenated y-positions, separated by commas
var keyValuePairs = fillKeyValuePairs();
var cursorX;
var cursorY;
document.onmousemove = function(e) {
cursorX = e.pageX;
cursorY = e.pageY;
checkCursor();
}
function checkCursor() {
var shadowHovered = false;
for (i = cursorX - boxWidth; i <= cursorX && !shadowHovered; i++) {
if (keyValuePairs[i] != null) {
// At this point we know that somewhere on this x-position there is a shadow.
// Now check if there is an associated y-interval for the found x-position
for (j = cursorY - boxHeight; j <= cursorY; j++) {
if ((keyValuePairs[i] + "").split(",").indexOf(j + "") != -1) {
shadowHovered = true;
break;
}
}
}
}
if (shadowHovered) {
$("#status").css("background", "green");
$("#status").text("Found shadow: xOffset = " + (i - 1) + "px, yOffset = " + j + "px");
} else {
$("#status").css("background", "red");
$("#status").text("");
}
}
function fillKeyValuePairs() {
var keyValuePairs = [];
for (index = 0; index < boxShadows.length; index++) {
var xPos = parseInt(boxShadows[index].trim().match(/[0-9]+px/g)[0], 10) + boxOffsetX;
var yPos = parseInt(boxShadows[index].trim().match(/[0-9]+px/g)[1], 10) + boxOffsetY;
keyValuePairs[xPos] = keyValuePairs[xPos] != null ? keyValuePairs[xPos] + "," + yPos : yPos;
}
return keyValuePairs;
}
body {
margin: 0;
padding: 0;
}
#box-with-shadow {
display: block;
width: 10px;
height: 10px;
box-shadow: 100px 130px #000, 90px 140px #000, 100px 140px #000, 110px 140px #000, 80px 150px #000, 90px 150px #000, 110px 150px #000, 120px 150px #000, 90px 160px #000, 100px 160px #000, 110px 160px #000, 100px 170px #000;
}
#status {
width: 100%;
height: 2em;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box-with-shadow">
</div>
<div id="status">
</div>
hello all i am having a page where there are two divs floating left one is of about 360 px and the other is auto width when the page scrolls the left div is added a class which makes it fixed to the screen and allows the oyher div to scroll. it is working in chrome but not in mozilla actually the div gets fixed but the other div gets behind the fixed div.
here is the code
<div id="leftfixop909">
<div id="MKAEitFIXED0">
</div></div>
<div id="otherdiv">
</div>
#leftfixop909{max-width:365px;
min-height:103%;margin- left:-8px;
float:left;width:35%;min-width:360px;
overflow:auto;overflow-x:hidden;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);}
#MKAEitFIXED0{width:365px;min-height:101%;
background:url(webimg/mainbg.png);
padding-bottom:20px;z-index:99;overflow:auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);}
.RighTFIXIEDbot{position:fixed;bottom:0px;}
#otherdiv{width:auto;
overflow:hidden;min-height:150%;margin-top:46px;padding-left:20px;}
$(window).scroll(function () {
var height=window.innerHeight;
var DIVHEIG=$("#MKAEitFIXED0").height();
var NOWstoPS=(DIVHEIG-height);
if ($(this).scrollTop() > NOWstoPS) {
$('#MKAEitFIXED0').addClass('RighTFIXIEDbot');
} else if ($(this).scrollTop() < NOWstoPS) {
$('#MKAEitFIXED0').removeClass('RighTFIXIEDbot');
} });
is there anything you can suggest me i think the min-height property is not accepted by mozilla but if a fix the height i get a scroller or may get some matter trimmed .
Here's the code that works for you. Add css for your div's as:
#leftfixop909{
position: absolute;
}
#otherdiv{
position: relative;
}
That's it.
The Fiddle: http://jsfiddle.net/GosuWhite/sXgAY/
You input numbers separated by any characters and it calculates some summary statistics. The summary statistics are output in area designated for the calculator in this divs:
<div id="solWrap">
<div id="solTitles"></div>
<div id="solStats"></div>
</div>
So You'd basically have something like this:
Sample Variance: 12.212
Population Variace: 12.291
I wanted to essentially center these statistics in the calculator area, but I don't know the width, so I used this:
solWrap.offsetWidth = outputTitles.offsetWidth + outputStats.offsetWidth + "px";
Cool, should work right? It turns out it doesn't and that's because outputStats is HIGHLY greedy and uses more width than it needs, and in fact, it actually uses all the remaining width available.
What can I do? Don't throw Jquery at me. Libraries are nice but I prefer sweet, sweet vanilla.
Edit: This is what I want: http://i.imgur.com/l6l4XD5.jpg
I want that effect, but that was achieved through actually literally setting the width of the solWrap div. Since this calculator is dynamic, I want the width dynamically generated.
New Edit: No one has answered correctly yet.
Here is what is going on:
JavaScript is generating content inside two divs:
Sample Variance: 12.212
Population Variace: 12.291
Div 1 will contain "Sample Variance Populati..."
And the other div will contain the data.
These are inside of the calculator text area which has a width of 400px and are both being displayed as inline-blocks.
The thing is when JavaScript generates this content inside of the divs, it does it corrently for the "sample variance...". It sets the width to the smallest possible value it can have.
But when JavaScript generates the content inside the div for the numbers, it sets the width way bigger than it needs to be and in fact takes up the rest of the area inside the calculator div.
How can I force the div that contains the numbers to be as small as it can?]
SOLUTION: I found a solution. Instead of display: inline-block, I used display: table and set the inner divs to display:table cell and it worked.
Try this:
Live demo
html
<form id="calcForm">
<div id="outercalcTextArea">
<div id="calcTextArea" contenteditable="true">
</div>
</div>
<div id="calcButton"><center><button id="submit" type="submit">Submit</button></center></div>
</form>
css
#outercalcTextArea{
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #C9C9C9;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset, -5px -5px 0 0 #F5F5F6, 5px 5px 0 0 #F5F5F6, 5px 0 0 0 #F5F5F6, 0 5px 0 0 #F5F5F6, 5px -5px 0 0 #F5F5F6, -5px 5px 0 0 #F5F5F6;
border-radius: 2px 2px 2px 2px;
min-width: 400px;
width:auto;
font-size:12px;
height:200px;
white-space:nowrap;
}
#calcTextArea {
width:100%;
height:100%;
padding: 8px;
padding-left:21%;
box-sizing:border-box;
}
html
<div id="solWrap" class='parentDiv'>
....Child divs
css
.parentDiv {
width: 100%;
text-align:center;
}
.chilDiv {
width: 90%;
text-align:left;
margin-left:auto;
margin-right:auto;
}
I apologize if I'm way off here but why can't you use a table?
<table id="stats_table">
<tbody id="stats_table_body">
<tr>
<td class="title">Sample Variance:</td>
<td class="value">12.212</td>
</tr>
<tr>
<td class="title">Population Variace:</td>
<td class="value">12.291</td>
</tr>
</tbody>
</table>
If you need to create though javascript:
var myStats = [{title: 'Sample Variance', value: 12.212},
{title: 'Population Variace', value: 12.291}];
function makeStatsTable(stats){
var table = document.getElementById("stats_table_body");
stats.forEach(function(stat){
var tr = document.createElement("tr");
var title = document.createElement("td");
title.className = "title";
title.textContent = stat.title;
tr.appendChild( title );
var value = document.createElement("td");
value.className = "value";
value.textContent = stat.value;
tr.appendChild( value );
table.appendChild( tr );
});
}
makeStatsTable( myStats );
Here is a jsfiddle: http://jsfiddle.net/xiondark2008/8X7MZ/
So I want a DIV's (splashSquareTitle) padding-bottom to translate into it's containing DIV's (splashSquare) negative margin-top, I'm not sure but is the percentages creating the problem? any help is much appreciated.
I'm not trying to get the DIV's (splashSquareTitle) padding-bottom to swap out to the other DIV's (splashSquare) margin-top, I want it to emulate DIV's (splashSquareTitle) padding-bottom.
HTML
<div class="splashSquare">
<div class="splashSquareTitle greenBG">
<img src="img/placeholder/beach_icon.svg" alt="icon small" />
<h5>Playground</h5>
</div>
<img src="img/placeholder/splash_square_placeholder.jpg" class="splashSquareImage" alt="splash square image" />
<div class="splashSquareInfo">
<h5>TiPai Playground</h5>
<h5>Henderson, Auckland</h5>
</div>
<div class="splashSquareBuffer"></div>
</div>
CSS
.splashSquare{
float:left;
position:relative;
width:50%;
max-width:320px;
color:#ffffff;
border-bottom:1px solid #ffffff;
-moz-box-shadow:inset 0px 1px #ffffff;
-webkit-box-shadow:inset 0px 1px #ffffff;
box-shadow:inset 0px 1px #ffffff;
}
.splashSquareTitle{
float:left;
width:100%;
padding-bottom:16%;
}
JQUERY
$(function(){
var splashheaderheight = $("div.splashSquareTitle").paddingBottom();
var marginTop = parseInt(splashheaderheight) * -1;
$("div.splashSquare").css("marginTop", marginTop + "px");
$(window).resize(function() {
var splashheaderheight = $("div.splashSquareTitle").paddingBottom();
var marginTop = parseInt(splashheaderheight) * -1;
$("div.splashSquare").css("marginTop", marginTop + "px");
});
});
here's the jsfiddle
If interpreting requirement accurately, apply (defined) css property of div.splashSquareTitle padding-bottom to (undefined) css property of div.splashSquare margin-top ?
Try this
$(document).ready(function() {
(function($) {
$.fn.getProp = function(prop) {
var props = window.getComputedStyle (
$(this).get(0)
).getPropertyValue(prop);
return props
};
})(jQuery);
function translatePadding() {
var splashheaderheight = $("div.splashSquareTitle").getProp("padding-bottom");
return $("div.splashSquare").css("margin-top", "-"+splashheaderheight);
};
translatePadding();
$(window).resize(function() {
return translatePadding()
});
});
jsfiddle http://jsfiddle.net/guest271314/f2tLS/
Hope this helps
Unfortunately, I'm not much of a jQuery guru, I'm trying to recreate the image fade/blur featured on medium. Here's an example -https://medium.com/matter/76d9913c6011
If you scroll down the page you'll notice some images, that progressively fade in/out as you scroll. Upon inspecting the code, I noticed there are two version of the image to create the effect, a regular version and another which has been blurred.
As far as I know, things are setup like this:
<section class=
"section-bottom-center section-image-full section-using-canvas"
data-scroll="native">
<div class="section-background" data-height="2130" data-image-id=
"1*ladXngaMeWEqp1R18uSSQA.jpeg" data-scroll="post-section" data-width=
"3200">
<div class="section-background-image" style=
"background-image: url(https://d262ilb51hltx0.cloudfront.net/max/700/gradv/29/81/40/1*ladXngaMeWEqp1R18uSSQA.jpeg);">
</div><br>
</div>
<div class="section-inner layout-single-column">
<p>SOME TEXT THAT FADES OVER THE IMAGE</p>
</div>
</section>
I found some of the jQuery, unfortunately I don't really understand it that well, so I can't recreate it.
var qm = function(a, b) {
var c = '\x3cdiv class\x3d"section-background' + (a.hasFocus ? " media-has-focus" : "") + '"' + ("section-image-full" == a.imageLayout ? ' data-scroll\x3d"post-section"' : "") + 'data-image-id\x3d"' + (0,z.N)(a.backgroundImage.id) + '"', d;
d = a.backgroundImage;
d = (d.originalWidth ? ' data-width\x3d"' + (0,z.N)(d.originalWidth) + '"' : "") + (d.originalHeight ? ' data-height\x3d"' + (0,z.N)(d.originalHeight) + '"' : "") + (d.filter ? ' data-filter\x3d"' + (0,z.N)(d.filter) + '"' : "") + (d.backgroundSize ? ' data-image-style\x3d"' + (0,z.N)(d.backgroundSize) + '"' : "");
c = c + d + "\x3e";
c = "section-image-full" == a.imageLayout ? c + ('\x3cdiv class\x3d"section-background-image" style\x3d"background-image: url(' + (0,z.N)((0,z.P)(b.miroUrl)) + "/max/" + (0,z.N)("700".replace(ji, ki)) + "/gradv/29/81/40/" + (0,z.N)(String(a.backgroundImage.id).replace(ji, ki)) + ');"\x3e\x3c/div\x3e\x3cbr\x3e') : "section-image-left" == a.imageLayout || "section-image-right" == a.imageLayout ? c + ('\x3cimg src\x3d"' + (0,z.N)((0,z.P)(b.miroUrl)) + "/max/" + (0,z.N)(b.postColumnWidth) + "/multiply/grey/" +
(0,z.N)(a.backgroundImage.id) + '"\x3e') : c + "\x3cbr\x3e";
return c + "\x3c/div\x3e";
};
One thing I did notice, is rather than the the two images simply fading in/out - the fading level is somehow bound to the scroll, so when you stop scrolling the images stop fading. This is a really nice effect.
P.S I'm looking to do this as simply as possible, preferably without jQuery plugins.
Thanks
Check out Andreas Storm's Medium Blur scrolling effect on Codepen.
HTML:
<div class='blurImg'>
<div style="background-image: url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/60/darken/25/1*4ncz3hLxmL8E_bUh-0z62w.jpeg')"></div>
<div class='blur' style="background-image: url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/40/darken/50/blur/50/1*4ncz3hLxmL8E_bUh-0z62w.jpeg')"></div>
</div>
<header>
<div>
<h1>
Medium
</h1>
<p>
Everyone’s stories and ideas
</p>
<a href='https://medium.com/' title='Medium'>Learn more</a>
</div>
<nav role='navigation'>
<ul>
<li>
<a class='active' href='#'>Reading List</a>
</li>
<li>
<a href='#'>Bookmarks</a>
</li>
<li>
<a href='#'>Top 100</a>
</li>
</ul>
</nav>
</header>
<div class='container'>
<div></div>
</div>
CSS:
body
font-size 14px
font-family Sans-Serif
*
box-sizing border-box
a
text-decoration none
.blurImg
position relative
width 100%
height 440px
z-index -1
top 0
left 0
& > div
position fixed
width 100%
height 440px
background-repeat no-repeat
background-size cover
background-position center center
.blur
opacity 0
header
z-index 1
position absolute
top 0
width 100%
padding 0px 20px
& > div
max-width 600px
margin 0 auto
padding-top 150px
height 380px
text-align center
color White
a
font-size 0.8em
letter-spacing 0.08em
color rgba(255,255,255,0.85)
line-height 30px
padding 7px 14px
border 1px solid rgba(255,255,255,0.3)
border-radius 2em
transition all 0.3s ease
&:hover
background white
color Gray
p
font-size 1.5em
margin-bottom 0.7em
font-family Times New Roman
h1
font-weight 800
font-size 3.4em
margin-bottom 0.2em
nav
max-width 600px
margin 0 auto
height 60px
border-top 1px rgba(255,255,255,0.35) solid
ul
li
display inline-block
margin-right 20px
a
font-weight 800
font-size 11px
text-transform uppercase
letter-spacing .2em
color rgba(255,255,255,0.5)
transition color 0.3s linear
line-height 60px
display block
&.active
box-shadow 0px -1px 0px white
nav ul li a.active, nav ul li a:hover
color white
.container
height 1300px
background white
z-index 1
padding 0px 20px
div
max-width 600px
margin 0 auto
padding-top 40px
CoffeeScript:
$(window).scroll ->
oVal = ($(window).scrollTop() / 240)
$(".blur").css "opacity", oVal
I also was trying to figure out how they managed this at Medium.
The minified javascript snippet you are pointing out doesn't seems to me being responsible for the blur effect. In my opinion they also process through a canvas.
Check out this SO answer:
Coderwall blurred background effect with canvas
hope that helps. (unfortunately this uses a bit of jquery but you can skip that part ;) )