I have browsed for a question similar to this but haven't happened to find exactly what i need but apologies if it has been answered somewhere.
I have started using java script light-boxes in my webpage to display images and am told to place on the links:
This means that the images now open in lightboxes however an HTML 5 validator says that 'lightbox' is obviously not an allowed link type.
How can i relate the required links to the lightbox java script so that it validates?
thanks alot in advance,
matt
Either
Ignore the validation errors (as they don't cause any problems), or
Change from rel="lightbox" to something like data-lightbox="true". Any attribute starting with "data-" is allowed and valid in HTML5.
Matthew's answer works, but you must remember to customize your lightbox source code as well. The example of such a modification you can see here: http://wasthere.com/lightbox2/js/custom-lightbox.js - it works (you can see here e.g. http://wasthere.com/asia/en/show-entry/141/kerala---munnar-(india) ), HTML5 validation passes. Check the comments in source file above, if you decide to use it - just change all "rel" attributes relevant to light box images to "data-rel" on your site.
Best regards,
Lukas
what helped me validating it, is based on what was stated above:
Javascript
function externalLinks()
{
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++)
{
var anchor = anchors[i];
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external")
{
anchor.target = "_blank";
}
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "lightbox")
{
anchor.setAttribute('data-lightbox','lightbox');
}
}
}
window.onload = externalLinks;
HTML:
<a href='assets/newsTemplate/07_350wtd.jpg' rel='lightbox' title='DumbThumb'><img src='assets/newsTemplate/07_350wtd.jpg' alt='dumb'></img></a>
A si lo solucione:
Modifico el html:
<a href="img/2.jpg" data-rel="lightbox" title="" >
Modifico el javascript:
jQuery(function($) {
$("a[data-rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
}
Related
I'm working in an implementation of ReCaptcha from Google in my Joomla 1.5 application. I know, it's an old version of Joomla, but as the time got passed, the hard code practice at the company made the upgrading impossible.
I found an old ReCaptcha plugin for Joomla 1.5 at https://code.google.com/p/joomla-recaptcha/, by the way, recommended by developers.google (https://developers.google.com/recaptcha/old/intro).
That plugin is really simple to use. Enough to install the plugin and enable it. This way it's only a matter of use its static methods. One thing I had to do was change the path to the ReCaptcha ajax API, both in components/com_community/helpers/recaptcha.php and in plugins/system/recaptcha/recaptchalib.php. That's because the plugin reference the old path.
I'm working well with server side part of ReCaptcha. So I'm mostly concerned with a client-side issue. To display ReCaptcha snippet, is only a matter of include the line
<div><?php echo ReCaptcha::get('html'); ?></div>
in the template .php.
The ReCaptcha::get static method generates the following piece of code in my template
<div>
<div id='recaptcha_ajax_instance_'></div>
<script type='text/javascript' src='http://www.google.com/recaptcha/api/js/recaptcha_ajax.js'></script>
<script type='text/javascript'>
(function(){
function loadRecaptcha(){
Recaptcha.create('6LcKaAgTAAAAAP3CgGF04VUsWTPGwzDs3EaVlajH','recaptcha_ajax_instance_');
}
if( window.addEvent ){
window.addEvent('domready', loadRecaptcha);
}
else{
if( window.addEventListener ){ window.addEventListener('load', loadRecaptcha); }
else if( window.attachEvent ){ window.attachEvent('onload', loadRecaptcha); }
else{ old = window.onload; window.onload = function(){ if( old && typeof old == 'function'){ old(); } loadRecaptcha(); }; }
}
})();
</script>
</div>
That issue is simply the button to reload captcha doesn't work. Neither mouse changes to pointer when hovering button, nor button change the words when clicked. The two other buttons (audio chalange and help) work well.
I wondering if the code above is outdated with the most updated API in google URL.
If somebody could help, I appreciate.
i'm in the nth hour of trying the following: i'd like to add text/html snippets before the title of an event as displayed in the fullcalendar (i.e. inside of <div class="fc-event-title">). These snippets would be one of the following:
<span class="info">registration needed</span>
<span class="cancelled">course cancelled</span>
<span class="ok">held as planned</span>
blank value/no additional text
I tried to copy wp-fullcalendar.php into my theme's directory hoping to be able to edit the function but couldn't accomplish to overwrite the original file - anyplace i tried to put it.
I then tried working in the source file, for a test i did (line 199 in original wp-fullcalendar.php):
$title = 'LLL' . $post->post_title; which did nothing to the output in the calendar.
After a while i completely removed the function 'function ajax()' from wp-fullcalendar.php and the calendar still displays just fine. Seems to be the wrong place (which it is anyway as it's a source file, i know).
I was hoping to find a quick way to accomplish my task but as you can see i'm stuck.
Any help on the matter would be highly appreciated. Thank you,
Frank
Update:
i added a custom attribute 'Kurstyp' to each Event.
possible values for it are: empty string (ie no extra span), 'please register', 'event cancelled', 'held as planned'
i would like all non empty values to appear within <div class="fc-event-title">
best each wrapped in a span with an individual class for styling purposes
this is what i added to wp-fullcalendar.php:
add_action('wp_ajax_wpfc_custominfo',array('WP_FullCalendar','custominfo') );
add_action('wp_ajax_nopriv_wpfc_custominfo', array('WP_FullCalendar','custominfo') );
// and further down
function custominfo() {
if( !empty($_REQUEST['post_id']) ){
$return = get_post_meta($_REQUEST['post_id'], 'Kurstyp', true);
}
echo apply_filters('wpfc_custominfo', $return);
die();
}
// then, inside the event.render part within fullcalendar_args
if(event.post_id > 0) {
alert('event.title (1st): ' + event.title);
var custominfo = {action: 'wpfc_custominfo', post_id: event.post_id};
var extra = $.ajax({
url: WPFC.ajaxurl,
type: "POST",
data: custominfo
});
extra.done(function(addtxt) {
event.title = addtxt + event.title;
alert('event.title (2nd): ' + event.title);
});
}
alert('event.title (3rd): ' + event.title);
addtxt delivers the correct value but my 3rd alert fires before the 2nd one, so event.title remains unchanged
all of this takes place in the original source, i'd want to change this even if it worked
also, even if it worked: how to style the different messages accordingly?
might the attribute className of the Event Object be helpful and if so, how?
The Texts used would be german, tried to use english here for better reading.
Thanks for your help, Frank
I am using code like this to detect the browser and apply a condition to display or not display <label>:
#{
var settings = Model.PartFieldDefinition.Settings.GetModel();
System.Web.HttpBrowserCapabilitiesBase theBrow = Request.Browser;
}
<fieldset>
#{
if ((theBrow.Browser == "IE") && (theBrow.MajorVersion < 10))
{
#:<label>#Model.DisplayName</label>
#://Some Code for inputs
}
else
{
#://Some Code for inputs
}
}
</fieldset>
I have been trying to figure out if I can (and if so, how) I could utilize this logic to detect what path in the website the user is in to display or not display <label>
For example, on any other path I want the label displayed. However, for the pages under ~/Services (the path), I want to be able to hide the label.
It's a little bit more complicated than that. The code is in an editor template that gets used all over the site. If I use CSS in the editor template to "hide" the label I will affect all the pages. I was hoping with the above logic I can avoid that and only apply my logic on certain pages under a path.
Thanks.
Update
I have tried the following:
#{
string CurrentURL = Request.ApplicationPath;
}
<fieldset>
#{
if ((CurrentURL == "Services")) // also tried "/Services"
// rest of code left out for brevity
}
but the labels are hidden on all pages, even outside the path "~/Services". Am stuck on the syntax.
Found answer
I did the following:
#{
string CurrentURL = Request.Url.AbsoluteUri;
}
<fieldset>
#{
if (CurrentURL.Contains("Services"))
}
and it worked. I don't know if anyone can comment, but which would be better to use: Request.Url.AbsoluteUri or Request.Url.ToString() (both of which work)?
I want to make a simple url validator for some custom fields. I tried the default ones (adding the class validate-url or validate-clean-url to the input) - but these don't work quite as I would like them to, so I want to write some of my own javascript, but integrated with the prototype validation.
Does anyone have any ideas how I can do this?
I didn't find anything helpful in my searches, and I am not very Prototype-savy (worked mostly with jQuery).
You can create your own custom validation function using
<script type="text/javascript">
var theForm = new VarienForm('theForm', true);
Validation.add('validate-must-be-baz','You failed to enter baz!',function(the_field_value){
if(the_field_value == 'baz')
{
return true;
}
return false;
});
</script>
See http://magento-quickies.tumblr.com/post/6579512188/magento-custom-form-validation
or
if(Validation) {
Validation.addAllThese([
[
'validation-myown',
'Please insert proper word',
function(v,r){ return v.indexOf('valid')==-1?false:true }
],
[ ]
])
}
see http://blog.baobaz.com/en/blog/custom-javascript-form-validators
In /js/prototype/validation.js (or the files for this kind of thing you have). You have a section with an array of :
classname :message on fail : function(v){your check return true/false;} to check if v is valid or not
This section is around line 420.
You can add your validation to this array or modify validate-url here is what it looks like :
['validate-url', 'Please enter a valid URL. Protocol is required (http://, https:// or ftp://)', function (v) {
v = (v || '').replace(/^\s+/, '').replace(/\s+$/, '');
return Validation.get('IsEmpty').test(v) || /^(http|https|ftp):\/\/(([A-Z0-9]([A-Z0-9_-]*[A-Z0-9]|))(\.[A-Z0-9]([A-Z0-9_-]*[A-Z0-9]|))*)(:(\d+))?(\/[A-Z0-9~](([A-Z0-9_~-]|\.)*[A-Z0-9~]|))*\/?(.*)?$/i.test(v)
}],
Edit : R.S answered maybe better by showing how to do without changing the js file. More convenient ;)
I have an box in Page1 with some different alternatives and below this a div where I want to load in content (different divs) from an external page (Page2) based on choosen alternative.
Page1
<select id="choose_alternative">
<option> Books </option>
<option> Paper </option>
</select>
Page2
<div id="Book_div">Content</div>
<div id="Paper_div">Content</div>
I found THIS POST and tried figure out how to use the code and ended up with this:
$("#choose_alternative").change(function(){
$("#show_alternative").load( $(Page2.html #Book_div).val() );
$("#show_alternative").load( $(Page2.html #Paper_div).val() );
});
Does anybody know what I have done wrong?
Thanks.
If I understand your question right, what you want to do is according to the selection load the div. check the code below.
$("#choose_alternative").change(function(){
var choose_alternative = $("#choose_alternative option:selected").text();
if(choose_alternative == 'Books'){
$("#show_alternative").load('Page2.html #Book_div');
}
else if(choose_alternative == 'Paper'){
$("#show_alternative").load('Page2.html #Paper_div');
}
});
else you can just load the content right away
$("#choose_alternative").change(function(){
$("#show_alternative").load("Page2.html #Book_div");
$("#show_alternative").load("Page2.html #Paper_div");
});
Read more
Here is the relevant part of the documentation:
http://api.jquery.com/load/#loading-page-fragments
It says to do it like this:
$("#choose_alternative").change(function(){
$("#show_alternative").load("Page2.html #Book_div");
$("#show_alternative").load("Page2.html #Paper_div");
});
Ok I dont get it to work so something is wrong. Its strange becuse there is other similar scripts on the same page that works great.
$(document).ready(function (){
$('#choose_alternative').change(function(){
$show_alternative = $('#show_alternative');
var selectedElement = $('#choose_alternative :selected');
switch($(selectedElement).val())
{
case " Books ":
$show_alternative.load('Page2.html #Book_div');
break;
case " Paper ":
$show_alternative.load('Page2.html #Paper_div');
break;
default:
$show_alternative.html('No option selected.');
break;
}
}
}
Never forget the $(document).ready( function(){...}) part; it is what renders your code so it can be triggered.