I'm integrating a preloader on my website responding to window.onload = function();
As long as the preloader is not ready I put a class .none on my main #container. If
the preloader is ready I remove that class. Problem is that I have to put the .none
class by default in my HTML on my element, so when the user does not want to support
JavaScript he/she sees nothing. Is there a workaround for this problem?
Thanks.
You can use the <noscript> tag to target JavaScript disabled browsers. Anything that's inside the <noscript> tag will only render if JavaScript is not available.
The best way would be to have a .nojs class on the <body> element by default. First thing you do with JS ( even before the whole document loads, just add a <script> tag under <body> and let it run ) is remove that class.
You can then use the CSS selector .nojs .something to target things when JS is not available.
You can show a message when user's Javascript is disabled like this:
<noscript><h1>Please enable javascript</h1></noscript>
Related
I'm try to add a class to an existing div which has the id "container" (with jQuery). But the added class doesn't appear if I check it in firebug. I have to say that this div is generated by plugin and not by code. And the plugin file is compressed so I can't do any changes.
I tried to add the class to another div. That worked fine. I add it in this way:
$('#container').addClass('hdrMenu');
Note: The .addClass function is inside $(document).ready() so this cannot be the problem.
My HTML structure looks like this:
html > body > section.wrapper.transparent > div.page-box > div#container
div#container and all sub elements were generated by plugin.
Am I doing anything wrong or why can't I add a class to a plugin generated HTML code?
Suggestion appreciated :)
This could happen if your code ran before the elements of that plugin were constructed. These elements are not covered by $(document).ready(). Also, jQuery would never throw an error if this was the case, and you'll have no idea what happened.
Place your code to run after these elements are constructed.
That might be because this code that you're having is executed when there is no div with the id container. So the class name is not applied and then the content is loaded into the DOM. Here might be the example of such
<script>
/* jquery code */
$('#container').addClass('hdrMenu');
</script>
And then after all this code, you're executing the code to create the elements as
$('#container').load('data.html');
So, always remember: Place the jQuery script file at the top of the script files
<head>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
/* other script files */
</head>
Is there any easy way to take in a block of CSS from the user from an textarea and add this styling to the styling for a specific div?
See I'm creating a simple code preview tool like codePen, so far I have two textarea inputs, one for Html and one for CSS, as the user types in the Html input this updates the preview pane, this works, now I want to do it for CSS.
CSS textarea could contain a few blocks like:
h1 {
font-size:23px;
}
.myClass {
//Somestyle
}
Now I want this CSS to be contained in the
<div id="preview"></div>
So it doesnt effect the rest of the page, so a manual example would be
$('preview h1').css('font-size','23px');
Anyway to automate this?
Do it like this. Hope it works.
Add a style block for dynamic styling.
<style id="dynamicCss">
</style>
on the apply button click handler, set the style
$('#btnApplyStyle').click(function(){
$('#dynamicCss').html('').html($('#txtaCustomCss').val());
});
See the Fiddle here.
Please use developer tools to see the new style tag added to head section.
This script simply adds rule to the document. If you don't want that behavior, you can use this plugin in combination with my logic to set scope for rule. You will need to place the style tag inside of the container and add a scoped attribute to style for it to work. Please see the documentation.
If you want to use the iframe approach instead, you'll first need an HTML document to host inside of the iframe. The iframe document should be loaded for the same origin (protocol + domain) as the host document (cross-document cross-domain stuff is tricky otherwise). With your application, this is probably not an issue.
Host page:
<iframe id="preview" src="preview.html"></iframe>
To make things easier on yourself, this iframe document could load a script with convenience functions for injecting the HTML and CSS from the host.
preview.html:
<html>
<head>
<script src="preview.js"></script>
<style type="text/css" id="page-css"></style>
</head>
<body></body>
</html>
preview.js:
function setHTML(html) {
document.querySelector('body').innerHTML = html;
}
function setCSS(css) {
var stylesheet = document.querySelector('#page-css');
// Empty the stylesheet
while (stylesheet.firstChild) {
stylesheet.removeChild(stylesheet.firstChild);
}
// Inject new CSS
stylesheet.appendChild(document.createTextNode(css));
}
Now, from the host page, you can call these functions whenever your text inputs change:
document.querySelector('#preview').contentWindow.setCSS(someCSS);
This plugin may come in handy: https://github.com/websanova/wJSNova/downloads .
Edited
Insert the text of the rules in one of the existing cssStyleSheets you have.
It will be something like
window.document.styleSheets[0].insertRule("a{color:red;}",window.document.styleSheets[0].cssRules.length)
The first parameter is the rule to insert and the second is the index.
Fiddle
The only problem here is that this will affect all the DOM on the page maybe looking for a way to add the #preview before each css rule to get something like
#preview h1{}
I have to create a pop up that will be show when the user click on a link.
I think that I can not use Javascript because I have no access to the full template so I can't put the javascript into the <head></head> section of the page (I can't modify it)
Can I create a pure HTML pop up withous use Javascript or alternatively can I declare my Javascript into the <body></body> of my html code and not into the <head></head> section?
Tnx
Andrea
Yes, you can do this in pure html and css. The trick is to use the :target pseudo selector. Rules with :target will match when the url anchor matches a particular id. You can update the url anchor by creating a plain anchor link. This does have a slight jumping effect because we're using anchors, but it is possible.
So for example: http://jsfiddle.net/X49zJ/1/
Click to Trigger The Modal
<div id="modal"> I am a Hidden Modal</div>
And CSS:
#modal {
display: none;
width: 300px;
height: 100px;
border:1px solid #CCC;
background:#EEE;
}
#modal:target {
display: block;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/:target for more information on the :target and also this demo for a much prettier lightbox.
For more flexibility you can always add javascript. If your javascript is non-essential, it's generally best practice to put javascript at the bottom of the body, or add the script tag with the async attribute so it doesn't pause rendering of content when it loads.
You can do this with HTML and CSS, like so.
To answer your second question, generally it's possible to put Javascript in the <body> section of your page as well.
You cannot do this without javascript, however you can put script tags literally anywhere in your page and it should work, so try this.
<div>
<h1 id="test">New Content</h1>
<script>
var test = document.getElementById('test');
test.addEventListener('click', function() {
alert('clicked');
});
</script>
</div>
It's permittable to use target="_blank" in the <a> tag if you're using HTML5, which will generally make the link open in a new tab in modern browsers. This is preferred by quite a lot of users so you may want to consider this.
Putting JavaScript into the body of the page should be perfectly fine if you have complete control over the HTML. It is put within simple <script> tags, after all — there's no need for it to be in the <head>.
If whatever CMS you're using filters out <script> tags but you still have control over HTML attributes, you might be able to get away with putting JavaScript in an onclick attribute:
Link
Here you can find a walk-through http://dsheiko.com/weblog/fancy-modal-windows-without-javascript/
It opens pop-up and blurs the modal underlay. Here how it looks codepen.io/dsheiko/pen/jCcld
It also describes how you can enhance it with such goodies as closing on Esc press and by clicking outside modal content and provides JavaScript fallback for IE8.
Does anyone know if you can remove head elements on a button click and how to do it with jQuery?
I am trying to get rid of certain script tags from the html head when a button is clicked.
For instance. I have 1 screen view with a slideshow controlled by an external javascript file. When I click on a button "Click to get rid of this elements JS" I want to remove the external javascript path from the HTML Head.
Any ideas. Have been at this thing for a week or so.
You can add an id to a script element then remove that ID:
<script type="text/javascript" src="init.js" id="initJs" ></script>
<span id="removeScript"></span>
$('#removeScript').click(function() {
$('#initJs').remove();
});
You can do this sort of thing using javascript, sure, but before you do it, you might want to ask yourself again why. Here's a link describing how to do it in pure javascript with a jquery example provided by the other answerer:
http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml
But try to keep in mind that most modern browsers will keep these external resources in memory for at least as long as the page is open. Therefore, you won't really be doing much.
I don't think its a good Idea to remove Entire HEAD Element. 'Cause your Page may contain some more Elements (i.e., title, style..) which are appended to Head Element. If you want to remove a particular script Element do something like
$(function() {
$('input[type=button]').click(function() {
$('script[src=path/file.js]').remove();
});
});
Edit :
var flag = false;
function breakTheCode() {
if(!flag) {
//run your code
}else return;
}
$(function() {
$('input[type=button]').click(function() {
flag = true; //flag is set, so we no more using/ running your code
breakTheCode(); //call you function/method
});
});
For my part the best solution is to use ID on the scripts.
I read many page over the web, try many solutions, and the only one who works fine every time is to remove a script like a div with an id !
For remove js file : $("script[src='your.js']").remove();
I have the following html on a page:
<h1 class="theme-color-3">Knowledge Portal Site</h1>
This is rendered dynamically.I dont want the word Site after 'Knowledge Portal'.I dont know where the word Site is hardcoded,so i wrote the following jquery code to remove that word.
$(document).ready(function() {
$('h1.theme-color-3').html($('h1.theme-color-3').html().replace('Site',''));
});
But the problem is that because this code executes only after the whole page has finished loading,the word Site shows for some time and then disappears.
Is there a way to prevent that ?
Thank You
Place a <script> element right after the <h1> element, like so:
<h1 class="theme-color-3">Knowledge Portal Site</h1>
<script type="text/javascript">
$('h1.theme-color-3').text($('h1.theme-color-3').text().replace('Site',''));
</script>
This will ensure the script is processed immediately after the element is parsed, so make sure the jQuery script is in the <head> or at least further up the document. Also, use text() instead of html() if you're not applying HTML. It's more efficient.
You can use CSS to set the element to display:none, but that would leave those with javascript turned off without the element at all.
Basically there is no good solution.