Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I want to display some form only sometimes, so I append the HTML using
$.html('HTML here');
however I need some logic and design I need to append JavaScript and CSS as well.
js code is quite long it looks horrible when it is multiline string and I don't have an option to read it from another source, is there any other option?
$('head').append('<link rel="stylesheet" href="style.css" type="text/css" />');
$('head').append('<script type=text/javascript" src="script.js" />');
or if you want to add the code and not the file the:
$('body').append($("<script>alert('avascript!');<\/script>")[0]);
$('body').append($("<style>.someclass{padding:10px;}<\/style>")[0]);
If you only need to append different forms at a given time, you can put all the forms on the page and then hide/show them with jquery.
If the javascript is for validations purposes, you can write different functions that will be called depending on the form you are submitting.
Finally the css can be applied to each element by using css classes.
So it is not necessary to append everything as it could be written in the page from the first time. This approach is a standard for ajax applications today. It's called single page application.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am wondering if there is a way to store <link> or <script> reference elements required for multiple web pages(AngularJS, Fonts, JQuery, Scripts, Google Analytics, Etc.) in a file and then import that file into all of my HTML files(e.g. I can change a file in some place and since it is referenced in all of my pages it will update all of those pages).
Using HTML Imports would support this use case, but it is currently in the draft phase.
<link rel="import" href="myfile.html">
If you're interested in using this functionality now there are polyfills that support it. Another option that has been mentioned is to use a template system to add the necessary dependencies to the HTML when the page is requested, or even at build time.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I have plain HTML code, without Javascript code in it.
How would you detect if any form of Javascript was injected in the HTML ?
The application generates HTML client side. And needs to validate it once it arrives on the server.
The goal is NOT to remove Javascript, but simply detect the presence of it.
This is what tools like HTML Purifier are for. They break the input into tokens are run them against a white list.
This is safer than trying to find specific ways of inserting scripts into HTML, because there are tricks with malformed tags or non obvious attributes being used. See the XSS Evasion Cheat Sheet for example.
Removing can be easier than detecting - just escape all the HTML etc. you get with htmlspecialchars($string).
Alright, so this is a very interesting challenge:
First, check for all script tags, both capital and lowercase
<SCRIPT> <script> <sCrIPt>
Then, check for event handlers (onclick etc).
For this, we use DOM
$dom = new DOMDocument;
$dom->loadHTML($string);
You can work all sorts of magic with DOM, I recommend reading their documentation. Check for any attributes with "on" in them
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Right now I have a simple website that looks something like this.
http://i.imgur.com/opllm1Y.png
I need a way to change the image and the description at the same time but keep the navbar and title the same as I do not want 100s of pages on for my website.
Would it be best to put image url's into a database and call it out with php along with the description?
Or is there another way to do it.
Does your content need to change without leaving the page?
If so, look into using jQuery and AJAX.
goto jQuery offical web site, and download the javascript file from them, then upload it to your server.
just before the closing tag for body, insert this:
<script src="your.jquery.file.js" type="text/javascript" ></script>
Now, on your page, a simple way to do this is make sure your img and div tags have id's:
<img id="image_to_change src="start.png">
<div id="text_content"></div>
After the script tag you included, use another script tag, this time, we're gonna put some javascript of our own in here
<script type="text/javascript">
$(document).ready(function(){
$('#image_to_change').onclick(function(){
$('#image_to_change').attr('src', 'next_image.png');
$('#text_content').text("The text you want to insert");
});
});
</script>
This of course is very crude, but it should give you a good starting point.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm having an issue at work with a rather picky client.
We use a rather strange script to deal with something that they require. We're an online assessment company and this script in general applies in our test player, rather than in our question editor, so we can't make change in the html, as you normally would with a text input box.
I know the maxlength attribute can be added through use of jQuery by using something along the lines of
$("input").prop("maxLength", 3)
However, I do not know how I would reference this in the HTML, as it would only be used in a couple of questions that use this script so making it standard for these questions by adding it to the JavaScript used is not an option.
The inputs that you need to apply this to would need to have ID's or Classes.
As you cannot edit the HTML this would only work, if those input's had ID's or Classes already.
If you want to apply it to an element with an Id you would do:
$("#IDGOESHERE").prop("maxLength", 3);
http://api.jquery.com/id-selector/
If it was with a class :
$(".CLASSNAMEHERE").prop("maxLength", 3);
http://api.jquery.com/class-selector/
You could get a little more fancy, by using EQ,
$("input").eq(5).prop("maxLength", 3);
Which would apply the max length to the 5th input on the page.
http://api.jquery.com/eq/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
In this Google html5slides demo there is no stylesheet inclusion and the only dependency is this JavaScript file but you are able to choose from 2 different themes and 3 different layouts.
How are you able to define these different layouts and themes? Where does the code for those sit? Also, how does the page fetch the Google logo for the following if there is no stylesheet with an img src for this article class:
<article class='biglogo'>
</article>
P.S Project home is http://code.google.com/p/html5slides/
It's simply created within Javascript. For example it can easily be done using jQuery (Javascript Library) and the functions like .html, .append, .css to pretty much create whatever markup necessary.
There are two stylesheets at the bottom of the html:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|Droid+Sans+Mono">
<link rel="stylesheet" type="text/css" href="http://html5slides.googlecode.com/svn/trunk/styles.css">