How to add the jquery.appear-Plugin to this canvas-element (id="pic")? The script itself is already included into the html-page, but how to make the canvas-image only visible, if the element is on the screen?
<canvas id="pic"></canvas>
<script type="text/javascript">
var picData6 = whatever1
var options = whatever2
var ct6 = document.getElementById("pic").getContext("2d");
ct6.canvas.width = document.getElementById("pic").offsetWidth-4;
ct6.canvas.height = document.getElementById("pic").offsetHeight;
var Chart6 = new Chart(ct6).Line(picData6,options);
</script>
It seems the .appear() has to be add somewhere. But where?
Thank you very much!
jQuery.appear simply gives you custom appear and disappear events for elements which you have registered.
To add it to your canvas, you would do something like:
// register the element with the plugin
$('#pic').appear();
// do this when it appears
$('#pic').on('appear', function(ev, elements) {
// elements is an array of elements which are now visible on the page
});
Related
I have a wordpress site and theme that is providing me an ability to change elements in menu widget on all pages it appears only.
So, what I want to do is to change links and names of menu elements locally on one page. I have an id's for menu li elements, 'menu-item-7062' for example and a href tag inside it with already defined link and text values.
I have already tried and injected this code snippets in after all post content:
<script type='text/javascript'> document.getElementById('menu-item-7062').href = 'new link'; </script>
I have also created a function that is triggers after onclick event:
<script type="text/javascript">
document.getElementById("menu-item-7062").onclick = function() {
document.getElementById("menu-item-7062").href="my new link";
};
</script>
Unfortunately, they didn't affect my old link. Returning to my question, what are other solutions I could try in order to change both a href link and text value? What possible mistakes I have made?
UPDATED:
Here is my anchor tag
Автоматизация технологических процессов
A tag located under the <li id="menu-item-7062">, there is my mistake.
Did you try setAttribute function
document.getElementById("menu-item-7062").setAttribute("href", "my new link");
I have successfully affected a tag by query selector:
<script type="text/javascript">
var tag = document.querySelector('a[href="https://test.etm.io/ru/services/automation/"]');
if(tag){
tag.innerHTML = "new";
}
</script>
you should try this..
var a = document.getElementsByTagName("a");
a[0].href = "www.abc.com/";
if you doesn't know index of a then you should get id of a and then set link.
This will help you to check and set href for tag "a" without "id":
const parent = document.getElementById("menu-item-7062");
if(parent.firstElementChild.localName === 'a') {
const child = parent.firstElementChild;
child.href = 'my new link';
}
OR
const parent = document.getElementById("menu-item-7062");
parent.firstElementChild?.href = 'my new link';
I use InnovaEditor to create edit block.
I try to find way in order to set dynamic height of edit block.
Ie block height should correspond block content.
HTML:
<iframe id="idContenteditor_field_1" name="idContenteditor_field_1" style="width:100%;height:100%;border:none;">
<html>
<head></head>
<body>12345</body>
</html>
</iframe>
What I did:
1) set keyup event in iframe body
2) wrap to content to get real height
3) set calculated height to the iframe
Javascript:
var $iframe = $("iframe#idContenteditor_field_1");
var $iframeBody = $iframe.contents().find("body");
$iframeBody.keyup(function(e) {
if ($(this).find('.content').length === 0) {
// add wrap
var bodyContent = $(this).html();
$(this).html('<div class="content">' + bodyContent + '</div>');
}
var $contentBlock = $(this).find('.content');
var bodyHeight = $contentBlock.outerHeight();
$('#idContenteditor_field_1').height(bodyHeight); // set real height
});
It works fine.
The issue:
I have 10 edit blocks on the page and they are same except id.
But I have problems when I try to apply this code to all iframes.
// return all iframes
var $iframes = $('iframe[id^="idContenteditor_field_"]');
// return only single body of first iframe.
var $iframesBody = $iframes .contents().find("body");
So I can't set keyup event for all iframes.
Could you help me?
Maybe there is easier way to set dynamic height?
var $iframesBody = $iframes .contents().find("body");
^^^ it returns only single body of first iframe, because rest iframes have not yet been loaded fully.
So I just execute this script after load of all iframes.
And it works.
I haven't tested this code, but something like below should work.
You just need to iterate through your objects and set the event listener for each one in turn.
var $iframes = $('iframe[id^="idContenteditor_field_"]');
$iframes.each(function(index, item) {
var $iframeBody = $(item).contents().find("body");
$iframeBody.keyup(function(e) {
if ($(this).find('.content').length === 0) {
// add wrap
var bodyContent = $(this).html();
$(this).html('<div class="content">' + bodyContent + '</div>');
}
var $contentBlock = $(this).find('.content');
var bodyHeight = $contentBlock.outerHeight();
$(item).height(bodyHeight); // set real height
});
});
I'm using jscript to load a string in to several elements of an array, then display the useful element in html.
There's a pulldown menu that causes the string to change. So, I need the function to be re-run when that happens.
I have been able to successfully display the element using window.onload
and, I have been able to successfully display the element AFTER the pulldown menu has been changed.
But, I can't seem to display the element with window.onload and subsequently after item.onchage
If anyone has any suggestions, I'd be grateful.
Here is the code that works for window.onload
window.onload = function() {
var selectedOptionId = jQuery('select').val();
var optionPartNumber = jQuery('input[name="OptID_' + selectedOptionId + '"]').val();
//loads the string in to an array and returns the 2nd element
var optionPartNumber = optionPartNumber.split(".")[1];
document.getElementById("MASNUM").innerHTML=optionPartNumber;
}
Here is the code that works for pulldown.onchange
jQuery(function(){
jQuery('.dropdownimage-format select').on('change', function(){
var selectedOptionId = jQuery('select').val();
var optionPartNumber = jQuery('input[name="OptID_' + selectedOptionId + '"]').val();
var optionPartNumber = optionPartNumber.split(".")[1];
document.getElementById("MASNUM").innerHTML=optionPartNumber;
});
In both cases, the element is displayed in html by
<a id="MASNUM">
i am trying to append to a div with an ID that is dynamic
<script>
var GameId = "{{$match['gameId']}}";
var Ts = '{{$match['createDate']}}';
var TsInt = parseInt(Ts);
var timeSinceGame = moment(TsInt).fromNow();
$('#'+GameId).append(timeSinceGame );
</script>
the script is run inside of a php foreach loop.
the div ID is set the same as GameID variable
however nothing is appended to anything when run what's wrong here?
None of your jQuery is wrapped in DOM ready events, so the elements are likely not in the DOM yet when the code runs.
Try adding a DOM ready wrapper:
<script>
$(function(){
var GameId = "{{$match['gameId']}}";
var Ts = '{{$match['createDate']}}';
var TsInt = parseInt(Ts);
var timeSinceGame = moment(TsInt).fromNow();
$('#'+GameId).append(timeSinceGame );
});
</script>
$(function(){ is just a handy shortcut for $(document).ready(function(){
The alternative is to simply inject your code after the elements in the page, so that they do already exist.
I am trying to get the width property from one element and assign to another.
Here's my code (that does not work):
window.onload=function() {
var morphWidth = document.getElementById('morph').width();
var scrollbar = document.getElementById('scrollbar');
scrollbar.style.width = morphWidth + "px";
}
You can get the element width:
document.getElementById("morp").style.width;
and you can set the element width:
document.getElementById("morph").style.width="300px";
Okay, so I tried this and that and finally found a solution:
$(function() {
var morphWidth = $('#morph').width();
var scrollbar = $('#scrollbar');
$('#scrollbar').css('width', morphWidth + 'px');
});
However, I don't have a clue why this works now. Let me know if you do!
If you use jQuery, then you can code like this:
var morphWidth = $('#morph').width();
If you use original Javascript, the you can code like this:
var morphWidth = document.getElementById('morph').offsetWidth;
jQuery object is different from DOM (Document Object Model).
The var scrollbar as same as.