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.
Related
Problem:I am assigning a div to the content property of a kendo tooltip... problem is, when I attached the tooltip... the div is sitting there, and the tooltip does not REALLY wire up until I hover over the element I attached it to... you can see in my code below how this is not working... paste into a kendo dojo, and seee.... just click the button (DO NOT HOVER over the text box yet).. then you will see the div show up, and when you hover over the text box, it will do what it's supposed to do... I made a workaround , which is commented out... but it flashes for a second... is there a way to just make the tooltip wire up and hide the content div?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.223/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.223/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
</head>
<body>
<div id="view" data-bind="enabled: isNameEnabled">
<button id="button1" data-bind="click: updateTooltip">Change Tooltip</button>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<input id="text1" type="text" data-bind="value: name" />
<div id="toolTipDiv"></div>
</div>
<script>
var viewModel = kendo.observable({
isNameEnabled: false,
name: "John Doe",
updateTooltip: function () {
var kendoToolTip = window.toolTipEl.data("kendoTooltip");
// comment this out to see
//div1.hide();
//kendoToolTip.show();
//kendoToolTip.hide();
//div1.show();
//end comment
div1.text(text1.value);
}
});
var div1 = $("#toolTipDiv");
window.toolTipEl = $("#text1");
kendo.bind($("#view"), viewModel);
window.toolTipEl.kendoTooltip({
content: div1, position: "top",autohide:true
});
</script></body>
</html>
The div shows up because it is visible and you just made its contents non-blank. Once the tooltip is shown once, kendo takes over control and wraps it in another div that it hides and shows as necessary.
Note that "aria-hidden: true" does not actually hide the div...it is simply a directive to screen-readers...you still have to actually use real CSS to hide the div.
You need to ensure that the div is hidden initially(before kendo wraps it) and remove the display: none; once you "hand it off" to kendo.
Or...hide the div and set the content to a function that just returns the content of the div instead of binding to the div itself, i.e.
<div id="toolTipDiv" aria-hidden="true" style="display: none"></div>
...
updateTooltip: function () {
div1.text(text1.value);
}
...
window.toolTipEl.kendoTooltip({
content: function(e) {
return div1.text();
},
Example: http://dojo.telerik.com/#Stephen/iqaLA
Update
Turns out that the content only gets called the first time the tip is shown for the element, not every time the tooltip is shown, so dynamic changes to the contents (or even the input's title attribute) don't change the tooltip.
So, ignore my answer and try this: http://www.telerik.com/forums/dynamic-content-de3951ae5752
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>
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
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function show1() {
document.getElementById("img1").display = 'block';
}
function hide1() {
document.getElementById("img1").display = 'none';
}
</script>
</head>
<body>
<span onMouseOver="show1()" onMouseOut="hide1()">Corporate Team Outing - LNT</span>
<div id="img1" style="display:none">
<img src="" alt="image 1" />
<img src="" alt="image 2" />
</div>
</body>
</html>
i want that when u put mouse on text it show image in div i m trying to do it but it not working.
Forget javascript for this one! CSS is the answer. Put a hover state on ID:img1 and the images inside the div (if u don't do the latter, mousing over the images will cancel out the div mouse over. So it will look like this (not inline styles due to mouse over states declaration):
#img1 {
Background-image: none;
}
#img1:hover, img1:hover img {
Background-image: url(your URL);
}
You could change the IDs to classes, so the CSS can be reused and keep the IDs for coding (javascript etc)
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>