I have built a site that I am trying to make responsive...with Bootstrap CSS it is actually fairly easy - but I am running into a weird problem. Everything works fine...except when I visit one page (the "Settings" page), when I'm holding my iPhone upright...the links stop working in the navbar (I try to click on them but nothing happens). However, if I turn my iPhone, and hold it horizontally, the navbar links start working again. Has anyone ever seen this problem? Here is relevant code:
navbar.html (I am using angular, and it doesn't make sense for the nav buttons to function on one page...and not on another):
<div class="header" ng-controller="NavbarCtrl">
<h2 id="redbox" class="text-muted">[H]</h2><h3 class="text-muted">ackabox</h3>
<ul class="nav nav-pills pull-right">
<li ng-repeat="item in menu" ng-class="{active: isActive(item.link)}">
<a ng-href="{{item.link}}">{{item.title}}</a>
</li>
<li ng-hide="currentUser" ng-class="{active: isActive('/login')}">Login</li>
<li ng-show="currentUser" ng-class="{active: isActive('/settings')}">Settings</li>
<li ng-hide="currentUser" ng-class="{active: isActive('/signup')}">Sign up</li>
<li ng-show="currentUser" ng-class="{active: isActive('/logout')}">Logout</li>
</ul>
</div>
I don't really know what else to include for code...it just seems like a glitch with responsive web design that might have some weird solution I don't know about. Any help would be greatly appreciated.
UPDATE
I posted the site to git: https://github.com/eamonwhiter73/hackabox
Node modules are included...you just have to run MongoDB instance...and then cd to the site directory in your console...and type grunt serve. That will load the site automatically into the browser on localhost:9000.
Also, for MongoDB to function - mind this line in lib/config/env/development.js:
...
uri: 'mongodb://localhost/hackabox'
...
You may have to change this depending on how you have MongoDB set up on your computer (I am on a Mac, but I know that for Windows, it might be a slightly different syntax - or you may be using a username and password...just google it).
Have at it (and check out the cool forum that I built into the site)!
Found the real culprit - oddly enough - it was just a float:left in the css for .header > h2 and .header > h3 - when I removed that it fixed everything - need to figure out a different way to reformat my header though :)
Related
I have been getting this error only in chrome browser:
element not interactable: element has zero size (Session info: chrome=84.0.4147.105)
when I try to click on <a href="/cart" class="button--counter header__mini-basket" ...></a>.
This is the snippet from my DOM:
<nav class="header__navigation">
<div class="user-section">
<ul class="user-section__list">
<li class="user-section__item user-section__item-my-account js-my-account">
My account<ul class="dropdown dropdown__my-account-desktop">
<li>
<div class="spacer"></div>
</li>
<li>
<div class="arrow-up"></div>
</li>
<li>
<a href="/my-account" role="button" class="my-account__link button button--inverse atm-nav-account" title="My account details">
My account details</a>
</li>
<li>
<a href="/logout" class="logout__link button button--inverse atm-nav-logout" role="button" title="Log out ">
Log out</a>
</li>
</ul>
</li>
<li class="user-section__item">
<a href="/wishlist" class="header__my-wishlist-link atm-nav-wishlist" title="Wishlist">
Wishlist</a>
</li>
<li class="user-section__item dropdown">
<a href="/cart" class="button--counter header__mini-basket" data-toggle="dropdown" data-close-on-bounce="false" data-toggle-status="closed" data-toggle-has-overlay="">
<span class="counter-bubble">
<span class="counter-bubble__quantity">
<span class="cart-counter-wrapper" style="display: inline;">
<span class="counter-bubble__quantity cart-counter" data-counter-type="cart-counter">1</span>
</span>
<span data-counter-type="cart-title">
My cart</span>
</span>
</span>
</a>
<div class="my-account__background-overlay js-account-background-overlay display-none"></div>
</div>
</nav>
I have tried locating the element in different ways:
li.user-section__item a.header__mini-basket
ul.user-section__list a.header__mini-basket
div.user-section a.header__mini-basket
nav.header__navigation a.header__mini-basket
but nothing helped.
This is what I have in the test:
clickOnMiniBasketIcon(){
this.cartIcon.waitForExist(TIMEOUT_5000_MS);
this.cartIcon.waitForDisplayed(TIMEOUT_5000_MS);
this.cartIcon.waitForEnabled(TIMEOUT_5000_MS);
this.cartIcon.scrollIntoView({block: "center"});
this.cartIcon.waitForClickable({timeout: TIMEOUT_3000_MS});
this.cartIcon.click();
}
I am using webdriverio 5 and cucumber.
Interesting point is that running the test against firefox is passing just fine (headless or non headless version) but in chrome (headless or non headless) I get this error.
Also I have to mention that the test resizes window to mock mobile/responsiveness with the command:
browser.setWindowSize(300, 700);
Does anybody have any idea how to resolve this for chrome? Anybody had similar issue?
Any kind of help is very much appreciated.
Thanks!
I can't comment - so this is comment-like
I suspected a Chrome bug at first, but now I think it literally means - you need to check your css - in relation to size zero.
Maybe css is not one of your hobbies (if I'm wrong, write a nice comment and I'll shut up)
Run validator
or/and css_validator will write to you if there are any problems, including spelling errors (sometimes it miss something, but very rarely)
If that doesn't help, check the page code in your browser - (tools for developers or similar) it will show you in colors and literally everything related to your css and html.
You are looking for any size zero -font-size: 0, height: 0,
... also font: normal normal 0 tahoma, sans-serif - it goes like this : font: style variant weight size line-height font-family but some of values can be omitted... It won't be easy
Probably one of this long list is to blame:
<ul class="user-section__list">
<li class="user-section__item dropdown">
<a href="/cart"
class="button--counter header__mini-basket"
data-toggle="dropdown"
data-close-on-bounce="false"
data-toggle-status="closed"
data-toggle-has-overlay="">
<span class="counter-bubble">
<span class="counter-bubble__quantity">
<span class="cart-counter-wrapper" style="display: inline;">
<span class="counter-bubble__quantity cart-counter" data-counter-type="cart-counter">1</span> //</span>
<span data-counter-type="cart-title">
My cart</span> //</span></span></a>
Hm, I was hoping you will find out due to investigation :)
In your browser right-click menu should be this tool or alt+command+i support
if you make a mess - close with x and open again will return with default look
on top you should have Elements E (html), bottom Styles S and in the corner strange picture (cubism like Picasso) P
in E click your tragic <a> and read down in S - on left is like:
a{ font-size: 0; inline on right you have link https://.../style.css:123 = address:line to file containing this ...creature,
but first you can test what exactly is blame - with little checkboxes - disable / enable - play with this sometime it works wonderfully
It emulates behaviour without this piece, you may also (hover mouse around, Opera has this under 3 vertical dots) insert Style Rule - may help (or not) to find solution...
... your code smells like bootstrap or something else what I don't use.
I don't know how you create css - if after following the above you know exactly what to change/remove/add just do it
if you don't know how - let me know... well, we will see
The concern is that CSS is hereditary
for some reason these strange properties were used - maybe by mistake, maybe on purpose
if you change class properties it will affect every element of the class wherever they are
if you remove a class name from <a>, it will lose all properties of that class
there can always be other, more complicated relationships between elements, such as .class div.class2 a.class {}
The least damaging blind solution in this case, is to remove the class name from the <a> element, and to add inline patches if necessary...
I read once again your question - webdriverio 5 and cucumber - unknown for me..
I think you should read this
I had this issue and found a ton of reasons why this can happen in Webdriver.io v4 on NodeJS:
You are trying to click on an ID where there are multiple elements with that ID.
The DOM element you are trying to click on has zero width, height, font-size, line-height, etc.
There is something covering the element to be clicked on.
It's trying to click on something different than what you think it's trying to click on.
You can cover #2 & #3 by clicking directly in the middle of the thing you expect to click on. Does it work? If you can't click on it in the UI, then webdriver.io/chromeDriver can't click on it either.
In my case, it was #1, but I was duped into thinking everything was fine because I had used JQuery (ie. $("#myId").length) & document.getElementByID("myId") and there was only a single element. They lie! They only expect one thing by that ID so they find the first one and return it. Those two methods will only show one item for a given ID even if there are 50.
To find if there's a second element with the same ID, you need to:
Press CTRL-SHIFT-I to open developer tools in Chrome
Go to the Elements tab.
Press CTRL-F to search.
Type in your expected Id (ex. "myId") and keep searching to make sure there is only one.
the links on the homepage navbar is an easy scroll when click on it it moves the page the the section with id, but i need the user when they are on any other page not the homepage and click on any links on the navbar, it return back to the homepage and move to the section.
This code doesn't work for me.
How we Work
Try to remove the / before your URL
How we Work
This / is going to the root of your folder. I guess your using relative path, so this should fix the issue.
In your webpage you have this code within "tracking.html":
<h2>About Us</h2>
<ul class="discover triangle hover row">
<li class="col-xs-12">About EvisaXpress</li>
<li class="col-xs-12">Our Team</li>
<li class="col-xs-12">How We Work</li>
</ul>
This is linking to the current page, i.e. "tracking.html". Write instead
How We Work
and you should be fine.
The difference is that in your page this is called:
http://evisax.com/tracking.html#how-we-work
whereas this is what you want to call:
http://evisax.com/index.html#how-we-work
Removing scrolling.js from the Tracking.html file and everything works fine.
I am using Twitter Bootstrap for a project.
I have a widget type list-group, which is a list of elements that are used for navigation.
For some reason I can't make those links to work. Although the correct link appears when hovering, they don't take me there.
I created a fiddle to ilustrate the problem.
Can anyone help?
Regards.
When you specify http in the link it will not work in an https site.
Have a look at Bootstrap's documentation for list-group. When I put your links into a UL, things seem to work:
<ul class="list-group">
<li><a
href="http://www.google.com"
class="list-group-item active"
>External link not working</a></li>
<li><a
href="#my_local_anchor"
class="list-group-item active">
Internal link not working
</a> </li>
</ul>
I checked the internal link and it worked when yo use your anchor as an ID
<h1 id="my_local_anchor">
And the external link worked when I added:
<a href="https://www.google.com" target="_blank">
Which opens the link in a new tab which is usually better as your website will keep a presence in the users browser
Never put http protocols in the href for many reasons, one of which the protocol might be the wrong one ! (http vs https).
As for the internal link it is working properly in the JSfiddle once you actually create an element with that id.
Plus the list group should be in a LIST not a bunch of divs
So I have 4 different room transitions (up, down, left & right). I want to be able to set each transition to go to a specific page, and repeat if the same transition is clicked again.
For example, have "left" (data-animation 55) goto "Page1.html", and if I was already on "Page1.html", then it would just transition right back into the page. And I would have the "right" button, go to "Page2.html", etc.
https://github.com/cweigen/page_transition_room
There's the github repo, but this is the code that I've been messing with, experimenting with different versions of it to attempt going to a specific page and repeating if the same button is clicked, but go to another specific page is another menu button is clicked.
<div class="pt-triggers">
<div id="dl-menu" >
<ul class="dl-menu">
<li data-animation="54"><a href="#" > right </a></li>
<div class="pt-triggers1">
<li data-animation="55"><a href="#" > left</a></li>
<div class="pt-triggers2">
<li data-animation="56"><a href="#" > down</a></li>
<div class="pt-triggers3">
<li data-animation="57"><a href="#" > up</a></li></div>
</ul>
</div>
</div>
<div id="pt-main" class="pt-perspective">
<div class="pt-page pt-page-1"><iframe src="http://visiondigit.al/VisionDigital_Launch/" width="100%" height="100%"> </iframe></div>
<div class="pt-page pt-page-2"><iframe src="http://scsuchat.com" width="100%" height="100%"> </iframe></div>
</div>
You can't expect others to download the repo and build it for you. Time matters! That's the first thing you need to learn how to ask a question properly on StackOverflow.
As you are a new user, I'm going to make one-off excuse for you.
The library you are using is not the best choice for your task. However, it does provide as many as 67 different transition effects, which are defined in **pagetransions.js** and called using data-animation attribute. Have a look at the js file and you can choose the specific animation you are looking for.
To solve your other problem, you'll have to write a bit of your own code as the author doesn't provide a function to link each button with specific page, nor hiding the button when you are already on that page. You can use jQuery to do so.
But like I said, this is not the best nor the only option you have.
Check
THIS DEMO
I have created a structure that mostly mimics your requirements. Have a play and try to understand the demo. The structure is quite simple. It uses two external resources which you can see and download from the fiddle.
I'm making a really simple website and was curious how I can modularize the content sections of the body while leaving the static portions of the site alone. I figured using partials would be the key but they operate much differently than I had originally thought. This is my first time using Angular so I'm not very familiar with anything just yet.
Right now the site has a simple design similar to the following:
<div id="wrapper">
<div class="header"></div>
<div class="sidebar">
<ul>
<li><a href={{option.path}}>Option 1</a></li>
<li><a href={{option.path}}>Option 2</a></li>
<li><a href={{option.path}}>Option 3</a></li>
</ul>
</div>
<div class="content"></div> <------ content changes with selected option in .sidebar
<div class="footer"></div>
</div>
Barring the inherent syntax errors here, what can I do so that when I click on an option in .sidebar such that the {{option.path}} won't just be appended to the URL?
Currently, this is what I have happening:
I have my site open on index.html where the .content section is completely empty.
The user then chooses an option and I want to direct their browser from /index.html to /partials/option1.html.
If the user then click AGAIN on option 1, their browser directs to /partials/partials/option1.html, which returns a 404 error.
Is there a way to avoid the problem in part 3 or is that simply how partials are meant to work?
Angular JS uses $route to designate partial templates to URL's. You will also need to learn about ngView to make this work.
I admit egghead.io is a great resource for Angular but I think you are in need of this specific screen-cast => http://youtu.be/i9MHigUZKEM
This LinkedIn group also contains every Angular.js resource I have come across.