I am trying to change the background of selected href , which is not
working for me. i can see selected href in console log. Can someone
help me understand if i am missing anything in my code ?
Below is my code:
-----------------
<style>
.current {
background-color: tomato;
}
</style>
function getwlan() {
$.ajax({
url: '/getwlan',
data: $('form').serialize(),
type: 'POST',
success: function(response){
var wlan = JSON.parse(response);
var options = "";
var row = $('<tr>');
var zone="<b>System Zones</b>";
for (var i = 0; i < wlan.length; i++) {
if (wlan[i].wlan_zone){
z1=new Array (wlan[i].wlan_zone)
zone += "<h5>"+ z1 + "</h5>";
}
}
$("#divzone").html(zone);
$('#divzone a').on('click', function(event) {
event.preventDefault();
var v=($(this).attr('href'));
var s1= sessionStorage.setItem('zones', v);
var s2=sessionStorage.getItem("zones");
console.log(v)
$(this).addClass('current');
var section_id = $(this).attr('href');
var section_color = $(section_id).css('background-color');
$(this).css('background-color', section_color);
'
Follow this example this is relavent to your question :
$('#divzone a').on('click', function(event) {
event.preventDefault();
$('#divzone a').removeClass('current');
$(this).addClass('current');
});
.current {
background-color: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='divzone'>
<a class='link'>href</a>
<a class='link'>href</a>
<a class='link'>href</a>
<a class='link'>href</a>
<a class='link'>href</a>
<a class='link'>href</a>
<a class='link'>href</a>
</div>
Change the link background based on the clicked link with color of section id that contain in href attribute of clicked link.
$('a').click(function(){
$('a').css('background-color','');
var sectionId = $(this).attr('href');
var backgroundColor = $(sectionId).css('background-color');
$(this).css('background-color', backgroundColor);
})
a{
padding: 10px;
margin-bottom: 10px;
}
div{
height: 100px;
}
#sectionID1 {
background-color: #337ab7;
}
#sectionID2 {
background-color: #ffcc00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Section 1
section 2
<div id="sectionID1">
Section 1
</div>
<div id="sectionID2">
Section 2
</div>
Try to add !important on .current background-color to override any other same / more important declarations.
.current {
background-color: tomato !important;
}
Or this
#divzone a.current {
background-color: tomato !important;
}
Related
Have multiple buttons and sections associated with those buttons in the Elementor page builder.
What I am trying to achieve is when page loads, we can only see buttons and section will toggle when someone clicks on the button.
I have managed to achieve that, but when clicking on second button, button 1 section should hide and button 2 section should display.
Here is the w3 schools link for my project
jQuery(document).ready(function( $ ){
var hbtn = $(".coursesBtn");
var hcon = $(".coursesSection");
hcon.hide();
hbtn.click(function(e) {
var index = hbtn.index(this)
$(hcon).eq(index).slideToggle("slow");
e.preventDefault();
});
});
jQuery(document).ready(function( $ ){
var hbtn = $(".videosBtn");
var hcon = $(".videosSection");
hcon.hide();
hbtn.click(function(e) {
var index = hbtn.index(this)
$(hcon).eq(index).slideToggle("slow");
e.preventDefault();
});
});
You can use onclick for buttons for example
<button class="btn1" onclick="f1()">BUTTON1</button>
and add the function to toggle in f1()
Here is a quick example, the idea is to hide the other sections first, and show the section that you want to be displayed;
$(document).ready(function($) {
$('.btn1').click(function() {
$('.section').hide();
$('.section1').show();
})
$('.btn2').click(function() {
$('.section').hide();
$('.section2').show();
})
$('.btn3').click(function() {
$('.section').hide();
$('.section3').show();
})
})
.section {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
.section2 {
background-color: lightgreen;
}
.section3 {
background-color: orange;
}
<button class="btn1">BUTTON1</button>
<button class="btn2">BUTTON2</button>
<button class="btn3">BUTTON3</button>
<div class="section section1">
This is Section1.
</div>
<div class="section section2">
This is Section2.
</div>
<div class="section section3">
This is Section3.
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
Add a new class for each button (.btn) and section (.section) and use these as in the code below. You can have as many buttons and sections as you want and the code below will work without any modification:
var hbtn = $(".btn");
var hcon = $(".section");
hcon.hide();
hbtn.click(function(e) {
var index = hbtn.index(this);
hcon.hide() //OR hcon.filter(':visible').slideToggle("slow")
.eq(index).slideToggle("slow");
});
DEMO
$(document).ready(function( $ ){
var hbtn = $(".btn");
var hcon = $(".section");
hcon.hide();
hbtn.click(function(e) {
var index = hbtn.index(this);
hcon.hide() //OR hcon.filter(':visible').slideToggle("slow")
.eq(index).slideToggle("slow");
});
});
.section1 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
.section2 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn1 btn">BUTTON1</button>
<button class="btn2 btn">BUTTON2</button>
<div class="section1 section">
This is Section1.
</div>
<div class="section2 section">
This is Section2.
</div>
My code looks like this :
$(document).on('click', 'a[href^="#"]', function(e) {
var id = $(this).attr('href');
var $id = $(id);
if ($id.length === 0) {
return;
}
e.preventDefault();
var pos = $id.offset().top;
$('body, html').animate({scrollTop: pos});
});
body{
min-height: 1000px
}
div{
min-height: 300px;
margin: 20px 0;
background: red
}
#section-2{
background: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Section 1
Section 2
<div id="section-1"></div>
<div id="section-2"></div>
This works well with Section 1
But i have many different divs on the same page.
URL like this: Section 1
how does it work? can anyone help me? thanks in advance!
I have a javascript that changes the image scr when you click on the image and it will cycle through. I want to add pagination links to this script. I want a Previous & Next text link but I don't know how to make the Previous link to go back a image and the Next link to go to the next image.
Here's the live demo http://jsfiddle.net/08p52h59/3/
html:
<div id="container">
<div class="nav">
<img src="http://i.imgur.com/tL6nW.gif">
<img src="http://i.imgur.com/BfZ5f.gif">
<img src="http://i.imgur.com/mR7wo.gif">
</div>
</div>
<div id="d"></div>
javascript:
$(function() {
var $images = $("#container > .nav > a").clone();
var $length = $images.length;
var $imgShow = 0;
$("#container > .nav").html( $("#container > .nav > a:first") );
$("#container > .nav > a:first").click(function(event) {
$(this).children().attr("src",
$("img", $images).eq(++$imgShow % $length).attr("src") );
$("#container > .nav > a:last").attr("href", $($images).eq($imgShow % $length).attr("href"));
event.preventDefault();
});
});
Can anyone tell me how to add these pagination links?
I was playing around with something similar and thought I'd share it in case it's of any use to you, different ideas on how to do it.
/* set first image in frame from shoebox on document.ready */
$(function() {
var leadOff = $('shoebox img:first-child').attr('source');
$('.picture').attr({'src' : leadOff, 'imageposition' : '1'});
});
/* load next image from shoebox (click on image and/or next button) */
$('pictureframe, buttonright').click(function() {
var imageTally = $('shoebox img').length;
var imagePosition = $('.picture').attr('imageposition');
var plusOne = parseInt(imagePosition) + 1;
var nextUp = $('shoebox img:nth-child(' + plusOne + ')').attr('source');
if (imagePosition == imageTally) {
var leadOff = $('shoebox img:first-child').attr('source');
$('.picture').attr({'src' : leadOff, 'imageposition' : '1'});
} else {
$('.picture').attr({'src' : nextUp, 'imageposition' : plusOne});
}
});
/* load previous image from shoebox (click on prev button) */
$('buttonleft').click(function() {
var imageTally = $('shoebox img').length;
var imagePosition = $('.picture').attr('imageposition');
var minusOne = parseInt(imagePosition) - 1;
var nextUp = $('shoebox img:nth-child(' + minusOne + ')').attr('source');
if (imagePosition == '1') {
var lastPic = $('shoebox img:last-child').attr('source');
$('.picture').attr({'src' : lastPic, 'imageposition' : imageTally});
} else {
$('.picture').attr({'src' : nextUp, 'imageposition' : minusOne});
}
});
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
wall {
display: flex;
flex-direction: column;
padding: 6px;
background-color: hsla(0, 0%, 20%, 1);
}
pictureframe {
display: flex;
padding: 6px;
background-color: hsla(0, 0%, 40%, 1);
}
pictureframe img {
display: flex;
width: 100px;
height: 100px;
}
buttonswrapper {
display: flex;
flex-grow: 1;
}
buttonleft, buttonright {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
padding: 6px;
color: hsla(40, 20%, 70%, 1);
font-variant: small-caps;
font-weight: bold;
font-family: Verdana, sans-serif;
background-color: hsla(0, 0%, 40%, 1);
cursor: pointer;
}
buttonleft:hover, buttonright:hover {
background-color: hsla(50, 50%, 40%, 1);
}
shoebox {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<wall>
<pictureframe>
<img class="picture" src="">
</pictureframe>
<buttonswrapper>
<buttonleft>prev</buttonleft>
<buttonright>next</buttonright>
</buttonswrapper>
</wall>
<shoebox>
<!-- prevent loading all images by changing src to source -->
<img source="http://i.imgur.com/tL6nW.gif">
<img source="http://i.imgur.com/BfZ5f.gif">
<img source="http://i.imgur.com/mR7wo.gif">
</shoebox>
fiddle
http://jsfiddle.net/Hastig/bjw9rpo0/8/
Let me know if annotations are needed and if you need the href's I have some ideas for that as well.
You could add data-id=NUMBER param and get $(this).attr('data-id') when it's clicked and showing +1 (next) or -1 (previous). Current showed image need a class too to know where's the pointer. Check when you'll go over to get the first / last one.
Full example
HTML
<div id="container">
<div class="nav">
<a class="current" data-id="1" href="http://stackoverflow.com/"><img src="http://i.imgur.com/tL6nW.gif"></a>
<a data-id="2" href="http://meta.stackoverflow.com/"><img src="http://i.imgur.com/BfZ5f.gif"></a>
<a data-id="3" href="http://chat.meta.stackoverflow.com/"><img src="http://i.imgur.com/mR7wo.gif"></a>
</div>
</div>
<div id="d">
<a class="prev" href="">Prev</a>
<a class="next" href="">Next</a></div>
CSS
a img {
display: none;
}
a.current img {
display: block;
}
JS
$(function() {
$("a").click(function(event) {
event.preventDefault();
var pointer = $(this).attr('data-id');
var alength = $('.nav a').length;
if ( !$(this).hasClass('current') ) {
var pointer = $('a.current').attr('data-id');
$('a.current').removeClass('current');
}
if ($(this).hasClass('prev')){
$('a.current').removeClass('current');
pointer--;
if (pointer < 1) { pointer = alength; }
} else {
$(this).removeClass('current');
pointer++;
if (pointer > alength) { pointer = 1; }
}
$('a[data-id="'+pointer+'"]').addClass('current');
});
});
Codepen: https://codepen.io/anon/pen/AXGGPJ?editors=1011
I'm building a tabbed content page. I was trying to build a form that would take a value from the form and create a new tab and also create a new div that would attach to the tab, that would be triggered by an on click function. I was having some trouble creating the div, it didn't seem to launch. When the value is entered, the tab is supposed to go active so the content would show up. I think I'm either doing something wrong with the new div or the on click function. I wasn't sure if those two code pieces should be combined, since they seemed to be in conflict. Thanks.
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
$('.tabs ' + currentAttrValue).show();
$('.tabs ' + currentAttrValue).animate({
opacity: 1,
paddingLeft: '30%'
}, 400);
$('.tabs ' + currentAttrValue).siblings().css({
opacity: 0,
paddingLeft: '0%'
});
$('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
$(function() {
var $textInput = $('input:text');
$('#examine').on('submit', function(e) {
e.preventDefault();
var newText = $textInput.val();
$('ul:last').append('<li>Searching...</li>');
$('#tab-content').append('<div id ="tab5' + '"class="tab active"><p>the quick brown fox</p></div>');
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
$textInput.val('');
});
});
.tab-links {
float: left;
}
.tab-links:after {
display: block;
clear: both;
content: '';
}
.tab-links li {
list-style-type: none;
background-color: #303030;
border-bottom: 3px solid #858585;
font-family: 'Jacques Francois', serif;
text-transform: uppercase;
letter-spacing: 0.09em;
margin-left: -25%;
}
.tab-links li a {
color: #f2f2f2;
display: block;
padding: 3px 10px 3px 10px;
text-decoration: none;
}
.tab-links a:hover {
background: #a7cce5;
text-decoration: none;
}
.tab-links li.active,
.tab-links li.hover {
background-color: #e5e5e5;
border-bottom: 3px solid #e5e5e5;
}
.tab-links li.active a,
.tab-links li a:hover {
color: #666;
background-color: #e5e5e5;
}
/*----- Content of Tabs -----*/
.tab-content {
background-color: #e5e5e5;
color: #666;
min-height: 150px;
overflow: auto;
}
#tab1 {
padding-left: 30%;
}
#tab2,
#tab3,
#tab4,
#tab5 {
display: none;
opacity: 0;
padding-left: 0%;
}
.tab-content p {
margin: 20px;
text-indent: -40%;
}
.tab-content.active {
display: block;
text-indent: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidebar">
<div id="explore">
<form id="examine">
<p>Search</p>
<input type="search" name="explore" placeholder="Search Items" />
<p>Choose Your Search Restrictions</p>
<input type="radio" name="location" required="required" value="Your School" />Inside
<input type="radio" name="location" required="required" value="Whole system" />Outside
<input type="submit" value="Search" />
</form>
</div>
<div class="tabs">
<ul class="tab-links">
<li class="active">Tab1
</li>
<li>Tab2
</li>
<li>Tab3
</li>
<li>Tab4
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<p>Tab1 content</p>
</div>
<div id="tab2" class="tab">
<p>Tab2 content</p>
</div>
<div id="tab3" class="tab">
<p>Tab3 content</p>
</div>
<div id="tab4" class="tab">
<p>Tab4 content</p>
</div>
First off you do not need two document ready handlers.
For clarity, I have added the NEW index to the "Searching..." string so you may need to edit that.
Use the index to get the new ID and append that to the list.
cache the tab and not process DOM for the tab
I assume you have some need for $textInput.val(''); so I left it
put your click handler on the .tab-links so new ones will have it (not on a1)
consider using classes and indexes instead of new IDs for tab5 etc.
if you use classes you could then clone the last tab and put in new content into the clone, making it more maintainable if the markup changes
I put a trigger on the newly added tab to activate it - it SEEMED as if that was your desire?
Consider a BUTTON rather than <input type="submit"...
Revised code:
jQuery(document).ready(function() {
jQuery('.tabs').find('.tab-links').on('click', 'a', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// cache instead of multiple
var thisTab = $(currentAttrValue);
thisTab.show().animate({
opacity: 1,
paddingLeft: '30%'
}, 400);
thisTab.siblings().css({
opacity: 0,
paddingLeft: '0%'
});
thisTab.fadeIn(400).siblings().hide();
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
var $textInput = $('input:text');
$('#examine').on('submit', function(e) {
e.preventDefault();
var newText = $textInput.val();
var newIndex = $('.tab-links').find('li').length + 1;
$('.tab-content').append('<div id="tab' + newIndex + '" class="tab"><p>the quick brown fox ' + newIndex + '</p></div>');
$textInput.val('');
$('.tab-links').append('<li>Searching...' + newIndex + '</li>');
$('.tab-links').find('a').eq(newIndex - 1).trigger('click');
});
});f
EDIT: Per comment, update if already at max count:
This is not super efficient but you can get started with this.
jQuery(document).ready(function() {
jQuery('.tabs').find('.tab-links').on('click', 'a', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// console.log(currentAttrValue);
var thisTab = $(currentAttrValue);
thisTab.show().animate({
opacity: 1,
paddingLeft: '30%'
}, 400);
thisTab.siblings().css({
opacity: 0,
paddingLeft: '0%'
});
thisTab.fadeIn(400).siblings().hide();
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
var maxTabCount = 5;
var $textInput = $('input[type=search]');
$('#examine').on('submit', function(e) {
e.preventDefault();
var newText = $textInput.val();
var tabCount = $('.tab-links').find('li').length;
var newIndex = tabCount + 1;
var newText = $textInput.val() ? $textInput.val() : "Default Tab Text";
if (tabCount < maxTabCount) {
$('.tab-content').append('<div id="tab' + newIndex + '" class="tab"><p>the quick brown fox ' + newIndex + '</p></div>');
$('.tab-links').append('<li>Searching...' + newIndex + '</li>');
} else {
$('.tab-content').find('div.tab').last().find('p').html("New Search Content");
$('.tab-links').find('li').last().find('a').html(newText);// new tab text
}
$textInput.val('');
$('.tab-links').find('a').last().trigger('click');
});
});
You are using id for tab-content instead of class. Use the following line:
$('.tab-content').append('<div id ="tab5' + '"class="tab active">...</div>');
Replace this line jQuery('.tabs .tab-links a').on('click', function(e) with the following:
jQuery(document).on("click",".tabs .tab-links a",function() {
Can you tell me why the anchor link with class "edit" falling in next line the next time it is being displayed/showed?
To replicate click, edit button and then save button on jsfiddle link below.
JS Fiddle
HTML
<div id="con">
Delete
Edit
Save</div>
JQUERY
$(".edit").click(function(){
var ID=$(this).attr('id');
var RemoveIDedit = ID.replace('edit_','');
$(this).hide();
$("#save_"+RemoveIDedit).show();
});
$(".save").click(function(){
var ID=$(this).attr("id");
var RemoveIDsave = ID.replace('save_','');
$(this).hide()
$("#edit_"+RemoveIDsave).show();
Demo
instead of this
$("#edit_"+RemoveIDsave).show();
Try this
$("#edit_"+RemoveIDsave).css("display","inline");
Remove position:absolute for .edit and .save from your stylesheet.
This is due to display: block;, replace it with display: inline;
Please use following code, I've edited this
$(document).ready(function() {
$(".edit").click(function() {
var ID = $(this).attr('id');
var RemoveIDedit = ID.replace('edit_', '');
$(this).hide();
$("#save_" + RemoveIDedit).css('display', 'inline');
});
$(".save").click(function() {
var ID = $(this).attr("id");
var RemoveIDsave = ID.replace('save_', '');
$(this).hide()
$("#edit_" + RemoveIDsave).css('display', 'inline');
});
});
.save {
display: none;
}
.save,
.edit {
position: absolute;
padding-left: 5px;
}
#con {
width: 500px;
height: 500px;
border: 1px solid;
boreder-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="con"> DeleteEdit Save
</div>a
You can use the Visibility property instead of display
css
.save {
visibility:hidden;
}
.save, .edit {
position: absolute;
padding-left: 5px;
}
jquery
$(document).ready(function() {
$(".edit").click(function(){
var ID=$(this).attr('id');
var RemoveIDedit = ID.replace('edit_','');
$(this).css("visibility","hidden");
$("#save_"+RemoveIDedit).css("visibility","visible");
});
$(".save").click(function(){
var ID=$(this).attr("id");
var RemoveIDsave = ID.replace('save_','');
$(this).css("visibility","hidden");
$("#edit_"+RemoveIDsave).css("visibility","visible");
});
});
Hope this may satisfy you