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');
}
});
Related
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.
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
I have created a paypal button using the JavaScript code as stated here and have also used the paypal mini cart.
The cart works fine, but there is one problem. The cart hides behind my navbar when you scroll to the top of the page, when you are lower down, it works fine. I am using twitter bootstrap and a template. I'm not sure if its the bootstrap, or something I did with the buttons.
Thanks in advance,
Dan
my first guess would be to check your if your navbar has z-index, its actualy hard to tell without code sample
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.
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".