I need a bit help with this thing I am trying to write. I don't need code, just a bit of help with the logic.
So I have this navigation, that at any point can be a different width with different number of anchors in it. If it happens to be longer than the wrapping container, I must trim it, put "..." and if the user clicks on the dots, the remaining items must show in a dropdown.
Ok for now, but the navigation is also sticky. And when it sticks to top, I must reduce a logo and share (sometimes also language selector) from its width. When it goes back to being static, I must again update it, and show elements that I previously trimmed.
All of those "extra" elements, that I must reduce from the width, are containers somewhere in the website, that do not have special classes or anything special in them, pure content (it comes from a CMS, and that cannot be changed).
I would appreciate any type of help!
Thanks!
If you know the dimensions of the navigation, I would say the following steps might help:
Always have an ellipsis element, with a hidden class, toggled as needed.
Using jquery $('navElement').offset().left + $('navElement').width you get the right end position for the nav.
Now you can get the element at this position, maybe using Document.elementFromPoint(),
Identify all elements after this element, you'll have to figure out the logic for this, make them display block, and wrap all of them within a container dynamically.
now showing hiding that container will result in a dropdown effect.
As long as you can identify the logo and other components you want toshow/hide when sticky using css selectors, when your nav goes sticky, add a parent class to your nav and write css to hide these elements when inside the sticky class.
That is the logic I would follow at a broad level based on your question.
Related
The user can press a button to create new divs on the screen. Each div is the same and has the same z-index. Newer elements display in front of older elements. The user has the ability to drag around the elements. I would like it so that when a user drags an element, that element is now permanently in front of the other elements (until a different one is created/dragged).
Is it possible to do this without keeping track of z-index somewhere in JS and increment it on creation/click? I'd like to avoid this if possible. Is there some way I can use jQuery or something to make a clicked element act as if it was recently created (which I guess is just determined by position in the DOM?)
I assume you are doing something like
container.appendChild(newDiv)
Now, when you click and drag an element, you can move it to the front.
var parent = recentlyClicked.parentElement // or container
parent.insertBefore(recentlyClicked, parent.firstChild)
This inserts your desired div as the first child of its parent, which will move to the top.
Edit: it appears that elements later in the DOM are the ones that are shown on top. In that case, you'll probably want to append the child instead.
recentlyClicked.parentElement.appendChild(recentlyClicked)
On click you could add a class to the element where the CSS targeting that class has a slightly higher z-index. This is probably the cleanest way to do it (no keeping track of z-indexes, just toggling the existence of that class on mouse down & mouse up.
Another idea (not sure if it'd work, but might be fun to try) would be to add a tabindex="0" to all the elements. They can now receive focus. Then in your CSS add a ":focus" state selector targeting those elements. Increase their z-index with that. I don't recall if the focus happens on mouse down or after a full click. It might bring along other side effects line outlines on the element you don't want. And mess with the usability of the tab key on your website. I'd probably not use this unless it's somehow really much simpler in a non-production circumstance.
Here is the setup, I have multiple divs on a page which are full widths and have blocks of color. The number of divs can vary from page to page. Each div with have a class associated to it (light or dark) and I have a logo pinned to the top of the browser window.
What I am trying to accomplish is this. I want to detect when each on of these div (with a common class) reach the top of the browser window. I then want to see if it has a light or dark class (only this div that just reached the top.) and then change the logo on the page depending on that value.
The closest thing I have come across is some onscreen jquery plugins that will add an :onscreen value to the current div that is on the screen. This would be great if I could only add this onscreen attribute when it reaches the top rather than just into view.
Does anyone have any suggestions as to how one might accomplish this?
// jsfiddle example
http://jsfiddle.net/UhrrR/
Funny, I was just looking at a library that does this very thing:
http://imakewebthings.com/jquery-waypoints/
You can add listeners to your elements that will fire off when your element hits the top of the viewport:
$('#myDiv').waypoint(function() {
var color = $(this).css('background-color');
$('img.logo').attr('src', 'logo.png');
});
For an amazing demo of it in use:
http://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/
I completely agree with Chris Hardie that Waypoints is the way to go. I built a simple example based on your description.
https://github.com/imakewebthings/jquery-waypoints
http://codepen.io/cgspicer/pen/FrCgI
Here is the fiddle, I've used my own, because I've started before you posted your fiddle, but the idea is pretty the same.
I have a position of a logo element, and when scroll happens I check whether one of the desired blocks intersects logo block. On success a class from a custom data-trigger-class attribute is assigned to a logo element.
I need to create a horizontal menu that shows all of the possible items given the browser size, the rest of the items are hidden (they do not wrap to the next line). Then there is an arrow button on the far right side of the div, which when clicked, shows the next row of items. How can I do this? I'm not asking for anyone to write the code for me, I just need some direction. Are there any examples online of this? I don't want the arrow button to move the items slowly across the screen. I need it to just "jump" to the next row.
For example if the list of items is made up of three, each li element is 100px long and the total page with is 200px, one of the elements will be hidden. Once the button is clicked the first two items disappear and the last item displays.
There are many ways to do this, you can make the ul position:relative, then the li position: absolute, when clicked, change the positon of lis to show them.
As Ji Guang said. There are many ways of doing this. All that matters is that how you would like to implement it, or better said how the rest of your project is implemented.
For the menu as Ji Guang said, you can create a horizontal style list (maybe use float left on li for that). The ul must be now declared as relative and fixed height or width with overflow hidden, or better off fix the height as much you want and set width relative to the page. For the arrow to go throw the rest of the rows what I guess you want is some type of carousel. Now there are plenty of good plugins available online for that. Or you can always have it done yourself. If you are planning to do it yourself then you need to follow Ji Guang advice. Put the menu ul inside another div and then play with ul's positioning.
A requirement for a current project of mine involves "highlighting" an HTML element in the context of a page. That is, I need to provide some sort of visual effect that decreases the brightness of the surrounding page while leaving the element at full brightness.
To achieve this, I'm trying the following approach:
Determining the highest z-index value of any element on the page (using JavaScript).
Creating an element to function as a "backdrop" on top of the page. This is just a <div> with a translucent gray background image, sized to 100% of the width and height of the <body> element, with position: fixed. I set its z-index to 1 greater than the highest z-index I've found on the page, with the intent that it will overlay every other element on the page.
Change the z-index of the "highlighted" element to 1 greater than the backdrop. The intent is to allow it to sit on top of the backdrop, which in turn sits on top of the rest of the page.
I got it working on a quick test page:
http://troy.onespot.com/static/stack_overflow/z_index_test.html
but when I tried to set it up on a few actual Web pages, it didn't work in all cases. For example:
http://troy.onespot.com/static/stack_overflow/z_index.html
Here, I've inserted two "dummy" elements on a copy of a Jacksonville.com article page, both with a class of test (if you're looking at the page source, they're at lines 169 & 859).
I also added some JavaScript (using jQuery) at the very end of the page that functions as I've described above.
The first <div class="test"> does function as I'd expect it to. However, the second one does not - it seems to still be stuck beneath the "backdrop" element, despite having a higher z-index.
I think this may have something to do with stacking contexts, but after reading through the relevant W3C docs (http://www.w3.org/TR/CSS21/visuren.html#z-index & http://www.w3.org/TR/CSS21/zindex.html), I still can't fathom why this is happening. I'd appreciate anyone more familiar with z-index and stacking order than I to take a look at my examples and let me know if anything looks suspicious.
Please note that I've only tested these examples in Firefox v3.6.
Thanks very much for any help!
The problem is that the second test div is inside a bunch of other HTML elements, one of which must be creating a new stacking context (it may be the #wl-wrapper-tier-1 div). Basically, a new stacking context is created whenever an element is positioned and has a z-index other than auto, see this MDC article for more info on stacking contexts.
Ultimately this means you can't achieve your desired effect reliably with this method. I think you're probably better off composing 4 divs to surround the target element.
If the element that you're highlighting is inside a different element (stacking context) with a z-index lower than the backdrop, it will not appear higher than the backdrop, since the element's z-index only controls stacking order within that parent.
The only good solution is to clone the highlighted element and add the clone to the <body> tag.
Beware of inherited CSS styles, which would be lost.
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.