Sliding Header/NavBar - javascript

I have a header but I am stuck at 2 things.
How do I get it all positioned properly? What I want is it to be positioned as a header with a navbar at the bottom of it, then in that navbar I want a div that I can make slide around and I want x amount of tabs.
How would I make the div slide left/right using JavaScript/JQuery? Sorry if it doesn't make sense.
My code is:
<body>
<div class="header">
<div id="topHeader"> </div>
<div class="navBar">
//buttons/text here
<div id="slider"> </div>
</div>
</div>
</body>
I have tried using positioning (absolute/relative) but when I make the navBar relative it doesn't stay at the bottom but if I make both it and the slider absolute, the slider doesn't stay in the navBar. Is there any other way to accomplish it?

I am not able to understand how to make it work. However, here it goes.
The css for header would be:
.header {
display: block; // for that overall div..
}
Then you are having a top header, that would be more like a top header under which you want the nav bar. Ok for that you said you want it to be as header. Then just write it the way it is! And it will be used as a header, I mean just add some margins and paddings so that it has some distance from other objects.
#topHeader {
margin: 5px; // overall 5px pixel for all sides.
padding: 2px; // 2 pixel padding..
}
The nav bar, was the one with may buttons and texts that you will be using as hyperlinks to other pages. Right? So try using something like this:
<ul>
<li>First text</li>
<li>Second text</li>
<li>Third text</li>
</ul>
Now, show them all in a line. Because you wanted them in line, the list items will be shown in a line instead of being shown under each other as default. The x tabs will be the amount of the li used in the list, and it will show all the buttons or what ever you were trying to show. To do that the CSS is:
li {
display: inline;
}
To remove the bullet style, use this:
ul {
list-style: none;
}
This way the navbar will be shown in a line as other websites show.
Second question:
The sliders slide with the help of mouse, not jQuery (Just kidding). You can use scroll bars buddy, jQuery is used to scroll or slide, but that hides once slided. You will be able to see it but when it will scroll back it will hide, and go out of the page untill you slide it back again. You can just stick to the scroll bars to scroll or slide.
That's all!
jQuery slider:
From jQuery API if you check the slide() you will find out, that any event on any element would cause a slide (that will slide the element up and down) in some element.
Here would be an example:
$(document).ready(function () {
$("#slider").click(function () {
$(".navBar").slideToggle(1000); // the time consumed is 1 sec = 1000 milliseconds.
}
});
You can see, that a click on the element with id="slider" would slide the element with class="navBar" and the slide will consume the time of 1 second.
Advice or Suggestion:
I would like to advise you to first learn the basics about the codes that you will use. They are easily searchable via Google, Bing or any other search engine. Because if you will post questions that you know nothing about would cause downvotes for you. That's ridiculous I know. So please when you are going to use jquery and know nothing about it, please try to go to Google and write this search item jquery if nothing found then append tutorial to the search query and find it. Best tutorial would be found on the site of the developer. Like you can learn jQuery on jquery.com and JSON at json.org.

Related

Trying to focus on a specific div on click of an anchor link

I am trying to get focus on a specific div on click of an anchor link.
Here is the code
Link
I am facing a problem that the view is rendered from different partial views like header footer etc.
The header contains the link to a particular div from another view and it has a sticky navbar. When I click the link on nav bar it does focus on the div. But some part of div hides behind the header navbar.
Which looks clumsy according to the UI perspective.
Here is the navbar code:
<nav><li>Link</li></nav>
The example code for page div could be something like
<div id="divname">Some Content</div>
Please give me a clue how can I get the div to show just beneath the sticky menu bar.
Try with giving some margin-top to the div you want to focus on clicking, so that, the navbar will not hide your div and then change your href from
href="somepage.html#divname"
to
href="#divname"
only. Always give unique ids or classes to the elements in HTML so that the machine will not get confused between them and treat two different elements the same way. Hope this will work for you. If not post a response for help.
There's plenty of questions like this one on StackOverflow. Try this one for example:
https://stackoverflow.com/a/59380086/1973005
You can add a pseudo-element (::before) to the linked element in CSS, using the following settings. This creates an invisible block above the linked element which again creates an offset for the linked element position, since the top of that pseudo-element will actually be the position of the link anchor.
.anchor_offset::before {
display: block;
content: ' ';
height: 10em; // Whatever height your navbar is
margin-top: -10em; // Whatever height your navbar is
width: 100%;
visibility: hidden;
}
<div id="divname" class="anchor_offset">Some Content</div>

anchorlink in navigation with slide-function jumps too far

The navigationlink "Leistungen" (marked black in below image) is linking to an anchor where you can find an carousel-slider. The submenu is doing the same + firing the function to slide to the relating carousel-slide.
Beglaubigungen
But out of some reason if you load the following site and try it, its jumping too far (following image): https://bm-translations.de/
The strange thing is, if you then click a 2nd time the same navigation link, it is jumping to the right anchor.
Why is this happening and how to solve this?
In your page, after clicking that menu link, it scrolls down to where that section is in the document.
It's scrolling down to a block element (I assume some JS script is smooth scrolling it to the ID):
<div class="row" id="leistungen"></div>
In your H2 element directly inside of that div, you have your heading with some padding on top:
<h2 style="text-align:center;font-size:24px;padding-top:30px">Leistungen Ihres Übersetzungsbüros</h2>
If you added that padding yourself, go ahead and increase that to 90px (or whatever amount you want).
Or else just add this to the bottom of your css file:
#leistungen > h2 { padding-top: 90px; }
The only alternative is to edit the JS that's creating the smooth scrolling feature.
EDIT: I'd even recommend streamlining your H2 padding in css, not on the page... each of your H2's have their own unique padding-top.
Before:
After:
Found a Solution:
<a onclick="document.getElementById("carousel-selector-1").click();location="https://bm-translations.de/#leistungen"">Beglaubigungen</a>

Make div fixed only inside another scrollable div

I have the page with structure something like this:
<div id="header"></div>
<div id="messages"></div>
<div class="content">
<div id="sidebar"></div>
<div id="content"></div>
<div id="other_stuff"></div>
</div>
Header is the header of the page.
Messages div is the place where I push messages. Sometimes it filled, sometimes it empty.
Sidebar is navigation menu.
Content is a long scrollable div.
And other stuff is other stuff.
I need to make sidebar be fixed in the page on the left side when content are scrolled. But sidebar should never overlay messages and header.
In other words, when I scroll down the page, header and messages are scrolled with content normally. But when I scroll up the page, sidebar should't overlay messages and header div's.
I've used CSS property position: fixed; for this but with this property sidebar overlays messages. How can I fix this with CSS and javascript/jQuery?
If I got you right, you want the sidebar to be fixed starting from a particular point.
This can be achieved through the jQuery. There are many ways, at least 3 I know. Here is the pure jQuery version i use in the cases like that (if you don't want to embed other external JS libraries)
jQuery(document).ready(function ($) {
$fixed_id = $('#Mod128, #Mod190'); //classess or IDs of the modules you want to stick
$(window).scroll(function(){
if($(window).scrollTop()>254) //amount of pixels from the top of the viewport when the sticky styles applied
{
$fixed_id.css({position:"fixed", top:0, width:"18%"}); //sticky styles items when scroll to a particular place
}
});
});
Other ways of doing that are using other JS libraries, I know 2 of them:
1) jQuery Waypoints
2) stickyjs.com
Hope that helps.
Its good if you can make jsfiddle of it or else I think something like below code can help you.
Fix height of your header and messages and give margin to the sidebar with total height of you header and messages.
#header, #messages {
height:3em;
}
.content #sidebar {
position:fixed;
margin-top:3em;
width:5em;
}
.content #content,.content #other_stuff{
width:3em;
margin-left:5em;
}

