Two step click on mobile device hover - html

I have a 2 divs. The first div disappears on hover and the second div takes its place. My second div contains a link inside. My problem is on mobile devices I can't see the content of the second div because when I click on the first div the hover effect on the link takes the lead.
<div class="boxInside">
<div class="content">
... some content
</div>
</div>
<div class="boxInsideHover">
<a href="exemple.com">
<div class="content">
... some content
</div>
</a>
</div>
What I want on mobile is one click to see the second div's content and another click after for the link.
Thank you

Related

flex-direction:row completely hides some items on mobile view

I have div(class: review-tiems-container) with some items, on flex-direction:column they all show up, on flex-direction:row first one completely and some part of the second item disappear from screen, even when moving with mouse over mobile resolution.Even from editor mode hovering over their element, it shows empty space on dom.
this is how html looks, those item have inside content aswell but removed to reduce code length
<div id="reviews">
<h1 class="reviews-header">
Hear what our customers
<span>
are saying
<img class="why-underline" src="./Imgs/why/headerunderline.png"/>
</span>
</h1>
<section>
<div class="review-info-bar">
<div class="review-numbers">
</div>
<button class="review-btn">
</button>
</div>
<div class="review-items-container">
<div class="review-item">
</div>
<div class="review-item">
</div>
<div class="review-item">
</div>
<div class="review-item">
</div>
</div>
</section>
</div>
I tried different overflow options, none of them work

Popover doesn't stay, and position stays while page scrolls (Angular 4+)

When I click on an icon, a popover shows.
I realize that there is delay set with the popover, but when I scroll, the popover moves as well.
How can I make it stay where the icon is and not work with scroll?
<md-badge class="current-plan-type__icon--badge" direction="right" [mdPopover]="tootltipTemplate" delay="10000"
popoverTrigger="MouseEnter">
<i class="cui-icon icon icon-info_16 current-plan-type__icon--info"></i>
</md-badge>
Just move tootltipTemplate outside of your scrolleable div it will be called even if is not at the same level.
I think you have this problem: the popover template inside of the scrolleable div.
<div #root>
<div #scrolleable>
<div #tootltipTemplate></div>
</div>
</div>
Then my suggetion is: moving out the popover template of the crolleable div.
<div #root>
<div #scrolleable>
</div>
<div #tootltipTemplate></div>
</div>
I hope it works for you.

stacking divs with css for Firefox

I am trying to do a website with a loading animation. This loading animation shows well above all other divs in Chrome, but not in Firefox.
I have a menu bar, a main div, and a footer.
In the main div, I have a "main box" (will rotate in 3D) and a loading div.
The loading div hosts the animation for loading.
Html is kind of the following:
<div id="site">
<div id="menuDiv" class="mainSection"> Menu bar</div>
<div id="mainDiv" class="mainSection">
<div id="mainBox">
<div class="mainBoxSide front">
</div>
<div class="mainBoxSide right">
</div>
<div class="mainBoxSide back">
</div>
<div class="mainBoxSide left">
</div>
</div>
<div id="loadingDiv">
<div id="loadingBox">
<div class="loadingBoxSide loading-front"></div>
<div class="loadingBoxSide loading-right"></div>
<div class="loadingBoxSide loading-back"></div>
<div class="loadingBoxSide loading-left"></div>
</div>
</div>
</div>
</div>
<div id="footer" class="mainSection">Footer</div>
I want mainDiv to be on top of the footer, and loadingDiv on top of mainBox.
So in term of z-index : footer < mainBox < loadingDiv.
I created a codepen which isolates the problem: https://codepen.io/3MO/pen/vmOMEG
When opened in Chrome, everything works fine.
When opened in Firefox, the animation is flickering: it goes on top and on background of the mainBox element all the time, and I don't know why.
There is worse: if I provide a background color to the loading div, everything works fine: I created another codepen, the exact fork and defined a background color for loadingDiv: https://codepen.io/3MO/pen/XRbQjQ
Can someone know why it behaves like this? I need to work with a transparent div, so without any background color.
Thanks!
Try adding transform: translate3d(0,0,1px); to the div #loadingDiv.

How to call a particular div using html hyperlink from anothr page?

some
something.html
<div id="div1">IMAGES</div>
<div id="div2"> content</div>
The problem is i have few images in div 1 tag.when i click href it doesn't go to div2 .code is working properly if div1 contains text alone.my problem is my div1 has few images.So when i click my href it doesn't goes to div2

bootstrap well squishing content to left

Using twitter bootstrap, I'm trying to float some .well divs inside a modal box, but it's giving me all kinds of headaches.
Basically, I want each well to contain two things, some text on the left, and an image on the right. I want those two in the same row. Then, I want the wells floating next to each other.
Unfortunately, I can't get the content of the well to work correctly. The text always gets squished to the left, and the image is also to the left, and the entire right side is empty.
Here's my css:
<div class="modal-body">
<div class="row-fluid">
<div class="span4 oneBook">
<div class="well">
<div class="row">
<div class="span2">
<p><strong>Book Title</strong>: Claw of the Conciliator<br>
<strong>Author:</strong>: Gene Wolfe<br>
</div>
<div class="offset3">
<img class="img-polaroid smallerImage" src="http://www.picturesofbooks.com/claw-of-the-conciliator"/>
</div>
</div>
</div>
</div>
</div>
</div>
The div with the class oneBook would be repeated multiple times for however many books I want to display in the modal.
Does anyone have any suggestions to get this to work?
<div class="offset3 span3"><img class="img-polaroid smallerImage" src="http://www.picturesofbooks.com/claw-of-the-conciliator"/></div>