I hope someone can help me. I have colorbox working on a new client site, but I'm having troubles figuring out how to add code that will allow for the image that pops up to be clicked and then linked to an external site in a new tab.
This is what I have so far:
$(document).ready(function(){
$("a[rel='pop']").colorbox({transition:"fade", speed: 250});
});
<span class="h2">Baby Knits Kit</span> (2007)<br>Chronicle Books<br>
In the above, when Baby Knits Kit is clicked a pop-up opens fine with the image I created (about.babyknitskit.png). On top of the pop-up there's "Get it at Chronicle Books" and when I click it will take me to that site (in the same tab which I don't want). Instead, I would like the about.babyknitskit.png image to be clickable and opening up the link in a new window.
Any thoughts much appreciated. I hope I've given you guys enough information as I'm new to all of this and stackoverflow.
Simply use the html property of colorbox. Alternatively you could use the href property with 'inline' set to true. I have defined a custom attribute for the anchor for easier extraction, alternatively you could write a regex pattern to extract it from the title attribute.
$(document).ready(function() {
$("a[rel='pop']").colorbox({transition:"fade", speed: 250, html: function(){
var html = $('<img src="' + $(this).attr('href') + '" />');
return html;
}});
});
<span class="h2">Baby Knits Kit</span> (2007)<br>Chronicle Books<br>
Related
I'm learning Dojo Toolkit and I'm fighting with adding dijit into dijit. There was simmilar post about it but wih DIV's. I just simply want to programmatically insert a button or anything else to a ContentPane like this:
I have a script (with required items to insert button):
require(["dijit/layout/AccordionContainer", "dijit/layout/ContentPane", "dojo/domReady!", "dijit/form/Button", "dijit/_WidgetBase"],
function(AccordionContainer, ContentPane, Button){
var aContainer = new AccordionContainer({style:"height: 300px"}, "markup");
var aChild1 = new ContentPane({
title: "Date selectors",
content: "Test"
});
var aChild2 = new ContentPane({
title:"Group 2",
content:"Test"
});
var aChild3 = new ContentPane({
title:"Group 3",
content:"Test"
});
aContainer.addChild(aChild1);
aContainer.addChild(aChild2);
aContainer.addChild(aChild3);
aContainer.startup();
});
And my DIV is simply:
<div id="markup" style="width: 250px; height: 300px">
This ContentPane should work as left toolbar with rollable panes. In first one I'd like to add date pickers or button or anything else. Above code works until I try to add subChild. I tried to create var with button and make it child of a content pane like:
var btn as new Button([...]);
and place it here:
aContainer.addChild(aChild1);
aChild1.addChild(btn);
aContainer.addChild(aChild2);
aContainer.addChild(aChild3);
aContainer.startup();
but it not works. How can I build my layout in this case? Thanks in advance for help.
Problem solved. I applied declarative instead of programatic creation:
In script, I simply added this line:
require(["dojo/parser", "dijit/layout/ContentPane"]);
Then I wrote some divs like:
<div data-dojo-type="dijit/layout/ContentPane">
Some text
</div>
I found a tip (inside the code of demos) that:
content pane has no children so just use dojo's builtin after advice
dojo.connect(dijit.layout.ContentPane.prototype, "resize",
function(mb)
... so all I had to do was:
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='selected:true, title:"Calendar"'>
<!-- calendar widget pane -->
<input id="calendar1" data-dojo-type="dijit.Calendar">
</div>
If you would like to see, how to place any of layout items in one place, see Dojo Theme Tester (view source):
https://download.dojotoolkit.org/release-1.7.0/dojo-release-1.7.0/dijit/themes/themeTester.html?theme=tundra
You will find every fragment well described. For me, it is more useful than documentation.
I hope that by solving my problem, this solution will be helpful to someone.
I need to open Google's latest reCAPTCHA widget in a popup (modal) dialog, a Dojo Dialog in my case, and I've got that working fine, but I just realized that the user cannot keyboard navigate to it.
When the reCAPTCHA widget is displayed in the main view, not a modal dialog, then of course the user can easily keyboard navigate to it.
Has anyone found a way to set focus on the reCAPTCHA widget so that the user can access it without a mouse when the reCAPTCHA is in a Dojo Dialog?
I did see that reCAPTCHA is generated within an <iframe>. Is that part of the hurdle - that keyboard navigation can't reach content within an iframe? I've even tried to call document.getElementById("recaptcha-anchor") since I saw that that's the id of the <span> that holds the "checkbox" - but that is returning null. How to reach an element within an iframe?
I have a jsfiddle example available for demonstration at
https://jsfiddle.net/gregorco/xqs8w5pm/5/
<script>
var onloadCaptchaCallback = function() {
console.log("jsfiddle: rendering captcha");
globalRecaptchaWidgetId = grecaptcha.render('captchaDiv', {
'sitekey' : '6LcgSAMTAAAAACc2C7rc6HB9ZmEX4SyB0bbAJvTG',
'callback' : verifyCaptchaCallback,
'tabindex' : 2
});
grecaptcha.reset();
}
var verifyCaptchaCallback = function(g_recaptcha_response) {
console.log("Response validated. Not a robot.");
};
</script>
<script src='https://www.google.com/recaptcha/api.js?onload=onloadCaptchaCallback&render=explicit' async defer></script>
<div id="testDiv">
<button type="dojo/form/Button" onClick="captchaPopup.show();">Open reCAPTCHA</button>
</div>
<div data-dojo-type="dijit/Dialog" data-dojo-id="captchaPopup" title="Human Verification" style="width:350px;">
Cannot keyboard navigate to the checkbox!
<table>
<tr>
<td>
<div id="captchaDiv"></div><br/>
</td>
</tr>
</table>
</div>
Give this fiddle a try. Normally Dijit dialogs don't work too well with iframes in them because it doesn't know how to parse the content inside an iframe. In this case, we can use some of Dojo's functions to work around it. One notable thing to point out is that I've disabled autofocus of the Dijit Dialog so that it won't automatically focus the closeNode inside the dialog.
After the dialog loads, tab>space will select the captcha.
This may help others facing similar issue, but with Bootstrap modal dialog. I found the following solution on GitHub. Add the following Javascript to override Bootstrap:
Bootstrap 3x
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
Bootstrap 4x
$.fn.modal.Constructor.prototype._enforceFocus = function () { };
I'm using data-menu-top on this page because everything is fixed and uses Skrollr to animate the different sections into view. The reason everything is fixed is so that I could do full-page SVGs that cover the height of the page (if you think there's a better way to do this, I would love to be enlightened).
Here's a link to the project development page: http://pman.mindevo.com
The button that appears on the first section has data-menu-top="10300", and this works great on Chrome, but when I try to view it in Firefox (33.0) the link doesn't do anything at all.
I am initializing using this code:
<script type="text/javascript">
setTimeout(function() {
var s = skrollr.init({
});
skrollr.menu.init(s, {
easing: 'quadratic',
duration: function(currentTop, targetTop) {
return 1500;
}
});
}, 1000);
</script>
Am I properly using data-menu-top? Is this a bug I'm not aware of using fixed layouts that are hidden using height?
Do I need to change the layout somehow to accomplish what I want and have it work in Firefox?
So the problem with Firefox was the way that it handles <button> linking. Here's the way the button was in the HTML:
<button class="buy buypotato">
<a data-menu-top="10300" href="#potatoPurchase1" class="purchase-options first-popup-link">
<svg ....etc></svg>
</button>
In Firefox it wasn't doing anything upon clicking, and got me thinking perhaps I'm using "button" HTML element incorrectly. Anyways, changing it to a div like so:
<div class="buy buypotato">
<a data-menu-top="10300" href="#potatoPurchase1" class="purchase-options first-popup-link">
<svg ....etc></svg>
</div>
That allowed Firefox to utilize Skrollr-menu to scroll to where I needed it to.
There might be a better way to do the layout on this, I'm still experimenting.
I have an HTA prompt with VB code. I would like a URL loaded within the HTA window when the "SUBMIT" button is clicked. However, I cannot find any information that is helpful for my situation. Can someone please help me include an iframe in my HTA prompt so that a website can be displayed? I can use https://www.google.com as an example. Let me know if you have any questions.
Here is the code I currently have for the submit button:
bodystring = bodystring & "<BR><BR><BUTTON CLASS='Bttn_Back' OnClick='PrevStage()'>BACK</BUTTON> <BUTTON CLASS='Bttn_Submit' OnClick='NextStage()'>SUBMIT SURVEY</BUTTON>"
Here is my section of code for the "NextStage()" function:
ElseIf STAGE = 62 Then
SaveResults()
Window.Close()
End If
Put this to the HTML of the HTA:
<iframe id="htmlhere" src="" style="display: none;"></iframe>
Then in nextStage():
document.getElementById("htmlhere").src = "http:/..."; // Loads a new document to iframe
document.getElementById("htmlhere").style.display = ""; // Setting style.display empty shows the iframe
Sorry for using JS, but my VB skills are more or less zero.
I am rather new to sharepoint and have been lucky enough to find the answer to all my questions with research. I have no found the answer to this question yet.... How do I add a text field WITHIN a folder that is WITHIN a document library. Example: I want to put instructions for upload within a specific folder. I tried to to the 'edit page' --> add text, but the text shows up at the top of ALL folders within that library and I just want it in one. Thank you for your assistance!
Kind regards,
Lanie
You can manage visibility of your message using JavaScript as below.
Don't directly add your message in text field; instead click of the text field you have added, and click "Edit HTML Source" in ribbon bar as highlighted in below image.
Then paste below code in newly opened window:
(Don't forget to replace "Your Message" and "FolderNameInWhichMessageToBeShown" in below code)
<div id="MyCustomMessage">
Your Message
</div>
<script type="text/javascript">
if(decodeURIComponent(document.URL).indexOf('FolderNameInWhichMessageToBeShown') == -1)
{
document.getElementById('MyCustomMessage').style.display = 'none'
}
else
{
document.getElementById('MyCustomMessage').style.display = 'block'
}
</script>
Click "OK" and Save your page.