Hello I am trying to create HTML form with JavaScript tabs. There are three tabs and I want to hide second and third tab contents in page on load.
This is my Javascript function
window.onload = function() {
// get tab container
var container = document.getElementById("tabContainer");
var tabcon = document.getElementById("tabscontent");
//alert(tabcon.childNodes.item(1));
// set current tab
var navitem = document.getElementById("tabHeader_1");
//store which tab we are on
var ident = navitem.id.split("_")[1];
//alert(ident);
navitem.parentNode.setAttribute("data-current",ident);
//set current tab with class of activetabheader
navitem.setAttribute("class","tabActiveHeader");
//hide two tab contents we don't need
var pages = tabcon.getElementsByTagName("div");
for (var i = 1; i < pages.length; i++) {
pages.item(i).style.display="none";
};
//this adds click event to tabs
var tabs = container.getElementsByTagName("li");
for (var i = 0; i < tabs.length; i++) {
tabs[i].onclick=displayPage;
}
}
When I run these file in localhost it is working correctly. But I wants to run this file in my server. When I store this file in my server, it is not working. It show all tab contents and not hide second and third tab contents in page load as shown in figure.
Tabs Image
I cant identify the reason. Any help is greatly appreciated.
Related
So I have a page which has a list of users, my total list of users is separated into 10 pages with each page showing 20 users. I want to open each page in a new window, pull the user ids on that window, close the window, and open the next page. Later I'll compile all this into a report. The problem I seem to be having is that the user_id_list only gets populated by the users on the first page so I have a bunch of duplicates.
Some of the code for parsing the pages.
full_page_string = document.getElementsByClassName("pagination")[0].outerText;
index_of_next = full_page_string.lastIndexOf("Next");
last_page_number = full_page_string.substring(index_of_next-3, index_of_next);
last_page_number.trim();
last_page_number = 2; /*DELETE LATER*/
page_array = [];
user_id_list = [];
/*Programatically create an array of pages*/
for (var page_num = 1; page_num <= last_page_number; page_num++) {
url = "example.com/users/"+ user_account_id + "/friends?page=" + page_num;
/*Open Each Page*/
var loaded_page = window.open(url, "page_" + page_num, "width=400, height=600");
page_array.push(loaded_page)
/*
For loop keps going even with settimeout. See if there is a way to delay a forloop. The thing is we need enough time to load a page, wait for it, grab users, close page, load a new page and repeat. Right now the floor loop makes it too fast.
Maybe Asyncronously open each page so they're their own instance or "thread"?
*/
loaded_page.onload = function () {
/*Find all users on the page by class*/
friends_on_page = document.getElementsByClassName("link span f5 fw7 secondary");
for (var i = 0; i <= friends_on_page.length; i++) {
pathname = friends_on_page[i].pathname;
user_id = pathname.substring(pathname.lastIndexOf("/")+1)
user_id_list.push(user_id)
console.log(user_id)
}
loaded_page.cose()
};
}
I'm trying to make an extension that looks at your most visited sites and then tells you things about yourself given those sites.
I'm a bit lost with how to go about this and was wondering, do I run the script with the background.js file? or when they click the popup?
This is the code I'm looking to replicate,
// Event listener for clicks on links in a browser action popup.
// Open the link in a new tab of the current window.
function onAnchorClick(event) {
chrome.tabs.create({ url: event.srcElement.href });
return false;
}
// Given an array of URLs, build a DOM list of these URLs in the
// browser action popup.
function buildPopupDom(mostVisitedURLs) {
var popupDiv = document.getElementById('mostVisited_div');
var ol = popupDiv.appendChild(document.createElement('ol'));
for (var i = 0; i < mostVisitedURLs.length; i++) {
var li = ol.appendChild(document.createElement('li'));
var a = li.appendChild(document.createElement('a'));
a.href = mostVisitedURLs[i].url;
a.appendChild(document.createTextNode(mostVisitedURLs[i].title));
a.addEventListener('click', onAnchorClick);
}
}
chrome.topSites.get(buildPopupDom);
This is sort of not working at the moment.
I've read similar questions and tried several suggestions nothing had worked - hope you can help
Scenario:
loading my website with initial (static) index.html -- looks great css takes fine
clicking on "next page" button --> retrieves successfully the data from DB and dynamically generates the element's innerHTML section.
Problem: the audio player is the only element which doesn't look the same
Initial state: when loading the site first time
and how it looks after generating the HTML
All other tags like header image and text do apply the css rules.
The audio player has rules in the css file and has also the following script at the end of index.html and I'm suspecting thats the root of my problem not being "fired/called" again for the new generated elements
<script>
document.addEventListener('DOMContentLoaded', function() {
var mediaElements = document.querySelectorAll('video, audio'), total = mediaElements.length;
for (var i = 0; i < total; i++) {
new MediaElementPlayer(mediaElements[i], {
pluginPath: 'https://cdn.jsdelivr.net/npm/mediaelement#4.2.7/build/',
shimScriptAccess: 'always',
success: function () {
var target = document.body.querySelectorAll('.player'), targetTotal = target.length;
for (var j = 0; j < targetTotal; j++) {
target[j].style.visibility = 'visible';
}
}
});
}
});
</script>
If that's the reason how can I invoke this event on demand and how can I do it from the javascript file?
I'm writing a small progam wherein I'm getting data using $.get then display the data so far so good and then there's this part then when I click a certain link it refresh the page but it has this blinking effect. Is there a way on how to reload the content get the new updated content then replace the previously loaded data.
NOTE: I didn't use setInterval or setTimeout function because it slows down the process of my website. any answer that does not include those functions are really appreciated.
Here's the code
function EmployeeIssues(){
$('#initial_left').css({'display' : 'none'});
var table = $('#table_er');
$.get('admin/emp_with_issues', function(result){
var record = $.parseJSON(result);
var data = record.data,
employees = data.employees,
pages = data.pages;
if(employees){
$('#er_tab_label').html('<b>Employees with Issues</b>');
for (var i = 0; i < employees.length; i++) {
$('#table_er').fadeIn('slow');
table.append(write_link(employees[i])); // function that displays the data
}
if(pages){
$('#pagination').html(pages);
}
}else{
$('#er_tab_label').html('<b>No employees with issues yet.</b>');
}
});
table.html('');
}
then this part calls the function and display another updated content
$('#refresh_btn').on('click', function(e){
e.preventDefault();
var tab = $('#tab').val();
if(tab == 'er'){
EmployeeIssues();
}
});
What should I do to display the content without any blinking effect?
thanks :-)
This section might be the issue :
if(employees){
$('#er_tab_label').html('<b>Employees with Issues</b>');
for (var i = 0; i < employees.length; i++) {
$('#table_er').fadeIn('slow');
table.append(write_link(employees[i])); // function that displays the data
}
if(pages){
$('#pagination').html(pages);
}
} else ...
It seems you're asking table_er to fade in once per run of the loop whereas s there can only be one such table, you only need to do it once ?
first try re-arringing it like this:
if(employees){
$('#er_tab_label').html('<b>Employees with Issues</b>');
$('#table_er').hide(); // hide it while we add the html
for (var i = 0; i < employees.length; i++) {
table.append(write_link(employees[i])); // function that displays the data
}
$('#table_er').fadeIn('slow'); // only do this after the table has all its html
if(pages){
$('#pagination').html(pages);
}
} else ....
Another possibility is that you're running through a loop and asking jquery to do stuff while the loop is running. It might be better to work out the whole HTML for the new page data in a string and then get the screen to render it in one line. I cna't do this for you as I don't know what's in write_link etc but something like this ..
if(employees){
$('#er_tab_label').html('<b>Employees with Issues</b>');
var sHTML ="";
$('#table_er').hide(); // hide it while we add the html
for (var i = 0; i < employees.length; i++) {
sHTML+=write_link(employees[i]); // maybe this is right ? if write_link returns an HTML string ?
}
table.append(sHTML); // add the HTML from the string in one go - stops the page rendering while the code is running
$('#table_er').fadeIn('slow'); // now show the table.
if(pages){
$('#pagination').html(pages);
}
} else ...
i'm new in firefox add-on dev
I'm triyng to run a contentscriptScript in a active tab which click on a random link into the tab, it's works
But i'm trying to repeat this operation in the new webpage in an endlessly way, like a kind of WebBot.
i dont know if i have to implement this setting in the contentScript or in the Main.js , SetInterval and SetTimeOut seems to doesnt work.
Here the ContentScript.
var webs = []; // all links
var l = document.links; //get all links
var unwebs; //new WebPage
function browse(){
// find links
for(var i=0; i<l.length; i++) {
webs.push(l[i].href);
}
//pick a random link
unwebs = webs[Math.floor(Math.random()*webs.length)];
}
function clickLink(){
//redirection
window.location.href = unwebs ;
}
$(document).ready(function(){
browse();
clickLink();
}
thank you.
See the tabs docs
main.js
var tab = require('sdk/tabs').activeTab;
tab.on('ready', function() {
//attach content script with tab.attach
});