I want to make a URL like: www.mysite.com?q=name
From there, it will place in HTML:
<p align="center"><img src="image/**name**.png" alt="Logo" /></p>
What would be the jQuery attributes to do this? I am still new to jQuery and trying to learn.
assign a Id to your img element and do:
$('#image-id').attr('src', 'image/<name>.png');
Where you replace #image-id with the ID you assigned to your element and has to be extracted from the URL parameters
To extract the from your Querystring you could use this plugin (or - just look at the code and take what you need)
So the complete script would look like this:
$('#image-id').attr('src', 'image/' + $.getURLParam('name') + '.png');
You should assign an id to your img to identify it:
<p align="center"><img id="logoImg" src="image/**name**.png" alt="Logo" /></p>
Then use a jQuery selector on this id to change the src attribute based on your URL parameter. The URL String is split on the q= text and the value taken from it.
$('#logoImg').attr('src', 'image/' + document.URL.split('q=')[1] +'.png');
Best way is to just use the plugin mentioned by tigraine, but if you want to parse it yourself, you can access the params via window.location.search
Related
Just wanted to know if it is possible to change with pure Javascript the content between the angle brackets in a HTML tag.
By this I mean all the content, not only the tag name, not only the id, not only the class and all the different attributes but everything inside, even non standart HTML code.
One small example:
Before
<div id="myID" class="myCLASS" whaterver-content ></div>
After Javascript DOM function
<div id="myID" class="myCLASS" other-content ></div>
I know tag name, id and class can be modified with DOM Element Object functions in JS. Is there any nice function that does the same for data not inside quotes and not before an attribute?
Thanks for your answers.
EDIT: I just saw this Set attribute without value by asking the question on another way. But is the result the same? Or will there be ="" after the attribute?
I do not like the accepted answer. You should not be manipulating HTML as string. It is not safe and performance is usually really bad.
Imagine that whaterver-content is actual text somewhere inside that div, for example as user input. It will get replaced when it should not be.
Please use DOM manipulation directly:
var element = document.getElementById('myID');
element.removeAttribute("whaterver-content");
element.setAttribute("other-content", "");
How about using replace on the element's outerHTML attribute?
function change() {
document.getElementById('myID').outerHTML =
document.getElementById('myID').outerHTML.replace('whaterver-content','other-content');
console.info(document.getElementById('myID').outerHTML);
}
<div id="myID" class="myCLASS" whaterver-content ></div>
<input type='button' onclick='change();' value='change' />
I have written the code but the jquery code isn't getting executed.
Enter URL :<input type="text">
<button id="btn"> continue
</button>
<div contenteditable="true"
id="bod">
Click on this text to start writting</div>
$(document).ready(function(){
$("btn").click(function(){
$("bod").append($('input').html('<img alt="" src="'+$(this).val()+'">'))
})
});
Also I wanna use "input" or "textarea" instead of since I wanna tag that field with ng-model(angularjs).
I believe this is what you're trying to accomplish:
For one, you are trying to reference your elements with an id selector without #.
$("bod") should be $("#bod"), etc. '#" indicates an ID.
And also the way you were retrieving the value for input was all wrong.
Also if you want the value of one item, use an ID. Otherwise you'll get an array just using a generic element selector. I gave your input an id, so you weren't just trying to get a value off of $('input')
(I put a placeholder image address in your value, you can remove that)
Also view the snippet full screen. The small view makes it look like your text is being removed, but it's not really. It's just that when the img is appended, the baseline for everything is lower than the window in the snippet viewer.
$(document).ready(function(){
$("#btn").click(function(){
$("#bod").append('<img alt="" src="'+$('#inp').val()+'">');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Enter URL :<input id="inp" type="text" value="http://placehold.it/300">
<button id="btn">continue</button>
<div contenteditable="true" id="bod">Click on this text to start writting</div>
If i have understood your requirement correctly then JQuery code should be like this:
$(document).ready(function(){
$("#btn").click(function(){
var bodElem = $("#bod");
var url = $("input").val();
$('<img alt="" src="'+ url +'">').insertAfter(bodElem);
});
});
I am not able to figure this out for a while now.
I want to use super script in Alt attribute of an image. The code that I have made works fine when I use it with
document.write
innerHTML
because I understand that the HTML parser when reads the script reads the <sup></sup> tags and makes the text between it as superscript. But how to make the Alt attribute or rather an <input> tag have a superscript value.
I want something like this:
<input type="text" value="Hi, this is my 1<sup>st</sup> award">
to output on the screen as an input box with pre-filled text
I have made the following code, but cannot figure it out to put it in place:
<body>
<img src="test.jpg" height="400px" width="500px" alt=''>
<script type="text/javascript">
var title = "Test String having 1st";
var one = "st";
one='1'+one.sup();
title = title.replace(/1st/g, one);
document.getElementsByTagName('img')[0].setAttribute('alt',title);
</script>
</body>
For easier solution you can use an editor and remove the toolbar and set the html content of it, here is an example editor https://mindmup.github.io/bootstrap-wysiwyg/ , you can easily turn off the toolbar and then add your desired html to it.
For alt you can use the on error attribute and call a custom attribute on it. Let me know if you need any further elaboration.
I am generating iframe and putting this generated iframe code into a textfield so that user can copy and use it.
iframe first created here:
<div id="iframecode">
<iframe src="http://www.page.com/?arg1=A&arg2=B"> </iframe>
</div>
i am taking it with jquery like this:
var snippet = $('#iframecode').html();
snippet.replace('&','%26');
$('#wsnippet').val(snippet);
and putting here:
<textarea id="wsnippet"></textarea>
but snipper is still:
<iframe src="http://www.page.com/?arg1=A&arg2=B"> </iframe>
But even if i encode the ampersand, it still ends being &. how can I encode this so that user can copy and paste and use it?
The user can copy and paste and use that already. & is the correct encoding for an ampersand in an HTML attribute.
If you don't need to grab all the code from the div, and can just get the src and manually create the code for the iframe you could do the following:
var src = $('#iframecode iframe').attr('src');
var snippet = "<iframe src=\"" + src + "\"></iframe>";
$('#wsnippet').val(snippet);
I wrote an ajax program.when i am getting response, at that time i will display
that content in my web page using html tags.
So how can I use html tags in javascript?
A sample data you get from server, and a sample html you want to add would make it easier for people to help you.
The basic steps are
1.Get a reference to the html node you want to put the new data in. There are multiple strategies to get reference to the node. If it has an id, it's most starightforward.
2.set innerHTML property.
eg
var node = document.getElementById("targetNode");
node.innerHTML = "<div>data</div>";
Well... Not much detail so not much of an answer...
Easy way
document.write("<body> <div> this is on my page! </div> </body>
or you can edit the innerhtml of an element to place things inside it
document.getElementById("id").innerHTML = "<div>This is inside my element with id="id" </div>"
Answers the question, no?
Instead of embedding html into javascript, you could make a bunch of predefined javascript functions and then use them outside of the script tags. For example, here's how to display a picture while still using the javascript functions.
<html>
<script type="text/javascript">
function display_message()
{
alert("This is a message.");
};
</script>
<body>
<img src="image.jpg">
<form>
<input type="button" value="Click me!" onclick="display_message()" />
</form>
</body>
</html>
I know this is an old post, but this could be helpful...
Using jquery is great way to combine html elements with script
Note: This would be used in the body, if using it in the be sure to enclose it in
$(document).ready (function(){ YOUR CODE });
// Create an object:
var url = {
link: "https://stackoverflow.com/questions/2834929/how-can-i-use-html-tags-in-javascript"
};
// Display URL object:
$('#panel').html('<a href=' + url.link + '>' + url.link + '</a>');
//Note: the # denotes id, if you want to use a class it would be:
//$('.panel').html('<a href=' + url.link + '>' + url.link + '</a>');
//your html would be: <div id="panel"></div> or whatever you choose ie <p> and so //forth