I want to replace the gif file by javascript. I find the method below. Is there any way i can place the javascript tag before the img tag?
<img class="myImg" src="compman.gif" width="107" height="98">
<script>
document.getElementsByClassName("myImg")[0].src = "hackanm.gif";
</script>
A page can't be manipulated safely until the document is "ready." Using jquery's $(document).ready(), it Will wait until the page is loaded and ready to be manipulated before executing (no matter where it is on the page). Example:
<script>
$(document).ready(function() {
document.getElementsByClassName("myImg")[0].src = "hackanm.gif";
});
</script>
<img class="myImg" src="compman.gif" width="107" height="98">
You could also then leverage selectors inside jquery (e.g. $(".class") where class is your class, or $("#id") where id is the id) and change the code to:
<script>
$(document).ready(function() {
$(".myImg").attr('src',"hackanm.gif");
});
</script>
<img class="myImg" src="compman.gif" width="107" height="98">
And further you could even store it in a variable if you wanted to change it later on in javascript as well!
<script>
$(document).ready(function() {
var myImg = $(".myImg");
var newImg = "hackanm.gif";
myImg.attr('src', newImg);
});
</script>
<img class="myImg" src="compman.gif" width="107" height="98">
Hope this helps you learn a few new tricks inside javascript! Happy coding!
More Info
I believe OP's main concern was flash of the old image before it is replaced by JavaScript. I suggest you add a line of CSS to make your image element visibly hidden then do the swap + unhide with JavaScript.
<style>
.myImg {visibility: hidden;}
</style>
<img class="myImg" src="compman.gif" width="107" height="98">
<script>
var imgReplace = document.getElementsByClassName("myImg")[0];
imgReplace.src = "hackanm.gif";
imgReplace.style.visibility = "visible";
</script>
<div class="album_pic">
<img src="/Images/logo.jpg" id="track_art" alt="cover image" /> </div>
let DIV = document.createElement('div');
DIV.classList.add('album_pic');
DIV.innerHTML = `<img src="${PlayList[songIndex].album_pic}" class="track_art" alt="cover image">`;
let Cover_image = document.querySelector('.album_pic');
Cover_image.replaceWith(DIV);
In place of "PlayList[songIndex].album_pic" , add your own path.
This is my research and I don't copied from anyone. Also this is all based on what I learned in javascript
Related
I have a div tag in my webpage
<div id="editor1" name="editor1" contenteditable="true">
{!! $post->post !!}
</div>
When I click on the content of this div, a CKEditor Toolbar appears automatically. I tried to disable this Toolbar. I tried the following but could not be able to.
Try 1 :
<script>
$(document).ready(function() {
CKEDITOR.disableAutoInline = true;
});
</script>
Try 2: In the CKEditor config file
config.disableAutoInline = true;
What is my wrong? I am searching at Google, Stakeoverflow for several hours but not finding any solution. May I be helped by anybody?
Note that:
In the Page Header I added
<link rel="stylesheet" href="http://localhost/ewt/resources\assets
\ckeditor\plugins\codesnippet\lib\highlight\styles\magula.css">
and in the Footer I added
<script src="http://localhost/ewt/resources/assets/ckeditor/ckeditor.js"> </script>
<script src="http://localhost/ewt/resources/assets/ckeditor/adapters
/jquery.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
I had the same problem, for me it started working when I set the disableAutoInline outside of document.ready:
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
$(document).ready(function () {
...
}
</script>
The following code should output 'hello' in the console, when I mark either the text "Canvas" or the image "testimage.png" and drag and drop it on the canvas.
But it doesn't work.
When I add the eventListener to a textarea, it does work. But it really should be on the canvas. :/
I do not assume it is not possible.
How to do it?
(The html file is on my domain, and the image file is on the same domain in the same directory.)
<html><head>
<script type="application/javascript">
function someInits() {
document.getElementById('canvas').addEventListener("drop", function( event ) {
console.log('hello'); //event.target.id
//event.target.style.opacity = "";
}, false);
}
</script>
</head>
<body onload="someInits();">
<hr>Canvas: <br>
<canvas id="canvas" width="300" height="300"></canvas>
<hr>
<img src="http://example.com/testimage.png">
</body>
</html>
In firefox, you need to block the default behavior of the dragover event in order to tell the browser you're handling it.
More info on how to handle drag events
function someInits() {
// block the default dragover
document.getElementById('canvas').addEventListener("dragover", function(event) {
event.preventDefault();
}, false);
//handle the drop
document.getElementById('canvas').addEventListener("drop", function(event) {
event.preventDefault();
this.style.backgroundColor = 'pink';
console.log('hello');
}, false);
}
someInits();
canvas{border: 1px solid;}
<hr>Canvas:<br>
<canvas id="canvas" width="300" height="100"></canvas>
<hr>
<img id="img" src="http://lorempixel.com/200/200" draggable="true" />
for quick reference I have attached the image of what I want.
I would like to update (change the content) without updating the whole page (without refreshing the page). Clicking on the links or buttons on the whitebox should fetch the data from the database and that is to be displayed in the redbox. Of course first thing you would write as an answer will be "Ajax!!!", but as I'm new to laravel framework, I want to know what is the best way to achieve this, should I write the javascript directly in the view or in the controller, and how to do it through controller? If you need any more info please let me know.
Revised question, is there any other better way other then the ones answered
First we need to set up some routes. You can also do this with controllers.
Route::get('home', function()
{
return View::make('home');
});
Route::get('someRoute', function()
{
return View::make('someView');
});
For the home view, I'd add a scripts section:
//home.php
<html>
<head>
<script>
$('a.ajax').click(function(e){
e.preventDefault();
var pageURL = $(this).attr('href');
$('#ajaxContent').load(pageURL);
});
</script>
</head>
<body>
<div class="wrapper">
Click Here
<div id="ajaxContent"></div>
</div>
</body>
</html>
In case you're using blade templating, here's an implementation
//main.blade.php
<html>
<head>
#yield('styles')
</head>
<body>
<div class="wrapper">
#yield('content')
</div>
#section('scripts')
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
#show
</body>
</html>
//home.blade.php
#extends('main')
#section('content')
Click Here
<div id="ajaxContent"></div>
#stop
#section('scripts')
#parent
$('a.ajax').click(function(e){
e.preventDefault();
var pageURL = $(this).attr('href');
$('#ajaxContent').load(pageURL);
});
#stop
it would be better for you if you use jQuery to do this update using ajax functionality.
and a simple code can be like this
$('a.ajax').click(function(e){
e.preventDefault();
var pageURL = $(this).attr('href');
$('#divID-to-be-updated').load(pageURL);
});
more about ajax functionality inside jQuery can be read from http://jqapi.com/#p=load
If I surround an img tag with a span and put the mouseover in the span it works. If I don't have the span and just put the mouseover in the img, it doesn't (see single line of html in body).
Can I not append a child directly to an image?
<html>
<script type="text/javascript">
function showMsg(obj) {
var spn;
spn = document.createElement('span');
spn.innerHTML = "test message";
obj.appendChild(spn);
obj.onmouseout = function() {obj.removeChild(spn)};
}
</script>
<body>
<img onmouseover="showMsg(this)" src="http://www.w3schools.com/jsref/smiley.gif">
<!--
<span onmouseover="showMsg(this)"><img src="http://www.w3schools.com/jsref/smiley.gif"></span>
-->
</body>
</html>
No, an <img> is a void element.
What you could do, however, is use a transparent div that covers the imageand append it to that.
I want a button to add an image to the current page on each click. For example, the first time you open the page, there is one picture. Then you click the button and the same picture appears on the page and now you have two same pictures. Then you keep on pressing on the button and more and more same pictures appear. This is the code I tried that didn't work:
<script type="text/javascript">
function addimage() {<img src="http://bricksplayground.webs.com/brick.PNG" height="50" width="100">}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
</html>
Please help! Thanks.
You should probably know that javascript can create html elements, but you cannot directly embed html inside javascript (they are two completely separate things with different grammars and keywords). So it's not valid to have a function that only contains html -- you need to create the elements you want, and then append them to the dom elements that you want them to. In this case, you create a new image and then append it to the body.
<html>
<body>
<script type="text/javascript">
function addimage() {
var img = document.createElement("img");
img.src = "http://bricksplayground.webs.com/brick.PNG";
img.height = 50;
img.width = 100;
//optionally set a css class on the image
var class_name = "foo";
img.setAttribute("class", class_name);
document.body.appendChild(img);
}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
</html>
All you're missing is a method to write the element on the page
<script type="text/javascript">
function addimage() {
document.write('<img src="http://bricksplayground.webs.com/brick.PNG" height="50" width="100">')
}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>