I'm working with Ionic Framework. How could I show background-color change or similar when an item is tapped on mobile? All the states (active, focus etc) below are not displaying if you just tap the item, but will show if you hold down your finger. This is not wanted behaviour as it doesn't really indicate to the user that he/she has tapped an element and something should happen (ie. view should change/is about to change).
CSS:
.item-thumbnail-right {
background-color: #FFFFFF;
}
.item-thumbnail-right:active,
.item-thumbnail-right:focus,
.item-thumbnail-right.active {
background-color: #CCCCCC;
}
HTML:
<div class="item item-thumbnail-right">
<div class="img-wrapper">
<div class="img" src="img.jpg"></div>
</div>
<h2 class="title">Title</h2>
<p>Text lorem ipsum...</p>
</div>
Should I use Ionics on-tap directive to add a class and show the different background-color accordingly? I should then probably also remove the class at some point if it stays in the view cache.
It seems like I had the active class wrong. Ionic adds a class activated in the item clicked/tapped so what I was trying works, but the class needs to be activated like this:
.item-thumbnail-right {
background-color: #FFFFFF;
}
.item-thumbnail-right.activated {
background-color: #CCCCCC;
}
Related
I'm suffering to active color on my template, I have used this template http://codepen.io/suez/pen/XJGOyL
How can I active menu, like when I clicked another menu not active. how to do this?
This is my code:
//HTML
<div class="demo__content">
<h2 class="demo__heading">What do you need help with?</h2>
<div class="demo__elems">
<div class="demo__elem demo__elem-1">With advertising online</div>
<div class="demo__elem demo__elem-2">With a website</div>
<div class="demo__elem demo__elem-3">I need help with both</div>
<span class="demo__hover demo__hover-1"></span>
<span class="demo__hover demo__hover-2"></span>
<span class="demo__hover demo__hover-3"></span>
<div class="demo__highlighter">
<div class="demo__elems">
<div class="demo__elem">With advertising online</div>
<div class="demo__elem">With a website</div>
<div class="demo__elem">I need help with both</div>
</div>
</div>
</div>
//CSS
.demo__hover-2 {
top: 7rem;
}
.demo__hover-2:hover ~ .demo__highlighter {
-webkit-transform: translateY(7rem);
transform: translateY(7rem);
}
.demo__hover-2:hover ~ .demo__highlighter .demo__elems {
-webkit-transform: translateY(-7rem);
transform: translateY(-7rem);
}
.demo__hover-3 {
top: 14rem;
}
.demo__hover-3:hover ~ .demo__highlighter {
-webkit-transform: translateY(14rem);
transform: translateY(14rem);
}
.demo__hover-3:hover ~ .demo__highlighter .demo__elems {
-webkit-transform: translateY(-14rem);
transform: translateY(-14rem);
}
.demo__elem a:active, a:hover, a:focus {
text-decoration: none;
outline: none;
}
If you are able to use jQuery in you code you can do it by adding "active" class to selected element of your menu.
For instance
$(".demo__elem").click(function() {
$(".demo__elem").removeClass("active"); // remove active from all
$(this).addClass("active"); // add active to this
});
and you "active" css should be styled as well.
If you're wanting to click a link, go to that page, and have that link retain the active state once you're on that page, you'll need to do one of three things.
Using HTML and CSS only, every page can be built completely and individually. This is called a static website. The menu will live on each page, and the link for the page you're on will need a unique ID (usually class="active") in order to set it apart as the active link. Using CSS, you can style to appear how you want.
You can use javascript to dynamically detect the page you're on, usually by reading your URL, and apply the active state to the appropriate link.
You can use a server side codding language such as PHP, ASP, RUBY, etc., and set your menus to dynamically detect which page you're on based on internal/server side code and apply the active state to the menu. This is a very clean, and once you get the hang of the language you choose, it's a very easy and effective method. This is the most popular choice by developers and is called a dynamic website.
In each case, you'll still use CSS the exact same way to style the active link.
I want to hover on an element (an imagemap area, actually but I made it a simple div for this example) and create an animation on a different div element. Since they're not child or sibilings I had to use java and addclass but it's not working. It looks like the trigger element is not recognized and if I hover it nothing happens
<div class="testHover">
<p>Hover me to change color</p>
</div>
<div id="timeLine">
<div id="primaGuerraMondiale">
<h2>Content</h2>
</div>
</div>
css
#primaGuerraMondiale {
background: green;
}
.animated {
color:white;
}
javascript
$('.testHover').hover(function() {
$('#primaGuerraMondiale').addClass('animated');
}, function() {
$('#primaGuerraMondiale').removeClass('animated');
});
Here is the fiddle https://jsfiddle.net/elisapessa/yzLe803n/
You need jQuery 1.9.1 and above to make it work. The code is right.
In the left hand panel in the jsfiddle, there is a section called "Add Resources". Click this, then add the URL into the field and click the + button. This will add your resource (JS or CSS) to the page. After that you click on run and check it:
I am trying to create a bootstrap accordion for my app. I also have background color in its parent element. My problem is that when I expand my accordions, it extends the height of my page and the background color doesn't cover the extended area.
my html
<div id='wrapper>
<accordion id='accordion' close-others="false">
<accordion-group>
<accordion-heading >
<h2 class='title'>Title 1</h2>
</accordion-heading>
<div id="first" class="panel-collapse collapse in">
//contents...
</div>
</accordion-group>
//I have 5 to 6 accordion group.
</accordion>
</div>
CSS:
//I used height:100% and it looks fine when the page first loaded but not after //user //expand all the accordion.
#wrapper{
background-color: red;
height: 100%;
display: block;
}
Can anyone help me about it? Thanks a lot!
Looking through the documentation I noticed you could catch the event shown.bs.collapse which
is fired when a collapse element has been made visible to the user
(will wait for CSS transitions to complete).
So you could try something like:
$('#myCollapsible').on('shown.bs.collapse', function () {
document.getElementById('wrapper').style.backgroundColor="red";
})
Edit: if that does not work try show.bs.collapse
I am trying to create a editor page that allows you to preview HTML files.
The problem is however that the editors styles are being inherited by the previewed HTML file e.g.:
<div class="header">
<div class="top">
Editing HTML page - page1.html
</div>
</div>
<div class="preview">
<div class="header">
<div class="top">
Page 1.html
</div>
</div>
</div>
I know that a work around would be to use an IFRAME, however I would prefer not to do this as I will be allowing drag and drop capabilities.
A CSS solution would be great, I did have the idea of using jquery to add a class to every item in the 'preview' area and using the following CSS for the editor page:
.header:not(.preview) {
background-color:#000;
}
.top:not(.preview) {
color: #fff;
}
This however seems a bit of a hacky solution and it would be great if there was a neater solution!
If you ultimately need to use not, you should invert your selectors:
:not(.preview) > .header { background-color:#000; }
:not(.preview) > .header .top { color: #fff; }
But it's better to design selectors in some other way
I have 3 links that represent the content for one iFrame in my page. When you click each link, it'll reload the contents of that iFrame without reloading the page.
how do i set the image of my link to change when it's active?
here's my code:
<div id="tabs">
<div id="overview">
<a id="overviewtab" target="tabsa" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
<a target="tabsa" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
<a target="tabsa" href="trframe.html">Reviews</a>
</div>
</div>
<div id="tabs-1">
<!--<div id="scroller">-->
<iframe name= "tabsa" width="95%" height="100%" frameborder="0"></iframe>
</div>
CSS code:
#gallery a {
text-indent: -9999px;
padding-top: 40px;
background: url(../images/GalleryTab.png) no-repeat;
height: 51px; width: 123px; position: absolute; z-index: 2;
}
#gallery a:active, a:hover {
text-indent: -9999px;
padding-top: 40px;
background: url(../images/galleryoverview.png) no-repeat;
height: 51px;
width: 123px;
position: absolute;
z-index: 2;
}
it doesn't seem to work.. :o i only see the change in image when i hold the mouse down on the link, but when i click it, the image remains the same as if it wasn't the active tab. :o thanks!!
I am not seeing a style for visited? Only active and hover.
add
#gallery a:visited{}
style and see if that helps.
But I wonder if that is what you are actually asking? You may want to link to be displayed differently from the other links if its the last link that the user clicked. To do that you may have to use some javascript.
For example, if you use jQuery you can do something like this:
$("#gallery a").click(function(){
$("#gallery a").removeClass("ActiveClass");
$(this).addClass("ActiveClass");
});
where ActiveClass is a CSS class for styling the link appropriately.
EDIT based on comment below.
Let us assume that you have three links that look the same (call that lookA). You click on one and it looks different from the other two (lookB) but the other two still looks the same (lookA). You then click on a second link. The second link is not lookB and the other two links are lookA. Does this sound like what you want? At least that is how I interpret your question.
Hence, create two classes in CSS:
.lookA {/*Style for lookA*/}
.lookB {/*Style for lookB*/}
of course you can use more meaningful names.
Then you can add a class to each of the links that you need to use in this scenario like this:
<div id="tabs">
<div id="overview">
<a class="imagelink lookA" id="overviewtab" target="tabsa" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
<a class="imagelink lookA" target="tabsa" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
<a class="imagelink lookA" target="tabsa" href="trframe.html">Reviews</a>
</div>
</div>
So that each link can be refered to by its class, that is, imagelink. Also each link has a default lookA.
Now in jQuery (I know you did not specify jQuery but using it is 100 times simpler than plain Javascript).:
$(document).ready(function(){
$(".imagelink").click(function(){
$(".imagelink").removeClass("lookB");
$(this).addClass("lookB");
return true;
});
});
So on click on the link, it removes lookB from any other link and applies it only to the clicked link.
Hope this helps a bit.
I believe the selector is:
#gallery a:focus {...}
This is (inevitably) applied variably across browsers, however.
Stu Nicholls has a demo over on CSS Play, this demo being to remove the default outline of the focussed element, and otherwise style the clicked element.
Presumably this would be more reliably effected with jQuery, but it can be done with CSS.