I have a little JS/Jquery issue with my portfolio website and I still consider myself a mediocre programmer.
I have five buttons on my portfolio website, each representing one of my projects. I also have a div with five matching text contents (as a description for each of the projects) and an image/link as a visual description of the project with link on the image so the user can go to the project URL.
<div class="work-content">
<h2 class="con-active" id="contentOne">Content One</h2>
<h2 class="con-hidden" id="contentTwo">Content Two</h2>
<h2 class="con-hidden" id="contentThree">Content Three</h2>
<h2 class="con-hidden" id="contentFour">Content Four</h2>
<h2 class="con-hidden" id="contentFive">Content Five</h2>
</div>
<div class="moving-zone" style="z-index: 0;">
<a href="about.html" class="popup" id="popupOne">
<div class="popup-content">Background One</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupTwo">
<div class="popup-content">Background Two</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupThree">
<div class="popup-content">Background Three</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupFour">
<div class="popup-content">Background Four</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupFive">
<div class="popup-content">Background Five</div>
</a>
</div>
<ul class="work-ul">
<li class="work-link"><button class="button" id="workOne">WORK</button></li>
<li class="work-link"><button class="button" id="workTwo">WORK</button></li>
<li class="work-link"><button class="button" id="workThree">WORK</button></li>
<li class="work-link"><button class="button" id="workFour">WORK</button></li>
<li class="work-link"><button class="button" id="workFive">WORK</button></li>
</ul>
The idea is: when a user enters the page, it will be showing the first project (meaning the first description and first image with the link will be active and showing - probably having class "is-active"). When the user clicks any of the buttons, it will hide the description and image that's being shown already and show the one matching the project button (So if I click the third button, it will hide the first description and first image and show the third description and third image)
I am not really good with arrays and Each functions, plus I am baffled by how to remove the "is-active" class form all non-desired elements and then add that class to the elements I want to show.
NOTE: If you would use a different HTML markup, it's more than welcome. This is just first iteration and I have been stuck on this for past day.
Using your current setup, you could try something like this:
$(document).ready(function() {
$('.work-ul button').each(function(i) {
$(this).click(function(o) {
$('.work-content h2, div.moving-zone a').hide();
$('.work-content h2:eq('+i+'), div.moving-zone a:eq('+i+')').show();
});
});
});
You'll want some initial styles/class to hide all but perhaps your first portfolio item.
I like to use the data-* attributes for this situation.
Give the button a data-id attribute.
Give the corresponding elements (header and anchor) a data-content attribute with the same value as above.
Then on the click of the button, first hide all the elements with a data-content attribute, the show the ones which data-content attribute corresponds with the data-id attribute.
So might be able to lose some id attributes, but that you should judge yourself.
$(function() {
$('.button').on('click', function() {
var id = $(this).data('id');
$('[data-content]').hide();
$('[data-content="'+id+'"]').show();
});
});
.con-hidden,
.is-hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work-content">
<h2 class="con-active" id="contentOne" data-content="1">Content One</h2>
<h2 class="con-hidden" id="contentTwo" data-content="2">Content Two</h2>
<h2 class="con-hidden" id="contentThree" data-content="3">Content Three</h2>
<h2 class="con-hidden" id="contentFour" data-content="4">Content Four</h2>
<h2 class="con-hidden" id="contentFive" data-content="5">Content Five</h2>
</div>
<div class="moving-zone" style="z-index: 0;">
<a href="about.html" class="popup" id="popupOne" data-content="1">
<div class="popup-content">Background One</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupTwo" data-content="2">
<div class="popup-content">Background Two</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupThree" data-content="3">
<div class="popup-content">Background Three</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupFour" data-content="4">
<div class="popup-content">Background Four</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupFive" data-content="5">
<div class="popup-content">Background Five</div>
</a>
</div>
<ul class="work-ul">
<li class="work-link"><button class="button" id="workOne" data-id="1">WORK</button></li>
<li class="work-link"><button class="button" id="workTwo" data-id="2">WORK</button></li>
<li class="work-link"><button class="button" id="workThree" data-id="3">WORK</button></li>
<li class="work-link"><button class="button" id="workFour" data-id="4">WORK</button></li>
<li class="work-link"><button class="button" id="workFive" data-id="5">WORK</button></li>
</ul>
Related
This is my site: http://2helix.com.au/v-04/ It's simple, built with HTML.
Now you can right side navbar. When you click on any link it will show you content. By default all content is hidden.
Now I want to point that section when I click on the link. For example: If I click on social link it's should go to social content section.
I know, If I use this It's should work:
<li><a class="showSingle social" target="1" href="social">SOCIAL</a></li>
<div id="social"></div>
If I do this then page is open on new window.
How can I smoothly go to that section without new window?
Thanks.
Here is my code:
<ul class="nav">
<li>SOCIAL</li>
<li><a class="showSingle" target="2">DIGITAL</a></li>
<li><a class="showSingle" target="3">DESIGN</a></li>
<li><a class="showSingle" target="4">DEVELOPMENT</a></li>
<li>CONTACT</li>
</ul>
<div class="container content">
<div class="row">
<div class="col-md-12">
<div id="div1 mySocial" class="targetDiv socialContent">
<h3 class="left"><span>1</span></h3>
<div class="textContent">
<h1><strong>SOCIAL</strong></h1>
<p>As Social Media becomes more intrinsic in our daily life’s, </p>
</div>
</div>
<div id="div2" class="targetDiv">
<h3 class="left"><span>2</span></h3>
<div class=" textContent">
<h1><strong>DIGITAL</strong></h1>
<p>Whethere it's eCommerce, web sites, EDM templates</p>
</div>
</div>
<div id="div3" class="targetDiv">
<h3 class="left"><span>3</span></h3>
<div class="textContent">
<h1><strong>DESIGN</strong></h1>
<p>Requiremtns for design in social </p>
</div>
</div>
<div id="div4" class="targetDiv">
<h3 class="left"><span>4</span></h3>
<div class="textContent">
<h1><strong>DEVELOPMENT</strong></h1>
<p>Success in Social is standing out</strong></p>
</div>
</div>
</div>
</div>
</div>
// jQuery code...
$(document).ready(function(){
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
});
You've a huge number of problems with your basic HTML code that you need to fix before you even look at adding jQuery
You cannot give an element 2 ids. <div id="div1 mySocial" class="targetDiv socialContent"> is not valid. You will need to create a separate element for your anchor e.g. <a id="mySocial"></a>
To link to an anchor you need to use # in the href, e.g. <a href="#mySocial" class="social" >
You cannot use target like that. There are specific values that are allowed and numbers are not any of them. Instead you could use the data-target
Now to what you are trying to do with jQuery...
You are hiding all content except for the one you click on, so there is no scrolling required... see the working example below. What exactly are you trying to achieve?
$(document).ready(function(){
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).data('target')).show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>SOCIAL</li>
<li>DIGITAL</li>
<li>DESIGN</li>
<li>DEVELOPMENT</li>
<li>CONTACT</li>
</ul>
<div class="container content">
<div class="row">
<div class="col-md-12">
<a id="mySocial"></a>
<div id="div1" class="targetDiv socialContent">
<h3 class="left"><span>1</span></h3>
<div class="textContent">
<h1><strong>SOCIAL</strong></h1>
<p>As Social Media becomes more intrinsic in our daily life’s, </p>
</div>
</div>
<a id="digital"></a>
<div id="div2" class="targetDiv">
<h3 class="left"><span>2</span></h3>
<div class=" textContent">
<h1><strong>DIGITAL</strong></h1>
<p>Whethere it's eCommerce, web sites, EDM templates</p>
</div>
</div>
<a id="design"></a>
<div id="div3" class="targetDiv">
<h3 class="left"><span>3</span></h3>
<div class="textContent">
<h1><strong>DESIGN</strong></h1>
<p>Requiremtns for design in social </p>
</div>
</div>
<a id="development"></a>
<div id="div4" class="targetDiv">
<h3 class="left"><span>4</span></h3>
<div class="textContent">
<h1><strong>DEVELOPMENT</strong></h1>
<p>Success in Social is standing out</p>
</div>
</div>
</div>
</div>
</div>
Try to change your jquery code like This:
$(document).ready(function() {
jQuery(function() {
jQuery('.showSingle').click(function() {
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
$('html, body').animate({
scrollTop: $('#div' + $(this).attr('target')).offset().top
}, 500);
return false;
});
});
});
Add also this code on click.
jQuery('html').animate({
scrollTop: jQuery(".content").offset().top
});
If you replace
target = "1"
with
data-target = "#social"
then the link will jump down to a div with the id = "social"
<li><a class="showSingle social" data-target="social" href="social">SOCIAL</a></li>
<div id="social"></div>
I'm trying to create a one page scrolling site without using a plugin. Following this tutorial https://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2
The links work but there is no scrolling effect, it just jumps to the section.
JS
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
HTML (updated to remove errors)
<div id="container">
<div class="banner">
<a class="button" href="#welcome"><h2 style="text-align: center;"></h2></a>
</div>
<div id="page1">
<a id="welcome"></a>
<h1></h1>
<div id="welcome_squares">
<div class="quarter-column">
<h3></h3>
<p></p>
</div>
<div class="quarter-column">
<a href="#info">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
<div class="quarter-column">
<a href="#events">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
<div class="quarter-column">
<a href="#contact">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
</div>
</div>
<div class="full-column" id="tiles">
<a id="info"></a>
//CONTENT
</div>
<div class="full-column" id="tiles">
<a id="events"></a>
//CONTENT
</div>
<div id="contact">
<a id="contact"></a>
</div>
</div>
Hey here's the Fiddle which is working.
https://jsfiddle.net/fj1dfcsr/2/
Errors I've encountered.
<div id="container">
<div class="banner">
<a class="button" href="#welcome"><h2 style="text-align: center;"></h2></a>
</div>
<div id="page1">
<a id="welcome" href="#"></a>
<h1></h1>
<div id="welcome_squares">
<div class="quarter-column">
<h3></h3>
<p></p>
</div>
<div class="quarter-column">
<a href="#info">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
<div class="quarter-column">
<a href="#events">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
<div class="quarter-column">
<a href="#contact">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
</div>
</div>
<div class="full-column" id="tiles">
<a id="info" href="#">INfo</a> //Here, you have used </div> instead of </a>
</div>
<div class="full-column" id="tiles">
<a id="events" href="#"></a> //Here also, you have used </div> instead of </a>
</div>
<div id="contact">
</div>
</div>
Few things you should keep in mind that you are calling a particular div whose id you know.
For example
<div id="home"></div>
then you'll have to use Home
not <a id="#home"> Home </a> //Wrong way
There are a lot of mistakes in the code you presented,so it's hard to tell what your original problem was. Here's a working fiddle based on your example.
https://jsfiddle.net/1dqhqpet/1/
I used the id attribute on anchors you place in the document to identify the location of a field you want to "go to". I also didn't put the content inside the anchor tags, because that is not how you do that normally. The anchor tag is a marker. But I don't see why that would be too much of a problem (although with the href on the anchor tag that would turn the whole text into a link). As you can see, since I didn't have access to your images I put some filler content in so you can see it scroll, but again, that shouldn't really affect anything.
It's likely your problem is not in the code you presented.
Some further notes on your code:
I know it was copy pasted, but you have an extra </div> after each //Content comment which makes it not working HTML
Your anchors that are used to identify the location of portions of the document don't need href attributes either. All they need is id. So
<a id="welcome" href="#"></a>
in your example becomes
<a id="welcome"></a>
Note that the content shouldn't go in the anchor tag either. It should go under it. The anchor is just like a bookmark to identify a portion of the page.
Based on how this works, the JQuery is only there to provide "smooth" scrolling. It works just fine without it.
Note questions that have already been posted does not solves my problem. The above are the displays from my side menu bar, I want when the user click on a link its content are displayed on the same page and the other div content are hidden. I tried the codes below but they seem not working.
$('a.common').click(function() {
var id = $(this).attr('href');
$(id).fadeIn('slow', function() {
// Animation complete
});
});
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
The problem was that you had $('a.button') instead of $('a.common')
You also want a css to hide the divs at the beginning.
And also when you fade in a new div, you need to hide the current one.
$('a.common').click(function() {
var id = $(this).attr('href');
$("#divs div").hide();
$(id).fadeIn('slow', function() {
// Animation complete
});
});
#divs div {display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</div>
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="divs">
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
</div>
The problem is in your jQuery selector:
//This ona means that you are searching for tag a with class button
$('a.abutton').click(function() {})
//You should use:
$('a.common').click(function() {})
// Because your a tags has class 'common'
There was 2 problem
Your <div> tag is not closed properly in your <li>
Initially you are not hiding your div so it can be fade in once you click on it.
Here is the fiddle for your code https://jsfiddle.net/2tkfq87o/
First thing is that your html had an error. On <div> element was not added. Secondly you never called hide() on all the divs at the start because of which none of them were hidden. You had only fadeIn. If all divs are visible, it makes no sense to call fadeIn.
So hide them first. Then call fadeIn on click and at the same time hide the div present already.
$(document).ready(function() {
$('a.common').click(function() {
hideAllDivs();
var id = $(this).attr('href');
$(id).fadeIn('slow', function() {
// Animation complete
});
});
var hideAllDivs = function() {
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
}
hideAllDivs();
$('#div1').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</div>
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
First of all sorry for the vague title, but i didn’t know how to explain my problem in a better way.
Anyway this is what i want. Let’s say we have three tabs: one showing artist list, one showing album list and one showing songs. All this three tabs has selectable lists and i would like to be able, for example, to select and artist, then going to albums (that now should be show all as selected because i checked the artis) and be able to deselect one album and then, for, example, be able to go to songs and manage the songs individually.
Of course then i should be able to retrive the list of all the songs selected by the user.
EDIT 1
added two images to explain better
EDIT 2
Added some code. At the moment i have only HTML and CSS, i'm waiting for your help for the JS code :)
that's the HTML structure
<div id="tabs" class="page-content tabs overflowTab">
<div id="tab1" class="tab active">
<div class="content-block-title" id="indexScrollOffset">Seleziona artisti</div>
<div class="list-block media-list">
<ul>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro1">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 1</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro2">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 2</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
<div id="tab2" class="tab">
<div class="content-block-title">Seleziona Album</div>
<div class="list-block media list">
<div class="list-group">
<ul>
<li class="list-group-title">Artist 1</li>
<li id="titoliLibro1">
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 1</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 2</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
</div>
<div id="tab3" class="tab">
<div class="content-block-title">Seleziona song</div>
<div class="list-block searchbar-not-found">
<ul>
<li class="item-content">
<div class="item-inner">
CONTENT HERE IS ADDED DYNAMICALLY FROM A WEBSQL DB
</div>
</li>
</ul>
</div>
</div>
Edit 3
It's a phonegap application and yes, already using jQuery (as less as possibile for performance) :)
Now my question: which is the best way to handle this? My only idea is to create an array and update it with all the elements selected and, in order to show an element as selected or not, checking it with indexOf to see if it exist… is this a good way? I’m a bit worried about performance.
Thanks
I am using jQuery-ui for it's tab feature and also using bxSlider to slide images/content within only the first tab. However, when I click on the second tab the bxSlider "prev" and "next" options are still in my container. I tried using event.stopPropagation(), event.preventDefault() and stop() to stop the function, after realizing those didn't work I tried to create a function like this:
(function() {
$('#ab').click(function() {
$('#showcase').bxSlider({
controls: false,
});
});
});
where '#ab' is the tab and #showcase is the list element the images are located in. This function wouldn't exactly stop the bxSlider from being active, it would simply just hide the controls. However this did not work either.
Does anyone have any idea how this can be done?
Here is my HTML:
<div class="container">
<div id="tabs">
<ul>
<li><a id="sh" href="#showcase">Resumes</a></li>
<li><a id="ab" href="#about">About</a></li>
</ul>
<div id="showcase_container">
<ul id="showcase">
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
</ul>
<div id="about">
<span class="ab_title">Portfolio</span>
<ul id="portfolio_list">
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
And here is my JavaScript:
//initialize tabs
$(document).ready(function() {
$('#tabs').tabs();
});
//initialize slider
$(document).ready(function(){
$('#showcase').bxSlider({
hideControlOnEnd: true,
infiniteLoop: false,
});
});
Any help would be greatly appreciated! If this cannot be done can someone please redirect me to a similar image/content slider so I can make this work?
Wrap the ul tag used for the slider in another div (called showcaseTab) or whatever. The bxslider will then be contained to that tab and the arrows should show and hide the correct way.
<div id="showcaseTab">
<ul id="showcase">
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
</ul>
</div>