i'm about to write my own interactive Tutorial with HTML, Javascript and css. Now i had the idea to create an DIV-element that represents an glowing rectangle to mark specific areas. The problem is when I change the position of the glow-rectangle, to highlight an element that is clickable, the glow rectangle is overlapping the clickable element. So the clickable element is no longer clickable. Is there a way to "disable" the glow-rectangle so it's visible but no longer blocking the underlaying element?
Here is my code:
<div id="hauptteil">
<div id="block" onclick="step2();" style="cursor: pointer">
</div>
<div id="glowDiv">
<div id="glow" class="glow"><img src="images/transBlock.png"/></div>
</div>
</div>
Here is the css code:
#glowDiv {
width: 200px;
height: 100px;
position: absolute;
top: 200px;
left: 200px;
}
.glow {
margin: auto;
width: 147px;
height: 90px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
}
#block {
width: 50px;
height: 50px;
background: red;
}
To visualize my problem. On my page I have a DIV-Element that is visible as a red block. When I start my tutorial, I change the position of my glow-DIV to cover the red block. So it seems that the red block is glowing.
Back in 2013 you had to use a script to solve this problem, but nowadays, pointer-events is widely supported. Use it!
Normally you would just user the pointer-events css property. Guess what? IE doesn't support it... With a little help from our friend jquery we can emulate this however!
My approach is to capture the click event in the glow (the absolute positioned div) and check if there are any other elements overlapping the x-y coordinate of the mouse click.
Warning: jQuery ahead!
First just capture the click event:
$('.glow').on('click', function(e) { // our trick here });
Then determine the coordinates of the mouse cursor. Quite easy as jQuery helps us out by giving the coordinates in the event object
var cursorX = e.pageX;
var cursorY = e.pageY;
Now we need to traverse all dom elements that are possibly sitting below our glow div that we want to receive the click event as well.
$('.class-possibly-below').each(function(index, element) { // our calculations here });
If we can get the position relative to the window and it's width and height we can calculate if our cursor was over it while clicking. In that case our cursorX and cursorY values would be in between the left-position and left-position + width (and top- and height respectively) of our DOM element we're traversing. Yet again jQuery helps a bit:
var offset = $(element).offset();
xRangeMin = offset.left;
xRangeMax = offset.left + $(element).outerWidth();
We use offset() instead of position() because the latter returns the position relative to it's parent. And we use the outerWidth() and outerHeight() instead of width() and height() respectively because the former also includes padding and border.
Now check if the x and y coordinates are in between the range-min and range-max. If so, trigger the click event on this element.
if(cursorX >= xRangeMin && cursorX <= xRangeMax && ...) {
$(element).trigger('click');
}
You want some action? Check out this fiddle!
As I mentioned in my comment, a different approach would be to add the glow class to the active div:
<div id="hauptteil">
<div id="block" onclick="step2();" class="glow">
</div>
#block {
width: 50px;
height: 50px;
background: red;
}
.glow {
cursor:pointer;
-webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
}
You can use pointer-events: none; to ignore the possible click event of an element. However as stated in the comments the method you are doing does not seem to be the best of options.
#glowDiv {
width: 200px;
height: 100px;
position: absolute;
top: 200px;
left: 200px;
pointer-events: none;
}
The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.
Placing this on your overlaying element will make it transparent to click events.
However this does not work in IE
This is my suggestion am curious if anyone else has another option. I am using the same thing on my website and simply ignoring the overlay on IE using conditional tags.
Here's a simple pin you can check it out http://codepen.io/ElmahdiMahmoud/pen/Ewlto hope this can help!
Related
I want to grammatically modify the image of a tag and its not working only on devices (Android, iOS). It works fine in Chrome/desktop.
I tried Div, Span and Img tags but all have same behavior.
Please guide how I can change the background image.
I have already searched no# of questions and tried options but nothing works out for me.
HTML
<div class="healthCare_heading">
<span class="healthCare_heading span" onclick="Utilities.switchResultsULMaps('PageUL', 'MapsDiv')"></span>
</div>
CSS
.healthCare_heading {
float: left;
width: 100%;
box-shadow: inset 0 0 0 1000px rgba(13, 13, 13, 0.8);
}
.healthCare_heading span {
float: right;
margin-right: 0;
background-image: url(../images/phone/1x/healthIcon.png) ;
background-size: 25px 25px;
width: 30px;
height: 30px;
background-position: center;
background-color: rgba(16,138,177,0.6);
}
am using below JS code to change the background.
$(".healthCare_heading span").attr("style", "background-image:url(../images/phone/1x/healthCareBar_icon.png) no-repeat;margin-left: 0;background-size: 25px 25px;width: 30px;height: 30px;background-position: center;background-color: rgba(16,138,177,0.6);");
Note:- I also tried background-image:url() and background:url() but both dont work on device.
The problem is you are using the background-image property like the background shorthand property. The shorthand is background with the url and repeat properties like this
background: url('../images/phone/1x/healthCareBar_icon.png') no-repeat;
so your jquery would be
$(".healthCare_heading span").attr("style", "background: url('../images/phone/1x/healthCareBar_icon.png') no-repeat;margin-left: 0;background-size: 25px 25px;width: 30px;height: 30px;background-position: center;background-color: rgba(16,138,177,0.6);");
You may want to consider applying these styles with a css class selector and the jQuery .addClass() method, rather than changing the style property.
So I am trying to add a custom style to the select2 jquery plug, it is a tag like multi selector plugin. The way that select2 renders selected "tags" guides my css rules to try and style. select2 renders a <div> containing the selected tag text followed by an <a> to remove that selected tag if the user desires.
I want the close btn and the tag text to look like one block. I have it almost where I want but you can see that the <a> element and the div element vary in height by a pixel or two. I thought maybe this was a display:inline versus display:block issue but I have tried setting both the elements to display:inline-block with no luck, here is a jsfiddle, just select both option1 and option2 to see my issue:
http://jsfiddle.net/QRNqm/
And here is my code, remember I am using the select2 plugin also:
$(function(){
$('#mdlTags').select2();
});
.select2-search-choice-close {
padding: 2px 14px 3px 0;
border-radius: 2px 2px 2px 2px;
background: url(/images/projects/closeWhite.png) no-repeat 5px center #bdc6e5;
}
.select2-choices li div {
border-radius: 2px 2px 2px 2px;
color: #fff !important;
text-decoration: none;
padding: 3px 14px 3px 12px;
background-color: #bdc6e5;
}
<select multiple="multiple" id="mdlTags" class="skipMsDropdown" style="width:330px;">
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
</select>
Replace .select2-search-choice-close class with below:
.select2-search-choice-close {
padding: 2px 14px 3px 0;
border-radius: 2px 2px 2px 2px;
background: url(/images/projects/closeWhite.png) no-repeat 5px center #bdc6e5;
height: 14px; /* given height (actual 13px and 1px to adjust bottom margins) to adjust line-height of parent element */
margin-top: -1px; /* to adjust top margins to get in proper line */
}
Here is a working DEMO.
It's now on the same level. Here is the edited css.
.select2-search-choice-close {
background: url("/images/projects/closeWhite.png") no-repeat scroll 5px center #BDC6E5;
border-radius: 2px;
padding: 3px 14px 3px 0; // increase the top padding for 1 point.
}
.select2-search-choice-close {
background: url("select2.png") no-repeat scroll right top rgba(0, 0, 0, 0);
display: block;
font-size: 1px;
height: 13px;
outline: medium none;
position: absolute;
right: 3px; // Reduce the top position for 1 point
top: 3px;
width: 12px;
}
First off, you have one less pixel of top padding on the select2-search-choice-close style. But even once you fix that, there will still be a pixel of difference between the two elements.
If you take a look at the demo on the Select2 page, that's the way it appears there as well (with one vertical pixel difference between the two elements). The difference is that they are applying the unifying style on the container that holds these two elements, rather than styling each of these elements separately.
If you make these two changes, you end up with something like this:
http://jsfiddle.net/Cv6cH/
Please take a look at this link. Hover cursor on any movie thumbnail. Have you noticed that, all li elements moving down? How can I fix that problem?
Also, click on any thumbnail, player div will slide down. there is no box shadow under #player_container even if I set it in css files
#player_container{
display:none;
height:510px;
width: 100%;
background-image: url(images/bg/bg_tile.jpg);
margin-top: -510px;
padding-top: 20px;
-moz-box-shadow: 0px 10px 5px #888;
-webkit-box-shadow: 0px 10px 5px #888;
box-shadow: 0px 10px 5px #888;
}
On video add a transparent border seems to fix it
.video {
border: 1px solid transparent;
float: left;
font-size: 11px;
height: 150px;
margin: 0 25px 25px 0;
width: 228px;
}
There is a couple off different way to fix the next part off your question. One quick way is too add another container like
<div style="display: block;" class="gradient sh" id="player_container">
<div class="jquery-youtube-tubeplayer" id="player">
<div id="tubeplayer-player-container1324082555277"><iframe width="853" height="480" frameborder="0" src="http://www.youtube.com/embed/LxBGDijiii0?autoplay=1&autohide=1&controls=1&rel=0&fs=1&wmode=transparent&showinfo=0&modestbranding=0&start=0&theme=dark&color=red&enablejsapi=1&origin=http://tural.us" title="YouTube video player" allowfullscreen=""></iframe></div></div>.
<div class="bottomSpan"></div>
</div>
and put your box shadow on this
.bottomSpan {
box-shadow: 0 10px 5px #888888;
display: block;
height: 17px;
position: absolute;
width: 100%;
}
For me changing the margin on the corresponding < li > would make more sense.
That is because on hover you are adding a border which makes the container 2px bigger
the solution to give the initial class a border
.video {
border: 1px solid #fff
float: left;
font-size: 11px;
height: 150px;
margin: 0 25px 25px 0;
width: 228px;
}
Second Problem:
To make z-index work you need to give it a position:relative property
#player_container {
display: none;
height: 510px;
width: 100%;
background-image: url(images/bg/bg_tile.jpg);
padding-top: 20px;
-moz-box-shadow: 0px 10px 5px #888;
-webkit-box-shadow: 0px 10px 5px #888;
box-shadow: 0px 10px 5px #888;
z-index: 2;
position: relative;
}
You're adding a border when the mouse hovers but not reducing the size of the element. The "height" and "width" of an element, in the W3C box model, describe the size of the contents of a block element. The padding and the border are added to that.
Some browsers allow you to switch back to the "border-box" box sizing model:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
However Internet Explorer wont, I don't think, understand that. Maybe IE9 or 10 would understand:
-ms-box-sizing: border-box;
(You'd put that on the ".video" style.)
edit — as to the problem with the shadow on the player: there's no shadow because there's no room for a shadow. If you make the player box "position: absolute", and correspondingly adjust the content somehow (maybe give the "wrapper" div a big top padding the same as the player size) then you'll see a shadow.
You really should be using something like Firebug to play with the CSS interactively.
I'm afraid your mixing things up a bit:
Your background-image is set on #player-container - if you want #player-container to have a shadow, you'll need an extra containing div for this background. Right now #player-containerdoes have shadow, but since it's 100% wide, and fills the vertical space, the shadow doesn't show.
Your player is exactly 853px x 480px, so you'll have to set #player-container to exactly these dimensions (no padding, no margin, they will be added to the width/height)
Add padding to the extra containing div, which also holds the background.
also (but not so important): #player-container has width:100% - that makes no sense - default is width:auto, so #player-container will automatically take 100% width
I am using Firebug, I just saw tha it is a div with css, but I dont get it how they did it?
<div id=":ri" class="J-Zh-I J-J5-Ji L3 J-Zh-I-Js-Zq" tabindex="0" role="button" style="-moz-user-select: none;">Search Mail</div>
I am trying to make something similar but I am just a beginner,I want that effect of the button but I don't get it how they did it? even I don't understand the css, I just copy this but no effect
.num1 {
-moz-border-radius: 2px 2px 2px 2px;
background: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1) repeat scroll 0 0 transparent;
border: 1px solid rgba(0, 0, 0, 0.1);
color: #666666;
cursor: default;
font: 75% arial,sans-serif;
margin: 0 8px 0 0;
outline: medium none;
padding: 3px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.num2{
display: inline-block;
position: relative;
}
.num3{
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 0;
border-left-width: 0;
margin-left: 0 !important;
}
Here just the CSSed div: http://jsfiddle.net/bmWGY/1/
You'll need much more if you want to do something with this div.
Gmail uses JavaScript to detect the click event on the div. In addition, classes are dynamically added/removed to give the "button" the correct styles.
It is much easier to style a div element correctly than to try to style input and button elements for a cross-browser solution.
It's likely a simple div with a javascript onclick function attached. If using jQuery or some other framework, the "action" can be defined elsewhere using the .click() or .bind() (for jQuery) functions. See the examples provided in the preceding two links to see this in action.
How do we use just CSS to achieve the effects shown in this image: http://i.stack.imgur.com/smWmQ.gif (I'm sure that image is created with CSS because I visited that site with images disabled in Chrome)
Here is a simple very efficient way of doing it.
Fiddle
UPDATE:
Here is an example:
the html
<div>
<span class='tip'></span>
</div>
the css
div {
height: 30px;
width:50px;
}
.tip {
display:block;
width:1px;
heigth:20px;
border-left: 30px solid #fff;
border-right: 30px solid #fff;
border-top: 25px solid #F00;
}
There is something similar I took from the jQuery Ketchup plugin.
The CSS looks like this:
.box span {
border-color: rgba(255, 0, 0, 0.6) transparent -moz-use-text-color;
border-left: 0 solid transparent;
border-right: 15px solid transparent;
border-style: solid solid none;
border-width: 10px 15px 0 0;
display: block;
height: 0;
margin-left: 10px;
width: 0;
}
.box ul {
background: none repeat scroll 0 0 rgba(255, 0, 0, 0.6);
border-radius: 5px 5px 5px 5px;
color: #111111;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
line-height: 16px;
list-style: none outside none;
margin: 0;
padding: 10px;
text-align: left;
}
The according HTML:
<div class="box">
<ul>
<li>Content</li>
</ul>
<span></span>
</div>
Also have a look at the JSFiddle.
The triangle you see is just a box, often with no size, with really degenerate and different border-widths. For example to make an upward-pointing triangle, you would make a make a box like so:
top
_____
left| / \ |right
|/___\|
bottom
The box has no size, a top-border-width of 0, and non-zero values for the other widths. The border-color of the left and right and top are transparent, so you can't see those triangles. All you can see is the bottom border.
Working example: http://jsfiddle.net/NnGyv/
Unfortunately, you cannot use percentages with border widths, or else you could achieve a reusable CSS class definition.
Most browsers can do this automatically with HTML5 validation. You won't have much control over how it looks but it's 1000x easier to code and works without Javascript.
If you want more visual control there's jQuery Tools Validator. Although this uses Javascript it should fall back to HTML5 if Javascript is disabled.
The original site may be using HTML5.
HTML5 has some pretty neat features for client-side form validation. This looks very much like Chrome's take on an input box with the "required" attribute set. You'll also note a placeholder (another HTML5 attribute).
jsFiddle example. You can find out more information from Dive into HTML5.