Javascript placement bug - javascript

At http://www.langThis.com we have tried making a button to translate peoples home pages.
But a ever returning problem is our Javascript for the popup. It should show the popup around the "langthis button" as shown on www.langthis.com, but as seen on this page I found it sometimes shows up where it want: www.giftsconcept.net/svp/ (in the bottom of the page).
Anyone who can help in bug fixing this problem?
Ex. of our JS code: http://www.langthis.com/langthisjs.php?site=1&user=langthis&from=gb

You don't calculate the viewports position of the popup! If someone scrolls down the page the popup is "mispositioned".

Related

Strange JS redirect & 404

I created a new toolbar for this site and I get this really strange new tab / redirect when on mobile if I rotate the device and try to navigate through the toolbar.
https://www.birthinjurysafety.org/[object%20MouseEvent]&visitorId=a625aeab-d753-41bc-bd93-a9830020e101?__utma=236318866.1681129442.1540344287.1540346383.1540359074.2&__utmb=236318866.1.10.1540359074&__utmc=236318866&__utmx=-&__utmz=236318866.1540346383.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)&__utmv=-&__utmk=142272497
Anyone know why JS would do this? Oddly enough the button that causes this strange new tab to open isn’t even a link itself. It just opens the next menu.
Thanks in advance for any help or suggestions! I’m really at a loss with this one.
The toolbar is built in vanilla JS. Except the button itself has some old jQuery dependent code that animates the button and shows the menu.

Make mobile Navbar disappear - PRO's

Important: Please read until the end !!!
Hey. I'm building a responsive single-page. There is a Bootstrap navbar on top with some anchor links.
What I look for: When it's in the mobile view with the "hamburger", and the user clicks on the hamburger so the anchors show up, and he clicks on one of the anchor links, it's scrolling great, but the menu does not close automatically. It stays open until you manually close it again by clicking on the hamburger.
I already found a solution, but it has a problem!
This code solved the problem great so far (function-wise), but has a visual bug:
$('.nav a').on('click', function(){$(".navbar-toggle").click() //bootstrap 3.x});
The Problem: It affects the site visually negative in non-mobile, desktop mode. All the words in the navbar like "About Me", "Contact" etc. disappear like wiped out, just for a half second, and then are back in. So everything works, but it's not looking nice. Is there a code fix to make this solve? I'm a total beginner, thats the problem in this case I dont know a lot about it yet and dont understand JS, just copied the code. Thanks in advance!!!
Try this:
JS
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') ) {
$(this).collapse('hide');
}
});

creating a pop-up(or is it a pop-over?) window for a webpage

I do apologize for the title if it is inaccurate. (feel free to offer me suggestions on the proper wording if needed.)
My question is for my web page, I would like to do something where you click on a link (or image), and instead of opening a new tab or browser window, you get a box that hovers over your page displaying the image of the link (or smaller image you clicked on). I am not sure if the correct term for this is a pop-up or pop-over window.
The best example of what I would like to do, is if you were to go to amazon.com and you see a product and it says "click here for a larger image". when you do that, a sort of window will display itself over the current page and show you the larger image.
Would anyone be able to give an example of code to see how this would be done as well? I am very thankful for any and all recommendations.
You could use a solution like fancybox, I believe this is what are you looking for http://fancybox.net
If I've understood what you mean, there are tons of jquery plugins to do that, for example http://lokeshdhakar.com/projects/lightbox2/
Here is a link, he has an explanation and code snippets for ya, works great.
http://www.htmlgoodies.com/beyond/javascript/article.php/3881276

How to have a floating/sticky window that pops up when you click it?

Please take a look at: http://www.olark.com .
Do you see where it says "Leave us a Message" (Orange color box, bottom right side)? I am looking to do something exactly like that. I am developing in MVC so I would have to have a small box like that on the bottom of my page. When I click it, I will load a partial view content into that popped up box.
Does anyone know how I can achieve this? I tried to Google but I didn't have much luck because I don't even know what it's called (Floating Window? Sticky Window? Sticky Dialog?).
Thanks a lot.
CSS: with
#thisid
{
position:fixed;
}
Or jQuery:
$(".thisid").onclick(function()
{
popup and do magical stuff here
});
is one way to go, but chances are you want the box that pops up to do something like live chat or some other not so meneal assignment...in which case with your current understanding you will be best served by a third party plugin for chat...and the plugin will most likely position itself for you

javascript drop down stopped working on Wordpress Woocommerce https page

This is the site I'm currently working on.
http://www.mackeyshotrods.com/store/
When the browser window is resized to 820px a drop down menu appears in the right hand corner of the site. The drop down menu works great on every page except for the check out page. I cant seem to figure it out why the drop down menu isn't working on an HTTPS page. It has to be a JavaScript error of some sort.
To find the page I'm struggling with add a product to the cart and navigate to the checkout page.
http://www.mackeyshotrods.com/store/?product_cat=clothing
Thank you for your help. i hope someone is smart enough to figure this out.
Try changing your jQuery path from:
http://code.jquery.com/jquery-1.11.0.min.js
To:
//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
Good explanation of why your jQuery might be getting blocked here:
https://stackoverflow.com/a/1056635/2040509

Categories

Resources