Javascript and CSS onclick Div Swap - javascript

I am new to both Javascript and designing for Facebook. I am using Shortstack to create custom tabs and have created a 3 panel sub-tab application using the service. In the 3rd panel, I have 19 div's holding information. By default, I use CSS to hide these DIVs (display:none;) and have a series of links at the top of the panel that change the visibility of each DIV onclick. Only the active onclick content is visible at any time.
The tab functions properly in Firefox, Chrome, and even Safari on the Mac, but fails in all browsers on the PC, and fails differently. In IE, immediately after the swap happens an error message pops up which mentions the publisher not allowing the action in an iFrame. In Firefox the tab just goes blank with no error message.
My script is below. As I stated, I am new to coding for Facebook and working with Javascript as I am a designer and not a programmer, but am eager to learn.
Thank you in advance for your thoughts and ideas.
function showhide(layer_ref) {
var thisDiv;
// check to see if any DIVs are currently showing
var divlist = ["div1","div2","div3","div4","div5","div6","div7","div8","div9","div10","div11","div12","div13","div14","div15","div16","div17","div18","div19"];
// loop through the list of DIVs in "divlist"
for (x = 0; x < divlist.length; x++) {
thisDiv = document.getElementById(divlist[x]);
// if the DIV is showing, hide it
if (thisDiv.style.display == "block") {
thisDiv.style.display = "none";
}
}
// show the appropriate DIV
thisDiv = document.getElementById(layer_ref);
thisDiv.style.display = "block";
}

If you try to change the things in iframe that could be a problem if the iframe is loaded from different domain. It is basically security rule - you don't want to allow rogue code to change/read/write things on the page other than it's own.
To answer your question better we need to know where is changing javascript is located and what it tries to change (are those two things loaded from the same domain or not).
The script itself looks ok to me.

Related

Why will this modal link not open when this javascript is being used?

I'm playing around with some simple code (partially made by me, partially free stuff from online) to build a simple html page which opens modal windows with an embedded iframe to display a PDF.
Here's the problem. In my table, I call to open the modal as such:
<a data-toggle="modal" href="#myModal">Example</a>
Then I have my other modal items in div tags, and everything works EXCEPT in Internet Explorer 11. There, clicking on that link in the menu opens nothing UNLESS I remove the following javascript file that the free css template generator marks as "optional to use". I wouldn't use it altogether but it keeps the table centered and looking good in IE11.
Here is a fiddle with just the JS to save space:
function t() {
for (var af = 0; af < arguments.length; ++af) {
if (typeof(arguments[af]) == "undefined") {
return false
}
}
return true
}
https://jsfiddle.net/CodyyCVPI2004/v3ayjy0b/
I think it has something to do with ah.onclick but I don't know anywhere near enough about JS to solve the problem. Any ideas? I simply just want to find out what in this javascript is preventing modal windows opening from anchor tags in my css table.

How to detect when "prevent this page from creating additional dialogs" is clicked

I have a little application on web that uses JS Alerts. I am planning to use modal pops later, but for the time being, does anyone know how to detect if the user clicked on the "prevent this page from creating additional dialogs" and then fire some js function?
it is indeed possible to detect if prevent additional dialogs has been clicked by working with javascript date
you can try this lines of code
window.nativeAlert = window.alert;
window.alert = function(message) {
var timeBeforeAlert = new Date();
var confirmIfBlocked = nativeAlert(message);
var timeAfterAlert = new Date();
if ((timeAfterAlert - timeBeforeAlert) < 400) {
tellTheUserDialog("you can use a Div to tell the user he has blocked alert");
}
}
if users does not see alert then timeAfterAlert will be almost the same as timeBeforeAlert, i used 400 milliseconds just for reference you can come up with yours
You can't detect it because it is a browser feature which helps the user get rid of indefinite popups. This is particularly useful when your JavaScript code shows popups in a loop.
A good idea is to use modals or plugins like Bootbox to show alerts.

Display one Drupal block or another if flash is enabled

