I am trying to replace a CSS style in the following code:
var theHTML = this.html();
theHTML.replace("style=\"display:none;\"", "style=\"display:inline;\"");
alert(theHTML);
The html looks like this:
<IMG SRC="picturesFromServer.asp?PhotoId=365481" style="display:none;">
However once i check to see if it changed it or not it keeps displaying none instead of inline. I'm just trying to make it visible before i print it.
You could use JQuery's .css() method:
$("img").css("display","inline");
EDIT : If what you are trying to accomplish is, get the img tag inside this and append it somewhere else, with display:none; do this.
http://jsfiddle.net/tL3Uf/
HTML
<div id="mainContainer">
<img src="http://imgh.us/business-online.jpg" style="display:none;" /> </div>
<div id="destination"></div>
Javascript
$(function(){
var $img = $("#mainContainer img").clone();
$img.show(0).appendTo('#destination');
});
CSS
#incase image doesnt load
img{
padding: 10px;
background: #f00;
}
I'm really not a jQuery master, but in Javascript are strings immutable? Should you try something like
theHtml = theHtml.replace(...)
replace the first two lines of the given code with this line :
$(this).find("img").css("display","inline");
The string .replace() method doesn't update the string you call it on, it returns a new string - so that's why your alert(theHTML) continues to display the original string. If you said this:
theHTML = theHTML.replace("style=\"display:none;\"", "style=\"display:inline;\"")
Then alert(theHTML) would show the replaced version.
However, that still won't have any effect on the actual img element, because it is still just a manipulation of a string variable that has no connection to your element. To actually make the img element visible you'd have to replace it with a new element generated from your string, which is a hassle, or you can just set the display property directly:
$(this).css("display", "inline");
Note also that your original code said this.html() - it seems unlikely that this would be a jQuery object that you can call the jQuery .html() method on, it is more likely to be the DOM element itself in which case you'd need to say $(this).html(). So if any of the answers don't work it might be related to how you are getting the this reference to the img element in the first place - might be helpful if you could update your question to show that.
Note also that if the idea here is for the img element to appear in printed output but not otherwise you can do that with CSS:
#media all {
img.printOnly { display: none; }
}
#media print {
img.printOnly { display: inline; }
}
Give the "printOnly" class (or whatever classname you want to use) to any elements that should appear for print only. Or specify by id. Whatever.
Related
I'm working on project where we append style of any element using jquery append function and saving that style. It is creating duplicate row for that style with different value.
I want to check if some style is exist against this element, class, Id than replace it will new and remove old one. Here is my short code.
<input type="number" onclick="changeHeight(this)">
<script>
function changeHeight(ele){
var het=$(ele).val();
$('style').append("#its_height{height:"+het+px"}");
}
</script>
MY output:
<style>
#its_height{color:red}
#its_height{width:40px}
#its_height{height:30px} #its_height{height:40px} #its_height{height:43px}
</style>
I want that it should be like below this to avoid duplicate enteries and dense data. ** it should remove old heigts like 30px and 40px and only show latest height applied to it.
Desired output:
<style>
#its_height{color:red}
#its_height{width:40px}
#its_height{height:43px}
</style>
Edited Answer: Okay, i see what you are trying to do. Since you are copying the style back to the DB and you already have that covered -- and you simply need to change that portion of the style, use .replace('text to replace', 'new text to use')
So first get the computed style and set it in a var, then use that var within the 'text to find' and use your replacement value var within the 'new text to use'.
function changeHeight(ele){
var styleToReplace = $('#its_height').css(height),
het = $(ele).val();
$('style').html(text.replace(('#its_height{height:')+($.styleToReplace)+('px;}'), ('#its_height{height:')+($.het)+('px;}')));
}
I'm not sure what the het var is, but the above should replace the current height value with whatever your het var.
I'm also not sure why you don't have ; after your style properties. Shouldn't it be #its_height{height:30px;} with the closing semicolons, or are they not needed here? I included the semicolons in the above examples anyway.
Your last apended height always apply to your element.
If you replace all style so you can use .html, but it replace all other attributes also.
Whatever style you want to change you can keep in separate style tag and provide ID to that tag. after then you can change in particular. If you will do with style then it will change whole page CSS.
You can follow following example.
function changeHeight(ele){
var het=$(ele).val();
$("style#itsHeightCSS").html(`#its_height{height:${het}px}`)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style>
#its_height{
background:#000;
width:100px;
margin-top:10px;
}
</style>
<style id="itsHeightCSS">
#its_height{height:30px}
</style>
<input type="number" value="30" onclick="changeHeight(this)">
<div id="its_height"></div>
I would suggest you not to use 'append'.
Instead, try this,
Give a class or ID name to the where you can define all your predefined styles for the input tag in the style section.
<input id="its_height" type="number" onclick="changeHeight(this)></input>
<style>
#its_height{
color:red;
width:40px;
height: 10px; // default height (not mandatory to mention)
}
</style>
Now in changeHeight method using .css() jquery method update the height of the input section.
<script>
function changeHeight(e) {
var het=$(ele).val();
var divHeight = $('.col-1').height();
$('#its_height').css('height', het+'px');
}
</script>
I think this would be helpful for your question. Please let me know if this is working out for your case. We can attain the same solution with the help of vanilla javascript as well. Feel free to post a comment if you are in need of the plain javascript solution.
I have a HTML div that whose visibility i have set to hidden like this ..
<div id="checkinuserform" style=" margin:20px; visibility:hidden;">
</div>
Now at specific point i want to show this div ..For this i have added following code in jquery ...
var content = $("#checkinuserform").clone().show();
BUT , I am not able to see the DIV .Also ,adding clone function is mandatory for me in this case..
Please help me ..
Thanks..
When you clone an element, you get a duplicate of it in a variable. It won't be visible until you put it somewhere in the page.
Additionally, show() doesn't affect visibility. Either change the default style to display: none or replace show() with .css({visibility: "visible"})
replace
visibility:none
with
display:none;
You can try this.
var content = $("#checkinuserform").clone().css('visibility','visible');
Fiddle is here. http://jsfiddle.net/2f7yctmn/
I think you can user css to make it visible instead of clone, try this line of code
var content = $("#checkinuserform").css('visibility','visible');
but if clone function is mandatory for you, you can write this code
var content = $("#checkinuserform").clone();
content.css('visibility','visible');
I think this could help
Need to replace a string and want to edit the css of the new string.
var newData = data.replace(/-/gi, ' <span id=\"newCss;\">//</span>');
Anyone knows how to fix this?
Thanks
You can't have semi-colons in id's according to the DOM rules, that might be your issue. Also, id should only be used for singular items, so unless you are guaranteed to have only one such dash you are replacing on the page, you should use a class.
Try:
var newData = data.replace(/-/gi, ' <span class=\"coloredSlash\">//</span>');
and make sure that in your css or <style> you have
.coloredSlash { color: red; }
Then if you want to make changes to its color later, just update your <style> element.
I want to replace some tag-inside-a-paragraph-tag by a heading-tag-enclosed-by-a-paragraph tag. This would result in proper W3C coding, but it seems that jQuery is not able to manipulate the DOM in the right way!? I tried several ways of (jQuery) coding, but i can't get it to work ..
Original code:
<p>some text <span>replace me</span> some more text</p>
Desired code:
<p>some text</p><h2>my heading</h2><p>some more text</p>
Resulting code by jQuery replaceWith():
<p>some text<p></p><h2>my heading</h2><p></p>some more text</p>
Demo: http://jsfiddle.net/foleox/J43rN/4/
In this demo, look at "make H2 custom" : i expect this to work (it's a logical replace statement), but it results in adding two empty p-tags .. The other 2 functions ("make code" and "make H2 pure") are for reference.
Officially the W3C definition states that any heading tag should not be inside a paragraph tag - you can check this by doing a W3C validation. So, why does jQuery add empty paragraph tags? Does anybody know a way to achieve this? Am i mistaken somehow?
You can achieve this with this code. However it's pretty ugly:
$('.replaceMe').each(function() {
var $parent = $(this).parent(),
$h2 = $(this).before('$sep$').wrap('<h2>').parent().insertAfter($parent);
var split = $parent.html().split('$sep$');
$parent.before('<p>' + split[0] + '</p>');
$h2.after('<p>' + split[1] + '</p>');
$parent.remove();
});
http://jsfiddle.net/J43rN/5/
If you read the jQuery docs, you will find:
When the parameter has a single tag (with optional closing tag or
quick-closing) — $("<img />") or $("<img>"), $("<a></a>") or $("<a>")
— jQuery creates the element using the native JavaScript
createElement() function.
So that is exactly what it is doing. And as I said in my comment, you can't change a parent node from a child node, you're altering the DOM here, not HTML code. So you'll need to either use replaceWith on the parent node and replace everything or use something like remove and append to split it up in multiple elements which you append after each other.
Try this:
var temp = "<p>some text <span>replace me</span> some more text</p>";
temp.replace(/(\<span\>replace me\<\/span\>)/gi, '</p><h2>my heading</h2><p>');
This will do a case insensitive replace for multiple occurences as well.
Read more about capturing groups here
Original credit to this question!
Please try this I have updated the http://jsfiddle.net/J43rN/6/ example by the below java script function please check I hope it will work for you
function fnMakeCode() {
$('#myP #replaceMe').html("<code id='replaceMe'>My Code</code>");
}
function fnMakeH2pure() {
$('#myP #replaceMe').html("<h2 id='replaceMe'>My H2 pure</h2>");
}
function fnMakeH2custom() {
$('#replaceMe').html("<p></p>").html("<h2>My H2 custom</h2>");
}
I want to set the color of "val" in the link in below code.
var link = $('' + val + '<br><br>');//this is the link
link.style.color="red";//this is how iam trying to set the color of "val"
SO HOW TO EXACTLY DO IT.
You can do this:
link.css({ color: 'red' });
But the correct and nice way would be:
$(".parent_element").prepend(''+val+'<br><br>');
$(".parent_element > a:first").css({ color: 'red' });
Try this:
$(link[0]).css({ color: 'red'});
The reason for this is that link is not an <a> element - it's a set of elements: <a>, <br> and another <br>.
Another approach would be:
link.css({ color: 'red' });
but this will set this CSS to not only <a>, but both <br>'s as well (not a big deal though).
If you are using jQuery(which it does seem like) go ahead with this,
jQuery
link.css("color","red");
Otherwise,
JavaScript
link[0].style.color = "red";
What you did doesn't work because link is an array. Before applying a style to it, you have to first select the first element by link[0] and then operate on it.
You could use link.style.color="red" if link was an HTMLElementNode, but it isn't. It might be a jQuery object, but if you are using an older version of the library then it will return undefined.
First you need to fix your jQuery call. You can't create multiple elements at the top level. (You can skip this bit if you are using a sufficiently new version of jQuery).
Since there is no good reason to use a double <br> (it shouts "Use CSS to add a margin instead"), I've taken them out:
var link = $('' + val + '');
Now you have a jQuery object so you can either use the jQuery method of setting CSS:
link.css("color", "red");
or get the HTMLElementNode from the jQuery object and use that:
link.get(0).style.color="red";
link.css("color", "red")
However, I think it would be better to create a css class for that and set up the color there. In Javascript/jQuery I would just add the class to the tag when needed. It is more elegant.