I've tried my best to figure this out myself but to no avail as I'm new to web development. It's probably really basic but I'd really appreciate some help because I'm going around in circles here..
I have a Google map search form (essentially a store locator) and what I've done for the search results is split into two tabs; a list and a map.
What I would like to do is have the map tab always be the active tab when the submit button is pressed in the search form.
This is the HTML code:
<ul class="nav nav-tabs" id="myTab">
<li id="maptab" class="active">Map</li>
<li id="listtab" >List</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="resmap">
<div id="map_canvas"></div>
</div>
<div class="tab-pane" id="reslist">
<div id="results">
<ul class="res-list" id="list"></ul>
</div>
</div>
</div>
So basically for the map items I'm trying to get the code to return to
div class="tab-pane active"
and
li class="active"
Presumably I have to add an onclick element to the submit button??
The html for the submit button in the form is
<input type="submit" name="op" id="edit-submit" value="Search" class="btn btn-primary" />
In your case, I presume you are trying to add the "active" class to that li element:
var button = document.getElementById('edit-submit');
button.onclick= function() {
// this adds the 'active' class to the classes that the element already has
var maptab = document.getElementById('maptab');
maptab.className = maptab.className + ' active';
};
Related
HTML
<form class="data-table">
<div class="row">...</div>
<div class="row">...</div>
<div class="row>
<div class="col-lg-3">...</div>
<div class="col-lg-3">...</div>
<div class="col-lg-3">
<div class="has-box">
<input ...>
<button> ...</button>
<div class="modal">...</div>
<ul class="panel_toolbox">
<li>
<a class="close-link">
<i class="fa fa-close"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</form>
Inside <form>, there are multiple <div class="row">. Except for the first row, all the other rows have <i class="fa fa-close"> inside themselves. The purpose of my code is to allow users to remove a row by clicking 'x' icon. But in order to do that, I first need to know which row the user clicked.
JavaScript
$('.close-link').click(function () {
// if statement makes sure that the user doesn't remove the first row
if ($('form.data-table').children().length > 2) {
var $ROW = $(this).closest('.row');
$ROW.remove();
}
});
The above Javascript code works only for the second row, and from the third row, the remove icon won't work (first row is never to be removed, because it's a title row).
Here's how it looks like.
How can I edit my jQuery code so that I can detect which row the user clicked, and remove only that row?
++ Additional information
There is an "Add" button at the bottom, and new rows are added when I click the button. So, initially there are only two rows, title row and the input row. If I click add button, a new input row is added, and click is not recognized on the newly-added rows
Try this: You can use closest() function to find the parent div and then remove it. Use index to find the position of row so that first row will not be removed. Please check below code.
$(document).ready(function() {
$(document).on("click", ".close-link", function() {
var parent = $(this).closest(".row");
var index = parent.index();
if (index > 0) {
parent.remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form class="data-table">
<div class="row">...</div>
<div class="row">...</div>
<div class="row">
<div class="col-lg-3">...</div>
<div class="col-lg-3">...</div>
<div class="col-lg-3">
<div class="has-box">
<input value="This is value">
<button>Button</button>
<div class="modal"></div>
<ul class="panel_toolbox">
<li>
<a class="close-link">Close
<i class="fa fa-close"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</form>
Use closest('div.row').
Also change the length to 1
Example:
$('.close-link').click(function() {
// if statement makes sure that the user doesn't remove the first row
if ($('form.data-table').children().length > 1) {
var $ROW = $(this).closest('div.row');
$ROW.remove();
}
});
Update:(As per question update)
Use the following type click event for dynamically added rows also to work.
$("form.data-table").on("click", ".close-link", function() {
// if statement makes sure that the user doesn't remove the first row
if ($('form.data-table').children().length > 1) {
var $ROW = $(this).closest('div.row');
$ROW.remove();
}
});
Apologies in advance if this is a simple trick, but I'm not any good at javascript so I don't know how to do it...
I have two buttons (blue and yellow) that toggle between two divs with content. On another part of the page, I have another two buttons (also blue and yellow) that are supposed to activate the same-colored button of these two toggle buttons. So blue will activate toggle-blue and yellow will activate toggle-yellow. I used the below script I found on here for the toggle feature:
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">AAA</div>
<div class="container" id="content-b">BBB</div>
</div>
</div>
// set content on click
$('.button').click(function (e) {
e.preventDefault();
setContent($(this));
});
// set content on load
$('.button.active').length && setContent($('.button.active'));
function setContent($el) {
$('.button').removeClass('active');
$('.container').hide();
$el.addClass('active');
$($el.data('rel')).show();
}
from here:
jsfiddle
What do I add to make the other two buttons trigger the active states of their corresponding toggle buttons?
Many thanks in advance for any help!
Since you said you need the second set of buttons to trigger actions of the first set, this means that buttons do the same thing.
Here's an example of how this works:
http://jsfiddle.net/ivanbatic/b43m405x/
Javascript:
$('.activator').on('click', function () {
var target = $(this).attr('data-target');
$('.panel').removeClass('active');
$(target).toggleClass('active');
});
HTML
<section>
<button class="activator" data-target=".panel-a">Blue</button>
<button class="activator" data-target=".panel-b">Yellow</button>
<section>
<div class="panel active panel-a">First Panel</div>
<div class="panel panel-b">Second Panel</div>
</section>
<section>
<button class="activator" data-target=".panel-a">Blue</button>
<button class="activator" data-target=".panel-b">Yellow</button>
</section>
Also, you are not using buttons in your example, you are using links. Links are meant to take you to another page, buttons are meant to trigger an action.
If you want buttons to look like plain text, use CSS for styling.
You can do pretty much the same, just use the selector based on your data-rel to add the active class and add the active class to the button's data-rel statement, like that it's quite easy to always toggle the matching tags
function setContent($el) {
var rel = $el.data('rel');
$('.active').removeClass('active');
$('.container').hide();
$('[data-rel="' + rel + '"]').addClass('active');
$(rel).show();
}
$(function() {
// the right place to fire the initial setContent (all scripts are ready and page is loaded)
setContent($('.button.active'));
// add event handlers in ready event (DOM is most surely there)
$('.button').click(function(e) {
e.preventDefault();
setContent($(this));
});
});
.container {
display: none;
}
.button.active {
color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">
AAA
</div>
<div class="container" id="content-b">
BBB
</div>
</div>
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
</div>
Let me first say I am 98% positive I am going about this the wrong way.
First time poster, be gentle. I am working on a website where I want a primitive admin portal back-end where the site can be managed in a single .php page. I have two columns, on the left is a series of stacked nav-pills and on the right is a PHP form to edit site content. Depending on which nav-pill is clicked, the right hand side will display a corresponding PHP form. I need the jQuery function to .empty() the container div called "admin-div" and .toggle() the proper div based on id. The jQuery doesn't seem to be working, and I'm having a hard time grasping why. I am entirely new at jQuery and I'm still a student, so forgive any obvious oversights. Code below for reference. Thanks in advanced! (Sorry if this is off-topic or not a valid question / post, I'm new).
$(document).ready(function(){
$("#geo-btn").click(function(){
$("#admin-div").empty();
$("#geo-div").toggle();
});
});
$(document).ready(function(){
$("#school-btn").click(function(){
$("#admin-div").empty();
$("#school-div").toggle();
});
});
<div class="container">
<ul class="nav nav-pills nav-stacked nav-justified">
<label>Edit Geographic Information</label>
<li><button id="geo-btn" class="btn btn-warning" >Geography</button></li><br>
<li><button id="school-btn" class="btn btn-warning" >Schools</button></li><br>
</ul>
<div class="admin-div">
<div id="geo-div" align="left" class="span8">
<?php
require("geo.inc.php");
?>
</div>
<div id="school-div" align="left" class="span8">
<?php
require("school.inc.php");
?>
</div>
</div>
Is this what you are trying to do:
<ul class="nav nav-pills nav-stacked nav-justified">
<label>Edit Geographic Information</label>
<li><button category="geo" class="btn btn-warning" >Geography</button></li><br>
<li><button category="school" class="btn btn-warning" >Schools</button></li><br>
</ul>
<div id="admin-div">
<div id="geo-div" align="left" class="span8">
<?php
require("geo.inc.php");
?>
</div>
<div id="school-div" align="left" class="span8" style="display: none;">
<?php
require("school.inc.php");
?>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".btn").click(function()
{
var category = $(this).attr("category")
$("#admin-div div").hide();
$("#"+category+"-div").fadeIn();
});
});
</script>
If I understand your question you need content switcher so here's an example FIDDLE
First add data-rel attribute to buttons, content of the data-rel attribute must match div ID in this case, it don't has to be data-rel it could be data-anything because it's HTML5 custom data attribute but if you change it don't forget to change the name in the script too.
<li><button id="geo-btn" data-rel="geo-div" class="btn btn-warning" >Geography</button></li>
<li><button id="school-btn" data-rel="school-div" class="btn btn-warning" >Schools</button></li>
Second add this piece of CSS
.span8:first-child {
display: block;
}
.span8 {
position: absolute;
display: none;
}
Third and last add this script just before the </body> tag
<script>
$(function() { // <-- Short for $(document).ready(function() {
$('.btn').click(function() {
$('#'+$(this).data('rel')).stop().fadeIn(450).siblings('.span8').stop().fadeOut(450);
});
});
</script>
i have a html like this,
<div class="main">
<ul>
<li ng-repeat='save in saves'>
<h3>{{save.name}}</h3>
<div >
<ul>
<li ng-repeat='story in stories'>
<div ng-show="story.display"><label>welcome</label></div>
<div ng-show="!story.display"><input type="text"></div>
</li>
</ul>
</div>
<div ng-click="add()">Click</div>
</li>
</ul>
<div ng-click="theme()">Add theme</div>
</div>
my contoller like this
$scope.saves=[];
$scope.stories=[];
$scope.theme=function()
{
$scope.saves.push({name:'joseph',name:'john',name'peter'});
};
$scope.add=function()
{
$scope.stories.push({display:'false'});
};
Here i am doing this ,
When user click on addtheme button i am pushing name into saves (Array) and then repeating it with li tag so out put like this
joseph
click
john
click
peter
click
so when again user click on click , i want to show only one textbox for specific clicked li..but here what happened , when i click on click button it is showing three text box for three li tag....
How to open specific textbox?
your can replace
<div ng-show="!story.display"><input type="text"></div>
to
<div ng-hide="story.display"><input type="text"></div>
This question already has answers here:
Keep toggle state on divs using cookie.js after page refresh view jsFiddle
(2 answers)
Closed 9 years ago.
I have a simple code which allows me to toggle betwen two divs which are wraps for two sub navigations (#sub-nav-wrap is the alternative nav). They are fixed to the bottom of the browser :
$(function(){
$('.button').click(function(){
$('#sub-nav-wrapmin').toggle();
$('#sub-nav-wrap').toggle();
});
});
What I wish to do is to keep the state of each div the same as chosen by the user after page refresh and even if the clicks on a new sub-heading the menu will remain the same, rather then resorting to the default state.
The html is this:
<!--- Main Sub Wrap --->
<div id="bottom-wrap">
<!-- Mini Sub Nav -->
<div id="sub-nav-wrapmin" class="snWrap divone">
<div id="sn-contentmin">
<div id="sn-likemin"></div>
<div id="sn-coffeesml"></div>
<div id="sn-sharemin"></div>
<div id="sn-commentsml"></div>
<div id="toggle-barmin">
<div id="sn-sidebrdrmin"></div>
<div class="sn-toggle button"></div>
</div>
<ul class="sn-comicsmin menu">
<li><a class="sn-comics" style="background-position: right top" href="#comic.html">Comic</a></li>
<li><a class="sn-archive" href="#archive.html">Archive</a></li>
<li><a class="sn-vote" href="#vote.html">Vote</a></li>
<li><a class="sn-spotlight" href="#spotlight.html">Spotlight</a></li>
</ul>
</div>
</div>
<!-- Sub Nav -->
<div id="sub-nav-wrap" class="snWrap divtwo">
<div id="sub-nav-container">
<div id="sub-nav-content">
<div id="sn-bnrlft"></div>
<div id="sn-bnrrgt"></div>
<div class="sn-dividelft"></div>
<div class="sn-dividergt"></div>
<div id="sn-likebg"></div>
<div id="sn-coffeebtn">
</div>
<div id="sn-sharebtn"></div>
<div id="sn-commentbtn"></div>
<div id="toggle-bar">
<div id="sn-sidebrdr"></div>
<div class="toggle button"></div>
</div>
</div>
<div id="sub-nav-brdr">
<ul class="sub-nav-comics menu">
<li><a class="comics" style="background-position: right top" href="#comic.html">Comic</a></li>
<li><a class="archive" href="#archive.html">Archive</a></li>
<li><a class="vote" href="#vote.html">Vote</a></li>
<li><a class="spotlight" href="#spotlight.html">Spotlight</a></li>
</ul>
</div>
</div>
</div>
The CSS is this:
#sub-nav-wrap {
display: none;
}
This is my first time asking, and I have been wracking my brains to get this to work using other similar codes from this site, but nothing is working.
Please help...
you're almost done everything right only have written a lot of superfluous :)
$(function(){
if($.cookie('submin_visible') == 'true') {
$('#sub-nav-wrapmin').show();
$('#sub-nav-wrap').hide();
} else {
$('#sub-nav-wrapmin').hide();
$('#sub-nav-wrap').show();
}
$('.button').click(function(){
$('#sub-nav-wrapmin').toggle();
$('#sub-nav-wrap').toggle();
var isVisible = $('#sub-nav-wrapmin').is(':visible').toString();
$.cookie('submin_visible', isVisible);
});
});