Im using reference from here : http://www.cssnewbie.com/example/showhide-content/ and confused with the javascript
I want if I click see more, the see more wont become invisible, only activate the link
PS: I tried this at jsfiddle but dunno why didnt working, here it is: http://jsfiddle.net/cfp35/
The code:
<a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">
home
</a>
<div id="example" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p>Hide this content.</p>
</div>
CSS:
.more {
display: none;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
}
It's simple. If #shID element is not displayed, let it display.
No change in the buttom at all.
function showHide(shID) {
if (document.getElementById(shID)) {
if ((document.getElementById(shID).style.display == 'none')||(document.getElementById(shID).style.display == '')) {
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID).style.display = 'none';
}
}
}
Related
I work on a WordPress site for a friend and use the free Kadence Theme for that.
I want to display some text and when i hover over some of the words inside it, i want the whole background-colour of the site to change.
For that i identified an element to address with DevTools:
<div id="wrapper" class="site wp-site-blocks">
It works just fine, but ONLY if you hover fast enough from one span-element to another.
Try it out. First move your cursor slowly (no change of the background color). Then move the cursor quickly (background changes).
Why is that?
/* color change of text on hover */
h1>span:hover {
color: #dddddd;
}
/* color change of background on hover */
#wrapper:has(#rule1:hover) {
background: red;
}
#wrapper:has(#rule2:hover) {
background: blue;
}
#wrapper:has(#rule3:hover) {
background-color: green;
}
<div id="wrapper" class="site wp-site-blocks">
<section class="intro">
<h1>Rae magnim
<span id="rule1">volorrum</span>
<span id="rule2">recate</span>
<span id="rule3">parchil</span> ipsandiscias est labo.
</h1>
</section>
</div>
I also tried in vain to address the class instead like so:
.site:has(#rule1:hover) {
background: black;
}
Any ideas?
You can't change the background of the site when hovering an element using css only. Generally speaking a child cannot affect a parent in css, it's the other way around. It is only when using relative selectors that you can achieve it. Selectors such as: + and >.
With javascript that's a different story.
var list = document.querySelectorAll(".affects-wrapper");
var wrapper = document.querySelector("#wrapper");
list.forEach(function(item) {
item.addEventListener('mouseenter', function() {
wrapper.classList.add(item.id + "-class")
})
item.addEventListener('mouseleave', function() {
wrapper.classList.remove(item.id + "-class")
})
})
/* color change of text on hover */
h1>span:hover {
color: #dddddd;
}
/* color change of background on hover */
.rule1-class {
background: red;
}
.rule2-class {
background: blue;
}
.rule3-class {
background-color: green;
}
<div id="wrapper">
<section class="intro">
<h1>Rae magnim
<span id="rule1" class="affects-wrapper">volorrum</span>
<span id="rule2" class="affects-wrapper">recate</span>
<span id="rule3" class="affects-wrapper">parchil</span> ipsandiscias est labo.
</h1>
</section>
</div>
I have the following radio button from angular material, and I want to apply some CSS when it has been selected, but the CSS is not working, and I do not know why
however, the :hover works perfectly fine
I have provided both HTML and CSS
could you please help me with this?
.things {
&:focus {
background-color: red;
}
&:hover {
.thing-name {
color: #9c27b0;
}
}
}
<mat-radio-button class="things" *ngFor="let thing of things" [value]="thing.name">
<span class="thing-details">
<img class="thing-image" [src]="thing.logo" [alt]="thing.name" />
<h4 class="thing-name text-center mt-3 pt-3">{{ thing.name }}</h4>
</span>
</mat-radio-button>
I just figured it out.
the following code will both hide the circle of the radio button and changes the color of another element on its selection
::ng-deep.mat-radio-button.mat-accent.mat-radio-checked {
span .thing-name {
border: 1px solid #ffffff !important;
background-color: #28a745 !important;
}
}
// the bellow are for deleting the circle from the radio buttons
::ng-deep .mat-radio-button .mat-radio-container {
width: 0;
}
::ng-deep .mat-radio-container .mat-radio-outer-circle,
::ng-deep .mat-radio-container .mat-radio-inner-circle {
border: none;
width: 0;
}
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I have these css code:
.tabs_inactive {
border: 1px solid #cccccc;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-color: #eeeeee;
border-bottom: #cccccc;
}
.tabs_inactive:hover {
background-color: #ff8000;
border-color: #ff8000;
cursor: pointer;
}
/*this does not work*/
.tabs_inactive:hover a {
color: #ffffff;
}
.tabs_active {
background-color: #ffffff;
border-bottom: 2px solid #ffffff;
}
.tabs_active:hover{
background-color: #ffffff;
border: 1px solid #cccccc;
border-bottom: 2px solid #ffffff;
cursor: default;
}
.tabs_active:hover a {
cursor: default;
}
The last one (.tab_active:hover a) is working perfectly in my webpage, but the third block is not. I can not figure out why this happened.
Could somebody explain me why the third block doesn't work?
Thanks!
UPDATE 1:
Here is the relative JavaScript code:
//add class "tabs_inactive" to the original tabs option.
$( "#tabs ul li" ).addClass("tabs_inactive");
//default: set the first tab as the active one.
$( "#tabs ul li" ).first().toggleClass("tabs_active");
//to make sure the style sheet will be changed when click on the inside <a> tag
$( "#tabs ul li a" ).live( "click", function () {
//close other tabs
$( this ).parents("ul").children("li").each( function (){
if( $(this).hasClass("tabs_active")){
$(this).removeClass("tabs_active");
}
});
$( this ).parent().toggleClass("tabs_active");
return false;
});
//change the class to "tabs_active" when the tab is clicked
$( "#tabs ul li" ).live( "click", function () {
//close other tab
$( this ).parent().children("li").each( function (){
if( $(this).hasClass("tabs_active")){
$(this).removeClass("tabs_active");
}
});
$( this ).toggleClass("tabs_active");
});
And also HTML code:
<div id="tabs">
<ul>
<li>HOME </li>
<li>option1 </li>
</ul>
<div id="homepage">
<p>
HOME:
Here is the home page
</p>
</div>
<div id="option1">
<p>
Option1:
Here is the tag page 1
</p>
</div>
</div>
So, yes, I am trying to implement a tab menu, and this is a practice so I don't want to use the original JqueryUI function. Dose somebody know that what is the problem?
Thank you.
Sorry guys, it's not a typo or something else, I just make a mistake that I give a font color style to the #tab ul li a before, which is using the id selector, and that make the the function toggleClass doesn't work at all. I convert that tag from id to class then every thing works fine. thanks all, That's my bad.
I'm working on creating tooltips for some content with jQuery and CSS. It works as it should in that the tooltip appears on mouseenter and disappears on mouseleave. My problem lies within my CSS layout. When the tooltip is rendered to the page, it is constricted to the height of its parent:
html:
<div id="allInvTable">
<div class="invItmCont" style="border-bottom:1px solid white;">
<div class="invItmItm">An Item</div>
<div class="invItmStats" style="display:none;">
<div style="clear:both;">
...Some content here...
</div>
<span style="display: none; top: -90px;">
<div style="clear:both;">
...The same content placed here via jquery to display as the tooltip...
</div>
</span>
</div>
</div>
</div>
css:
#allInvTable {
overflow:auto;
}
.invItmCont {
text-decoration:none;
display:block;
float:left;
padding:0 15px;
text-align:center;
position:relative;
clear: both;
}
.invItmCont span {
background-color: #000;
border: 5px solid #826217;
border-radius:15px;
-moz-border-radius:15px;
-o-border-radius:15px;
-webkit-border-radius:15px;
-moz-box-shadow: 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px #000;
box-shadow: 2px 2px 2px #000;
width:200px;
height:auto;
position:absolute;
display:none;
top:-90px;
color:#fff;
left:-37px;
}
Just for reference, the jquery:
<script>
$("#allInvTable div.invItmCont").append("<span></span>");
$("#allInvTable div.invItmCont").hover(function() {
$(this).find("span").animate({opacity:"show", top: "-70"}, "slow");
var itmStat = $(".invItmStats", this).html();
$(this).find("span").html(itmStat);
},
function() {
$(this).find("span").animate({opacity:"hide", top: "-90"}, "fast");
});
</script>
I know that it has to do with the overflow:auto; on #allInvTable because when i remove that attribute, it renders correctly, but the items flow out of their container. How do I fix this?
Um, I know this doesn't answer your question directly, but have you looked at existing tooltip libraries like Twitter's Bootstrap for example: http://twitter.github.com/bootstrap/javascript.html#tooltips
The reason I say this is because, I would rather spend time working on the core of my app rather than try and re-invent the wheel. Unless, you are indeed trying to learn the process of creating the wheel to begin with. Which is also good by the way. You learn a lot that way too.
One of the things you can do is just swap the "tooltip" content into the place you want to display it (that already has the visibility and formatting you want).
This approach treats a display:none element like a content stash.
$("#allInvTable div.invItmCont")
.hover(function() {
var outgoing = $(".invItmItm", this).html();
var incoming = $(".invItmStats", this).html();
$(".invItmItm", this).html(incoming);
$(".invItmStats", this).html(outgoing);
}, function() {
var outgoing = $(".invItmItm", this).html();
var incoming = $(".invItmStats", this).html();
$(".invItmItm", this).html(incoming);
$(".invItmStats", this).html(outgoing);
}
);
See: http://jsfiddle.net/zatz/mgtKD/6/
Alternatively, you can start futzing with z-layers which should be enough of a bad experience that you are ultimately driven to use/adapt one of the existing libraries.
I use anchor as my site navigation.
<div id='nav'>
<a href='#abouts'>
<div class='navitem about'>
about
</div>
</a>
<a href='#workss'>
<div class='navitem works'>
works
</div>
</a>
</div>
The CSS
#nav {
margin-left: 50px;
margin-top: 50px;
text-transform: uppercase;
}
.navitem {
background: #333;
color: white;
width: 230px;
height: 50px;
font-size: 25px;
line-height: 50px;
padding-left: 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin-top: 10px;
}
.about:hover {
background: #cc00ff;
}
.about:active {
background: #ff00ff;
color: #000;
width: 250px;
}
.works:hover {
background: #0066FF;
}
.works:active {
background: #0099cc;
color: #000;
width: 250px;
}
I'm wondering how to keep the div element style keep in the :active state once after the click until I hit another nav bar item, so how to do it?
Combine JS & CSS :
button{
/* 1st state */
}
button:hover{
/* hover state */
}
button:active{
/* click state */
}
button.active{
/* after click state */
}
jQuery('button').click(function(){
jQuery(this).toggleClass('active');
});
The :target-pseudo selector is made for these type of situations: http://reference.sitepoint.com/css/pseudoclass-target
It is supported by all modern browsers. To get some IE versions to understand it you can use something like Selectivizr
Here is a tab example with :target-pseudo selector.
I FIGURED IT OUT. SIMPLE, EFFECTIVE NO jQUERY
We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
--
To make content itself clickable:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
To make button change content:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
Hope it helps!!
You can use a little bit of Javascript to add and remove CSS classes of your navitems. For starters, create a CSS class that you're going to apply to the active element, name it ie: ".activeItem". Then, put a javascript function to each of your navigation buttons' onclick event which is going to add "activeItem" class to the one activated, and remove from the others...
It should look something like this: (untested!)
/*In your stylesheet*/
.activeItem{
background-color:#999; /*make some difference for the active item here */
}
/*In your javascript*/
var prevItem = null;
function activateItem(t){
if(prevItem != null){
prevItem.className = prevItem.className.replace(/{\b}?activeItem/, "");
}
t.className += " activeItem";
prevItem = t;
}
<!-- And then your markup -->
<div id='nav'>
<a href='#abouts' onClick="activateItem(this)">
<div class='navitem about'>
about
</div>
</a>
<a href='#workss' onClick="activateItem(this)">
<div class='navitem works'>
works
</div>
</a>
</div>
If you want to keep your links to look like they are :active class, you should define :visited class same as :active so if you have a links in .example then you do something like this:
a.example:active, a.example:visited {
/* Put your active state style code here */ }
The Link visited Pseudo Class is used to select visited links as says the name.