Is there a way to rearrange the order of the context menu items and possibly add dividers between them for grouping?
I followed this post https://forge.autodesk.com/blog/customize-viewer-context-menu to make a custom context menu.
For dividers I found functionality in the source code:
menu.push({divider: true})
Snippet of the source code for show() in contextMenu:
for (var i = 0; i < menu.length; ++i) {
var defn = menu[i],
title = defn.title,
target = defn.target,
icon = defn.icon,
shortcut = defn.shortcut,
divider = defn.divider;
var hasChildren = Array.isArray(target);
if (hasChildren && !menu.isChild) {
addExpandDiv = true; // Keep track of any item that is expandable
} else {
// As described in the design, limit the the number of menu levels to two.
// We will flatten the target array
hasChildren = false;
}
if (divider) {
menuItem = this.createDivider();
menuDiv.appendChild(menuItem);
} else {
Related
I have a function that hides a div with the corresponding ID based on a radio button change, however, I would like to hide multiple items at once and as ID is unique I am not able to just hide them all. How would I set up a class that I can hide and how would I adjust this code below to make that work?
Any help greatly appreciated
function onChangePackage() {
const nodes = document.getElementsByClassName("baseClass");
var selectedValue;
// Get selected radio
for (var i = 0, length = nodes.length; i < length; i++) {
if (nodes[i].checked) {
selectedValue = nodes[i].value;
break;
}
}
// Showing all nodes first
const nodePostFix = ['A','B','C'];
nodePostFix.forEach( node => {
const currentElement = elementsToHide.item(i);
if (currentElement.hasClass("hidden" + selectedValue)) {
currentElement.style.display = "none";
} else {
currentElement.style.display = "block";
}
});
};
You can use data attributes for this purpose together with the attribute selectors. So you need just to add the data-hidden-for attributes to the required nodes and access them using document.querySelector() or document.querySelectorAll()
First give all the elements a base class name baseClass. You could just give them a class name like hidden and then in your code you could do something like below:
const elementsToHide = document.getElementsByClassName("baseClass");
for (var i = 0; i < elementsToHide.length; i++) {
const currentElement = elementsToHide.item(i);
if (currentElement.hasClass("hidden")) {
currentElement.style.display = "none";
} else {
currentElement.style.display = "block";
}
}
And on the click event of the radio button you could add this class I mentioned above to whichever ones you want to hide:
element.classList.add("hidden");
or
element.classList.remove("hidden");
I'm trying to replace a selection with an image using Google Suite API.
I figured that if I can get the index of the selection I can insert an image at that specific index and then remove every selected element. However, I can't seem to get the index working correctly.
I've tried the following, but it only returns -1, even though I'm selecting a word in the middle of the text.
var doc = DocumentApp.getActiveDocument();
var selection = doc.getSelection();
var elements = selection.getRangeElements();
if(elements.length > 0){
return elements[0].getStartOffset();
}
I've tried searching the documentation, but can't find a solution.
What I want is something like:
var selection = doc.getSelection();
selection.replaceWithImage(image);
Thanks in advance.
I have a script which helps me locate things inside of a document. In fact, I used it last night to create an envelope printer script for Google Docs.
Here's a link to it. I'm always changing it to fit my particular needs so feel free to have fun with. It will help you to find images too.
I solved it by moving the position of the cursor to the beginning of the selection. Here is the code commented for others having the same question.
function insertImage(imageURL){
var doc = DocumentApp.getActiveDocument();
var body = doc.getBody();
var UI = DocumentApp.getUi();
var blob = UrlFetchApp.fetch(imageURL).getBlob();
var cursor = doc.getCursor();
/* If cursor is null, there is a selection not a position */
if(!cursor){
var selection = doc.getSelection();
/* Get all elements selected */
var elements = selection.getRangeElements();
if(elements[0]){
var element = elements[0].getElement();
var index;
var previousElement = element.getPreviousSibling();
var fakedElement = false;
var position;
/* If the element is type TEXT you can't get index from getChildIndex. */
if(element.getType().toString() == "TEXT"){
index = elements[0].getStartOffset();
if(element.getText() === " "){
element = doc.insertParagraph(index, "");
fakedElement = true;
}
} else {
index = element.getParent().getChildIndex(element);
}
/* If the selected element is an image, we need to append a fake paragraph to keep the cursor poisition. Dont worry, this will be removed later. */
if(elements.length === 1 && element.getType().toString() == "INLINE_IMAGE"){
element = doc.insertParagraph(index, "");
fakedElement = true;
}
/* Go through each element and remove it. */
elements.forEach( function (element, key) {
var text;
if(element.getElement().editAsText){
if(element.isPartial()){
text = element.getElement().editAsText();
text.deleteText(element.getStartOffset(), element.getEndOffsetInclusive());
} else {
doc.appendParagraph(''); // Create empty paragraph since you can't delete last paragraph.
text = element.getElement().removeFromParent();
}
} else {
element.getElement().removeFromParent();
}
});
if(body.getNumChildren() === 1){
paragraph = doc.getBody().appendParagraph('');
position = doc.newPosition(paragraph, 0);
doc.setCursor(position);
} else if(element && !element.getParent() && previousElement){
element = previousElement;
index = element.getParent().getChildIndex(element);
} else if(body.editAsText().getText().length === 0){
paragraph = doc.getBody().appendParagraph('');
position = doc.newPosition(paragraph, 0);
doc.setCursor(position);
} else {
position = doc.newPosition(element, index);
}
if(!position){
paragraph = doc.getBody().appendParagraph('');
position = doc.newPosition(paragraph, 0);
doc.setCursor(position);
}
/* Move position of cursor to the new position */
doc.setCursor(position);
/* Update cursor variable since its now available */
cursor = doc.getCursor();
/* If a placeholder element was created to keep the position, remove it. */
if(fakedElement){
element.removeFromParent();
}
}
}
/* Insert image */
var image = body.appendImage(blob);
cursor.insertInlineImage(image);
image.removeFromParent();
return true;
}
Update #2: Okay, I'm pretty sure my error in update #1 was because of indexing out of bounds over the array (I'm still not used to JS indexing at 0). But here is the new problem... if I write out the different combinations of the loop manually, setting the page index to 1 in moveItem() like so:
newForm.moveItem(itemsArray[0][0], 1);
newForm.moveItem(itemsArray[0][1], 1);
newForm.moveItem(itemsArray[0][2], 1);
newForm.moveItem(itemsArray[1][0], 1);
newForm.moveItem(itemsArray[1][1], 1);
newForm.moveItem(itemsArray[1][2], 1);
newForm.moveItem(itemsArray[2][0], 1);
...
...I don't get any errors but the items end up on different pages! What is going on?
Update #1:: Using Sandy Good's answer as well as a script I found at this WordPress blog, I have managed to get closer to what I needed. I believe Sandy Good misinterpreted what I wanted to do because I wasn't specific enough in my question.
I would like to:
Get all items from a page (section header, images, question etc)
Put them into an array
Do this for all pages, adding these arrays to an array (i.e: [[all items from page 1][all items from page 2][all items from page 3]...])
Shuffle the elements of this array
Repopulate a new form with each element of this array. In this way, page order will be randomized.
My JavaScript skills are poor (this is the first time I've used it). There is a step that produces null entries and I don't know why... I had to remove them manually. I am not able to complete step 5 as I get the following error:
Cannot convert Item,Item,Item to (class).
"Item,Item,Item" is the array element containing all the items from a particular page. So it seems that I can't add three items to a page at a time? Or is something else going on here?
Here is my code:
function shuffleForms() {
var itemsArray,shuffleQuestionsInNewForm,fncGetQuestionID,
newFormFile,newForm,newID,shuffle, sections;
// Copy template form by ID, set a new name
newFormFile = DriveApp.getFileById('1prfcl-RhaD4gn0b2oP4sbcKaRcZT5XoCAQCbLm1PR7I')
.makeCopy();
newFormFile.setName('AAAAA_Shuffled_Form');
// Get ID of new form and open it
newID = newFormFile.getId();
newForm = FormApp.openById(newID);
// Initialize array to put IDs in
itemsArray = [];
function getPageItems(thisPageNum) {
Logger.log("Getting items for page number: " + thisPageNum );
var thisPageItems = []; // Used for result
var thisPageBreakIndex = getPageItem(thisPageNum).getIndex();
Logger.log( "This is index num : " + thisPageBreakIndex );
// Get all items from page
var allItems = newForm.getItems();
thisPageItems.push(allItems[thisPageBreakIndex]);
Logger.log( "Added pagebreak item: " + allItems[thisPageBreakIndex].getIndex() );
for( var i = thisPageBreakIndex+1; ( i < allItems.length ) && ( allItems[i].getType() != FormApp.ItemType.PAGE_BREAK ); ++i ) {
thisPageItems.push(allItems[i]);
Logger.log( "Added non-pagebreak item: " + allItems[i].getIndex() );
}
return thisPageItems;
}
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
Logger.log('shuffle ran')
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
function shuffleAndMove() {
// Get page items for all pages into an array
for(i = 2; i <= 5; i++) {
itemsArray[i] = getPageItems(i);
}
// Removes null values from array
itemsArray = itemsArray.filter(function(x){return x});
// Shuffle page items
itemsArray = shuffle(itemsArray);
// Move page items to the new form
for(i = 2; i <= 5; ++i) {
newForm.moveItem(itemsArray[i], i);
}
}
shuffleAndMove();
}
Original post: I have used Google forms to create a questionnaire. For my purposes, each question needs to be on a separate page but I need the pages to be randomized. A quick Google search shows this feature has not been added yet.
I see that the Form class in the Google apps script has a number of methods that alter/give access to various properties of Google Forms. Since I do not know Javascript and am not too familiar with Google apps/API I would like to know if what I am trying to do is even possible before diving in and figuring it all out.
If it is possible, I would appreciate any insight on what methods would be relevant for this task just to give me some direction to get started.
Based on comments from Sandy Good and two SE questions found here and here, this is the code I have so far:
// Script to shuffle question in a Google Form when the questions are in separate sections
function shuffleFormSections() {
getQuestionID();
createNewShuffledForm();
}
// Get question IDs
function getQuestionID() {
var form = FormApp.getActiveForm();
var items = form.getItems();
arrayID = [];
for (var i in items) {
arrayID[i] = items[i].getId();
}
// Logger.log(arrayID);
return(arrayID);
}
// Shuffle function
function shuffle(a) {
var j, x, i;
for (i = a.length; i; i--) {
j = Math.floor(Math.random() * i);
x = a[i - 1];
a[i - 1] = a[j];
a[j] = x;
}
}
// Shuffle IDs and create new form with new question order
function createNewShuffledForm() {
shuffle(arrayID);
// Logger.log(arrayID);
var newForm = FormApp.create('Shuffled Form');
for (var i in arrayID) {
arrayID[i].getItemsbyId();
}
}
Try this. There's a few "constants" to be set at the top of the function, check the comments. Form file copying and opening borrowed from Sandy Good's answer, thanks!
// This is the function to run, all the others here are helper functions
// You'll need to set your source file id and your destination file name in the
// constants at the top of this function here.
// It appears that the "Title" page does not count as a page, so you don't need
// to include it in the PAGES_AT_BEGINNING_TO_NOT_SHUFFLE count.
function shuffleFormPages() {
// UPDATE THESE CONSTANTS AS NEEDED
var PAGES_AT_BEGINNING_TO_NOT_SHUFFLE = 2; // preserve X intro pages; shuffle everything after page X
var SOURCE_FILE_ID = 'YOUR_SOURCE_FILE_ID_HERE';
var DESTINATION_FILE_NAME = 'YOUR_DESTINATION_FILE_NAME_HERE';
// Copy template form by ID, set a new name
var newFormFile = DriveApp.getFileById(SOURCE_FILE_ID).makeCopy();
newFormFile.setName(DESTINATION_FILE_NAME);
// Open the duplicated form file as a form
var newForm = FormApp.openById(newFormFile.getId());
var pages = extractPages(newForm);
shuffleEndOfPages(pages, PAGES_AT_BEGINNING_TO_NOT_SHUFFLE);
var shuffledFormItems = flatten(pages);
setFormItems(newForm, shuffledFormItems);
}
// Builds an array of "page" arrays. Each page array starts with a page break
// and continues until the next page break.
function extractPages(form) {
var formItems = form.getItems();
var currentPage = [];
var allPages = [];
formItems.forEach(function(item) {
if (item.getType() == FormApp.ItemType.PAGE_BREAK && currentPage.length > 0) {
// found a page break (and it isn't the first one)
allPages.push(currentPage); // push what we've built for this page onto the output array
currentPage = [item]; // reset the current page to just this most recent item
} else {
currentPage.push(item);
}
});
// We've got the last page dangling, so add it
allPages.push(currentPage);
return allPages;
};
// startIndex is the array index to start shuffling from. E.g. to start
// shuffling on page 5, startIndex should be 4. startIndex could also be thought
// of as the number of pages to keep unshuffled.
// This function has no return value, it just mutates pages
function shuffleEndOfPages(pages, startIndex) {
var currentIndex = pages.length;
// While there remain elements to shuffle...
while (currentIndex > startIndex) {
// Pick an element between startIndex and currentIndex (inclusive)
var randomIndex = Math.floor(Math.random() * (currentIndex - startIndex)) + startIndex;
currentIndex -= 1;
// And swap it with the current element.
var temporaryValue = pages[currentIndex];
pages[currentIndex] = pages[randomIndex];
pages[randomIndex] = temporaryValue;
}
};
// Sourced from elsewhere on SO:
// https://stackoverflow.com/a/15030117/4280232
function flatten(array) {
return array.reduce(
function (flattenedArray, toFlatten) {
return flattenedArray.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);
},
[]
);
};
// No safety checks around items being the same as the form length or whatever.
// This mutates form.
function setFormItems(form, items) {
items.forEach(function(item, index) {
form.moveItem(item, index);
});
};
I tested this code. It created a new Form, and then shuffled the questions in the new Form. It excludes page breaks, images and section headers. You need to provide a source file ID for the original template Form. This function has 3 inner sub-functions. The inner functions are at the top, and they are called at the bottom of the outer function. The arrayOfIDs variable does not need to be returned or passed to another function because it is available in the outer scope.
function shuffleFormSections() {
var arrayOfIDs,shuffleQuestionsInNewForm,fncGetQuestionID,
newFormFile,newForm,newID,items,shuffle;
newFormFile = DriveApp.getFileById('Put the source file ID here')
.makeCopy();
newFormFile.setName('AAAAA_Shuffled_Form');
newID = newFormFile.getId();
newForm = FormApp.openById(newID);
arrayOfIDs = [];
fncGetQuestionID = function() {
var i,L,thisID,thisItem,thisType;
items = newForm.getItems();
L = items.length;
for (i=0;i<L;i++) {
thisItem = items[i];
thisType = thisItem.getType();
if (thisType === FormApp.ItemType.PAGE_BREAK ||
thisType === FormApp.ItemType.SECTION_HEADER ||
thisType === FormApp.ItemType.IMAGE) {
continue;
}
thisID = thisItem.getId();
arrayOfIDs.push(thisID);
}
Logger.log('arrayOfIDs: ' + arrayOfIDs);
//the array arrayOfIDs does not need to be returned since it is available
//in the outermost scope
}// End of fncGetQuestionID function
shuffle = function() {// Shuffle function
var j, x, i;
Logger.log('shuffle ran')
for (i = arrayOfIDs.length; i; i--) {
j = Math.floor(Math.random() * i);
Logger.log('j: ' + j)
x = arrayOfIDs[i - 1];
Logger.log('x: ' + x)
arrayOfIDs[i - 1] = arrayOfIDs[j];
arrayOfIDs[j] = x;
}
Logger.log('arrayOfIDs: ' + arrayOfIDs)
}
shuffleQuestionsInNewForm = function() {
var i,L,thisID,thisItem,thisQuestion,questionType;
L = arrayOfIDs.length;
for (i=0;i<L;i++) {
thisID = arrayOfIDs[i];
Logger.log('thisID: ' + thisID)
thisItem = newForm.getItemById(thisID);
newForm.moveItem(thisItem, i)
}
}
fncGetQuestionID();//Get all the question ID's and put them into an array
shuffle();
shuffleQuestionsInNewForm();
}
I'm showing a set of pictures in a page. I use a GridView to show the pictures. However, when the user resizes the screen to make it narrow, I switch to a ListView.
The problem now is synchronizing the scroll position for the two lists. My approach to the solution is,
1. Get the first visible item of the first list.
2. Scroll the second list to that item using ScrollIntoView
However I'm unable to see any property in GridView/ListView that gives me the first information. Any ideas?
Also any other ways of doing this are appreciated.
That seems to be just about the way I would first try to do it. You can use the ItemsPanelRoot property of the GridView/ListView and get the Children of the panel, then use TransformToVisual().TransformPoint() relative to the list control on each child to find the first one that is visible.
The one gotcha I can think of is when ScrollIntoView() would scroll the item that was first in view port in one list to show as last in view in the other one. Maybe you could get the ScrollViewer from the template of the list control (e.g. by using VisualTreeHelper) and scroll to the beginning of the list first?
The most simple way to do it all might be to just scroll to the same relative offset in the list coming into view as the one going out. It might not be very precise, but it could work.
You could even do a nice animated transition of elements in one list into the elements in the other one.
*Update
I asked around and it seems like I forgot that the default panels in GridView and ListView - the ItemsWrapGrid and ItemsStackPanel contain a FirstVisibleIndex property that could be used to get the object and then call ScrollIntoView() on the list control, which in turns takes a ScrollIntoViewAlignment enum you can use to say you want the scrolled-to-item to be the first visible (aligned to the leading edge).
*Update 2
For ListViewBase - you can also use the ListViewPersistenceHelper to get and set relative offsets.
This upcoming update to WinRT XAML Toolkit might be helpful as it would allow you to simply call: gridView.SynchronizeScrollOffset(listView); or vice versa.
public static class ItemsControlExtensions
{
public static ScrollViewer GetScrollViewer(this ItemsControl itemsControl)
{
return itemsControl.GetFirstDescendantOfType<ScrollViewer>();
}
public static int GetFirstVisibleIndex(this ItemsControl itemsControl)
{
// First checking if no items source or an empty one is used
if (itemsControl.ItemsSource == null)
{
return -1;
}
var enumItemsSource = itemsControl.ItemsSource as IEnumerable;
if (enumItemsSource != null && !enumItemsSource.GetEnumerator().MoveNext())
{
return -1;
}
// Check if a modern panel is used as an items panel
var sourcePanel = itemsControl.ItemsPanelRoot;
if (sourcePanel == null)
{
throw new InvalidOperationException("Can't get first visible index from an ItemsControl with no ItemsPanel.");
}
var isp = sourcePanel as ItemsStackPanel;
if (isp != null)
{
return isp.FirstVisibleIndex;
}
var iwg = sourcePanel as ItemsWrapGrid;
if (iwg != null)
{
return iwg.FirstVisibleIndex;
}
// Check containers for first one in view
if (sourcePanel.Children.Count == 0)
{
return -1;
}
if (itemsControl.ActualWidth == 0)
{
throw new InvalidOperationException("Can't get first visible index from an ItemsControl that is not loaded or has zero size.");
}
for (int i = 0; i < sourcePanel.Children.Count; i++)
{
var container = (FrameworkElement)sourcePanel.Children[i];
var bounds = container.TransformToVisual(itemsControl).TransformBounds(new Rect(0, 0, container.ActualWidth, container.ActualHeight));
if (bounds.Left < itemsControl.ActualWidth &&
bounds.Top < itemsControl.ActualHeight &&
bounds.Right > 0 &&
bounds.Bottom > 0)
{
return itemsControl.IndexFromContainer(container);
}
}
throw new InvalidOperationException();
}
public static void SynchronizeScrollOffset(this ItemsControl targetItemsControl, ItemsControl sourceItemsControl, bool throwOnFail = false)
{
var firstVisibleIndex = sourceItemsControl.GetFirstVisibleIndex();
if (firstVisibleIndex == -1)
{
if (throwOnFail)
{
throw new InvalidOperationException();
}
return;
}
var targetListBox = targetItemsControl as ListBox;
if (targetListBox != null)
{
targetListBox.ScrollIntoView(sourceItemsControl.IndexFromContainer(sourceItemsControl.ContainerFromIndex(firstVisibleIndex)));
return;
}
var targetListViewBase = targetItemsControl as ListViewBase;
if (targetListViewBase != null)
{
targetListViewBase.ScrollIntoView(sourceItemsControl.IndexFromContainer(sourceItemsControl.ContainerFromIndex(firstVisibleIndex)), ScrollIntoViewAlignment.Leading);
return;
}
var scrollViewer = targetItemsControl.GetScrollViewer();
if (scrollViewer != null)
{
var container = (FrameworkElement) targetItemsControl.ContainerFromIndex(firstVisibleIndex);
var position = container.TransformToVisual(scrollViewer).TransformPoint(new Point());
scrollViewer.ChangeView(scrollViewer.HorizontalOffset + position.X, scrollViewer.VerticalOffset + position.Y, null);
}
}
}
I need to create one single web page with 4 tab. By pressing on a tab the relevant content should display on the whole page and that should work for all tabs. I mean, when user press on one tab it will display content which will be linked to that tab and hide another tab's content. How can I do it in HTML and CSS?
Jquery UI has an out of the box solution for this:
http://jqueryui.com/demos/tabs/
Granted it's not a pure HTML and CSS solution however I'm not sure you'll be able to do it without some form of scripting
This is my final solution to my problem:
function show(showEl) {
var elements = new Array("tahsilatlarIcerik", "faturaTabGraf", "odemeIcerik", "kasaIcerik");
for (var i = 0; i < elements.length; i++) {
if (showEl == elements[i]) {
document.getElementById(showEl).style.display = "block";
}
else {
hide(elements[i]);
}
}
}
function hide(hideEl) {
if (document.getElementById(hideEl).style.display != "") {
document.getElementById(hideEl).style.display = "none";
}
}
Basically, I've created an Array with elements id's inside and manipulate them with 2 function. Functions are called inside of tabs, e.g., <a id="faturaMenu" onclick="show('faturaTabGraf')">Fatura Analizi</a>. I hope this will be helpfull to someone.
I solwed problem with javascript code. I am posting it and I am wondering if there is another,
less coded way to do it? As far as I researched, I've found that in javascript declaring and asigning global variables at the same time is not supported, do you know any other simple way to do it?
AND CODE:
function getFatura() {
var tahsilatId = document.getElementById("tahsilatlarIcerik");
var faturaTabloId = document.getElementById("faturaTabloIcerik");
var faturaGrafikId = document.getElementById("faturaGrafikIcerik");
var odemelerId = document.getElementById("odemeIcerik");
var kasaId = document.getElementById("kasaIcerik");
faturaTabloId.style.display = "block";
faturaGrafikId.style.display = "block";
tahsilatId.style.display = "none";
odemelerId.style.display = "none";
kasaId.style.display = "none";
}
function getTahsilatlar() {
var tahsilatId = document.getElementById("tahsilatlarIcerik");
var faturaTabloId = document.getElementById("faturaTabloIcerik");
var faturaGrafikId = document.getElementById("faturaGrafikIcerik");
var odemelerId = document.getElementById("odemeIcerik");
var kasaId = document.getElementById("kasaIcerik");
faturaTabloId.style.display = "none";
faturaGrafikId.style.display = "none";
tahsilatId.style.display = "block";
odemelerId.style.display = "none";
kasaId.style.display = "none";
}
function getOdemeler() {
var tahsilatId = document.getElementById("tahsilatlarIcerik");
var faturaTabloId = document.getElementById("faturaTabloIcerik");
var faturaGrafikId = document.getElementById("faturaGrafikIcerik");
var odemelerId = document.getElementById("odemeIcerik");
var kasaId = document.getElementById("kasaIcerik");
faturaTabloId.style.display = "none";
faturaGrafikId.style.display = "none";
tahsilatId.style.display = "none";
odemelerId.style.display = "block";
kasaId.style.display = "none";
}
function getKasa() {
var tahsilatId = document.getElementById("tahsilatlarIcerik");
var faturaTabloId = document.getElementById("faturaTabloIcerik");
var faturaGrafikId = document.getElementById("faturaGrafikIcerik");
var odemelerId = document.getElementById("odemeIcerik");
var kasaId = document.getElementById("kasaIcerik");
faturaTabloId.style.display = "none";
faturaGrafikId.style.display = "none";
tahsilatId.style.display = "none";
odemelerId.style.display = "none";
kasaId.style.display = "block";
}
AND I AM CALLING THESE FUNCTION IN a element WITH onclick event. Basically I am changing display propertie of selected tab to BLOCK and display properties of other tabs to NONE.
Now, I have 4 tab, but I can not imagine what crowd of code will I need if it exceed to, for example 10 tabs.
Thanks,
You could do it with CSS/javascript by changing the z-indexes of the pages (as divs) onclick. This would bring one in front of the other.
Just have a div containing all the tabs, and then divs with different ids for each one.
Start with the page divs all having z-index:0;, except for the home div, which hasz-index:1;.
Each tab has an onclick="nextpage('page1') (Change page1 to the id of the corresponding page).
Then in the javascript, place this code:
function nextpage(pageid) {
//Find the highest z-index. May need to be customized
var elements = document.getElementsByTagName("*");
var highest_index = 0;
for (var i = 0; i < elements.length - 1; i++) {
if (parseInt(elements[i].style.zIndex) > highest_index) {
highest_index = parseInt(elements[i].style.zIndex;
}
}
var highest_index_1 = highest_index + 1;
//set the z index of the tab-page to the highest+1
getElementByid(pageid).object.style.zIndex="1";
}