I have this piece of html/css and I need to change div style with js button click so my div becomes visible and clickable. I seem to do everything right but it doesn't work for some reason.
When I click that button, simply nothing happens, can anyone help?
<button type="button" id="letsgo" onclick="letitGo()">Process</button>
<div id="textualdiv">blah blah blah</div>
A script below them:
<script>
function letitGo()
{
document.getElementById("textualdiv").style.opacity="1";
document.getElementById("textualdiv").style.pointer-events="auto";
}
</script>
And div style in a separate CSS file:
#textualdiv {
z-index:10;
background-color:white;
margin-bottom:0%;
width:70%;
text-align:center;
height:50%;
min-width:500px;
top: 10%;
display: block;
margin: 0 auto !important;
padding:0;
position:relative;
opacity:0;
pointer-events: none;
border-style:solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
The CSS pointer-events attribute is elem.style.pointerEvents in JavaScript
Use this instead
function letitGo()
{
document.getElementById("textualdiv").style.opacity="1";
document.getElementById("textualdiv").style.pointerEvents="auto";
}
JSFiddle - http://jsfiddle.net/dbxcsv9h/
Exactly, like Elipzer respond you before me. The right answer is:
function letitGo()
{
document.getElementById("textualdiv").style.opacity="1";
document.getElementById("textualdiv").style.pointerEvents="auto";
}
Remember that when you wanna change a CSS property using Javascript you need to type the name of that property using camelCase.
Hope it helps you!
Related
I got my function to display my site to full screen :
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
that I associate with a button image and it worked !
But when I move my cursor over it, the cursor remains in "default" version so I would like it to become "pointer" to give the effect of a button : "cursor: pointer;" and I don't manage to enter my css in the function to make it work.
If you can add class to your button button then just add the CSS below to get pointer when you hover over a button.
.button:hover{
cursor:pointer;
}
So basically what you can do is
button{
cursor:pointer;
}
<button>Hello there</button>
You can also add a class to your button
.btn{
cursor:pointer;
}
<button class="btn">Hello there</button>
You can do it with pure css
#fullscreen {
width: 100px;
height: 100px;
background-color: black;
cursor: pointer;
}
<div id="fullscreen"></div>
or with pure Javascript
document.getElementById("fullscreen").style.cursor = "pointer";
#fullscreen {
width: 100px;
height: 100px;
background-color: black;
}
<div id="fullscreen"></div>
I'll be the first to admit that my CSS is not amazing by any means but if you were to add a class to the actual button itself in the HTML portion of your page and add the property cursor: pointer to that class' attributes, I believe that should do the trick? I would have rather left this as a comment instead of an answer but I'm not reputable enough for a comment yet haha
I need some help to achieve my website. I have a div animated in JS that slides into the screen from right to left (with a button and by a margin-right action). It works fine in Firefox but not in Chrome : with the same value on margin-right, I see the div entirely in FF when showed, but not in GG, I only see a part of it.
The same problem appears for hiding the div; the value isn't high enough so there's still a visible part. I set a higher value for Chrome with "-webkit-margin-end" in my CSS, that helped for hidding, but when showed the problem remains. I guess I have to add a Chrome option in my script, so the "margin-right" value (or the "-webkit-margin-end" value ?) could be increased too when animated, but I actually can't find any answer to my request.
That's probably because I'm not good enough to apply it to my code, and that's why a bit help would really be appreciated.
Furthermore, is there a way to slide on page load ? I'd like the div 'open' when the user enters the website.
Here's a piece of my code :
/* CSS */
/* div */
#texte {
background-color:#FFFFFF;
border-left:0.5px solid #000000;
color:#000000;
font-size:0.9vw;
font-weight:normal;
font-family:"Proza Libre", sans-serif;
top:0;
bottom:0;
right:0;
margin-right:-125px;
-webkit-margin-end:-350px;
width:19.4%;
padding:1vw 0.6vw 1vw 1vw;
float:right;
position:fixed;
display:block;
z-index:1000;
overflow-x:hidden;
overflow-y:auto;
}
/* button */
#plus {
bottom:2.5vw;
right:2.5vw;
position:fixed;
color:#000000;
text-align:center;
font-family:serif;
font-size: 2.5vw;
font-weight:normal;
line-height:2.5vw;
text-decoration:none;
cursor:pointer;
z-index:1000;
border: 0.8px solid #000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width:2.5vw;
height:2.5vw;
}
/* SCRIPT */
jQuery.easing.def = 'easeOutBounce';
$('#plus').click(function() {
if($(this).css("margin-right") == "125px") {
$('#texte').animate({"margin-right": '-=125'}, 'slow');
$('#plus').animate({"margin-right": '-=125'}, 'slow');
}
else {
$('#texte').animate({"margin-right": '+=125'}, 'slow');
$('#plus').animate({"margin-right": '+=125'}, 'slow');
}
});
Firefox :
Chrome :
Rather than finding an ad-hoc solution for each browser-specific bug maybe you can try finding a way to make your code work the same way for every browser.
I would avoid manipulating the margins. Instead I suggest having one main DIV with a fixed width and then have another DIV inside with the paddings you need. Then do the animation with the right attribute.
Check this snippet and see if this demo works for you.
function togglePanel() {
if (parseInt($('#main').css('right')) == 0) {
// get the current width (+ horizontal padding) (+ the border size * 2)
width = $('#main').width() + parseInt($('#main').css('padding-left')) + parseInt($('#main').css('padding-right')) + 2;
$('#main').animate({"right": -width}, 'slow');
} else {
$('#main').animate({"right": 0}, 'slow');
}
}
$('#toggleMain').on('click', function() {
togglePanel();
});
$(document).ready(function() {
togglePanel();
});
* {box-sizing: border-box;}
#main {
background:blue;
position:absolute;
padding:10px;
right:-222px;
top:0px;
bottom:0px;
width:200px;
border:1px solid red;
}
#inner {
width:100%;
padding:10px;
border:1px solid green;
background:orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main"><div id="inner">Here goes the text<br/>and more text</div></div>
<button id="toggleMain">Toggle</button>
Try this, for detecting if chrome and adding margin.
$(document).ready(function(){
var isChrome = !!window.chrome;
if(isChrome) {
$(".element").css("margin-right", "30px");
}
});
Browser detection is no good practice, see for example Is jQuery $.browser Deprecated?
A better way is to provide general cross browser solutions.
You could for example use normalize.css and then apply your own css. This maybe makes the css "resets" you need, so your own css looks good/equal in all browsers.
I have this ok css3 icon created with css.
http://jsfiddle.net/5c9gN/
JS:
$('.ok').mouseenter(function(){
$(this).parent().find('.ok:after, .ok:before').css('background','#ccc');
$(this).css('background','#33CC33');
});
$('.ok').mouseleave(function(){
$(this).parent().find('.ok:after, .ok:before').css('background','#ccc');
$(this).css('background','#ccc');
});
CSS:
.ok{height:40px; width:40px; display:block; position:relative; margin-left: auto; margin-right: auto;}
.ok:after, .ok:before{content:''; height:32px; width:10px; display:block; background: #ccc; position:absolute; top:6px; left:18px; transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);}
.ok:before{height:16px; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg); top:18px; left:6px;}
And I'm having a little issue while trying to change the color of the icon. It always changes the background color not the icon.
Could anyone help me?
Thanks
Using only CSS:
DEMO
.ok:hover:after, .ok:hover:before {
background: #33CC33;
}
Add this css
.ok.mouseover:after, .ok.mouseover:before{
background: #33CC33;
}
and update your JS code to this
$('.ok').mouseenter(function(){
$(this).addClass('mouseover');
});
$('.ok').mouseleave(function(){
$(this).removeClass('mouseover');
});
Hopefully not too vague. All I want to do is make the entire page go dim after clicking a link. I would imagine having div style="height:100%; width=100%;" with a high z-index. to cover the webpage. My question is toggling this div. I'm not sure what I should even use to accomplish this.
Demos using jQuery or using bog-standard Javascript, both showing how you can toggle the element.
HTML You didn't say how you want to toggle this. Using a button?
<button onclick="dim();">Dim</button>
<div id="dimmer"></div>
but bear in mind the dimmer will go over the button
CSS
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /* important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:9999; /* may not be necessary */
}
N.B. Use position: fixed as 100% height is only the window height and if your document is larger, using position: absolute doesn't dim the whole document - you can scroll to see there are contents visible.
Javascript
function dim(bool)
{
if (typeof bool=='undefined') bool=true; // so you can shorten dim(true) to dim()
document.getElementById('dimmer').style.display=(bool?'block':'none');
}
dim(true); // on
dim(false); // off
You can do it with a simple JavaScript
Demo
HTML
Click me
<div id="toggle_div"></div>
Hello World
JavaScript
function dim_div() {
document.getElementById("toggle_div").style.display="block";
}
CSS
#toggle_div {
background-color: rgba(255, 255, 255, .6);
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 999;
}
HTML
<div id="initial_opacity_zero"></div>
<button id="button_to_adjust_opacity" onclick="func_onclick();"></button>
CSS
div#initial_opacity_zero{
opacity:0;
display:block;
position:fixed;
top:0px; right:0px; bottom:0px; left:0px;
}
JavaScript:
function func_onclick(){
document.getElementById("initial_opacity_zero").style.opacity="0.6";
}
I've tried every suggested combination from previous questions in an effort to remove the gray border from my image buttons, as you can see from the code, when the image is clicked it opens a content pane below the button: border:none, border:0px, etc.
Nothing seems to be working. CSS can be extremely frustrating.
Below is the css and html I'm working with, stripped of the above fix attempts since they'd didn't seem to work. I'm hoping it is something as simple as me overlooking or screwing something up.
Any help would be appreciated.
#basemapbutton {
position:absolute;
top:5px;
right:150px;
width:20px;
height:40px;
z-index:100;
}
and:
<!--Basemap Gallery-->
<div id="basemapbutton">
<button dojoType="dijit.form.Button" baseClass="tomButton" border="0" title="Switch Basemap">
<img src="images/imgBaseMap.png"/>
<script type="dojo/method" event="onClick">
toggler[(dojo.style("panel","display") == "none") ? 'show':'hide']();
</script>
</button>
<div id="panel" dojoType="dijit.layout.ContentPane" style="#900;display: none;">
<span id="basemapGallery"></span>
</div>
</div>
Just add at the top of your main CSS file this:
img {
border: 0px !important;
outline: 0 !important;
}
!important will override every inline style that could be added by javascript...
the problem is the button element and/or the div element around the <img>.
#basemapbutton img, button img,
#basemapbutton:active img, button:active img
#basemapbutton:focus img, button:focus img {
border: none;
outline: 0;
}
Try use content: ""; in css style.
#basemapbutton {
content: "";
position:absolute;
top:5px;
right:150px;
width:20px;
height:40px;
z-index:100;
}
This should do:
#basemapbutton button {
border: 0px;
padding: 0px;
}
Cretae one class for the button like this <button dojoType="dijit.form.Button" baseClass="tomButton" class="remove_border" title="Switch Basemap">
Just include this point in your css for this class .remove_border{ border-style:none; padding:0px;}