How do I call this function in other parts of my code? - javascript

Pardon me if this is a very silly question. I'm brand new to JS and I was wondering how I can use this function in other parts of my code. I looked at tutorials and other websites, but the way they define functions seems to be different than what I have here. Could anyone please nudge me in the right direction?
$('.message_div').each(function message_function()
{
console.log("One liner");
var th = $(this);
var ih = $(this).outerHeight(); // outer height
var oh = $(this).find('.message').outerHeight();
console.log("Oh", oh);
var txt = $(this).find('.message').html();
console.log("Ih", ih);
if (oh > ih)
{
th.html('');
th.html('<marquee class="message" direction="up" scrollamount="1" scrolldelay="0">' + txt + '</marquee>')
}
});
//message_function(); -----> Is this the right way?

There are several intricacies here with regards to what jQuery does. The simple way of referencing this function later on would be to store it in a variable:
function message_function()
{
console.log("One liner");
var th = $(this);
//... (rest of function omitted for brevity)
}
$('.message_div').each(message_function);//note that the function handle is used here,
//and not the result of the function which would
//have used the () to call it
///and then later on
message_function();
However, the problem here is with this. jQuery will bind this behind the scenes (which means it works fine in each), however in order to properly call the message function separately, you would need to have an element ready to bind. For example,
var element = document.querySelector("div");
message_function.call(element);
alternatively:
var element = document.querySelector("div");
var elementMessage = message_function.bind(element);
elementMessage();
Here is a broader explanation of what this is, and how jQuery interacts with it: https://stackoverflow.com/a/28443915/1026459

Inside the same file :
Move that code inside a function
Call the function
Outside of that file :
Move the function (you just created) to a .js file
Include the .js file in the desired document
Make sure the DOM elements properties match what's in the script

Related

Including a javascript function in a custom joomla module

I have a working codepen that uses some javascript
https://codepen.io/cbold/pen/jOWONKO
I am struggling to understand the correct method/syntax for including the javascript function with my custom Joomla module.
I have read the official documentation but it does not make it any clearer for me
https://docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
I have also looked at several other similar questions posted on Stackoverflow, but I do not understand any of the examples/answers enough to apply them to my module.
I have tried to include the function as a separate file, and invoke it with my mod_mymodule.php :
$document = JFactory::getDocument();
$document->addScript(JURI::root(true)."modules/mod_mymodule/js/ mod_mymodule.js");
This is the javascript in mod_mymodule.js:
function clickHandler(target) {
// Get the element that should be selected
const elem = document.querySelector(target);
// There were no elements to be selected
if (!elem) return;
// Get the old selected element (if any)
const prevElem = document.querySelector('.selected');
if (prevElem) {
// If there was a previously selected element, it isn't anymore
prevElem.classList.remove('selected');
}
// Make the new element selected
elem.classList.add('selected');
}
The function does not occur.
I have tried both document.querySelector(target); and document.querySelector('#target');
I have also tried including the function at the end of my module’s default.php
<script type="application/javascript">
function clickHandler(target) {
// Get the element that should be selected
const elem = document.querySelector(target);
// There were no elements to be selected
if (!elem) return;
// Get the old selected element (if any)
const prevElem = document.querySelector('.selected');
if (prevElem) {
// If there was a previously selected element, it isn't anymore
prevElem.classList.remove('selected');
}
// Make the new element selected
elem.classList.add('selected');
}
</script>
But no luck.
Again I have tried both document.querySelector(target); and document.querySelector('#target');
I am pretty certain my <script> is wrong, but I don’t know enough about javascript – specifically the proper syntax required by Joomla – in order to make it work directly from my module.php.
Any help is greatly appreciated.
This ended up working for my needs, a short script in the module's default.php
<script>
jQuery('.target').click(function(){
var id = jQuery(this).attr('id');
jQuery('body').find('.selected').removeClass('selected');
jQuery('#target'+id).addClass('selected');
});
</script>

Javascript/Jquery Load Callback and Writing a Base Function

