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>
Related
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.
I have a question about how to add layers of tabination inside one webpage.
Currently, the pages which I would like to edit have a jQuery tab function to swap between tabs with different content. I would like to go one step further and have an encompassing tabination system with a page entry tab containing initial content and a button to the next tab; and inside the next tab have the current active tab function. Check out the picture if this is confusing:
Image for Visualization Edit: In the image the 'layers' should be 'sections'.
My current code: One layer of tabination
jQuery in header.php
<script>
$(function() {
$('.tab-panels .tabs li').on('click', function(){
var $panel = $(this).closest('.tab-panels');
$panel.find('.tabs li.active').removeClass('active');
$(this).addClass('active');
// Figure out which panel to show
var panelToShow = $(this).attr('data-panelid');
// Hide current panel
$panel.find('.tab.active').hide(0, showNextPanel);
// Show next panel
function showNextPanel() {
$(this).removeClass('active');
$('#'+panelToShow).show(0, function() {
$(this).addClass('active');
});
}
});
});
</script>
Tabs include file
Styled as a horizontal bar.
<div class="tabs-container">
<ul class="tabs">
<li data-panelid="panel1" class="active">Tab 1</li>
<li data-panelid="panel2">Tab 2</li>
<li data-panelid="panel3">Tab 3</li>
<li data-panelid="panel4">Tab 4</li>
</ul>
</div>
HTML of the webpage
I have wrapped each of the encompassing tabs as 'SECTIONS', and the inside tabs as 'TABS'. The header (containing the jQuery), and this page are called in another php file.
<div class="section-wrap">
<div class="container section active" id="section1">
<div class="row">
<div class="col-md-12">
<div>CONTENT</div>
<div class="button-container">
<span>BUTTON TO NEXT SECTION</span>
</div>
</div>
</div>
</div>
<div class="container section" id="section2">
<div class="container tab-container">
<!-- Incluce Tabs -->
<?php include(ROOT_PATH . "/inc/tabs.php") ?>
<div class="row tab active" id="panel1">
<div class="col-md-12">
<h2>SUBTITLE</h2>
<p>CONTENT</p>
</div>
</div>
<div class="row tab" id="panel2">
<div class="col-md-12">
<h2>SUBTITLE</h2>
<ul>
<li>CONTENT</li>
<li>CONTENT</li>
<li>CONTENT</li>
<li>CONTENT</li>
</ul>
</div>
</div>
<div class="row tab" id="panel3">
<div class="col-md-12">
<h2>SUBTITLE</h2>
<h3>SUB SUBTITLE</h3>
<p>CONTENT</p>
<h3>SUB SUBTITLE</h3>
<p>CONTENT</p>
</div>
</div>
</div>
</div>
</div>
<div class="mobile-breadcrumb">
<!-- Include Breadcrumb -->
<?php include(ROOT_PATH . "/inc/breadcrumb.php") ?>
</div>
</div>
<!-- END PAGE CONTENTS -->
<!-- Include Footer -->
<?php include(ROOT_PATH . "/inc/footer.php") ?>
I imagine the same jQuery script could be used to switch between sections, however I'm not sure how to implement this and would love some help. The user would not need to go back to the initial page entry 'section'. Also, the reason why I do not wish to use a different web page entirely is that the pages that this system will be implemented on are already 4 layers deep in the website.
I hope this isn't too confusing, thanks in advance! :)
Definitely not the best way to do this but here is my current solution:
jQuery in header
$(function() {
$('#section1').show().siblings().hide();
$('.section-button').find('a').on('click', function(e){
e.preventDefault();
$(this.hash).show().siblings().hide();
})
});
</script>
HTML of page
<div class="section-wrap">
<div class="container section" id="section1">
<div class="row">
<div class="col-md-12">
<p>CONTENT</p>
<p>CONTENT</p>
<span class="section-button">GO TO SECTION 2</span>
</div>
</div>
</div>
<div class="container section" id="section2">
<p>CONTENT</p>
<p>CONTENT</p>
</div>
</div>
I have a similar problem to one I posted before. I have a page built in Bootstrap, and I have several links that jump the reader to anchor links that require an accordion menu to open a specific tab. With the help of Stack Overflow I got it to work, but it only works on my computer and not online (my unfinished draft is on verbiadastra.com - I mean the links under "Services").
My other problem is that I can't get it to open a tab that's on a different page rather than the same one (from index.html to contact.html)
Here's the JS Fiddle.
I would really appreciate your help!
Here's the HTML:
<p>Go to Tab1.</p>
<p>Go to Tab2.</p>
<p>Go to Tab3.</p>
<section id="content">
<div class="container">
<div class="row">
<div class="col-xs-12 wow fadeInDown">
<div class="tab-wrap">
<div class="media">
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><i class="fa fa-comments"></i>Tab1</li>
<li class=""><i class="fa fa-pencil-square-o"></i>Tab2</li>
<li class=""><i class="fa fa-check-square-o"></i>Tab3</li>
</ul>
</div>
<div class="parrent media-body">
<div class="tab-content">
<div class="tab-pane fade active in" id="tab1">
<div class="media">
<div class="pull-left">
<img class="img-responsive" src="images/services/tab1-1.png">
<br>
<img class="img-responsive" src="images/services/tab1-2.png">
<br>
<img class="img-responsive" src="images/services/tab1-3.png">
</div>
<div class="media-body">
<a name="Tab1"></a>
<h2>Tab1</h2>
<p>Tab1Tab1Tab1.</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2">
<div class="media">
<div class="pull-left">
<img class="img-responsive" src="images/services/tab2.jpg">
</div>
<div class="media-body">
<a name="Tab2"></a>
<h2>Tab2</h2> <p>Tab2Tab2Tab2.</p> </div>
</div>
</div>
<div class="tab-pane fade" id="tab3">
<div class="media">
<div class="pull-left">
<img class="img-responsive" src="images/services/tab3.jpg">
</div>
<div class="media-body">
<a name="Tab3"></a>
<h2>Tab3</h2>
<p>Tab3Tab3Tab3 </p>
</div>
</div>
</div>
</div> <!--/.tab-content-->
</div> <!--/.media-body-->
</div> <!--/.media-->
</div><!--/.tab-wrap-->
</div><!--/.col-sm-6-->
</div><!--/.row-->
</div><!--/.container-->
And here's the JavaScript:
var openTab1 = function() {
$('[href="#tab1"]').tab('show');
}
var openTab2 = function() {
$('[href="#tab2"]').tab('show');
}
var openTab3 = function() {
$('[href="#tab3"]').tab('show');
}
Okay, I figured it out - here's my solution in case it helps anyone, and maybe someone can let me know if I should have done it differently:
I deleted the JavaScript code I posted above, and my links no longer call that function on click. Instead, I write a function that is called on page load: It checks if there is any hashtag (#) in the URL, and if there is, I have it compare its value to the ones I'm using to call the different tabs. Then for each tab id, I have it do the function that opens the tab. Then it also jumps down to a div that has the id of the hashtag (instead of the link anchors, which I learned are obsolete in HTML5). Here's the function:
<body class="homepage" onload="TabHash()">
and then:
<script>
var TabHash = function() {
//check if hash tag exists in the URL
if(window.location.hash) {
//set the value as a variable, and remove the #
var hash_value = window.location.hash.replace('#', '');
if (hash_value == "Tab1Name") {
$('[href="#tab1"]').tab('show');
}
if (hash_value == "Tab2Name") {
$('[href="#tab2"]').tab('show');
}
if (hash_value == "Tab3Name") {
$('[href="#tab3"]').tab('show');
}
}
}
</script>
The links look like this:
Go to Tab 1.
Go to Tab 2.
Go to Tab 3.
Hello I have a button in BootStrap. I use "collapse" in a menu and each of those buttons when I push this to collapse this appear with any problem.
But when I push another button with this active appear down on the other.
How change this action? When I push any button this hide this but with the same animation like collapse do it.
Here is the code, when you try it you'll understand me:
<ul class="nav nav-pills">
<li class="dropdown">1<strong class="caret"></strong></li>
<li class="dropdown">2<strong class="caret"></strong></li>
</ul>
<div class="clearfix"><p>content more</p></div>
<div id="content0a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...1 </li></ul>
</div>
</div>
</div>
</div>
</div>
<div id="content1a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...2 </li></ul>
</div>
</div>
</div>
</div>
</div>
Try this.
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).height(0);
$('.in').not($(this).data('target')).removeClass('in');
});
});
</script>
You can also try this. (which gives more of a collapse animation)
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).collapse('hide');
});
});
</script>
You can add it to the bottom of your page right before the </body> tag or add it to your existing javascript file.
Try that and let me know if it's close to what you want.
I'm using this script for jQuery Vertical Tabs.
http://www.scriptbreaker.com/javascript/script/JQuery-vertical-tab-menu
<script language="JavaScript">
$(document).ready(function() {
$(".tabs .tab[id^=tab_menu]").hover(function() {
var curMenu=$(this);
$(".tabs .tab[id^=tab_menu]").removeClass("selected");
curMenu.addClass("selected");
var index=curMenu.attr("id").split("tab_menu_")[1];
$(".curvedContainer .tabcontent").css("display","none");
$(".curvedContainer #tab_content_"+index).css("display","block");
});
});
</script>
Here's the HTML for the tabs (links)
<div class="tabscontainer">
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">JavaScript</div>
<div class="arrow"></div>
</div>
<div class="tab" id="tab_menu_2">
<div class="link">CSS</div>
<div class="arrow"></div>
</div>
<div class="tab last" id="tab_menu_3">
<div class="link">JQuery</div>
<div class="arrow"></div>
</div>
</div>
I am trying to create an additional link from within a tabs content to another tab.
So this way I can link to the next tab or the last tab, keeping the same functionality as the current tab links (no refresh)
This is my first question on stackoverflow and I've searched far and wide.
I really appreciate all the help. This is a great community.
UPDATE:
Okay, Here is an edit with my full code:
<script type="text/javascript">
$(document).ready(function() {
$(".tabs .tab[id^=tab_menu]").click(function() {
var curMenu=$(this);
$(".tabs .tab[id^=tab_menu]").removeClass("selected");
curMenu.addClass("selected");
var index=curMenu.attr("id").split("tab_menu_")[1];
$(".curvedContainer .tabcontent").css("display","none");
$(".curvedContainer #tab_content_"+index).css("display","block");
});
});
</script>
<div class="curvedContainer">
<div class="tabcontent" id="tab_content_1" style="display:block">
<p>text</p>
</div>
<div class="tabcontent" id="tab_content_2">
<p>text</p>
</div>
<div class="tabcontent" id="tab_content_3">
<p>text</p>
</div>
<div class="tabcontent" id="tab_content_4"><h2 class="wwd_title">
<p>text</p>
</div>
</div>
<div class="tabscontainer">
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">Onefish</div>
</div>
<div class="tab" id="tab_menu_2">
<div class="link">Twofish</div>
</div>
<div class="tab" id="tab_menu_3">
<div class="link">Redfish</div>
</div>
<div class="tab last" id="tab_menu_4">
<div class="link">Bluefish</div>
</div>
</div>
In order to make links in the tab contents force the tabs to switch, it helps to understand what is happening under the hood to make them switch by default.
By default, mouseover events force the tabs to change; therefore, the solution is to override the default click event of the hyperlinks in question by binding an event to hyperlinks in the tab content:
Include this code after the JavaScript code you showed in your question, inside the $(document).ready:
$('.tabcontent').find('a').click(function() {
event.preventDefault();
$('.tabs #' + $(this).attr("rel")).mouseover();
});
The event.preventDefault() prevents the hyperlinks from attempting to redirect to the page entered in the href attribute, and the rel attribute is used as a way to bind the hyperlink to the specific tab being linked to.
The rel attribute is used to get the value of the id of the tab so we can programmatically invoke its mouseover event, and switch tabs.
<div class="tabscontainer">
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">JavaScript</div>
<div class="arrow"></div>
</div>
<div class="tab" id="tab_menu_2">
<div class="link">CSS</div>
<div class="arrow"></div>
</div>
<div class="tab last" id="tab_menu_3">
<div class="link">JQuery</div>
<div class="arrow"></div>
</div>
</div>
<div class="curvedContainer">
<div class="tabcontent" id="tab_content_1" style="display:block">content for tab 1 tab2</div>
<div class="tabcontent" id="tab_content_2">content for tab 2</div>
<div class="tabcontent" id="tab_content_3">content for tab 3</div>
</div>
In the HTML content for your tab, simply include the hyperlink as you normally would, using an href="#" and a rel attribute. The rel attribute must equal the id of the target tab, in this case, tab_menu_2.
It Works as per your requirements
Just add
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">JavaScript</div>
<div class="arrow"></div>
</div>
</div>
in any of the tab
Go to this link http://jsfiddle.net/ipsjolly/ssR5f/
There is a similar tab in 3rd tab through which we can jump to 1st tab.