Change CSS class on an element using JavaScript without FOUC - javascript

I found a HTML5 way of changing a class of an element using JavaScript.
HTML:
<div id="bootstrap-container" class="container-fluid fill-height">
<!-- Content -->
</div>
JavaScript:
var mql = window.matchMedia('(min-width: 1200px)');
if (mql.matches) {
var containerElement = document.querySelector('#bootstrap-container');
if (containerElement.classList.contains('container-fluid')) {
containerElement.classList.remove('container-fluid');
containerElement.classList.add('container');
}
}
This works fine except there is a noticeable FOUC when loading/refreshing the page.
How can I make the FOUC go away?

When the browser parses your HTML-File, he will execute your JavaScript (either inline or by reference <script src="script.js">) exactly where he found it. Therefore you have 2 possibilities to avoid the mentioned FOUC.
You execute the JavaScript earlier (e.g. as inline javascript right below the element you manipulate the class). It might be a good idea to set only 1 "media query class" (e.g. on the body-tag) and place your corresponding script right below
You hide the content until your JavaScript has been executed. E.g. you could do something like this
HTML
<body class="loading">
...
</body>
CSS
body.loading {
visibility: hidden;
}
JS
var mql = window.matchMedia('(min-width: 1200px)');
if (mql.matches) {
var containerElement = document.querySelector('#bootstrap-container');
if (containerElement.classList.contains('container-fluid')) {
containerElement.classList.remove('container-fluid');
containerElement.classList.add('container');
}
}
document.body.classList.remove("loading")

I solved it by creating a partial view and using bootstraps responsive utility classes hidden-xs, hidden-sm and so on.

Related

Hide or show element when body has a class using Fullpage.js

I've searched a lot to try and solve my problem. I'm building a website locally using the Fullpage.js library. Fullpage.js gives the body a class which refers to the section that is in the viewport. On the second last section I have hidden the dotted slider navigation with the css code below. I've made a simplified html structure.
<body>
<div class="section-1">
.. some content
</div>
<div class="section-2">
.. some content
</div>
<div class="section-3">
.. some content
</div>
<div class="section-4">
.. some content
</div>
<div class="section-5">
.. slider with the navigation turned off when this section is in viewport, see used css.
</div>
<div class="sectie-footer">
.. footer, navigation above reappears because this section is in viewport and css doesn't apply anymore; Body has now class fp-viewing-section-footer.
</div>
</body>
The CSS:
CSS that applies to sectie-5 but not when footer is in viewport.
body.fp-viewing-section-5-0 .fp-slidesNav.fp-bottom {
display:none;
}
Everything works fine but when trying to write a small piece of jQuery code, that hides this navigation element on sectie-5, when the sectie-footer is in viewport, and the body has the class which refers to the footer. I can't get it to work. It shows no errors but the code doesn't do what I thought it would.
I've tried checking if the body .hassClass and if so adding a class with .addClass. I tried .hide and .show, also no effect. I wrote:
jQuery(document).ready(function() {
function hideonfooter() {
jQuery('.fp-slidesNav.fp-bottom').hide();
};
if (jQuery('body').hasClass('.fp-viewing-section-footer')) {
hideonfooter();
}});
And some code I found in an earlier question on Stackoverflow (class jsnoshow has display:none):
jQuery("fp-slidesNav").toggleClass(function() {
if ( jQuery("body").hasClass( "fp-viewing-section-footer" ) ) {
return "jsnoshow";
} else {
return "";
}
});
I also tried:
jQuery(document).ready(function() {
if (jQuery('body').hasClass('.fp-viewing-section-footer')) {
.hide('.fp-slidesNav .fp-bottom');
}});
I hope you guys want to help me out.
Please check how to use of fullPage.js state classes or callbacks for that.
Also, do not forget to check the callbacks examples in the examples folder.
You might also want to check this video tutorial I did making use of the state classes to create animations.
For example:
new fullpage('#fullpage', {
afterLoad: function(origin, destination, direction){
if(destination.index == 4){
alert("Section 4 ended loading");
}
}
});
Instead of the alert, you can run your code there on the section that you want by using its index in the callback.

HTML/CSS/JavaScript how to add hyperlink to content?

