Using hover through Particles.js - javascript

js and provided a heading inside the Particle-js div. But now I can't use heading1:hover. I already tried
#particles-js {pointer-events : none;}
But it did not work.
Link to my website (you can use inspect): http://freshdesignz.000webhostapp.com/

The problem is, that particle-js overlaps the h1 tag. A possible solution would be to set the z-index for your h1 to a value > 0.
The problem you'll face than is that the mouse pointer only triggers the hover of your h1 and not the particle effect if you focus on the h1 element. You can reduce the with of the h1 to improve the ux

Related

h1 blocking other h1 with anchor in it

I have two h1 elements, one is a subtitle and is placed behind the first one using z-index. I want to have a click on the first h1. This click needs to go to jQuery because I'm going to use it to stop playback of a video amongst other things. I used to have a click on the first h1 itself, but since its a block element this wasn't ideal as it was stretched over the whole page width. So I replaced that with a dummy anchor .
My problem is that I can't get the subtitle h1 to stop blocking the title h1. Even when using z-index. Somehow it keeps blocking the first h1
Ideally the text in both h1's is clickable, but I prefer the title to be clickable.
<div class="title-box">
<h1 class="content-title">
FooFooFooFooFoo
</h1>
<h1 class="content-subtitle"> Bar </h1>
</div>
Fiddle with my problem: https://jsfiddle.net/nL5pn4w2/4/
z-index only works on positioned elements position:absolute , position:relative , or position:fixed
Another option would be to have the non-link h1 ignore pointer events pointer-events: none;
jsfiddle

How to align the overlay with the list of icons on hover- JS /CSS

I have a list of <li>'s and a icon next to it which on hover shows an overlay with the information about the 'test'. something like below:
test1
test2
test3
and so on....
html:
<span class="account-info-icon"></span> // icon is the build using image sprites
<div id ="hover-container>
//details about the 'test1','test2'..so on
</div>
js:
$('span.account-info-icon').on("mouseenter", function(event){
$("#hover-container").show();
}).on("mouseout", function(){
$("#hover-container").hide();
});
The above code works fine to show/hide the div container on hover. However I'm having issues with the positioning of the overlay. im using css to position the overlay, as a result of which, the overlay is always positioned below irrespective of which ever icon i hover.
in short because im hard coding the values of the <div> conatiner the overlay always shows at one place and does not move as per the hover over the icons.
Below is the css im using to position the overlay.
CSS:
#hover-container{
display: none;
position: relative;
top: -750px;
left: 943px;
padding: 2px 0 0 9px;
}
Basically what i m trying is to allign the overlay per the flow of the hover. so when i hover over , say: 'test1' icon, the overlay should display next to it. I'm not sure if this is achievable via CSS or Js.
Any ideas appreciated!!!!
Thanks in advance!
To simplify this exercise, become familiar with two css position values: "position:relative" and "position:absolute". Also, proper container arrangement will help you get favorable results.
On the premise that #hover-container just happens to generically refer to a non-replicated ID property in your html, it can have this css definition:
#hover-container{
display:none;
position:absolute;
padding: 2px 0px 0px 9px;
left:100px;
}
Each instance of your span should then be in a wrapper container to help guide the hover to appear exactly where you want it:
.info-row-wrapper {
position:relative;
}
Pulling all of these together, you have:
<div class="info-row-wrapper">
<span class="account-info-icon"></span> // icon is the build using image sprites
<div id ="hover-container>
//details about the 'test1','test2'..so on
</div>
</div>
Here, the wrapper container gives a shell that the absolute positioned element appears inside of. The absolute positioned element respects the position of the parent html container that is explicitly positioned relative (if not already assigned a css position attribute)
please refer to the fiddle - http://jsfiddle.net/L33jo3j7/4/
Pretty much $el.hover() solves the thing.
and let me know if you have any doubts.
This looks better-
http://jsfiddle.net/L33jo3j7/4/

Increase size of parent div as image gets bigger

My situation is the following: I have page that shows an image but sometimes it's too small, so I need to get the it bigger. I used CSS Transform to do that and works fine.
The problem is that the parent DIV's size does not increase, and there is space in the page for it to do so!
Using overflow on the parent does not help me because it crops the image or add a scroll bar. I need it to grow.
So, I managed to replicate a little what I am talking about here: http://jsfiddle.net/viniciuspaiva/7jJXQ/
When you click in the "Zoom" button, I want the div to grow and the pager below to get down. But I also want the page to load as it is, with the pager on top. Hope it's clear.
As you can see, I use bootstrap on my page. And the zoom button just adds a class to the image:
javascript:var img = $('img.center'); img.addClass('zoom');
Thanks!
Try doing it the other way. Have the image fit to the div, and resize the div instead.
Add this style to the image (assuming .myimg is the class).
.myimg {
display: block;
width: 100%;
}
Try placing this inside of your current div at the end of it before you close your current div. It will force the div to expand to contents.
<div style="clear: both;"></div>
So your div opens, the contents inside, then add the code above, then close the div.
Here's an example of Joseph the Dreamer's implementation. Check it out here. It only relies on setting display: block; and width: 100%;.

Darken Background - Without affecting elements itself. (Overlay?)

I want to darken my background. Normally, its as simple as putting an overlay with a lower z-index than the most front element like seen here:
(source: jankoatwarpspeed.com)
What I want to achieve now is to make the elements behind the overlay STILL be clickable, selectable and so on.
In this example, the links should be clickable, and the text above should be selectable, but STILL be this dark.
I guess I cant archive this with pure CSS, what would be your solution?
Thanks
Just disable pointer events on your overlay:
pointer-events: none;
Example:
http://codepen.io/anon/pen/ebcdz
See this fiddle.My technique is to add the same elements to the overlay div and to set the color of text of the href text to the background color of overlay so that it appears invisible.See this fiddle.
http://jsfiddle.net/5Ux5t/1/
CSS for href within overlay div to make it invisible
#overlay a{
color:black;
}
Actually there are links in the overlay too.I just added the above CSS to make them invisible.See this:
http://jsfiddle.net/5Ux5t/

Son of Suckerfish Menu IE6 - menu hiding behind content

Page - http://blu-eye.com/index.html - contains suckerfish menu which is displaying correctly on the rest of the site, except for this page. The menu items are hidden behind the content below.
The content below it contains a javascript slider with image and text. I've tried changing the z-indexes on majority of elements, but still having no luck.
It only occurs in IE (6 and 7).
Please help!
The drama you have is the use of relative positioned elements, which reset the z-order context on < IE8.
Specifically on div#header, remove the position relative. then on div#cat_528463_divs > ul > li set a z-index (of 1000 for eg). This will fix the nav issue from tucking in under the JS slider – however it will screw up the look of the rest of the top section, because they are absolutely positioning the logo and some other images. So that is going to need to be rebuilt.
IE has a slightly different stacking order of elements so just setting something with a different z-index will not necessarily move it above.
Taking your starting point as your wrapper, add position:relative to it and then work down into your HTML. If you imagine that at your start point, then you need to get your menu div and your slider div to at least the same 'depth'.
You might find adding position:relative to #content as well might help.
You can then change the z-indexes.
Add z-index:100 to the submenu's li's
#nav_528463 li ul li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
float:none;
margin:0;
padding:0;
z-index:100
}
I found this bit of jQuery very handy for your problem:
http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

Categories

Resources