I have a textbox in a form and I want to use MathJax.I have downloaded it, but don't know how to use it.
I am using ASP-MVC3.
Thanks for your helps.
I found the issue.Its just needed to load js files from mathjax.org and add these lines to the head tag.
<script type="text/javascript">
$(document).ready(function () {
MathJax.Hub.Config({ TeX: { equationNumbers: { autoNumber: "all" } } });
});
</script>
<script src="~/Scripts/MathJax.js?config=Tex-AMS_HTML"></script>
And now its just needed to add the characters $$ and \\ to the text in the following form and append it to something like a div.
jQuery("#radikal").on('click', function () {
var x="$$\\sqrt[3]{8}$$";
$("#formul").append(x);
});
<input type="button" id="radikal"/>
<div id="formul"></div>
And now we will have a radical in div#radikal.
Thats all.
Related
How to add google reCAPTCHA with the newsletter in magento to stop receiving newsletter emails in the spam.
Add the below code in the "form file" under the form tag to resolve your query.
<div class="recaptcha" style="overflow:hidden;position:relative;">
<input type="checkbox" id="recaptcha-verification-1" name="recaptcha-verification-1" value="" class="hide required-entry" style="visibility:hidden;position:absolute;left:-1000000px" />
<div id="recaptcha-1"></div>
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('recaptcha-1', {
'sitekey': "6Lf9tBcTAAAAAEbCd2XlhPGH3o850Qp9ZMJJ2fr2",
'theme': "light",
'callback': function(response) {
if (response.length > 0) {
$('recaptcha-verification-1').writeAttribute('value', 'checked');
$('recaptcha-verification-1').checked = true;
}
}
});
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit&hl=en" async defer></script></div>
I was facing the same issue and I made it solved one extension "Google Invisible reCaptcha"
Wait... I changed few modifications in JS code also.
After installing extension set Site key and secret in admin side and open subscription.phtml
YOUR-PROJECT/app/design/frontend/YOURTHEME/default/template/newsletter/subscribe.phtml
Add code just after Form Tag.
<div class="g-recaptcha" data-sitekey="YOUR-SITE-KEY"></div>
In the last of file add this JS Snippet.
<script src='https://www.google.com/recaptcha/api.js'></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#recaptcha_response_field').addClass('required-captcha-entry');
})
var yourFormValidationObj = new VarienForm('newsletter-validate-details');
Validation.add('required-captcha-entry', ' ', function(v) {
return !Validation.get('IsEmpty').test(v);
})
</script>
It worked for me. Cheers if it works for you..
in my website, I have a singn_up-form and use the Google-Api to give the user some suggestions. The API requests the location of the user once in Internet-Explorer. But if I try Firefox, the requests are looped until I click "Standort immer Freigeben" - it means "always accept".
function initialize() {
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),
{ types: ['geocode'] });
}
The code is loaded at document.ready and contains more code, but this snippet also reproduces the error.
Does anyone has some ideas?
Try this :
put the apis in your <head></head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=places"></script>
put this in your body tag:
<label for="autocomplete">Please Insert an address:</label>
<br>
<input id="autocomplete" type="text" size="100">
put this in your onload function:
var input = document.getElementById('autocomplete');
new google.maps.places.Autocomplete(input);
this is my code :
var input = document.getElementById('autocomplete');
new google.maps.places.Autocomplete(input);
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=places"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<label for="autocomplete">Please Insert an address:</label><br>
<input id="autocomplete" type="text" size="100">
</body>
</html>
You might have kept some onfocus attribute as given in Google Maps API Example
<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
OR
If you don't require keeping bounds for places suggestions, you may want to remove it
OR
If you need to set bounds for suggestions keep some condition to not call location consent every time, if user gives permission.
Please keep your condition in geolocate() function
Issue is happening only in Mozilla FireFox
What you want to do is this:
function handlePermission() {
navigator.permissions.query({name:'geolocation'}).then(function(result) {
if (result.state == 'granted') {
geoBtn.style.display = 'none';
} else if (result.state == 'prompt') {
geoBtn.style.display = 'none';
navigator.geolocation.getCurrentPosition(revealPosition,positionDenied,geoSettings);
} else if (result.state == 'denied') {
geoBtn.style.display = 'inline';
}
});
}
then put handlePermission(); after your callback function receives permission
HTML:
<a class="targetLink" href="#">LINK1</a>
<div id="text1" style="display: none;">text1 div</div>
<a class="targetLink" href="#">LINK2</a>
<div id="text2" style="display: none;">text2 div</div>
<a class="targetLink" href="#">LINK3</a>
<div id="text3" style="display: none;">text3 div</div>
JS:
$("a.targetLink").toggle(function() {
$(".open").slideUp(350);
$(this).next("div").slideDown(350).addClass("open");
}, function() {
$(this).next("div").slideUp(350).removeClass("open");
});
It works this way: when u press a link with class "targetLink" it opens a DIV below it. Now i need to modify js code to: when i click then link it scrolls to the beginning of that opened div. How can i achieve it? Thanks in advance.
Use scrollTop on the element that you want to scroll to the top of. http://api.jquery.com/scrollTop/
example:
$(this).next("div").scrollTop(0);
I think this is what you need, and maybe more: My jsfiddle. I'm not sure what you've got working so far, but this does what i think you're going for, without the need for additional jquery plugins, etc.
here's the JS(check the jsfiddle for html):
$(".pop").hide();
$(".targetLink").on("click", function(e) {
e.preventDefault();
var n = $(this).next();
if(!$(n).hasClass('open')){
$(".open").removeClass('open').slideUp(200);
$(n).addClass('open').slideDown(200);
}
});
$(".nav").on("click", function(event){
event.preventDefault();
var dest=null;
if(($($(this.hash)).offset().top) > ($(document).height()-$(window).height())){
dest= $(document).height()-$(window).height();
}else{
dest=$($(this.hash)).offset().top;
}
$($(this.hash)).trigger("click");
$('html,body').animate({scrollTop:dest}, 500, 'swing' );
});
Try this really great and simple jQuery plugin - https://github.com/Ashwell/jquery-scrollThis
This should do what you're asking for:
self.scrollToDiv = function scrollToDiv(element,minus){
element = element.replace("link", "");
if(minus==null){
minus=0;
}
$('html,body').unbind().animate({scrollTop: $(element).offset().top+minus},'slow');
};
So I am making a test app using RequireJs, Mustache and Backbone.js. I had some success with rendering the collection of models with the Mustache template. But my Mustache template has a button and when I try to bind click event on the button in the view, the button click doesn't invoke the callback function. I am really stuck, can someone tell me where I am not doing right?
Here is my code:
ItemView.js:
define(['jquery', 'backbone', 'underscore', 'mustache', '../../atm/model/item'], function ($, Backbone, _, Mustache, Item) {
var ItemView = Backbone.View.extend({
initialize: function() {
},
tagName: 'li',
events: {
'click .button': 'showPriceChange'
},
render: function() {
var template = $('#template-atm').html();
var itemObj = this.model.toJSON();
itemObj['cid'] = this.model.cid;
var rendering = Mustache.to_html(template, itemObj);
this.el = rendering;
return this;
},
showPriceChange: function(event) {
alert('Changing...');
$('#' + elemId).empty();
$('#' + elemId).append(document.createTextNode('Changed'));
},
});
return ItemView;
});
atm.html:
<!DOCTYPE html>
<html>
<head>
<title>Elevator</title>
<script data-main="scripts/main" src="scripts/require-jquery.js"></script>
<style type="text/css">
</style>
</head>
<body>
<h1>Vending Machine</h1>
<div id="atm-items">
</div>
<script id="template-atm" type="html/template">
<li>
<p>Item: {{name}}</p>
<label for="price-{{cid}}">Price:</label>
<input id="price-{{cid}}" type="text" value="{{price}}"/>
<button class="button">Change</button>
<p id="status-{{name}}-{{cid}}">- -</p>
</li>
</script>
</body>
</html>
You're replacing the view's el inside render:
render: function() {
//...
this.el = rendering;
//...
}
When you do that, you're losing the jQuery delegate that is attached to this.el, that delegate handler (which Backbone adds) is responsible for the event routing.
Usually, you add things to this.el rather than replacing this.el. If your template looked like this:
<script id="template-atm" type="html/template">
<p>Item: {{name}}</p>
<label for="price-{{cid}}">Price:</label>
<input id="price-{{cid}}" type="text" value="{{price}}"/>
<button class="button">Change</button>
<p id="status-{{name}}-{{cid}}">- -</p>
</script>
then you would this.$el.append(rendering) in your view's render; this would give you an <li> in this.el since you've set your view's tagName to li.
Alternatively, if you really need to keep the <li> in the template, you could use setElement to replace this.el, this.$el, and take care of the event delegation:
this.setElement(rendering);
Presumably you're wrapping all these <li>s in a <ul>, <ol>, or <menu> somewhere else; if you're not then you're producing invalid HTML and the browser might try to correct it for you, the corrections might cause you trouble elsewhere as your HTML structure might not be what your selectors think it is.
Can anyone tell me why this happens.
The following code works perfectly, I get the datepicker in German:
<input id="foo" type="text"> pick it
<script>
$(function() {
$( "#foo" ).datepicker();
$.datepicker.setDefaults( $.datepicker.regional[ "de" ] );
});
</script>
But the following code doesn't work (I get the datepicker in Japanese):
<input id="foo" type="text"> pick it
<script>
$(function() {
$( "#foo" ).datepicker();
$( "#foo" ).datepicker( $.datepicker.regional[ "de" ] );
});
</script>
Here are my include files :
http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js
Side note. According to the docs http://jqueryui.com/demos/datepicker/ it should work. Can anyone reproduce this?
If you your regional code is not recognized by the plugin it sets japanese...
http://jsfiddle.net/IrvinDominin/rGpCE/1/
I reproduce it; you can change your code in this way:
$(function() {
$("#foo").datepicker();
$("#foo").datepicker("option", $.datepicker.regional["de"])
});
Updated fiddle: http://jsfiddle.net/IrvinDominin/rGpCE/2/