I am using this website for making a CSS lightbox.
After I put the button on top of my webpage, the light box is appearing only on the top division (div tag) of the website. I want the light box to appear in the middle of the website. Can anyone help me in resolving the issue? Photos attached before and after. The light box is appearing only on the top not in the center of the webpage.
Before:
==============================================================
After:
I looked at the css in the URL you mentioned. The .white-content and .black-overlay divs shouldn't be inside other divs. Only the link that says "light box here" (or maybe it's a button instead) should be contained in the top div.
Related
On a website I'm working on I got images inside a container that need to appear over the text on hover. This works smooth BUT..
Whenever an image appears it stays in the same location as the previous hover. I am trying to make the images only appear over the link it is associated with but it won't work.
I have some JavaScript running to randomize the link colors.
You can find the webpage in action over here:http://bravenewfashion.com/menu.html Its on the tab titled 'Biology meets Fashion'
Thanks for the working example. If you nest the image inside of the a tag, it will automatically position itself next to the link. You can then add some rules for top and left to position them over the link like your website does now.
Working JSFiddle Here
I'm very new to jQuery so only using the plug ins at the moment. I have downloaded a carousel slider which you manually slide, to view images with text information underneath, then you can click on more (at the bottom of the image/text box) and another box slides to the right with more info etc. I then added text links to this box that slides out to enable the visitor to see the images bigger using the light box plugin.
When I click the text link to open light box (to see the image bigger), the carousel text box that slid out stays in place (over the light box image) so I have to manually click the 'x' in the corner of the carousel box to view the image...
Does anyone have any thoughts on the sort of code I would need to implement into this... would it be adding code to the .js file of the carousel to tell it to close when lightbox is in use????? if so PLEASE what kinda thing would it be?
Try to find the css classes of your lightbox popup and of your carrosel and set the biggest z-index to lightbox div and a not so bigger to the carrosel div. In this way the first will appear over the last one.
My head is about to explode as I try to figure out the reason why my dropdown menu stops working as soon as the page jumps to an anchor. There is some JS involved in the jump, too, but the same problem existed even with a plain html anchor jump.
The page is at http://mincovlawyer.com/doc/euro-excellence
As you load the page, please hover over "The Law", "About" and "The Goodies" and see how the dropdown is supposed to operate.
Then click any of the links in the sidebox to the right, for example Alt. #1.
Then hover over the menu items again and observe that no dropdowns emerge anymore.
I would immensely appreciate any guidance in this regard.
The rollover breaks even if you just scroll down the page. The rollover menu is positioned absolute and the navigation is positioned fixed. You could add 'position:fixed' to your rollover menu or you could add the scroll offset in your drop down menu code.
To set 'position:fixed':
At line 8 of the anylinkmenu.css file, change the position:absolute to position:fixed.
It looks like they're working, but they are above the top of the page. Before clicking on any of the links, scroll down just a little bit. Then hover over "The Law" and you'll see your menu shifted vertically.
Now that's a lot of code...
Where's your menu created? The mouse-over stuff
Question1:
Why even using any javascript for an inline-anchor? Using #links scrolls to said position anyways, even without JS?!
I have a jQuery conundrum that I'm not sure can be resolved. Inside a content slider I have absolutely positioned divs creating a tool-tip style pop-up on hover. Because the containing content slider overflow must be set to hidden, the tool-tip pop-up gets cut off where it overflows. I would like the pop-up to display in full when overlapping the slider it is contained within. If anyone has a workaround for this I'd be very appreciative!
Here's a link to my working file from which you can see the problem and the code.
Many thanks for any advice.
Your animation inside 'slidesContainer' relies on overflow:hidden so the large image doesn't stick out of the div and the only way for you to get the balloons pop out is to remove that overflow:hidden and make it visible
I don't think you can have the two at the same time
Right, so I don't think there was a straight forward solution so what I did was change the script to refer to div IDs instead of referring to the 'next' div. I moved the pop-up div's outside the slide element and absolutely positioned them relative to the page rather than the link. It's more long winded but works fine! Just means you need to refer individually to each pop-up div in the script. Thanks for you help anyway!
I've created a custom Fancybox implementation that displays the title on the left-hand side of the image. The problem is that inside any galleries, links inside the title of the image can't be clicked because the fancybox-left link sits above it and blocks the click. You can click the first link in the gallery because the left button does not appear.
I've tried changing z-indexes and all that, but am currently stuck. Any help would be great.
You can find the implementation here.
You can add this css
.fancybox-left {
left:7.5em;
}
this will move left link to the right (it will display on the image)