JS add in-line css to html - javascript

I'm stuck with something here:
I have a hidden div with some optional filters in a results page.
<div id='b-filters' class='row'>...</div>
Initially it is hidden with display: none;, when click a link it shows with some buttons and selectize combos.
The problem is here:
When div shows up, some JS, I don't know how to find out which; adds some in-line css:
<div id='b-filters' class='row' style='overflow: hidden; display: block;'>...</div>
So it is no possible to see the combos options. Using Chrome debugger I change overflow: hidden to overflow: visible and it works as I'd like.
I have tried:
In my external css file (app.css)
#b-filters{
...
overflow: visible;
...
}
But does not work, and in the same html file:
<head>
...
<style>
div#b-filters{
overflow: visible;
}
</style>
</head>
...
But Chrome inspector always show overflow: visible; crossed out.
Any idea? Thanks.
EDIT
I took #Stephen Thomas answer, but I'd like somebody help me with the way to find out which JS is adding that in-line css.

Without seeing the actual JavaScript, the only suggestion I can offer is
div#b-filters{
overflow: visible !important;
}
But if you show us your code, there is probably a more elegant way.

Instead of adding inline CSS directly to the element, why not abstract the CSS attributes into generalized classes, then just add/remove those classes?!
// style.css
.hide {
display: none;
}
// view.html
<div id="b-filters" class="row hide">...</div>
// app.js
btn.addEventListener('click', function(event){
var el = document.querySelector('#b-filters');
el.classList.remove('hide');
});

var problematicDiv = document.getElementById('b-filters');
if(problematicDiv.hasAttribute('style'))
{
problematicDiv.removeAttribute('style');
problematicDiv.style.display = 'block';
problematicDiv.style.overflow = 'visible';
}
This 'pseudo' js code should work as eventlistener.. haven't tested though, but I think it's ok.

Related

How to Remove Gaps between HTML Elements while printing

The HTML file attached here is working fine when viewed in browser but when I try to print it, there is a lot of gap between the Element such that each div is going on it's own page. how can I remove those gaps while printing?
the code : code
the hosted site : sitelink
You can check the problem by going into sitelink mentioned above and pressing ctrl + p.
You can Add float:left; in your css classes:
<style type="text/css">
div.nospace {
margin: 0;
display: inline-block;
float: left;
}
</style>
When creating your div, use class="nospace"
<div class="nospace">first div</div>
<div class="nospace">second div</div>
Sir Plz check this answer on that page. It would help you how can we remove space between HTML elements. In this article, everything is provided in enter link description here
you can solve problem buy adding small css property
font-size: 0;

Change div height onclick with animation

I'm trying to make a gallery using divs that change their height when you click on them. Ideally, this would include animation to smoothly expand the div's height. There will be several of each div on each page, so it needs to just expand that section.
It's actually supposed to turn out something like the news section on this page: http://runescape.com/
I'd like to do it with JavaScript/jQuery if possible.
$('div').click(function(){
$(this).animate({height:'300'})
})
Check working example at http://jsfiddle.net/tJugd/
Here's the code I ended up using:
JS:
document.getElementById("box").addEventListener("click", function() {
this.classList.toggle("is-active");
});
CSS:
#box {
background: red;
height: 100px;
transition: height 300ms;
width: 100px;
}
#box.is-active {
height: 300px;
}
HTML:
<div id="box"></div>
Fiddle:
https://jsfiddle.net/cp7uf8fg/
try
$('div').toggle(function(){
$(this).animate({'height': '100px'}, 100);
}, function(){
$(this).animate({'height': '80px'}, 100);
});
DEMO
jQuery rules. Check this out.
http://api.jquery.com/resize/
The complete solution:
Both spacer DIV and Margin or Padding on content DIV works but best to still have a spacer DIV.
Responsive design can be then applied to it in your CSS file.
This is mutch better as with JAVA the screen would flicker!
If you use a grid system there will be a media query part there you need to include your settings.
I use a little spacer on HD screen while its increasing till mobile screen!
Still if you have breadcrumb in header multiple lines can be tricky, so best to have a java but deferred for speed resons.
Note that animation is for getting rid of flickering of screen.
This java then would only fire if breadcrumb is very long otherwise single CSS applied via the grid and no flickering at all.
Even if java fired its doing its work via an elegant animation
var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;
if (header_height > spacer_height) {
$('#header_spacer').animate({height:header_height});
};
Note that I have applied a 5px tolerance margin!
Ho this helps :-)
I know this is old, but if anyone seems to find their way here. #JacobTheDev answer is great and has no jQuery! I have added a little more for use cases where the event is not being assigned at the same point your toggling the css class.
HTML
<div id='item' onclick='handleToggle()'> </div>
JS
handleToggle(event){
document.getElementById(event.target.id).classList.toggle('active')
}
CSS
#item {
height: 20px;
transition: 1s;
}
.active {
height: 100px;
}

Hide html only when Javascript is available

