Updating a variable as a parameter in a function - javascript

I have a scrolling image script that I'd like to update the scroll speed of on the fly, using a hover function. I've researched and just can't figure out how to get the variable to update inside of the function without calling the function again. I don't want it to start over, I'd just like the speed to increase as it is running.
(function ($) {
$(function () { //on DOM ready
var defspeed = 1;
$(".simply-scroll-list").simplyScroll({
speed: defspeed,
});
});
})(jQuery);
$('.fast-forward').hover(function () {
var defspeed = 5;
});
As you can see above, I don't know how to integrate those two blocks of code properly.

You cannot increase the speed on the fly in a decent way, because the speed is set only once when you initialize the simpleyScroll plugin.
You could reinitialize the plugin but that could have unwanted side effects. jQuery plugins sometimes add extra html to your DOM and reinitializing it would do that multiple times. Multiple event handlers could get attached to the same nodes and all kinds of stuff could go wrong. I do not know if this is the case with this plugin though. Try it :)
I myself would just add it to the plugin. I don't think it would be hard as the plugin is pretty small.

Related

Using jQuery .click works but .touchstart desn't

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);
});

Call jQuery from inside Flash Canvas

I'm trying to call for a jQuery function when my Flash Canvas animation ends. I can't seem to figure out what code I need to add on that last keyframe in order to do that. I found something like this but it's not working:
this.stop();
ExternalInterface.call("javascript:start_website();");
Thanks in advance!
I managed to find a solution from browsing a few other websites. Basically at the end of my animation on the very last keyframe I added this bit of code:
this.animation_tracker = function() {
start_website();
return false; // prevent the function from being run over and over again
}
exportRoot.animation_tracker();
And within my website I created a jQuery function called start_website(); where I placed all the actions that I wanted to have happen once my animation was over.
in flash canvas you are already programming in javascript (and other js libraries flash uses), so you can't use and don't need the ExternalInterface.call and such.
You can and should call straight to the javascript function:
this.stop();
start_website();
Good luck!

Add class to dynamically generated HTML

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.

How to remove an event out of content script scope?

I'm trying to unbind an event from a specific element and upon research, I found this. Which is useful. In itself. I didn't know you could do that. But:
Is there a way to make it work in a browser/Chrome extension? I'm talking about content scripts.
The reason why this doesn't work the way it's described there is that the website which has attached the event in question with its own script is using a different jQuery object than the one in my extension's includes/ folder. And I can try to search the event via jQuery._data(el, 'click'); but that is my jQuery object, not the one of the website where the events are apparently stored. I'm glad I figured that out after hours of fiddling around.
Or maybe it is possible to access the website's jQuery object itself?
EDIT:
What I'm ultimately trying to achieve works in theory but … it's complicated. The original script uses a plugin event and keeps reinstalling it with .on('mouseleave',….
Anyway, this is what I got thanks to you, pdoherty926:
var $el = $('div.slideshow');
$('h2', $el).click(function(){ console.log('ouch!'); }); // test event
var $slides = $('.slides', $el).detach();
$copy = $el.clone(false);
$slides.prependTo($copy);
$el.replaceWith($copy);
The test event doesn't get triggered but the event I'm actually trying to remove still fires. I can imagine figuring it out, though, now that I got closer to my goal.
Okay, the aforementioned re-installation on mouseleave really messed up this otherwise satisfying suggestion. (The site is using the jQuery Timer plug-in by Cyntaxtech). So here's how I solved it instead: I simply changed the class name (-.-' )
Now the re-installation code cannot find the element anymore.
This is how my finished script looks like:
function stop_happening() {
var $el = $('div.fullwall div.slideshow');
$el
// first, stop the current automation.
.timer('stop') // Timer plug-in
// next, change class name in order to prevent the timer
// from being started again.
.removeClass('slideshow').addClass('slideshow-disabled-automation');
//--- copied some extra code from the website itself for the onclick
// events which are supposed to keep working. I wish I could do *that*
// programmatically but I'm glad I got as far as I got. ---//
// […]
}

javascript/jquery code not working - limit to how many calls can be made in a page?

Here is the code I am using from jquery ui tabs:
<script>
$(function(){
// Tabs
$('#tabs1').tabs();
$('#tabs2').tabs();
$('#tabs3').tabs();
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(function(){
$(this).addClass('ui-state-hover');
},function() {
$(this).removeClass('ui-state-hover');
});
});
</script>
In this page: http://sekhu.net/charlie/index.php
Now Most of the jquery calls work, but this one in particular only works depending on where I place it amongst the other init. I'm using Sudo Slider jQuery Plugin and the jquery tabs to include the tabs in the slide. Is this not possible, or have I made an error somewhere? Perhaps missing a ; or something?
I'm new to jquery/script so I have no clue what's gone wrong.
Thanks
I think the last }); should be })();
But I might be confusing it with the self-executing anonymous functions
The order you do things is often critical in JavaScript, especially if you are adding events to anchors loaded dynamically. You need to do things in this order:
retrieve data with a dynamic AJAX call
process the data and display the results which may include a list of anchors
install listeners for events like click and hover on the anchors displayed
in #2.
If you try to install the listeners before you've displayed the data, they won't listen. So don't install the listeners in a document.ready() or init() function, install them in the callback of the function that loads the dynamic data the listeners apply to. Something like this
$.get('myUrl',function(data){ // get dynamic data
var anchorList = myProcess(data); // create a menu from the dynamic data
$('#myTarget').html(anchorList); // display the menu
$('#myTarget a').hover( ... ); // *now* install the listeners
$('#myTarget a').click( ... );
});

Categories