<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/
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;
}
This is my CSS code:
body #slider #btn_edit{
position: fixed;
width: 100px;
height: 100px;
right:10px;
top:8px;
color: inherit;
background-color: transparent;
border: none;
}
body #slider #btn_edit :hover {
color: red;
}
And this is my JavaScript code where I create the button:
var efb = document.createElement("button");
efb.id = 'btn_edit';
efb.innerHTML = 'EDIT';
document.getElementById("slider").insertBefore(efb,
document.getElementById("pages").nextSibling);
If I hover over the button nothing happens. The JavaScript code works just fine but I'm having a problem with the css part; it does not turn red.
The :hover selector should be attached to your element without the white space.
body #slider #btn_edit:hover {
color: red;
}
https://jsfiddle.net/w3ht37p1/
Remove space between "#btn_edit :hover". Check snippet code below. Hope it helps
. Also make sure your html looks like mine or the css can target through parents to child(cascading)
body #slider #btn_edit{
position: fixed;
width: 100px;
height: 100px;
right:10px;
top:8px;
color: inherit;
background-color: transparent;
border: none;
}
body #slider #btn_edit:hover {/**Removed space between "#btn_edit :hover" **/
color: red;
}
<div id="slider">
<!--divs, span ...-->
<!--divs, span ...-->
<button id="btn_edit">
button
</button>
<!--divs, span ...-->
<!--divs, span ...-->
</div>
I basically have to make this board that has numbers from 1 to 50 and whenever you click on one number, its background changes to a different color. I was able to do it with the first one by making the <div> clickable but I don't know how to do it with the second one that is supposed to have the value 2. Here are my codes
var Color = "#FF0";
function theFunction() {
if (Color == '#FF0') {
Color = '#F00';
} else {
Color = '#FF0';
}
document.getElementById('choose').style.backgroundColor = Color;
}
div#gameboard {
background: #CCC;
border: #999 2px solid;
width: 1200px;
height: 900px;
margin: 70px;
margin-top: 40px;
}
<div id="gameboard">
<div id="choose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();">
1
</div>
<div id="chose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();">
2
</div>
</div>
So what shall I do for the second div? Thanks
The easiest way is to remove the id's from your "number" divs, move all your styling code to CSS, and be sure to pass in this to the onclick event so you know which number div was clicked. You can then add a clicked class that turns the background red when applied and your JavaScript simply toggles the addition/removal of the clicked class.
function theFunction(e) {
e.classList.toggle("clicked");
}
#gameboard {
background: #CCC;
border: #999 2px solid;
width: 1200px;
height: 900px;
margin: 70px;
margin-top: 40px;
}
#gameboard div {
width: 240px;
height: 150px;
margin-left: 30px;
margin-top: 50px;
background-color: #FF0;
cursor: pointer;
font-size: 130px;
text-align: center;
}
#gameboard div.clicked {
background-color: #F00;
}
<div id="gameboard">
<div onclick="theFunction(this);">
1
</div>
<div onclick="theFunction(this);">
2
</div>
</div>
This will only work for current, modern browsers. If you need to support older versions of IE (namely < IE10) then you will have to change the JavaScript slightly to test for the existence of the clicked class, then add or remove it accordingly.
You might also consider using a framework, like jQuery, where you can easily toggle the add/remove of the clicked class and have all the browser-compatible code obscured within the framework.
Try this.
<div id="choose" style="width:240px; height:150px; margin-left:30px; margin-top:50px; background-color:#FF0; cursor: pointer; font-size:130px; text-align:center;" onclick="theFunction();">
First you gotta change
onclick="theFunction();"
to this
onclick="theFunction(this);"
And then your function will accept a parameter
function theFunction(element) {
[...]
element.style.backgroundColor=Color;
}
That parameter is the clicked element.
I am using an overlay for a login which appears in front of everything when the user hit "sign-in". The overlay consists of an opaque wrapper which contains a solid inner-div where the login form is held.
Here is the html:
<div class="login_wrapper">
<div class="login_info">
<div class="login_form">
// form
</div>
</div>
</div>
and the css:
.login_wrapper{
position:absolute;
position: fixed;
margin: auto;
left:0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height:100%;
background-color:rgba(0, 0, 0, 0.5);
z-index:9998;
display: none;
}
.login_info{
font-family: "NimbusCondensed";
position:absolute;
margin: auto;
left:0;
right: 0;
top: 0;
bottom: 0;
width: 350px;
height:300px;
background: #cacaca;
border: solid #000000 1px;
border-radius: 10px;
z-index:99999;
pointer-events: none;
}
.login_form{
margin-top: 40px;
margin-left: 12.5%;
padding: 10 20 0 20;
width: 220px;
border: 1px solid black;
border-radius: 7px;
background: white;
box-shadow: 0px 5px 13px black;
z-index: 100000;
}
I would like this overlay to be hidden when the user clicks anywhere outside of the login_info.
I have the following JQuery handling this:
$(document).ready(function(){
$(".login_wrapper").click(function(){
$(".login_wrapper").fadeToggle(300);
});
});
But login_wrapper is hidden if the use clicks ANYWHERE on the overlay, including the form in the middle which prevent then form entering any info.
Somehow the click events are getting "through" login_form & login_info and the browser reacts like login_wrapper is clicked.
How can I resolve this so that jQuery code applies ONLY when the overlay is clicked outside the inner divs.
Thanks!
Change your code to this:
$(document).ready(function(){
$(".login_wrapper").click(function(){
$(".login_wrapper").fadeToggle(300);
});
$(".login_info").click(function(event){
event.stopPropagation();
});
});
This will stop the click event from bubbling up to the .login_wrapper. For more information on stopPropagation() see https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation.
First, you have to transform .login_wrapper in #login_wrapper, then add this:
$('#login_wrapper').click(function(e) {
if (e.target.id === "login_wrapper")
$('#login_wrapper').fadeToggle(300);
});
This will target only the element with the id login_wrapper.
Hope this helps
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!');
}
});
});