I added an image with Javascript to a webpage, but I don't know how to modify it or place it. How can I link CSS to the image, or can I modifiy it without CSS?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PingPongKép</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<script>
function ilonaKep() {
var img = new Image();
img.src = 'img/ilona.jpg';
document.body.appendChild(img);
}
</script>
<p>Let's See the image
<script>
ilonaKep();
</script>
</p>
</body>
</html>
JQuery makes this quite easy. Apply any styling you want on the image in the style quotes of the image
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p> Lets see the image: </p>
<script>
window.onload = function(){
addImage();
function addImage() {
$('body').append('<img style="any css styling in here" src="img/ilona.jpg">');
}
}
</script>
</body>
</html>
Javascript has the ability to set an element's attribute,
img.setAttribute("style", "background-color: red;");
https://www.w3schools.com/jsref/met_element_setattribute.asp
Alternatively if you don't want inline CSS, you could add the CSS to your CSS file and give the image a class using jquery
$("img").addClass("myImage");
Related
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and the DOM</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 id="myHeading">JavaScript and the DOM</h1>
<p>Making a web page interactive</p>
<script src="app.js"></script>
</body>
</html>
This is my html code and the js I have written is here
const myHeading = document.getElementById('myHeading');
myHeading.addEventListener('click', () => {
myHeading.style.color='blue';
});
It is very simple however for some reason the h1 tag does not seem to be turning blue on click event?
Maybe your dom is not ready when js executed. Try this
document.addEventListener("DOMContentLoaded", function() {
// your code
})
Lets say you have a main .html:
<!DOCTYPE html>
<html>
<head>
<title>Page One</title>
<script type="text/javascript" src="javaS.js"></script>
<link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body id="main">
<h3>Test switching html content inside iframe</h3>
<p>iframe:</p>
<iframe src="" id="iframe1"></iframe>
</body>
</html>
And a secondary .html:
<!DOCTYPE html>
<html>
<head>
<title>Page two</title>
<link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body id="test">
<h3>Test subject</h3>
<p>subjugate text</p>
</body>
</html>
How would you display the local second .html inside the iframe element of the first .html, using only JavaScript?
I have tried using these snippets:
window.onload = function() {window.frames['iframe1'].location.replace("Secondary.html");}
.
var iframe = document.getElementById('iframe1');
iframe.src = "second.html";
...But these haven't worked. I'm new at this so the answer might be fairly obvious, but any guidance would be very much appreciated!
I use this and it works well:
window.onload = function()
{
document.getElementById('iframe1').src = "Secondary.html";
}
document.getElementsByTagName("iframe")[0].setAttribute("src", "http://your-url.com");
Your second snippet is perfect. You just have to make sure that it runs when iframe DOM element exists - in window.onload.
I just combined the two exampples you had tried to make one working example, see here: https://jsfiddle.net/4p18mxg9/9/
var iframe = document.getElementById('iframe1');
window.onload = function() {
iframe.src = "second.html";
}
Please suggest me how I show the loader in-between button click function to background image fully loading time.
Thanks
<html >
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('button').click(function() {
//want a loader till the background images loads
$('#load').show();
$('#mybody').css('background-image', 'url(http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg)');
//hide loader after the background images loads
$('#load').hide();
});
});
</script>
</head>
<body id="mybody" >
<button >Hello</button>
<div style="display:none" id='load'>loading......</div>
</body>
</html>
If you want to show the #load div until window is fully loaded, then you can use this following code. Also you placed jQuery library file wrong.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body{background-image: url(http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg);}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(window).load(function() {
$('#load').hide();
});
</script>
</head>
<body>
<div id='load'>loading......</div>
</body>
</html>
Can I give dynamic paths for images and css through jquery/javascript/html or any other technology available in client side? Below is my dummy code:
<html>
my_constant_path = "/yes/I/got/this/"
<head>
<link rel="stylesheet" href="<my_constant_path>" + "style.css"/>
</head>
<body>
<div>
<img src= "<my_constant_path>" + "abc.png"/>
</div>
</body>
</html>
I cannot use server side script.
If you are going to apply the my_constant_path to all the images/links
You could use <base> element at the head section and change its href attribute via JavaScript as follows:
<head>
<meta charset="utf-8">
<title>title</title>
<base href="">
<script>
function setBaseURL(url) {
document.getElementsByTagName("base")[0].href = url;
}
setBaseURL("http://placehold.it/");
</script>
</head>
Then enter all the href/src attributes of the elements relatively:
<img src="200x150" alt="">
WORKING DEMO.
The standard front-end scripting language is JavaScript. To embed it directly in HTML, you would need to write the script inside <script> elements. For you my_constant_path declaration:
<script>
var my_constant_path = "/yes/I/got/this/";
</script>
You can execute script and write to the document during the document's execution using document.write(), but you can't insert script elements (or any other kind of element) inside tags, so it's not possible to dynamically insert my_constant_path inside the href and src attributes: instead you need to either write the entire tags:
<head>
<script>
document.write( '<link rel="stylesheet" href="' + my_constant_path + '"style.css"/>' );
</script>
</head>
…or wait til the tags have been rendered and then change their attributes afterwards:
<head>
<link id="dynamicLink" rel="stylesheet" />
<script>
document.getElementById( 'dynamicLink' ).setAttribute( 'href', my_constant_path + 'style.css' );
</script>
</head>
For "purely client side", using JavaScript is the only way.
<head>
<link id="stylesheet1" rel="stylesheet" type="text/css" />
<script>
var my_constant_path = "assets/";
$(function(){
$("#stylesheet1").attr("href", my_constant_path + "style.css");
$("#image1").attr("src", my_constant_path + "abc.png");
});
</script>
</head>
<body>
<img id="image1"/>
</body>
I am trying to access content inside a html file that I loaded into a div using jquery.load.
My index page looks like this:
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
</div>
</body>
</html>
My script so far looks like this:
$(document).ready(function() {
$("#content").load("content.html");
$("#content").click(function(){
alert($(this).attr("id"));
});
});
The content.html page:
<!DOCTYPE html>
<html >
<head>
<title></title>
</head>
<body>
<h1 id="header1">
Content
</h1>
<p>
This is a paragraph
</p>
<p>
This is another paragraph
</p>
</body>
</html>
So what I want to happen is:
When I click on the tag in the content div it should display that tag's id - namely "header1", but currently its just displaying "content". How can I achieve this?
Thank you in advance
Bind the event handler to every element in content.
$(document).ready(function() {
$("#content").load("content.html");
$("#content, #content *").click(function(e){
alert(this.id);
e.stopPropagation();
});
});
Or let the events propogate:
$(document).ready(function() {
$("#content").load("content.html");
$("#content").click(function(e){
alert(e.target.id); //may return undefined if no id is assigned.
});
});
Working Example: http://jsfiddle.net/5JmsP/