I have this simple <div>:
<div id='myId' class='hide'>...</div>
I want to show it using the class show.
$("#myId").show();
It doesn't work, the <div> keeps the hide class.
You can use toggleClass() as follows:
$("#myId").toggleClass("hide show");
or
$("#myId").removeClass("hide").addClass("show");
.show() won't change the class of the element(s) it is called on, it will simply change the necessary CSS styles to hide it from the user.
To remove the class, use .removeClass():
$('#myId').show().removeClass('hide');
If you are using the .hide and .show CSS classes to toggle visibility of your elements, just use .show() and .hide() methods. Otherwise, simply removing your class will do:
$('#myId').removeClass('hide');
Use callback
$("#myId").show('slow',function(){
$(this).removeClass('hide');
});
HTML
<div id='myId' class='hide'>...</div>
JS/JQuery
$(function() {
$("#myId").removeClass("hide");
});
//or remove all of class hide
$(function() {
$(".hide").each(function() {
$(this).removeClass("hide");
});
});
//or use the JQuery METHOD(S) to do the same which is class unrelated
$(function() {
$("#myId").show();
//or
$("#myId").hide();
//or
$("#myId").fadeToggle(); //opacity animation based
$("#myId").slideToggle(); //position animation based
});
Hide it like this and .show() will work:
<div id="myId" style="display:none">...</div>
Related
Trying to achieve this HTML shape where I'd like to place many photos inside this shape with onclick method there
It's better to use javascript EventListener rather than onclick.
eg.
let btn = document.getElementById('pictureButton');
btn.addEventListener('click', function(){
document.getElementById('togglepic').style.display = 'block';
});
#togglepic {
display:none;
}
<button id="pictureButton">Click me</button><br/>
<img id="togglepic" src="https://imgur.com/VYWEWRF.png"/>
Obviously, instead of the <img> element, you could add your "carousel" element, but the principle is the same - simply change the display: property from none to block
Im trying to put :focus on div so it will focus with other colors when href link is clicked, is it possible ?? Any help would be appreciated.
Below are my current progress
eg: Fiddle Demo
Expected result, when click on the href link, it will focus on the div background (like hover do).
i have no idea how to convert this to javascript
$("#colOne ul li").click(function(){
$("#colOne ul li").removeClass("active");
$(this).addClass("active")
})
You need li action so you need to use Either Jquery or Javascript.
Use following JavaScript will solve your issue.
HTML:
<div id="colOne">
<h3>Fruit</h3>
<div class="bg1">
<ul>
<li class="litest">Apple</li>
<li class="litest">Orange</li>
<li class="litest">Banana</li>
</ul>
</div>
</div>
Javascript:
<script language="javascript">
var buttons = document.getElementsByClassName("litest");
for(var i = 0; i < buttons.length; ++i){
buttons[i].onmousedown = function() {
this.setAttribute("class", "active");
}
}
</script>
You can use this.classList.toggle('active'); instead of this.setAttribute("class", "active"); to add and remove effect.
Check Fiddle.
If you like to use JQuery use following JQuery code:
$(function(){
$("li").bind("click", function(){
$(this).addClass('active');
});
});
Edit:
Here i edited my fiddle as per your requirement.
Check Fiddle.
It sounds like you want an event listener on your li's, not a :focus pseudo class. If you set up a couple classes to reflect the colors you want, you can just switch between them on click. I suggest jQuery's toggleClass to get this done.
When using ng-hide or ng-show directives a .ng-class is added or removed so DOM elements are visible or not.
However they kinda get positional "removed" as for example, hiding or showing two continous div elements one on top of the other.
<div ng-show="condition1">First div</div>
<div ng-show="condition2">Second div</div>
So, if condition1 evaluates to false first div will be hidden BUT second div will take the position which the just hidden div took.
How can I avoid that? I only want DOM elements to be invisible but not to get somehow removed.
First workaround.
I tried to overried .ng-hide class and getting a secondary class, only-hide, for elements on which I wanted this effect:
.ng-hide.only-hide {
visibility: hidden !important;
}
But didn't get results so far.
I achieved it with this second class approach by setting:
.ng-hide.only-hide {
visibility: hidden !important;
display: block !important;
}
As Angular sets .ng-hide with display:none, I make it invisible but present setting display:block.
To preserve and maintain the space occuped by the div you can't use directly ng-hide or ng-show.
You can use the ng-style directive as following:
<div ng-style="conditionHide1">First div</div>
<div ng-style="conditionHide2">Second div</div>
then your conditionHide1 and conditionHide2 should be like
if (condition1)
$scope.conditionHide1= {'visibility': 'hidden'}; // then div1 will hidden.
else
$scope.conditionHide1= {'visibility': 'visible'}; // then div1 will visible.
if (condition2)
$scope.conditionHide2= {'visibility': 'hidden'}; // then div2 will hidden.
else
$scope.conditionHide2= {'visibility': 'visible'}; // then div2 will visible.
You can change the visibility of the button by changing the $scope.conditionHide1 and $scope.conditionHide2 according to your conditions.
Solution2 by using a custom directive:
Create a new directive named condition and relative to an Attribute. Set-up a watch to watch the value of the attribute and, based on the value, set to the element (in this case the div) an appropriate css style. The value is mapped to the variable showDiv which change his value by clicking on the button. Clicking on the button, the value showDiv became the opposite !showDiv and the watch change the visibility from visible to hidden and vice-versa.
angular.module('MyModule', [])
.directive('condition', function() {
return {
restrict: 'A',
link: function(scope, element, attributes) {
scope.$watch(attributes.condition, function(value){
element.css('visibility', value ? 'visible' : 'hidden');
});
}
};
})
.controller('MyController', function($scope) {
$scope.showDiv = true;
});
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='MyModule' ng-controller='MyController'>
<div condition='showDiv'>Div visible/invisible</div>
<button ng-click='showDiv = !showDiv'>Hide div or show it</button>
</div>
I'm using <a href> element along with :target css selector to show a <div> which by default is set to display:none. Problem is, that when I click on the link to show that <div>, it is automatically scrolling down my site towards that <div>.
Is there a way to stop the screen movement?
Unfortunately I am not yet proficient in anything besides CSS and HTML.
You can use event.preventDefault() to avoid this. Something like this:
$('a.yourclass').click(function(e)
{
//your code
e.preventDefault();
});
OR:
link
in the link enter:
Link here
You'll need JS anyway:
// (in jQuery)
$el.on('click', function(e) {
// find current scroll position
var pos = document.body.scrollTop || document.documentElement.scrollTop;
// let normal action propagate etc
// in the next available frame (async, hence setTimeout), reset scroll posiion
setTimeout(function() {
window.scrollTo(0, pos);
}, 1);
})
I don't know if this will flicker the screen. It might. It's a horrible hack either way.
In my Chrome, there's no flicker: http://jsfiddle.net/rudiedirkx/LEwNd/1/show/
There are two ways to tell the browser we don't want it to act:
The main way is to use the event object. There's a method
event.preventDefault().
If the handler is assigned using on (not by
addEventListener), then we can just return false from it.
Example:
Click here
or
here
This is a bit of a hack but you could use a basic css work around:
CSS only Example
#div1 {
height: 0;
overflow:hidden;
}
#div1:target {
height: auto;
margin-top: -110px;
padding-top: 110px;
}
#div2 {
background:red;
}
Click to show
<div id="div1">
<div id="div2">Content</div>
</div>
If you need it to be a little more flexible you can add some js...
More Flexible Example with JS
$('a').click(function () {
$('#div1').css({
'margin-top': 0 - $('#div1').position().top + $(window).scrollTop(),
'padding-top': $('#div1').position().top - $(window).scrollTop()
});
});
Basically you're pulling the top of div1 up with the negative margin and then pushing div2 back down with the padding, so that the top of div1 rests at the top of the window... Like I said its a hack but it does the trick.
Those links are anchor-links and by default made for those jumps :) You could use JS to prevent the default behaviour in some way. For example using jQuery:
$('a').click(function(e){e.preventDefault();});
or by default add return false; to the links
Avoid using :target all together and just use onclick event.
function myFunction()
{
document.getElementById('hiddenDiv').style.display = 'block';
return false;
}
http://jsfiddle.net/3ypYW/
<div class="service1"><p>Option 1</p></div>
I have created a simple div with a hover feature that I'd like to convert into a radio button to be part of a form. I am well versed in forms and divs and CSS and JQuery but I have no idea how, if possible, I could tie them all together to create a radio button that would obviously stick green when selected.
Thanks!
try this:
in your css add a class for the checked style, it could be the same as the hover.
.service1:hover, .checked { background:#66ff99; color:#000; }
add a js call to your link and don´t forget the "#" to stay on page:
<a href="#" onclick="check(this)">...
finally define the js function which adds the .checked class to the div:
<script type="text/javascript">
function check(element) {
d = element.firstChild;
d.className = d.className + " checked";
}
</script>