I am trying to use a toggle switch inside a tab control, to change the display of data for the current tab. So I have 3 tabs (Plots, People and Address). Tabs 2 & 3 are easy as they are just plain text content. But tab 1 (Plots) I need to filter the display of data.
So I broke this down to try and get two buttons to hide and display the divs as I want them to, but they both just hide everything.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#current").toggle();
});
});
$(document).ready(function() {
$("button").click(function() {
$("#all").toggle();
});
});
</script>
</head>
<body>
<!--<div>
<input id="current" type="radio" name="group1" value="plots">Current Plots
<br>
<input id="all" type="radio" name="group1" value="plots1">All Plots
</div>-->
<button class="current">Toggle Current Plots DIV</button>
<button class="all">Toggle all plots DIV</button>
<hr>
<div class="current" id="current">
<p>This is a paragraph with little content.</p>
<p>Paragraph 1 - Current Plots.</p>
<hr>
</div>
<div class="all" id="all">
<p>This is another small paragraph.</p>
<p>Paragraph 2 - All Plots</p>
<hr>
</div>
</body>
</html>
It's because for your click event you are using button as a selector, so any button element is going to toggle everything. Change the selector to the class on the button.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// This changed from button
$(".current").click(function() {
$("#current").toggle();
});
});
$(document).ready(function() {
// This changed from button
$(".all").click(function() {
$("#all").toggle();
});
});
</script>
</head>
<body>
<!--<div>
<input id="current" type="radio" name="group1" value="plots">Current Plots
<br>
<input id="all" type="radio" name="group1" value="plots1">All Plots
</div>-->
<button class="current">Toggle Current Plots DIV</button>
<button class="all">Toggle all plots DIV</button>
<hr>
<div class="current" id="current">
<p>This is a paragraph with little content.</p>
<p>Paragraph 1 - Current Plots.</p>
<hr>
</div>
<div class="all" id="all">
<p>This is another small paragraph.</p>
<p>Paragraph 2 - All Plots</p>
<hr>
</div>
</body>
</html>
Edit
Adding a more efficient way to handle by creating one function than can handle the buttons using data attributes on the button elements.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Use a data attribute on the button to toggle an element's id.
$('button').click(function() {
// get the button's data-target value
let target = $(this).data('target');
// use the data-target value to pass as the id of the target element.
$("#" + target).toggle();
});
});
</script>
</head>
<body>
<button data-target="current">Toggle Current Plots DIV</button>
<button data-target="all">Toggle all plots DIV</button>
<hr>
<div id="current">
<p>This is a paragraph with little content.</p>
<p>Paragraph 1 - Current Plots.</p>
<hr>
</div>
<div id="all">
<p>This is another small paragraph.</p>
<p>Paragraph 2 - All Plots</p>
<hr>
</div>
</body>
</html>
Related
the idea is list and grid classs.
example code:
$(document).ready(function(){
$(".cfredcf").on('click', function() {
$('.course-title-cf').removeClass('cfbluecf-p');
$('.course-title-cf').addClass('cfredcf-p');
});
$(".cfbluecf").on('click', function() {
$('.course-title-cf').removeClass('cfredcf-p');
$('.course-title-cf').addClass('cfbluecf-p');
});
});
.cfredcf-p{
color:red;
}
.cfbluecf-p{
color:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="cfredcf" style="color:red;">red</p>
<p class="cfbluecf" style="color:blue;">blue</p>
<hr />
<p class="course-title-cf">Title Example</p>
<p class="course-title-cf">Title Example</p>
<p class="course-title-cf">Title Example</p>
<hr />
the code working fine until now but when get more (Title Example) from the database by ajax and already choose red the new results is not coming with red i must click on red again !.
the new title or results comming from database:
it will be like that
<hr />
<p class="course-title-cf">Title Example</p>
<hr />
but not geting withe new add class i must click agin to add.
In fact, it would be more effective to add (AJAX) codes and see the scenarios, but,
A lot of solutions come to mind, but if you ask what is the smartest, fastest and easiest one, I would make a <div> element that wraps all these <p> elements. And until I color each <p>, I would do <div class = "cfredcf-p / cfbluecf-p">. Then my css is .cfredcf-p p {color: red;} I would rearrange it as.
$(document).ready(function() {
$(".cfredcf").on('click', function() {
$('.course-title-cf').removeClass('cfbluecf-p');
$('.course-title-cf').addClass('cfredcf-p');
});
$(".cfbluecf").on('click', function() {
$('.course-title-cf').removeClass('cfredcf-p');
$('.course-title-cf').addClass('cfbluecf-p');
});
$("button").on('click', function() {
$('.course-title-cf').append("<p>Title Example</p>");
});
});
.cfredcf-p p {
color: red;
}
.cfbluecf-p p {
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="cfredcf" style="color:red;">red</p>
<p class="cfbluecf" style="color:blue;">blue</p>
<button>Add new</button>
<hr />
<div class="course-title-cf">
<p>Title Example</p>
<p>Title Example</p>
<p>Title Example</p>
</div>
<hr />
Thus, every new <p> element inserted inside the wrapper element will take the same color.
I have a simple dialog box, which looks like the below:
<div class="uk-modal-body">
<h2 class="uk-modal-title">Title</h2>
<p>Some Text....</p>
<p class="uk-text-right">
<button id="information-button" class="uk-button uk-button-default uk-modal-close" type="button">More Information</button>
<button id="agree-button" class="uk-button uk-button-primary uk-modal-close" type="button">Agree</button>
</p>
</div>
And I am calling it to render in the following manner:
UIkit.modal.dialog(Popup, { 'bg-close' : false });
The dialog box works and renders just fine, however the options are not passed. I have also tried passing bg-close in the HTML in various places with no luck.
Please have a look at my snippet. There are 2 modals, one which uses DATA attribute, it matches the official documentation's bg-close:false.
Second uses Javascript, but bg-close doesn't work, because in JS it's called bgClose. I know it's not in the docs, but camelCase is common so it was my first guess and it works. Also you can find all available options by doing console.log(modal);
var modal = UIkit.modal('#js-modal', {'bgClose':false});
$('#toggleButton').on('click', function() {
modal.toggle();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/css/uikit.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- This modal uses HTML5 data attribute to prevent closing by clicking the background -->
<div id="data-modal" data-uk-modal="bg-close: false">
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Disabled with data attribute</h2>
<p>Some Text....</p>
<p class="uk-text-right">
<button id="information-button" class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
<button id="agree-button" class="uk-button uk-button-primary" type="button">Agree</button>
</p>
</div>
</div>
<!-- This modal uses JS to prevent closing by clicking the background -->
<div id="js-modal" data-uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Disabled with JS option</h2>
<p>Some Text....</p>
<p class="uk-text-right">
<button id="information-button" class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
<button id="agree-button" class="uk-button uk-button-primary" type="button">Agree</button>
</p>
</div>
</div>
<!-- This is a button toggling the modal -->
<div class="uk-position-center">
<button data-uk-toggle="target: #data-modal" class="uk-button uk-button-default">DATA BG-CLOSE FALSE</button>
<button id="toggleButton" class="uk-button uk-button-primary">JS BG-CLOSE FALSE</button>
</div>
I have two divs that I want to show on the page. The order of the two divs depends on the value of a variable on the scope.
The trivial way of doing this is by repeating the divs code twice in the page, each time in a different order:
<div class="option 1" ng-if="value">
<div class="div 1">
<p>"this is the content for div 1"</p>
</div>
<div class="div 2">
<p>"this is the content for div 2"</p>
</div>
</div>
<div class="option 2" ng-if="!value">
<div class="div 2">
<p>"this is the content for div 2"</p>
</div>
<div class="div 1">
<p>"this is the content for div 1"</p>
</div>
</div>
Is there another way to do this, without repeating the code?
If you do not support IE9 I guess you can use the flexbox order CSS property with a conditional class.
<div class="main">
<div ng-class="{after: !value}">this is the content for div 1</div>
<div class="fixed">this is the content for div 2</div>
</div>
And the CSS:
.main { display: flex; flex-direction: column; }
.fixed { order: 2; }
.after { order: 3; }
See the flexbox order in action: https://jsfiddle.net/a6eaov63/2/
UPDATE: You can move each <div> to external file and include it in proper order depending on value.
<ng-include src="value ? 'div1.html' : 'div2.html'"></ng-include>
<ng-include src="value ? 'div2.html' : 'div1.html'"></ng-include>
(function(angular) {
'use strict';
angular.module('orderDivs', [])
.controller('orderController', ['$scope', function($scope) {
//$scope.variable = true; //uncomment this line to reverse the div ..
$scope.divList = [{'div':'option 1','condition':'true', 'content':'THIS IS DIV 1111'},{'div':'option 2','condition':'false', 'content':'THIS IS DIV 2222'}]
if ($scope.variable){
$scope.divList = $scope.divList.reverse();
}
$scope.changeOrder = function(){
$scope.divList = $scope.divList.reverse();
}
}]);
})(window.angular);
<!-- in views -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="orderDivs">
<div ng-controller="orderController">
<input type="checkbox" ng-click="changeOrder()" ng-model="variable"/>
<div ng-repeat="opt in divList">
<div class="option" ng-model="opt.div" ng-if="opt.condition">
<div>
{{opt.content}}
</div>
</div>
</div>
</div>
</body>
</html>
This is an awesome place. I have the following code but it does not work - does not change the tabs when you click on the links embedded in these tabs. Hot sure why this does not work - please let me know why you think it might not be working..
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Tabs</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script id="demo" type="text/javascript">
$(document).ready(function() {
var tabs = $("#tabs").tabs();
var $tabs = $('#tabs').tabs(); // first tab selected
$('#my-text-link1').click(function() { // bind click event to link
$tabs.tabs('select', 0); // switch to 1st tab
return false;
})
$('#my-text-link2').click(function() { // bind click event to link
$tabs.tabs('select', 1); // switch to 2nd tab
return false;
})
$('#my-text-link3').click(function() { // bind click event to link
$tabs.tabs('select', 2); // switch to third tab
return false;
})
});
</script>
</head>
<body>
<div class="demo">
<div id="tabs">
<ul>
<li>ONE</li>
<li>TWO</li>
<li>and THREE</li>
</ul>
<div id="tabs-1">
<p>This is TAB 1, now is the time.</p>
<p><a href="#tabs-3" id="my-text-link5">I
want to open tab 3</a></p>
</div>
<div id="tabs-2">
<p>This is TAB 2, now is the time.</p>
<p><a href="#tabs-2" id="my-text-link6">I
want to open tab 2</a></p>
</div>
<div id="tabs-3">
<p>This is TAB 3, now is the time.</p>
<p><a href="#tabs-1" id="my-text-link4">I
want to open tab 1</a></p>
</div>
</div>
</div><!-- End demo --><!-- End demo-description -->
</body>
</html>
Look forward to hear from you,
Dave
I have called 2nd page <div id=child> on button click of 1st page <div id = home> and used jquery theme in both pages but the problem is in 2nd page there is no theme effect as in 1st page. I have put the css file in same folder and it is giving effect in 1st page and not in 2nd ?
Can any one solve the problem, so that the theme have effect in 2nd page also? Below is my code
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="jquerybasic/jquerymobilecss.css" />
<style>
/* App custom styles */
</style>
<script src="jquerybasic/jquery.min.js" type="text/javascript">
</script>
<script src="jquerybasic/jquery.mobile-1.1.0.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#buttonid').click(function() {
$('#child').toggle();
$('#home').toggle();
});
$('#buttonchild').click(function() {
$('#child').toggle();
$('#home').toggle();
});
$('#next').click(function() {
$('#home').show();
$('#child').hide();
});
$('#prev').click(function() {
$('#home').hide();
$('#child').show();
});
$('#nextchild').click(function() {
$('#home').show();
$('#child').hide();
});
$('#prevchild').click(function() {
$('#home').hide();
$('#child').show();
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-theme="d" data-role="header">
<h3>
The Grand Bhagavati
</h3>
<a data-role="button" id="next" data-inline="true" data-transition="slide" >
<<
</a>
<a data-role="button" id="prev" data-inline="true" data-transition="fade" >
>>
</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput1">
User:
</label>
<input id="textinput1" type="text" />
</fieldset>
</div>
<input id="buttonid" data-theme="d" value="Login" type="button" />
</div>
<div data-theme="d" data-role="footer" data-position="fixed" >
<h3>
Page 1
</h3>
</div>
</div>
<div data-role="page" id="child">
<div data-theme="d" data-role="header">
<h3>
The Grand Bhagavati
</h3>
<a data-role="button" id="nextchild" data-inline="true" data-direction="reverse" data-transition="slide" >
<<
</a>
<a data-role="button" id="prevchild" data-inline="true" data-direction="reverse" data-transition="fade" >
>>
</a>
</div>
<div data-role="content">
<label>
hi khushbu. welcome...!
</label>
<input id="buttonchild" data-theme="d" value="Login" type="button" class="ui-btn-hidden" aria-disabled="false" />
</div>
<div data-theme="d" data-role="footer" data-position="fixed" >
<h3>
Page 2
</h3>
</div>
</div>
<script>
//App custom javascript
</script>
</body>
Ok boy :)
It seems you've skipped a rather important part of using a new piece of software, reading the documentation.
To navigate between pages you would just place this in the href attribute for the link:
<a data-role="button" href="#child">...</a>
And jQuery Mobile will handle the transition to the next pseudo-page. Here is the documentation for Linking Pages: http://jquerymobile.com/demos/1.1.0/docs/pages/page-links.html
If you want to do this programatically then you can use $.mobile.changePage() which is what gets used internally. The advantage to manually calling this function (say in a click event handler for a button) is that you can specify non-default options for the transition:
$('#next').on('click', function () {
$.mobile.changePage($('#child'), { transition : 'slide', reverse : true });
});
Here is the documentation for $.mobile.changePage(): http://jquerymobile.com/demos/1.1.0/docs/api/methods.html
If you wanted to roll your own transitions it's quite a bit more complex than showing one div and hiding another. You've got to setup some CSS classes that animate the transition using CSS3 (transform, transition, keyframes, etc.).
And finally, here is a demo of your code where I replaced the links in the header with a single link that works: http://jsfiddle.net/MmKK4/