When clicking on a public or private bookmark, Spotfire takes the user to the page that the user was on DIRECTLY BEFORE he or she created the bookmark. If the user were to select the bookmark again, it would then take them to the correct page, with the correct measures loaded.
This happens whether the GUI bookmark is clicked, or a bookmark link is clicked. In fact, if a link is clicked, it is almost impossible to get to the correct bookmark page (the user has to click very fast).
After a ton of trial and error, I limited it down to some HTML/Javascript functionality. In this dashboard, users navigate by using a custom navigation bar. If a user creates a bookmark, changes pages using the custom navigation bar, then clicks on the bookmark, it will not work correctly. If a user creates the bookmark, clicks the page tab then clicks on the bookmark, it will work correctly. I used the code here to build the python script that changes pages (kicked off by a changing Document Property). I was able to reproduce this bug in the sample spotfire reports. The below HTML code is for the Nav bar:
<style>
.topnav {
overflow: hidden;
background-color: #313814A;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 5px 16px;
text-decoration: none;
font-size: 16px;
font-family:Calibri;
}
.topnav a:hover {
background-color: #ddd;
color: black;
cursor: pointer;
}
.topnav a.active {
background-color: #ddd;
color: black;
}
</style>
<div class="topnav">
<a onclick="SBAReporting()">Reports</a>
</div>
<!-- input field that changes the Doc Prop that fires off the python script-->
<div id="navigateToPage" style="display:none"><SpotfireControl id="f9cc2258568d415383d842064287993a" /></div>
<script>
function SBAReporting() {
randInt = Math.floor(Math.random() * (100+1))
myJSObject = "Reporting";
document.getElementById('navigateToPage').firstChild.value = myJSObject + randInt;
$("#navigateToPage input").focus();
$("#navigateToPage input").blur();
}
</script>
My theory on what is happening is the following:
User clicks on the custom HTML/Python navigation to get back to a page. Spotfire has some internal variable that does not get set correctly.
The user selects the bookmark. Spotfire thinks they are already on the correct page so it does not navigate there. Part of the bookmark process sets that mystery variable correctly.
The second time clicked, that variable is set correctly, spotfire knows what page you are on, and it works correctly.
I tried to refresh the entire page (and hopefully that variable) by adding location.reload(); but that did not work. Is there a way to let Spotfire refresh the page? Any insight on what may not be updating correctly?
tl;dr It seems that the pythonic way to change pages in Spotfire does not alter some behind the scenes variable to let Spotfire know what page the user is truly on. This happens with sample Spotfire provided reports and Spotfire provided Python Scripts. I need a better way of letting Spotfire know what page a user is on.
UPDATE A defect has been logged with TIBCO. Still open to work-arounds.
Related
Can anyone come up with a solution?
We sell phone systems from a supplier www.voipstudio.com
Our customers login to their account at www.voipstudio.com/login
We want to hide everything around the login page so it only shows the login details.
Is there anyway to over white boxes around the login dialog box?
This picture shows how it currently looks
This picture shows how we would like it shown
Is there any way to maybe load pop up boxes over the sections that we don't want the customers to see or another method?
Based on the information you provided and the page that you referenced in your question. If you add this css to your css file it will hide all of the divs you want to not be on your page.
This works because I am using the css to not show the data.
.page-id-653 .main-image {
display: none !important;
}
.page-id-653 .dark-bg {
display: none !important;
}
.page-id-653 .ft-button {
display: none !important;
}
.page-id-653 .site-footer {
display: none !important;
}
.page-id-653 .ft-button-twitter {
display: none !important;
}
.page-id-653 .ft-button-facebook {
display: none !important;
}
.page-id-653 .vs-page .header {
display: none !important;
}
Please notice that I added the class .page-id-653.
The reason I did this is to make sure we don't hide the data on any other page besides this specific page.
In order to enter the css please go to
Appearance / editor / style.css
From your Wordpress Dashboard
If you do not have access to this site and you are trying to serve it up with an iframe you could attach the id of the area you want to show to the url.
<iframe id="iframe" src="http://voipstudio.com/en/login/#l7p-login-form" width=400 height=400></iframe>
The social media sidebar they have on the page was acting a little difficult for me but this one of these answers should get you twoards one of the best solutions for your situation.
There are many ways you can get tricky with iframes. I suggest searching SO for more on, "position iframe on specific points".
I am trying to put two Nivo sliders on one page. Some of the attributes are different. So I have simply created two scripts for these attributes, "slider" and "slider2". That's no problem.
However, I want to make the title style a little different for the second slider. I noticed that the text style of the slide title is controlled by this style:
.nivo-caption p {
padding:8px;
margin:0;
color: #000;
font-size: 16px;
}
However, I don't see that css style called within my html. (When I look at the web page source code I see it but not when I'm actually looking at the code file itself.)
I'd love to simply create a new style for my second slider, something like:
.nivo-caption2 p {
margin:0;
color: #000;
font-size: 12px;
}
But I need to know how to actually call that within my html. Can anyone help? Thanks.
Actually, I figured it out. Since I have ids of "slide" and "slide2" for each slide show, I simply appended that to my new style and that worked.
I have a google Site and I'm wondering how I can display code in a code block on my site, some thing similar to how code is displayed on stackoverflow or stackexchange. I've looked out for a google gadgets but couldn't find one. Any idea if there is already a gadget that does that or should I have to get one created.
public class code()
{
//This is my Code
}
You can open the HTML window on a page and use the code wrapped with a pre element. You can also add a style block in there to restyle how that code element will be displayed. Here is an example of a fiddle
<style>
pre {
padding: 5px;
background-color: black;
color: white;
}
</style>
<p>
This is an example of a code block
</p>
<pre><code>
public function exampleCode() {
// this is where your code goes
}
</code></pre>
That's CSS and the 4 spaces just triggers it!
If you know where your submitting the code you could probably just run a find and replace to "/n " and " " and make it to be the block id of code which would be a view-able change
I am just starting with AngularJS, which I know is meant to be an SPA. For the app we are building, all of the pages--except the index page--will have a two-column layout. We'd like the index page, however, to be a one-column, fullwidth page. Is this functionality possible with AngularJS?
I'd suggest posting a plunkr or jsfiddle, since I'm not sure I'm actually answering your question, or if there's more to your question I'm missing.
If you're doing all the pages via routing (ng-view), then just apply classes to differentiate the style for that one-column version. Something like:
.column_1, .column_2 { margin: 0; width: 50%; float: left; }
#firstpage .column_1, #firstpage .column_2 { margin: 0; width: 100%; float: none; }
and then in the html (on that firstpage only), wrap everything in div id="firstpage". Don't include that div in the routed pages, and the style will only apply for the first page. Or if you have some other set up, you can always use styles around the ng-view, too:
<div class="classname">
<div ng-view></div>
</div>
If you've got a side-column that's sitting outside your ng-view and that's what you want to turn off/on, then I'd suggest including the class on the first page (to make it go full-width), and at the same time use some kind of logic with ng-hide/ng-show on that first column.
Preface: Masonry is a JQuery plug in that creates a "brick-style" layout of html pages on one page. Infinite scroll is a plug in that allows for a pintrest-style scrolling of page items.
I have masonary w/ infinite scroll installed here:
http://helpknow.com/black2/
and my problem is this.
I want to position the "container" div to center the entire list of items in the page.
So I use some code like this:
#container {
left:140px; // <---- Positioning
padding:10px;
background: #FFF;
padding: 5px;
margin-bottom: 20px;
border-radius: 5px;
clear: both;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
The problem is when I do that, upon opening the page there is a quick "flickering jump" where all the masonry items move to their position ( you might not be able to see it on refresh, only on initial page load). I don't want this. I want the items to not "flicker". I want them to appear static until the user scrolls, then I want the animation to take place as expected. When I remove the left positioning this problem does not happen (but obviously the items float left and are not centered, which is not what I want). I tried wrapping the main div "container" and other items in a new div container and moving it/them around and was met with the same problem.
Have you tried 2, meaning to initialise Masonry when all your content has been loaded? Now, you are doing it as in 1...
1 This executes, when the DOM has been constructed, before all content has been loaded
$(document).ready(function(){ ... });
$(function(){...}); // short form
2 This executes, when all content has been loaded
$(window).load(function(){ ... });
3 This executes immediately, when it is first encountered by the browser
(function(){ ... })();
The latter is a self-executing anonymous function (known as a closure), which is very handy, but not here, because no content or not the right content may have been loaded when it self-executes.
UPDATE Alternatively, you can fade your #container in, which can sometimes look nice, too. See this fiddle here, which does the same with Masonry's bigger brother Isotope.