Border width based on screen size - javascript

I am creating diagonal top and bottom pieces to sections on a website.
I was wondering if there is a simple jquery solution to style the border width based on the screen size? I can't use a set long size with overflow: hidden because the diagonal line isn't the correct angles.
The only way I can see to make the angles consistent is to have jquery set the border width based on the screen size.
.odd-section-top {
border-width: 0px 0 60px 2880px;
border-style: solid solid solid dashed;
border-color: transparent transparent #23264c transparent;
}
.odd-section-middle {
min-height: 600px;
padding: 50px 0;
background: #23264c;
}
.odd-section-bottom {
border-width: 0 2880px 60px 0;
border-style: solid dashed solid solid;
border-color: transparent #23264c transparent transparent;
}
Jquery would then generate a style that would read
.odd-section-top {
border-left-width:
}
.odd-section-bottom {
border-right-width:
}
And populate the numbers based on the screen size.
Thank you!

You could do everything within Javascript:
var borderWidth = $elem.css("border-left-width");
$(".odd-section-top").css("border-width", borderWidth);
You can adapt it to your desired logic.

Tried this but I know I messed up some of the syntax. I'm still newer to javascript and jquery. Is this on the right track?
<script>
$(document).ready(function () {
responsiveradio.initBorders = function () {
var $window = $(window),
$topOddBox = $('.odd-section-top'),
$botOddBox = $('.odd-section-bottom'),
$topEvenBox = $('.even-section-top'),
$botEvenBox = $('.even-section-bottom'),
;
function resetBorders() {
var w = $window.width(),
$topOddBox.css('border-left-width', w);
$botOddBox.css('border-right-width', w);
$topEvenBox.css('border-left-width', w);
$botEvenBox.css('border-right-width', w);
}
});
</script>

Related

React on hover over box-shadow and change color of that specific box-shadow

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>

Highlight HTML element just like the Chrome Dev Tools in Javascript

WolfPack!
I want to highlight any element I hover over just like the Chrome Dev Tools does it.
Picture of Chrome Dev Tools
Notice how the entire element is drenched in a blue tint? This is not as simple as adding a background color or linear-gradient because the insides of input elements are still white.
I've tried using the different filter methods like hue rotate, contrast w/brightness, and even THIS MONSTER, but nothing seems to work.
The closest I've been is just a nice looking box-shadow around the elements for highlighting.
Javascript: element.classList.add('anotherClass')
CSS: box-shadow: 0 0 5px #3fd290, 0 0 10px #36A9F7, 0 0 15px #36A9F7, 0 0 20px #36A9F7 !important;
Help me make my dreams come true
If anyone cares what I did to solve it, here is my code (thanks to the help of Roope):
onMouseEnter:
highlightElement(event){
const hoverableElements = document.querySelectorAll('[data-attr]');
for(let elm of hoverableElements){
const styles = elm.getBoundingClientRect()
if(event.currentTarget.textContent === elm.dataset.dataAttr) {
let div = document.createElement('div');
div.className = 'anotherClass';
div.style.position = 'absolute';
div.style.content = '';
div.style.height = `${styles.height}px`;
div.style.width = `${styles.width}px`;
div.style.top = `${styles.top}px`;
div.style.right = `${styles.right}px`;
div.style.bottom = `${styles.bottom}px`;
div.style.left = `${styles.left}px`;
div.style.background = '#05f';
div.style.opacity = '0.25';
document.body.appendChild(div);
}
}
}
onMouseLeave:
onLeave(event){
const anotherClass = document.getElementsByClassName("anotherClass");
for (let elm of anotherClass) {
document.body.removeChild(elm)
}
}
After looping through the querySelectorAll (to get the desired elements), I used element.getBoundingClientRect() to get the exact height, width, top, right, bottom, left of the element.. That way, the new div created will take the exact size and location of the element.
CSS didn't quite cut it because other stylesheets would override/mess the styling up.
If all you want is the blue transparent highlight, just add a pseudo element over the hovered element. Positioning may of course be absolute of fixed for the element as well.
.element {
float: left;
position: relative;
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid #000;
text-align: center;
line-height: 100px;
}
.element:hover::after {
position: absolute;
display: block;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #05f;
opacity: 0.25;
}
.tall {
height: 200px;
}
<div class="element">Element</div>
<div class="element tall">Element</div>
<div class="element">Element</div>

How to position an arrow based on the position of a different object on the page in Javascript/Mootools

I've created a script that positions a box on page based off of the position of an element on hover. Works just fine, however in addition the moving said box, I want to position an arrow inside the box to point at the hovered over element. I just can't figure out how to though.
I've tried positioning it horizontally similarly to how I positioned it vertically using, but that doesn't even come close to being correct. My javascript:
docSize = $('innerbody').getSize();
hint_obj = $('hint_obj');
hint_arr = hint_obj.getChildren('.hint_arr')[0];
$$('.item').addEvents({
mouseenter: function(e) {
var el = e.target;
var elemPosition = el.getPosition();
hint_obj.setStyle('bottom', (docSize.y - elemPosition.y - 80));
hint_arr.setStyle('left', (docSize.x - elemPosition.x));
},
mouseout: function(e) {
hint_obj.setStyle('bottom', null);
}
});
I've made a mockup of what I'm attempting to do here: http://jsfiddle.net/0jowade8/2/
Any advice would be appreciated.
As Dimitar Christoff mentioned, it can be solved with CSS only by using :after pseudo-element.
.item:hover:after {
border-bottom: 14px solid rgba(255, 255, 255, 1);
border-left: 14px solid rgba(0, 0, 0, 0);
border-right: 14px solid rgba(0, 0, 0, 0);
content: "";
position: absolute;
top: 66px;
left: 26px;
}
FIDDLE

get the velocity value of a swipe?

hammer.js (http://hammerjs.github.io/recognizer-swipe/) checks the velocity of the swipe, I wonder how to get this value in order to determent how big the margin-left of my element #visitContent should be and get a smoother swipe.
html
<section id="visits">
<div id='visitsContent'>
<div></div>
<div></div>
<div></div>
</div>
</section>
Javascript
var visits = document.getElementById('visits');
var mc = new Hammer(visits, {velocity:0.80});
mc.on("swipeleft", function(ev) {
$('#visitsContent').css({
marginLeft : '-=200px'
})
});
mc.on("swiperight", function(ev) {
$('#visitsContent').css({
marginLeft : '+=200px'
})
});
sass
#visits
width: 100%
padding: 0px
border-bottom: none
background-color: $backgroundColorSecond
margin-bottom: 10px
margin-left: -20px
#visitsContent
div
width: 180px
height: 180px
float: left
margin-left: 5px
background-color: green
color: black
text-align: center
there is also a fiddle
http://jsfiddle.net/mL911mqn/
Judging from your jsfiddle it looks like you're using the pan gesture now instead of the swipe gesture. So in your pan event handler, you should be able to access the drag velocity like this:
function panGestureHandler(ev){
var velocity = ev.gesture.velocity;
var velocityX = ev.gesture.velocityX;
var velocityY = ev.gesture.velocityY;
console.log("horizontal drag speed = " + velocityX);
}

How to add border to galleria big image?

Hi I want to add a border to galleria big image. How can I give that?
I give like this
div.galleria-image img{ border: 5px solid #ccc; }
but it cuts right or bottom border and also shows a top border to the thumbail images.
this is my css file.
.galleria-container{position:relative;overflow:hidden; height:570px; margin-bottom:30px; }
.galleria-thumbnails-container { }
.galleria-container img{-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;}
.galleria-stage{position:absolute;top:10px;bottom:80px;left:0px;right:10px;overflow:hidden;}
div.galleria-stage img { border: 1px solid red; }
.galleria-thumbnails-container{height:65px;bottom:0;position:absolute;left:0px;right:10px;z-index:2;}
.galleria-carousel .galleria-thumbnails-list{margin-left:30px;margin-right:30px;}
.galleria-thumbnails .galleria-image{height:50px;width:60px;background:#fff;margin:0 13px 0 0; float:left;cursor:pointer;}
.galleria-counter{position:absolute;bottom:10px;left:10px;text-align:right;color:#fff;font:normal 11px/1 arial,sans-serif;z-index:2; }
.galleria-loader{background:#000;width:20px;height:20px;position:absolute;top:10px;right:10px;z-index:2;display:none;background:url(images/classic-loader.gif) no-repeat 2px 2px; }
.galleria-info{width:50%;top:15px;left:15px;z-index:2;position:absolute;}
.galleria-info-text{background-color:#000;background-color:rgba(0,0,0,.9);padding: 12px;display:none;}
.galleria-info-title{font:bold 12px/1.1 arial,sans-serif;margin:0;color:#fff;}
.galleria-info-description{font:italic 12px/1.4 georgia,serif;margin:0;color:#bbb; }
.galleria-info-title+.galleria-info-description{margin-top:7px;}
.galleria-info-close{width:9px;height:9px;position:absolute;top:5px;right:5px;background-position:-753px -11px;opacity:.5;cursor:pointer;display:none;}
.galleria-info-link{background-position:-669px -5px;opacity:.8;position:absolute;width:20px;height:20px;cursor:pointer;background-color:#000;}
.galleria-info-link:hover,
.galleria-info-close:hover{opacity:.5; }
.galleria-image-nav{position:absolute;top:50%;margin-top:-15px;width:100%;height:31px;left:0; }
.galleria-image-nav-left,
.galleria-image-nav-right{opacity:.7;cursor:pointer;width:16px;height:31px;position:absolute;left:10px;z-index:2;}
.galleria-image-nav-right{left:auto;right:10px;background-position:-300px 0;z-index:2;}
.galleria-image-nav-left:hover,
.galleria-image-nav-right:hover{opacity:1.0;}
.galleria-thumb-nav-left,
.galleria-thumb-nav-right{cursor:pointer;display:none;background-position:-495px 11px;position:absolute;left:0;top:0;height:60px;width:23px;z-index:3;opacity:1.0;}
.galleria-thumb-nav-right{background-position:-578px 11px;border-right:none;right:0;left:auto;}
.galleria-thumbnails-container .disabled,
.galleria-thumbnails-container .disabled:hover{opacity:.6;cursor:default; }
.galleria-thumb-nav-left:hover,
.galleria-thumb-nav-right:hover{opacity:1;/*background-color:#111;*/}
.galleria-carousel .galleria-thumb-nav-left,
.galleria-carousel .galleria-thumb-nav-right{display:block; }
.galleria-thumb-nav-left,
.galleria-thumb-nav-right,
.galleria-info-link,
.galleria-info-close,
.galleria-image-nav-left,
.galleria-image-nav-right{background-image:url(images/classic-map.png);background-repeat:no-repeat;}
div.galleria-image img{ border: 5px solid #ccc; }
any body knows the solution please help me.
When you call galleria(), set the image_margin option to 2 (note: when I tried 1, the bottom margin was chopped). This is what I use:
$('#gallery').galleria({
autoplay: 5000,
data_source: slides,
pause_on_interaction: false,
transition: 'fade',
image_margin: 2
});
My site's css file has the following definition to add a 1px gray border to the large image:
.galleria-stage img {
border: 1px solid #cccccc;
}
Try adding border: 1px solid red; to div.galleria-image img
div.galleria-image img{ border: 1px
solid red; }
Edit: Seems like CSS above will results in the thumbnails having borders too.
Try this:
div.galleria-stage img { border: 1px solid red; }
You need to show the overflow of the parent div's i had this problem and i added and it worked great
.galleria-container {
overflow: visible !important;
}
.galleria-image, .galleria-stage {
overflow: visible !important;
}
.galleria-stage .galleria-images .galleria-image img {
border: 1px solid #333333;
}
It would appear that the imageMargin option needs to be set to twice what it should be.
http://galleria.io/docs/options/imageMargin/
Like I've been trying to put a 6px border around it, and the bottom kept getting cut off, until I set imageMargin to 12.
If your border is for example 4 px then you should set the image_margin variable to 8, if the border is 8px then set it to 16 (the double since you have two sides).
$('#gallery').galleria({
image_margin: 8
});

Categories