display:none not changing behavior of css - javascript

Here is a simple example of some markup I have:
HTML:
<input type="checkbox" name="ex1">
<input type="checkbox" name="ex2">
<ul class="reveal">
<li>Hi</li>
<li>Bye</li>
</ul>
The checkboxes are used as filters to remove <li>s with certain tags. This all works fine. My issue is that when the checkbox is checked and the filter logic runs, it uses a display:none to remove the specific <li>s but the css I use to format doesn't get applied correctly after the fact. For example, let's say clicking the first checkbox removes the first <li> and the 'bye' <li> is the only one left. That will work fine, but the border I have defined in the css persists even though the selector shouldn't match it anymore. This is the selector I used:
CSS:
#columns .calendar td ul.reveal li + li {
border-top: 1px dotted #999;
}
This style is applied correctly at first, but after the display:none is applied and the 'bye' li is the only li left it will still have the dotted border.
I've used the browser developer console to check and this is indeed the only style rule that is being applied to create the border.
I've read something along the lines of display:none not repainting the DOM, and to access a variable that forces the browser to repaint (something like $('whatever')[0].offsetHeight) but this does not seem to fix my problem.

jQuery Based Solution
CSS rules by themselves will not work since the DOM is being manipulated by JavaScript.
What you could do is use JavaScript to identify the first li element left in the list.
For example:
$('ul.reveal li').filter(':first').addClass('first-child');
where the CSS rules are:
ul.reveal li {
border-top: 1px dotted #999;
}
ul.reveal .first-child {
border-top: none;
}
Demo fiddle: http://jsfiddle.net/audetwebdesign/BXMaB/
The jQuery action picks out the first li element in each ul list and then applies a CSS rule to know out the top border that appears on all li elements by default.
You would need to apply this jQuery action when ever a check box (event) is checked, in addition to binding it to the document load event.

The CSS selector you have chosen is interested in the structure of the DOM rather than what is and isn't painted. Selector S + S will still apply to S2 even when S1 is being removed, which is why it's still getting a top border.
Given that you are able to manipulate the DOM I would suggest either removing and re-adding the element itself or writing a selector that will respect a class added to S1 (which also applies display:none to it).
For instance:
selector:not(.hidden) + selector { [Only works in IE9+] }
or
selector.active + selector.active { [Works in IE7+] }

Related

:hover doesn't work with jquery script

