triangle css border scrolling on div - javascript

my problem it's with triangle css border.
You can see all it here, and for explaining well, i will put images of my problem.
What i do was: when I click on a li element, i add a class "activo", and he makes this result:
http://i.imgur.com/J8Zgp5i.png
bassiclly, he add the triangle. But when you scrolling this, the triangle don't go along with. Like:
http://i.imgur.com/sVrlL89.png
Here it's the bin: http://jsbin.com/cexevu/edit?output
Thanks

You have this CSS rule
.it_menuUtilizador nav .it_submenu li .activo:before {
content: '';
position: absolute;
}
You'll want that set to relative, then you'll have to do some CSS to get it positioned where you expect it, as well as fix other problems caused by this change, then it will scroll with the rest of the page.

Related

Get true background color of a transparent element that is positioned absolute

I have a transparent element like that is positioned absolutely
header { position: absolute; top: 0px; width: 100%; }
... and it's on top of a colored div.
How do I get the color of the div below of a absolutely positioned transparent div with javascript?
This is the transparent div (the navbar):
This is the navbar when you scroll down a little bit:
Feel free to ask any questions.
This sounds like you have to actually capture a "screenshot" and look at how the page is finally rendered. As far as I know, that is the only way.
Basically you would need to check the rendered color of a single pixel. Not knowing why you want to do this is critical in is this necessary or not.
One way to achieve this is to use something like https://html2canvas.hertzen.com to take a screenshot of the rendered page, put that into a <canvas> element and then once you have that, check the color of a pixel you know to be inside the header; check https://jsfiddle.net/ourcodeworld/8swevoxo/ for an example.

transform: translateX makes hyperlink unclickable

I made a carousel slider(copied the code from some codepen then made some changes) and it looks something like this. Anyway the problem is that those images have hyperlinks that work unless i make a transform on x axis..for lets say 240px the hyperlinks stops working. What i mean by that its that its unclickable.
This is the structure of the html code.
I made a script that adds style = "transform:translateX(-240px); to the carousel div.
Expected behaviour: the hyperlink should pe clickable.
You can find the code at: https://github.com/AlexxW/AlexxW.github.io
and the webpage at https://watchwhatmovie.tk/ (for some reason its not updated yet)
Try posting code instead of images for better answers.
this question similar to - CSS - Transform function not working on links?
you need to make the link (i.e <a> tag) CSS to display: block; because transform doesn't work on display: inline; (which is default for a tag).
Because no css was provided, maybe the z-index is not correct (the layers). Try this:
.card {
position: /* set this to relative/absolute, depending on your preference */;
z-index: 1;
}

Keep div on top when scrolling but keep margin

title is a little bit stupid. I have a page, probably full of errors. Either way, there's a Navi and a text box. Navi left, text box right.
Navi shall scroll up until it raches top of the window and then stay there. I got that to work so far. Copied and used codes I found, since I am a noob in Javascript.
Something happens to the text box though, just at the moment when the Navi changes from relative to fixed position. The text box ignores the Navi and just writes over it.
I had the Navi on fixed before I used the stick to top script and it all worked fine.
Here's the page:
http://test.pluskat.de/StuckWeit/
Ignore background image.
What to do or what to change? I am totally confused myself by now with all the positioning.
Please help. Remember I'm a noob in Javascript. I might be able to follow you, but please describe what is to be done, so others might be able to learn from it too.
Thank You. You guys are my last hope.
To fix this issue you could try adding below style at the end of the style.css file.
#wrapper
{
width: 1024px; /*Add this if you have fixed width layout else ignore*/
position: relative;
}
#textbox
{
position: absolute;
left: 220px;
height: auto;
}
This is how fixed position works: it takes the element out of the document flow. That's why your div occupies the whole width.
You could try to add a class (i.e. "nav-positioned") to a common container element instead of changeing the position property in your JS.
After you can style .nav-positioned .navi1 and .nav-positioned #Text

Element disappears when animating relative wrapper width with jQuery

I have a strange problem that happens when I animate the width of a relative positioned element which contains an absolute element. While the animation is running, inner element dissapears. When the animation is complete, inner element shows.
Here is the demo:
http://jsfiddle.net/R4Cj5/
When I remove parent element position: relative then inner element is shown while animation is running, but then I can't position it relatively to the parent.
Basically box with the % should be visible al the time
Does anyone have any idea whats happening here?
FIXED : I just added overflow: visible !important; to relative
positioned element
working example : http://jsfiddle.net/R4Cj5/26/
I think it might be a jQuery animate thing. I would love to see a working solution without any hacks, but for now here is something you might find useful! :-)
I basically added another function in the animate, upon completion it will animate the 90% to hover above the progress-bar
complete: function() {
$percent.animate({top: "-26px"})
}
in this use-case scenario, you can also remove/comment out the top: -26px from .progressbar .percent in the stylesheet. Also I added height: 20px; to the styling for .progressbar .percentage so you could see the % change as it glides across.

Nivo Slider Thumbnail / ControlNav not positioning inside slider

This is the first time i'm trying out Nivo Slider, so bear with me here --
I'm trying to position my controlNav thumbnails INSIDE the slider (I want it in the center, 15px from the bottom of the slider), but so far using position:absolute and left and top attributes just make the entire positioning of the thumbnails position around the body instead of the slider.
Am I doing something wrong? I'm looking online for solutions but I just can't find any. Maybe I'm searching for the wrong keywords?
The site I'm testing it out with is [link removed]. I've reset the thumbnails to the original centered below slider layout, if you want to fiddle with it inside the console it'll be easier.
If when you say "thumbnails", you mean the small pager icons then you can change the css to:
#front-showcase .nivo-controlNav {
z-index: 10;
position: relative;
bottom: 40px;
}
Here I removed display:block and you can adjust the 40px to what ever will suit your layout needs.
In your CSS, set the positioning properties on .nivo-control instead of nivo-controlNAV.
This worked for me by adding to your <head>:
<style type="text/css">
.nivo-control {
position:relative;
top:-45px;
}
</style>
Ah, looks like i've found the answer with help from #aditya and #mToce's answers.
Seems that I forgot about positioning the #front-showcase as a relative element, thus making the controlNav position itself with the body element instead of the slider element.
For more information, read this :
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I've solved the thing by entering position:relative; inside my #front-showcase, and entering position:absolute; inside .controlNav.
Hope this helps!

Categories