A perfect example of this technique can be seen on the https://www.inwx.de/en site. Here the input field with the titel "Find your desired domain" shows an typing effect as a placeholder, where text is typed and deleted. I wanted to ask where to start to build this effect. I couldn't find something on the internet about this "effect". ;)
Try this one: typing.js
After download the file and link them in your HTML file, you just need to set var isPlaceholder = true; and put the text in var strings = new Array("www.yourdomain.com").
Like this:
<input id="words" type="text" name="domain" value="" placeholder="">
<script>
var strings = new Array("www.yourdomain.com")
var typingSpeed = 100;
var deleteSpeed = 40;
var isLoop = true;
var isPlaceholder = true;
</script>
If you're using this, let me know!
I'd love to see it.
Related
I am using the kendoEditor control and setting the insertLineBreak option but I would also like to remove the <p> tag that it is adding to the text. Is there a setting I can use like the insertLineBreak option?
var kendoEditor = $("#txtkendoEditor").data("kendoEditor");
if (!kendoEditor) {
var defaultTools = kendo.ui.Editor.defaultTools;
defaultTools["insertLineBreak"].options.shift = false;
$("#txtkendoEditor").kendoEditor({
encoded: false,
tools: []
});
}
You can use delete the insertParagraph setting, however that will change it from inserting a <p> to inserting a <br> which may not be exactly what you want:
delete defaultTools["insertParagraph"].options;
Additional information here: https://docs.telerik.com/kendo-ui/controls/editors/editor/how-to/customize/change-p-to-br-tag
I don't know how can't I find any examples on this, like no one used it before..
I want to open file manager in iframe and on images click to insert image url to input. Their example opens new window...
I am using laravel file manager standalone button to change avatar image but by their docs I can do it like this:
<div class="input-group">
<span class="input-group-btn">
<a id="lfm" data-input="thumbnail" data-preview="holder" class="btn btn-primary">
<i class="fa fa-picture-o"></i> Choose
</a>
</span>
<input id="thumbnail" class="form-control" type="text" name="filepath">
</div>
<img id="holder" style="margin-top:15px;max-height:100px;">
And calling $('#lfm').filemanager('image');
Which works but it opens new window because this is .filemanager()
(function( $ ){
$.fn.filemanager = function(type, options) {
type = type || 'file';
this.on('click', function(e) {
var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager';
localStorage.setItem('target_input', $(this).data('input'));
localStorage.setItem('target_preview', $(this).data('preview'));
window.open(route_prefix + '?type=' + type, 'FileManager', 'width=900,height=600');
window.SetUrl = function (url, file_path) {
//set the value of the desired input to image url
var target_input = $('#' + localStorage.getItem('target_input'));
target_input.val(file_path).trigger('change');
//set or change the preview image src
var target_preview = $('#' + localStorage.getItem('target_preview'));
target_preview.attr('src', url).trigger('change');
};
return false;
});
}
})(jQuery);
Now changing:
window.open(route_prefix + '?type=' + type, 'FileManager', 'width=900,height=600');
To:
$('iframe').attr('src', route_prefix + '?type=' + type);
Will append filemanager to iframe as I want but when I click on image inside iframe it opens image in new tab as it is setting new url but skipping the script?
I think that I could get image url if it was opening in iframe but it is not...
Do you maybe know how to do this?
Thanks
I found out answer for my needs, not finished one tho but it works as needed:
Open up script.js from vendor/..../js folder and change useFIle function if/else statement where it looks up are you using any editor (cke,mce,etc..) and if not it just opens image in new window.
I remove that option and added this:
// parent.document.getElementById(field_name).value = url;
var target_input = parent.document.getElementById(localStorage.getItem('target_input'));
target_input.value = url;
//set or change the preview image src
var target_preview = parent.document.getElementById(localStorage.getItem('target_preview'));
target_preview.src = url;
From my question you can see jquery-plugin for opening laravel-filemanager into iframe and adding elements to localstorage.
I used that elements from localstorage in iframe to append url in input and display image in holder.
Now I will change this a little bit, since I wan't to leave this script as it is for full manager page on that url. I will just add another field as uri to be able to say this url is opened by iframe and use someOtherFUnction instead of useFile function by default.
i'm facing problem with google places api.
When I input "new delhi" it shows "New Delhi, Delhi 110001, India " on my site page : https://www.fabstage.com/professionals/ . But on any other site it shows
"New Delhi, Delhi, India ". And this happens only for this location(new delhi).
check here: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
I want same input because it's not getting correct result for location search query. Please help.
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKvFWo1zxb71vCtFRIq2z4oz2h5EEZYPQ&v=3.exp&libraries=places" type="text/javascript"></script>
<input type="text" class="autocomplete form-control" id="search_city" placeholder="Input City Location">
<script type="text/javascript">
var mydiv = document.getElementsByClassName('autocomplete')[0];
google.maps.event.addDomListener(mydiv, 'click', function(){
var options = {
types: ['(regions)']
};
var input = document.getElementsByClassName('autocomplete')[0];
if(input){
var autocomplete = new google.maps.places.Autocomplete(input , options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var dat = autocomplete.getPlace();
$("#search_city").val(dat.formatted_address);
/***On keyup event**/
var input_data = dat.formatted_address;
var path = $('#path').val();
var path = $('#main_path').val();
if(input_data) {
var checkPath = path.substr(path.length - 1);
if(checkPath == '/') {
var new_href = path+'city/'+input_data.toLowerCase()
.replace(/ /g,'-')
.replace(/[^\w-]+/g,'');
}else {
var new_href = path+'/city/'+input_data.toLowerCase()
.replace(/ /g,'-')
.replace(/[^\w-]+/g,'');
}
} else {
var new_href = path;
}
$('#find_city').attr('href', new_href);
});
}
});
</script>
If you take a closer look at the docs the Google maps api has different options for results to be returned. The example that you have referenced only uses places for autocomplete. If you only want places and not addresses make sure you have set the Google maps api set to only return places.
EDIT:
After inspecting the results of the http request on your site and the plunker the same json object is returned. They both contain the same value for formatted address.
"formatted_address" : "New Delhi, Delhi 110001, India",
However, the code you have provided modifies the formatted address to get rid of the zip code. So I would check to make sure your site is doing the same thing.
I really need some support regarding magento:
on this page: https://goo.gl/wTeUtG
If the option changed out of the dropdown, like from 150 Gramm to 200 Gramm, the ingredients (on this page as "Zutaten") also should be updated. But only the price is going to change not the text right into tooltip on "Zutaten".
How or where can I do this?
That's what I have tried so far:
I've created a new attribute and put it into the checkbox.phtml. This is the code for it:
<p>
<label>Zutaten:</label>
<a class="tooltips" href="#">
<img src="https://shop.ellyseidl.de/skin/frontend/base/default/pektsekye/optionbundle/info_icon.gif" width="11px" height="11px" />
<span><strong>Zutaten:</strong>
<?php echo Mage::getModel('catalog/product')->load($_selection->getId())->getData('zutaten'); ?>
</span>
</a>
</p>
But it doesn't change the tooltip once a option is selected
I guess you will have to do it manually with jQuery since you are using it on your page, by adding event on change on the select box with the id="attribute154" or the class="super-attribute-select".
You will have to change the text in the tooltip according to the option being selected.
EDIT:
jQuery('#attribute154').on('change', function() {
var selectedVal = jQuery(this).val();
//If you want to change the tooltip according to the selected text this is how you can get it:
var selectedText = jQuery(this).find("option:selected").text();
if (selectedVal != '') {
var ingredientsText = '';
if (selectedText == '150 Gramm') {
ingredientsText = 'Ingredients for 150 Gramm';
} else if (selectedText == '200 Gramm') {
ingredientsText = 'Ingredients for 200 Gramm';
}
//And so on
jQuery('.tooltips').find('span:first').html('Zutaten:'+' Folgen in Kürze: '+ingredientsText);
} else {
jQuery('.tooltips').find('span:first').html('Zutaten:'+' Folgen in Kürze: ');
}
});
Please have in mind that you must change the text the way you need it. I still don't know what you have to add in the tooltip, but I just tested this on your site and it works. According to the text Folgen in Kürze which means coming soon, not sure what is the text you need to update.
EDIT2:
The ingredientsText var will depend on the quantity of Gramm selected, if they are static you can enter them in the code by yourself, if they are dynamic, you will have to add them somewhere in the HTML in a hidden <div> for example and then fetch them with JS from there.
I have set of code for updating a password in the table, here I'm using CGI::AJAX module to update the password and get the popup screen on corresponding execution.When using that code with my application it is executing properly but I didn't get the output(means Perl subroutine is not called when JavaScript function to get use.password is not updated into table). I don't get any error either.
#!/usr/bin/perl -w
use strict;
use CGI;
use DBI;
use Data::Dumper;
my $p = new CGI qw(header start_html end_html h1 script link);
use Class::Accessor;
use CGI::Ajax;
my $create_newuser;
my $ajax = new CGI::Ajax('fetch_javaScript' => $create_newuser);
print $ajax->build_html($p,\&Show_html,{-charset=>'UTF-8', -expires=>'-1d'});
sub Show_html
{
my $html = <<EOHTML;
<html>
<body bgcolor="#D2B9D3">
<IMG src="karvy.jpg" ALT="image">
<form name='myForm'>
<center><table><tr><td>
<div style="width:400px;height:250px;border:3px solid black;">
<center><h4>Create New Password's</h4>
<p>  User Name</b>       <INPUT TYPE="text" NAME="user" id = "user" size = "15" maxlength = "15" tabindex = "1"/></p>
<p>  Password:</b>         <INPUT TYPE=PASSWORD NAME="newpassword" id = "newpassword" size = "15" maxlength = "15" tabindex = "1"/></p>
<p>  Re-Password:</b>   <INPUT TYPE=PASSWORD NAME="repassword" id = "repassword" size = "15" maxlength = "15" tabindex = "1"/></p>
<input type="submit" id="val" value="Submit" align="middle" method="GET" onclick="fetch_javaScript(['user','newpassword','repassword']);"/><INPUT TYPE="reset" name = "Reset" value = "Reset"/>
<p>Main Menu <A HREF = login.pl>click here</A>
</center>
</div>
</td></tr></table></center>
</form>
</body>
</html>
EOHTML
return $html;
}
$create_newuser =sub
{
my #input = $p->params('args');
my $user=$input[0];
my $password=$input[1];
my $repassword=$input[2];
my $DSN = q/dbi:ODBC:SQLSERVER/;
my $uid = q/123/;
my $pwd = q/123/;
my $DRIVER = "Freetds";
my $dbh = DBI->connect($DSN,$uid,$pwd) or die "Coudn't Connect SQL";
if ($user ne '')
{
if($password eq $repassword)
{
my $sth=$dbh->do("insert into rpt_account_information (user_id,username,password,user_status,is_admin) values(2,'".$user."','".$password."',1,1)");
my $value=$sth;
print $value,"\n";
if($value == 1)
{
print 'Your pass has benn changed.Return to the main page';
}
}
else
{
print "<script>alert('Password and Re-Password does not match')</script>";
}
}
else
{
print "<script>alert('Please Enter the User Name')</script>";
}
}
my $create_newuser;
my $ajax = new CGI::Ajax('fetch_javaScript' => $create_newuser);
...;
$create_newuser =sub { ... };
At the moment when you create a new CGI::Ajax object, the $create_newuser variable is still undef. Only much later do you assign a coderef to it.
You can either assign the $create_newuser before you create the CGI::Ajax:
my $create_newuser =sub { ... };
my $ajax = new CGI::Ajax('fetch_javaScript' => $create_newuser);
...;
Or you use a normal, named subroutine and pass a coderef.
my $ajax = new CGI::Ajax('fetch_javaScript' => \&create_newuser);
...;
sub create_newuser { ... }
Aside from this main error, your script has many more problems.
You should use strict instead of the -w option.
For debugging purposes only, use CGI::Carp 'fatalsToBrowser' and sometimes even with warningsToBrowser can be extremely helpful. Otherwise, keeping a close eye on the error logs is a must.
my $p = new CGI qw(header start_html end_html h1 script link) doesn't make any sense. my $p = CGI->new should be sufficient.
use Class::Accessor seems a bit random here.
The HTML in Show_html is careless. First, your heredocs allows variable interpolation and escape codes – it has the semantics of a double quoted string. Most of the time, you don't want that. Start a heredoc like <<'END_OF_HTML' to avoid interpolation etc.
Secondly, look at that tag soup you are producing! Here are some snippets that astonish me:
bgcolor="#D2B9D3", align="middle" – because CSS hasn't been invented yet.
<center> – because CSS hasn't been invented yet, and this element isn't deprecated at all.
<table><tr><td><div ... </div></td></tr></table> – because there is nothing wrong with a table containing a single cell. (For what? This isn't even for layout reasons!) This table cell contains a single div …
… which contains another center. Seriously, what is so great about unneccessary DOM elements that CSS isn't even an option.
style="width:400px;height:250px;border:3px solid black;" – because responsive design hasn't been invented yet.
<p> ... </b> – Oh, what delicious tag soup!
        – this isn't a typewriter, you know. Use CSS and proper markup for your layout. There is a difference between text containing whitespace, and empty areas in your layout.
tabindex = "1" … tabindex = "1" … tabindex = "1" – I don't think you know what tabindex does.
<A HREF = login.pl> – LOWERCASING OR QUOTING YOUR ATTRIBUTES IS FOR THE WEAK!!1
onclick="fetch_javaScript(['user','newpassword','repassword']);" – have you read the CGI::Ajax docs? This is not how it works: You need to define another argument with the ID of the element where the answer HTML is displayed.
In your create_newuser, you have an SQL injection vulnerability. Use placeholders to solve that. Instead of $sth->do("INSERT INTO ... VALUES('$foo')") use $sth->do('INSERT INTO ... VALUES(?)', $foo).
print ... – your Ajax handler shouldn't print output, instead it should return a HTML string, which then gets hooked into the DOM at the place your JS function specified. You want something like
use HTML::Entities;
sub create_newuser {
my ($user, $password, $repassword) = $p->params('args');
my ($e_user, $e_password) = map { encode_entities($_) } $user, $password;
# DON'T DO THIS, it is a joke
return "Hello <em>$e_user</em>, your password <code>$e_password</code> has been successfully transmitted in cleartext!";
}
and in your JS:
fetch_javaScript(['user','newpassword','repassword'], ['answer-element'], 'GET');
where your HTML document somewhere has a <div id="answer-element" />.