This might be a possible duplicate question but I do not know how to phrase the search for it. I'm not that familiar with JS properties.
CASE:
Lets say I create some element types such as Text,Image,Audio,Video etc. and suppose I give them the same abilities such as drag, rotate, resize etc. For simplicity, lets consider this two elements: Text and Image.
PROBLEM:
Lets say I need to get the sizes of those two elements and set those to their wrapper div.
Text element is simple, i can just get the size immediately and set the size of wrapper div.
Image element waits for the load of the image and its size can be set only after the load happens i.e. in its load callback.
SIMPLE EXAMPLE
function createText(){
var aDiv = createWrapperDiv(); // <div class="element"></div>
var anElem = $('<textarea></textarea>')
aDiv.append(anElem)
// can set immediately
aDiv.attr('width', anElem.width());
aDiv.attr('height', anElem.height());
// Some other size-DEPENDENT and size-INDEPENDENT stuff can both be done here.
sizeDependentStuff();
sizeIndependentStuff();
}
function createImage(){
var aDiv = createWrapperDiv(); // <div class="element"></div>
var anElem = $('<img>')
aDiv.append(anElem)
// need to wait for element to load.
anElem.attr('src',imageUrl)
anElem.load(function(e) {
aDiv.attr('width', e.currentTarget.width());
aDiv.attr('height', e.currentTarget.height());
// Some other size-DEPENDENT stuff.
sizeDependentStuff();
});
// Some other size-INDEPENDENT stuff.
sizeIndependentStuff();
}
WHAT I WANT:
I want to define a createSimpleElement function ( something similar to a Factory) that takes type and does both sizeDependentStuff and sizeIndependentStuff so I can reuse the same code. Note that i have more than 2 types and number can increase. I can not find a suitable way to tackle the load process.
I hope it is clear and please consider that I am still in the learning process.
Thanks.
What about something like this?
function base(parentElement, element){
parentElement.append(element);
parentElement.attr('width', element.width());
parentElement.attr('width', element.width());
/*other common properties...*/
}
function createText(){
var aDiv = createWrapperDiv();
var anElem = $('<textarea></textarea>')
base(aDiv, anElem);
}
function createImage(){
var aDiv = createWrapperDiv();
var anElem = $('<img>')
anElem.attr('src',imageUrl)
anElem.load(function(e) {
base(aDiv, anElem);
});
// Some other size-INDEPENDENT stuff.
}
}

How to make variable accessible within jQuery .each() function?

This is and example of a frequent dilemma: how to make markup accessible inide this .each()?
I'm more interested in learning how to access outer variables from within a closure than I am in this specific issue. I could fix this problem by assigning markup from inside the each function, but I'd rather learn a more elegant way to handle this kind of problem.
// hide form & display markup
function assessmentResults(){
// get assessment responses
var markup = parseForm();
// show assessment results to user
$('#cps-assess-form fieldset').each( function() {
var q = $(this).find('.fieldset-wrapper');
var i = 0;
// hide form questions
q.slideUp();
// insert markup
$('<div>'+markup[i]+'</div>').insertAfter(q);
i++;
});
}
Read the docs, it already has an index!
.each( function(index, Element) )
No need for i
$('#cps-assess-form fieldset').each( function(index) {
var q = $(this).find('.fieldset-wrapper').slideUp();
$('<div/>').html(markup[index]).insertAfter(q);
});
The reason why yours is failing is the i is inside of the function so it is reset every iteration. You would need to move it outside of the function for it to work.

onClick replace /segment/ of img src path with one of number of values

