Text Link to Trigger Light Box - text

I am considering buying the pro version of this plugin, but I want to confirm that I would be able to create a text link , such as "CLICK HERE" that will trigger a lightbox slider show to pop up. Can this plugin does this easily?

There are a LOT of light box plugins and code snips, so it is tough to say, but you should be able to utilize some jQuery javascript to manipulate the click event to do what you desire to do. You could make a div area to hide until needed to show the lightbox, if needed, or just inject it into the body of the document...
<script>
$('popupDiv').hide();
var lightboxCode = '<span>Whatever code your plugin uses to display here</span>';
$('#showButton').click( function() {
$('popupDiv').html(lightboxcode);
$('popupDiv').show();
});
</script>

Related

Google Translate Drop Down

i have purchased a website template and i need help concerning the website translator using google translate.
The translate works well but after selecting a language, a google drop down appears and when i scroll down, it still appears and hides my main header titles.
Can something be done like removing this drop down when i translate a language or can someone suggest me another method.
Thanks a lot.
The problem is the the contents in this bar are inside of an iframe, So you cant use javascript to trigger the close button.
Solution
Once the user chooses a language the an iframe with a class named 'goog-te-banner-frame'
is added.
You can use javascript to detect if it present and hide it
$(document).ready(function(){
if($('.goog-te-banner-frame').length > 0){//check if the iframe exsits
$('.goog-te-banner-frame').css('display','none');
$('body').css('top',0);//google adds top to the body so the bar wont cover website content
}
});
because this code uses jquery. make you sure you load it like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Change the looks of selected navigator item

I've been playing around with Extension Library Navigator for a while and I can't figure out how to make the selected (or the current opened pages basic node) node to change any of the looks properties, for example font or color. I'm trying to do that so that user can tell what page is currently opened. Any tips on how to do that?
Another option, which is not as simple as the one suggested by Per, is to do the customization via a bit of script.
For example, I have built my site navigation with pure HTML and bootstrap.
My link HTML looks like this
<a id="YOURLINKIDHERE" href="vwBringUpsByDate.xsp">Bring ups</a>
When a page loads, you can then then use the below script to customize your selected menu item exactly how you like, fonts, colours, backgrounds etc just by referencing the link ID....
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[$("*[id$='YOURLINKIDHERE']").css('background-color', '#eeeeee');]]></xp:this.script>
</xp:eventHandler>
Not ideal, as you have to put the script on each page that you want to modify a menu link with, but gives you some good customization options...

Polymer Paper-Dialog not visible

On my page I want to disaply a Polymer Paper-Dialog so I wrote an own element that looks like this:
<polymer-element name="my-dialog" constructor="MyDialog" extends="paper-dialog" noscript>
<template>
<span>I'm a dialog!</span>
</template>
</polymer-element>
Now I tried to display the dialog with this JS code:
var dialog = new MyDialog();
dialog.toggle();
But the dialog does not show up. Any ideas why?
When you are creating a new Dialog in your javascript function, you aren't adding it to the DOM anywhere. So, when you call toggle on it, it tries to show/hide a dialog that hasn't been added to the page.
If you want this to work, you should be adding the markup for the dialog to your html, getting a reference to that element in javascript, and then calling toggle.
Something else you could consider doing is looking at the Core-Overlay polymer element. It handles a lot of the dialog functions for you, and even allows you to shade everything that isn't in the dialog itself.

Google Earth Plugin Balloon: Show up event

we are developing a tour with GEPlugin and I have some questions..
The tour is similar to Tour.
It starts and navigates to a Placemark where its stop and shows a balloon with a specific information for the Placemark.
I have defined the balloon using an iframe inside the description in kml, that points to a php script.
I can load the css and javascript if I click the placemark (via click event attached) however I canĀ“t make it show up when the tour stops setting
<Change><Placemark><gx:balloonVisibility>1</gx:balloonVisibility></Placemark></Change>
in the kml file.
Is there a way to make It show up the way I want?
Thanks!
Ok, I have found the solution.
I attached the event balloonopening (looked all over around the documentation) to the instance of the google earth plugin, get the feature and set the specific balloon.
Here goes some code example:
function showBalloon(placemark){
var content = placemark.getBalloonHtmlUnsafe();
var balloon = ge.createHtmlStringBalloon('');
balloon.setFeature(placemark);
balloon.setContentString(content);
balloon.setCloseButtonEnabled(false);
ge.setBalloon(balloon);
}
google.earth.addEventListener(ge, 'balloonopening', function(){
var placemark = ge.getBalloon().getFeature();
showBalloon(placemark);
});
Thanks!

How to hide View in Browser in document library in sharepoint 2010 using javascript or jquery

I had integrated Office Web Apps in sharepoint 2010. When Document is selected from document Library in context menu I want to hide Option View in Browser and Edit in Browser Option from Document Library.
Is is possible using jquery or javascript If yes can any tell me how ?
I used following css to hide but it only hide Delet option not View in Browser Option
li.ms-MenuUIULItem[text~=Delete]
{
display: none;
}
So I also Modified it as follows
li.ms-MenuUIULItem[text~=View in Browser]
{
display: none;
}
It also didn't work.
Can anyone help me for that ?
It is better to do it with features than doing it with javascript.
You have to create a feature with a HideCustomAction element in it.
The element structure is like this:
<HideCustomAction
GroupId = "[GroupId]"
HideActionId = "[HideActionId]"
Id = "...."
Location = "....">
</HideCustomAction>
And here is a link that will help you find your required actions Id:
http://www.sharepointarchitects.us/johnholliday/post/0001/01/01/how-to-find-customaction-identifiers/
I have created it using jquery
$(document).ready(function(){
$('.ms-MenuUIPopupBody').live('blur', function() {
var elm = $("div.ms-MenuUIULItem a:contains('View in Browser')");
elm.remove();
$("div.ms-MenuUIULItem a:contains('Edit in Browser')").remove();
});
});
It is hiding menu only on focus or blur or mouseover
I wants it to be hide on load AS soon as i Click on "V" option on right side of document it should hide View in Browser and Edit in browser
When I click on V option ![I wants As soon as i Click on v option right side of test it should hide view in Browser and edit in browser][1]

Resources