Activate specific panel in leftPanel in PDFNet Webviewer - javascript

I remove 2 of the 3 panels of the leftPanel by using disableElements:
setQuickBarPanelContents() {
this.instance.disableElements(['notesPanel', 'notesPanelButton', 'outlinesPanel', 'outlinesPanelButton']);
}
One of the removed panels is the default active one, so when leftPanel is now activated, the remaining panel(thumbnails) isn't active by default and shows up blank with the button on top. You need to press the button to activate and see the actual thumbnails in the panel.
I can't seem to find any way to (default) activate this panel through the PDFNet API. Am I overlooking something or is this a bug?

The API you'd want to use is setActiveLeftPanel: https://www.pdftron.com/api/web/WebViewer.html#setActiveLeftPanel__anchor.
In this particular case you can call instance.setActiveLeftPanel('thumbnailsPanel').

Related

How to prevent click events from overlapping each other?

Please see image below for error:
As shown, there is conflicting text. The initial state of the website has 6 blocks with different colors with text in the center. When clicked on, more information is displayed in the middle section. However, when you click on another box the background color is changed and/or the text inside each box is either shown or hidden.
I suspect this is happening due to my incorrect use of jQuery
I tried to fixed it hands on but still doesn't work that well because you have to click on the field with which you opened the field to close it again. you should build a click handler for the closing icon, then it should work.
https://codepen.io/felixhaeberle/pen/qGjpVJ
First, I check each Item if it is blocked and if it's blocked, return.
Then I set all items to blocked and after unblock the current (this) item.
A closing click handler (close icon) should remove all blocked entry's like $('.closing-link').click(function(){ allItems.toggleClass("blocked"); // your closing code follows here });
$("#fbPageDesign").on('click', function(){
if ($(this).hasClass("blocked")) return;
allItems.toggleClass('blocked');
$(this).toggleClass("blocked");
$(".box").toggleClass("bg-color2");
$(".boxText,.whiteRectangle").toggle();
});
a snippet out of my solution.

how to know which 'a href' link was clicked from previous webpage?

