I am trying to make a div container expand and contract every time an even handler is clicked.
However, every time I load the page, I have to click the even handler twice to expand it for the first time, after that it works with one click but I would like to only click it once to get it to expand upon page reload.
CSS:
#bodywrap1{
border-radius: 5px;
height: 00px ;
width: 80% ;
overflow: hidden;
border-top: solid 2px rgba(0,0,0,0.3) ;
border-bottom: solid 2px rgba(0,0,0,0.3) ;
Javascript:
function expand(){
$("#bodywrap1").toggle(function(){
$("#bodywrap1").animate({height:600},200);
});
}
HTML:
<h2 onclick = "expand()" id = "expandv">Expand</h2>
Here is the site im working on, and the page specifically.
http://hourtimeagent.com/html/c++.php
Toggle works based on the display property, so set the display: none to the bodywrap1
When the first click happens, since the display is not set, instead of displaying the element toggle() hides it, to fix it set
#bodywrap1 {
border-radius: 5px;
height: 0;
width: 80%;
overflow: hidden;
border-top: solid 2px rgba(0, 0, 0, 0.3);
border-bottom: solid 2px rgba(0, 0, 0, 0.3);
/*new property*/
display: none;
}
The reason it's taking two clicks is because the .toggle hides the #bodywrap1, and then on second click it shows the #bodywrap1 and animates the height.
I fixed this by using .toggleClass instead and changed some things around with the css
http://jsfiddle.net/PUCLM/1/
HTML
<h2 id="expandv">Expand</h2>
<div id="bodywrap1">
</div>
CSS
#bodywrap1{
border-radius: 5px;
height: 0px;
width: 80%;
overflow: hidden;
border-top: solid 2px rgba(0,0,0,0.3) ;
border-bottom: solid 2px rgba(0,0,0,0.3) ;
background: blue;
}
#bodywrap1.theclass {
height: 600px;
}
jQuery UI (you can only animate height with jQuery UI, not plain jQuery)
$('#expandv').click(function() {
$("#bodywrap1").toggleClass('theclass', 500);
});
Your html is not correctly written, remove from <head> tags h1 and h2.
<head>
<link rel="stylesheet" type="text/css" href="../css/c++.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<h1>C++</h1>
<h2 id = "expandv">Expand</h2>
<h1>Variables</h1>
<!-- ... -->
Change your javascript for the following:
$(function() {
function expand() {
$("#bodywrap1").toggle(function(){
$("#bodywrap1").animate({height:600},200);
});
}
// Click function for #expandv item
$("#expandv").on("click", function() { expand(); });
// Initialize a hidden wrap
$("#bodywrap1").css("display", "none");
});
Working jsfiddle: http://jsfiddle.net/TFZ4R/
Related
I have this CSS transition effect menu that is activated with a Javascript function through the click event on a button. However, I need the same button to hide the menu if it is visible.
I tried doing this by getting the same property that is changed by the function, as follows:
if (menu01.style.maxHeight == '0px')
menu01.style.maxHeight = '600px';
else
menu01.style.maxHeight = '0px';
However, as it may seem perfectly logical, IT DOES NOT WORK, and in addition it locks the function.
A GLOBAL variable could solve the problem, but they say we should avoid globals because of security.
<style type="text/css">
#menu01{
display: block;
position: absolute;
top:0px;
left: 130px;
width: 120px;
border-top: none;
background: white;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1);
max-height: 0px;
overflow: hidden;
transition-property: max-height;
transition: all 1s ease-in-out;
}
</style>
<div id="menu01">
Meus Dados<hr>
Alterar Senha<hr>
Agenda<hr>
Calendario<hr>
Sair
</div>
<button onclick="showmenu()">Menu(show/hide)</button>
<script type="text/javascript">
function showmenu(){
var menu01 = document.getElementById('menu01');
menu01.style.maxHeight = '600px';
}
</script>
I need a solution in Javascript Vanilla. I do not use jQuery.
Its very simple, since you are adding 600px max height property, on button click add logic to check height and toggle it between 0px and 600px.
checkout the snippet
function showmenu(){
var menu01 = document.getElementById('menu01');
menu01.style.maxHeight = menu01.style.maxHeight == '600px' ? '0px': '600px';
}
#menu01{
display: block;
position: absolute;
top:0px;
left: 130px;
width: 120px;
border-top: none;
background: white;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1);
max-height: 0px;
overflow: hidden;
transition-property: max-height;
transition: all 1s ease-in-out;
}
<div id="menu01">
Meus Dados<hr>
Alterar Senha<hr>
Agenda<hr>
Calendario<hr>
Sair
</div>
<button onclick="showmenu()">Menu(show/hide)</button>
Proposing another methods based on Akhil Aravind's answer :)
Prefer using addEventListener for future use so you can use the function for another DOM elements.
<script type="text/javascript">
var showMenuButton = document.getElementsByTagName('button')[0];
var menu01 = document.getElementById('menu01');
var elementArray = [showMenuButton, menu01];
elementArray.forEach(function (element) {
element.addEventListener('click', function () {
showmenu(menu01);
})
})
function showmenu(menuElement){
menuElement.style.maxHeight = menuElement.style.maxHeight == '600px' ? '0px': '600px';
}
</script>
delete the onclick attached to 'button' element
get the get the Elements for the button and menu01
add event listener for each elements. (I tried Akhil Aravind's answer code, and when you click the list item, all the elements disappear. Maybe bug)
I just save the elements into an array and use for each to make it shorter(no need for writing twice)
I've tried to add a hover class to my html element with the following code:
.block {
height: 50px;
width: 200px;
background: yellow;
}
.shadow {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block"
onmouseover="$(this).addClass('shadow');"
onmousedown="$(this).toggleClass('shadow');"></div>
The class will be added on mouseover but it won't be removed onmousedown.
Why?
Your code is correct. Check this link:
https://www.w3schools.com/code/tryit.asp?filename=FWXV3Y8JXYTI
Note: onmosedown means when the mouse button is pressed! It's different from mouseout.
So I'm making a web app using HTML, CSS, JavaScript, and AngularJS.
So far, I have a box with some content in the box. When that box is clicked, I call a javascript function to display more boxes and I did that using ng-click.
<div ng-click="!(clickEnabled)||myFunction(app)" class ="box">
*** things displyaed inside the box ***
</div>
clickEnabled's value (true or false) determines if myFunction() gets called or not and this part works perfectly. ng-click is disabled when clickEnabled is false.
Now the problem is that in my css file, I have my .box class such that the cursor is pointer when I hover over the box and background of the box also changes on hover. Is there a way to make cursor:default and make it so that it doesn't change background color of box when ng-click is disabled or when clickEnabled is false?
Here's a sample of my css code
.box {
border: 1px solid lightgray;
padding: 10px;
border-radius: 5px;
border-color: white;
box-shadow: 0 0 5px gray;
cursor: pointer;
background: #353131;
border-width: 2px;
display: inline-block;
width: 300px;
height: 150px;
}
.box:hover {
background-color: dimgrey;
border-color: grey;
}
Again, I don't want the cursor to be pointer when clickEnabled is false/ng-click is disabled.
Thanks in advance :)
You can try to use ng-class
<div ng-click="!(clickEnabled)||myFunction(app)" ng-class="{no-cursor: !clickEnabled}" class="box" >
*** things displyaed inside the box ***
</div>
.box.no-cursor {
cursor: default;
}
I want to have this button pressed effect in css. I mean for example lets say I press a button then I want to change its css so that it looks pressed. Here is something that I tried. But it's not working. I used example from a site. But the button's size gets smaller and it looks different. Here is the link for the code http://jsfiddle.net/goku/GdD34/
.pressed{
position:relative;
top: 3px;
color: #fqq;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
input.happy {
background-image: url(/img/happy.png);
background-color: transparent;
background-repeat: no-repeat;
border: none;
width: 64px;
height: 64px;
margin: 10px;
cursor: pointer;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow: 0px 3px 5px #000;
-moz-box-shadow: 0px 3px 5px #000;
-webkit-box-shadow: 0px 3px 5px #000;
}
$('.happy').click(function() {
alert('hello');
$('.happy').attr('class','pressed');
});
<input type="button" class="happy">
Just used the :active pseudo-class.
input.happy:active { /* Your style */ }
This is happening because you're replacing the class and not adding a new one. you should use :
$('.happy').addClass('pressed');
Instead of :
$('.happy').attr('class','pressed');
Because when u do that you remove all the css you previously applied to it. Your other option it to add the width/height or any other css to the pressed class.
There are a few things in your code (fiddle):
I guess you want to use a javascript framework (like jQuery), you did not select one in the fiddle.
You have a typo in the fiddle, inside the function it says $('happy') so no element will be found.
You remove the class "happy" within the javascript and replace it with pressed. Maybe you want to apply both $('.happy').attr('class', 'happy pressed'); But then for change .pressed to input.pressed and move below .happy
Perhaps you don't want all buttons to change, use use $(this).attr(...) inside the function
I'd suggest you change the order of your CSS, the and the JS to:
<style>
input.happy {
background-image: url(/img/happy.png);
background-color: transparent;
background-repeat: no-repeat;
border: none;
width: 64px;
height: 64px;
margin: 10px;
cursor: pointer;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow: 0px 3px 5px #000;
-moz-box-shadow: 0px 3px 5px #000;
-webkit-box-shadow: 0px 3px 5px #000;
}
input.happy.pressed{
position:relative;
top: 3px;
color: #fqq;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
</style>
<script>
$(function(){
$(".happy").click(function(){
$(this).addClass("pressed");
});
});
</script>
<input type="button" class="happy">
Note, the "$(function(){" bit says "do this after page load". "addClass" will add the class to the list of classes for an element, but the event must be assigned after the DOM has loaded.
Also, you must use '$(this)' instead of '$(".happy")' inside the click function as to only apply the style to the button that was clicked.
You had some syntax errors.
Best event for this isn't .click(), its .mousedown();
When you click the Button without Releasing:
$('.happy').mousedown(function() {
$('.happy').attr('class','pressed');
});
I believe now it's working : http://jsfiddle.net/HKZ7M/
Then when you release the mouse, give it back the old class.
When you Click the Button then Release it
$('.happy').mousedown(function() {
$('.happy').attr('class','pressed');
$('.pressed').mouseup(function() {
$('.pressed').attr('class','happy');
});
});
It's working : http://jsfiddle.net/Xx2Gn/
Important Note: The .pressed button is smaller than the .happy button, when you release the mouse you have to make sure that the pointer will be above the new .pressed button, that's why you must make them the same size.
I'm trying to set the width on a div to be auto. It works fine in firebugs command editor, but when I put it in the actual page it doesn't play.
This is the code I am using:
$('content').setStyle({width: "auto"});
When that is run from the firebug it works fine, but when in the js function in the page it won't work:
Hide Sidebar
<script type="text/javascript">
function hideSide() {
$('content').setStyle({width: "auto"});
$('main').hide(); // this works fine
}
</script>
Firebug console doesn't report any errors. I also tried wrapping it in Event.observe(window, 'load', function() {}); but that didn't work either.
Anyone know whats up with that?
Thanks for reading.
Requested CSS
#content { width: 75%; background-color: #fff; margin: 0px; border-right: 1px solid #ddd; padding: 6px 10px 10px 10px; z-index: 10; }
* html #content{ width: 75%; padding-left: 0; margin-top: 0px; padding: 6px 10px 10px 10px;}
html>body #content { min-height: 600px; }
* html body #content { height: 600px; } /* IE */
You can also see this link for the html and this link for the full css.
Sorry, I should mention the link there to the HTML source is the original, all I have done to it is add the link and script excerpt above (see here)
Are you putting the cart before the horse? i.e. is your JavaScript code executing BEFORE your HTML has been rendered in the page?