I have a list of links to the left and a fixed div with hidden overflow to the right of a web page. The fixed div is wrapped around 3 additional divs with the same height as the fixed div. Each div nested within the fixed div is linked to one of the links in the list to the left of the fixed div.
This works fine, it essentially simulates a hide/show effect with pure html/css. Now what I have been trying to do is highlight the current link selected in the list of links like you would with a menu item in a navigation bar. I did a similar example in jsfiddle.
I can't seem to be able to highlight the current link with pure html/css so I've been attempting to do it with PHP with no success.
Is there a way to do this without Javascript?
a:focus{
border:solid 1px red;
}
will work partially, but only until focus is moved elsewhere.
If the page is reloaded with each click, then you could use PHP to read the #anchor from the URL and add a class to the appropriate link element.
Related
When I create a relative link in HTML, Bot Workshops it links properly, but places the anchor at the top of the page, covered by a navigation bar. Is there a way to make it be lower so that the anchor is underneath the navbar?
If I understand it correctly, when the user clicked Bot Workshops, it should go underneath the navbar.
In your navbar, add an id. For example:
<div id="bot"></div>
Maybe you need to change the display of the anchor link.
a {
display: block;
...
}
You should add a padding-top to the #bot div (approx the height of the navbar plus some space). (This is based on some assumptions below)
I think your navbar is fixed?
If that is the case, the top of the #bot anchor div will be on the top-edge of the browser viewport. But the navbar will be obfuscating some of that content underneath.
This is more of a css/styling issue.
If you do add a padding-top, you might also want to make sure that value is responsive.
I'm wondering if the following is possible. Have a <button> enclosed in a <div> which is enclosed in a parent <div>. On hover of the child <div> have a dropdown info panel that displays information like email and phone number. I've been working on this for a while (see my fiddle link below), but I can't get the drop down to appear anywhere outside of the parent <div> and moreover, the drop should appear directly below the button as opposed to on top of the button itself.
The button name is "Contact"
https://jsfiddle.net/wtj51d2f/5/
Your .navbar class overflow:hidden is preventing from content going beyond, I just try removing that value, and adding some top: 50px on your .drop-content class, and it is showing good.
The .drop-content has to be a child of the .dropdown element in order to be directly manipulated by it in CSS. You can use JavaScript or jQuery to accomplish this effect, or refactor the page so that .drop-content stays within the .dropdown div.
This is what the jQuery might look like:
$('.dropdown').mouseover(function(){
$('.drop-content').show();
});
I have a solution where I have to pop up a custom modal message box for my site. When the modal popup is shown, I have to set color and opacity to the complete page so that the modal popup sticks out.
I inject the below css class to the body tag to do this.
.fade_background
{
background-color: black;
opacity: 0.65;
}
It works for all elements in the page except for the elements which has a fixed position/absolute. I know that the fixed position element has the viewport as parent.
Any idea how can I target fixed position elements too.
Without viewing all elements, it is kind of hard to solve. But in basic lines, I would try to make certain that the elements are as absolute position with z-index below the overlay to highlight the modal window. It would be interesting that you publish the html and css, so I easily solve the issue.
Check to make sure that the fixed and absolute positions have the same class as the rest of them. Also try and check to see if there are any other css styles that are overwriting .fade_background
On the following website, www.josecvega.com, I have a navigation bar with years that link to sections on that same page. Unfortunately it is not working they way I hoped, when the user selects a year it moves to the section of the page and puts that section on the top of the page, I have a fixed div on the top of the page that covers the sections and prevents it from properly displaying. What can I do for this to work?
It hard to explain my situation, but it can be seen by going to www.josecvega.com and clicking one of the years.
Put your anchors earlier in the file. Perhaps use a fixed-height element (the same height as your header) in the margin just before each section and apply the anchor to that.
Or use a script run after the jump and scroll back down X pixels.
Or use a frameset to display the fixed header rather than the position:fixed div you are using now.
I would probably do the latter.
your header (class=bannercontainer") is position:fixed
so this element will not scroll.
if you now click on a year it scrolls the page behind the header.
probably position:fixed is not what you want
I am using ScrollTo and LocalScroll on my single page site, which scrolls in all directions. I have four large divs inside a wrapper, two on top and two below those. Each div is a 'page' of the site.
Onload, the page goes to the 'home' div anchor, at the bottom left of the window/page. My issue is that anytime I try to scroll horizontally from one of the bottom divs to another via my floating nav box, it flashes the content from the div above it before scrolling to the correct linked div.
There is no 'flicker' or 'flash' of any content when the scrolling originates from a top div.
Any help is very much appreciated!
It took some time and tons of Googling but I finally figured this out.
Comment from: Freelancer ID [Member]
I think i've got the problem..
If you put # in the HREF attribute of the A tag, then the window will go up on click to go the ID (which is nothing)
To fix this, Please try to use the following:
- Put "javascript:;" in the HREF attribute of the A tag.
- Or use DIV, SPAN... etc with cursor:pointer css style and onclick event.
This will fix it.
Source: http://blog.freelancer-id.com/index.php/2009/03/26/scroll-window-smoothly-in-jquery