In my Drupal 7 site I have a view with two block displays. The only difference between both is one filter criteria -URL Aias-: one block shows content with "/html5" in its alias and the other shows "/flash" url aliased content
Those blocks must be dispalyed only on certains pages. This logic is controlled by Context module based on the URL. In this way, the block will be showed if the URL is like "perm/type/man/*"
At this URL I need to display one block or another depending on flash content is enabled or not at device level: if device support flash (like PC) the flash content must be dislayed. If device doesn't support flash (mobile), the html5 content will be shown.
I found this js code to detect if flash is enabled on the device
var hasFlash = false;
try {
var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
if (fo) {
hasFlash = true;
}
} catch (e) {
if (navigator.mimeTypes
&& navigator.mimeTypes['application/x-shockwave-flash'] != undefined
&& navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin) {
hasFlash = true;
}
}
but I don't know what to do with it nor where I must include the code.
Can you help me?
You may try to add the above code into a file or as an inline script with drupal_add_js and continue as follows:
Load both blocks on the same page initialy hidden and show the one that meets your conditions in the js.
Or load the correct block's content with ajax and dump it into the DOM based on your desired criteria.

Creating a Popover in extension bar for safari

I am creating a Safari Extension Bar and was wanting to have multiple Links in it and by clicking on the link have a popover specific to that link appear.
So far I have found these:
https://developer.apple.com/library/archive/documentation/Tools/Conceptual/SafariExtensionGuide/AddingPopovers/AddingPopovers.html
https://developer.apple.com/documentation/safariextensions/safariextension/1635377-popovers
However everything seems to be referring to using them with toolbar items, not extension bars.
I was wondering if it is even possible to make popovers work with links in an extension bar and if so if someone could point me in the right direction with this.
Sure, why not? Here's some sample code to get you started.
Say your extension bar has a couple of links like this:
Open Popover 0
Open Popover 1
(Not the most elegant way to run some JavaScript when you click a link, but whatever.)
Furthermore, say you have a single toolbarItem (toolbar button) and you want a different popover to pop up under it depending on which link on the bar you click. The openPopover function can be as simple as this:
function openPopover(pid) {
var tbItem = safari.extension.toolbarItems[0];
var thisPop = safari.extension.popovers.filter(function (p) {
return p.identifier == pid;
})[0];
tbItem.popover = thisPop;
tbItem.showPopover();
}
Since the extension bar has access to the global safari object of your extension, it can directly manipulate toolbarItems and open popovers, without having to pass messages to the global page. Indeed, your extension may not need a global page at all.

Proper technique to close an ExtJS tab

What is the proper way to close an ExtJS tab programmatically?
I need to make this work in IE6; although remove'ing the tab from the TabPanel works, I see an IE warning: This page contains secure and unsecure items... When I click the X on the tab, I do not see this warning. So, clearly something clever is happening when I click the X.
Note: the warning occurs when I use tabPanel.remove(aTab, true) and it does not occur when I use tabPanel.remove(aTab, false). So, the mixed content warning is displayed during the removal and subsequent destruction of the panel.
Does it make sense to simulate the click on a tab?
EDIT
IE is telling me I have mixed SSL content when I don't
Are you removing the tab's element directly, or are you removing the tab component from its container? E.g.:
Ext.fly('tab-id').remove(); // Element API
vs.
myTabPanel.remove('tab-id'); // Panel API
Both should work OK in terms of nuking the tab markup, but removing the element directly may have undesirable consequences. If you are doing the latter (correct), then I'm not sure what the issue might be. I don't have IE 6 handy myself.
This closes a tab by clicking the middle button of your mouse.
var middleClick = $(document).mousedown(function(e) {
if(e.which == 2){
var tabPanel = <%= tabPanel.ClientID %>;
var activeTab = tabPanel.getActiveTab();
if (e.target.textContent == activeTab.title) {
var activeTabIndex = tabPanel.items.findIndex('id', activeTab.id);
tabPanel.remove(activeTabIndex);
}
}
return true;
});
Hope it helps!! =)

Categories