I guess this is more about SEO than wanting to support browsers with Javascript disabled. I have Javascript/jQuery code that reads in some html and basically displays it much nicer. The html is actually removed (with jQuery's .remove() function) during the process.
So I hide the html so there aren't any visual artifacts as the page loads. But now I want to only hide it if Javascript is enabled. I guess the easiest thing is to have some Javascript in <head> that adds the display: none css rule to the appropriate elements.
Is there a better way for dealing with this situation?
I think using noscript html tag will do the job. The tag displays the content inside if the script is disabled in users browser.
Any JavaScript will only work if JavaScript is enabled so no matter how you do it using JavaScript it will always work only if JavaScript is enabled so you never have to test for that.
That having been said, you can see how it is done in the HTML5 Boilerplate:
<html class="no-js" lang="en">
... the rest of the page
</html>
using a no-js class applied to the <html> tag. The class is later removed using JavaScript and a js class is added, both of which you can use in your CSS and HTML:
<p class="js">This is displayed if JavaScript is enabled</p>
<p class="no-js">This is displayed if JavaScript is disabled</p>
Or in CSS:
.no-js #someWidget { display: none; }
.js #someFallback { display: none; }
If you're using Modernizr then it will already change those classes for you, but even if you don't then all you have to do is something like:
document.documentElement.className =
document.documentElement.className.replace(/\bno-js\b/,'js');
It's a simple and elegant solution and all you have to worry about is CSS classes in your styles and markup.
I'd probably use a single bit of script that sets a class on body you can then reference in your CSS, but basically, you're on the right track.
E.g.:
<body>
<script>document.body.className = "jsenabled";</script>
Then your CSS rule:
body.jsenabled selector_for_your_initially_hidden_content {
display: none;
}
The rule will only kick in if the body has the class.
Complete example:
HTML (and inline script):
<body>
<script>document.body.className = "jsenabled";</script>
<div class='foo'>I'm foo, I'm hidden on load</div>
<div>I'm not foo, I'm not hidden on load</div>
<div class='foo'>Another foo</div>
<div>Another bit not hidden on load.</div>
</body>
CSS:
body.jsenabled div.foo {
display: none;
}
Live copy I've only used the "foo" class for an example. It could just as easily be a structural selector.
Add the class hiddenblock to each div (or block) you want to hide, and add this JS code in the header:
$(document).ready(function() {
$(body).addClass('jsenable');
$('.hiddenblock').hide();
}
You can also use the class jsenable to mask or modify some other block, like this:
.jsenable #myblock { position: absolute; right: 10000px; }

Webkit scrollbar dynamic styling

I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?
There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
Example:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes red and blue:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/
Yes, you can do it.
You need to include dynamically css style rule into stylesheet.
And then to change it.
You can do it by this plugin
If you don't need to use jQuery - you can do it by pure Javascript:
link 1
link 2.
But there is cross-browser problems.
Also see Setting CSS pseudo-class rules from JavaScript
If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.
i created page with four tabs each different color set as well as scroll bar
however this only worked by giving class to body tag
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image
ScreenShot2 BlueScrollBar Image
For this you should replace the scrollbar altogether.
It's just a matter of picking whichever one gives you the easiest API.
You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip
you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.
problem solved.
you can define a function in JavaScript with your own css.
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/

Printing only a textarea

I would like to print only the contents of a textarea element from a website page. In particular, I would like to ensure that nothing gets clipped by the boundary of the textarea as the contents will be quite large.
What is the best strategy for tackling this?
Make a print stylesheet where all of the elements except the textarea are set in CSS to display: none;, and for the textarea, overflow: visible.
Link it to the page with the link tag in the header set to media="print".
You're done.
Make a different CSS with media set to print
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
http://webdesign.about.com/cs/css/a/aa042103a.htm
If the user clicks "Print," you could open a new window with just the contents of the textarea on a blank page and initiate printing from there, then close that window.
Update: I think the CSS solutions being suggested are probably better strategies, but if anybody likes this suggestion, they can still upvote it.
I'd go for a combo of the other suggestions.
Don't kill the print button for the whole page with a stylesheet override, but instead provide a button by the textarea, that lets the user print only those contents.
That button would open a new window, with menus/chrome etc. and clone the textarea content only (and or provide a print css file)
I made a print media CSS to hide a number of the fields. The problem was complicated by the fact that I was using nicEdit which dynamically creates an IFRAME. So I had to add an event that took onblur events and copied them over to a hidden (except for printing) Div. "divtext" is the hiddent Div, and "storyText" is the TextArea.
textarea {
display: none;
}
*/ #divtext {
display: block;
}
div, DIV {
border-style: none !important;
float: none !important;
overflow: visible !important;
display: inline !important;
}
/* disable nearly all styles -- especially the nicedit ones! */
#nav-wrapper, #navigation, img, p.message, .about, label, input, button, #nav-right, #nav-left, .template, #header, .nicEdit-pane, .nicEdit-selected, .nicEdit-panelContain, .nicEdit-panel, .nicEdit-frame {
display: none !important;
}
/*hide Nicedit buttons */
.nicEdit-button-active, .nicEdit-button-hover, .nicEdit-buttonContain, .nicEdit-button, .nicEdit-buttonEnabled, .nicEdit-selectContain, .nicEdit-selectControl, .nicEdit-selectTxt {
display: none !important;
}
The javascript code for nicEdit:
<script type="text/javascript" src="/media/nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function () {
var nic = new nicEditor({
fullPanel: true
}).panelInstance('storyText');
document.getElementById("storyText").nic = nic;
nic.addEvent('blur', function () {
document.getElementById("storyText").value =
nic.instanceById('storyText').getContent();
document.getElementById("divtext").innerHTML = nic.instanceById('storyText').getContent();
});
});
</script>
Did the overflow: visible; on textarea actually work for any of you? FF3 seems to ignore that rule on textarea in print sheets. Not that it's a bug or anything.

Categories