I need to write a user defined function using jQuery to swap two div tags within the page. I created the function but it is not swapping them as desired. In fact, when I move the same code inline it works fine. Is there something I am missing?
It is impossible to debug something that I cannot see, but I wrote a "swapper function" for you:
function swapem($el1, $el2) {
var $t=$el2.clone().insertAfter($el1);
$el1.insertAfter($el2);
$el2.remove();
}
$('#swapper').click(function () {
swapem($('#div1'), $('#div2'));
});
jsFiddle Demo
Related
I have a block of working code that allows me to shift from one set of colored items to another based on a span click event that runs in jQuery. I am using wordpress and it requires I spell out jQuery instead of using '$'. In part, it works by moving a variable to the active selection and changing a variety of other properties based on defined variables in the html of that 'span'
I tried changing .click(function f()... to .touchstart(function f()... and it doesn't work when I load the site on mobile. If you think you know the answer, cool. I will now list things I have tried.
This is what my click function looks like:
jQuery(document).ready(function f($) {
jQuery('.changecolor span').click(function f($) {...
});
});
Attempts:
jQuery('.changecolor span').touchstart(function e()
jQuery('.changecolor span').on("tap", function e() {...
My cache is set to auto clear every time I save a new change in, and I've tested this.
$('.changecolor span').on('touchstart',function(ev) {
$('your seletor').trigger(ev);
});
I am trying to get myself started with jsFiddle. So I tried to run a simple code snippet which includes all HTML, CSS and JavaScript code.
Javascript does not works If I select onLoad in Frameworks & Extensions dropdown
But it does work when I select No Wrap - in from the dropdown
Can you tell me what that means . I have already read this question on SO JavaScript not running on jsfiddle.net
But not able to understand the solution mentioned there.
When you select onLoad, your JavaScript is wrapped with an onload function. This means your code will run when the page has finished loading, but is no longer available in the global scope. It looks like this
window.onload=function(){
function myFunction() {
alert("Hello");
}
}
A workaround might be to assign variables to the window object so that they are accessible anywhere in the page.
For example:
function myFunction() {
alert("Hello");
}
window.myFunction = myFunction;
and
<button onclick="window.myFunction()" >Hi</button>
When using onLoad, the function won't become global one, so you can't invoke it directy from HTML. If it is global - like when using no-wrap - it works.
The onLoad generates something similar:
window.onload = function () {
function myFunction() {
}
}
So, myFunction() is only visible directly in the closure of the anonymous function.
I have the following javascript -
function onLoad() {
if (!(document.applets && document.VLVChart && document.VLVChart.isActive())) {
setTimeout('onLoad()', 200);
return;
}
objChart = document.VLVChart;
PollEvent();
}
function fan() {
objChart.reorganize();
}
And then when the HTML page is loaded -
<body onLoad="onLoad()">
and have a button within the HTML that execute the fan() function -
<input type='button' value='Fan' onClick='fan();'>
Is it possible for me to activate the fan() function within the onload event so that a user does ont have to click the button?
EDIT
After trying the provided answers, on debugging the code breaks on the line -
objChart.reorganize();
Within the fan() function with the error -
SCRIPT5007: Unable to get value of the property 'reorganize': object is null or undefined
This is odd as when I manually click the button on the page, the function works fine.
Solution
After much head scratching I have realised that I was trying to load the fan() function before the page (and more specifically the objChart) had fully loaded. Hence why adding the function in the onLoad event was not working. I added a setTimeout -
function Fan()
{
setTimeout(function(){objChart.reorganize();},3000);
}
<body onload='onLoad(); fan();'>...
However inline JS is best avoided and you would do well to begin looking into centralised event management. There are various advantages to this.
An answer I wrote yesterday to another question outlines why this is. Something like jQuery makes this trivial if it's new for you.
$(function() {
$('body').on('load', function() {
onLoad();
fan();
});
});
Reading your question I assume you didn't even have tried. Just call that function from within your onLoad()-function:
function onLoad()
{
fan();
/* … */
}
Yes.
You can use <body onload='onLoad(); fan();'> as Utkanos suggests.
If you use jQuery, you can also stick a script in the head containing:
$(function(){
...
});
The jQuery function actually fires earlier, as is explained here.
I'm using the PrettyPhoto jQuery plugin for an image gallery, and I'd like to make an API call with a basic text link using the following function to navigate to the next image in a series:
$.prettyPhoto.changePage('next');
Since I'll be making this call frequently throughout the site, I'd like to create a basic Javascript function "next" so that for each onclick instance, I can simply write "onclick=next();" rather than typing out the whole thing-- i.e. onClick="$.prettyPhoto.changePage('next');"-- each time. I've tried to write the function as follows, but it doesn't seem to be working:
$(document).ready(function(){
function next() {
$.prettyPhoto.changePage('next');
};
});
What am I doing wrong here? I'm obviously a novice at JS programming, but any direction here would be most appreciated; and please let me know if I should provide any more information.
There is no need to wrap your function in the document ready. Apart from that, you would be putting the next function in the global space which is something you should try to avoid. You could do something like:
$.nextPhoto = function() { $.prettyPhoto.changePage('next');}
and call it with
$.nextPhoto();
which puts it in the jQuery namespace but the better approach would be to use jquery event handlers .click() and bind the prettyPhoto function directly to the links rather than use inline javascript
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();
});