I am currently making a squarespace website for an art gallery and I have a page that displays the current exhibitions. I added a code injection to change the message that is displayed when there is no exhibition currently on display:
<style>
.eventlist-empty:before {
content: "We are currently between exhibitions, please see the future page to see what's coming up soon.";
}
</style>
However I would like to add a hyperlink around "future page" that links to /future. Could someone tell me how best to do this please?
Thanks!
You can't use the CSS property content in this way.
Your best solution is to use CSS to show/hide a link if necessary;
<style>
.eventlist .empty-link {
display: none;
}
.eventlist-empty .empty-link {
display: block;
}
</style>
<div class="eventlist eventlist-empty">
We are currently between exhibitions, please see the future page to see what's coming up soon.
</div>
I not sure that's possible. You can use JavaScript so when you click in the p class=eventlist-empty redirect you to the feature page.
var el = document.getElementsByClassName('eventlist-empty')[0];
el.addEventListener("click", function(e) {
window.location.replace("stackoverflow.com");
}, false);
I believe previous answers are missing one or more of the following considerations:
As you said, you do not have access to the underlying HTML (such is Squarespace when not using developer mode).
You must hide the existing text (which is added via Squarespace's default CSS for that template) either by setting content: "" or display:none or both.
You must remove the code you've added via code injection.
You must use footer code injection, not header.
Therefore, use the following code (via footer code injection) in place of what you had:
<style>
.eventlist-empty:before {
content: "";
display: none;
}
</style>
<script>
(function() {
var emptyList = document.getElementsByClassName("eventlist-empty")[0];
if (emptyList) {
emptyList.innerHTML = "We are currently between exhibitions, please see the <a href='/future/'>future page</a> to see what's coming up soon.";
}
})();
</script>
Add this to your Site Footer Injection
<script>
var emptyList = document.querySelector('.eventlist-empty');
if (emptyList) {
var anchorEl = document.createElement('a');
anchorEl.href = "/future";
emptyList.parentNode.insertBefore(anchorEl, emptyList);
anchorEl.appendChild(emptyList);
}
</script>
It'll simply wrap an anchor tag around this element for you

Trying to remove ads in Gmail with Chrome Extension

I'm experimenting with a Chrome extension that will remove the ads displayed in the right-hand pane in Gmail and instead put the information I want there. (I haven't decided exactly what to put there yet; vacillating between several ideas, including external content and/or attachments.)
The ads are (usually) contained in a <div class="oM"></div> element. But I can't seem to select that either in my extension or in the console.
I've tested my manifest.json settings by writing an extension that added a superfluous div to the top of the page, and that worked fine -- I just created a new element and
document.body.parentElement.insertBefore(new_el, document.body);
However, what I'm trying to do now is just rip out the ads and put in some dummy text, or just put the text above the ads. This is the main function called in my content_script.js file.
function modifyPage(txt) {
var container = document.getElementsByClassName('oM')[0];
container.innerHTML = txt;
}
function modifyPage(txt) {
var insert = document.createElement('div');
insert.innerText = txt;
var container = document.getElementsByClassName('oM')[0];
document.body.parentElement.insertBefore(insert, container);
}
I've even tried to jQuery:
function modifyPage(txt) {
$('.oM').html(txt);
}
Also, trying to retrieve the <div class="oM"> using the Chrome console returns nothing -- even though I can see it right there in the source.
Set a delay on the execution of your jquery selector. The Google Tubes are a bit more complicated than using static div classes on page load.
Rather than remove the ads with JS, just hide them with CSS:
.oM {
display: none;
}
I'm using AdBlock + Chrome add-in(or extension).
It works very well it's a donation-ware, I'm guessing the author use jquery {display:none } to hide or remove the ads with a custom filter lists.

How to show / hide multiple elements at the same time with javascript

So, I have this between my head tags
<script type="text/javascript">
hidden_links = document.getElementsByName("javascript_needed");
for (i = 0; i < hidden_links.length; i++) {
hidden_links[i].style.display = "visible";
}
</script>
And my divs are all similar to
<div name="javascript_needed" style="display: none;">stuff</div>
the overall goal here, is to have these divs hide when javascript is disabled, and re-enable them when javascript is enabled.... but for whatever reason, my code doesn't work. I ever tried it in the webkit console, and nothing errored =\
The JavaScript is executed before the divs are in the DOM. The standard way to do something after the DOM is ready is to use jQuery's $(document).ready(function () { });, but there are other ways as well.
The oldschool way is to use <body onload="myfunction()">.
Here's a newer way (edit: put display:none into CSS):
HTML:
<p class='javascript_needed'>hello</p>​
CSS:
.javascript_needed {display:none;}
JavaScript:
​$(document).ready(function () {
$('.javascript_needed').show();
});
​
Your JS should be setting the div's display to "block" ("visible" isn't a valid value for display).
Also, from the looks of things your elements aren't in the DOM at the time the code is fired (your code doesn't see them yet). Do any of the following:
Place your code anywhere in the document body below the divs
or, use an unobtrusive strategy to fire your function on window load, a la:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
or, Use a JS framework's "ready" functionality, a la jQuery's:
$(function () {
nameOfSomeFunctionToRunOnPageLoad();
});
"visible" is not a valid value for "display". You're after "inline" or "block".
"visible" and "hidden" are valid values for the "visibility" CSS property.
Difference between display and visible:
An element that is visible still takes up space on the page. The adjacent content is not rearranged when the element is toggled between visible and hidden.
An element that is display=none will not take up any space on the page. Other display values will cause the element to take up space. For example, display=block not only displays the element, but adds line breaks before and after it.
The disadvantage of showing elements on ready is that they will only flicker in after the page has finished loading. This usually looks odd.
Here's what I usually do. In a script in the <head> of the document (which runs before the body begins to render), do this:
document.documentElement.className = "JS";
Then, any CSS selectors that descend from .JS will only match if JavaScript is enabled. Let's say you give your links a class of javascriptNeeded (a class is more appropriate than a name here). Add this to your CSS:
.javascriptNeeded{
display: none;
}
.JS .javascriptNeeded{
display: inline;
}
…and the elements will be there from the start, but only if JavaScript is enabled.