Bootstrap Affix

I'm trying to use Twitter Bootstrap's new affix option, but I can't quite get it right.
I have put together an example at http://jsfiddle.net/yPgUu/1/ and the relevant part is
<ul class="nav nav-list" data-spy="affix">
The left nav starts off at the correct position. However, as you scroll down, then there is a gap at the top of the nav. I'd like the nav to always be at the top of the current view, instead of being a gap.
I've also tried playing around with data-offset-top="200", but that just seem to makes the menu bounce around.
What am I missing?
OK, so this needs to be done in two parts.
http://jsfiddle.net/yPgUu/2/
First, assign data-offset-top="50" and then modify the affix property in css
.affix {
top: 10px;
}​

How do I create a scroll and sort with thumbnail pictures?

I need to create a simple horizontal scroll from a slew of pictures a friend sent me. I don't really work much with javascript as I think that is what I need to use to accomplish this, but I wanted to ask here first to see if there was a more viable option. Here is a shell pic of what he needs:
In which the thumbnail of pics will be displayed side by side in the red to orange gradient box, where the arrows on each side shift the pics. The sorts at the top would need to change the way the pics are arranged from left to right.
I am not looking for a step by step on how to create this. I am just asking for advice on how I should go about accomplishing this. I am assuming the easiest method is maybe jQueryUI but wanted your advice - maybe it is even doable in HTML 5 now?. Thanks!
Make a container element that is the size you want the visible potion of your slider to be, then add a child element that can be moved around to shift what content is currently viewable:
<style>
#container {
position : relative;/*necessary so its child can be positioned absolutely*/
width : 500px;
height : 200px;
overflow : hidden;
}
#container ul {
position : absolute;
top : 0;
left : 0;
list-style : none;
width : <total number of LI elements times their width, so eight LI elements would be 800>px
}
#container li {
width : 100px;
float : left;
}
</style>
<div id="container">
<ul>
<li>item 1</li>
<li>item 2</li>
...
</ul>
</div>
<script>
$(function () {
$('#left-nav-button').on('click', function () {
//use `.animate()` or `.css()` to move the UL element to the left (Hint: negative `left` value)
});
$('#right-nav-button').on('click', function () {
//use `.animate()` or `.css()` to move the UL element to the right
});
});
</script>
Here is a simple demo on jsfiddle: http://jsfiddle.net/qML6L/
As for the sorting, you could accomplish this nicely with jQuery Isotope. I suppose you could just put the pictures in a very narrow div and use the fitRows layout mode.
As for the sliding, serialScroll would work, although something like jCarousel could also be an option.
Something like jCarousel may work for you.

Categories

Resources