I currently use this little line of code to "post" messages.
setTimeout(function(){
o.html(o.html() + "Username:<br>" + msg[r] + "<br><hr>")
}, 7000);
It works great, it posts messages from an array, ads some styling.
But right now when it posts a message it looks like:
Username:
messagehere
<hr>
What I want is the code to post an image as well, before the message and username. Like as you would see on facebook when chatting with someone, commenting something etc.
I tried just putting a +<img src="" class=""/> in front of it but that did nothing. The whole code suddenly stopped working.
So right now I am looking for the correct way of doing this, id like to add an class to it, so I can style the whole thing correctly with css (having the avatar in front of the message and username, like explained earlier)
If someone could help me find the correct way, that'd be much appreciated.
You just need to wrap the img tag in quotes. It's erroring because without the quotes, your browser thinks it's a variable or function instead of a string literal.
+ '<img src="" class=""/>'
Also, you should use the .append() function instead of doing .html(.html() + ...)
o.append("Username:<br>" + msg[r] + "<br><hr>" + "<img src='' class='' />");
Related
In my Js script i tried escaping,setting string to another complete variable and everything i can think of doing.
But cant figure out why the "/ "character in the background-image:url("../") is giving me such a hard time.
Here is a piece of code from my Js script.
let image = "../../" + value.image;
receptenMarkup += '<div class="receptImage" style="background-image:url("../../'+ value.image +'");" alt="test"></div><img src="'+ image + '">';
"../../'+ value.image +'" comes back correctly in the console.log as the path.
Image comes back as the correct path.
Example:
../../images/recepten/thai-chicken.jpg
My console.log of the entire markup also shows a correct path.
<div class="receptImage" style="background-image:url("../../images/recepten/noodle- soup.jpg");" alt="test">
but!! here is the Result in the inspector..
RESULT INSPECTOR:
<div class="receptImage" style="background-image:url(" ..="" images="" recepten="" noodle-soup.jpg");"="" alt="test"></div><img src="../../images/recepten/noodle-soup.jpg">
Notice the image url works great and fine!
The CSS part on the other hand gets all sorts of crazy.
I cant get this to work properly and point the background image to the right path.
I collect a lot of Json data and make cards based on that.
the background image needs to be in a div so i can style it in RWD and not deform like an image tag does.
Somehow i cant get this to work.
Can anyone please give me pointers?
I tried
1: using ../../ to escape ../../ to escape
2: using just "/'value.image'" to go to the root of the website as W3 suggests, no go.
I bee at this for hours now and my deadline is approaching..
Please can anyone explain why the / becomes a space and i get stuff like image=.. in there which i didnt even type that wat.
URL and IMG react differently.
The problem isn't the /, it's the mismatched quote characters delimiting the strings and attribute values.
The simple fix for this is to use a template literal:
receptenMarkup += `<div class="receptImage" style="background-image: url('../../${value.image}');" alt="test"></div><img src="${image}">`;
Side note; I would suggest making all paths relative to the site root, not relative to the current page.
I imagine this has been asked many times but I am having problems with the above error,
What I am trying to do is have a cortina effect menu whose child divs content will change depending on a variable which is coming from a drop down menu.
So I wrote roughly how the content of the div would look for one option in a bid to test it out and this is what I have:
function popupContent(selectedText)
{
return '<div>Operating System:
<a class="changer">+<\/a><select class="firstSelect">
<option>Windows<\/option>
<option>OSX<\/option>
<option>Linux<\/option>
<\/select>
<\/div>
<div>Releases:<a class="changer">+<\/a><select class="secondSelect"><option>11.0<\/option><option>11.2<\/option>
<option>10.1<\/option>
<\/select>
<\/div>';
}
I set the content of the div using $('#divname').html(popupContent(this.name));
When I try to load the page I get a unterminated string literal error, I have spent some time looking around and most of the questions seem to be when the word script is in it (which I don't have) and escaping / characters which I have tried as you can see.
Can anyone shed some light on this please?
Your string has line breaks in it.
You can do this instead:
return '<div>Operating System:' +
'<a class="changer">+<\/a><select class="firstSelect">' +
'<option>Windows<\/option>' +
etc.
So eventually I want to have a greasemonkey script but for now I have only been working with firebug to test out my html/javascript.
I have this code to insert one button in the HTML toolbar for blogger.
The button is supposed to replace all the with " " as blogger seems to just randomly add into my blogs posts and can cause the published article to look weird (a bunch of words separated in between with s will not want to break in the middle unlike the same words separated with " ").
document.getElementById("postingHtmlToolbar").firstChild.innerHTML += '<div id="SP" class="goog-inline-block goog-toolbar-button" title="SP" role="button" style="-moz-user-select: none;"><div class="goog-inline-block goog-toolbar-button-outer-box"><div class="goog-inline-block goog-toolbar-button-inner-box"><b>SP</b></div></div></div>';
Which trimming away the formatting just leaves us with.
<b>SP</b>
The funny thing is that that same code (minus the href, javascript: stuff) run from firebug works perfectly.
But when it is inserted like this and run it blanks the entire web page and writes the value of document.getElementById('postingHtmlBox').value.replace(/ /g, ' ') into this black page.
Am I forgetting something stupid? Is this supposed to happen? Do I have some stupid syntax error? What would you suggest as a solution?
Don't put JS code in href. use onclick:
<b>SP</b>
Try adding void(0); to the end of the href.
Basically, the output of the last statement (if any) is replacing the document (i've had the same problem), so making the last statement one with no output will avoid the problem
Often times, when I use struts 2 tags, the loading of a page will be incomplete apparently because of single quote or double quote characters from the struts 2 tag interfering with such characters from javascript.
One example I am very eager to get working is as follows:
var me = '<s:a href=\'http://www.google.com\'>Google Link</s:a>';
$('#appnSelect').html(me);
So what I am concerned about is when single and double quotes are inside that me string on the right side of line 1. Ultimately, I need to get <s:select> to work, but this problem seems to creep in with a number of tags like the above example. Replace the <s:a> tag with an <a> tag, and voila, it works. However, when the <s:a> tag gets expanded, the page will incompletely load.
Is there an easy solution somewhere I am missing? One thing I did try was with the theme attribute setting theme="simple" because sometimes that helps me when the output gets rendered incorrectly. That did not work in this case.
Generating HTML from tags like that in the middle of a JavaScript string constant is always going to be an ugly business. In addition to quote characters, you're also likely to get newlines. Strictly speaking you don't know what you're going to get, and you can't control it.
One thing that comes to mind is that you could drop the tags into dummy <script> blocks marked as a non-JavaScript type:
<script id='anAnchor' type='text/html'>
<s:a href='http://www.google.com'>Google Link</s:a>
</script>
The browser won't try to execute that. You can then do this in your JavaScript code:
$('#appnSelect').html($('#anAnchor').html());
What should work with very little thinking:
<s:a id="google" style="display: none;" href="www.google.com">Google Link</s:a>
Now just grab the the element using the id in your script. Might be better if you set up a class. There are id, style and class attributes for all struts2 tags.
I believe the issue is with your escaping of the single quotes inside the <s:a> tag. In my experience with using <s:url>, I've done the following:
var url = "<s:url value='/someAction.action' />"
I believe the same syntax should hold true for <s:a>.
Additionally, look in your JSP container's error log, and see if you can find an error relating to that <s:a> tag. That may provide some additional insight to the problem.
This is my answer, which will not be the best answer because Pointy's response pointed me in the correct direction. However, up votes still appreciated :)
First, you need the script blocks which are not rendered. I have 2 because a checkbox will toggle between which one is displayed:
<script type="myType" id="abc">
<s:select name="selectName" list="#list1" listValue="%{prefix + '-' + name}" theme="simple"/>
</script>
<script type="myType" id="abc2">
<s:select name="selectName" list="#list2" listValue="%{prefix + '-' + name}" theme="simple"/>
</script>
Next, I create a region which is blank in the html code
<div id="innerRegion">
</div>
Then, I need to put something on the screen when the page first comes up, so go with this:
<script type="text/javascript">
$(document).ready(function(){
$('#innerRegion').html( $('#abc').html() )
});
I needed to put this at the end of my document because onLoad was already being used by a parent page. So I am saying abc is the correct default.
Then I need logic to handle what happens when the checkbox is pushed:
var buttonPressed = false;
$(window).load(
function()
{
LocalInit();
});
function LocalInit() {
$('#myForm input[name=buttonValue]').change(
function()
{
buttonPressed = !buttonPressed;
if (buttonPressed == true)
{
$('#innerRegion').html( $('#abc2').html() )
} else
{
$('#innerRegion').html( $('#abc').html() )
}
$('#dataId').href = document.location.href;
}
);
}
I think what was tripping me up ultimately was that I was trying to force the s:select tag through jQuery functions when as you see above it did not turn out to be necessary. I could just write the s:select as normal.
Perhaps not the best title, but here is the issue.
We are creating a submit button, that changes state when user clicks to processing. But wanted to spice it up with a loader image.
So working code is:
<img src='img/check.png' style='vertical-align: middle' /> Finish and Pay
What I am after is:
<img src='img/check.png' style='vertical-align: middle' /> Finish and Pay
But it isnt complying, I know it must be a bad declaration, just not sure what I am doing wrong. Or if indeed img src needs to be absolute.
Any help cheers
These quotes are not properly escaped:
'<img src='/img/loader.gif'>Processing...'
Also, you may want to assign this click function elsewhere (I don't like creating tags inside an attribute, that can be confusing), and I would definitely close that tag.
This might work better:
'<img src=\'/img/loader.gif\' />Processing...'
How about using an image button to begin with and changing the src of that?