I have 2 divs on my page, one should be displayed if javascript is disabled, and another if the javascript is not disabled.
My problem is : even when javascript is NOT disabled, the div which contain message that javascript is disabled is briefly displayed, and
it hides few seconds after, when page is loaded.
Here is the html (simplified version) that I have:
<html>
<head>
<body>
<!-- This div is displayed only if the JavaScript is DISABLED -->
<div class="wrapper-page" id="no-js">
<p class="text-muted m-b-0 font-13 m-t-20" style="color:red !important;font-weight: bold;">
JavaScript has been disabled message.....
</p>
</div>
<!-- end no-js div -->
<!-- This div is hidden by default, and is displayed only if the JavaScript is ENABLED -->
<div class="wrapper-page" id="wrapper-page" style="display:none;">
<p>My regular content goes here...</p>
</div>
<!-- end wrapper page -->
<script src="<?php echo base_url(); ?>backOffice/assets/js/jquery.min.js"></script>
<!-- If JavaScrpt is disabled, then the main div remain not visible and only the div with the
Disabled JavaScript error message is displayed. -->
<script src="<?php echo base_url(); ?>backOffice/assets/js/disabledjs.js"></script>
</body>
</html>
Here is the content of the JavaScript file:
$(document).ready(function () {
$("#no-js").hide();
$("#no-js").css('visibility','hidden');
$("#no-js").css('display','none');
$("#wrapper-page").css("display", "block");
});
I tried to move the JS and jQuery on the top, I tried to switch the order of the html divs, nothing so far didn't help me.
Use noscript tag for content displayed only if js is disabled
<html>
<head>
<body>
<!-- This div is displayed only if the JavaScript is DISABLED -->
<noscript>
<div class="wrapper-page">
<p class="text-muted m-b-0 font-13 m-t-20" style="color:red !important;font-weight: bold;">
JavaScript has been disabled message.....
</p>
</div>
</noscript>
<!-- end no-js div -->
<!-- This div is hidden by default, and is displayed only if the JavaScript is ENABLED -->
<div class="wrapper-page" id="wrapper-page" style="display:none;">
<p>My regular content goes here...</p>
</div>
<!-- end wrapper page -->
<script src="<?php echo base_url(); ?>backOffice/assets/js/jquery.min.js"></script>
<!-- If JavaScrpt is disabled, then the main div remain not visible and only the div with the
Disabled JavaScript error message is displayed. -->
<script src="<?php echo base_url(); ?>backOffice/assets/js/disabledjs.js"></script>
</body>
</html>
Your code works fine. Look the following code
$("#no-js").hide();
$("#no-js").css('visibility','hidden');
$("#no-js").css('display','none');
$("#wrapper-page").css("display", "block");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- This div is displayed only if the JavaScript is DISABLED -->
<div class="wrapper-page" id="no-js">
<p class="text-muted m-b-0 font-13 m-t-20" style="color:red !important;font-weight: bold;">
JavaScript has been disabled message.....
</p>
</div>
<!-- end no-js div -->
<!-- This div is hidden by default, and is displayed only if the JavaScript is ENABLED -->
<div class="wrapper-page" id="wrapper-page" style="display:none;">
<p>My regular content goes here...</p>
</div>
<!-- end wrapper page -->
Is there any issues displayed in console.
Look if the file path used for javascript files are correct by verifying in source code.
I would use the noscript tag as stated in waldemarle's answer, but here is an alternative:
Using document.write, you can put a container div around my body content with a class of js, then you can style js things from the beginning without it "flashing":
.js .no-js,
.js-show {display:none;}
.js .js-show {display:block;}
<script>
document.write('<div class="js">'); // goes after start body tag
</script>
<div class="no-js">hide if js enabled</div>
<div class="js-show">hide if js disabled</div>
<script>
document.write('</div>'); // goes before end body tag
</script>
try something like this
<div id="content">
Javascript is enabled
</div>
<noscript>
<div>
Javascript is disabled
</div>
</noscirpt>
<script>
$("#content").show();
</script>
noscript tag has been around as long as I can remember.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
Related
Right now I am planning on using this on every page, but it is not loading the nav and I'm not sure why.
<!-- This is in my main HTML that I want nav in-->
<div id="nav-placeholder"></div>
<script>
$(function(){
$("#nav-placeholder").load("NavBar.html");
});
</script>
<!-- this is the NavBar.html file-->
<header>
<div class="header-row">
<div class="header-column d-lg-none">
<div class="header-row">
<h1 class="font-weight-semibold text-7 mb-0">
<a href="index.html" class="
text-decoration-none text-color-light
custom-primary-font
">Dynamic</a>
</h1>
</div>
</div>
</div>
</header>
it's not a terrible practice, depending on what components you are going to use inside this method. E.g., Navbars and footers, no problem.
Have a look on this question: How to separate html text file into multiple files?
I have 3 html files. Index.html invokes chat.html. Chat.html body contains a DIV which I want to populate with Div of a third HTML file (star.html) which resides in the same folder as chat.html.
chat.html -
<body>
<div id="wrap">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header text-center">
Chat - Group Menu
</div>
</nav>
<!-- Begin page content -->
<div class="container" id="chatDiv">
<div class="page-header">
<h1>Mobile Layout</h1>
</div>
<p class="lead">Chat stuff to appear here</p>
</div>
</div>
<div id="testDIV"></div>
<div id="footer">
//some DIV content here
</div>
</body>
star.html -
<body>
<p> hello all </p>
</body>
jquery code I am using (in an external .js file) is -
$(document).ready(function() {
$("#stars").click(function() {
alert("change DIV to show STAR stuff");
$("#testDIV").load('star.html');
});
});
Here, the alert is displayed. But the content is not moving to chat.html Div.
What am I missing here?
Seeing as how you are opening a new window for chat, you need to address that window in order to manipulate that DOM. You may also need to add jQuery to the chat.html page if you haven't already
$('#loginBtn').click(function() {
$(this).validateEmail();
$(this).validatePassword();
var window.popup = window.open("html/chat.html");
});
$("#stars").click(function() {
alert("change DIV to show STAR stuff");
window.popup.document.$("#testDIV").load('star.html');
});
I am trying to show/hide a div element. So it will list a hopspital, and then when it is clicked, it should display the following information using angularjs. If I delete 'ng-repeat="x in data" ng-if="x.collegeID == returnSchool()"' the dropdown effect will work, but obviously no data from my JSON object. If I delete 'class="drop-panel animated fadeIn"' then you don't need to click on the hospital name, all the information will be displayed for you (no dropdown effect). I can't quite figure out what I am doing wrong. I just want to be able to click on the hospital name, and then have the information associated with that hospital to display underneath it.
localHospital.html
<!-- resource start -->
<div class="resource" ng-repeat="x in data" ng-if="x.collegeID == returnSchool()">
<!-- resource header & icon -->
<div class="list-item question"><h1><span><img src="{{x.hospitalLogo}}" alt="Timer Icon"></span>{{x.hospitalName}}</h1></div>
<!-- resource data -->
<div class="drop-panel animated fadeIn">
<!-- phone number -->
<p class="resource-title"><img src="img/icons/phone.png" alt="Icon">Phone Number</p>
<p class="resource-content">{{x.hospitalPhoneNumber}}</p>
<!-- location -->
<p class="resource-title"><img src="img/icons/location.png" alt="Icon">Location</p>
<p class="resource-content">{{x.hospitalAddress}}</p>
<!-- directions -->
<p class="resource-title"><img src="img/icons/link.png" alt="Icon">Directions</p>
<p class="resource-content">{{x.hospitalDirections}}</p>
</div>
</div>
<!-- resource end -->
style.css
.drop-panel {
display: none;
}
.drop-panel.show {
display: block !important;
}
Try changing ng-if to ng-show. ng-if will add the element to the DOM only when the user clicks on it, which means it could be screwing up the style's show/hide behavior.
I ended up solving it by using the ng-show command, but I didn't just switch the ng-if with ng-show. I ended up getting rid of the drop-panel css class in the div, and adding 'ng-click="showDetails = ! showDetails"' and then and 'ng-show="showDetails"', which would toggle on and off as the div was clicked.
It was from this Show hidden div on ng-click within ng-repeat
localHospitals.html
<!-- resource start -->
<div class="resource" ng-repeat="x in data" ng-if="x.collegeID == returnSchool()">
<!-- resource header & icon -->
<div class="list-item question" ng-click="showDetails = ! showDetails"><h1><span><img src="{{x.hospitalLogo}}" alt="Timer Icon"></span>{{x.hospitalName}}</h1></div>
<!-- resource data -->
<div class="animated fadeIn" ng-show="showDetails">
<!-- phone number -->
<p class="resource-title"><img src="img/icons/phone.png" alt="Icon">Phone Number</p>
<p class="resource-content">{{x.hospitalPhoneNumber}}</p>
<!-- location -->
<p class="resource-title"><img src="img/icons/location.png" alt="Icon">Location</p>
<p class="resource-content">{{x.hospitalAddress}}</p>
<!-- directions -->
<p class="resource-title"><img src="img/icons/link.png" alt="Icon">Directions</p>
<p class="resource-content">{{x.hospitalDirections}}</p>
</div>
</div>
<!-- resource end -->
I making page with tabs . And i ahve to make tabs inside tabs which Right now i am making it as button as I am not getting how to make it as tabs. Can anyone suggest me how to make it pls.
Below is my piece of code;
<div id="container">
<!-- Start Tabs !-->
<div class="tab-container">
<div id="c1">
Projects <!-- This is your actual tab and the content is below it !-->
<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
<button id="create">Create</button>
<button id="edit">Edit</button>
</div>
</div>
just make it with the help of css in short give it backgroud-color or backgroud-image, gradient on button and more and more you can also place div also at the place of button. As you want that's it .... its tutorials also present easily
I'm using picturefill to do responsive images. The issue that I am having is that I am calling picturefill(); method on the success callback of an ajax call. When the dynamically loads, picturefill is called.
This works fine but the issue is that the picturefill'd picture covers up all of the elements that are overlayed on top of it for about 1 second. this causes an uncomfortable effect because the overlayed elements shows up abruptly. so the sequence is that we see the elements, elements dissapear, and then elements reappear from under the picturefill'd picture.
has anyone else run into this problem and does anyone have any suggestions on how I can deal with it? I already tried changing the z-index of the picture fill'd pictures to z-index:1 and everything else to z-index: 200 but still no luck.
Adding some code:
<!-- Begin centerimage Container -->
<!-- Begin rightcaption -->
<div class="rightcaption">
OVERLAID CAPTION
</div>
<!-- End rightcaption -->
<!-- Begin flip-container -->
<div class= "flip-container">
<div class= "flipper">
<div class= "front">
<div class="main-pic-wrap" id="bloop">
<div data-picture data-alt="name" data-class="relative_image">
<div data-src=source> </div>
<div data-src=img2%> data-media="(min-width: 480px)"></div>
<div data-src=img3%> data-media="(min-width: 767px)"></div>
<!--[if (lt IE 9) & (!IEMobile)]>
<div data-src="medium.jpg"></div>
<![endif]-->
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src=img3 alt="Image of Activity">
</noscript>
</div>
</div>
</div>
<div class = "back">
<div id="map"></div>
</div>
</div>
<!-- End flipper -->
</div>
<!-- End flip-container container -->
<div id="moreShowHideGroup">
<div id="mapShowHide" class="icon-globe"></div>
</div>
Alright - finally figured it out. So I believe what is happening is that the container which is holding my picture fill'd picture and my position:absolute floating element is losing it's width property on execution of picturefill since I think picturefill.js removes the picturefill div from the DOM and then replaces it.
While it's removed, the container element which I have set to width:100% has nothing inside to give it an actual width so it collapses for a split-second and my fixed position elements dissapear for a split second.
To prevent this, I put another position:absolute div with 100% width into the container and then dropped my other position:absolute divs into this new container. So the structure looks like this:
<div class="main" style="position:relative">
<div data-picture data-alt="name">div data-src=source> </div></div>
<div class="always-here" style="position:absolute" top:0; left:0;>
<div class="fixed" style="position:absolute; top:2%; left:2%; ">
</div>
</div>
</div>