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.
Related
So I have 22 different lists with 50-100 items inside. And they take ~25k lines of html code. How to make them take less lines?
For example:
I want this to have only one item in list that repeats many times but with different ids, ids in classicImage/shortyImage(' ') and different images if this is possible
<a onclick="showClassic()">
<div class="classic">
<img src="images/classic/classic_default.png" class="imgcol2" id="classicimg" style="max-height: 75px; max-width: 150px;" >
<div class="wname" style="width: 150px;">CLASSIC</div>
</div>
</a>
<a onclick="showShorty()">
<div class="shorty">
<img src="images/shorty/shorty_default.png" class="imgcol2" id="shortyimg">
<div class="wname" style="width: 150px;">SHORTY</div>
</div>
</a>
<div class="results">
<ul id="classicList">
<li class="collection-item">
<!-- sets source of image with id="classicimg" to source of image with id classic-avalanche -->
<a onclick="classicImage('classic-avalanche'); setClassicPrice(1275)">
<div class="result-container">
<div class="result">
<img src="images/classic/classic_avalanche.png" class="windowimage" id="classic-avalanche">
</div>
<p class="skinname">Classic Avalanche</p>
</div>
</a>
</li>
<li class="collection-item">
<!-- sets source of image with id="classicimg" to source of image with id classic-default -->
<a onclick="classicImage('classic-default'); setClassicPrice(0)">
<div class="result-container">
<div class="result">
<img src="images/classic/classic_default.png" class="windowimage" id="classic-default">
</div>
<p class="skinname">Classic Default</p>
</div>
</a>
</li>
</ul>
</div>
<div class="results">
<ul id="shortyList">
<li class="collection-item">
<!-- sets source of image with id="shortyimg" to source of image with id shorty-aerosol -->
<a onclick="shortyImage('shorty-aerosol'); setShortyPrice(0)">
<div class="result-container">
<div class="result">
<img src="images/shorty/shorty_aerosol.png" class="windowimage" id="shorty-aerosol">
</div>
<p class="skinname">Shorty Aerosol</p>
</div>
</a>
</li>
<li class="collection-item">
<!-- sets source of image with id="shortyimg" to source of image with id shorty-default -->
<a onclick="shortyImage('shorty-default'); setShortyPrice(0)">
<div class="result-container">
<div class="result">
<img src="images/shorty/shorty_default.png" class="windowimage" id="shorty-default">
</div>
<p class="skinname">Shorty Default</p>
</div>
</a>
</li>
</ul>
</div>
Considering you tagged javascript and html only, i assume you have no backend code to handle the templating.
So my best advice would be to divide those multiple lists into multiple .html file and load them with JS, like this example with jQuery :
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#firstList").load("firstList.html");
});
</script>
</head>
<body>
<div id="firstList"></div>
</body>
</html>
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 using Stylehatch's 'Photoset-grid.js' and 'view.js'
It seems to work, aside for this fact: When I click on the right-most image in a multi-image row, it opens the left image.
To see what I mean: http://test-theme-one.tumblr.com/
My rendered HTML looks like this (I went to safari and clicked "inspect element", and copied the html for a photoset post on my test blog) I don't understand how it is setup, I though I had it so an anchor would wrap each image in the photoset?
<div class="photoset-grid" data-layout="3" style="width: 100%;" data-width="500">
<a href="http://31.media.tumblr.com/4738e9e1fe4f307b7c7313bcf96766a6/tumblr_msk013TnG61syxzvzo2_500.png" class="view" rel="60178651810" title="help">
<div class="photoset-row cols-3" style="clear: left;display: block;overflow: hidden;height: 80px;">
<div class="photoset-cell" style="float: left;display: block;line-height: 0;box-sizing: border-box;width: 33.3%;padding-right: 2.5px;">
<img src="http://31.media.tumblr.com/4738e9e1fe4f307b7c7313bcf96766a6/tumblr_msk013TnG61syxzvzo2_500.png" alt="" style="width: 100%;height: auto;margin-top: 0px;">
</div>
<div class="photoset-cell" style="float: left;display: block;line-height: 0;box-sizing: border-box;width: 33.3%;padding-right: 2.5px;padding-left: 2.5px;">
<img src="http://31.media.tumblr.com/b421d5cbc68a1f63091492cc95cf879e/tumblr_msk013TnG61syxzvzo3_500.jpg" alt="" style="width: 100%;height: auto;margin-top: -84.5px;">
</div>
<div class="photoset-cell" style="float: left;display: block;line-height: 0;box-sizing: border-box;width: 33.3%;padding-left: 2.5px;">
<img src="http://25.media.tumblr.com/2a4e3311cad4a928b49460b9ed6fda1e/tumblr_msk013TnG61syxzvzo1_500.png" alt="" style="width: 100%;height: auto;margin-top: 0px;">
</div>
</div>
</a>
</div>
The problem is that Photoset Grid wasn't really designed for template work. It takes this template:
{block:Photos}
<a href="{PhotoURL-500}" class="view" rel="{PostID}">
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
</a>
{/block:Photos}
And pulls out all <img> tags and duplicates them--one per image in the row. It results in this HTML:
<a class="view" ... >
<div class="photoset-row cols-3" ...>
<div class="photoset-cell" ...>
<img ...>
</div>
<div class="photoset-cell" ...>
<img ...>
</div>
<div class="photoset-cell" ...>
<img ...>
</div>
</div>
</a>
<a class="view" ... ></a>
<a class="view" ... ></a>
Now, view.js is using anchors/links to pop open the lightbox. They are basically capturing the click event for the entire grouping. When, in your template, you attempt to wrap the <img> in an <a>, it is pulling out the <img> tag out of the <a> in the template and appending them to the first <a>.
If you're up on jQuery plugin development, the Photoset-grid code, is pretty clearly bugged around line 113 (_setupColumns).
Long story short, you're not going to be able to use view.js lightbox with the Photoset-grid. Unless some kind soul comes along and fixes the plugin.
Here This is what I am trying. On Click of each thumbnail I have to display the Larger Image. I need some help so that I can know my issue why the click method is not working fine for me.
Thumbs Part HTML
<div class="ScreenShot" id="__control0" data--ui="__control0">
<div id="thumbs" data--ui="thumbs" class="UiHLayout UiHLayoutNoWrap">
<div class="UiHLayoutChildWrapper">
<div id="__set0" data--ui="__set0" class="UiUx3DS">
<div id="__set0-items">
<div id="__view0" data--ui="__view0" class="UiUx3DSSV">
<div class="UiUx3DSSVFlow UiUx3DSSVItem UiUx3DSSVSelected" id="__item0-__set0-0" data--ui="__item0-__set0-0">
<div id="__layout0-0" data--ui="__layout0-0" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-0" data--ui="__image0-0" src="images/image_01_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item0-__set0-1" data--ui="__item0-__set0-1">
<div id="__layout0-1" data--ui="__layout0-1" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-1" data--ui="__image0-1" src="images/image_02_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item0-__set0-2" data--ui="__item0-__set0-2">
<div id="__layout0-2" data--ui="__layout0-2" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-2" data--ui="__image0-2" src="images/image_03_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Larger Images HTML
<div id="panel" data--ui="panel" class="UiHLayout UiHLayoutNoWrap">
<div class="UiHLayoutChildWrapper">
<div id="__set1" data--ui="__set1" class="UiUx3DS">
<div id="__set1-items">
<div id="__view1" data--ui="__view1" class="UiUx3DSSV">
<div class="UiUx3DSSVFlow UiUx3DSSVItem UiUx3DSSVSelected" id="__item1-__set1-0" data--ui="__item1-__set1-0">
<div id="__layout1-0" data--ui="__layout1-0" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-0" data--ui="__image1-0" src="images/image_01_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item1-__set1-1" data--ui="__item1-__set1-1">
<div id="__layout1-1" data--ui="__layout1-1" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-1" data--ui="__image1-1" src="images/image_02_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item1-__set1-2" data--ui="__item1-__set1-2">
<div id="__layout1-2" data--ui="__layout1-2" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-2" data--ui="__image1-2" src="images/image_03_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Jquery
$("#thumbs img").click(function(){
$("#thumbs img.clicked").removeClass('clicked');
$("#panel img").hide();
$("#panel img:nth-child("+Number($(this).index()+1)+")").fadeIn();
$(this).addClass('clicked');
});
Here is the demo:
http://jsfiddle.net/L7yKp/5/
On click of each thumbnail the corresponding image should be fadeIn. But here every larger image is fading In.
Here is a simple working demo matching your needs: http://jsfiddle.net/D6XHt/1/
Note: It's not the same html as yours but should you push to the right direction. The technique i'ma using has one disadvantage. Without JS enabled your users will see only on big image.
BUT a real advantage is you will save bandwidth and page loading time if you have many images. This is because every big image will load only if the user clicks a thumbnail.
Here is another working solution with all images in document.
http://jsfiddle.net/D6XHt/2/
If you want to show your Images in a fancy lightbox Popup try
http://fancybox.net/home or
http://www.jacklmoore.com/colorbox
I found this question unanswered in Google Groups and I'm facing the same bug in Fancybox.
I have more image galleries on one page. When I go to the next image
with the next prev buttons, and so on, I'll get to the images from the
other gallery.
With lightbox it's possible to do something like:
<a href="url" rel="fancybox[gallery1]" >link</a>
and I'll get all the images from
gallery1 in an image gallery. My albums are dynamic so I can't do it
in my javascript file.
Is this possible?
How would we control this navigation?
<div class="Album" />
<div class="AlbumImg">
<a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a>
<div id="Gallery0">
<a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a>
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo1"></a>
</div>
<div id="Gallery0">
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo2"></a>
</div>
<div id="Gallery0">
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo3.jpg"></a>
</div>
<img class="first" src="Tokyo" title="Tokyo" />
</a>
</div>
<div class="AlbumImg">
<a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a>
<div id="Gallery1">
<a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a>
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo1"></a>
</div>
<div id="Gallery1">
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo2"></a>
</div>
<div id="Gallery1">
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo3.jpg"></a>
</div>
<img class="first" src="Tokyo" title="Tokyo" />
</a>
</div>
This is the code I have where every album holds a number of images. When i hit the last image of the first album and navigate next I get to the first pic of the second album. But I want to cycle back to the first image of the same abum
The code you pasted contains a lot of errors...
You have multiple div's with the same id, and the attributes aren't contained within the quotes, in both <div class="AlbumImg"> there are a unmatched closing tag </a>. I'm not so sure that any of this matters for your example but you should definitely look in to it. And as Ruben said fancybox should work with the rel attribute as well, just like lightbox.
Your code should look something like this:
<div class="albums">
<div class="gallery1">
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
</div>
<div class="gallery2">
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
</div>
</div>
And if you want your galleries to cycle you have to pass a parameter to fancybox. See the documentation. Should look like this:
$(document).ready(function() {
$('a').fancybox({
'cyclic':true
});
});
<a class="grouped_elements" rel="gallery-x" href="Tokyo3.jpg">
this should work? don't forget the '-'
if it doenst work, can you provide the jquery code?