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.
Related
So my website is built using a company's software called Inksoft which leaves me very little to work in the way of customization. So I have to do many workarounds.
Here is my site's homepage.
The header on top of the page only has two links right now. "Products" and "Design Studio". My goal is to add an "About Us" link and "Buyers Guide" to the header as well.
I cannot add new content to the header using Inksoft's backend. So I coded a workaround to replace the content of existing DIV's within the header to say and link to where I want them to go.
The only issue is, the responsive mobile-nav loses functionality when this is implemented. As seen here on this test page.
The test page has the About Us in the top header, added by the use of this code:
<script>
$("#header-nav-designs").html('<document.write="<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
So, the simplified question is: how do I implement this code without losing the responsive functionality of the nav bar?
The jQuery .html function will replace the HTML inside the target element. If you want to just append the one value, you likely want to .append to the element.
In addition, you aren't setting the HTML to a valid html string. You probably just want to get rid of the <document.write=" at the beginning of the string. The rest of it looks fine with just a cursory glance.
So:
<script>
$("#header-nav-designs").append('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
Edit:
After looking at it a little more, it appears as though the $('#header-nav-designs') that you are selecting is already an <li> which means you need to either select the parent <ul> list or you can use the jquery .after function instead.
<script>
$("#header-nav-designs").after('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
And as someone else commented above, you are getting an error on the page. It appears as though you are trying to get an element with the id divID and the appending some html to it, but there is no element with the id divID and so you are getting an error saying that you can't read the property innerHTML of null as the call to document.getElementById is returning null (element not found).
Element id header-nav-designs witch your code is referring have CSS style on line 170:
#header-nav-designs {display:none;}
The element will be hidden, and the page will be displayed as if the element is not there. With display:none;
If I understand you correctly your code selector points to wrong element id. It should point $(".header-nav > ul"). Document.write is not needed inside jQuery you need to give only an valid html string as argument.
jQuery html function erase html that is all ready inside element and replace it with html string given as argument. You have to use append if you want to add more html but not remove what is allready in element.
$(".header-nav > ul").append('<li><font color="#000000">About Us</font></li>');
$(".header-nav > ul").append('<li><font color="#000000">Buyers Guide</font></li>');
Current variant looks like that (I tried solution offered here: Can't append <script> element):
var s=document.createElement("script");
s.type="text/javascript";
s.src="js/properties.js";
$("head").append(s);
Previous variant was:
$("head").append($('<script type="text/javascript" src="js/properties.js"></script>'));
And both of them don't work. "properties.js" is also in "js" folder, but if I remove this part of path, it doesn't change anything.
I also tried to use ' instead " and check addBlock: I had it installed, but it's disabled on this page.
Changing "append" function to "appendChild" also didn't help.
"properties.js" contains just one line:
var PREFIX_URL = "http://localhost:8080/app-rest-1.0.0-SNAPSHOT";
And firstly I declare it in "main.js" to which I, in fact, try to connect this file.
Explain, please, what I'm doing wrong.
Add all your <script> tags right before the closing </body> tag, because when the browser encounters a <script> tag it begins downloading it and stops rendering of the page. So by placing them at the bottom of the page you make sure your page is fully loaded before trying to interact with the DOM elements. Also $("head") returns an array of all the <head> tags. You should also enclose your calls in a $(document).ready() function.
<!-- Your html tags here -->
<script type="text/javascript">
$(document).ready(function(){
var s=document.createElement("script");
s.type="text/javascript";
s.src="js/properties.js";
$("head")[0].append(s);
});
</script>
</body>
I made JSBin example. You can see in console that last script tag is the one you need. So the your code is correct.
If your IDE don't highlight 'var' - it may be error not in javascript. You can place it in a wrong place for example.
Can you provide link to a gist (or pastie.org or smth) for us to better understand your problem.
P.S. The code $("head")[0].append gives me undefined ( note to previous answer)
<!DOCTYPE html>
<html>
<head>
<script src="dev-jquery-1.11.1.min.js">
</script>
<script src="js/jquery.slidepanel.js">
</script>
<link rel="stylesheet" type="text/css" href="css/jquery.slidepanel.css"></link>
<script type="text/javascript">
$(document).ready(function(){
$('[data-slidepanel]').slidepanel({
orientation: 'right',
mode: 'overlay'
});
});
</script>
<script>
function init()
{
document.getElementById("link23").innerHTML+='<br/>Show Panel2';
}
</script>
</head>
<body onload="init();">
<div>
<div>
Hello how are you
</div>
<div>
Show Panel
</div>
<div id='link23'>
<h3>Problematic DIV</h3>
Hello... all... The link/anchor tag here in this div is created by Javascript's init() function.
</div>
</div>
</body>
</html>
My project is in core php. My project's need is such that, based on javascript function I want to create a list of clickable DIVs (displaying information about parameters) on the right side of a web-page. I want these clickable DIV (when clicked), open/hide jQuery slide/popup window which shall display more information of the link clicked. So I searched on Internet and found "jQuery Slide Panel 2.0" from GITHUB and I felt it suitable. Now, to create links dynamically on right side of my page I use getElementById() function and append the HTML to it by innerHTML() function. I have shown here the test code only. In this code, the first link(a tag) is created statically whereas the next LINK(a tag) is created by js's init() function. The problem is that the First link (created statically) is able to load it's href="myfile.html" in jQuery slide panel but the Second link (created by JavaScript) can not load it's href="myfile2.html" in jQuery slide panel. Instead the second link navigates to "myfile2.html" which I don't want. Please help me solve this issue. I might have made a silly mistake or it might be a problem of JS. I have been stucked in this problem for last 10 days.
Thanking you in advance.
Update
In the case above it could be sufficient to call slidepanel after you have added all elements you want attach.
Old answer, valid for a more general case where elements that need the plugin are created later
The plugin has very poor documentation, however looking at the source code we can find that the plugin doesn't automatically attach elements looking at their attributes (and this behaviour is fine).
You have to explicitly attach the plugin to each element that requires it.
Also be careful since the plugin doesn't check if it is already attached to an element.
You have many alternatives, the quickest is to add the following code just after you push the new link:
$('[data-slidepanel="panel2"]').slidepanel({
orientation: 'right',
mode: 'overlay'
});
However I recomend to create the new link through jQuery instead of directly pushing the html code, this way you avoid the need of unique selectors to find the element, you could do it this way:
var newLink = $('<a href="slide.html" ...>...</a>'); //Don't put <br/> in newLink!
newLink.slidepanel(...);
$('#link23').append($('<br/>')); //<br/> goes here
$('#link23').append(newLink);
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>
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();