I'm wondering how to enable the clicking on a :before pseudo-element (the orange part of the div on the JSfiddle I link to below). I've read that since pseudo-elements aren't in the DOM you would need a hack for this. Unfortunately, I can't find an existing Stackoverflow Q&A that actually shows working code.
Link: http://jsfiddle.net/Vv6Eb/4/
HTML:
<div></div>
CSS:
div { position:relative; background-color:#333;
padding:20px; margin:20px; float:left;
}
div:before { content:""; display:block;
padding:5px; background-color:#f60; border:2px solid white;
position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}
If you know where the circle "should" be, you can use trigonometry to see if the click is within the circle: http://jsfiddle.net/Vv6Eb/19/
$("div").click(function(e){
var $me = $(this),
width = $me.outerWidth(),
height = $me.outerHeight(),
top = $me.position().top,
left = $me.position().left;
var len = Math.sqrt(Math.pow(width - e.offsetX, 2) + Math.pow(e.offsetY, 2));
if (len < 10)
alert('ding');
});
A workaround for this would be to dynamically append a <span> to the item and assigning a click method to it. Like this fiddle.
var item = $('<span />');
item.click(function() { alert('click'); });
$('div').append(item);
CSS
div { position:relative; background-color:#333;
padding:20px; margin:20px; float:left;
}
div span { content:""; display:block;
padding:5px; background-color:#f60; border:2px solid white;
position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}
I know you are trying to use :before, but for this situation, can't you just create a new div with a class to use as a hook and append it to the original div?
Something like this might work:
var newDiv = $("<div class='orangeCircle'>");
$(".parentDivToOrangeCircle").append(newDiv);
And the CSS:
.parentDivToOrangeCircle { position:relative; background-color:#333;
padding:20px; margin:20px; float:left;
}
.orangeCircle {
padding:5px; background-color:#f60; border:2px solid white;
position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}
Do simply like using jquery
$(document).on("click", "span", function(e){
if (e.offsetX > $(this)[0].offsetWidth) {
alert('clicked on after');
}
else
{
alert('clicked on main span');
}
})
div { margin: 20px; }
span:after { content: 'AFTER'; position: absolute; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><span>ELEMENT</span></div>
My purpose was solved by another workaround which is just adding a child DIV. Wrapping up all child elements inside the parent into this new child DIV:
My working sample as same as the problem statement: See Fiddle
HTML:
<div class="parentDiv">
:before
<div class="childDiv">
<!-- child elements -->
</div>
</div>
**Note: Ignore the :before in the HTML, just showing to understand.
CSS:
div.parentDiv{position:relative; background-color:#333; padding:0; margin:20px; float:left; }
div.parentDiv:before { content:""; display:block; padding:5px; background-color:#f60; border:2px solid white; position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; cursor:pointer}
div.childDiv{padding:20px; margin:0}
jQuery:
jQuery(document).ready(function($){
$('div.parentDiv').click(function(e){
if( $(e.target).closest('.childDiv').length==0 ){
//so clicked on psudo :before element!
//do your work here ;)
alert('Psudo :before element is clicked!');
}
});
});
Related
I have a problem with my css.
i have some element generated by javascript and when i hover them i display another element but i don't know why, the new element displayed is below the others generated element...
this is my css about this problem:
.hiddenTextjob
{
display:none;
background-color:#000;
color:#FFF;
width:170px;
z-index:2!important;
height:55px;
}
.ghost_for:hover > .hiddenTextjob
{
display: block;
background-color:#000;
color:#FFF;
width:170px;
margin-top:-55px;
z-index:1!important;
}
.ghost_for
{
border: 0;
position:absolute;
background-color:blue;
z-index:1!important;
}
.hiddenTextjob is below ghost_for but he must be above...
Thanks by advance
[EDIT] here a jsfiddle to illustrate:
https://jsfiddle.net/95jtx2oL/
when you hover a blue element sometine the black hover is above sometime he is below that make me mad...
.ghost_for:hover {
z-index: 2!important;
}
The above code is enough to fix the issue ^^ jdfiddle
The issue was because of the stacking of HTML. The lower elements will be higher if they are on the same index. So if you can raise the z-index of the hovered element, it's child element will be higher as well.
It looks a bit strange that you set z-index to 1 here.
.ghost_for:hover > .hiddenTextjob
{
display: block;
background-color:#000;
color:#FFF;
width:170px;
margin-top:-55px;
z-index:1!important;
}
The initial value of 2 seems correct. Try to remove z-index from the above code or set it to 2.
I am unsure of your HTML but try this if it works for you:
.hiddenTextjob {
display: none;
background-color: #000;
color: #fff;
width: 170px;
z-index: 2 !important;
height: 55px;
}
.ghost_for:hover > .hiddenTextjob {
display: block;
background-color: #000;
color: #fff;
width: 170px;
margin-top: -55px;
}
.ghost_for {
border: 0;
position: absolute;
background-color: blue;
z-index: -1;
}
I have two buttons, Edit_1 and Edit_2. By clicking on each one of them, an "expansion" div should appear right below the button which has been clicked.
In the function that I have written, if the display property of the "expansion" div is 'block' under edit_1 and one clicks edit_2, the widow will be displaced under edit_2. But if I click on edit_1 itself, the 'expansion' window will not disappear.
I could easily solve the problem by adding another "expansion" window, but as the 'edit' tags will increase, I need to move this 'one' expansion window among them correctly. I would be grateful if you kindly help me with this;
HTML:
<div id="container">
<div id="section_1"></div>
<div id="section_2"></div>
<button id="edit_1" onClick="edit(1);"></button>
<button id="edit_2" onClick="edit(2);"></button>
<div id="expansion"></div>
</div>
CSS:
*{
margin:0px;
padding:0px;}
body {
width:100%;
background-color:#F4F4F2;
margin-top:15px;
font-family:verdana;}
#container{
width:820px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border: dashed 2px blue;
position:relative;
z-index:1;}
#section_1{
width:800px;
height:198px;
border-top: solid 2px #D24726;
background-color:#ffcccc;
top:0px;
position: absolute;
z-index:2;}
#section_2{
width:800px;
height:198px;
border-top: solid 2px #14826D;
background-color:#C1FBDE;
top:200px;
position: absolute;
z-index:2;}
#edit_1{
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:15px;
border:none;
cursor:pointer;
z-index:4;
background:url(../images/edit.fw.png) no-repeat;}
#edit_2{
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:215px;
border:none;
cursor:pointer;
z-index:4;
background:url(../images/edit.fw.png) no-repeat;}
#expansion{
width:200px;
height:120px;
background-color:#FFFFFF;
position:absolute;
z-index:3;
margin-left:600px;
top:0px;
padding-top: 40px;
padding-left:10px;
padding-right:10px;
border-top:solid 2px #D24726;
display:none;}
javascript:
function edit(clicked_edit){
var click=document.getElementById('expansion').style.display;
if (click=='block'){ /* in any case, if the display property is block, it turns it to none*/
document.getElementById('expansion').style.display='none';
}
var tp=document.getElementById('section_'+clicked_edit).offsetTop;
document.getElementById('expansion').style.top=tp+'px';
document.getElementById('expansion').style.display='block';
}
JSFiddle
JQuery Approach
you may find great use looking at this JSFiddle that uses a nice toggle effect.
the JQuery is:
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('#content').toggle('show');
});
});
I'm pretty sure you could make use of this in your project :)
Javascript Approach
Have a look at this one - it's not using JQuery and should be suitable for you :)
It was found here:
Another Approach
this demo is also another way of showing/hiding the div on press., so there's pleanty of options to choose from! :)
<script>
function showhide()
{
var div = document.getElementById("newpost");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
</script>
How could I pop up a div element in the center of the webpage.
also .I need a button on the div to close the div element.
and the div element will not affect the webpage at all.
In my JS code, I already have a div element created.
var div = document.createElement("div");
div.style.background = "white";
div.id = "demo";
$(div).addClass("GridTableContent");
I want to pop up the div element I created in the center of my webpage.
and add a close the div button.
Update
I Think I need to provide more detail about the problem
First,this code are injected into a webpage in a chrome extension so it's pure javascript
surely I can't write this
<div class='overlay'>
<div class='popup'>
<div class='close'>✖</div>
<h2>Popup</h2>
</div>
It'a all created dynamically,so I guess I can't use the code provided below.
I see other question before ,someone suggest me to use
http://www.ericmmartin.com/projects/simplemodal-demos/
and I find the BASIC MODAL DIALOG in that page is good ,
Is there any way to use that .
Update
I find I need to give the more detailed information.
At first I create a button and already injected into a webpage
var div = document.getElementById("btnSearch");
var input = document.createElement('input');
input.id='visualization';
input.type='button';
input.value='visualiztion';
$(input).insertAfter(div);
Then I create a div element
var div = document.createElement("div");
div.style.background = "white";
div.id = "demo";
How can I do this,when I'm click the button then the div element popup at the webpage in the center.also I guess I need to create a button to close the div element.
Try Something like this
HTML
<div class='overlay'>
<div class='popup'>
<div class='close'>✖</div>
<h2>Popup</h2>
</div>
Show
CSS
*{
margin:0;
}
html, body {
height:100%;
}
.overlay {
position:absolute;
display:none;
top:0;
right:0;
bottom:0;
left:0;
background:rgba(0, 0, 0, 0.8);
z-index:9999;
}
.close {
position:absolute;
top:-40px;
right:-5px;
z-index:99;
width:25px;
height:25px;
cursor:pointer;
color: #fff;
display: inline-block;
}
.popup {
position:absolute;
width:50%;
height:50%;
top:25%;
left:25%;
text-align:center;
border-radius: 10px;
background:white;
box-shadow: 0px 0px 10px 0px black;
}
.popup h2 {
font-size:15px;
height:50px;
line-height:50px;
color:#fff;
background:rgb(24, 108, 209);
border-radius:10px 10px 0px 0px;
}
.button {
width:50px;
height:50px;
color:#fff;
font-weight:bolder;
border-radius:10px;
background:silver;
}
SCRIPT
$('.button').click(function () {
$('.overlay').show();
})
$('.close').click(function () {
$('.overlay').hide();
})
DEMO
Update
Dynamic injection:
DEMO
I am trying to create simple widget with fixed position using Jquery. I recently started learning JQuery so I would like to ask what is the better way to to this than:
var i = 0 ;
$('#button').on('click', function() {
if( i === 0) {
$('#widget').animate({'bottom':0},700);
i = 1;
} else {
$('#widget').animate({'bottom': -211},700);
i = 0;
}
});
Full code:
http://jsfiddle.net/zX8He/
There are better ways I think
You could just toggle a class on click and let CSS do the rest.
UPDATED EXAMPLE HERE
$('#button').on('click', function() {
$(this).parent('#widget').toggleClass('open');
});
CSS
#widget {
width: 150px;
height: 250px;
background: gray;
border: 1px solid black;
position: absolute;
right: 0;
bottom: -211px;
transition:all 2s;
-webkit-transition:all 2s;
-moz-transition:all 2s;
}
#widget.open {
bottom:0px
}
It's pretty simple, just use a CSS transition and add styling to the .open class. It's worth noting that I added overflow:hidden to the body element in order to hide the element below the screen. You can also add cursor:pointer to the button element on :hover in order to indicate that it is clickable. (example)
#button:hover {
cursor:pointer;
}
Using jQuery will allow your code to be cross browser compatible, as CSS3 transitions are not supported in all browsers. http://jsfiddle.net/fyCcx/
the css:
.btn{
border:1px solid #888;
background: #f8f8f8;
width:150px;
height:40px;
margin:0px;
}
#widget{
width:150px;
position: absolute;
right:0px;
background: #333;
bottom:0px;
}
the html
<div id="widget">
<button class="btn">Click Me</button>
</div>
the script:
$(document).ready(function(){
var open = false;
$('.btn').click(function(){
if( !open ){
$('#widget').animate({
height: '400px'
}, 2000);
open = true;
} else{
$('#widget').animate({
height: $('.btn').height() + 'px'
}, 2000);
open = false;
}
})
});
<div id="box"></div>
<div class="text"></div>?
$(document).ready(function () {
$('#box').click(function () {
$('.text').slideToggle('slow');
});
});
#box{
height:40px;
width:100px;
background:red;
}
#box:hover{background:blue;}
#box:after{
content: "";
height: 10px;
position: absolute;
width: 0;
margin-top:40px;
margin-left:40px;
border: 10px solid transparent;
border-top-color: red;
}
#box:hover:after{
border-top-color: blue;
}
.text{
display:none;
height:40px;
width:100px;
background:#fd0;
margin-top:20px;
}
http://jsfiddle.net/zfQvD/16/
Is that possible to use jQuery to add the styled after arrow?
when text class is closed, remove after arrow class
if text class is shown, then add the arrow?
I tried, but seems doesn't work
As per #elclanrs comment, you can't add pseudo elements with JS. What you can do, however, is declare them in your CSS to be only shown when a parent element has a specific class, and then toggle this class with JS, like this:
#box.expanded:after {
content:'';
height: 10px;
position: absolute;
width: 0;
margin-top:40px;
margin-left:40px;
border: 10px solid transparent;
border-top-color: red;
}
You also have to add a line to your JS for this class to be added upon clicking the box:
$('#box').click(function () {
$(this).toggleClass('expanded');
$('.text').slideToggle('slow');
});
See the example here: http://jsfiddle.net/zfQvD/17/