I have created a responsive website (www.openlabs.ai) and under our product section I have placed a link to open a page in new tab.
The problem I am facing is that the link opens only when the browser window size is full if I make the browser/chrome window smaller and then try to open the link, nothing happens. I tried to see the problem through google chrome developer tool but I could not find any problem.
<li class="has-children">
Our Products
<ul class="dropdown arrow-top">
<li><a href="4cast/" target="_blank" class="nav-link"><span
class="text-primary">Openlabs:4Cast</span></a></li>
</ul>
</li>
When I do developers tools of chrome and try to click the the link while keeping the window smaller than full I get the following error.
main.js:228 Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement.<anonymous> (main.js:228)
at HTMLBodyElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLBodyElement.y.handle (jquery-3.3.1.min.js:2)
Looking for solution as well as interested to know the reason why it does not open if the window size is smaller, let's says half sized or on mobile.
PS: I am not a web developer.
There is a problem with a function in your main.js.
The function OnePageNavigation(); is to animate the scroll to a section when you click an anchor with hash. But, the selectors that you are using .main-menu li a[href^='#'], .smoothscroll[href^='#'], .site-mobile-menu .site-nav-wrap li a include anchors without hash, for that reason the page is not opened.
Try to remove the selector .site-mobile-menu .site-nav-wrap li a.
Related
I am very confused on how to add a button that shows up when you scroll and then onclick takes you to the top of the page again.
Here is an example of such button from the tutorial at w3school using html and css:
https://www.w3schools.com/code/tryit.asp?filename=G6H468JIUSF0
However, if I embed it in google sites with "embed" functionality it will just scroll to the top of the element and not to the top of the page.
I also tried putting html tag and linking it with :
<a name='top'></a> at the top of the page
<a href='#top'>Top</a> at the bottom
But this gives an error and redirects to :
https://524942313-atari-embeds.googleusercontent.com/embeds/16cb204cf3a9d4d223a0a3fd8b0eec5d/inner-frame-minified.html?jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.y5hhWjOdu80.O%2Fam%3DwQE%2Fd%3D1%2Frs%3DAGLTcCNsKzxWFhezE2KkFP7auTmVDBiNEQ%2Fm%3D__features__#top
try this
at the top of the page
<a name='top' id="top></a>
at the bottom
<a href='#top'>Top</a>
Currently, I'm working on the single webpage and got some issue with the final output which is when clicking the link menu, it does not go to the targeted div position(correct me if I'm wrong). And when clicking again the link, it will go to the other position.
I follow this tutorial, callmenick
Here is the reproduction of it, jsfiddle
<nav>
<ul>
<li>Overview</li> <- when any click link, and then click again, there's some action happen. *bugs?*
<li>Tech Spec</li>
<li>Support</li>
</ul>
</nav>
Now I get it,
the Problem is that the fixed nav is not part of the document flow anymore.
Therefore it won't reserve height. Or in other words the rest of the elements don't know its there anymore. Just like display: none;
You need to find a way to push the elements down by the height of the fixed nav but only if the nav is fixed.
There are a couple ways to to that, but it depends on the layout.
First way that comes to mind is applying padding-top: ?px; to the #product-nav, via JS as soon as fixed is applied to the nav.
edit:
https://jsfiddle.net/ju648br4/4/
I see no issue on my machine, but this feature can be approached in a different way. See my example below, this might solve the issue
Add anchor class
Add data attribute
Make global function that scrolls to certain point
So for instance
<div id="button-name"></div>
becomes
<div id="button-name" class="scrollAnchor" data-anchor-dest="#section-more-info"></div>
Now there is a JavaScript action required, this one reads the data-anchor-dest attribute and scrolls to it.
$(".scrollAnchor").click(function(e){
e.preventDefault();
anchorDestination = $(this).data("anchor-dest");
smoothScrollTo(anchorDestination);
});
function smoothScrollTo(element)
{
$("html, body").stop().animate({
scrollTop: $(element).offset().top
}, 1000);
}
Now the usual question, how compatible is it? This compatible, I have tested this myself in IE9 and it works.
This answer may be more of a teardown than a fix, but I hope this helps
What you need to do is to add your missing Buy section and in your navigation add href to the link, like:
<nav>
<ul>
<li>Overview</li>
<li>Tech Spec</li>
<li>Support</li>
<li>Buy</li> <!-- You are missing your href attribute here -->
</ul>
</nav>
All the rest seems to work fine.
I used zurb's foundation for a website which had lots of images distributed over some tabs.
It was very heavy to load so I used jQuery Lazyload to solve the problem. It worked beautifully except for the fact that it only loads the images on the 1st tab, which is the one active by default. The images in other tabs only loaded upon scrolling. Even if you do it by just a tiny bit.
So how do I re-activate Lazyload when navigating between tabs?
I've tried many fixes, including the ones in Lazyload's on website. None of them worked when the content is inside tabs.
But as Lazyload is triggered by scrolling I've managed to activate it by moving the page only 1px. Which is practically unnoticeable.
Here's how to do it in two simple steps...
add this javascript to the bottom of the body tag inside your html file
<script type="text/javascript">
// FUNCTION TO SCROLL 1PX AND TRIGGER THE LAZY LOAD
function tinyScroll() {
window.scrollBy(0, 1);
}
</script>
and add onclick="tinyscroll()" to your tabs. Like this example
<ul>
<li onclick="tinyScroll()" class="tab"></li>
<li onclick="tinyScroll()" class="tab"></li>
<li onclick="tinyScroll()" class="tab"></li>
</ul>
Your own answer is clearly a bad hack. In general I would recommend to use lazySizes. Among other improvements, it detects any image visibility changes automatically. So you don't have to bother to trigger anything.
this is the code for a button that is currently operating
<a class="ng-click" ng-show="hasSuperUserAccess && !siteIsBeingEdited" class="addRowSite" ng-click="addSite()">
{{ 'SiteManager_AddSite'|translate }}
</a>
Add style="font-size:0px;" to the tag. This sets the font size to 0 pixels, rendering the link invisible but still usable via Tab and Enter key.
http://jsfiddle.net/kL0wm6yd/
#link-name {
visibility: hidden;
}
This will hide the element from the page, you cannot click on it, but using tab you'll be able to select it and use enter to 'click' it. It also still occupies space on the page (which is why you can tab/enter).
I used the fiddle to denote first line and last line, so you can see that the link is still taking up space, however it is not visible. (you can't use tab in jsfiddle so just upload that code to your page and it will work. Any more questions just comment here.
I have a menu and a submenu that the parent menu title itself also leads to a page, the submenu opens on mouseover.
My problem is with touch screens, since there is no 'hover' on touch screen, there is no way to access the submenu, since the parent-menu page opens momentarily after the sub-menu appears without leaving time to choose value from it.
So from your experience is there an easy way to adapt the menu to touch-screens?
Is there a simple or conventional way to mimic mouseover on touchscreen?
I am not actually asking for code, but rather what's the common behavior in this scenarios, I already have a website that I want to make touch-screen friendly.
I obviously prefer a CSS solution over a script-based one.
You could have the submenu appear on press, then the user would drag down (still pressing the screen) and on finger up that could select the option.
Alternatively, you can have one click to open the sub menu, then another to select an item.
On a side note, this question would get a better response on https://ux.stackexchange.com/ it deals with user experience related questions
There are several approaches, for a CSS-only solution you could use the :target pseudo class.
.submenu {
display: none;
}
.submenu:target {
display: block;
}
<ul>
<li>
Foo
<ul id="submenu-1" class="submenu">
<li>Bar</li>
<li>Baz</li>
</ul>
</li>
</ul>