I have a tab control on my page with two tabs. When I click on the second tab, the page scrolls down to the tab control. I don't want to have any focus on the tab control and maintain the page where it was. I know it happens due to the href on the <li> but if I remove the href I don't see any data.
My html code is as below:
<div id="tabContainer" class="Container">
<ul class="maintabs">
<li>Description</li>
<li>Terms</li>
</ul>
<div class="tabDetails">
<div id="tabDescription" class="tabContents">
<div id="divDescription" runat="server"></div>
</div>
<div id="tabTerms" class="tabContents">
<div id="divterms" runat="server"></div>
</div>
</div>
</div>
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$(".tabContents").hide();
$(".tabContents:first").show();
$("#tabContainer ul li a").click(function () {
var activeTab = $(this).attr("href");
$("#tabContainer ul li a").removeClass("active");
$(this).addClass("active");
$(".tabContents").hide();
$(activeTab).show();
});
});
</script>
You need to disable the default behavior of the link from occurring.
For your click action, accept the first argument, e (for event) and call JQuery's preventDefault function on it. This will stop the browser from following the link.
$("#tabContainer ul li a").click(function (e) {
// hey browser, don't handle this link--we'll take it from here
e.preventDefault();
// ...
});
You can call that anywhere in the function (e.g., at the end).
Related
I have the following header that will toggle between pages:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
<form method="post">
<ul class="nav navbar-nav">
<li class="active">Active Tags</li>
<li>Archived Tags</li>
</ul>
</form>
</div>
</div>
</nav>
and the following jQuery to toggle the active li on click:
$('.navbar li').click(function(e) {
$('.navbar li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
Moving between pages works only when e.preventDefault(); is commented out but the active class toggle won't work without this line... will I have to change my href's to sometype of onclick jQuery function or php $_POST of a hidden form to move between pages while retaining the toggle between active li's? Am new to javascript/html/php so as much detail and reasoning as possible is quite encouraged and encouraging.
Yes, you are right, e.preventDefault() will just toggle active class on li and restrict anchor to perform its operation.
While, changing it to e.stopPropagation() will allow both operation to perform at their own, without notifying regarding their event to parent handler.
Prevents the event from bubbling up the DOM tree, preventing any
parent handlers from being notified of the event.
Therefore, you can change it to:
$('.navbar li').click(function(e) {
e.stopPropagation();
$('.navbar li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
});
DEMO
I have the below which is supposed to change the div depending on the image link clicked.
I want the British content to show automatically on page load, then it gives the option to change the div to display different content (language) by clicking on the image of the flag.
This works in jsFiddle and CodePen but is not working on my site, even when using the exact same code. Whenever I click the Iranian logo it does not load the content.
Any tips?
$(document).ready(function() {
$('#wayfindermenu a').click(function(e) {
hideContentDivs();
var tmp_div = $(this).parent().index();
$('.maincontent div').eq(tmp_div).show();
});
function hideContentDivs() {
$('.maincontent div').each(function() {
$(this).hide();
});
}
hideContentDivs();
$('.maincontent div').eq(0).show();
});
$(function() {
$('#wayfindermenu li a').on('click', function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
});
https://jsfiddle.net/pxce3t31/
for some reason, the code $('.maincontent div').eq(1); is bringing back the image of your flag instead of your iran content.
(div class="image right" style="display: block;"><img src="https://www.herts.ac.uk/__data/assets/image/0008/24983/Iran.jpg" alt="Flag of Kuwait"></div>)
try this implementation instead - target the specific class of the content instead of using indexes:
use data tag attributes to link which flag link goes with which page id, then target that specific div content and show it.
and also, britain doesnt show as default in your page because you dont have $('.maincontent div').eq(0).show(); in your page code, but its in your fiddle. you can also target the specific britain div like i did below $('page1').show();
$(document).ready(function() {
hideContentDivs();
$('#page1').show();
$('#wayfindermenu a').click(function(e){
hideContentDivs();
var target = $(this).data('page'); // gets the data-page attribute
$('#' + target).show(); // shows the page
});
function hideContentDivs(){
$('.maincontent div').hide();
}
});
li {
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="wayfindermenu">
<li id="link1" class="">
<a href="#!" data-page="page1">
<img src="https://www.herts.ac.uk/__data/assets/image/0005/104909/english.svg.png" alt="Britain flag logo" id="itemImg"/>
</a>
</li>
<li id="link2" class="active">
<a href="#!" data-page="page2">
<img src="https://www.herts.ac.uk/__data/assets/image/0020/104906/Flag_of_Iran.svg.png" alt="Iran flag logo" id="itemImg"/>
</a>
</li>
</ul>
<div class="maincontent">
<div id="page1">british content</div>
<div id="page2">iran content</div>
</div>
i have this html and javascript for my menu button
THIS IS THE HTML
MENU
<div class="mobilenav">
<li>HOME</li>
<li>SERVICES</li>
<li>WORK</li>
<li>TALK</li>
</div>
ICON
<a href="javascript:void(0)" class="icon">
<div class="MENU">
<div class="menui top-menu"></div>
<div class="menui mid-menu"></div>
<div class="menui bottom-menu"></div>
</div>
</a>
AND JS
$(document).ready(function () {
$(".icon").click(function () {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
i changed the ".icon" for an "a" so the menu closes as soon as i picked any option, now anytime i clicked on the scroll down button, contact and any other tag button the menu opens, is there any way to stop this from happening?
$("a") selects all links on the page.
Instead you only want the select .icon + the links in the .mobilenav, so you need to do $(".icon, .mobilenav a").
Note that JQuery selectors work almost the same as CSS selectors.
$(document).ready(function () {
$(".icon, .mobilenav a").click(function () {
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
Hi I have a navbar in my home.scala.html as follows-
<ul class="nav nav-justified">
<li>#Messages("views.main.apps")</li>
<li >#Messages("views.main.activity")</li>
<li>#Messages("views.main.devices")</li>
<li>#Messages("views.main.account")</li>
<li id="logout">#Messages("views.main.logout")</li>
</ul>
I am trying to set active class on click as follows-
<script>
$(document).ready(function () {
$('ul.nav > li').click(function (e) {
$('ul.nav > li').removeClass('active');
$(this).addClass('active');
});
});
</script>
However on running the application only the li elements which have href="#" get set as active ,the other li elements remain inactive on click even though the page is redirected to the link of the tag.
Any help would be appreciated.
Thanks
Edit:The structure of the main.scala.html is
<html>
<head></head><body>
<ul class="nav nav-justified">
<li>#Messages("views.main.apps")</li>
<li >#Messages("views.main.activity")</li>
<li>#Messages("views.main.devices")</li>
<li>#Messages("views.main.account")</li>
<li id="logout">#Messages("views.main.logout")</li>
</ul>
</div>
</nav>
<div id="showsspData">
#content
</div>
</div>
</body>
</html>
Then the apps.scala.html will be as-
#main("string to pass"){
//html content for page
}
You need to use e.preventDefault() to prevent default action of the anchor and target .click() handler on the anchors instead:
$(document).ready(function () {
$('ul.nav > li a').click(function (e) {
e.preventDefault();
$('ul.nav > li').removeClass('active');
$(this).closest('li').addClass('active');
});
});
I tried to load my content with the jQuery load function into index.html's content area. I succeeded with that, but my Javascript isn't working. I want to call it on each click of my menu's elements. Is it possible?
click here to see the page
menu:
<div id="nav" class="section group">
<div id="menu" class="col span_9_of_12">
<ul id="navmenu">
<li>Hakkımda</li>
<li>Portfolyo</li>
<li>İletişim</li>
<li>Fotoğraflar</li>
</ul>
</div>
load function:
$(document).ready(function() {
$('#content').load($('#navmenu li a:last').attr('href'));
var hash = window.location.hash.substr(1);
var href = $('#navmenu li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#navmenu li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('slow',loadContent);
$('#load').remove();
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('slow',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('slow');
}
return false;
});
});
UPDATE: My original answer no longer applies. OP changed the page implementation and question completely since I answered.
But as I stated in a comment below, The easytabs documentation states that the tab element and the panel divs must all be inside the container div.
<div id="tab-container" class="tab-container">
<ul class='etabs'>
<li class='tab'>Hakkımda</li>
<li class='tab'>Portfolyo</li>
<li class='tab'>Fotoğraflar</li>
<li class='tab'>İletişim</li>
</ul>
<div id="hakkimda">
...
</div>
<div id="portfolyo">
...
</div>
<div id="iletisim">
...
</div>
<div id="fotograflar">
...
</div>
</div>
Rather than adding script inline, do this
$( "#jqc_content" ).load( "content/aboutme.html", function() {
carouselfn(); // call your carousel invocation function here
});
From documentation
Callback Function
If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed
I fixed it finally. It's all about the html structure.