I have a <ul> where each li reponds on :hover. Here is the css:
.profile_nav_item:hover {
border-color: #af0621;
}
But it want these borders to stay colored when I click them.
I have this jQuery function:
$('a[rel="tab"]').click(function(e){
var url = $(this).attr('href');
$('.profile_nav_item').css('border-color', 'transparent');
$('.profile_nav_item', this).css('border-color', '#af0621');
But after clicking, the :hover css property isn't called anymore. Does anyone know how I could fix this?
Here is the fiddle: http://jsfiddle.net/zRJK9/
You need to reset CSS properties to '' (empty string) for the style sheet to kick in again.
$('.profile_nav_item').css('border-color', '');
basically you are forcing the element style to #af0621 after which the stylesheet will do nothing to override it (element styles take priority).
Passing an empty string value to css() removes the inline style setting.
JSFiddle: http://jsfiddle.net/zRJK9/6/
Because inline css attribute has more priority then included one. So when you set it with jQuery it got like this: style="border-color: #af0621". Try to use !important in your css:
.profile_nav_item:hover {
border-color: #af0621 !important;
}

How to trigger bootstrap's mouseover effect programmatically

In twitter bootstrap, some elements get "greyed out" when the mouse hovers over them. This is true of buttons and linked list group items. Two examples are here: http://imgur.com/a/ABhkT#0
Can this effect be triggered programmatically? If so, how?
Yes, Using the 'onmouseover' attribute. It is quite similar to the 'onclick', except obviously for hovering instead.
Like the 'onclick', you will have to include a java script function that would change the css style for that element.
Depending on what you are trying to have this effect on, you could either put it right into the tag that is the object, or use <span></span>.
Ex:
<div onmouseover="fade()">
<p>text to fade</p>
</div>
Javascript:
function fade(){
code to change style
}
should be straight forward, this would fade everything inside the div (including the background)
Ok, I figured it out.
If the effect were being caused by a css class, one could simply apply the class to the element, like this:
$('<my_element>').addClass('bootstrapMouseoverGrey')
This doesn't work, though, because the effect isn't caused by a class. It's caused by a pseudoclass. Pseudoclasses can't be added programmatically.
One workaround is to create a new actual class with the exact same definition as the pseudoclass. In my case, the pseudoclass is a.list-group-item:hover, defined in bootstrap.css.
a.list-group-item:hover,
a.list-group-item:focus {
text-decoration: none;
background-color: #f5f5f5;
}
I edited bootstrap.css to make a new (actual) class, bootstrapMouseoverGrey, with the same definition as the pseudoclass.
a.list-group-item:hover,
a.list-group-item:focus,
.bootstrapMouseoverGrey {
text-decoration: none;
background-color: #f5f5f5;
}
Now, I can just add this class to an element using the line at the top of the answer. This gives me the result I want. Works like a charm!
Using jQuery:
var event = jQuery.Event('<event_name>');
event.stopPropagation();
$('<selector>').trigger(event);
Taken from the docs.

Changing backgroundColor with javascript affects CSS's :hover

I have set of 6 divs, and when I click on each of them, a certain div changes its innerHTML, like some kind of menu. When user hovers over those "buttons" (actually divs), they highlight with CSS's property :hover. There's also :active, when a user is clicking on a "button".
Since the "information" div changes when clicked, I'd like to have the current selected div constantly highlighted, in a whole different color than when on hover. So I used javascript for this. I call a function that changes background color of all of the "buttons" (so I don't have to "remember" which one was clicked), and then changes this div's backgroundColor to appropriate color.
However, now I lost my :hover and :active styles. How to handle this?
Here are code snippets as requested:
function ofarbajSveU999() {
document.getElementById("menubutton1").style.backgroundColor = "#999";
...
document.getElementById("menubutton6").style.backgroundColor = "#999";
}
function showMeaning() {
document.getElementById("information").innerHTML = meaning;
ofarbajSveU999();
document.getElementById("menubutton1").style.backgroundColor = "#ccc";
}
meaning is a string, menubuttonX are 6 div's that act like buttons.
#kotd .menubutton {
float: left;
background-color: #999;
width: 120px;
padding: 2px 0px;
cursor: pointer;
}
#kotd .menubutton:hover {
background-color: #aaa;
}
#kotd .menubutton:active {
background-color: #bbb;
}
instead of changing the color with javascript, use javascript to add and remove a class (for example .current) to the active "button" and then style the .current class accordingly in CSS. jQuery would be the most elegant solution to do that using the addClass(),removeClass() or toggleClass() functions.
To explain the idea a bit further:
When you click on a button, you add a class to its class attribute instead of adding inline style properties. This allows to style them via your CSS stylesheet.
In jQuery it is really easy. You can do something like this:
$(".menubutton").click(function () {
$(".menubutton").removeClass("current");
$(this).addClass("current");
});
Step-by-step:
you first look for all DOM elements with class menubutton by calling $(".menubutton"). Then by using .click() you trigger an event if one of the menubutton elements gets clicked. The function(){} includes the functions that get executed on click. First
$(".menubutton").removeClass("current");
again gets all objects with class menubutton and removes the class current from any of them that have it. Second
$(this).addClass("current");
adds class current ti "this" ... meaning the clicked object.
This will make the clicked object in the DOM look something like this:
<div class="menubutton current">
In your CSS you can now style the objects that has the additional current class:
.currnet {
background-color:blue;
color:white;
}
DEMO
In pure JavaScript this will be a bit more tricky. Maybe this thread can give you some more insight into that:
How to add/remove a class in JavaScript?
You should be using jquery's .hover() function extensively.
Check out http://api.jquery.com/hover/ & http://api.jquery.com/click/
The samples and you can easily do this.
To be exact, you should be using the following two built-in functions :
$(selector).hover(handlerIn, handlerOut);
$(selector).click(event);
Cheers

