I am working on a site which has only one page, instead of loading different pages for different bits of content; I want the content to change but not the page therefore decreasing loading and creating a nice effect.
As you can see from my code below it's long but it works, I am sure there is a much easier way to do it and animating between the divs.
http://jsfiddle.net/ssLY3/
HTML
<ul class="side-nav" id="sideNav">
<li id="homeNav">Home</li>
<li id="bioNav">Biography</li>
<li id="musicNav">Music</li>
<li id="photosNav">Photos</li>
<li id="shopNav">Shop</li>
</ul>
<div id="homePage">
<p>HOME PAGE</p>
</div>
<div id="biogPage">
<p>BIOG PAGE</p>
</div>
<div id="musicPage">
<p>MUSIC PAGE</p>
</div>
<div id="photosPage">
<p>PHOTOS PAGE</p>
</div>
<div id="shopPage">
<p>SHOP PAGE</p>
</div>
JS
$('#biogPage').hide();
$('#musicPage').hide();
$('#photosPage').hide();
$('#shopPage').hide();
$('#homeNav').click(function () {
$('#homePage').show();
$('#biogPage').hide();
$('#musicPage').hide();
$('#photosPage').hide();
$('#shopPage').hide();
});
$('#bioNav').click(function () {
$('#homePage').hide();
$('#biogPage').show();
$('#musicPage').hide();
$('#photosPage').hide();
$('#shopPage').hide();
});
$('#musicNav').click(function () {
$('#homePage').hide();
$('#biogPage').hide();
$('#musicPage').show();
$('#photosPage').hide();
$('#shopPage').hide();
});
$('#photosNav').click(function () {
$('#homePage').hide();
$('#biogPage').hide();
$('#musicPage').hide();
$('#photosPage').show();
$('#shopPage').hide();
});
$('#shopNav').click(function () {
$('#homePage').hide();
$('#biogPage').hide();
$('#musicPage').hide();
$('#photosPage').hide();
$('#shopPage').show();
});
Try to wrap all of your divs inside a parent div:
<div id="wrapper">
<div id="homePage"><p>HOME PAGE</p></div>
<div id="biogPage"><p>BIOG PAGE</p></div>
<div id="musicPage"><p>MUSIC PAGE</p></div>
<div id="photosPage"><p>PHOTOS PAGE</p></div>
<div id="shopPage"><p>SHOP PAGE</p></div>
</div>
Then you can take advantage of the index of your list to show according div element:
$(document).ready(function(){
$('#biogPage, #musicPage, #photosPage, #shopPage').hide();
$(".side-nav li").each(function(i) {
$(this).click(function() {
$("#wrapper").find("div:eq('" + i + "')").show().siblings().hide();
});
});
});
Updated Fiddle
html
<a class="link" title="div1" href="#">link1</a>
<a class="link" title="div2" href="#">link2</a>
<a class="link" title="div3" href="#">link3</a>
<a class="link" title="div4" href="#">link4</a>
<div class="clearfix">
<div id="div1" class="box">div1</div>
<div id="div2" class="box">div2</div>
<div id="div3" class="box">div3</div>
<div id="div4" class="box">div4</div>
</div>
CSS
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
html .clearfix {
height: 1%;
}
.box {
display: block;
padding: 25px;
background-color: #ccc;
border: 1px solid #333;
float: left;
margin-right: 5px;
}
Minimized javascript
(function() {
$('.link').click(function(e) {
$('.box').hide();
$('#' + $(this).attr('title')).show();
e.preventDefault();
});
})();
i think this javascript is probably the most minimal one
check this jsfiddle
http://jsfiddle.net/bqBaA/
vote up if u like this
Another way that changes your HTML as little as possible:
HTML:
<ul class="side-nav" id="sideNav">
<li>Home</li>
<li>Blog</li>
<li>Music</li>
</ul>
<div id="home" class="page"><p>HOME PAGE</p></div>
<div id="blog" class="page"><p>BLOG PAGE</p></div>
<div id="music" class="page"><p>MUSIC PAGE</p></div>
Javascript:
$(document).ready(function(){
var hideall = function() {
$(".page").each(function() {
$(this).hide();
});
};
hideall();
$(".side-nav li a").each(function() {
$(this).click(function() {
var ta = $(this).text().toLowerCase();
hideall();
$("#"+ta).show();
});
});
});
Related
I know there are lots of same examples, but their code don't work. Please Help! So I have arrow Image at the bottom of container block. The content of container are flex( if it is important to know?!) And when i click on arrow, it should move down by next container.
$("#arrow").click(function() {
var $target = $('.container.active').next('.container');
if ($target.length == 0)
$target = $('.container:first');
$('html, body').animate({
scrollTop: $target.offset().top
}, 'slow');
$('.active').removeClass('active');
$target.addClass('active');
});
.container {
height: 100%;
margin: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container first active" id="first">
///not important content
<button class="next">
<img src="arrow.png" id="arrow" alt="down">click
</button>
</div>
<div class="container second" id="second">
<div class="arrow">
<img src="arrowup.png" alt="up">
</div>
<div class="arrow">
<img src="arrow.png" alt="arrow">
</div>
</div>
You can simply use anchor tag and pass id of div you want to focus. Below is an example for that.
.container {
height: 100%;
margin: 0px;
}
.second, .first{
border : 1px solid black;
height : 500px;
width:100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container first active" id="first">
<!-- not important content -->
<a href="#second">
<img src="arrow.png" id="arrow" alt="down">click
</a>
</div>
<div class="container second" id="second">
<a class="arrow" href="#first">
<img src="arrowup.png" alt="up">
</a>
<div class="arrow">
<img src="arrow.png" alt="arrow">
</div>
</div>
https://jsfiddle.net/w7duthsa/ Try this. U should be careful where arrow event fires. It is in icon. u have to click to icon to run. Button doesn't down.
$("#arrow").on("click", function(e) {
$(document).scrollTop($(this).parent().parent().next().offset().top);
return false; // prevent anchor
});
If u want to give up down to button then give arrow id to button and use function below https://jsfiddle.net/w7duthsa/1/
$("#arrow").on("click", function(e) {
$(document).scrollTop($(this).parent().next().offset().top);
return false; // prevent anchor
});
I am a jquery beginner. I'm trying to make a dropdown menu where when the user clicks one of the buttons it will link to its correct section. Before a user clicks a button, all sections must be hidden (display: none), but when an option is selected from the dropdown, I want to use js/jquery to trigger a css change in the section div to appear (display: block). Pretty lost and I can't seem to get the jquery to work, any help would be greatly appreciated!
Thank you!
$(document).ready(function() {
$('#departments a').on('click',function()) {
$(this).css({'display','block'});
});
}
article.apply {
padding-bottom: 6rem;
}
article.apply p {
margin-bottom: 4rem;
}
article.apply div.math {
display: none;
}
article.apply div.cmsc {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<a id= "selectedDept" class="dropbtn button button-red
caret"> Search </a>
<div id = "departments" class="dropdown-content">
<a class= "dept" href="#math">MATH</a>
<a class= "dept" href="#cmsc">CMSC</a>
</div>
</div>
<article class="apply">
<div class=“math”>
<h2> Hello World </h2>
</div>
<div class=“cmsc”>
<h2> Hello World! </h2>
</div>
</article>
As you can see with the console on your snippet code your Javascript was very wrong:
You forgot to close the last ) (of the ready() function)
You close the function .on() before the {} of the callback
You update the css with {'display','block'} instead of {'display': 'block'}
$(document).ready(function() {
$('#departments a').on('click', function() {
$(this).css({'display':'block'});
});
});
article.apply {
padding-bottom: 6rem;
}
article.apply p {
margin-bottom: 4rem;
}
article.apply div.math {
display: none;
}
article.apply div.cmsc {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<a id= "selectedDept" class="dropbtn button button-red caret"> Search </a>
<div id = "departments" class="dropdown-content">
<a class= "dept" href="#math">MATH</a>
<a class= "dept" href="#cmsc">CMSC</a>
</div>
</div>
<article class="apply">
<div class=“math”>
<h2> Hello World </h2>
</div>
<div class=“cmsc”>
<h2> Hello World! </h2>
</div>
</article>
I am trying to make the code shared on this fiddle to work on Wordpress but the Javascript doesn't work. I do not have other js file besides the one above.
It works on the example but not on Wordpress.
$(function() {
$('ul.eevmonths a').on('click', function() {
$month = $(this).attr('class'),
$('.eevcontent-' + $month).siblings().addClass('eevhide');
$('.eevcontent-' + $month).removeClass('eevhide');
});
});
a {
text-decoration: underline;
cursor: pointer;
color: blue;
}
.eevhide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="eventmobile">
<ul class="eevmonths">
<li><a class="jan">1</a></li>
<li><a class="feb">2</a></li>
<li><a class="mar">3</a></li>
</ul>
</div>
<div id="eevcontent">
<div class="eevdefault-text">Default Text</div>
<div class="eevcontent-jan eevhide">
<h3>Januar</h3>
</div>
<div class="eevcontent-feb eevhide">
<h3>Februar</h3>
</div>
<div class="eevcontent-mar eevhide">
<h3>März</h3>
</div>
</div>
You most include jQuery in your HTML-file, like below with a script-tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(function(){
$('ul.eevmonths a').on('click', function () {
$month = $(this).attr('class'),
$('.eevcontent-'+$month).siblings().addClass('eevhide');
$('.eevcontent-'+$month).removeClass('eevhide');
});
});
a{
text-decoration:underline;
cursor:pointer;
color: blue;
}
.eevhide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="eventmobile">
<ul class="eevmonths">
<li><a class="jan">1</a></li>
<li><a class="feb">2</a></li>
<li><a class="mar">3</a></li>
</ul>
</div>
<div id="eevcontent">
<div class="eevdefault-text">Default Text</div>
<div class="eevcontent-jan eevhide">
<h3>Januar</h3>
</div>
<div class="eevcontent-feb eevhide">
<h3>Februar</h3>
</div>
<div class="eevcontent-mar eevhide">
<h3>März</h3>
</div>
</div>
I basically want to create a product listing page using jquery, just like this page: https://losangeles.sharegrid.com/browse/
Here is my code:
$(function(){
$('.link').click(function(){
$(this).next('ul').toggle();
var id = $(this).attr("rel");
$('#'+id).show();
});
});
.container {
width: 100%;
height: auto;
}
.eighty-percent {
width: 80%;
margin: 0 auto;
}
.categories {
width: 20%;
float: left;
ul {
li {
ul {
display: none;
}
}
}
}
.products-list {
width: 80%;
float: right;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="eighty-percent">
<div class="categories left">
<ul>
<li>
<a href="#" class="link" id="main-category" rel="main1">
main-category-one
</a>
<ul>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
</ul>
</li>
</ul>
</div>
<div class="products right">
<div class="products-list" id="main1">
<h1>main category one</h1>
</div>
<div class="products-list" id="main-sub1">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub2">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub3">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub4">
<h1>sub category one</h1>
</div>
</div>
</div>
</div>
Now the problem I am having is as you can see, I cannot make the div that is currently opened make hidden when I click on the other sub category links. I hope my snippet will make clear what I am trying to achieve
All changes and details are commented within the source.
FIDDLE
SNIPPET
$(function() {
$('.link').click(function(event) {
/*
Added to prevent <a>nchor links
from jumping. Note the `event`
parameter above as well.
*/
event.preventDefault();
$(this).next('ul').toggle();
var id = $(this).attr("rel");
/*
Added a class (i.e. `sub`), to
each #main-sub* so all of them will
be targeted to hide by the .hide()
method.
*/
$('.sub').hide();
$('#' + id).show();
});
});
.container {
width: 100%;
height: auto;
}
/*
Added to prevent the right
column from wrapping under
the left column.
*/
.subList {
height: 100vw;
display: none;
}
.categories {
width: 50%;
float: left;
}
.products-list {
width: 50%;
float: right;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!--Removed .eighty-percent because it
hindered layout in demo only,
adding it or removing it shouln't
affect functionality in your production version.-->
<div class="categories left">
<ul>
<li>
main-category-one
<!--Added a class (i.e. subList)
in order to style it easier,
see CSS for why styling was needed -->
<ul class="subList">
<!--Changed each <a>nchor id as a
unique one. You should never have more
than one of the same id on a page.-->
<li>sub-cat-one
</li>
<li>sub-cat-two
</li>
<li>sub-cat-three
</li>
<li>sub-cat-four
</li>
</ul>
</li>
</ul>
</div>
<div class="products right">
<div class="products-list" id="main1">
<h1>main category one</h1>
</div>
<div class="products-list sub" id="main-sub1">
<h2>sub category one</h2>
</div>
<div class="products-list sub" id="main-sub2">
<h2>sub category two</h2>
</div>
<div class="products-list sub" id="main-sub3">
<h2>sub category three</h2>
</div>
<div class="products-list sub" id="main-sub4">
<h2>sub category four</h2>
</div>
</div>
</div>
As far as I understood, you want to hide the main div when another was clicked.
This would achieve it:
$(function() {
$('.link').click(function() {
$(this).next('ul').toggle();
var id = $(this).attr("rel");
$('div[id^="main"]').hide(); // added line
$('#' + id).show();
});
});
I want to be able to click on div.square-1 and have it toggle with div.square-2
The div itself needs to act like a button, I don't want an external button to activate the toggle like they did on jQuery documentation
Here is a sample of my code.
<a href="#" >
<div class="square-box square-1">
<h1>Square 1</h1>
</div>
</a>
<a href="#">
<div class="square-box square-2">
<h1>Square 2</h1>
</div>
</a>
.square-box {
width: 100px;
height: 100px;
}
#square-1 {
background-color: blue;
}
#square-2 {
background-color: red;
}
What is the best way to achieve this?
When you click on div.square-1 it will get content of div.square-2
var content1 = $('.square-1').html();
var content2 = $('.square-2').html();
var content = 1;
$('.square-1').click(function() {
if (content == 1) {
$(this).html(content2);
content = 2;
} else {
$(this).html(content1);
content = 1;
}
});
.square-box {
width: 100px;
height: 100px;
}
#square-1 {
background-color: blue;
}
#square-2 {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">
<div class="square-box square-1">
<h1>Square 1</h1>
</div>
</a>
<a href="#">
<div class="square-box square-2">
<h1>Square 2</h1>
</div>
</a>
HI now try to this way
.html()
first of you save your square-1 div content than replace your content your square-2 div
$(document).ready(function(){
$('.square-1').on('click', function(){
var thisText = $(this).find('h1').text();
$('.square-2 h1').html(thisText);
});
});
.square-box {
width: 100px;
height: 100px;
}
.square-1 {
background-color: blue;
}
.square-2 {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a href="#" >
<div class="square-box square-1">
<h1>Square 1</h1>
</div>
</a>
<a href="#">
<div class="square-box square-2">
<h1>Square 2</h1>
</div>
</a>
Have a look at this, it may be the best suited method.