Toggle CSS hidden table rows with javascript - javascript

I have the following defined in an inline css style:
tr.submission { display: none; }
tr.submission.can_submit { display: table-row; }
tr.submission.graded { display: table-row; }
tr.submission.comments { display: table-row; }
A script generates the HTML file with the inline and tags certain rows with the table-row visibility to show them. I would like to include a link on my page so that clicking it would toggle the tr.submission display on and off again at will, much like I can do with browser dev tools.
I'm not a JS guy, so looking for the most straight forward method that isn't going to require me reworking the above formats considerably.

You should consider using a JavaScript and use JQuery for easier call
Import the JQuery with CDN into your code like this below your body tag
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
Copy this code below the JQuery
<script> $('.button').on('click', function () { $("tr.submission").toggle() }); </script>
The .button reference to your link that clicking it would toggle the tr.submission display. It is like CSS so call it with #button if your link has an id="button"

Related

JS add in-line css to html

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.

How to clear css rules inside specific div for external js embedded content. I mean make it behave as there was no previous css rules present?

I want to embed zumi.pl map on my website. Their map is loaded via js to div with specific id and is dependent on external css. However my css for formating div inside div#content interferes with embedded map screwing it all up. I tried to enclose it in another div with contextual css reset but it's still displays wrong. Only way to make it display (almost) properly is to uncheck all my css rules for that div in firefox inspector but I can't figure it out how to achieve the same effect on page.
for clarity this is sample copy&paste code from their generator:
<div id="zumiMap" class="zumi_creator" style="width:300px; height:300px;"></div>
<script src="http://api.zumi.pl/maps/api" type="text/javascript" ></script><script type="text/javascript">(function(){var marker,map=new zumi.maps.Map("zumiMap", {"apiKey": "E48EF8E55A0B3BEAE0434628AE0A1EEA"});map.afterLoad(function() {document.getElementById("zumiMap").className += " zumi_creator";map.addMarker({lat: 52.214679,lng: 21.021101},{letter: "A", type: "main"});map.setCenter({lng: 21.021101,lat: 52.214679}, 7);});})();</script>
and here is my css that's to blame:
#content div {
display: inline;
float: left;
margin: 0px 0.833333%;
padding-left: 10px;
}
How to isolate html fragment so it behaves as there was no previous css rules present?
But without using Iframe.
Did you try this? #content #zumiMap div will have higher specificity than your #content div selector, so you can reset all the problem styles.
#content #zumiMap div {
display: block;
float: none;
margin: 0;
padding-left: 0;
}

How to determine Google Translate was loaded?

I have Google Translate on my page. It looks like a drop-down list, but all other drop-down lists on my page have another style. So I created jQuery function which change Google Translator drop down list styles. This function adds or deletes some style parameters. I'd like to know when I should call this function? In current code I call it after 3 sec. after document.ready
$(document).ready(function () {
setTimeout(wrapGoogleTranslate, 3000);
});
Current situation is that I hide the Div where Google translate is placed and show it after it's styles are corrected by my function. It means that my page loads, then it wait for 3 seconds, and then Google Translate appears with corrected styles.
I'd like to know how I can determine that Google Translate drop-down was loaded and then call my function to change the style. I don't want to make users wait for 3 seconds (maybe in some situations Google Translate would loads more than 3 seconds, then my function would never be executed).
I recently wanted to change "Select Language" to simply "Language", so I also had to run code after Google's code had been executed. Here's how I did it:
HTML
It's important to set Google's div to display:none -- we'll fade it in with JavaScript so that the user doesn't see the text switching from "Select Language" to "Language".
<div id="google_translate_element" style="display:none;"></div>
<script type="text/javascript">function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-35158556-1'}, 'google_translate_element');}</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
JavaScript
function changeLanguageText() {
if ($('.goog-te-menu-value span:first-child').text() == "Select Language") {
$('.goog-te-menu-value span:first-child').html('Language');
$('#google_translate_element').fadeIn('slow');
} else {
setTimeout(changeLanguageText, 50);
}
}
changeLanguageText();
I had a similar situation where i had to change "Select Language" to just display "Language". Here is my CSS solution:
div#google_translate_element{
display: inline-block;
vertical-align: top!important;
}
div#google_translate_element *{
margin: 0px;
padding: 0px;
border: none!important;
display: inline-block;
vertical-align: top!important;
}
div#google_translate_element .goog-te-gadget-icon{
display: none;
}
div#google_translate_element .goog-te-menu-value{
color: #899290;
}
div#google_translate_element .goog-te-menu-value:hover{
color: #a6747e;
}
div#google_translate_element .goog-te-menu-value *{
display: none;
}
div#google_translate_element .goog-te-menu-value span:nth-child(3){
display: inline-block;
vertical-align: top!important;
}
div#google_translate_element .goog-te-menu-value span:nth-child(3)::after{
content: "Language"!important;
}
You can do it with pure JavaScript. It says in the W3 docs for the onLoad attribute that you can add an attribute in a HTML element which takes as a parameter, the JavaScript code to be executed when the element has loaded.
Problem is, the attribute is only supported for a few elements which are:-
<body>
<frame>
<frameset>
<iframe>
<img>
<input type="image">
<link>
<script>
<style>
So, I'd recommend going with an <iframe> or <frame. It should now look something like this:
<frame onLoad="wrapGoogleTranslate();" />
Or else, you can try this with jQuery:
$("div#googleTranslateWrapper").load(function() {
setTimeout(wrapGoogleTranslate, 3000);
});
Here's the documentation for jQuery's load method

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; }

Progressive Enhancement and Initial Display State

I have a specific example, but I'm looking for the answer in general as well. I have page elements that I want to have initially hidden if JavaScript is enabled.
Examples:
A section of a form that toggles
A submit button for a select box 'jump form'
I am trying to avoid the 'content flash' when the elements are hidden after page load.
SOLUTION
I am putting the full solution here for posterity's sake.
JavaScript file called in <head> section: document.documentElement.className = 'js';
Styles that allow for initially hidden or shown elements:
.js .inithide {
display: none;
}
.initshow {
display: none;
}
.js .initshow {
display: block;
}
Check this solution out. It has worked for me in the past:
http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content

Categories