I am using a JPG overlay with a reduced opacity for an effect, however I want it as an effect only and make the content below that div clickable. Is that possible, thanks :)))
Thanks for your comments everyone. I guess I'll have to think of something else because the JPEG covers the whole page :)
Well there is pointer-events:none; but only few browsers modern browsers (and IE11) support it.
https://developer.mozilla.org/en/CSS/pointer-events
Yes, its possible
Use pointer-events: none along with conditional statements of CSS for IE11 (as it does not work in IE10 or below), you can get a cross browser compatible solution to achieve this.
Using AlphaImageLoader, you can even put transparent .PNG/.GIFs in the overlay div and have clicks propagate through to elements lying bellow.
CSS:
pointer-events: none;
background: url('your_transparent.png');
IE11 conditional:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;
Here is a basic example page with all the code.
No, it's not. The overlaying element will always intercept the click. One possible workaround is to bind a click event to the overlaying element, and then get the current mouse position & compare that to the position of the element underneath in order to determine whether or not that element should register a click. But chances are there is a much better way of accomplishing this. Without seeing your code, however, I have no way of knowing.
one simple trick i have found, althoug not very w3c, is to encapsulate the div into a span and use that span class to make the overlay.
That way the whole thing will be clickable , and the div will behave like a div
Related
I'm looking for some code which allows to scroll just through whole images on my landing page.
I don't really know how to explan but it's exactly the style on tesla.com. Every scroll on the mousewheel scrolls down one whole image.
How can you make something like this in Css & Javascript?
Best regards,
andy
Surely you can find bunch of working code around, but if you want to create your own you can follow these steps to begin.
Create divs with 100% width and height and position:absolute;
top:0; left:0; transform:translateY(100%).
Your divs will need some status flags like active, hidden, next, prev. Create animations with css or javascript which visually animate the divs but also change and handle these flags.
i.e. transform:translateY(0); to show a div and transform:translateY(100%); to hide a div back again. (This animations are completely up to you)
Finally bind these animation to window scroll event with javascript. If you want you can't bind these to other events like keypress, touch etc.
Now, I got it, what you want you use in your app.
You want to scroll through the whole page with an multiple image in the background should be changed on-scroll.
It can be done nicely using background-image property in CSS some Javascript.
See this demo - Change background image on-scroll.
Use this, it will work like charm.
I have been wondering for quite a while now how can you achieve this: https://www.apple.com/mac-pro/
As I put it in my own terms, removing the scrollbar or hiding it. I know you can easily put overflow:hidden but that wouldn't really solve the problem, as in Chrome for example it will not let you scroll with the mouse-wheel (pretty annoying).
I've been looking for quite a while now how to achieve something similar to that, which by the way I have no idea how to call it (again I search it as hiding the scrollbar, removing scrollbar) but no success yet.
If anyone can point me to the right direction, that would be really awesome!
I think that the page does not fill more than the window , so that is why there is no scroll bar. When you do scroll up or down , there are most likely event listeners that are just altering the content.
body { overflow:hidden } would work in some browsers , but not all - So , to avoid having a scroll bar, just don't have the content get larger than the window.
It seems like a slightly altered take on Parallax Scrolling.
If you google for it, you can find a million and one different ways of doing it, tutorials, examples, templates, etc.
Change overview.css on line no 10
position: fixed;
Remove following from overview.css on line 415 and 8
overflow: hidden;
Just add the code below to your css file.
::-webkit-scrollbar {
display: none;
}
Caution !
This will disable all the scrollbar so be sure to put it in a specific class or id if you just want one to be hidden.
following problem. im using a simple jquery plugin located here
it works fine so far, problem is when im testing it on a touch device (eg ipad2) its not possible to scroll within a div. it does not work with 2 finger swipe too!
i guess the behaviour is not the same to the "standard" scrollbar. but is there any solution to make this touchable?
im in the testing phase, which means the body code is pretty simple
$(document).ready(function() {
function appenddiv() {
var $scrolling = $('<div id="test" class="scrolling">A lot of text in here ...<div id="scroll2"><img src="../images/31670035.jpg"></div></div>');
$scrolling.appendTo($('#container')).scrollbar();
}
$('#scrollbar-link').on('click', function() {
appenddiv();
});
});
<body>
Klick mich!
<div id="container">
</div>
</body>
Do i need something like a "touchable" script which makes it possible to swipe the scroller?
Thanks
:-) Yes, this is definetly an issue...
The root problem is the following:
To create custom scrollbars you need to make DIV overflow: hidden - to hide sys scrollbars. This is OK. BUT on mobile (iPad too) devices from this point your DIV will not be scrollable. It will be (only), if you use overflow: auto ... This is logical - more or less. But drives you to the headache you have now :-)
So, you have to make a choice at this point..
a) you forget your custom scrollbar on touch devices - keep overflow: auto there
b) you implement a drag&drop feature manually - if you detect a mobile device
version b) would be tricky - again. since the event we know as "mousedown" event works differently on touchscreens. There is not only one mousedown - in fact there may be an array of "mousedown"s since you touche the screen with your finger, then you touch the screen with another finger, and so on... so on touchscreens this is a touch[] array...makes sense absolutely, but complicates things...
Either way, I don't know about any less complex solutions... If anyone does, I'm curious about that too!! :-)
We did a lot of testing and put many effort into this issue (and to other issues too) while was working on our NiceScrollbars library project...
I'm here if you would like to discuss this problem deeper! Will try to help
Either way, I don't know about any less complex solutions... If anyone
does, I'm curious about that too!! :-)
In theory, we could add a div with opacity=0.000000000001, z-index -1 (-1 index from the original div. i.e. the original div has a z-index of 10, then the new div would have a z-index of 9) and scroll=auto. The new div would be a copy of the div with scroll=hidden attributes in terms of content and css.
The scroll event would fire via the hidden div and then update the visible div.
Too bad we have to go to that extend, but it seems to be another clean solution/hack beside the fact that you have to duplicate the content or create an element that holds the content height.
I need a semi-transparent image layered over everything in my webpage, but so that users can click through to the form inputs and text fields underneath. The user will not interact with the top image layer.
I'm thinking I can create the image and adjust the opacity in photoshop. Then put the png in a div with the appropriate z-index. But then user clicks still go to that top div, not to the layers underneath.
Is there something more I can do from here, or another method to accomplish the desired effect?
I'm just working with html, css, js. No server side stuff. Thanks!
For a click through image/div, check this answer:
Click through a DIV to underlying elements
.
Quoting code:
CSS
pointer-events:none;
background:url('your_transparent.png');
IE conditional
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png',
sizingMethod='scale');
background:none !important;
Here is a basic example page with all the code.
http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html
Update:
You can combine it with this technique http://jsfiddle.net/jpCfz/6/ from Make overlay background click-through-able for IE (the question ays it works in IE but not in Firefox), or you may need a bit of JavaScript that is described in Click through a DIV to underlying elements other answer than quoted above.
Update 2:
I didn't want to open this because maybe you have good reasons to do it this way, but obviously, as mentioned in the other answer, you may consider using a background image and opacity instead (so the picture is below the content not on top of it) and then you don't need to worry about clicking. If this is possible in your case, go for it.
You might want to think about this in the opposite way: form elements on top, image behind.
Encapsulate the form elements in a container with a white background and adjust opacity on this container element. Let your image sit behind the content and use absolute positioning to isolate it from the rest of the DOM layout.
<div id="image" style="background: url(...); position:absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
<div id="content-container" style="background: #fff; opacity: .6;">
<!-- form elements, etc -->
</div>
Should get you close to the effect you want without having to fight the browser's default event handling.
I'm working on a script that fades in and out both an image and a div I have set behind the image when you hover over the image. I'm having two problems:
The fades on the image and div don't seem to move at the same speed even though I have them set to.
I can't figure out how to get the div's to only show for the image you hover over. If I could type ("this" div.info) as an object, it would work fine. Is there a way to do that?
I can't get $(".info",this), $(this).find(".info"), or $(".info", $(this).closest("li")) to work.
Result: I have found the solution. I was able to get it to work by using lthibodeaux's suggestion and using $(".info", $(this).closest("li")) as the object and making all the functions .fadeTo go here for the result:
http://jsfiddle.net/Z5p4K/7/
Edit:
I found out the image and the div animations really were moving at the same speed, just the image only had it's z-index set on hover, so if you took your mouse off the image while the animation was running, it would appear to move at a different speed than the div when really the image was behind the div, it only appeared to be moving at different speeds because when the div became invisible you could see the image behind it but when it became opaque, the image was gone (making you think the image became invisible when really the div was in front of the image). This was easily fixed by moving the the z-index property from ul.columns li:hover img to ul.columns li img.
The div only had a border around it while you hovered over it. This was easily fixed by changing the border properties from ul.columns li:hover .info to ul.columns li .info
Check out the final version here: http://jsfiddle.net/tV9Bw/
This is the final version because I can no longer find any problems with any of the code; everything is optimized, there are no glitches, and it looks great.
Thanks to everyone who answered and to Yi Jiang for editing this post with better formatting. I'm new to this site so I wasn't sure how to properly format my question.
and a Huge thanks to artyom.stv for fixing the last glitch in the script that I didn't know how to fix.
You've got the general idea. One thing you should know about a selector is that you are able to define a second argument as the scope of the selector, i.e.
$("selectorString", scopeObject)
In your case, make the second argument $(this).closest("li"). It will find the list item containing your image and select .info descendants of that container:
$(".info", $(this).closest("li")).fadeIn(1000);
Change $(".info") to $(this).find(".info") and all will be sweet.
Yes you can use something like $(this).find(".info") as mentioned by Bundy
but as The jQuery constructor accepts a 2nd parameter which can be used to override the context of the selection.
You can also do something like this:
$(".info",this)