I have to create a banner that expands over content when moused over and then contracts on mouse out. I have managed to create the expand/contract animations and actions but I am having trouble positioning the that the flash file is in to ensure that it's flows over other elements on the page.
Can anyone give me a lesson on doing this. I imagine its a bit of CSS and a little bit of javascript.
Thanks!
Look at wmode=transparent for getting flash files to work nicely with other elements on the page.
If you can add the wmode to the flash object, you shouldn't have any problems.
Just wrap the flash file in a div wrapper and position the div or do whatever you need that way.
differences between using wmode="transparent", "opaque", or "window" for an embedded object on a webpage
Meant to add, if you change the wmode, and wrap it in a div, then you can assign the div a position of absolute and use z-index:99999 to have it above all other elements.
Related
I wonder how to achieve this effect on http://www.squarespace.com. What I mean is:
you scroll down and at one point the image of computer monitor stays at fixed position
after that, the images keep changing while you scroll.
How can you control content and change CSS using Javascript? It should be on window scroll event:
window.onscroll = function () {
// but I don't know what to use here
}
At smaller browser width, the above elements become a carousel, but I am not interested in that.
Because of the tags on this post I'm going to assume that this question is regarding the skrollr library
Skrollr is controlled via HTML data attributes. What you're seeing when the monitor scrolls, and then becomes fixed at a given position, is referred to as "pinning". How you define data attributes in Skrollr can be pretty confusing at first, but once that is understood, the library is kind of a dream to work with.
I printed and pinned Petr Tichy's cheat sheet next to my monitor the first few weeks of my first skrollr project.
An example of pinning in Skroller would be accomplished as such:
<div id="example"
data-100-top="position:fixed;"
data-anchor-target="#example">
These words are pinned 100px from the top of the screen
</div>
The purpose of Skrollr is that knowledge of jQuery/JavaScript isn't really required. The css is manipulated by the library, and defied in the data elements. The above example shows changing the position to fixed, but if you wanted the div to expand 100px from the top you could input width/height css parameters in there, or just about any other css you'd like.
If you're looking for a more robust skrolling library, in which jQuery knowledge is more of a requirement, I recommend you take a look at ScrollMagic (my lack of reputation prevents me from linking to scrollmagic).
I'm writing my first jQuery plugin and part of the functionality involves dynamically generating a "frame div" around each image on a page. The frame has to fit "snug" around the image, as it serves as the relative parent of an absolutely positioned overlay image that is dynamically added.
I want this to be unobtrusive obviously. What can I do to minimize the side effects it will have on a user's own CSS? I guess there are certain problem situations that will be unavoidable, right? I'm thinking for ex. if the user CSS has targeted images with..
div.gallery > img
..child selectors to give them border/margin/etc, as one example.
Is it impossible to dynamically generate a parent div of an element in a way that is "safe" on unknown pages? Will there always be a risk of breaking the user CSS?
I suppose I can always just give a warning in the documentation, but I would love to make it idiot-proof if possible.
It just occurred to me that I could use JQ to read any CSS on the contained IMG .. and then transfer any properties "up" to the new parent div. Is this crazy?
In theory you could copy all styles. This answer even shows a plugin to get all computed styles cross-browser. But that would be an overkill, wouldn't it? If you really want to have that, add it as an option (that defaults to false, preferably). Then let the users fix it by styling the class you provide, as Blender suggested in the comments.
You could use the selector .css, or .height or .width to get any dimension properties of the image, and then generate the div based on that.
For example,
thisWidth = $('theImage').width();
thisHeight = $('theImage').height();
$('yourFrame').css({'height':thisHeight,'width':thisWidth});
Hope this is of some help...
I'm pulling an event list calendar in to my site from a third party provider. It's pulled in using a simple javascript call, and has been placed inside a div on my site. When hovering over an event, you get a tooltip popup that shows more information about it (all driven by javascript). I'm using CSS to put an image as the background for the div, but the tooltip popups are appearing behind the CSS sourced image. I've attempted to set a z-index of 0 for the main div that pulls the background image, and then nest a second div for my javascript with a z-index of 1, but it's not doing anything.
I don't have access to edit any of the javascript for the third party calendar system, so the fix has to be accomplished with whatever I can do on my own site. Unfortunately I wouldn't consider myself a pro at web development, so there may well be a very simply answer I'm not finding, but right now I'm stumped.
Any suggestions? Thanks!
It looks like you're trying to set a z-index for an element whose parent element already has z-index. That's not possible. If you want to set a different z-index on the tooltip element it has to be outside of the first div.
It would be really helpful if you could show us some code.
The main reason why z-index doesn't work could be that you forgot to set position. Z-index only works on positioned elements (position: absolute, position: relative or position: fixed).
The second reason could be the one that #kremalicious mentioned. Setting higher z-index to the child element.
Here I have a dom tree parsed from a html page. I want to select a node in the tree, and highlight its corresponding area in the web page (just like google chrome does, illustrated in the image below). Is there any javascript code to implement this? I tried to wrap the selected tag with a tag, but there are some cases it didn't work. What I need is a general way. Any suggestion would be helpful. Thank you!
I'd probably use a div overlay.
So you'd need to get the node's width, height and offset top and left and then overlay that with a div that has a semi-transparent background-image.
Should be fairly easy to do with jQuery
Want to know How to create modal dialog/pop up without title bar using javascript which will work on both IE and FF.
Thanks.
You're going to have to make a div that sits--absolutely positioned--in the middle of the viewport (or wherever you want it) above all the other elements--using z-index. This is where your content goes. Now, I recommend a film to go behind it, but above everything else--again using z-index. Then place a handler on that film that places focus back on the "modal" div. Also, you might want to place a focus handler all the other elements (not the "modal" div), using event delegation, that places focus back on your "modal" div--just to be sure.
You also might want to look at how jQuery UI does it. You'd only need to remove the title bar from. In fact, you probably could just use that one and mess with the CSS to hide the title bar.
I do this with two divs. I lay one div over the whole screen and make it semi-transparent, then I lay my "popup" div in the center of the screen with a higher z-index. The popup div can then contain whatever content you want.