Is there a way to have a div tag without having a line break, or is there an alternative?

In my website, in asp.net 4 / vb, I have a situation where I need to include a class, "noprint", in my footer, as defined in print.css. But I already have a span class, so I wrapped div tags around it. And my tr's and td's all have classes in them already.
Basically, I have this in my footer:
Knowledge Base | Contact USS | Copyright © USS Vision Inc. 2012 | 888-888-8888
And the only thing I want printed out is the phone number.
I use
<div class="noprint">whatever I want omitted when printing</div>
And that works fine. But when viewing the webpage, I don't want the 888-888-8888 to appear below everything else, so I can't use div tags, I suppose. The noprint works great, but is there any way I can use the noprint in my footer without putting the phone number below the rest of the footer due to the div tags? Thanks for any help anybody can offer!
Update: My print.css stylesheet looks like this:
#media screen
{
/* whatever styles you have for display */
}
#media print
{
.noprint { display: none; }
}
So I don't know how to make the div tags display: inline, but I will search around and try to figure it out!
gd1 is absolutely right about span/div and display inline/block, but on a side note I'd add that what you're trying to achieve is often done with a list (as it really is a list of links in your footer)
<ul class="footer">
<li class="no-print">KnowledgeBase</li>
...
<li>888-888-888</li>
<ul>
with a css like
.footer li {
list-style-type: none;
display: inline;
padding: 0 10px;
border-right: 1px solid black;
}
.footer li:last-child {
border-right: none;
}​
hope that helps
Use <span>.
However you can make a div "inline" using the style display: inline, but in this case you just need a <span>.
use css
<div style="display:inline" class="noprint">whatever I want omitted when printing </div>
If not use the inline counterpart span, as a answer already said. But remember inline display donot have block properties like height, top-margin, bottom-margin.
If you still want to use an extra div, I recommend using display:inline, but if you just want the whole footer to have both classes you can do that as well.
You can add multiple classes like this:
<span class='footer lower noprint'></span>
In CSS this would look like:
.footer.lower.noprint{ display:none; }
Alternatively, the 'noprint' class will also work without specifying all three classes.
Here's an example: http://jsfiddle.net/yKRyp/
well set the specific width and height of the div using CSS and apply float
<div style='float:left; border:1px solid blue; width:100px; height:100px'>
div 1
</div>
<div style='float:left; border:1px solid red; width:100px; height:100px'>
div 2
</div><div style='float:left; border:1px solid orange; width:100px; height:100px'>
div 3
</div>
a live example here
http://jsfiddle.net/AGWGs/
div is a block-type element, it is usually used as to group and contain block-type elements.
Using CSS, you can change the display type of any element, however.
In a quick example:
display:inline Makes an element to show inline, they can be put side by side. span element is an inline element. This cannot use block-type-only css rules such as: margin, padding, width, height ...
display:block Makes an element to be displayed as a block. Unless inherited values or given CSS rules, they will take a line long, blocked. They can take block-type CSS rules. And they can be stacked side-by-side using float. However, unless the line is cleared(clear: left, clear:right or clear:both), following elements after the floated element will overflow the previous container.
display:inline-block Makes an element have block features, with inline displaying. This is pretty similiar to using float and making block-type elements shown in-line. However this rule is IE8+ support only, so I would encourage you to use floating to keep the maximum compatibility.
P.S: There are hacks that can be used to have display:inline-block feature used on IE5.5+.

