I have the following script that works a treat showing a hidden div when the image in hovered over. However when I have a lot of text in the hidden div, that I need to scroll down to view, as soon as I come off the mouseover img the text disappears.
Is there a way that I can get the text to stay until the next image is hovered over or for the text to stay with a mouseclick? I changed the first part of the script to mouseclick, with no luck.
Many thanks for your help.
<div onmouseover="document.getElementById('pop-up-box1').style.display = 'block';" onmouseout="document.getElementById('pop-up-box1').style.display = 'none';">
<div id="pop-up-trigger1">
<img onmouseover="this.src='http://griffithsandpartners.com.gridhosted.co.uk/wp-content/uploads/2013/07/Services-banking-black.png';" onmouseout="this.src='http://griffithsandpartners.com.gridhosted.co.uk/wp-content/uploads/2013/07/Services-banking-White.png';" alt="" src="http://griffithsandpartners.com.gridhosted.co.uk/wp-content/uploads/2013/07/Services-banking-White.png" />
</div>
</div>
OK.
Have found it. It's just "on click" !
Related
I'm having an issue making my image clickable. It is a cart style photo with a little number bubble that tells you how many items you have in the cart. The div is clickable but the photo itself is not.
Here is my code:
<a routerLink="/cart">
<img class="cart" src="../../../assets/canoe detail.png" alt="Canoe Cart">
<div *ngIf="quantity" class="quantity">{{quantity}}</div>
</a>
I have also tried adding a click event to the image with a function just logs ("clicking") and I have also tried adding "routerLink='/cart'" to the image tag as well, but neither of these worked.
What am I missing?
Thank you in advance!!
Your code seems fine, should work
<a class="brand-logo" routerLink="/login">
<img src="assets/img/logo-svg.svg" />
</a>
Try removing the other div and check, but should work even with it. This works for me
Add this CSS for a
a{display:inline-block}
Solved! Even though it was visible, it was behind the navbar so changing the z-index fixed it.
a {
z-index: 5;
}
My buttons structure is as stranded as it can be:
<a class="button">click me</a>
They work just fine on click.
But, on touch devices, you can get them to work by tapping at the areas around the text inside the button. When you tab in the center "click me" it just does not work.
It is baffling me and I have not been able to find out why.
You can try it live by going to https://plutio.com from your touch device and try to tab on the Get Started button.
It won't work unless you tab around the button text.
Things I tried:
line height
user-select
box-sizing
appearance
pointer-events to none
I got it please use below code:
.button:after, .button:before{
display:none
}
I have a element in my html as follows.
<div tabindex="-1" onblur="javascript:alert('hellow');">KKKKK</div>
the blur event is fired correctly on my laptop but it can't be fired on mobile(just in IOS device).
anyone know that's why? thanks in advance.
I have got the reason. The elements(such as div form and span) are not clickable in IOS device. so the div can't get focus.
so I fix this problem like this.
<div width="400px" height="400px" onclick="javascript: function(e){e.preventDefault();}">
<div width="200px" height="200px" onclick="javascript: function(e){e.preventDefault();}" onblur="javascript: console.log('blur....')"> inner div</div>
outer div
</div>
but When I click the out div all the screen will be flush.
so I need to fix it. anyone have some advice to me for this.
I am trying to make an input file with an image. I've got a working solution with div inside the blocked label. File uploads and a rounded preview comes. But this is solved via background. Looks like responsive and I am happy.
But validator told me that it's not proper to put div inside a label tag.
So i tried to put an image tag instead of div..
and it doesn't work properly.
http://jsfiddle.net/dkweb/mtsy33k1/9/
<div class="photo_container">
<label for="file_photo_id">
<img class="preview" src="http://javascript.ru/img/ws_2.png">
<!-- <img class="preview" src="https://im0-tub-ru.yandex.net/i?id=3b1992e3e1e8d68d24c678ffc749d2f5&n=33&h=170">
and this doesnt work -->
</label>
<input type="file" name="file_photo" id="file_photo_id" />
</div>
- uncomment the sec img and you'll see.
It depends on resolution of the image. I can't hold it a circled always.
Will you advise on this issue?
They grey area must stay not available for clicking - just a circle with an image inside.
Thanks in advance.
There is a background inside the div. Then I would write a list of links, which then pass over the background image, but it not seems to work.
If the link is located above the background mage, hovering the mouse on that, I do not get the underline of the text as for all other links that are not above the image background.
This is my code:
<div style="min-height:200px;">
<div class="backgroundImg"
style="background: url(/my/url.png) no-repeat; height:140px; width: 140px;position: absolute;>
</div>
<div style="z-index:30">
My link here
</div>
</div>
Sorry for my English, the concept is really easy to understand but hard to explain ... I hope to be able to explain.
Thanks to all, Danilo
Edit:
I found the error ... if you do not use "absolute" propriety in both div, z-index non work.
Thanks for the suggestions! ;-)
Hard to understand, but I'll try:
1) If you have a link above the div with background, try with a different value of z-index on the link or setting a paddin on the link, so the div goes down and you'll see the underline.
2) If you want to have a list over the image background, insert it IN the div with background.
I found the error ... if you do not use "absolute" propriety in both div, z-index non work.
Thanks for the suggestions! ;-)