So I have this canvas that I have been working on for the last couple of weeks and finally getting things in order. I am using pointer-events: none; on the top 3 canvas's and then pointer-events: auto; on the bottom canvas that I am looking at to set the cursor position. But, the cursor is the wrong one. It looks like the move cursor (right above the G in the word testing). I need it to look like the text cursor. So my question is: Is there a way to continue to use the pointer-events and still have the text cursor when I am hovering over the sign? If this is a simple fix I apologize I don't know all that much about pointer-events. What I could find said to add a div around the html I want to change the text cursor to and then set that divs cursor style to text which didn't give me the desired effect.
What I did:
<div style="cursor: text">
<canvas1 style=pointer-events: none;>
<canvas2 style=pointer-events: none;>
<canvas3 style=pointer-events: none;>
<canvas1 style=pointer-events: auto;>
</div>
^^^This is what the examples I have found said to do and this did not give me the right cursor
HTML:
<div class="text-area" ng-class="{'tc-pointer-none':vm.scope.isReadOnly}">
<div id="{{vm.isTextArea ? vm.textAreaId : vm.formIdentifier+'phase'+ vm.phaseIndex}}matrixCore" tabindex="0"
ng-keydown="vm.onKeyDown($event)" ng-keypress="vm.onType($event)" ng-focus="vm.isEditable=true"
ng-blur="vm.isEditable=false">
<!-- Shows cursor -->
<div class="text-cursor" style="cursor: text">
<div class="sign">
<div id="{{vm.isTextArea?vm.textAreaId : vm.formIdentifier + 'phase' + vm.phaseIndex}}cursor1"
class="cursor cursor-canvas"
ng-style="{'opacity':(vm.scope.isReadOnly || !vm.isEditable)?'0':'1'}">
</div>
<!-- End shows cursor -->
<!-- Shows text -->
<canvas class="text-canvas" id="{{vm.canvas_uuid}}"></canvas>
<!-- End shows text -->
<!-- Shows LED canvas-->
<div id="{{vm.baseDiv_uuid}}" class="base-canvas">
<!--ng-style="{top:vm.isTextArea}">-->
<canvas id="{{vm.baseCanvas_uuid}}"></canvas>
</div>
<!-- End shows LED canvas -->
</div>
</div>
</div>
</div>
CSS:
/* Matrix */
.cursor-canvas .special-canvas {
top: 0px;
left: 0px;
}
.base-canvas {
z-index: 2;
pointer-events: auto;
position: absolute;
outline: none;
top: 0px;
left: 0px;
}
.cursor-canvas {
z-index: 4;
height: 80px;
position: absolute;
outline: none;
pointer-events: none;
}
.base-canvas .special-canvas .text-area .cursor-canvas {
cursor: text;
}
.text-canvas {
z-index: 3;
pointer-events: none;
}
.text-area {
pointer-events: none;
font-size: 0;
}
.sign {
position: relative;
}
/* End matrix */
Related
https://github.com/UneSaltedFish/landingpage.git (github link to view full html/css/js)
Here I am developing a landing page, and On the right bar vector picture, I used a hover effect(When I enter this pic, It will change to another picture and there will have two clickable text on it.)
<div class="rightCon">
<img onmouseenter="right2()" onmouseleave="right1()" src="right.png" alt="right" class="right" id = "right">
<div id= "right1" class = "text"><pre> 2000<br>ARCHIVAL<br> SITE<br></pre></div>
<div id= "right2" class = "text"><pre> 2012<br>ARCHIVAL<br> SITE<br></pre></div>
</div>
and it is looks like this.
img
Here is the css code:
a{
color:black;
text-decoration: none;
}
.rightCon {
position: absolute;
color: white;
}
#right1{
z-index: 10;
position: absolute;
left:850px;
top:150px;
opacity: 0;
}
#right2{
z-index: 10;
position: absolute;
left:853px;
top:350px;
opacity: 0;
}
.text{
font-family: "Arial Rounded MT Bold", sans-serif;
font-size: 30px;
}
and the js code
function right2(){
document.getElementById("right").src = "right2.png";
document.getElementById("right1").style.opacity=1;
document.getElementById("right2").style.opacity=1;
}
function right1(){
document.getElementById("right").src = "right.png";
document.getElementById("right1").style.opacity=0;
document.getElementById("right2").style.opacity=0;
}
The problem is the onmouseenter is work when go in to right area, but when I go in to right1 and right 2 area, onmouseleave is work, which I don't want to. I want this hover only work when enter right and leave right.
After I search online, I try to make div as a child of img but I don't know How to make children of a img.And I am stuck here.
Thank you in advance for all help.
If you want the events to be on the image and the other siblings, you should put the event listeners on their parent. Now anywhere you hover in the parent, the mouse will remain.
<div class="rightCon" nmouseenter="right2()" onmouseleave="right1()">
<img o src="right.png" alt="right" class="right" id = "right">
...
Other option just pure css
.rightCon .details {
display: none;
}
.rightCon:hover .default {
display: none;
}
.rightCon:hover .details {
display: block;
}
<div class="rightCon">
<img class="default" src="http://placekitten.com/g/400/200">
<img class="details" src="http://placekitten.com/400/200">
<div class="default">FOOOOOO</div>
<div class="details">Meow</div>
</div>
I am playing with jquery recently and right now - trying to get animations to work.
Whole idea is basically a fullscreen slider. We have few sections with position absolute and height 100% of the document - in jquery we're playing with z-index. It's quite simply, but I can't figure out how to make a proper slide left and right animations. It's always breaking.
$(document).ready(function() {
var windowWidth = $(window).width();
var slideCount = $('.slide').length;
$('button#next').on('click', function() {
var slideActive = $('.slide.active');
var nextSlide = slideActive.next('.slide');
nextSlide.addClass('active').animate({
'z-index' : '2',
'left' : windowWidth
},500);
slideActive.removeClass('active');
});
});;
body, html {
height: 100%;
position: relative;
}
body {
font-size: 14px;
color: #fff;
}
nav {
position: absolute;
top: 2rem;
right: 2rem;
z-index: 99;
}
section {
height: 100%;
display: flex;
align-items: center;
position: absolute;
right: 0;
left: 0;
}
section#home {
background-color: #2c3e50;
}
section#aboutMe {
background-color: #e74c3c;
}
section#smthElse {
background-color: #1abc9c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
<button id="prev">Back</button>
<button id="next">Next</button>
</nav>
<section id="home" class="slide active">
<div class="container">
<p>1</p>
</div>
</section>
<section id="aboutMe" class="slide">
<div class="container">
<p>2</p>
</div>
</section>
<section id="smthElse" class="slide">
<div class="container">
<p>3</p>
</div>
</section>
Before that I tried just by adding class with css defined in .css and animating it (jquery ui) but effect was more or less the same.
All I want to achive is a simple slide functions of my sections.
Example behaviour: http://codepen.io/jibbon/pen/BoisC
Also, I am not looking for ready solutions as I need as simple code as possible to learn and develop it in my way.
Thank you guys!
There are many things that you can improve in your code to achieve what you want.
First, active class is set to a slide but isn't applied any special CSS rule, as you set position: absolute to your divs, you must set z-index to overlap one above other, initializing your app.
Here there is a idea, how to implement what you want:
https://jsfiddle.net/nz2hL6vn/1/
I am trying to make a page scale or mobile compatible I think is the term. The problem with my page right now is that it looks good at a certain size but when I drag the browser, the background picture of my page covers the "Services" Title the <section> portion.
Here is the jsFiddle: http://jsfiddle.net/eg18dfy0/4/ Not sure how useful this would be as local files are not included in here.
Normal:
Dragging:
Here is my code:
HTML snippet the matters:
<header>
<div class="background_image">
</div>
<div class="welcome-text-container">
<div class="row">
<div class="welcome-text1">Welcome!</div>
<div class="welcome-text2">BE GOOFY, TAKE A PICTURE!</div>
<div class="btn-row">
TELL ME MORE
</div>
</div>
</div>
</header>
<!-- services -->
<section id="services">
<div class="container">
<div class="service-title">Services</div>
<div class="service-caption">What we'll do for you</div>
</div>
</section>
CSS:
.background_image {
background-image: image-url("header-bg.jpg");
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%;
position: absolute;
/* (img-height / img-width * width) */
/* (853 / 1280 * 100) */
}
/* Services */
#services {
padding-top: 110px;
margin-top: 75px;
}
.service-title {
text-align: center;
font-size: 55px;
font-weight: 700;
}
.service-caption {
text-align: center;
font-size: 20px;
}
This should solve your problem:
Fiddle illustrating fix
You're setting your background image in a div that's getting higher stacking priority based on document flow, so it's overlapping your subsequent divs.
Here's the CSS I added to solve the problem:
.container > div.background-image {
z-index: 1;
}
.container > div {
position: relative;
z-index: 2;
}
There are better ways to do this (i.e. not creating a separate div for a background image), but this will solve your issue without major changes to document structure.
All credit to http://placehold.it for the placeholder image. It's a life-saver if you're going to be solving CSS issues on StackOverflow.
I'm trying to make a div that I have on top of another div show up when you click on something.
This is the code for the two divs, without all the stuff that's within each:
<div id="randomarticle_enlarge">
<h1></h1>
<h4></h4>
<p></p>
<p></p>
</div>
<div class="bodybag">
<h1></h1>
<h4></h4>
<p></p>
<p></p>
</div>
Then I have css for each, of course:
.bodybag {
width:960px;
}
#randomarticle_englarge {
height:750px;
width:960px;
position:absolute;
z-index:2;
margin-top:1px;
padding-left:20px;
padding-right:20px;
display: none;
}
Am I supposed to have the bodybag class have a z-index and a position:relative? Because even though I don't it's working (at this point).
Anyway, I have this script written that's doing exactly what I want it to do:
$(document).ready(function() {
$('.popular').click(function() {
$('#textmask').fadeTo( 'fast', 0.1);
$('#backgroundmask').css('background-color', 'white');
});
});
And all I want to happen next is that as the textmask and the backgroundmask fade in/change as they should and do, is for the randomarticle_enlarge div to show up.
I've tried using .toggle and .toggleClass and .slideToggle and .show but nothing is working.
Absolute positioning must be relative to a container. In order to absolutely position something you need to indicate what it's absolutely positioned to. Something along these lines.
<div id="randomarticle_englargeContainer">
<div id="randomarticle_englarge">
</div>
<div class="bodybag">
</div>
</div>
#randomarticle_englargeContainer {
position: relative;
}
.bodybag {
position: absolute;
left: 0;
top: 0;
}
When copying everything from above I have no issues using $('#randomarticle_englarge').toggle();. Check your browser's console for errors; you might find the answers there.
I'm not exactly sure about what would you like to do with the divs, but I created an example for you, maybe this is what you want:
LIVE DEMO
So there is two divs. The 2nd div covers the 1st one. Clicking on a 'button' hides the 2nd div, so the 1st one reveals. Clicking again the 'button', the 2nd div appears and covers the 1st one again.
HTML:
<div class="popular">Click me!</div>
<div class="container">
<div id="randomarticle_enlarge">
<h1>A</h1>
<h4>B</h4>
<p>C</p>
<p>D</p>
</div>
<div class="bodybag">
<h1>E</h1>
<h4>F</h4>
<p>G</p>
<p>H</p>
</div>
</div>
CSS:
.container {
position: relative;
}
.bodybag {
width: 100px;
height: 200px;
background-color: red;
}
#randomarticle_enlarge {
width: 100px;
height: 200px;
background-color: green;
position: absolute;
top: 0;
left: 0;
}
.hide {
display: none;
}
jQuery:
$(document).ready(function() {
$('.popular').click(function() {
$('#randomarticle_enlarge').toggleClass('hide');
});
});
What I want to do is to show the top photo (which is set to visibility: hidden) on hover. I have two photos positioned on each other like this:
<div class="frame">
<img src="./img/portfolio/default1.jpg" width="300" height="178" alt="Title Here"></a>
<div class="boxwrapper" style="visibility: hidden;"></div>
</div>
Added the second photo through css:
.boxwrapper {
background: url("../img/boxPlus.gif");
position: relative;
width: 300px;
height: 178px;
left: -6px;
top: -184px;
z-index: 1000;
}
Is it possible to do with css? Tried (and several more options):
#frame img:hover .boxwrapper {
visibility: visible;
}
But it is not working. Or this is only possible with javascript? If yes, please give some tips as I am not too much of javascript guy. Thanks!
You could set the photo as background of the boxwrapper
.boxwrapper{
background: url("../img/boxPlus.gif");
}
.boxwrapper:hover{
background: url("../img/portfolio/default1.jpg");
}
if this is not possible you could add it as background trough a style attribute inside your html
<div class="boxwrapper" style="background: url('../img/boxPlus.gif');" ></div>
You'd have to put the :hover class on a parent container. CSS does not allow such things to trickle "up" the tree, only down.
.boxwrapper {
display: none;
}
.frame:hover .boxwrapper {
display: block;
}