I have an html which calls a Javascript. I cannot edit the source script, so would like to edit the CSS styling of some elements in the HTML header.
<head>
<script src="someJavascript.js"></script>
</head>
So basically I would need to translate the following Javascript line into html and add it to the script tags somehow.
document.querySelector('[title="MyTitle"]').style.display = "none"
Could somebody tell me if that is even possible? And if so, how? Thanks!
Edit:
I tried to implement the instructions, but it does not do what I want.
What am I doing wrong?
Maybe I should elaborate more. The html gets embeded as an iframe into another site. It loads a 3D model viewer and in the body the corresponding 3D file. I want to hide one of the buttons in the 3D viewer's interface.
<!DOCTYPE html>
<meta name="viewport" content="user-scalable=0"/>
<html>
<head>
<title></title>
<script src="https://viewer.marmoset.co/main/marmoset.js">
<style>
[title="Layer Views"] {
display: none;
}
</style>
</script>
</head>
<body>
<script>
marmoset.embed( 'My3DModel.mview', { width: 800, height: 600, autoStart: false, fullFrame: true, pagePreset: false } );
</script>
</body>
</html>
You can use CSS selectors.
<style>
[title="MyTitle"] {
display: none;
}
</style>
<div title="MyTitle">MyTitle</div>
<div title="SomethingElse">SomethingElse</div>
Related
I want to remove/edit several HTML tag in a file.
Minimal example: I have this input HTML file on my disk
<!DOCTYPE html>
<html clang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
.remove-tag { color: #FF0000; }
.remove-div { color: #0000FF; }
</style>
</head>
<body>
<p>Hello world!</p>
<div class="remove-tag">
<p>I just want to remove the open/close div tags</p>
</div>
<div class="remove-div">
<p>I want the remove the div and all its content</p>
</div>
</body>
</html>
I want to process it so that I get this
<!DOCTYPE html>
<html clang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
.remove-tag { color: #FF0000; }
.remove-div { color: #0000FF; }
</style>
</head>
<body>
<p>Hello world!</p>
<p>I just want to remove the open/close div tags</p>
</body>
</html>
What's the easiest/most straightforward way to do it in your opinion? I hope to be able to write some sort of script to locally run on a given file to get the output. Or have some software that does it given a list of rules to follow.
I'm quite confident with regex/sed/..., but using these tools is a big NO NO for playing with HTML tags (and can understand why).
I've read about javascript (getElementsByClassName(), ...). Made some preliminary steps with javascript, installing Node.js. I can't even open a document to retrieve the elements... Looks like I have to install/import jsdom. I'm kinda stuck...
Read about jQuery. Seen several commands examples, but I don't get how to run them on local files. In generl, I'm a completely noob about jQuery.
Read about HTML parsers. Python seems to have a HTML parser library that I can use to accomplish the task.
Also hoped for a HTML parser software; doesn't look like there is any.
Any other hints?
try this script:
<script>
var removeTag= document.getElementsByClassName('remove-tag');
for(var i=0; i<removeTag.length;i++){
var innerHTML = removeTag[i].innerHTML;
let div = document.createElement('div');
div.innerHTML = innerHTML;
insertAfter(div,removeTag[i]);
removeTag[i].remove();
}
var removeDiv= document.getElementsByClassName('remove-div');
for(var i=0; i<removeDiv.length;i++){
removeDiv[i].remove();
}
function insertAfter(newNode, existingNode) {
existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}
</script>
I am fairly new to web development. I am trying to apply jQuery to my website, such that when the page loads up, the heading is animated. But for some reason I am not able to get it working. Here is the javascript code :
$(window).ready(function() {
$("h1").animate({left:'250px'});
});
Here is the relevant HTML code:
<!DOCTYPE html>
<html>
<head>
<title> Welcome! </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery_functions.js"></script>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
CSS left only works with absolutely positioned elements. If you add position:absolute to your H1 tag, it will work.
$(window).ready(function() {
$("h1").animate({left:'250px'});
});
h1 { position: absolute; }
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<h1>Hello!</h1>
This is because h1 may have a static position. You may need to set a CSS relative or absolute position to that element like
h1 {position: relative}
and this jQuery code will work
$(document).ready(function () {
$("h1").animate({
left: 250
});
});
See JSFIDDLE
I'm new myself but it appears your animate option is missing an argument.
$('img').animate({left: "-=10px"}, 'fast'); is an example. yours tells it how much to move, but you left off the how.
You can try changing
$("h1").animate({left:'250px'});
to
$("h1").animate({marginLeft:'250px'});
maybe $(doucment).ready()
I think it will be work ))
I'm trying to generate a form for use with my game, I have to say, JavaScript is a whole new world from what I'm used to, and not being able to just create text-fields inside of the canvas is pretty lame, (Or atleast I haven't found a way to... that works with mobile devices)
Here's my code:
var loginForm;
var formUserInput;
var formSubmit;
loginForm = document.createElement("form");
loginForm.setAttribute('method', "post");
loginForm.setAttribute('action', 'doSomething()');
formUserInput = document.createElement("input");
formUserInput.setAttribute('type', "text");
formUserInput.setAttribute('name', "username");
formSubmit = document.createElement("input");
formSubmit.setAttribute('type', "submit");
formSubmit.value = "Submit";
loginForm.appendChild(formUserInput);
loginForm.appendChild(formSubmit);
document.getElementsByTagName('body')[0].appendChild(loginForm);
Here's my HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Online RPG Alpha </title>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.2.1.js"></script>
<script src="js/engine/networking.js"></script>
<script src="js/engine/phaser.min.js"></script>
<script src="js/entity/Player.js"></script>
<script src="js/CanvasManager.js"></script>
</head>
<body>
<div id="game"></div>
</body>
</html>
When debugging the page I don't get any javascript errors, but the form never appears, and it also is not appended to the source. I also tried using $("body").append(loginForm); which is jQuery, but it also didn't work.
This is the generated HTML:
<html><head lang="en">
<meta charset="UTF-8">
<title>Online RPG Alpha </title>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.2.1.js"></script>
<script src="js/engine/networking.js"></script>
<script src="js/engine/phaser.min.js"></script>
<script src="js/entity/Player.js"></script>
<script src="js/CanvasManager.js"></script>
</head>
<body>
<div id="game" style="overflow: hidden;"><canvas width="800" height="600" style="display: block; touch-action: none; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: inherit;"></canvas></div>
</body></html>
The JavaScript is located inside of the "js/CanvasManager.js" script.
Since your JavaScript code is in an external file that is referred to via a script element in the head part, the code gets executed when the browser is still processing the head part and hasn’t even started reading the body element. Thus, there is no body element in the DOM, so the append fails. In the browser console log, you should see an error message like the following:
TypeError: document.getElementsByTagName(...)[0] is undefined
There are several ways to fix this. One way is to move the element
<script src="js/CanvasManager.js"></script>
at the end of the body, right before the end tag </body>.
A cleaner way is to wrap the code in a function and assign it to be executed once the page has loaded:
window.onload = function() {
// your current code goes here
};
This way the logic won’t depend on the placement of the script element.
I need to check if browser JavaScript is off, then display a error div instead of the body, how can I do this?
You'll need to do it the other way around - so to speak - you'll have to output everything, and then hide/ remove the error div using Javascript.
It's called Progressive Enhancement.
<html class="no-js">
<head>
<style>
.error,
.no-js #container {
display: none;
}
.no-js .error {
display: block;
}
</style>
<script>
document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/, '');
</script>
</head>
<body>
<div id="container">
rest of page
</div>
<div class="error">
sorry, no javascripty, no sitey!
</div>
</body>
</html>
Of course, this is usually a bad idea, but I hope you've already considered that.
in the body you can add :
<noscript>
Here the html to display when javascript is off
</noscript>
#roryf's solution is a good approach, although it is dependent on jQuery, and if the domloaded event fires a little late you can get a 'flash' of the no-js content.
The following will remove the html.no-js class before the body has rendered:
<!DOCTYPE html>
<html class="no-js">
<head>
<script>
if (document.documentElement) {
var cn = document.documentElement.className;
document.documentElement.className = cn.replace(/no-js/,'');
}
</script>
</head>
I encountered a weird problem when trying to write a cross-browser script. Basically my header looks like this
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
Then in the body tag:
<p id="hey">Hey</p>
<input type="button" value="attachStyle" name="attachStyle" onclick="attachStyle();"></input>
<script>
function attachStyle() {
var strVar="";
strVar += "<style type='text\/css'>#hey {border:5px solid red;}<\/script>";
$("head").append(strVar);
}
</script>
The button works in Firefox, but not in Chrome. When I looked at the html DOM elements in the developer tool, the style tag was inserted but without content, like this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type='text/css'></script>
</head>
I'm curious as to what causes this? And how to create CSS style in a way that is cross-browser? Thanks!
<style type='text/css'></script>
You started with a "style" tag and closed it with "script". Wrong tag! :P