I need to write a pure JavaScript function (setPopOver) as a coding exercise for my college course that receives a title and content and generates popover when hovering over any HTML element. I've worked with JS with Angular before, but no pure JS, so I'm kinda stuck.
The API for using this should be:
$(SOME_HTML_ELEMENT).setPopOver(title, content);
How am I suppose to "inject" a new function to a DOM node to use ?
Any help is appreciated.
If you are using jquery, you can add custom function to jquery object
$.fn.setPopOver = function(title, content) {
$(this).hover(
function(){
// add popup element here
},
function() {
// remove popup element here
}
)
}
Related
So I've been trying to do the following bit of code without jQuery:
$(".parent-class").contents().find(".child-class").css("color", "red");
I'm trying to edit the styles of an embedded Twitter feed and I could only do that by getting the module's child nodes using this snippet: $(".twitter-timeline").find(".timeline-Tweet-text").css("margin-bottom", "-10px"); for whatever reason. It is necessary that the pure JS code mimics this functionality.
My full js function is:
// Change the style of the tweets after the module loads.
window.addEventListener('load', function () {
$(".twitter-timeline").contents().find(".timeline-Tweet-text").css("margin-bottom", "-10px");
});
Thanks for taking the time to read.
You can try the following way:
document.querySelectorAll(".twitter-timeline .timeline-Tweet-text").forEach(function(el){
el.style.marginBottom = "-10px";
});
This is the jquery code below:
$('div').on('click', function() {
$(this).toggleClass('show-description');
});
I want to convert it to JavaScript because I get this error message:
"$ is undefined "
when I put the jquery code in the JavaScript section of codepen.io.
Is there a reason the jquery code is producing an error? How can I fix this?
If it is not possible to fix, how can I convert the Jquery code to JavaScript?
I'm trying to use toggleClass on all the divs when the div is clicked.
Here is a link to the codepen for reference: https://codepen.io/sophiesucode/pen/jOExXKw
Option 1: Use should push the jquery lib above </body>, Here is your demo
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Option 2: Use pure javascript like below
document.querySelector('div').onclick = function(){
this.classList.toggle("show-description");
};
$('div').on('click', function() {
$(this).toggleClass('show-description');
});
Can be represented by vanilla javascript as:
var divs = document.querySelectorAll('div'); //Get a list of all div elements
for (const div of divs){ //Loops through every div element
div.onclick = function(e) { //Adds the on click function to each
e.currentTarget.classList.toggle('show-description'); //Defines the function as toggling a class on the element of the click function
}
}
Jquery code actually is javascript. Jquery is a library built for javascript. To solve the error "$ is undefined" you would have to add jquery to your webpage, or import it in your script.
There is this wonderful article on W3 Schools which teaches multiple ways to add jquery to your webpages.
Your code doesn't work because you linked your script path as a relative path.
Change this
<script src="/assets/jquery.js"></script>
into this
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
another way is to link the jquery file using the settings menu in codepen.
Settings > Javascript > then search jquery in the CDNsearch bar
I'm working to use custom checkbox styles with a checkbox which is dynamically generated by javascript for the Google Identity Toolkit. For example, we add this div:
<div id="gitkitWidgetDiv"></div>
And the Google Identity Toolkit script generates new html for that div.
I need to add a class to the HTML which is added by the javascript without any action by the user and I'm struggling to make it work. For example, here is my code:
$("#gitkitWidgetDiv").on('ready', ".gitkit-sign-in-options label", function() {
$(this).addClass('checkbox');
});
I've tried switching 'ready' for a few other options and also using the livequery plugin, but nothing is working for me. It works if I use an active event like 'click,' but I can't figure out how to do this when the page loads. Could someone please help? Thanks!
Modern browsers (including IE11) support mutation obervers. You can use one to monitor the parent node of the div that will be added. When the div has been added, just add the class.
Here's something I made which comes in handy in annoying cases like this where it's difficult to tell when the element you need has finished loading in: https://gist.github.com/DanWebb/8b688b31492632b38aea
so after including the function it'd be something like:
var interval = 500,
stopTime = 5000,
loaded = false;
setIntervalTimeout(function() {
if($('.dynanicElementClass').length && !loaded) {
$('.dynanicElementClass').addClass('checkbox');
loaded = true;
}
}, interval, stopTime);
It's not perfect and I'm sure there are better solutions out there but in most cases like this it does the job.
I'm using the $.get() function to extract some data from my site. Everything works great however on one of the pages the information I need to extract is dynamically created and then inserted into a <div> tag.
So in the <script> tag, a function is run and then the data is inserted into <div id="infoContainer"></div>. I need to get the information from #infoContainer, however when I try to do so in the $.get() function, it just says it's empty. I have figured out that it is because the <script> tag is not being run. Is there another way to do this?
Edit:I am making a PhoneGap application for my site using jQuery to move content around so it's more streamlined for mobiles.
This is the code on my page:
$(document).ready(function () {
var embedTag = document.createElement("embed");
var infoContainer = document.getElementById("infoContainer");
if (infoContainer != null) {
embedTag.setAttribute("height", "139");
embedTag.setAttribute("width", "356");...other attributes
infoContainer.appendChild(embedTag);
});
});
As you can see, it puts content into the #infoContainer tag. However, when I try to extract info from that tag through the get function it shows it as empty.I have done the same to extract headings and it works great. All I can gather is the script tag is not firing.
This should provide you the contents of the element:
$('#infoContainer').html();
Maybe your script is executing before the DOM is loaded.
So if you are manipulating DOM elements you should wait till DOM is loaded to manipulate it. Alternately you can place your script tag at the end of your HTML document.
// These three are equivalent, choose one:
document.addEventListener('DOMContentLoaded', initializeOrWhatever);
$( initializeOrWhatever );
$.ready( initializeOrWhatever );
function initializeOrWhatever(){
// By the time this is called, the DOM is loaded and you can read/write to it
$.getJSON('/foo/', { myData: $('#myInput').val() }, onResponse);
function onResponse(res){
$(document).html('<h1>Hello '+res+'</h1>');
};
};
Otherwise... post more specifics and code
You have no ID to reference. Try setting one before you append
embedTag.setAttribute("id", "uniqueID");
It looks like you are wanting to use jQuery, but your example code has vanilla JavaScript. Your entire function can be simplified using the following jQuery (jsFiddle):
(function () {
var embedTag = $(document.createElement("embed"));
var infoContainer = $("#infoContainer");
if (infoContainer.length) {
embedTag.attr({"height": 139, "width": 356});
infoContainer.append(embedTag);
}
console.log(infoContainer.html()); // This gets you the contents of #infoContainer
})();
jQuery's .get() method is for sending GET requests to a server-side script. I don't think it does what you are wanting to do.
This function call ResizeableTextbox('myRT'); works well inside javascript(produces a resizeable text box) but doesn't work inside jQuery code.Why?
This produces the resizeable textbox.
<script type="text/javascript">
ResizeableTextbox('myRT');
</script>
But if I give it like this in the jquery code,I dont get the resizeable textbox.
$(".select").change(function () {
$(".select"+increment+" option:selected").each(function ()
{
if($(this).text() =='String')
{
$("<label id=labelid >"+label+"</label>").appendTo(".menu li");
ResizeableTextbox('myRT');//this does not work.How else to code?
}
});
});
Is there any method for function call in jQuery?
Update:
The function call ResizeableTextbox('myRT'); doesn't work anywhere within the jQuery code. It works only inside <script>.
How else to write this function call? some one help me please..
You want to append the resizable textbox to .menu li?
You could do this:
var rt = new ResizeableTextbox('myRT'); //this is for making resizeable text box
$('.menu li').append(rt);
However Im not quite sure if this is what you wan't. Your question is rather vague.
It depends greatly on exactly what 'rt' will contain and how it is then added to the DOM.
If it just contains HTML then obviously $(parentSelector).html(rt) would solve the problem.
If it returns a DOM element then $(rt).appendTo(parentSelector);
If it something else, or is added to the DOM inside your ResizeableTextbox code then I couldn't possibly guess.
Update: If you are using the resizable textbox detailed here: http://www.switchonthecode.com/tutorials/javascript-controls-resizeable-textbox then you would use the following code:
$(document).ready(function() {
var rt = new ResizeableTextbox();
$('#resizable').append(rt.GetContainer());
rt.StartListening();
});