Forcing IE8 to rerender/repaint :before/:after pseudo elements

so I've been toying with this calendar-ish thingy for a bit:
Grid of divs (mimicking a table)
Hovering over a table cell displays a tooltip with 2 icons each consisting of a div with :before and :after elements
Icons change colour depending on colour of cell hovered and that of its previous sibling (cell's colour class is applied to the icon).
Stripped down fiddle: http://jsfiddle.net/e9PkA/1/
This works fine in every browser but IE8 and below (IE lte 7 and I will never friends, but IE8 would be nice to have).
IE8 notices the change of classNames and updates the divs' colour accordingly but completely ignores the colour changes implied by the :before and :after declarations, e.g.:
.wbscal_icon_arrival:before {
width: 12px;
height: 4px;
left: -8px;
top: 6px;
background-color: silver;
}
.wbscal_icon_arrival.wbscal_full:before {
background-color: #ff0000 !important;
}
In the fiddle above, the :before/:after elements are coloured exactly once: the first time the tooltip is shown.
In another version it would update everytime I'd move the mouse out of the "table" div, but not if the tooltip is hidden when hovering a "cell" div border.
I've tried force-triggering repaints by adding/removing other classes to/from the element/its parents/the body, editing/accessing style attributes and whatnot so I guess it's not your average repaint problem.
Is there a JS hack that fixes this and forces :before/:after to update?
Been trying to figure out the same thing. Basically IE8 doesn't redraw the pseudo elements unless you make a change to the content. So I've modified your example here (just CSS): http://jsfiddle.net/lnrb0b/VWhv9/. I've added width:0 and overflow:hidden to the pseudo elements and then added content:"x" to each colour option where x is an incrementing number of spaces.
It works for me; hope it helps you!
Adding content:"x" to each declaration of the psuedo-elements and incrementing the number of spaces for each different state of the element DEFINITELY FIX the issue.
Basically, the idea is to tell IE8 that the content is slightly different in each state, so redraw the content for each state. So, if the content is the same, we 'fake' it with empty spaces. BRILLIANT!!
#lnrbob really nice answer!!
i had the problem that i used the before and after pseudos of a checkbox input, which are using some parent attributes for displaying their content (due to being easily able to implement translation there).
so they look like:
input:before {
content: "" attr(data-on) "";
}
input:after {
content: "" attr(data-off) "";
}
and the markup looks like this:
<div class="switch off" data-on="It is ON" data-off="It is OFF">
<input id="switch" name="switch" type="checkbox" class="off">
</div>
and the modification i do in jquery looks like this:
var mSwitch = $('div.switch'),
on = $.trim(mSwitch.attr('data-on')),
off = $.trim(mSwitch.attr('data-off'));
// remove any spaces due to trim
mSwitch .attr('data-on', on);
// add a space
mSwitch .attr('data-on', on + ' ');
mSwitch .attr('data-off', off);
mSwitch .attr('data-off', off + ' ');
and i call this modification after setting/removing classes to change the style of the "checkbox" which is rather a switch button in this case :D
so this way you do not get a stackoverflow from too much space characters if some hardcore testers auto click the input for an infinite time ;)
like that:
<div class="switch on" data-on="ON" data-off="OFF ">
Basically IE8 doesn't redraw the pseudo elements unless you make a change to the content, so you can modify like below:
.wbscal_icon_arrival:before {
width: 12px;
height: 4px;
left: -8px;
top: 6px;
background-color: silver;
content: '';
}
.active .wbscal_icon_arrival:before {
background-color: gold;
content: ' ';
}
I am having a similar issue in IE11 and Edge right now.
on hover, I try to change Content from 'v' to 'V'.
=> Doesnt work on any microsoft browser.
However, if I change the letter to something else ('w'/'W') or two letters('vV'), the icon changes. Yay Microsoft.

Categories

Resources