.complete {
content: 'complete'
}
<input type="button" value="Complete Purchase" id="btn_complete" class="complete">
screen shot
Here the button text is "Complete Purchase". i want to remove "Purchase". i need only Complete. by using css only. i have tired using css. Please see the above snippet
I didn't see anywhere that you can replace a part of something with css, But with this you can change all your text in an element:
.yourElement {content: 'complete'}
But It can completely be done using JQuery.
It is not either the matter of css or js or anything......The problem is, what do you want to change?.... if you want to change the text of a button, just go to your html file and edit the text. Or If the html file is isolated from you, and you have just the access of js directories or css directories, then use style content:'complete' or use js.
Related
Essentially I'm trying to create a mini-clone of JSFiddle.
That is, I want to allow my users to type some HTML and CSS and see the rendered result in another area of the screen. I'm also looking to use AngularJS.
Does anyone have any advice or experience on how to go about this?
I'm not sure how much Javascript you know/want to use, but you could create 3 frames, for the HTML, CSS and output. In the HTML and CSS frames, put an input text area. Then on the "run" button click, change the inner HTML of the output to the content of the html (within HTML tags) and the css (within Style tags).
(I drafted this before you made the Angular edit, but you can use jQuery with Angular.)
You can do this within a single page, if you're somewhat careful:
You can have only one body tag on a page. So any body styles should apply to the container only, not to the document body. The code below handles this by changing a body tag style to a .body class style, which applies to a div within the container with class body.
Any other styles should also apply to the container's children only. The code below handles this by first appending the "style sheet" textarea to the container, then iterating through the style rules and prepending the container's ID to each selector. (The original rules are deleted and the new rules are inserted.)
The code below works in IE9+ and modern browsers. Working Fiddle.
<div>
<textarea placeholder="Enter HTML here"></textarea>
<textarea placeholder="Enter CSS here"> </textarea>
</div>
<div id="Render"></div>
$('div').first()
.keyup(function() {
$('#Render').html(
'<style>'+$('div:first textarea:not(:first)').val()+'</style>'+
'<div class="body">'+$('div:first textarea:first').val()+'</div>'
);
var ss= document.styleSheets[document.styleSheets.length-1],
rules= ss.cssRules;
for(var i = 0 ; i < rules.length ; i++) {
var rule= '#Render '+rules[i].selectorText
.replace('body','.body')
.split(',').join(', #Render')+
'{'+rules[i].cssText.split('{')[1];
ss.deleteRule(i);
ss.insertRule(rule, i);
}
})
.keyup();
You could create a temporary file with the CSS and HTML provided and then use a Frame to view that file in another section of the page
I am making help content documentation for an already made software (the kind of which opens in every software when you press F1 or navigate to the Help section in the menu bar). I am using simple html/CSS/js pages to do so.
There is a ton of the same text descriptions of various software properties that appear in more than one page. The idea is to make a single text source file, where all the text descriptions are located and then use some sort of referencing to that specific text section wherever necessary.
Kind of a similar to using a CSS stylesheet to apply styles over all of the pages, only this handles text instead of styles. This way I would be able to change text in only one file and it would apply everywhere it is used.
I ran across the html SSI method, but this only includes the entire html page and not just a specific text section the way I would like to. I would strongly avoid using different file for each text section.
Can anyone please point me into the right direction here?
I think that you can make a JavaScript function that contains the common texts and use this functions in your code whenever you need them, for this the JavaScript that you create should be an external file and you can reference it in every html page you need it.
For example, you can have one function that returns "Hello World" and set this to a "p" element with the id="title". So in every page where you have an element with the id title you can call your JavaScript function to set its text to "Hello World". Use this link to find out more about this topic:
http://www.w3schools.com/js/js_htmldom_html.asp
UPDATE: I did a little test, i created the following JavaScript:
function helloTitle(){
var text = "Hello World!";
document.getElementById("title").innerHTML = text;
}
And referenced it in some HTML pages like this:
<script src="commonText.js" type="text/javascript"></script>
After that i only need to call the function in the element i want it to modify:
<p id="title"><script>helloTitle();</script></p>
This is a solution if you are only using JS, CSS and HTML. There should be other ways to achieve this.
Hope this information could help you!
I figured out how to do it a little more comforatbly on a large scale using the html command https://www.w3schools.com/tags/tag_iframe.asp
in your main html file you do:
<p> <iframe src="Text.html" width="100%" height="300" style="border:1px solid black;"> </p>
and then with some basic html formating insert whatever text u want
<html>
<body>
hmm idk what i should put here. Test
</body>
</html>
there will also be some css formatting needing to be done before it look perfect, but if you want to make multi line blocks I think this is the easiest way to.
I'm trying to make a file sharing website but having trouble styling the upload forms I have as my design is quite advanced instead of setting the indivdual styles i'm trying to get set the design as a background image.
This is my design - http://icap.me/i/s5YIbheY3g.png
This is it currently effort - http://icap.me/i/ODuzJOQMhS.png
So far I set the style of the upload button by using the following code -
form input[type=submit] {
background : url("../img/upload.png") no-repeat center center;
width : 115px;
height :52px;
border : none;
color : transparent;
font-size : 0
}
do you know how I could use an image to style my other form buttons here is the html -
<form action="upload_file.php" method="post"enctype="multipart/form-data">
<input type="file" name="file" id="file" />
<br />
<input type="submit" name="submit" value="Submit" />
<input type="checkbox" name="vehicle" value="Bike">I agree to the terms and conditions<br>
</form>
Styling some form elements suck, and unfortunately, the file element is one of those elements. This is because the browser actually derives the control itself from the operating system (which means you have absolutely no control over how it looks). What this means for you is that in order to style it, you will need JavaScript and some CSS hackary.
Quirksmode has a great step by step for doing it, at least to get you started.
The basics of which, though, are:
Style your normal file input with position: relative.
Add a new plain old text input and position it on top of the file input.
Style the text input to look like the file input
Drop the file input's opacity to 0, so that it's invisible, but still clickable (this is key, because you're still actually using the file input)
Use JavaScript to put the filename into the text input
This one's kind of primitive and not very standards-compliant (extra elements and all that). If you're already using a JavaScript library (jQuery, MooTools, etc), you may be able to find a plugin that will handle the control itself, and you just add styling to that. The advantage to this method is that you won't necessarily need to add extra elements yourself (so you don't have a stray input field lying around), and the JavaScript (ideally) picks up the presence of your file input(s) and "fixes" them accordingly.
For styling browse button you need to take help of css-javascript duo or something like twitter bootstrap which just works out of the box1..
Also, check this post and this article
As a personal view, i feel that form elements like browse button and drop-down menus shouldn't be tweaked much..giving out two benefits..one, faster developments..and two, cross-browser symmetry..
I have an HTML form with radio buttons, check boxes, text fields and drop down lists.
Since I want user to fill everything in my form, none of the radio buttons and check boxes are checked and the text fields are empty.
I would like to write a CSS file that will fill the form with answers (I don't want to change my HTML file).
Is this possible ?
I would appreciate an example or any other idea ?
Thanks !
No, it isn't possible. CSS is for style, not markup, and changing the contents of an input field requires modification of the markup.
It sounds like you might want to consider JavaScript, which can be used to alter the contents of any element, including form elements.
Javascript is your best bet. If you want to fill in -sample- answers, however, like 'First Name' in the text area what would be labelled "First Name: " you can do something like <input type='text' value='First Name' name='emailForm'> and the value attribute will be filled in when the page loads.
You can use jQuery to accomplish what you want quite easily, using CSS-style syntax.
Here's a sample form:
<form ...>
<input name="firstName" />
<input name="lastName" />
</form>
And corresponding jQuery/JavaScript:
$(function () {
$("input[name=firstName]").val("John");
$("input[name=lastName]").val("Doe");
});
Should be easy enough to extend to a larger and more complex form. You can easily use classes or ids on the elements and in the jQuery selectors, as well.
CSS is for designing and styling the webpage. Although its capabilities have been exploited to pull of many tricks it is not a fix-all solution. What you need to do is pull the data you need to fill and put it in your fields.
You can do this two ways:
Use a server side language like PHP/ASP.Net to pre-fill this information.
Use Javascript/Jquery/MooTools or some other framework to fill it on the client-side, picking up the data from the server.
If the information is static then it is very easy, because you can just put this info as a part of the HTML content itself.
If this answer doesn't work for you, add more information to your question.
I want to add some animated text (HTML&CSS based) on HomeSlider images. I have tried this by adding html code to description field in HomeSlider module configuration and placed the css code in homeslider.css file but the animation text is nowhere showing. How to achive this correctly?
Try disable Html purifier option,also see that your html code to not be more that 4000 characters.If still not working try edit file HomeSlide.php in line description change isCleanHtml with isString >> Save and reset module.