How can I make a switchable table with buttons to lead to different view of another table? Something like this:
As you can see, once you click on the buttons it takes you to another table list.
Here is a base: http://jsbin.com/agavid/136/edit
Need something similar to this.
You can create several different tables and use a simple JS/jQuery script to show and hide the tables based on which button is pressed.
Essentially you would show all tables at start (for progressive enhancement), then hide all of them except the first one. Then when a button is clicked, hide all the tables and show only the one associated with that button.
Here's a demo of what I'm talking about. http://jsfiddle.net/7Ywbn/2/
(function () {
var tables = $("table");
//Grabs all the tables
tables.hide().first().show();
//Hides all the tables except first
$("a.button").on("click", function () {
//Adds eventListner to buttons
tables.hide();
//Hides all the tables
var tableTarget = $(this).data("table");
//Gets data# of button
$("table#" + tableTarget).show();
//Shows the table with an id equal to data attr of the button
})
})();
Hope I understood your question correctly.
here is a suggestion
wrap each table in a <div id="table1"> <div id="table2"> etc.. and hide them all by default. here is some help on that: hiding div using js
and then only show the <div> for the table associated with the button the user has clicked on. you can do this using javascript, jquery as a couple examples.
you may need to start looking into learning some basic javascript/jquery if you don't already know any, you are going to need it.
good luck.
You could create multiple divisions within the same file and hide all the divisions except the primary you want to display during the initial page load. then use "onClick='showNextDiv();" inside the buttons themselves.
A sample of the javascript would be:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script language="JavaScript" type="text/javascript">
jQuery.noConflict()
function showNextDiv() {
document.getElementById('DivName').style.display = "block";
document.getElementById('FirstDiv').style.display = "none";
}
</script>
All this is saying that when someone clicks on a button this script runs and displays the 'DivName' div. That's what "block" means. It also turns off the division "FirstDiv" by using the "none".
You can add as many "block" and/or "none" statements to the script. If you have 6 divisions you would want to display one and turn off 5.
I hope this is helpful. I'm not an expert at this but it works fine for me.
Related
I want to make a DIV which appear only when someone click on 3 buttons.
I searched through the posts and find something like, Hide/Show DIV onClick Button but i can't find anything like show DIV only after Click on all 3 buttons.I tried to modify a few but had no luck.
Anyone point me in the direction for example? Would like to do this in JS or jQuery.
Any help would be much appreciated.Thanks in Advance
I would do it by making an if-statement that passes if a variable counter you create reaches 3. Every click to one of 3 buttons adds to the counter once, and at 3 it passes the if-statement and the div appears.
For example, you should understand this code:
var counter = 0;
if(counter == 3) {
console.log("Show div!");
}
So your job is to figure out how to do this with your current situation, and instead of just console.log something random, to show the div you wish to show when the counter reaches 3.
It's the same if your buttons are 3 separate ones, just add to the counter upon each click.
So in your callback function inside JQuery's .click() function you can add to the counter every time someone clicks one of three buttons, and some where else in your js file you can make an if-statement checking if that variable has reached "3". If it has, make the div appear.
I suggest you work on this problem in this way before making improvements, such as considering how to improve this code so that it only works upon clicking each of the three unique buttons once. Breaking down problems is very important in programming.
One tip I have for when you reach this point is say you have 3 buttons with unique ids: 'btn-1', 'btn-2', 'btn-3', think of a way of making the if statement only fire off if each of those unique buttons are clicked.
See if you can get this to work yourself, and feel free check back with some sample code for more help.
You need to have one variable that acts as counter. And you need to make every of those buttons clickable only once.
<button class="clickableOnce">Btn 1</button>
<button class="clickableOnce">Btn 1</button>
<button class="clickableOnce">Btn 1</button>
<div class="theDiv" id="theDiv">
Javscript code:
var countMyClicks = 0;
jQuery('.clickableOnce').on('click', function() {
countMyClicks++;
jQuery(this).prop('disabled', true);
if(countMyClicks==3){
jQuery('#theDiv').show();
}
});
CSS code:
.theDiv{
background:red; height:10px; width:10px; display:none;
}
And you can check the fiddle here:
https://jsfiddle.net/c2uc44f1/
Make 3 buttons, put the same class in the 3 of them, like this:
<button class="ex">Button1</button>
<button class="ex">Button2</button>
<button class="ex">Button3</button>
Then use JS:
var a = 0;
$(".ex").click(function({
a++;
});
Link to form
The form can be found at the link above.
Up until this morning the radio buttons and the form had been working as expected, however now users can't change their answer once they've picked from one of the two radio buttons even though they use the same input name. Using $("#volunteer-form input:radio[name='gender']:checked").val() I've found that the value is being correctly set and that the two buttons are still linked by a common name. Also, it appears possible to switch between the two using a bit of jQuery, like so:
$("#volunteer-form input[name=gender][value=male]").prop('checked', true);
Any ideas?
its because of your javascript block here:
$(document).ready(function() {
$('.inline').fancybox({
'maxWidth': 600
});
$('.form').click(function(event){
event.preventDefault();
});
});
when you are clicking on the radio button inside the form your preventDefault is stopping the change of radiobutton state ... or maybe you already knew that.
What is the intended purpose of including the preventDefault where you have it?
I'm new to the use of jQuery so the problem I'm facing should be fairly straight forward. Basically what I'm trying to accomplish is load a variety of simple text-only pages within DIV elements of my site, and with a navigation bar hide/unhide these individual DIVs.
DIVs are correctly loaded the requested pages using an script block. However, what is not working correctly is toggling the visibility of these DIV blocks. I've narrowed it down to a jQuery function I've created which blocks the entire script call whenever I refer to any of the DIV blocks. Let me explain better with a code snippet.
This is is some very simple code that, on the click of a menu link, runs a hide function then shows the corresponding DIV element.
$( document ).ready(function()
{
console.log("document ready."); <-- does NOT get called with hideDivs()
$('#button1').click(function(){
hideDivs();
$("#page1").show();
});
$('#button2').click(function(){
hideDivs();
$("#page2").show();
});
});
This is the hideDivs() function, JUST above the ready function:
function hideDivs()
{
$("#page1").hide(); <-- These lines cause the entire
$("#page2").hide(); <-- <script> block to note get called.
}
Finally, page1 and page2 are created with a script block halfway inside the page:
<div id="page1"></div>
<div id="page2"></div>
<script>
$("#page1").html('<object style="overflow:hidden; width: 100%; height: 500px;" data="page1.php">').show();
$("#page2").html('<object style="overflow:hidden; width: 100%; height: 500px;" data="page2.php">').hide();
</script>
Why then is it that the top SCRIPT block fails with the hideDivs() function? I've tried placing it inside the $( document ).ready function with no change. Again, if the function is blank, or contains something simple like 'console.log' it works, but when referring to DIV tags it breaks.
Even stranger, the code that makes the function FAIL, WORKS if I simply rewrite the code as such:
$('#button1').click(function(){
$("#page1").hide(); <-- This works fine
$("#page2").hide(); <-- (page1 repeated to match function code)
$("#page1").show();
});
I have quite a few pages so I would much rather be able to use a function as not to have lots of repetitive code.
I have no errors displayed in my javascript console. I've looked closely at functions calls with StackOverflow and Google searches but couldn't spot a solution. I'm sure I've made a really silly mistake I'm overlooking, so any help would be much appreciated.
So instead of the whole function to hide your divs, you can simply put a class on each one and hide them by selecting that class. For example, each page Div give a class="clickablePages", and then do:
$(".clickablePages").hide();
that will simply hide all the divs that you have added the class to.
As for repeating all the button clicks for each button, you can simply do it in one function based on the id of the button. You can again put a class on all of the buttons as well, trigger the function by selecting the class and then grab the id you need within that function. something like this:
$('.buttonclick').click(function(){
var pageID = $(this).attr('id');
$("#page" + pageID).show();
});
In this case, if your buttons just had an id of '1' or '2' that matched the page number, it would only show the div for that page number. Hope that makes sense.
The reason I want to use the together is that I want to hide the content like display: none does, without leaving any whitespace as visibility: hidden does.
At the same time I want the hidden content not to be copied when the user copies the entire table from the webpage, not because it is sensitive information but because the user hid the field and therefore doesn't want it copied. visibility: hidden doesn't copy but display: none does, so I have quite a dilemma.
Anyone know a solution?
Edit:
What I ended up doing was just what was suggested, save the information as Javascript (as it is not sensitive information anyways) and create/remove dynamically with Javascript.
I do not think giving the element visibility: hidden prevents the user copying the information in the table, although this may be browser specific behavior. Have a look at the test I've set up: http://jsfiddle.net/a9JhV/
The results from Firefox 3.6.8 on Windows 7 is
Copy ME! Don't copy me :( Copy ME! Copy ME!
Copy ME! Don't copy me :( Copy ME! Copy ME!
Which doesn't work as expected.
I've cooked up some code, it took the quite a bit work of cook up... have a look here: http://jsfiddle.net/a9JhV/7/
It uses jQuery to hide and show the table columns - actually removes them from the DOM, not just play around with their visibility and whatnot. Whee!
Why not remove the node from the page? You could accomplish this by using:
<script type = 'text/javascript' language = 'JavaScript'>
document.getElementById('yourDivId').innerHTML = '';
//OR
document.removeChild(getElementById('yourDivId')); //(I think this is right...document might need to be replaced by the div's parent)
</script>
You should remove the "hidden" DOM object using javascript and then recreate it again if user wants it back. Data from deleted records can be stored in session storage or hidden inputs for example.
If you want elements HIDDEN from the source, place them in a separate text file and load it using an ajax-like call... this will prevent the html from being in the source.
If you place a clear image OVER the content they also will not be able to highlight it easily (and by using javascript you can likely disable their ability to do a ctrl+a)
hope that helps!
It's a good idea to create an object to represent the table:
var myTable = function(tableName){
// If you want to assign columns dynamically you could create this.addColumn();
this.Columns = new Array(
new Array("row1","row2","row3","row4"),
new Array("row1","row2","row3","row4")
);
this.reBuild = function(){
for (col in this.Columns){
for(row in this.Columns[col]){
// put the cell in the table
}
}
};
};
I didn't test this code, it should just illustrate the gist of storing and building a table.
I want to find and replace functionality in contentEditable div. I want to add one toolbar in which one find and replace button placed. when one press this button then one popup window open and ask for keyword to search when keyword is given then it will find only in given div id not whole document and highlight it.
Is this jquery plugin what you are looking for?
You can call it like this:
jQuery(function()
{
var options =
{
exact:"exact",
keys:"lorem ispum"
}
$("#myDiv").SearchHighlight(options);
});