No idea what I'm doing or why it isn't working. Clearly not using the right method and probably won't use the right language to explain the problem..
Photogallery... Trying to have a single html page... it has links to images... buttons on the page 'aim to' modify the path to the images by finding the name currently in the path and replacing it with the name of the gallery corresponding to the button the user clicked on...
example:
GALLERY2go : function(e) {
if(GalleryID!="landscapes")
{
var find = ''+ findGalleryID()+'';
var repl = "landscapes";
var page = document.body.innerHTML;
while (page.indexOf(find) >= 0) {
var i = page.indexOf(find);
var j = find.length;
page = page.substr(0,i) + repl + page.substr(i+j);
document.body.innerHTML = page;
var GalleryID = "landscapes";
}
}
},
There's a function higher up the page to get var find to take the value of var GalleryID:
var GalleryID = "portfolio";
function findGalleryID() {
return GalleryID
}
Clearly the first varGalleryID is global (t'was there to set a default value should I have been able to find a way of referring to it onLoad) and the one inside the function is cleared at the end of the function (I've read that much). But I don't know what any of this means.
The code, given its frailties or otherwise ridiculousness, actually does change all of the image links (and absolutely everything else called "portfolio") in the html page - hence "portfolio" becomes "landscapes"... the path to the images changes and they all update... As a JavaScript beginner I was pretty chuffed to see it worked. But you can't click on another gallery button because it's stuck in a loop of some sort. In fact, after you click the button you can't click on anything else and all of the rest of the JavaScript functionality is buggered. Perhaps I've introduced some kind of loop it never exits. If you click on portfolio when you're in portfolio you crash the browser! Anyway I'm well aware that 'my cobbled together solution' is not how it would be done by someone with any experience in writing code. They'd probably use something else with a different name that takes another lifetime to learn. I don't think I can use getElement by and refer to the class/id name and parse the filename [using lots of words I don't at all understand] because of the implications on the other parts of the script. I've tried using a div wrapper and code to launch a child html doc and that come in without disposing of the existing content or talking to the stylesheet. I'm bloody lost and don't even know where to start looking next.
The point is... And here's a plea... If any of you do reply, I fear you will reply without the making the assumption that you're talking to someone who really hasn't got a clue what AJAX and JQuery and PHP are... I have searched forums; I don't understand them. Please bear that in mind.
I'll take a stab at updating your function a bit. I recognize that a critique of the code as it stands probably won't help you solve your problem.
var currentGallery = 'landscape';
function ChangeGallery(name) {
var imgs = document.getElementsByTagName("img") // get all the img tags on the page
for (var i = 0; i < imgs.length; i++) { // loop through them
if (imgs[i].src.indexOf(currentGallery) >= 0) { // if this img tag's src contains the current gallery
imgs[i].src = imgs[i].src.replace(currentGallery, name);
}
}
currentGallery = name;
}
As to why I've done what I've done - you're correct in that the scope of the variables - whether the whole page, or only the given function, knows about it, is mixed in your given code. However, another potential problem is that if you replace everything in the html that says 'landscape' with 'portfolio', it could potentially change non-images. This code only finds images, and then replaces the src only if it contains the given keyword.

Why does onclick's handling function not work as expected?

I have the following little piece of code:
var instance = this;
window.onload = function () {
for (var i = 0; i < array.length; ++i) {
var currentDivId= array[i];
var currentDiv = document.getElementById(currentDivId);
try {
if (!currentDiv) {
throw 'Div id not found: ' + currentDivId;
}
var image = document.createElement('img');
image.src = 'img.jpg';
image.onclick = function() {
instance.doSomething(currentDivId);
};
currentDiv.appendChild(image);
}
catch(e) {
console.warn('oops');
}
}
};
This code is passed an array of id of divs. What it does is that, it renders an image at each of those divs and set their onclick property.
Say I have an array of strings: ['abc', 'xyz']
I want the code to place an image inside <div id="abc"></div> and another image inside <div id="xyz"></div>.
When you click the first image, instance.doSomething function should be called with parameter 'abc' and vice versa.
But the code does not work as expected. It always calls instance.doSomething with the last parameter in the array, in this case, 'xyz'.
I'm new to JS and still don't have a solid grasp of its inner workings. What's wrong here and how can I fix it?
Any help appreciated.
image.onclick = function() {
instance.doSomething(this.parentNode.id);
};
That should do it. Since we know that the image is inside the div we want to get at, just go one dom element up and get its id.
Welcome to the wonderful world of Javascript scoping issues. As it stands now, JS is treating your onclick code as something like "when this object is clicked, fetch the value stored in the currentDivID variable AT THE TIME THE CLICK occurs and pass it to the doSomething function".
What you should do is base the argument on the image object itself. Every DOM object knows where it is in the DOM tree, so at the time it's clicked, the onclick code should use DOM traversal operations to figure out which div it's inside of and dynamically retrieve its ID. That way you don't have to worry about binding variables and scoping issues... just figure out which div contains your image and get the ID at run time.
Try:
image.onclick = (function() {
var currentD = currentDivId;
return function() {
instance.doSomething(currentD);
}
})();
Hope it helps

Categories