hide and unhide a div

I am designing a web page in which I got struck at some point.
I am using 3 upload buttons in a div, let the id of the div be "uploadDiv"
I have a right arrow and down arrow images
if I click on the down arrow image, the content of the "uploadDiv" should be displayed
if I click on the right arrow image, the content of the "uploadDiv" should be hidden
The images should be in the same place.
What is the solution?
It sounds like you are talking about a collapsible panel of some form. Depending on what the underlying architecture is of your source code is, Microsoft's Ajax Control Toolkit has a pretty good collapsible panel option.
Another great option out there is to look at jQuery and the jQuery UI components.
http://jqueryui.com/demos/accordion/
http://jqueryui.com/demos/accordion/#collapsible
SAMPLE
<script type="text/javascript">
$(function() {
$("#accordion").accordion({
collapsible: true
});
});
</script>
<div id="accordion">
<h3>File Upload</h3>
<div>
CONTENT HERE
</div>
</div>
The question is vague, but whatever your actual goal you'll achieve the effect by toggling a class on your target divs and letting your CSS implement the effect. This is far superior to changing style directly with JS because it separates the concern of styling to the styling layer, and with an umbrella class this let's you cheaply modify the effect with additional properties at a single point.
Now the CSS that you actually want could be visibility: hidden (if you want the layout flow to be preserved) or display: none (if you want the layout to collapse) or even something exotic like changing the opacity or colours if you want to achieve a greying out effect.
Finally enabling this in JS can be done easily by appending or replacing the content of element.className property but realistically a much improved effect can be had by leveraging a library like jquery or mootools which will offer you most of this work already wrapped into widgets and such niceties as animated fading etc..
Don't fall into the maintenance trap of creating the effect with JS and don't fall into the trap of reinventing the wheel where amazing silver rimmed varieties exist already for free.
<script language=javascript type='text/javascript'>
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('uploadDiv').style.visibility = 'hidden';
}
else {
if (document.uploadDiv) { // Netscape 4
document.hideshow.visibility = 'hidden';
}
else { // IE 4
document.all.uploadDiv.style.visibility = 'hidden';
}
}
}
function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('uploadDiv').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.uploadDiv.visibility = 'visible';
}
else { // IE 4
document.all.uploadDiv.style.visibility = 'visible';
}
}
}
</script>
Above script toggles the style.visibility property of the div. which can be "visible" or "hidden"
<img src="right.png" onclick="hidediv()" />
<img src="down.png" onclick="showdiv()" />
Use the onclick events to call the needed hide or show div
Taken from http://www.webmasterworld.com/forum91/441.htm
By using JQuery you can made it in a easy way.
you can Download Here jquery.js file.
js:
<script src="js/jquery.js"></script>
<script>
$j(document).ready(function(){
$("#hide").click(function(){
$("#uploadDiv").hide(); //hide the div
});
$("#show").click(function(){
$("#uploadDiv").show(); //show the div
});
$("#toggle").click(function(){
$("#uploadDiv").toggle(); //toggle the div
});
});
</script>
html:
<div id="uploadDiv">Some text here !</div>
<div id="hide">Hide</div>
<div id="show">Show</div>
<div id="toggle">toggle</div>
click on particular div to perform desired operation.
Add a class to your css file,
.hidden { display: hidden; }
Add a onclick event to your buttons
The button to hide
... onclick="document.getElementById('UploadDiv').className = '.hidden'" ....
The button to show
... onclick="document.getElementById('UploadDiv').className = '.default'" ....
to hide and show your div using jquery you could do something like:
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#downArr").click(function () {
$("#uploadDiv").toggle();
$("#downArr").toggle();
$("#upArr").toggle();
});
$("#upArr").click(function () {
$("#uploadDiv").toggle();
$("#downArr").toggle();
$("#upArr").toggle();
});
});
</script>
</head>
<body>
<img id="downArr" src="downArr.jpg">
<img id="upArr" src="upArr.jpg" style="display:none;">
<br>
<div id="uploadDiv" style="display:none;">
content
</div>
</body>
Clicking the image downArr.jpg will make upArr.jpg and the content of uploadDiv visible
Check out more examples of the toggle function at http://docs.jquery.com/Effects/toggle
-Fortes
One of the easiest method to do would be using jquery.

Categories