I have two scripts running at the same time. 1 is jqueryUI and the other is touchpunch. I have a signbox made in canvas where users can digitally sign. The problem occurs on the mobile. THe signature are draggable as they are on a contract. but on mobile phones draggable does not work. So I used touchpunch, it makes the draggable work on the mobile but at the same time clicking on the signature box turns off. CLicking on the sign box open a modal box where you can sign. If I put touchpunch at the bottom, draggable works and box opening stops. If I put jqueryUI at the bottom, the touch works but the draggable doesnt. What I'm trying to find a way to only put the jqueryUI only. and when the user clicks the box and the sign box opens, then touchpunch gets added at the end. So after signing touchpunch start working and the sign becomes draggable. What I have done so far is this:
alert("appending");
var x = document.createElement('script');
x.src = '{{ asset("js/touchpunch.js") }}';
document.getElementsByTagName("body")[0].appendChild(x);
alert("done appending");
}
When I inspect, I do see that after opening the box, the script does get added but the box still doesnt become draggable. The overall question is, how can I add one script onclick and make it work. Or if you have any other suggestion, please let me know.
Related
I am in way over my head, new to S/O and need to get this done as soon as possible. If I am doing this wrong I apologize in advance.
I purchased an extension that was simple enough to install but I need to extend the function just a but. I reached out to the developer to no avail.
Anyway I need to add a close button to the pop ups featured on the home page of this website (http://www.juanlafontalaw.com) Click on one of the hotspots (Red) and the pop up will appear. I simply need to add a close button or X that will allow the user to close the pop up without touching the main screen.
The site is Wordpress based. Plug-in: Visual Composer. The Extension: Visual Composer Add-on Image Hotspot with Tooltip (This is the focal point of my question)
I have no idea where to begin and did not expect to be in this position. And I did not think the develop -who does offer support to totally ignore my
Make a button in html, and use jquery click function to make display none in the pop up
$("#btn-id").click(function(){
$("pop-up").css("display","none");
})
I have a web page in
http://enlaces.webcindario.com/paraprobar02.htm
that everything works fine. But when I press the CHECK ANSWER button shows the message at the top of the page. Also when you go to that page in a touchscreen device the message appears close to that same CHECK ANSWER button or to other CHECK ANSWER buttons.
I would like the message appears like in this other page of mine:
http://enlaces.webcindario.com/addition.htm
Thanks :-)
Why use + scrollX? Isnt the popUp absolute? Either make popUp fixed with negative scrollX or just remove scrollX completely: absolute will already change position when you scroll.
i wrote a pebble.js app, basically it shows a splash screen and a menu showing bus stops. when the user press select button on a menu item a "card" is showed with the arrival info.
however, sometimes menu items are not showed correctly (some menu items disappearing) and when i press back in the menu screen instead of closing the app a blank "page" is showed.
i dont know what i'm doing wrong. i was thinking of memory leaks but honestly i dont know...
heres the source in case someone kind wants to help me : http://pastebin.com/92xbVs2F
This is now fixed in Pebble.js. Your app is magically fixed as well since it was pushed to CloudPebble.
If you'd like to know the technical details, it's because Menu Layer in the C API is normally not allowed to override the back button. As a work around, Pebble.js is currently using a blank window to catch the back button, but this hack only works if the menu is not the root window of your application. The fixed version no longer uses a blank window to catch the back button and overrides the back button in an obtuse way.
This is what i'm trying to create CodePen example
The idea is that the popup should work exactly like the Pinterest Link
The problems i have are:
When u close the pop-up, the page always jumps to the top. It should stay where it was
The popup is fixed, how can i make it that you can move it like on Pinterest? I would like to have some spacing on the top and when u scroll u actually move the up
If u have any chance to view this on mobile, please do. I want to make the site responsive. If u view the pop-up in the mobile version, it isn't smooth. That means when u scroll and move you finger from the touch screen, the scroll stops immediately. So it feels like you need to push the content down with you finger. It doesn't flow so u could swipe and it would stop slowly
I try to figure this out for days already and can't get it. Any help is welcome :) tnx!
Instead of using anchor tag for the close button like this :
<div class="close">close</div>
Do this instead :
<span class="close">Close</span>
Don't forget to add cursor:pointer style for .close class.
Your problem will be solved.
Right now, the image that triggers popup disappears when you click close button on firefox just in case if you haven't checked on it yet. So, better not use anchor tag for the close button. My suggestion would be Never use anchor tag for close button.
Hope this helps.
I'm having significant trouble with a jquery dialog box that opens in response to a .hover() command, and closes upon leaving the hover (which of course takes two functions).
When the dialog box opens a little bit out of the page, the entire page scrolls up; I want to disable this but I can't figure out how.
I have tried:
using event.preventDefault()
putting the ui-dialog css as 'position: relative'
setting the scroll bar back where it was (but this looks terrible)
Any other ideas?
Edit: Here is the code in jsfiddle: http://jsfiddle.net/TzUf3/1
Make sure the popup has its position fixed, then set the body to overflow:hidden;
When the dialogue is closed remove the overflow attribute.