I have a simple menu and from it, i am using jQuery to toggle visibility of few DIV's.
Code is pretty straightforward, like bellow, and if i am not asking too much, i could use some help with additional functionalities.
<div id="one" class="navLinks"> content 1 </div>
<div id="two" class="navLinks"> content 2 </div>
<div id="three" class="navLinks"> content 3 </div>
<div class="nav">
<nav>
1
2
3
Normal Link
</nav>
</div>
$('nav a').click(function() {
$('.navLinks').hide();
$(this.getAttribute('href')).slideToggle('slow')
});
So, currently, if the user click on the link, a div will slide from the top, but except that, i would need 2 more things.
If user opens, lets say link no.2, and after that, he wants to close it by clicking on the same link, div should slide up (instead of down like it currently does).
Similiar to this, if the user opens link no2, and after that wants to open link no1, after the click, that div would need to slide up and be shown.
I know i am asking too much, but any help would be greately appreciated.
FIDDLE http://jsfiddle.net/4rfYB/38/
I suggest using jQuery's not() to exclude the requested element from those being hidden.
That way, you can hide all content areas that are not the requested one.
I've also used slideUp('slow') instead of hide(), purely for stylistic reasons.
$('nav a').click(function() {
var $requested = $(this.getAttribute('href'));
$('.navLinks').not($requested).slideUp('slow');
$requested.slideToggle('slow')
});
.navLinks {
display: none;
color: white;
}
div#one {
background: red;
height: 100px;
}
div#two {
background: blue;
height: 80px;
}
div#three {
background: black;
height: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<nav>
1
2
3
</nav>
</div>
<div id="one" class="navLinks">content 1</div>
<div id="two" class="navLinks">content 2</div>
<div id="three" class="navLinks">content 3</div>
You can do something like this:
$('nav a').click(function() {
$(this.getAttribute('href')).toggleClass('open').slideToggle('slow',function() {
$(this).siblings('.open').slideToggle('slow').toggleClass('open');
});
});
http://jsfiddle.net/4rfYB/39/
Related
I am trying to create a sticky menu using CSS Bootstrap affix and list-group menu.
I manage to get most of it to work except for when the user scrolls down.
When the user scrolls down, the menu seems to take the entire with of the page.
I tried to set it up via data attributes
using something like this
<div class="container">
<div class="row">
<div class="col-md-3" id="leftCol">
<div data-spy="affix">
<div class="list-group list-group-root well">
<a class="list-group-item" href="#introduction">Introduction</a>
<a class="list-group-item" href="#features">Features</a>
<a class="list-group-item" href="#dependencies">Dependencies</a>
</div>
</div>
</div>
<div class="col-md-9" id="mainCol">
Some long text for the body along with some tables.
</div>
</div>
</div>
But the data attribute did not make the menu stick! it just kept it on the top.
So I tried to use JS to get the job done like this
$(function(){
$('#leftCol').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
});
});
I created jsFiddle to show you the current behavior.
How can I fix this affix so when the user scrolls down the menu maintain the same shape?
First of all, you should use either data-attributes or JS.
I updated your jsFiddle. The position of id="leftCol" was changed:
<div class="col-md-3" >
<div id="leftCol">
...
</div>
</div>
and style was added:
#leftCol {
width: 220px;
}
Also, you should add media queries to remove affix from mobile view.
As an "unacceptable" workaround, I set a max width of the menu to 250px like so
.list-group.list-group-root {
padding: 0;
max-width: 250px;
}
I am not sure how to get it to work without adding a max-with the max with should be defined by the parent. In this case class="col-md-3"
UPDATED
javascript to the rescue!
I added the following JS code to solve this problem once an for all.
It basically resize the menu everytime affix.bs.affix event is fired
$(document).on('affix.bs.affix', '#docs-menu', function() {
$(this).width($(this).width());
});
From the docs
affix.bs.affix => This event fires immediately before the element has
been affixed.
Ok I believe I got most of the code working like you want it to. The main changes I made were adding this CSS:
#leftCol {
display: block;
height: auto;
padding: 0;
width: 100%;
}
.navbar-fixed-top-again {
position: static;
top: 60px;
z-index:1031;
}
.navbar-inner {
background: red;
padding: 5px;
}
.affix {
position: fixed !important;
}
and I changed up some of the structure on your HTML:
<div class="container body-content">
<div>made up content to allow the navigation to scroll more before it becomes sticky. This height will need to be set in the data-offset-top which is in the leftCol DIV just below this content. The same will apply if you need to set it for a footer offset.</div>
<!-- new nav section -->
<div class="col-md-3 navbar-fixed-top-again" id="leftCol" data-spy="affix" data-offset-top="80">
<div class="navbar-inner">
<div class="list-group list-group-root well">
*the rest of your code*
</div>
</div>
</div>
</div>
The main problem now is having a sticky navigation menu with variable height. If you notice when you scroll your reading content underneath jumps up and gets hidden. It seems that it is possible to fix this using JavaScript (link to SO question).
Heres the link to your updated Fiddle. Hope that helps.
I have divs that all occupy the same space, and I want to set up jQuery that has one div come on top of the other as different tabs are clicked. I assume this has to be done by changing the z-index attribute using a data-* attribute that connects the tab to the div.
/*The tabs to be clicked*/
<ul class="tabs">
<li class="tab" data-tabcontainer-id="websites" style="background-color:#1aa3ff;">Websites</li>
<li class="tab" data-tabcontainer-id="sitemaps">Sitemaps</li>
<li class="tab" data-tabcontainer-id="pages">Pages</li>
</ul>
/*The divs that need to come on top of each other*/
<div id="websites" class="tabcontainer">Websites</div>
<div id="sitemaps" class="tabcontainer">Sitemaps</div>
<div id="pages" class="tabcontainer">Pages</div>
DEMO
http://plnkr.co/edit/aNomjINfbYYrRUhMj63A?p=preview
This is how you can change the z-index property using the data attribute.
JS:
jQuery(document).ready(function(){
$('.tab').click(function(){
var target = $(this).data('tabcontainer-id');
$('.tabcontainer').css('z-index', '0'); //resets z-index to 0 for all other
$('.tabcontainer#'+target).css('z-index', '1'); //sets z-index for current target to 1
})
});
I wrote the answer just to meet what you were asking. But reading your question I think you should have a look at the tabs feature by jQuery UI. May be it will help.
https://jqueryui.com/tabs/
madalin ivascu's answer is quite right according to me.
May be bit off the topic, but you can use Jquery UI for the tabs. Easy to implement and work with.
You don't need to worry about managing the z-index in this case. But it might not be appropriate for your case.
<div id="tabs">
<ul >
<li>Websites</li>
<li>Sitemaps</li>
<li>Pages</li>
</ul>
<div id="websites" class="tabcontainer">Websites</div>
<div id="sitemaps" class="tabcontainer">Sitemaps</div>
<div id="pages" class="tabcontainer">Pages</div>
</div>
Fiddle : https://jsfiddle.net/uxwyj4d4/
better go with toggle display:block/none
$('.tabcontainer').not('.tabcontainer:first').hide();
$('.tab').click(function(){
//toggle active class on tabs
$('.tab').removeClass('active');
$(this).addClass('active');
//show corresponding tab container
var id = '#'+$(this).attr('data-tabcontainer-id');
$('.tabcontainer').hide();//here you can go with another class like above that will toggle between block and none
$(id).show();
});
demo:http://plnkr.co/edit/gPIwv80vUIUTQ46Bderj?p=preview
Example for showing tabs using vanilla js, no jQuery is required.
This example use only display instead of z-index.
// get tabs
var targets = {
websites: document.getElementById('websites'),
sitemaps: document.getElementById('sitemaps'),
pages: document.getElementById('pages')
},
show = function(target) {
hideAll();
targets[target.dataset.tabcontainerId].style.display = '';
},
hideAll = function() {
// hide all tabs
Object.keys(targets).forEach(function(key) {
targets[key].style.display = 'none';
});
};
// when click on link show tab
document.getElementById('w').addEventListener('click', function(event) {
show(event.target);
});
document.getElementById('s').addEventListener('click', function(event) {
show(event.target);
});
document.getElementById('p').addEventListener('click', function(event) {
show(event.target);
});
#websites,
#sitemaps,
#pages {
position: absolute;
top: 150px;
width: 100px;
height: 100px;
}
#websites {
background-color: red;
}
#sitemaps {
background-color: blue;
}
#pages {
background-color: green;
}
<ul class="tabs">
<li id="w" class="tab" data-tabcontainer-id="websites" style="background-color:#1aa3ff;">Websites</li>
<li id="s" class="tab" data-tabcontainer-id="sitemaps">Sitemaps</li>
<li id="p" class="tab" data-tabcontainer-id="pages">Pages</li>
</ul>
<div id="websites" class="tabcontainer">Websites</div>
<div id="sitemaps" class="tabcontainer">Sitemaps</div>
<div id="pages" class="tabcontainer">Pages</div>
I've been trying to make the share buttons to appear when hovering on an article "Mashable style" but I can't seem to get it right. Any help will be appreciated.
<div class="c-container">
<article class="c-news">
<header>
<a href="#">
<img src="http://a_really_long_url.jpg"
alt="post-image" class="post-image">
</a>
</header>
look at jsFiddle
You need to use the :hover CSS selector:
First hide the elements:
.st_facebook_hcount, .st_twitter_hcount {
position:relative;
display:none; /* Hide It*/
width:6rem;
top: -1.2rem;
left:18rem;
}
Then set the :hover to show:
.c-news:hover .st_facebook_hcount, .c-news:hover .st_twitter_hcount {
display:inline-block;
}
The demo http://jsfiddle.net/nJRtm/6/
G'day!
I have a page which has Horizontally Scroll feature going on there.
I have a side bar and a content box
In side bar I have 5 links, say LINK1 - LINK5
In the content box, I have 3500px of width which contains 5 sections of divs of 700px each.
So the page initially loads in the first 700px div. So if I click on Link 3, it will smoothly scrolling to 3rd div section.
However, I would like to load the page in the 2nd div.
I was able to do this using scrollLeft()
<script>$("div.content1").scrollLeft(700);</script>
But the horizontal scrolling will be messed up. The second div will act as first div, which means when I click LINK1, it won't be scrolled back.
Help?
*I think this code is needed
<script>
function goto(id, t){
//animate to the div id
$(".contentbox-wrapper").stop().animate({"left": -($(id).position().left)}, 1200);
}
</script>
This is sample of HTML code
<div id="sidebar1">
<span class="upper">Foods</span><br />
<span class="lower">Rice, Noodles & Pasta</span><br />
<span class="lower">Snacks & Tidbits</span><br />
<span class="lower">Canned & Ready to Eat</span><br />
<span class="lower">Breakfast Cereal</span><br />
<br />
This is sample of my content box
<div class="content1">
<div class="contentbox-wrapper">
<div id="rice" class="contentbox" align="center">
<h2>
Rice, Noodles & Pasta
</h2>
<section id="product">
<ul class="clear">
<li data-id="1">
<div href="#">
<img src="images/products/f1/_DSC4640.jpg" width="200" height="200" />
<h3>Maggi Curry Flavour</h3>
<p>(5 + 1) x 79 G</p>
<h2>Price:$2.40</h2>
</div>
</li>
I've created an example based a little on your markup. I hope, that it is, what you're looking for. I also made some minor changes on your JavaScript. See the explanation below.
HTML
<nav>
<a>Item 1</a>
<a>Item 2</a>
</nav>
<div class="contentbox-wrapper">
<div>
<h2>Item 1</h2>
</div>
<div>
<h2>Item 2</h2>
</div>
</div>
If you can apply a markup like this, where the index of each link corresponds with the index of each content container, then you can get rid of all the ids that you need in the JavaScript part.
CSS
div.contentbox-wrapper {
position: relative;
width: 400px;
height: 200px;
overflow: hidden;
overflow-x: scroll;
font-size: 0;
line-height: 0;
white-space: nowrap;
}
div.contentbox-wrapper > div {
display: inline-block;
width: 400px;
height: 200px;
text-align: center;
}
div.contentbox-wrapper > div:last-child {
margin-right: 0;
}
JavaScript
var container = $('div.contentbox-wrapper');
var boxes = container.children();
$('nav > a').click(function() {
container.stop().animate({
scrollLeft: boxes.eq($(this).index()).get(0).offsetLeft
}, 350);
});
Try to store selectors that you use multiple times in variables. The advantage is, that you don't need to re-query them again. This JavaScript does nothing else, then getting the offset of the box that corresponds with the clicked link, using .index() and .eq(). This value is then used in the .animate()-function to scroll to this position.
Demo
Try before buy
A few notes
If you have an ampersand within normal content like "Rice, Noodles & Pasta" you must escape it like: &.
Don't use align="center". It is deprecated since HTML4. Use CSS for this purpose.
I there a way in javascript to make the page jump to a specific location on the page, such as
<span id='jump_to_this_location'></span>
I do not want to re=load page,
2020 Answer
A simple and modern way to do this would be like this:
document.getElementById("jump_to_this_location").scrollIntoView({behavior: 'smooth'});
The behaviour: 'smooth' argument makes the jump... well... smooth. Which is something probably most of you want.
You can set the location.hash property, like this:
window.location.hash = "jump_to_this_location";
You can give it a try here.
If you use jQuery it's pretty simple here is some sample code
Bellow is the #nav where I stored all the clickable links to the articles in this example
Note: I used the goto attribute(custom) to pass the ID for the target Article
<div id='nav'>
<div goto='text1'>Link To Text 1</div>
<div goto='text2'>Link To Text 2</div>
</div>
Here, bellow are the Articles you will be jumping to.
Note: The JavaScript in the last code sample takes the distance of the tag to the top of that page and then scrolls the page down by that same distance measurement taken.
<div id='articles_container'>
<article>
<h1 id='text1'></h1>
<p>
Sample article Paragraph 1
</p>
</article>
<article>
<h1 id='text2'></h1>
<p>
Sample article Paragraph 2
</p>
</article>
</div>
Finally this is the javascript + jQuery that makes it all work, this solution is best when you are working with fixed and layered components.
<script>
$(document).ready(function(){
$('#nav div').click(function(){
var id = "#" + $(this).attr('goto');
var top = $(id).position().top;
$('html').scrollTop(top);
});
});
</script>
javascript jquery
This can be accomplished by first creating an anchor for the page landing spot using HTML.
<a name="jumpHere">somewhere</a>
Once you have the landing site, simply use the JavaScript:
window.location = 'yoursite.html#jumpHere';
I realize this question is five years old, but people still find it, and it seems a shame no one has ever answered it...
Specifically "Without Reloading Page" as asked,
and where there is a name="HERE" or id="HERE" label somewhere in the html ("HERE" is of course an example of any label),
then Javascript can do:
if (navigator.userAgent.match(/Chrome|AppleWebKit/)) {
window.location.href = "#HERE";
window.location.href = "#HERE"; /* these take twice */
} else {
window.location.hash = "HERE";
}
Works for me.
You don't need JS for that.
Accessing yourpage.html#jump_to_this_location will do. This can be done through a link (jump)
The rough sketch illustrates using the id attribute in element section to jump to different parts of the page using the anchor in navigation. That is, in your navigation:
<li></li>
<!DOCTYPE html>
<html>
<head>
<title>Go to section</title>
<style type="text/css">
.navigation {
position: fixed;
background-color: green;
width: 100%;
height: 50px;
margin-top: 0px;
margin-right: 0px;
}
.navigation li {
display: inline;
width: auto;
list-style-type: none;
font-size: 20px;
text-decoration: none;
}
a:hover, {
background-color: white;
}
a: focus {
color: lime;
}
</style>
</head>
<body>
<nav>
<ul class="navigation">
<li>About US</li>
<li>Our clients</li>
<li>Our Offices</li>
<li>Projects</li>
<li>The team</li>
<li>Contact US</li>
</ul>
</nav>
<section id="about">
<div class="about" style="background-color: skyblue; height: 500px;">
</div>
</section>
<section id="clients">
<div class="clients" style="background-color: blue; height: 500px;">
</div>
</section>
<section id="branches">
<div class="branches" style="background-color: lime; height: 500px;">
</div>
</section>
<section id="samples">
<div class="samples" style="background-color: olive; height: 500px;">
</div>
</section>
<section id="team">
<div class="about" style="background-color: grey; height: 500px;">
</div>
</section>
<section id="contacts">
<div class="about" style="background-color: gold; height: 500px;">
</div>
</section>
</body>
</html>
Along with the "#", you might want this CSS attribute: This one "jumps" to the target:
scroll-behavior: auto;
This one smoothly scrolls the screen until it gets to the target:
scroll-behavior: smooth
Reference: https://www.w3docs.com/learn-css/scroll-behavior.html
Caution: It seems to be a relatively new feature, so it may not be available on all Browsers.
Came here trying to find out why my page (1) didn't scroll at all when going to page.com/#hash and (2) why it wasn't scrolling into the correct position when using scrollIntoView(). This solved both my issues, so someone might find it useful too:
window.addEventListener("DOMContentLoaded", () => {
const hash = window.location.hash;
window.location.hash = "";
window.location.hash = hash;
});
If this still doesn't scroll into the correct position then I think that adding a timeout before setting the hash again could do the trick, though I'm not 100% sure on that, someone might be able to correct me here.
Try this (using JavaScript):
location.hash = "div-Name";