I'm kind of new here but I've regularly visited Stack Overflow to refer to stuff I've found myself wanting to ask (I tend to find 99.9% of what I'm asking has already been 'asked' on here heh)
but I wonder if this has.
I have a home page which has two div elements (styled as boxes with transition effects that reveal a styled a href link of their own).
basically these are links to tabbed content on the about us page.
first button has been assigned the id of learn-more-1 and the other learn-more-2. Observe below:
<a id="#learn-more-1" href="about-us.html#company-history"/>
<a id="learn-more-1" href="about-us.html#why-choose-us"/>
about-us.html has a tab container with two divs that are assigned the id's:
#company-history and #why-choose-us
and below these we have our content (a heading with the paragraphs containing respective info).
The issue I am having is, when ever we click either href link on the home page (styled as buttons btw..) we reach the about-us page no problem. Its that the tab container HOUSES the tab buttons but we don't see them. The tabbed content that's shown starts from the Heading.
I'm at wits end trying to understand what I'm missing.
My question is, Is there a way for me to use jQuery on the about-us page, i.e:
$document.ready(function() {
* psuedo code here *
if the user arrived here via clicking learn-more-1 button
make the tab button #company-history ACTIVE
and scroll up 50px ( so we can see the damn button as it only shows
us the heading and paragraph content of the tab container..)
else if the user arrived here having clicked learn-more-2 button,
make the tab button #why-choose-us ACTIVE
and scroll up 50px
};
Here's the thing, by default #our-company-history, On the about-us page is active. Meaning if you just visited about-us you will see that the tabbed container shows you the company history. So nothing is hidden.
Is there a way to perhaps, write a function that simply passes an argument to the about-us.html that will allow us to KNOW which a href ref button link was clicked so we can then work with it? Or am I over complicating something really simple here?
Would appreciate some direction here folks cheers!
EDIT:
Marat I HAVE to know if either a href link was clicked in the home page ! This way, and only this way do i show them the tabbed container and the content under the active tab. Make sense ? What you are proposing will fire automatically each time user clicks on the about-us.html page and show the tabbed container by default. NOT what we're gunning for my friend. So you see, I NEED a way to conditionally check IF the user arrived to the about-us.html page via either of those two a href links (from home page) and then open the respective tabbed content accordingly. BTW, currently when either a href link (styled as buttons) gets clicked in the home page, they DO arrive on the about-us page and onto the tabbed container but are unable to see the active and non active tab. This is all thats the issue.
Some code to show you algoritm
$(document).ready(function() {
var tabId = window.location.hash; // get id of destination tab
if(tabId) {
$("#our-company-history").hide(); // hide default tab
var tab = $(tabId); // get destination tab
$(window).scrollTop(tab.offset().top); // scroll to destination tab
tab.show(); // display tab-content
}
});

ToggleMe Script minor issue

I have a working toggle me code except for one small issue and I am not sure what to do to fix it. Can some one please help me. I have duplicated the code in jsfiddle... http://jsfiddle.net/ydvuN/10/
Issue: If you click on Tab 1 or Tab 3 as your initial click, then the menu hides and then you must click on Tab 2 in order for it to show back up. After the initial click the script works like it should, switching between the tabs showing and hiding the menus appropriately.
Now, reload the page and click on Tab 2 as your initial click, the menu works like it should right off the bat, toggling between the different tabs showing their appropriate menus.
I don't ever want to hide the menu completely... I always want one menu to show at all times, however never want more than one menu to show. The menus should toggle with each other no matter what Tab you click on first.
I understand that this may be happening because I have display: none on Tab 1 and Tab 3 and a display: block on Tab 2. I did this because I want Tab 2 to display as the default when the page loads.
Any help on correcting my issue would be greatly appreciated. Thanks!
.style.display is different from just checking whether the item is displayed. It's actually checking the style="something" attribute on the HTML - which overrides the CSS you've setup in the stylesheet.
So - when you start out, your elements do not have style.display = 'none'. In fact, style.display is not set.
To solve this, I'd just set the selected tab to style.display='block' regardless of what it's already set to:
...
for (var i = 0; i < allIds.length; i++) {
if (allIds[i] != a) {
document.getElementById(allIds[i]).style.display="none";
}
}
e.style.display="block";
return true;
}

ui - accordion does not work after empty() and append()

I have Four DIVs and I call accordion function to it. It works fine initially. But it fails after I clear all the content and again append the FOUR DIVs.
Kindly take a look at the link
http://jsfiddle.net/p7vUk/2/
You will see that on clicking divA , divAA will slide toggle.
on clicking divB, divBB will slide toggle.
After you click the 'clear all' Button, the div=content is cleared and same four DIVS are appended, but the jquery accordion fails to work.
The accordion styling and behaviour is defined upon creation. Looks like the accordion does not update when the content changes. Nor does there appear to be a method you can call to trigger an update.
Have you tried 'turning it off and on again'?
//change content, then:
$("#content").accordion("destroy");
$("#content").accordion({ ... your options ... }); //create it again
This may require more related work, such as setting the originally selected tab, etc.

how to hide panel of a dojo splitcontainer / bordercontainer?

How to hide splitcontainer pane programmatically. I have 3 panels. i want to hide show one panel on press of a button. how to do that ? Don't want to destroy it.
Use SplitContainer's addChild() and removeChild() methods:
splitContainer.removeChild(contentPane3); // to hide pane
splitContainer.addChild(contentPane3); // to show pane
Follow my jsFiddle to see and play with working example including toggling of panes.
Also please note, that SplitContainer is deprecated and you should use dijit.layout.BorderContainer instead. Set data-dojo-props="splitter:true" to enable drag-n-drop resizing.

Categories