i have a click function, that starts another looping function.
i've looked for many exampels and instructions but don't get the function stopped with a second click on the button.
on jsfiddle, i've build, how it works actually.
my idea is to put a stop action to the clickfunction, but it doesn't seem to work:
function marsch() {
$('li').hide();
<!-- fadeInSequence().stop(); -->
fadeInSequence();
}
may you please help me
https://jsfiddle.net/t3exdrud/
by the way, it's my very first coding and it would be helpful, if someone gives also advise, if this code causes problems or isn't up to date
You need an outside variable that control if the function is working or not
var fadeSequenceON = false;
function marsch() {
if(!fadeSequenceON){
fadeInSequence();
fadeSequenceON = true;
} else {
$('li').hide();
fadeSequenceON = false;
}
}
Related
I've noticed from a few different projects of mine that whenever I click something I add an onClick function to, it always takes two clicks to get them going when a page is freshly loaded. The general structure I use for them is:
function PageChange(){
var welc_p = document.getElementById("welcome");/**gathers page DIVs**/
var page01 = document.getElementById("page01");
var page02 = document.getElementById("page02");
var start = document.getElementById("start_btn");/**gathers buttons**/
var p1_back = document.getElementById("p1_back");
var p1_next = document.getElementById("p1_back");
var p2_back = document.getElementById("p2_back");
var p2_next = document.getElementById("p2_back");
start.onclick=function(){
page01.style.display="block";
welc_p.style.display="none";
window.location="#page01";
};
}/**function**/
then the way I call it in the html is
<div class="some_class" id="start_btn" onClick="PageChange()">!!!LETS GET STARTED!!!</div>
Here's a fiddle of it as well.
https://jsfiddle.net/Optiq/42e3juta/
this is generally how I structure it each time I want to create this functionality. I've seen tons of other posts on here about their items taking 2 clicks to activate but none of them were doing anything near what I was trying to accomplish and it seemed their problem was within their coding. Does anybody know why this is happening?
This is because you are attatching a event handler to your button on click of your button.
This means that one click of the button activates the event handler, not the code within start.onclick=function() {
Then, the second click works becasue the event handler has been activated, and now the code will run.
Try moving your code out of the function, then it will work with just one click
Just had the same issue, and found an easy solution based on the above answer.
Since your function needs two clicks to work, I just called the function above the function and it works fine. This way the function already gets called one time on load, then it gets called the second time when you click it.
yourFunction();
function yourFunction(){
-- content --
}
I also had the same 2 clicks required on intitial interaction and after many searches couldn't find the best solution for my specific nav menu. I tried this solution above but couldn't get it to work.
Stumbled upon this code from a youtube example and it solved my issue. I wanted to nest submenu's for multiple levels and modified it from its original implementation to work best for my responsive mobile menu.
var a;
function toggleFirstLevelMobileSubMenu(){
if(a==1){
document.getElementById("mobile-sub-menu-depth-1").style.display="none";
return a=0;
}
else {
document.getElementById("mobile-sub-menu-depth-1").style.display="flex";
return a=1;
}
}
var b;
function toggleSecondLevelMobileSubMenu(){
if(b==1){
document.getElementById("mobile-sub-menu-depth-2").style.display="none";
return b=0;
}
else {
document.getElementById("mobile-sub-menu-depth-2").style.display="flex";
return b=1;
}
}
Of course, in the CSS I had display: none set for both ID's.
First, the problem:- On first click instead of running js your browser runs the button aka the event.
Solution:- in order to resolve this we need to make sure our function is already before the event is run (this is one of the ways to solve the problem). To achive this we need to load the function aka call the function in some way.
So, i just simply called the function after function is completed.
Code answer-
Just add at the end of your code
PageChange();
I have it running fine on safari right now and not always working in chrome:
app.controller(.... function($window){
$window.focus();
$window.onfocus = function(){
$scope.inFocus = true;
};
$window.onblur = function (){
console.log("onblur");
$scope.inFocus = false;
};
});
The console.log is not always triggered. I was wondering if that was a bug or something I am doing wrong?
Update: I tried the solution given by #Gabe. It is still breaking sometimes, I am wondering if another action is interfering with it. It does look random though...
Update 2: I still don't know how it gets stuck, but I know how to get it unstuck:
I click on an input in the window to focus it.
I click outside of the input to unfocus.
I switch tab and back in. It works again.
Try using the API for angular.element instead
angular.element($window).bind('blur', function (){
console.log("onblur");
$scope.inFocus = false;
});
http://plnkr.co/edit/khYHeJlvn2uCzKeTjndM
I'm using this code to play a swf with onclick command for an image. On the first click, I receive "flashMovie.Play is not a function" error. On the second click it works, and every time afterwards.
Is this a conflict with the order of execution with other elements in the page?
What is happening on the first click that makes the second click work properly?
(this works in IE but not firefox)
Would putting some sort of timing delay on this possibly help? Any suggestions as to how I could try that?
<script language="JavaScript">
function getFlashMovieObject(movieName)
{
if (window.document[movieName])
{
return window.document[movieName];
}
if (navigator.appName.indexOf("Microsoft Internet")==-1)
{
if (document.embeds && document.embeds[movieName])
return document.embeds[movieName];
}
else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
{
return document.getElementById(movieName);
}
}
function PlayFlashMovie(name)
{
var flashMovie=getFlashMovieObject(name);
flashMovie.Play();
}
</script>
If your flash movie isn't loaded before your button is clicked, then you might encounter this problem. I don't think any kind of specific timing delay is a good idea; it would be better to figure out what exactly you are waiting for and then implement the correct handler.
For example, if you were waiting for the whole page to load before doing something, instead of having a 1 second delay, implement a document.onload handler, like so:
document.onload = function () {
//your code here
}
As a side note, you might consider using SWFObject, as it makes your life a lot easier with regards to Flash and JavaScript.
Here is a link to my code: http://www.canning.co.nz/Mapping/Code.txt
Sorry, it is in text format, for some reason I had some trouble in pasting it into this forum.
It is working nicely. However, I am after a little bit of help with a problem that I am having. Currently, the textboxes come up for the start and destination after I click on a button. I am wanting to have these textboxes all display when the page loads and then just press on the button and the route will be displayed.
Can I please have some help with this? Or is there a better example that I can have a look at somewhere on the net?
thanks
You can adapt your current example to work this way. First you need a couple more JavaScript functions. You can place these below the directions() function.
JavaScript:
function searchFunc(point) {
if (point) {
if (state==1) {doEnd(point)}
if (state==0) {doStart(point)}
} else {
var result=geo.getCache().get(search);
if (result) {
var reason="Code "+result.Status.code;
if (reasons[result.Status.code]) {
reason = reasons[result.Status.code]
}
} else {
var reason = "";
}
alert('Could not find "'+search+ '" ' + reason);
}
}
function GLoad() {
var search = document.getElementById("search").value,
search2 = document.getElementById("search2").value;
addresses[0] = search;
addresses[4] = search2;
geo.getLatLng(search, searchFunc);
geo.getLatLng(search2, searchFunc);
}
Next you need to remove the three calls to handleState(). There is one call right below the function declaration. The other two are in doStart() and doEnd(). You can also remove the function itself. This function was doing the show/hide of the fields and buttons.
Finally, you need to update the tag to call GLoad().
<body onload="GLoad()" onunload="GUnload()">
Now if you click Get Directions the page should function the same as before, except we've taken care of the first couple button clicks and all the fields remain visible.
You probably want to also remove the buttons for "Find start address" and "Find destination address" but I wasn't sure. Removing them is as simple as removing the buttons from the HTML.
Feel free to ask any questions. I hope that helps!
Simply put I'm trying to sync two slideshows created using widgetkit lib in a joomla website, eg. when user clicks next slide on one, the other one also runs nextSlide() function in the slideshow.js. Same for previous. The problems I'm having is widgetkit uses anonymous functions for creating those slideshows and I dont have global references to them after they are created. With my limited programming knowledge I cant seem to trigger the nextSlide function for other slideshows once inside click handler.
If anyone can take a look it would be most welcome.
EDIT:
Of course I forgot to link the example webpage
http://www.yootheme.com/widgetkit/examples/slideshow
Mine is similar with only 2 slideshows, but is still only on local server.
Taking a brief look at widgetkit here is one possible solution. Using jquery you can search for any objects that have a class of slides with a child of next and click all others. The code provided below isn't tested but should point you in the right direction. As long as you don't call stop propagation or prevent default then the original click handlers should still fire.
var slideshow_count = $('.slides .next').length;
var cascade_countdown = 0;
$('.slides .next').each(function() {
$(this).click(function() {
// stop an infinite loop if we're already cascading till we've done it for all the elements.
if(cascade_countdown != 0) {
cascade_countdown--;
return true;
}
// we don't include the slideshow we're clicking in this count
cascade_countdown = slideshow_count - 1;
var clicked_el = this;
$('.slides .next').each(function() {
// only click elements that aren't the initiator
if(this !== clicked_el) {
$(this).click();
}
});
});
});